@aliretail/react-materials-components/es/OssUploader/index.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _Dialog from "@alifd/next/es/dialog";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import CardUpload from "./card";
import { getFileTypeFromUploadType, getFileTypeFromExt } from "./utils";
var COM_CLASS_PREFIX = 'aliretail-ossupload';

function getFileName(url) {
  return url.split('/').pop();
}

function normalizeItem(item, type) {
  if (typeof item === 'string') {
    return {
      thumbUrl: "" + item + (type === 'video' ? '?x-oss-process=video/snapshot,t_1000,w_200,h_200,m_fast' : ''),
      downloadURL: item,
      fileUrl: item,
      name: getFileName(item)
    };
  }

  return item;
}

var OssUploader = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(OssUploader, _React$Component);

  function OssUploader(props) {
    var _this$context;

    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.getContent = function () {
      var _this$props = _this.props,
          _this$props$uploadTyp = _this$props.uploadType,
          uploadType = _this$props$uploadTyp === void 0 ? 'image' : _this$props$uploadTyp,
          uploadHint = _this$props.uploadHint,
          disabled = _this$props.disabled;
      var cssPrefix = _this.state.cssPrefix;
      if (uploadHint) return uploadHint;
      var content;

      switch (uploadType) {
        case 'image':
          content = /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-card"
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "add",
            size: "small",
            className: cssPrefix + "icon"
          }), /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-text"
          }, "\u4E0A\u4F20\u56FE\u7247"));
          break;

        case 'video':
          content = /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-card"
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "add",
            size: "small",
            className: cssPrefix + "icon"
          }), /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-text"
          }, "\u4E0A\u4F20\u89C6\u9891"));
          break;

        default:
          content = /*#__PURE__*/React.createElement(_Button, null, "\u4E0A\u4F20");
          break;
      }

      if (disabled && content) {
        content = /*#__PURE__*/React.createElement("div", {
          className: COM_CLASS_PREFIX + "-disabled"
        }, content);
      }

      return content;
    };

    _this.deleteImage = function (item, index) {
      var value = [].concat(_this.state.value);
      var itemRemoved = value.splice(index, 1);

      _this.setState({
        value: value
      });

      var changedValue = _this.normalizeReturnValue(value);

      _this.props.onChange && _this.props.onChange(changedValue);
      _this.props.onRemove && _this.props.onRemove(itemRemoved[0]);
    };

    _this.previewImage = function (item) {
      if (item === void 0) {
        item = {};
      }

      var content = /*#__PURE__*/React.createElement("div", {
        className: "preview"
      }, /*#__PURE__*/React.createElement("div", {
        className: COM_CLASS_PREFIX + "-preview-img"
      }, /*#__PURE__*/React.createElement("img", {
        src: item.downloadURL,
        alt: item.name
      })), /*#__PURE__*/React.createElement("div", {
        className: COM_CLASS_PREFIX + "-preview-title"
      }, /*#__PURE__*/React.createElement("span", null, item.name)));

      _this.fullScreenShow(content);
    };

    _this.previewVideo = function (item) {
      if (item === void 0) {
        item = {};
      }

      var content = /*#__PURE__*/React.createElement("div", {
        className: "preview"
      }, /*#__PURE__*/React.createElement("div", {
        className: COM_CLASS_PREFIX + "-preview-video"
      }, /*#__PURE__*/React.createElement("video", {
        className: "video",
        controls: true,
        autoPlay: true,
        poster: item.thumbUrl,
        src: item.downloadURL // type="video/mp4"

      })), /*#__PURE__*/React.createElement("div", {
        className: COM_CLASS_PREFIX + "-preview-title"
      }, /*#__PURE__*/React.createElement("span", null, item.name)));

      _this.fullScreenShow(content);
    };

    _this.fullScreenShow = function (content) {
      _Dialog.show({
        closeable: 'mask,esc',
        animation: {
          "in": 'fadeIn',
          out: 'fadeOut'
        },
        overlayProps: {
          className: COM_CLASS_PREFIX + "-preview-dialog"
        },
        isFullScreen: true,
        content: content,
        footer: false
      });
    };

    _this.normalizeInputValue = function (value) {
      if (value === '' || value === undefined || value === '[]') {
        value = [];
      } else if (_this.props.limit === 1 && !Array.isArray(value)) {
        value = [value];
      }

      value = value.map(function (v) {
        return normalizeItem(v, _this.props.uploadType);
      });
      return value;
    };

    _this.normalizeReturnValue = function (value) {
      var result = value;

      if (_this.props.onlyUrl) {
        result = result.map(function (item) {
          if (typeof item === 'object') {
            return item.fileUrl;
          }

          return item;
        });
      }

      if (_this.props.limit === 1) {
        result = result[0];
      }

      return result;
    };

    _this.onUploadSuccess = function (info) {
      var value = [].concat(_this.state.value, [info]);

      _this.setState({
        value: value
      });

      _this.props.onSuccess && _this.props.onSuccess(info);

      var changedValue = _this.normalizeReturnValue(value);

      _this.props.onChange && _this.props.onChange(changedValue);
    };

    _this.onUploadError = function (e) {
      _this.props.onError && _this.props.onError(e);
    };

    _this.renderCardItem = function (item, index) {
      if (item === void 0) {
        item = {};
      }

      item = normalizeItem(item, _this.props.uploadType) || {};
      var _this$props2 = _this.props,
          disabled = _this$props2.disabled,
          isPreview = _this$props2.isPreview,
          readOnly = _this$props2.readOnly,
          uploadType = _this$props2.uploadType;
      var cssPrefix = _this.state.cssPrefix;
      var withNoOperation = disabled || isPreview || readOnly;
      var cardItemDom;

      switch (uploadType) {
        case 'image':
          cardItemDom = /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item",
            key: index
          }, /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item-wrapper"
          }, /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item-thumbnail"
          }, /*#__PURE__*/React.createElement("img", {
            src: item.thumbUrl,
            alt: "\u7F29\u7565\u56FE"
          })), !withNoOperation ? /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-del"
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "close",
            size: "xs",
            onClick: function onClick() {
              return _this.deleteImage(item, index);
            },
            className: cssPrefix + "icon"
          })) : null, /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-tool",
            onClick: function onClick() {
              return _this.previewImage(item, index);
            }
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "enlarge",
            size: "small",
            className: cssPrefix + "icon"
          }))));
          break;

        case 'video':
          cardItemDom = /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item",
            key: index
          }, /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item-wrapper"
          }, /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item-thumbnail"
          }, /*#__PURE__*/React.createElement("img", {
            src: item.thumbUrl,
            alt: "\u5C01\u9762\u56FE"
          })), /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-video-info"
          }, /*#__PURE__*/React.createElement("span", {
            className: "video-duration"
          }, item.duration)), !withNoOperation ? /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-del"
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "close",
            size: "xs",
            onClick: function onClick() {
              return _this.deleteImage(item, index);
            },
            className: cssPrefix + "icon"
          })) : null, /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-tool",
            onClick: function onClick() {
              return _this.previewVideo(item);
            }
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "enlarge",
            size: "small",
            className: cssPrefix + "icon"
          }))));
          break;

        case 'xls':
        default:
          cardItemDom = /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item " + cssPrefix + "upload-list-item-done",
            key: index
          }, /*#__PURE__*/React.createElement("div", {
            className: cssPrefix + "upload-list-item-name-wrap"
          }, /*#__PURE__*/React.createElement("a", {
            href: item.downloadURL,
            target: "_blank",
            rel: "noreferrer",
            className: cssPrefix + "upload-list-item-name"
          }, /*#__PURE__*/React.createElement("span", null, item.name), item.size ? /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-list-item-size"
          }, "\uFF08", item.size, " B\uFF09") : null)), !withNoOperation ? /*#__PURE__*/React.createElement("span", {
            className: cssPrefix + "upload-list-item-op"
          }, /*#__PURE__*/React.createElement("i", {
            role: "button",
            "aria-label": "\u5220\u9664",
            className: cssPrefix + "icon " + cssPrefix + "icon-close " + cssPrefix + "small",
            onClick: function onClick() {
              return _this.deleteImage(item, index);
            }
          })) : null);
          break;
      }

      return cardItemDom;
    };

    _this.renderPreviewEmpty = function () {
      var _this$props3 = _this.props,
          isPreview = _this$props3.isPreview,
          readOnly = _this$props3.readOnly,
          uploadType = _this$props3.uploadType;
      var cssPrefix = _this.state.cssPrefix;
      var withNoOperation = isPreview || readOnly;
      if (!withNoOperation) return null;

      var getCardItem = function getCardItem(ct) {
        return /*#__PURE__*/React.createElement("div", {
          className: cssPrefix + "upload-list " + cssPrefix + "upload-list-card " + COM_CLASS_PREFIX + "-upload-list-card-preview"
        }, /*#__PURE__*/React.createElement("div", {
          className: cssPrefix + "upload-list-item"
        }, /*#__PURE__*/React.createElement("div", {
          className: cssPrefix + "upload-list-item-wrapper"
        }, /*#__PURE__*/React.createElement("p", {
          className: COM_CLASS_PREFIX + "-upload-list-card-preview-f"
        }, ct))));
      };

      var getTextItem = function getTextItem(ct) {
        return /*#__PURE__*/React.createElement("div", {
          className: cssPrefix + "upload-list " + cssPrefix + "upload-list-text " + COM_CLASS_PREFIX + "-upload-list-text-preview"
        }, /*#__PURE__*/React.createElement("div", {
          className: cssPrefix + "upload-list-item " + cssPrefix + "upload-list-item-done"
        }, /*#__PURE__*/React.createElement("div", {
          className: cssPrefix + "upload-list-item-name-wrap"
        }, /*#__PURE__*/React.createElement("span", {
          className: COM_CLASS_PREFIX + "-upload-list-text-preview-f"
        }, ct))));
      };

      switch (uploadType) {
        case 'image':
          return getCardItem('暂无图片');

        case 'video':
          return getCardItem('暂无视频');

        case 'xls':
        default:
          return getTextItem('暂无文件');
      }
    };

    _this.getAcceptFileType = function () {
      var _this$props$uploadTyp2 = _this.props.uploadType,
          uploadType = _this$props$uploadTyp2 === void 0 ? 'image' : _this$props$uploadTyp2;
      var types = uploadType.split(',');
      var fileTypes = [];
      types.forEach(function (t) {
        var type = getFileTypeFromUploadType(t);

        if (type) {
          fileTypes.push(type);
        }
      });
      return fileTypes.join(', ') || '*/*';
    };

    var _value = props.value;
    _value = _this.normalizeInputValue(_value);
    _this.state = {
      value: _value || [],
      cssPrefix: ((_this$context = _this.context) === null || _this$context === void 0 ? void 0 : _this$context.prefix) || props.prefix
    };
    return _this;
  }

  var _proto = OssUploader.prototype;

  _proto.openUploadLayer = function openUploadLayer() {
    this.cardUpload.openUploadLayer();
  };

  _proto.isSameArray = function isSameArray(arr1, arr2) {
    var same = true;

    if (arr1.length !== arr2.length) {
      return false;
    }

    for (var i = 0; i < arr1.length; i++) {
      if (arr2.indexOf(arr1[i]) === -1) {
        same = false;
        return same;
      }
    }

    return same;
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value && this.state.value && !this.isSameArray(nextProps.value, this.state.value)) {
      var _value2 = this.normalizeInputValue(nextProps.value);

      this.setState({
        value: _value2 || []
      });
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$state = this.state,
        value = _this$state.value,
        cssPrefix = _this$state.cssPrefix;
    var _this$props4 = this.props,
        _this$props4$limit = _this$props4.limit,
        limit = _this$props4$limit === void 0 ? 1 : _this$props4$limit,
        readOnly = _this$props4.readOnly,
        isPreview = _this$props4.isPreview,
        uploadType = _this$props4.uploadType,
        uploadScene = _this$props4.uploadScene,
        hidden = _this$props4.hidden;

    if (hidden) {
      return null;
    }

    var isFile = value.some(function (item) {
      return getFileTypeFromExt(item.downloadURL) === 'file';
    }) || uploadType !== 'image' && uploadType !== 'video';
    var props = {
      disabled: this.props.disabled,
      accept: this.getAcceptFileType(),
      bizType: this.props.bizType,
      onChange: this.props.onChange,
      formatter: this.props.formatter,
      data: this.props.data,
      withCredentials: this.props.withCredentials,
      getOssSignatureUrl: this.props.getOssSignatureUrl,
      uploadCallbackUrl: this.props.uploadCallbackUrl,
      beforeUpload: this.props.beforeUpload,
      onSuccess: this.onUploadSuccess,
      onError: this.onUploadError,
      baseURL: this.props.baseURL,
      uploadType: uploadType,
      uploadScene: uploadScene
    };
    var renderUploadCard = !readOnly && !isPreview;

    if (value && limit && limit - value.length <= 0) {
      renderUploadCard = false;
    }

    return /*#__PURE__*/React.createElement("div", {
      className: COM_CLASS_PREFIX,
      "data-name": "AliretailOssUploader"
    }, value && value.length ? /*#__PURE__*/React.createElement("div", {
      className: cssPrefix + "upload-list " + cssPrefix + "upload-list-" + (isFile ? 'text' : 'card')
    }, value.map(function (item, index) {
      return _this2.renderCardItem(item, index);
    })) : this.renderPreviewEmpty(), renderUploadCard ? /*#__PURE__*/React.createElement(CardUpload, _extends({
      ref: function ref(_) {
        _this2.cardUpload = _;
      },
      content: this.getContent(),
      type: isFile ? 'text' : 'card'
    }, props)) : null);
  };

  return OssUploader;
}(React.Component);

OssUploader.defaultProps = {
  uploadType: 'image',
  uploadScene: 'item',
  onlyUrl: true,
  limit: 1,
  hidden: false,
  withCredentials: true,
  disabled: false,
  readOnly: false,
  isPreview: false,
  prefix: 'next-'
};
export default OssUploader;