@antdp/antdp-ui/esm/UploadGrid/index.js

基于antd封装的组件

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import React, { useCallback, useRef, useState } from 'react';
import { Tooltip, Upload, Modal } from 'antd';
import update from 'immutability-helper';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import "./pictureGrid.css";
import { imagePreview } from "./../utils";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var type = 'DragableUploadList';
var DragableUploadListItem = _ref => {
  var {
    originNode,
    moveRow,
    file,
    fileList
  } = _ref;
  var ref = useRef(null);
  var index = fileList.indexOf(file);
  var [{
    isOver,
    dropClassName
  }, drop] = useDrop({
    accept: type,
    collect: monitor => {
      var {
        index: dragIndex
      } = monitor.getItem() || {};
      if (dragIndex === index) {
        return {};
      }
      return {
        isOver: monitor.isOver(),
        dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward'
      };
    },
    drop: item => {
      moveRow(item.index, index);
    }
  });
  var [, drag] = useDrag({
    type,
    item: {
      index
    },
    collect: monitor => ({
      isDragging: monitor.isDragging()
    })
  });
  drop(drag(ref));
  var errorNode = /*#__PURE__*/_jsx(Tooltip, {
    title: "\u4E0A\u4F20\u5931\u8D25",
    children: originNode.props.children
  });
  return /*#__PURE__*/_jsx("div", {
    ref: ref,
    className: "ant-upload-draggable-list-item " + (isOver ? dropClassName : ''),
    style: {
      cursor: 'move'
    },
    children: file.status === 'error' ? errorNode : originNode
  });
};
var UploadGrid = props => {
  var {
    fileList = []
  } = props;
  var [previewImage, setPreviewImage] = useState('');
  var moveRow = useCallback((dragIndex, hoverIndex) => {
    var dragRow = fileList[dragIndex];
    var newFileList = update(fileList, {
      $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
    });
    if (props.onChange) {
      props.onChange({
        fileList: newFileList
      });
    }
  }, [fileList]);
  var onPreview = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(function* (file) {
      yield imagePreview(file, _ref3 => {
        var {
          image
        } = _ref3;
        setPreviewImage(image);
      });
    });
    return function onPreview(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  return /*#__PURE__*/_jsxs("div", {
    className: "upload-grid",
    children: [/*#__PURE__*/_jsx(DndProvider, {
      backend: HTML5Backend,
      children: /*#__PURE__*/_jsx(Upload, _extends({}, props, {
        onPreview: onPreview,
        fileList: fileList,
        itemRender: (originNode, file, currFileList) => /*#__PURE__*/_jsx(DragableUploadListItem, {
          originNode: originNode,
          file: file,
          fileList: currFileList,
          moveRow: moveRow
        })
      }))
    }), /*#__PURE__*/_jsx(Modal, {
      open: !!previewImage,
      footer: null,
      onCancel: () => setPreviewImage(''),
      bodyStyle: {
        padding: 0
      },
      destroyOnClose: true,
      children: /*#__PURE__*/_jsx("img", {
        style: {
          width: '100%'
        },
        alt: "",
        src: previewImage
      })
    })]
  });
};
export default UploadGrid;