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.
 
 
 

74 lines
1.8 KiB

import React, { Component } from "react";
import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt";
import { toast } from "react-toastify";
export default class RadioMessage extends Component {
constructor(props) {
super(props);
this.state = {
value: this.props.message.value,
};
}
handleRadioChange = (newValue) => {
if (this.props.isActive)
this.setState({
value: newValue,
});
};
render() {
const { message, isActive } = this.props;
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={this.state.value}
/>
))}
</div>
{isActive && (
<button
className="message-2d__submit"
onClick={() => toast.success(window.t("ثبت شد"))}
>
ثبت
<ArrowRightAltIcon
style={{ color: "white", width: 32, height: 32, marginLeft: 10 }}
/>
</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
? "#6f42c1"
: "rgb(181 224 252 / 47%)",
color: props.item.name === props.value ? "white" : "black",
}}
>
{props.item.name}
</div>
);
};