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 arrayMove from 'array-move';
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 {
state = {
items: ['استقلال', 'پرسپولیس', 'سپاهان'],
@ -31,6 +13,7 @@ export default class DraggableMessage extends Component {
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
const { message, user, isSelf } = this.props;
return (
@ -53,7 +36,7 @@ export default class DraggableMessage extends Component {
</p>
) : null}
</div>
<SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
<SortableList items={message.options} onSortEnd={this.onSortEnd} />
<button className="message-2d__submit">
ثبت
<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}
</div>
<div className="message-2d__options d-flex flex-wrap justify-content-center">
{message.options.map((row, i) => (
<Row row={row} key={i} />
{message.options.map((row) => (
<Row list={row} />
))}
</div>
<button className="message-2d__submit">
@ -51,24 +51,25 @@ export default class RadioMessage extends Component {
}
}
const Row = (row) => {
const Row = (props) => {
return (
<div
key={i}
onClick={() => this.handleRadioChange(item.name)}
className="message-2d__options--row d-flex"
style={{
backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
color: item.name === this.state.value ? 'white' : 'black',
// backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
// color: item.name === this.state.value ? 'white' : 'black',
}}
>
{row.map((item) => (
<Item item={item} />
))}
{
props.list.map((item) => (
<Item item={item} />
))
}
</div>
);
};
const Item = (item) => {
return <div>{item.name}</div>;
const Item = (props) => {
return <div>{props.item.name}</div>;
};

Loading…
Cancel
Save