import React, { Component } from 'react'; import Avatar from '@material-ui/core/Avatar'; import './index.scss'; import { toast } from 'react-toastify'; export default class Message2D extends Component { state = { value: this.props.message.value }; click(id) { if (this.props.isActive) { this.setState({ value: id }); toast.success('ثبت شد'); this.props.action(); } } render() { const { message, user, isSelf, isActive, action } = this.props; return ( <div className="message-2d d-flex flex-column d-flex"> <div className="message-2d__options d-flex flex-column"> {message.options.map((option, i) => ( <div key={message.id + '_' + option.id + '_' + i} className="message-2d__options--row d-flex" > {option.map((item, i) => ( <div key={message.id + '_' + item.id + '_' + i} className="d-flex" style={{ width: `calc(100% / ${option.length} )`, backgroundColor: item.id == this.state.value ? '#6f42c1' : '', }} onClick={() => this.click(item.id)} > <span>{item.name}</span> </div> ))} </div> ))} </div> </div> ); } }