@douyinfe/semi-ui 2.1.0-next.0 → 2.1.0

package/lib/cjs/upload/index.js

@@ -1,552 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _lodashEs = require("lodash-es");
-
-var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/upload/foundation"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
-
-var _fileCard = _interopRequireDefault(require("./fileCard"));
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
-var _semiIcons = require("@douyinfe/semi-icons");
-
-require("@douyinfe/semi-foundation/lib/cjs/upload/upload.css");
-
-/* eslint-disable max-len */
-const prefixCls = _constants.cssClasses.PREFIX;
-
-class Upload extends _baseComponent.default {
-  constructor(props) {
-    super(props);
-    this.inputRef = null;
-    this.replaceInputRef = null;
-
-    this.onClick = () => {
-      const {
-        inputRef,
-        props
-      } = this;
-      const {
-        onOpenFileDialog
-      } = props;
-      const isDisabled = Boolean(this.props.disabled);
-
-      if (isDisabled || !inputRef || !inputRef.current) {
-        return;
-      }
-
-      inputRef.current.click();
-
-      if (onOpenFileDialog && typeof onOpenFileDialog) {
-        onOpenFileDialog();
-      }
-    };
-
-    this.onChange = e => {
-      const {
-        files
-      } = e.target;
-      this.foundation.handleChange(files);
-    };
-
-    this.replace = index => {
-      this.setState({
-        replaceIdx: index
-      }, () => {
-        this.replaceInputRef.current.click();
-      });
-    };
-
-    this.onReplaceChange = e => {
-      const {
-        files
-      } = e.target;
-      this.foundation.handleReplaceChange(files);
-    };
-
-    this.clear = () => {
-      this.foundation.handleClear();
-    };
-
-    this.remove = fileItem => {
-      this.foundation.handleRemove(fileItem);
-    };
-
-    this.upload = () => {
-      const {
-        fileList
-      } = this.state;
-      this.foundation.startUpload(fileList);
-    };
-
-    this.renderFile = (file, index, locale) => {
-      var _context;
-
-      const {
-        name,
-        status,
-        validateMessage,
-        _sizeInvalid
-      } = file;
-      const {
-        previewFile,
-        listType,
-        itemStyle,
-        showRetry,
-        renderFileItem,
-        disabled,
-        onPreviewClick,
-        showReplace
-      } = this.props;
-
-      const onRemove = () => this.remove(file);
-
-      const onRetry = () => {
-        this.foundation.retry(file);
-      };
-
-      const onReplace = () => {
-        this.replace(index);
-      };
-
-      const fileCardProps = (0, _assign.default)((0, _assign.default)({}, file), {
-        previewFile,
-        listType,
-        onRemove,
-        onRetry,
-        key: (0, _concat.default)(_context = "".concat(name)).call(_context, index),
-        showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
-        style: itemStyle,
-        disabled,
-        showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
-        onReplace,
-        onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
-      });
-
-      if (status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && !validateMessage) {
-        fileCardProps.validateMessage = locale.fail;
-      }
-
-      if (_sizeInvalid && !validateMessage) {
-        fileCardProps.validateMessage = locale.illegalSize;
-      }
-
-      if (typeof renderFileItem === 'undefined') {
-        return /*#__PURE__*/_react.default.createElement(_fileCard.default, (0, _assign.default)({}, fileCardProps));
-      } else {
-        return renderFileItem(fileCardProps);
-      }
-    };
-
-    this.renderFileList = () => {
-      const {
-        showUploadList,
-        listType,
-        limit,
-        disabled,
-        children
-      } = this.props;
-      const {
-        fileList: stateFileList
-      } = this.state;
-      const fileList = this.props.fileList || stateFileList;
-      const isPicType = listType === _constants.strings.FILE_LIST_PIC;
-      const showAddTriggerInList = isPicType && (limit ? limit > fileList.length : true);
-      const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"), {
-        ["".concat(prefixCls, "-picture-add")]: isPicType,
-        ["".concat(prefixCls, "-picture-add-disabled")]: disabled
-      });
-
-      const addContent = /*#__PURE__*/_react.default.createElement("div", {
-        className: uploadAddCls,
-        onClick: this.onClick
-      }, children);
-
-      if (!showUploadList || !fileList.length) {
-        if (showAddTriggerInList) {
-          return addContent;
-        }
-
-        return null;
-      }
-
-      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
-        ["".concat(prefixCls, "-picture-file-list")]: isPicType
-      });
-      const titleCls = "".concat(prefixCls, "-file-list-title");
-      const mainCls = "".concat(prefixCls, "-file-list-main");
-      const showTitle = limit !== 1 && fileList.length && listType !== _constants.strings.FILE_LIST_PIC;
-      const showClear = this.props.showClear && !disabled;
-      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-        componentName: "Upload"
-      }, locale => /*#__PURE__*/_react.default.createElement("div", {
-        className: fileListCls
-      }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
-        className: titleCls
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(titleCls, "-choosen")
-      }, locale.selectedFiles), showClear ? /*#__PURE__*/_react.default.createElement("span", {
-        onClick: this.clear,
-        className: "".concat(titleCls, "-clear")
-      }, locale.clear) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: mainCls
-      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
-    };
-
-    this.onDrop = e => {
-      this.foundation.handleDrop(e);
-    };
-
-    this.onDragOver = e => {
-      // When a drag element moves within the target element
-      this.foundation.handleDragOver(e);
-    };
-
-    this.onDragLeave = e => {
-      this.foundation.handleDragLeave(e);
-    };
-
-    this.onDragEnter = e => {
-      this.foundation.handleDragEnter(e);
-    };
-
-    this.renderDragArea = () => {
-      const {
-        dragAreaStatus
-      } = this.state;
-      const {
-        children,
-        dragIcon,
-        dragMainText,
-        dragSubText
-      } = this.props;
-      const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
-      const dragAreaCls = (0, _classnames.default)(dragAreaBaseCls, {
-        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
-        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL,
-        ["".concat(dragAreaBaseCls, "-custom")]: children
-      });
-      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-        componentName: "Upload"
-      }, locale => /*#__PURE__*/_react.default.createElement("div", {
-        className: dragAreaCls,
-        onDrop: this.onDrop,
-        onDragOver: this.onDragOver,
-        onDragLeave: this.onDragLeave,
-        onDragEnter: this.onDragEnter,
-        onClick: this.onClick
-      }, children ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-icon")
-      }, dragIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconUpload, {
-        size: "extra-large"
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-text")
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-main-text")
-      }, dragMainText || locale.mainText), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-sub-text")
-      }, dragSubText), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-tips")
-      }, dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL && /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(dragAreaBaseCls, "-tips-legal")
-      }, locale.legalTips), dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL && /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(dragAreaBaseCls, "-tips-illegal")
-      }, locale.illegalTips))))));
-    };
-
-    this.state = {
-      fileList: props.defaultFileList || [],
-      replaceIdx: -1,
-      inputKey: Math.random(),
-      replaceInputKey: Math.random(),
-      // Status of the drag zone
-      dragAreaStatus: 'default',
-      localUrls: []
-    };
-    this.foundation = new _foundation.default(this.adapter);
-    this.inputRef = /*#__PURE__*/_react.default.createRef();
-    this.replaceInputRef = /*#__PURE__*/_react.default.createRef();
-  }
-
-  static getDerivedStateFromProps(props) {
-    const {
-      fileList
-    } = props;
-
-    if ('fileList' in props) {
-      return {
-        fileList: fileList || []
-      };
-    }
-
-    return null;
-  }
-
-  get adapter() {
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      notifyFileSelect: files => this.props.onFileChange(files),
-      notifyError: (error, fileInstance, fileList, xhr) => this.props.onError(error, fileInstance, fileList, xhr),
-      notifySuccess: (responseBody, file, fileList) => this.props.onSuccess(responseBody, file, fileList),
-      notifyProgress: (percent, file, fileList) => this.props.onProgress(percent, file, fileList),
-      notifyRemove: (file, fileList, fileItem) => this.props.onRemove(file, fileList, fileItem),
-      notifySizeError: (file, fileList) => this.props.onSizeError(file, fileList),
-      notifyExceed: fileList => this.props.onExceed(fileList),
-      updateFileList: (fileList, cb) => {
-        if (typeof cb === 'function') {
-          this.setState({
-            fileList
-          }, cb);
-        } else {
-          this.setState({
-            fileList
-          });
-        }
-      },
-      notifyBeforeUpload: _ref => {
-        let {
-          file,
-          fileList
-        } = _ref;
-        return this.props.beforeUpload({
-          file,
-          fileList
-        });
-      },
-      notifyAfterUpload: _ref2 => {
-        let {
-          response,
-          file,
-          fileList
-        } = _ref2;
-        return this.props.afterUpload({
-          response,
-          file,
-          fileList
-        });
-      },
-      resetInput: () => {
-        this.setState(prevState => ({
-          inputKey: Math.random()
-        }));
-      },
-      resetReplaceInput: () => {
-        this.setState(prevState => ({
-          replaceInputKey: Math.random()
-        }));
-      },
-      updateDragAreaStatus: dragAreaStatus => this.setState({
-        dragAreaStatus
-      }),
-      notifyChange: _ref3 => {
-        let {
-          currentFile,
-          fileList
-        } = _ref3;
-        return this.props.onChange({
-          currentFile,
-          fileList
-        });
-      },
-      updateLocalUrls: urls => this.setState({
-        localUrls: urls
-      }),
-      notifyClear: () => this.props.onClear(),
-      notifyPreviewClick: file => this.props.onPreviewClick(file),
-      notifyDrop: (e, files, fileList) => this.props.onDrop(e, files, fileList),
-      notifyAcceptInvalid: invalidFiles => this.props.onAcceptInvalid(invalidFiles),
-      notifyBeforeRemove: (file, fileList) => this.props.beforeRemove(file, fileList),
-      notifyBeforeClear: fileList => this.props.beforeClear(fileList)
-    });
-  }
-
-  componentWillUnmount() {
-    this.foundation.destroy();
-  }
-
-  render() {
-    const {
-      style,
-      className,
-      multiple,
-      accept,
-      disabled,
-      children,
-      capture,
-      listType,
-      prompt,
-      promptPosition,
-      draggable,
-      validateMessage,
-      validateStatus,
-      directory
-    } = this.props;
-    const uploadCls = (0, _classnames.default)(prefixCls, {
-      ["".concat(prefixCls, "-picture")]: listType === _constants.strings.FILE_LIST_PIC,
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-default")]: validateStatus === 'default',
-      ["".concat(prefixCls, "-error")]: validateStatus === 'error',
-      ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
-      ["".concat(prefixCls, "-success")]: validateStatus === 'success'
-    }, className);
-    const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
-    const inputCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input"));
-    const inputReplaceCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input-replace"));
-    const promptCls = (0, _classnames.default)("".concat(prefixCls, "-prompt"));
-    const validateMsgCls = (0, _classnames.default)("".concat(prefixCls, "-validate-message"));
-    const dirProps = directory ? {
-      directory: 'directory',
-      webkitdirectory: 'webkitdirectory'
-    } : {};
-    const addContent = listType !== _constants.strings.FILE_LIST_PIC ? /*#__PURE__*/_react.default.createElement("div", {
-      className: uploadAddCls,
-      onClick: this.onClick
-    }, children) : null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: uploadCls,
-      style: style,
-      "x-prompt-pos": promptPosition
-    }, /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({
-      key: this.state.inputKey,
-      capture: capture,
-      multiple: multiple,
-      accept: accept,
-      onChange: this.onChange,
-      type: "file",
-      autoComplete: "off",
-      tabIndex: -1,
-      className: inputCls,
-      ref: this.inputRef
-    }, dirProps)), /*#__PURE__*/_react.default.createElement("input", {
-      key: this.state.replaceInputKey,
-      multiple: false,
-      accept: accept,
-      onChange: this.onReplaceChange,
-      type: "file",
-      autoComplete: "off",
-      tabIndex: -1,
-      className: inputReplaceCls,
-      ref: this.replaceInputRef
-    }), draggable ? this.renderDragArea() : addContent, prompt ? /*#__PURE__*/_react.default.createElement("div", {
-      className: promptCls
-    }, prompt) : null, validateMessage ? /*#__PURE__*/_react.default.createElement("div", {
-      className: validateMsgCls
-    }, validateMessage) : null, this.renderFileList());
-  }
-
-}
-
-Upload.propTypes = {
-  accept: _propTypes.default.string,
-  action: _propTypes.default.string.isRequired,
-  afterUpload: _propTypes.default.func,
-  beforeClear: _propTypes.default.func,
-  beforeRemove: _propTypes.default.func,
-  beforeUpload: _propTypes.default.func,
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  customRequest: _propTypes.default.func,
-  data: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
-  defaultFileList: _propTypes.default.array,
-  directory: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  dragIcon: _propTypes.default.node,
-  dragMainText: _propTypes.default.node,
-  dragSubText: _propTypes.default.node,
-  draggable: _propTypes.default.bool,
-  fileList: _propTypes.default.array,
-  fileName: _propTypes.default.string,
-  headers: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
-  itemStyle: _propTypes.default.object,
-  limit: _propTypes.default.number,
-  listType: _propTypes.default.oneOf(_constants.strings.LIST_TYPE),
-  maxSize: _propTypes.default.number,
-  minSize: _propTypes.default.number,
-  multiple: _propTypes.default.bool,
-  name: _propTypes.default.string,
-  onAcceptInvalid: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  onClear: _propTypes.default.func,
-  onDrop: _propTypes.default.func,
-  onError: _propTypes.default.func,
-  onExceed: _propTypes.default.func,
-  onFileChange: _propTypes.default.func,
-  onOpenFileDialog: _propTypes.default.func,
-  onPreviewClick: _propTypes.default.func,
-  onProgress: _propTypes.default.func,
-  onRemove: _propTypes.default.func,
-  onRetry: _propTypes.default.func,
-  onSizeError: _propTypes.default.func,
-  onSuccess: _propTypes.default.func,
-  previewFile: _propTypes.default.func,
-  prompt: _propTypes.default.node,
-  promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
-  renderFileItem: _propTypes.default.func,
-  showClear: _propTypes.default.bool,
-  showReplace: _propTypes.default.bool,
-  showRetry: _propTypes.default.bool,
-  showUploadList: _propTypes.default.bool,
-  style: _propTypes.default.object,
-  timeout: _propTypes.default.number,
-  transformFile: _propTypes.default.func,
-  uploadTrigger: _propTypes.default.oneOf(_constants.strings.UPLOAD_TRIGGER),
-  validateMessage: _propTypes.default.node,
-  validateStatus: _propTypes.default.oneOf(_constants.strings.VALIDATE_STATUS),
-  withCredentials: _propTypes.default.bool
-};
-Upload.defaultProps = {
-  defaultFileList: [],
-  disabled: false,
-  listType: 'list',
-  multiple: false,
-  onAcceptInvalid: _lodashEs.noop,
-  onChange: _lodashEs.noop,
-  beforeRemove: () => true,
-  beforeClear: () => true,
-  onClear: _lodashEs.noop,
-  onDrop: _lodashEs.noop,
-  onError: _lodashEs.noop,
-  onExceed: _lodashEs.noop,
-  onFileChange: _lodashEs.noop,
-  onOpenFileDialog: _lodashEs.noop,
-  onProgress: _lodashEs.noop,
-  onRemove: _lodashEs.noop,
-  onRetry: _lodashEs.noop,
-  onSizeError: _lodashEs.noop,
-  onSuccess: _lodashEs.noop,
-  promptPosition: 'right',
-  showClear: true,
-  showReplace: false,
-  showRetry: true,
-  showUploadList: true,
-  uploadTrigger: 'auto',
-  withCredentials: false
-};
-Upload.FileCard = _fileCard.default;
-var _default = Upload;
-exports.default = _default;