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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import cn from 'classnames';
import React, { useMemo, useState } from 'react';
import IconFont from "../../icon-font";
import Image from "../../image";
var renderThumb = function renderThumb(file) {
  switch (file.fileExtension) {
    case '':
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-folder-fill"
      });
    case 'jpeg':
    case 'png':
    case 'jpg':
      return /*#__PURE__*/React.createElement("div", {
        className: "lm_upload_item_thumb_error"
      }, /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-image"
      }), /*#__PURE__*/React.createElement("div", {
        className: "lm_upload_item_name"
      }, file.realFileName));
    case 'mp4':
    case 'm2v':
    case 'mkv':
    case 'ogm':
    case 'webm':
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-video"
      });
    case 'doc':
    case 'docx':
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-file-word"
      });
    case 'ppt':
    case 'pptx':
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-file-ppt"
      });
    case 'xls':
    case 'xlsx':
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-file-excel"
      });
    case 'pdf':
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-file-pdf"
      });
    default:
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-file-text"
      });
  }
};

// 图片列表项
var PictureItem = function PictureItem(_ref) {
  var file = _ref.file,
    index = _ref.index,
    instance = _ref.instance,
    listeners = _ref.listeners;
  var dispatch = instance.dispatch,
    disabled = instance.disabled,
    readOnly = instance.readOnly,
    size = instance.size,
    remove = instance.remove,
    preview = instance.preview,
    getFileFields = instance.getFileFields,
    showMaster = instance.showMaster,
    getFileList = instance.getFileList,
    onChange = instance.onChange,
    locale = instance.locale;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isError = _useState2[0],
    setIsError = _useState2[1];

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

  // 预览小图
  var thumbUrl = useMemo(function () {
    return "".concat(resetFile.url, "?x-oss-process=image/resize,w_").concat(size);
  }, [resetFile.url, size]);

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

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

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