sortTableComponent.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import React, {Component} from 'react';
  2. import {render} from 'react-dom';
  3. import { SortableContainer, SortableElement } from 'react-sortable-hoc';
  4. import { arrayMoveImmutable } from 'array-move';
  5. import { Image , Card, Button} from 'antd';
  6. // import { arrayMove } from 'react-sortable-hoc';
  7. import { ImgGood } from '.';
  8. const SortableItem = SortableElement(({value:{_id, url, onSave}}) =>
  9. <li className='liSortTable'>
  10. <Card> {console.log('onSave',onSave)}
  11. <ImgGood url={url} />
  12. <Button onClick={onSave}>Сохранить</Button>
  13. </Card>
  14. </li>);
  15. const SortableList = SortableContainer(({items, idGood, onSave, onChangeImagesOnSer}) => {
  16. return (
  17. <>
  18. <ul className='sortTablelist' >
  19. {items.map((value, index) => (
  20. <SortableItem key={`item-${index}`} index={index} value={
  21. {"_id": value._id,
  22. "url":value.url,
  23. "onSave": () => onSave(value._id)
  24. }
  25. } />
  26. ))}
  27. </ul>
  28. <Button type="primary" block onClick={onChangeImagesOnSer}>Сохранить на сервере</Button>
  29. </>
  30. );
  31. });
  32. class SortableComponent extends Component {
  33. state = {
  34. items: this.props.images,
  35. idGood: this.props.idGood,
  36. clearUpLoad: this.props.clearUpLoad,
  37. };
  38. getState =() => console.log('this.state',this.state)
  39. onSortEnd = ({oldIndex, newIndex}) => {
  40. this.setState(({items}) => ({
  41. items: arrayMoveImmutable(items, oldIndex, newIndex),
  42. }));
  43. this.getState();
  44. };
  45. onChangeImagesOnSer = () => {
  46. const arrImagesForSave = this.state.items.map((item) => ({_id: item._id}));
  47. this.props.onChangeArrInGood(this.state.idGood, arrImagesForSave);
  48. }
  49. onSave = (idImg) => {
  50. const newArrImgs = this.state.items.map((item) => {
  51. if (idImg === item._id) {
  52. return {
  53. _id: this.props.upLoad._id,
  54. url: this.props.upLoad.url,
  55. }
  56. };
  57. return item;
  58. });
  59. //console.log('newArrImgs ', newArrImgs )
  60. this.setState(() => ({items: newArrImgs}));
  61. this.state.clearUpLoad();
  62. }
  63. render() {
  64. return <SortableList axis="xy" items={this.state.items} idGood={this.state.idGood} onSortEnd={this.onSortEnd} onSave={this.onSave}
  65. onChangeImagesOnSer={this.onChangeImagesOnSer}
  66. />;
  67. }
  68. }
  69. export default SortableComponent;