linkmore-design/lib/lm-upload/UploadList/ItemPictureCard.js

🌈 🚀lm组件库。🚀

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _image = _interopRequireDefault(require("../../image"));
const renderThumb = file => {
  switch (file.fileExtension) {
    case '':
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-folder-fill"
      });
    case 'jpeg':
    case 'png':
    case 'jpg':
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "lm_upload_item_thumb_error"
      }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-image"
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: "lm_upload_item_name"
      }, file.realFileName));
    case 'mp4':
    case 'm2v':
    case 'mkv':
    case 'ogm':
    case 'webm':
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-video"
      });
    case 'doc':
    case 'docx':
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-file-word"
      });
    case 'ppt':
    case 'pptx':
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-file-ppt"
      });
    case 'xls':
    case 'xlsx':
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-file-excel"
      });
    case 'pdf':
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-file-pdf"
      });
    default:
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-file-text"
      });
  }
};

// 图片列表项
const PictureItem = ({
  file,
  index,
  instance,
  listeners
}) => {
  const {
    dispatch,
    disabled,
    readOnly,
    size,
    remove,
    preview,
    getFileFields,
    showMaster,
    getFileList,
    onChange,
    locale
  } = instance;
  const [isError, setIsError] = (0, _react.useState)(false);

  // 文件信息重组 获取文件名称 => 截取后缀文件名
  const resetFile = (0, _react.useMemo)(() => {
    const fileParams = getFileFields(file);
    const {
      realFileName,
      fileName,
      filename
    } = fileParams;
    const fileExtension = (realFileName || fileName || filename).replace(/.*\./, '')?.toLowerCase();
    return {
      ...fileParams,
      fileExtension,
      isMain: !!file?.isMain
    };
  }, [getFileFields, file]);

  // 预览小图
  const thumbUrl = (0, _react.useMemo)(() => `${resetFile.url}?x-oss-process=image/resize,w_${size}`, [resetFile.url, size]);

  // 根据文件名后缀判断
  const isImg = (0, _react.useMemo)(() => {
    return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(resetFile.fileExtension);
  }, [resetFile]);

  // 重置尺寸大小
  const resetSize = (0, _react.useMemo)(() => {
    const width = size - 16;
    const padding = size > 60 ? 8 : 4;
    const fontSize = size > 60 ? 16 : 12;
    return {
      width,
      padding,
      fontSize
    };
  }, [size]);
  const handlePreview = () => {
    preview?.(file);
    dispatch({
      type: 'changePreview',
      preview: {
        visible: true,
        index
      }
    });
  };

  /** 设为主图 */
  const checkMain = e => {
    e.stopPropagation();
    if (!resetFile?.isMain) {
      const newFileList = getFileList()?.map(item => {
        return {
          ...item,
          isMain: item.fileName === resetFile.fileName
        };
      })?.sort((a, b) => {
        return a.isMain ? -1 : 1;
      })?.map((item, index) => {
        return {
          ...item,
          seq: index
        };
      });
      console.log('newFileList', newFileList);
      dispatch({
        type: 'changeFileList',
        fileList: newFileList
      });
      onChange?.({
        file: resetFile,
        fileList: newFileList
      });
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames.default)('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
    style: {
      height: size,
      width: size
    }
  }, listeners || {}), /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_upload_item_thumb",
    onClick: handlePreview
  }, isError || !isImg ? renderThumb(resetFile) : /*#__PURE__*/_react.default.createElement(_image.default, {
    width: resetSize.width,
    height: resetSize.width,
    preview: false,
    src: thumbUrl,
    onError: () => setIsError(true)
  })), !readOnly && !disabled && /*#__PURE__*/_react.default.createElement("div", {
    className: "action_delete",
    onClick: () => {
      remove(file);
    }
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lm-icon-a-shidia1qingchu",
    style: {
      fontSize: resetSize.fontSize
    }
  })), showMaster && /*#__PURE__*/_react.default.createElement("div", {
    onClick: checkMain,
    className: (0, _classnames.default)('check_main', resetFile?.isMain && 'active')
  }, locale.main));
};
var _default = PictureItem;
exports.default = _default;