12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- import React, { Component } from 'react';
- import { SortableContainer, SortableElement } from 'react-sortable-hoc';
- import { arrayMoveImmutable } from 'array-move';
- import { Card, Button } from 'antd';
- import { ImgGood } from '.';
- const SortableItem = SortableElement(({ value: { _id, url, onSave } }) =>
- <li className='liSortTable'>
- <Card>
- <ImgGood url={url} />
- <Button onClick={onSave}>Сохранить</Button>
- </Card>
- </li>);
- const SortableList = SortableContainer(({ items, idGood, onSave, onChangeImagesOnSer }) => {
- return (
- <>
- <ul className='sortTablelist' >
- {items.map((value, index) => (
- <SortableItem key={`item-${index}`} index={index} value={
- {
- _id: value._id,
- url: value.url,
- onSave: () => onSave(value._id)
- }
- } />
- ))}
- </ul>
- <Button type="primary" block onClick={onChangeImagesOnSer}>Сохранить на сервере</Button>
- </>
- );
- });
- class SortableComponent extends Component {
- state = {
- items: this.props.images,
- idGood: this.props.idGood,
- clearUpLoad: this.props.clearUpLoad
- };
- getState =() => console.log('this.state', this.state)
- onSortEnd = ({ oldIndex, newIndex }) => {
- this.setState(({ items }) => ({
- items: arrayMoveImmutable(items, oldIndex, newIndex)
- }));
- this.getState();
- };
- onChangeImagesOnSer = () => {
- const arrImagesForSave = this.state.items.map((item) => ({ _id: item._id }));
- this.props.onChangeArrInGood(this.state.idGood, arrImagesForSave);
- }
- onSave = (idImg) => {
- const newArrImgs = this.state.items.map((item) => {
- if (idImg === item._id) {
- return {
- _id: this.props.upLoad._id,
- url: this.props.upLoad.url
- };
- };
- return item;
- });
- this.setState(() => ({ items: newArrImgs }));
- this.state.clearUpLoad();
- }
- render () {
- return (
- <SortableList
- axis="xy"
- items={this.state.items}
- idGood={this.state.idGood}
- onSortEnd={this.onSortEnd}
- onSave={this.onSave}
- onChangeImagesOnSer={this.onChangeImagesOnSer}
- />);
- }
- }
- export default SortableComponent;
|