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
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> |
|
); |
|
} |
|
}
|
|
|