You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

65 lines
1.6 KiB

import React, { Component } from "react";
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
export default class RadioMessage extends Component {
state = {
value: this.props.message.value,
};
handleRadioChange = (value) => {
if (this.props.isActive) this.setState({ value });
};
render() {
const { message, isActive, action } = this.props;
const { value } = this.state;
return (
<div className="message-2d d-flex flex-column d-flex">
<div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row) => (
<Row
list={row}
handleRadioChange={this.handleRadioChange}
value={value}
/>
))}
</div>
{isActive && (
<button
className="message-2d__submit"
onClick={() => action({ value })}
>
ثبت
<ArrowRightAltIcon />
</button>
)}
</div>
);
}
}
const Row = (props) => {
return (
<div className="message-2d__options--row d-flex">
{props.list.map((item) => (
<Item item={item} {...props} />
))}
</div>
);
};
const Item = (props) => {
return (
<div
onClick={() => props.handleRadioChange(props.item.name)}
style={{
backgroundColor:
props.item.name === props.value
? "rgb(100, 205, 130)"
: "rgba(255, 255, 255, 0.4)",
color: props.item.name === props.value ? "white" : "black",
}}
>
{props.item.name}
</div>
);
};