linkmore-design/es/lm-upload/UploadList/index.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useMemo } from 'react';
import LmDrag from "../../lm-drag";
import { render } from "../utils";
import RenderItem from "./RenderItem";
var LmUploadList = function LmUploadList(_ref) {
  var instance = _ref.instance;
  var uid = instance.uid,
    getFileHasValue = instance.getFileHasValue,
    getFileList = instance.getFileList,
    itemRender = instance.itemRender,
    listType = instance.listType,
    showUploadList = instance.showUploadList,
    disabled = instance.disabled,
    enableDrag = instance.enableDrag,
    fileNames = instance.fileNames,
    move = instance.move;
  if (!showUploadList) return null;
  var fileList = useMemo(function () {
    var _getFileList, _getFileList$sort;
    /** 判断图片中哪一张是主图,如果没有，默认为第一张 */
    var findKey = getFileList().findIndex(function (list) {
      return !!list.isMain;
    });
    return (_getFileList = getFileList()) === null || _getFileList === void 0 ? void 0 : (_getFileList$sort = _getFileList.sort(function (a, b) {
      return (a === null || a === void 0 ? void 0 : a.seq) - (b === null || b === void 0 ? void 0 : b.seq);
    })) === null || _getFileList$sort === void 0 ? void 0 : _getFileList$sort.map(function (item, index) {
      return _objectSpread(_objectSpread({}, item), {}, {
        isMain: index === findKey || findKey < 0 && index === 0
      });
    });
  }, [getFileList]);
  var handleMove = function handleMove(active, over, fileList) {
    try {
      var fileMap = fileList.map(function (v) {
        if (getFileHasValue(v) === getFileHasValue(active)) {
          return _objectSpread(_objectSpread({}, v), {}, {
            seq: over[fileNames.seq]
          });
        }
        if (getFileHasValue(v) === getFileHasValue(over)) {
          return _objectSpread(_objectSpread({}, v), {}, {
            seq: active[fileNames.seq]
          });
        }
        return v;
      });
      move(active, over, fileMap);
    } catch (error) {
      console.log('移动出现了错误', error);
    }
  };
  if (!disabled && enableDrag) {
    return /*#__PURE__*/React.createElement(LmDrag, {
      options: fileList,
      rowKey: uid,
      move: handleMove
    }, function (_ref2) {
      var item = _ref2.item,
        listeners = _ref2.listeners,
        index = _ref2.index;
      return render(itemRender || RenderItem, {
        type: listType,
        key: getFileHasValue(item) || index,
        index: index,
        file: item,
        fileList: fileList,
        instance: instance,
        listeners: listeners
      });
    });
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, fileList === null || fileList === void 0 ? void 0 : fileList.map(function (file, idx) {
    return render(itemRender || RenderItem, {
      type: listType,
      key: getFileHasValue(file) || idx,
      index: idx,
      file: file,
      fileList: fileList,
      instance: instance
    });
  }));
};
export default /*#__PURE__*/React.memo(LmUploadList);