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
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> |
|
); |
|
};
|
|
|