reza add 2d support

front
Reza_ashrafi 3 years ago
parent 1f41ec6a12
commit 70c6ebcc5c
  1. 41
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  2. 23
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js

@ -1,26 +1,8 @@
import React, { Component } from 'react'; import React, { Component, useEffect } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move'; import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
const SortableItem = SortableElement(({ row }) => (
<div className="message-2d__options--row d-flex">
{row.map((item) => (
<div>{item.text}</div>
))}
</div>
));
const SortableList = SortableContainer(({ items }) => {
return (
<div className="message-2d__options d-flex flex-column">
{items.map((row, index) => (
<SortableItem key={`item-${index}`} index={index} value={row} />
))}
</div>
);
});
export default class DraggableMessage extends Component { export default class DraggableMessage extends Component {
state = { state = {
items: ['استقلال', 'پرسپولیس', 'سپاهان'], items: ['استقلال', 'پرسپولیس', 'سپاهان'],
@ -31,6 +13,7 @@ export default class DraggableMessage extends Component {
items: arrayMove(items, oldIndex, newIndex), items: arrayMove(items, oldIndex, newIndex),
})); }));
}; };
render() { render() {
const { message, user, isSelf } = this.props; const { message, user, isSelf } = this.props;
return ( return (
@ -53,7 +36,7 @@ export default class DraggableMessage extends Component {
</p> </p>
) : null} ) : null}
</div> </div>
<SortableList items={this.state.items} onSortEnd={this.onSortEnd} /> <SortableList items={message.options} onSortEnd={this.onSortEnd} />
<button className="message-2d__submit"> <button className="message-2d__submit">
ثبت ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} /> <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
@ -62,3 +45,21 @@ export default class DraggableMessage extends Component {
); );
} }
} }
const SortableList = SortableContainer(({ items }) => {
return (
<div className="message-2d__options d-flex flex-column">
{items.map((row, index) => (
<SortableItem key={`item-${index}`} index={index} value={row} />
))}
</div>
);
});
const SortableItem = SortableElement(({ value }) => (
<div className="message-2d__options--row d-flex">
{value.map((item) => (
<div>{item.text}</div>
))}
</div>
));

@ -38,8 +38,8 @@ export default class RadioMessage extends Component {
) : null} ) : null}
</div> </div>
<div className="message-2d__options d-flex flex-wrap justify-content-center"> <div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row, i) => ( {message.options.map((row) => (
<Row row={row} key={i} /> <Row list={row} />
))} ))}
</div> </div>
<button className="message-2d__submit"> <button className="message-2d__submit">
@ -51,24 +51,25 @@ export default class RadioMessage extends Component {
} }
} }
const Row = (row) => { const Row = (props) => {
return ( return (
<div <div
key={i}
onClick={() => this.handleRadioChange(item.name)} onClick={() => this.handleRadioChange(item.name)}
className="message-2d__options--row d-flex" className="message-2d__options--row d-flex"
style={{ style={{
backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)', // backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
color: item.name === this.state.value ? 'white' : 'black', // color: item.name === this.state.value ? 'white' : 'black',
}} }}
> >
{row.map((item) => ( {
<Item item={item} /> props.list.map((item) => (
))} <Item item={item} />
))
}
</div> </div>
); );
}; };
const Item = (item) => { const Item = (props) => {
return <div>{item.name}</div>; return <div>{props.item.name}</div>;
}; };

Loading…
Cancel
Save