123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- import React, {Component} from 'react';
- import {render} from 'react-dom';
- import { SortableContainer, SortableElement } from 'react-sortable-hoc';
- import { arrayMoveImmutable } from 'array-move';
- import { Image , Card, Button} from 'antd';
- // import { arrayMove } from 'react-sortable-hoc';
- import { ImgGood } from '.';
- const SortableItem = SortableElement(({value:{_id, url, onSave}}) =>
- <li className='liSortTable'>
- <Card> {console.log('onSave',onSave)}
- <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;
- });
- //console.log('newArrImgs ', newArrImgs )
- 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;
|