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.
 
 
 

60 lines
1.8 KiB

import React, { Component } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
const SortableItem = SortableElement(({ value }) => (
<div className="message-2d__options--draggable d-flex">{value}</div>
));
const SortableList = SortableContainer(({ items }) => {
return (
<div className="message-2d__options d-flex flex-column">
{items.map((value, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} />
))}
</div>
);
});
export default class DraggableMessage extends Component {
state = {
items: ['استقلال', 'پرسپولیس', 'سپاهان'],
};
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState(({ items }) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
const { message, user, isSelf } = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: isSelf ? 0 : 40,
marginLeft: isSelf ? 40 : 0,
}}
>
<img
src={user.imageUri}
style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
alt={message.id}
/>
<div className="message-2d__text d-flex">
{message.text !== null ? (
<p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
{message.text}
</p>
) : null}
</div>
<SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
<button className="message-2d__submit">
ثبت
<ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
</button>
</div>
);
}
}