@996-design/996-components 1.0.0

package/lib/upload/Upload.js

@@ -0,0 +1,464 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LIST_IGNORE = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _upload = _interopRequireDefault(require("@rc-component/upload"));
+var _util = require("@rc-component/util");
+var _clsx4 = require("clsx");
+var _fallbackProp = _interopRequireDefault(require("../_util/fallbackProp"));
+var _useMergeSemantic3 = require("../_util/hooks/useMergeSemantic");
+var _is = require("../_util/is");
+var _warning = require("../_util/warning");
+var _context2 = require("../config-provider/context");
+var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
+var _locale = require("../locale");
+var _en_US = _interopRequireDefault(require("../locale/en_US"));
+var _style = _interopRequireDefault(require("./style"));
+var _UploadList = _interopRequireDefault(require("./UploadList"));
+var _utils = require("./utils");
+var LIST_IGNORE = exports.LIST_IGNORE = "__LIST_IGNORE_".concat(Date.now(), "__");
+var InternalUpload = function InternalUpload(props, ref) {
+  var config = (0, _context2.useComponentConfig)('upload');
+  var fileList = props.fileList,
+    defaultFileList = props.defaultFileList,
+    onRemove = props.onRemove,
+    _props$showUploadList = props.showUploadList,
+    showUploadList = _props$showUploadList === void 0 ? true : _props$showUploadList,
+    _props$listType = props.listType,
+    listType = _props$listType === void 0 ? 'text' : _props$listType,
+    onPreview = props.onPreview,
+    onDownload = props.onDownload,
+    onChange = props.onChange,
+    onDrop = props.onDrop,
+    previewFile = props.previewFile,
+    customDisabled = props.disabled,
+    propLocale = props.locale,
+    iconRender = props.iconRender,
+    isImageUrl = props.isImageUrl,
+    customProgress = props.progress,
+    customizePrefixCls = props.prefixCls,
+    className = props.className,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'select' : _props$type,
+    children = props.children,
+    style = props.style,
+    itemRender = props.itemRender,
+    maxCount = props.maxCount,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    _props$hasControlInsi = props.hasControlInside,
+    hasControlInside = _props$hasControlInsi === void 0 ? true : _props$hasControlInsi,
+    _props$action = props.action,
+    action = _props$action === void 0 ? '' : _props$action,
+    customAccept = props.accept,
+    _props$supportServerR = props.supportServerRender,
+    supportServerRender = _props$supportServerR === void 0 ? true : _props$supportServerR,
+    rootClassName = props.rootClassName,
+    styles = props.styles,
+    classNames = props.classNames;
+  // ===================== Disabled =====================
+  var disabled = React.useContext(_DisabledContext.default);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  var customRequest = props.customRequest || config.customRequest;
+  var mergedProgress = config.progress || customProgress ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, config.progress), customProgress) : undefined;
+  var mergedAccept = (0, _fallbackProp.default)(customAccept, config.accept, '');
+  var _useControlledState = (0, _util.useControlledState)(defaultFileList, fileList),
+    _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
+    internalFileList = _useControlledState2[0],
+    setMergedFileList = _useControlledState2[1];
+  var mergedFileList = internalFileList || [];
+  var _React$useState = React.useState('drop'),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    dragState = _React$useState2[0],
+    setDragState = _React$useState2[1];
+  var uploadRef = React.useRef(null);
+  var wrapRef = React.useRef(null);
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = (0, _warning.devUseWarning)('Upload');
+    process.env.NODE_ENV !== "production" ? warning('fileList' in props || !('value' in props), 'usage', '`value` is not a valid prop, do you mean `fileList`?') : void 0;
+  }
+  // Control mode will auto fill file uid if not provided
+  React.useMemo(function () {
+    var timestamp = Date.now();
+    (fileList || []).forEach(function (file, index) {
+      if (!file.uid && !Object.isFrozen(file)) {
+        file.uid = "__AUTO__".concat(timestamp, "_").concat(index, "__");
+      }
+    });
+  }, [fileList]);
+  var onInternalChange = function onInternalChange(file, changedFileList, event) {
+    var cloneList = (0, _toConsumableArray2.default)(changedFileList);
+    var exceedMaxCount = false;
+    // Cut to match count
+    if (maxCount === 1) {
+      cloneList = cloneList.slice(-1);
+    } else if (maxCount) {
+      exceedMaxCount = cloneList.length > maxCount;
+      cloneList = cloneList.slice(0, maxCount);
+    }
+    // Prevent React18 auto batch since input[upload] trigger process at same time
+    // which makes fileList closure problem
+    // eslint-disable-next-line react-dom/no-flush-sync
+    (0, _reactDom.flushSync)(function () {
+      setMergedFileList(cloneList);
+    });
+    var changeInfo = {
+      file: file,
+      fileList: cloneList
+    };
+    if (event) {
+      changeInfo.event = event;
+    }
+    if (!exceedMaxCount || file.status === 'removed' ||
+    // We should ignore event if current file is exceed `maxCount`
+    cloneList.some(function (f) {
+      return f.uid === file.uid;
+    })) {
+      // eslint-disable-next-line react-dom/no-flush-sync
+      (0, _reactDom.flushSync)(function () {
+        onChange === null || onChange === void 0 || onChange(changeInfo);
+      });
+    }
+  };
+  var mergedBeforeUpload = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee(file, fileListArgs) {
+      var beforeUpload, parsedFile, result;
+      return (0, _regenerator2.default)().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            beforeUpload = props.beforeUpload;
+            parsedFile = file;
+            if (!beforeUpload) {
+              _context.n = 4;
+              break;
+            }
+            _context.n = 1;
+            return beforeUpload(file, fileListArgs);
+          case 1:
+            result = _context.v;
+            if (!(result === false)) {
+              _context.n = 2;
+              break;
+            }
+            return _context.a(2, false);
+          case 2:
+            // Hack for LIST_IGNORE, we add additional info to remove from the list
+            delete file[LIST_IGNORE];
+            if (!(result === LIST_IGNORE)) {
+              _context.n = 3;
+              break;
+            }
+            Object.defineProperty(file, LIST_IGNORE, {
+              value: true,
+              configurable: true
+            });
+            return _context.a(2, false);
+          case 3:
+            if ((0, _is.isPlainObject)(result)) {
+              parsedFile = result;
+            }
+          case 4:
+            return _context.a(2, parsedFile);
+        }
+      }, _callee);
+    }));
+    return function mergedBeforeUpload(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var onBatchStart = function onBatchStart(batchFileInfoList) {
+    // Skip file which marked as `LIST_IGNORE`, these file will not add to file list
+    var filteredFileInfoList = batchFileInfoList.filter(function (info) {
+      return !info.file[LIST_IGNORE];
+    });
+    // Nothing to do since no file need upload
+    if (!filteredFileInfoList.length) {
+      return;
+    }
+    var objectFileList = filteredFileInfoList.map(function (info) {
+      return (0, _utils.file2Obj)(info.file);
+    });
+    // Concat new files with prev files
+    var newFileList = (0, _toConsumableArray2.default)(mergedFileList);
+    objectFileList.forEach(function (fileObj) {
+      // Replace file if exist
+      newFileList = (0, _utils.updateFileList)(fileObj, newFileList);
+    });
+    objectFileList.forEach(function (fileObj, index) {
+      // Repeat trigger `onChange` event for compatible
+      var triggerFileObj = fileObj;
+      if (!filteredFileInfoList[index].parsedFile) {
+        // `beforeUpload` return false
+        var originFileObj = fileObj.originFileObj;
+        var clone;
+        try {
+          clone = new File([originFileObj], originFileObj.name, {
+            type: originFileObj.type
+          });
+        } catch (_unused) {
+          clone = new Blob([originFileObj], {
+            type: originFileObj.type
+          });
+          clone.name = originFileObj.name;
+          clone.lastModifiedDate = new Date();
+          clone.lastModified = new Date().getTime();
+        }
+        clone.uid = fileObj.uid;
+        triggerFileObj = clone;
+      } else {
+        // Inject `uploading` status
+        fileObj.status = 'uploading';
+      }
+      onInternalChange(triggerFileObj, newFileList);
+    });
+  };
+  var onSuccess = function onSuccess(response, file, xhr) {
+    try {
+      if (typeof response === 'string') {
+        response = JSON.parse(response);
+      }
+    } catch (_unused2) {
+      /* do nothing */
+    }
+    // removed
+    if (!(0, _utils.getFileItem)(file, mergedFileList)) {
+      return;
+    }
+    var targetItem = (0, _utils.file2Obj)(file);
+    targetItem.status = 'done';
+    targetItem.percent = 100;
+    targetItem.response = response;
+    targetItem.xhr = xhr;
+    var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList);
+    onInternalChange(targetItem, nextFileList);
+  };
+  var onProgress = function onProgress(e, file) {
+    // removed
+    if (!(0, _utils.getFileItem)(file, mergedFileList)) {
+      return;
+    }
+    var targetItem = (0, _utils.file2Obj)(file);
+    targetItem.status = 'uploading';
+    targetItem.percent = e.percent;
+    var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList);
+    onInternalChange(targetItem, nextFileList, e);
+  };
+  var onError = function onError(error, response, file) {
+    // removed
+    if (!(0, _utils.getFileItem)(file, mergedFileList)) {
+      return;
+    }
+    var targetItem = (0, _utils.file2Obj)(file);
+    targetItem.error = error;
+    targetItem.response = response;
+    targetItem.status = 'error';
+    var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList);
+    onInternalChange(targetItem, nextFileList);
+  };
+  var handleRemove = function handleRemove(file) {
+    var currentFile;
+    Promise.resolve((0, _is.isFunction)(onRemove) ? onRemove(file) : onRemove).then(function (ret) {
+      // Prevent removing file
+      if (ret === false) {
+        return;
+      }
+      var removedFileList = (0, _utils.removeFileItem)(file, mergedFileList);
+      if (removedFileList) {
+        var _uploadRef$current;
+        currentFile = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, file), {}, {
+          status: 'removed'
+        });
+        mergedFileList === null || mergedFileList === void 0 || mergedFileList.forEach(function (item) {
+          var matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
+          if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
+            item.status = 'removed';
+          }
+        });
+        (_uploadRef$current = uploadRef.current) === null || _uploadRef$current === void 0 || _uploadRef$current.abort(currentFile);
+        onInternalChange(currentFile, removedFileList);
+      }
+    });
+  };
+  var onFileDrop = function onFileDrop(e) {
+    setDragState(e.type);
+    if (e.type === 'drop') {
+      onDrop === null || onDrop === void 0 || onDrop(e);
+    }
+  };
+  // Test needs
+  React.useImperativeHandle(ref, function () {
+    return {
+      onBatchStart: onBatchStart,
+      onSuccess: onSuccess,
+      onProgress: onProgress,
+      onError: onError,
+      fileList: mergedFileList,
+      upload: uploadRef.current,
+      nativeElement: wrapRef.current
+    };
+  });
+  var _useComponentConfig = (0, _context2.useComponentConfig)('upload'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    direction = _useComponentConfig.direction,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles;
+  var prefixCls = getPrefixCls('upload', customizePrefixCls);
+  // =========== Merged Props for Semantic ==========
+  var mergedProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    listType: listType,
+    showUploadList: showUploadList,
+    type: type,
+    multiple: multiple,
+    hasControlInside: hasControlInside,
+    supportServerRender: supportServerRender,
+    disabled: mergedDisabled
+  });
+  var _useMergeSemantic = (0, _useMergeSemantic3.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
+      props: mergedProps
+    }),
+    _useMergeSemantic2 = (0, _slicedToArray2.default)(_useMergeSemantic, 2),
+    mergedClassNames = _useMergeSemantic2[0],
+    mergedStyles = _useMergeSemantic2[1];
+  var rcUploadProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    onBatchStart: onBatchStart,
+    onError: onError,
+    onProgress: onProgress,
+    onSuccess: onSuccess
+  }, props), {}, {
+    customRequest: customRequest,
+    data: data,
+    multiple: multiple,
+    action: action,
+    accept: mergedAccept,
+    supportServerRender: supportServerRender,
+    prefixCls: prefixCls,
+    disabled: mergedDisabled,
+    beforeUpload: mergedBeforeUpload,
+    onChange: undefined,
+    hasControlInside: hasControlInside
+  });
+  delete rcUploadProps.className;
+  delete rcUploadProps.style;
+  // Remove id to avoid open by label when trigger is hidden
+  // !children: https://github.com/ant-design/ant-design/issues/14298
+  // disabled: https://github.com/ant-design/ant-design/issues/16478
+  //           https://github.com/ant-design/ant-design/issues/24197
+  if (!children || mergedDisabled) {
+    delete rcUploadProps.id;
+  }
+  var wrapperCls = "".concat(prefixCls, "-wrapper");
+  var _useStyle = (0, _style.default)(prefixCls, wrapperCls),
+    _useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  var _useLocale = (0, _locale.useLocale)('Upload', _en_US.default.Upload),
+    _useLocale2 = (0, _slicedToArray2.default)(_useLocale, 1),
+    contextLocale = _useLocale2[0];
+  var _ref2 = typeof showUploadList === 'boolean' ? {} : showUploadList,
+    showRemoveIcon = _ref2.showRemoveIcon,
+    showPreviewIcon = _ref2.showPreviewIcon,
+    showDownloadIcon = _ref2.showDownloadIcon,
+    removeIcon = _ref2.removeIcon,
+    previewIcon = _ref2.previewIcon,
+    downloadIcon = _ref2.downloadIcon,
+    extra = _ref2.extra;
+  // use showRemoveIcon if it is specified explicitly
+  var realShowRemoveIcon = typeof showRemoveIcon === 'undefined' ? !mergedDisabled : showRemoveIcon;
+  var renderUploadList = function renderUploadList(button, buttonVisible) {
+    if (!showUploadList) {
+      return button;
+    }
+    return /*#__PURE__*/React.createElement(_UploadList.default, {
+      classNames: mergedClassNames,
+      styles: mergedStyles,
+      prefixCls: prefixCls,
+      listType: listType,
+      items: mergedFileList,
+      previewFile: previewFile,
+      onPreview: onPreview,
+      onDownload: onDownload,
+      onRemove: handleRemove,
+      showRemoveIcon: realShowRemoveIcon,
+      showPreviewIcon: showPreviewIcon,
+      showDownloadIcon: showDownloadIcon,
+      removeIcon: removeIcon,
+      previewIcon: previewIcon,
+      downloadIcon: downloadIcon,
+      iconRender: iconRender,
+      extra: extra,
+      locale: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contextLocale), propLocale),
+      isImageUrl: isImageUrl,
+      progress: mergedProgress,
+      appendAction: button,
+      appendActionVisible: buttonVisible,
+      itemRender: itemRender,
+      disabled: mergedDisabled
+    });
+  };
+  var mergedRootCls = (0, _clsx4.clsx)(wrapperCls, className, rootClassName, hashId, cssVarCls, contextClassName, mergedClassNames.root, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-picture-card-wrapper"), listType === 'picture-card'), "".concat(prefixCls, "-picture-circle-wrapper"), listType === 'picture-circle'));
+  var mergedRootStyle = (0, _objectSpread2.default)({}, mergedStyles.root);
+  var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contextStyle), style);
+  // ======================== Render ========================
+  if (type === 'drag') {
+    var dragCls = (0, _clsx4.clsx)(hashId, prefixCls, "".concat(prefixCls, "-drag"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-drag-uploading"), mergedFileList.some(function (file) {
+      return file.status === 'uploading';
+    })), "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), "".concat(prefixCls, "-disabled"), mergedDisabled), "".concat(prefixCls, "-rtl"), direction === 'rtl'), mergedClassNames.trigger);
+    return /*#__PURE__*/React.createElement("span", {
+      className: mergedRootCls,
+      ref: wrapRef,
+      style: mergedRootStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: dragCls,
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedStyle), mergedStyles.trigger),
+      onDrop: onFileDrop,
+      onDragOver: onFileDrop,
+      onDragLeave: onFileDrop
+    }, /*#__PURE__*/React.createElement(_upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rcUploadProps), {}, {
+      ref: uploadRef,
+      className: "".concat(prefixCls, "-btn")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-drag-container")
+    }, children))), renderUploadList());
+  }
+  var uploadBtnCls = (0, _clsx4.clsx)(prefixCls, "".concat(prefixCls, "-select"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled"), mergedDisabled), "".concat(prefixCls, "-hidden"), !children), mergedClassNames.trigger);
+  var uploadButton = /*#__PURE__*/React.createElement("div", {
+    className: uploadBtnCls,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedStyle), mergedStyles.trigger)
+  }, /*#__PURE__*/React.createElement(_upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rcUploadProps), {}, {
+    ref: uploadRef
+  })));
+  if (listType === 'picture-card' || listType === 'picture-circle') {
+    return /*#__PURE__*/React.createElement("span", {
+      className: mergedRootCls,
+      ref: wrapRef,
+      style: mergedRootStyle
+    }, renderUploadList(uploadButton, !!children));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: mergedRootCls,
+    ref: wrapRef,
+    style: mergedRootStyle
+  }, uploadButton, renderUploadList());
+};
+var Upload = /*#__PURE__*/React.forwardRef(InternalUpload);
+if (process.env.NODE_ENV !== 'production') {
+  Upload.displayName = 'Upload';
+}
+var _default = exports.default = Upload;

package/lib/upload/UploadList/ListItem.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { ItemRender, UploadFile, UploadListProgressProps, UploadListType, UploadLocale, UploadSemanticAllType } from '../interface';
+export interface ListItemProps {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: UploadSemanticAllType['classNames'];
+    styles?: UploadSemanticAllType['styles'];
+    locale: UploadLocale;
+    file: UploadFile;
+    items: UploadFile[];
+    listType?: UploadListType;
+    isImgUrl?: (file: UploadFile) => boolean;
+    showRemoveIcon?: boolean | ((file: UploadFile) => boolean);
+    showDownloadIcon?: boolean | ((file: UploadFile) => boolean);
+    showPreviewIcon?: boolean | ((file: UploadFile) => boolean);
+    removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    extra?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+    iconRender: (file: UploadFile) => React.ReactNode;
+    actionIconRender: (customIcon: React.ReactNode, callback: () => void, prefixCls: string, title?: string, acceptUploadDisabled?: boolean) => React.ReactNode;
+    itemRender?: ItemRender;
+    onPreview: (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => void;
+    onClose: (file: UploadFile) => void;
+    onDownload: (file: UploadFile) => void;
+    progress?: UploadListProgressProps;
+}
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItem;