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

基于antd封装的组件

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _reactDnd = require("react-dnd");
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
var _utils = require("./../utils");
var _jsxRuntime = require("react/jsx-runtime");
var type = 'DragableUploadList';
var DragableUploadListItem = function DragableUploadListItem(_ref) {
  var originNode = _ref.originNode,
    moveRow = _ref.moveRow,
    file = _ref.file,
    fileList = _ref.fileList;
  var ref = (0, _react.useRef)(null);
  var index = fileList.indexOf(file);
  var _useDrop = (0, _reactDnd.useDrop)({
      accept: type,
      collect: function collect(monitor) {
        var _ref2 = monitor.getItem() || {},
          dragIndex = _ref2.index;
        if (dragIndex === index) {
          return {};
        }
        return {
          isOver: monitor.isOver(),
          dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward'
        };
      },
      drop: function drop(item) {
        moveRow(item.index, index);
      }
    }),
    _useDrop2 = (0, _slicedToArray2["default"])(_useDrop, 2),
    _useDrop2$ = _useDrop2[0],
    isOver = _useDrop2$.isOver,
    dropClassName = _useDrop2$.dropClassName,
    drop = _useDrop2[1];
  var _useDrag = (0, _reactDnd.useDrag)({
      type: type,
      item: {
        index: index
      },
      collect: function collect(monitor) {
        return {
          isDragging: monitor.isDragging()
        };
      }
    }),
    _useDrag2 = (0, _slicedToArray2["default"])(_useDrag, 2),
    drag = _useDrag2[1];
  drop(drag(ref));
  var errorNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
    title: "\u4E0A\u4F20\u5931\u8D25",
    children: originNode.props.children
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: ref,
    className: "ant-upload-draggable-list-item ".concat(isOver ? dropClassName : ''),
    style: {
      cursor: 'move'
    },
    children: file.status === 'error' ? errorNode : originNode
  });
};
var UploadGrid = function UploadGrid(props) {
  var _props$fileList = props.fileList,
    fileList = _props$fileList === void 0 ? [] : _props$fileList;
  var _useState = (0, _react.useState)(''),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    previewImage = _useState2[0],
    setPreviewImage = _useState2[1];
  var moveRow = (0, _react.useCallback)(function (dragIndex, hoverIndex) {
    var dragRow = fileList[dragIndex];
    var newFileList = (0, _immutabilityHelper["default"])(fileList, {
      $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
    });
    if (props.onChange) {
      props.onChange({
        fileList: newFileList
      });
    }
  }, [fileList]);
  var onPreview = /*#__PURE__*/function () {
    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(file) {
      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return (0, _utils.imagePreview)(file, function (_ref4) {
              var image = _ref4.image;
              setPreviewImage(image);
            });
          case 2:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function onPreview(_x) {
      return _ref3.apply(this, arguments);
    };
  }();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "upload-grid",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDnd.DndProvider, {
      backend: _reactDndHtml5Backend.HTML5Backend,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Upload, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
        onPreview: onPreview,
        fileList: fileList,
        itemRender: function itemRender(originNode, file, currFileList) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(DragableUploadListItem, {
            originNode: originNode,
            file: file,
            fileList: currFileList,
            moveRow: moveRow
          });
        }
      }))
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, {
      open: !!previewImage,
      footer: null,
      onCancel: function onCancel() {
        return setPreviewImage('');
      },
      bodyStyle: {
        padding: 0
      },
      destroyOnClose: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        style: {
          width: '100%'
        },
        alt: "",
        src: previewImage
      })
    })]
  });
};
var _default = exports["default"] = UploadGrid;
module.exports = exports.default;