@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/upload/upload.js

@@ -0,0 +1,616 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["wrapperClassName", "placeholder", "tip", "children", "onChange", "disabled"],
+  _excluded2 = ["wrapperClassName", "className", "disabled", "children", "placeholder", "tip"],
+  _excluded3 = ["wrapperClassName", "tip", "disabled", "children", "placeholder"],
+  _excluded4 = ["wrapperClassName", "tip", "disabled", "children", "placeholder", "beforeUpload"],
+  _excluded5 = ["wrapperClassName", "tip", "disabled", "multiple", "children", "placeholder", "beforeUpload"],
+  _excluded6 = ["className", "draggable", "multiple", "maxCount", "children", "listType"];
+import { Upload as AntdUpload, Flex, Table } from 'antd';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { Button } from "../button";
+import { useLocale } from "../hooks/useLocale";
+import { IconCloseCircleFill, IconDelete, IconEye } from "../icon";
+import { Image } from "../image";
+import { Input } from "../input";
+import i18n from "../locale";
+import "./style.less";
+import { useSlimfitMultipleUpload, useSlimfitUpload } from "./use-slimfit-upload";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var AntdUploadDragger = AntdUpload.Dragger;
+
+/** 单文件输入框上传 */
+var SingleInputUpload = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var wrapperClassName = props.wrapperClassName,
+    placeholder = props.placeholder,
+    tip = props.tip,
+    children = props.children,
+    onChange = props.onChange,
+    disabled = props.disabled,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputHovered = _useState2[0],
+    setInputHovered = _useState2[1];
+  var _useSlimfitUpload = useSlimfitUpload(props),
+    uploadFileName = _useSlimfitUpload.uploadFileName,
+    uploadStatus = _useSlimfitUpload.uploadStatus,
+    uploadStatusIcon = _useSlimfitUpload.uploadStatusIcon,
+    handleChange = _useSlimfitUpload.handleChange,
+    handleBeforeUpload = _useSlimfitUpload.handleBeforeUpload,
+    handleRemove = _useSlimfitUpload.handleRemove;
+  var inputUploadBtn = useMemo(function () {
+    if (children) {
+      return children;
+    }
+    return /*#__PURE__*/_jsx(Button, {
+      disabled: uploadStatus === 'uploading' || disabled,
+      children: uploadStatus === 'done' || uploadStatus === 'error' ? i18n.t('Upload.reUpload') : i18n.t('Upload.clickUpload')
+    });
+  }, [children, uploadStatus, disabled]);
+  var inputContainerNode = useMemo(function () {
+    var inputPlaceholder = uploadFileName || placeholder;
+    var inputSuffix = inputHovered && (uploadStatus === 'error' || uploadStatus === 'done') ? /*#__PURE__*/_jsx(IconCloseCircleFill, {
+      className: "slimfit-upload-icon slimfit-upload-icon-close",
+      onClick: handleRemove
+    }) : uploadStatusIcon;
+    return /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-upload-single-content",
+      onMouseEnter: function onMouseEnter() {
+        return setInputHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setInputHovered(false);
+      },
+      children: [/*#__PURE__*/_jsx(Input, {
+        className: classNames('slimfit-upload-input', {
+          'slimfit-upload-input-error': uploadStatus === 'error'
+        }),
+        placeholder: inputPlaceholder,
+        suffix: inputSuffix,
+        disabled: disabled,
+        readOnly: true
+      }), /*#__PURE__*/_jsx("span", {
+        className: classNames('slimfit-upload-tip', {
+          'slimfit-upload-tip-error': uploadStatus === 'error'
+        }),
+        children: tip
+      })]
+    });
+  }, [uploadStatus, uploadFileName, placeholder, tip, inputHovered, uploadStatusIcon, handleRemove, disabled]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('slimfit-upload-single-input-wrapper', wrapperClassName),
+    children: [inputContainerNode, /*#__PURE__*/_jsx(AntdUpload, _objectSpread(_objectSpread({}, restProps), {}, {
+      disabled: disabled,
+      ref: ref,
+      showUploadList: false,
+      maxCount: 1,
+      multiple: false,
+      onChange: handleChange,
+      beforeUpload: handleBeforeUpload,
+      children: inputUploadBtn
+    }))]
+  });
+});
+
+/** 单文件拖拽上传 */
+var SingleDragUpload = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var wrapperClassName = props.wrapperClassName,
+    className = props.className,
+    disabled = props.disabled,
+    children = props.children,
+    placeholder = props.placeholder,
+    tip = props.tip,
+    restProps = _objectWithoutProperties(props, _excluded2);
+  var _useSlimfitUpload2 = useSlimfitUpload(props),
+    uploadStatus = _useSlimfitUpload2.uploadStatus,
+    uploadFileName = _useSlimfitUpload2.uploadFileName,
+    uploadFileSize = _useSlimfitUpload2.uploadFileSize,
+    uploadStatusIcon = _useSlimfitUpload2.uploadStatusIcon,
+    uploadTimestamp = _useSlimfitUpload2.uploadTimestamp,
+    handleChange = _useSlimfitUpload2.handleChange,
+    handleBeforeUpload = _useSlimfitUpload2.handleBeforeUpload,
+    handleRemove = _useSlimfitUpload2.handleRemove;
+  var uploadContent = useMemo(function () {
+    if (children) {
+      return children;
+    }
+    var content = null;
+    if (!uploadStatus || uploadStatus === 'removed') {
+      content = /*#__PURE__*/_jsx("div", {
+        className: "slimfit-upload-single-drag-content-initial",
+        children: /*#__PURE__*/_jsx(Trans, {
+          i18n: i18n,
+          i18nKey: "Upload.dragUploadPlaceholder",
+          components: {
+            button: disabled ? /*#__PURE__*/_jsx(_Fragment, {}) : /*#__PURE__*/_jsx(Button, {
+              type: "link",
+              className: "slimfit-upload-operation-btn"
+            })
+          }
+        })
+      });
+    } else {
+      content = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "slimfit-upload-single-drag-content-title",
+          children: [/*#__PURE__*/_jsx("span", {
+            title: uploadFileName,
+            children: uploadFileName
+          }), uploadStatusIcon]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "slimfit-upload-single-drag-content-desc",
+          children: [/*#__PURE__*/_jsx("div", {
+            children: i18n.t('Upload.fileSizeLabel', {
+              size: uploadFileSize
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            children: i18n.t('Upload.fileDateLabel', {
+              date: dayjs(uploadTimestamp).format('YYYY/MM/DD HH:mm:ss')
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "slimfit-upload-single-drag-content-operation",
+          children: [/*#__PURE__*/_jsx(Button, {
+            type: "link",
+            className: "slimfit-upload-operation-btn",
+            children: i18n.t('Upload.reUpload')
+          }), /*#__PURE__*/_jsx(Button, {
+            type: "link",
+            className: "slimfit-upload-operation-btn",
+            onClick: function onClick(e) {
+              handleRemove();
+              e.stopPropagation();
+            },
+            children: i18n.t('Upload.delete')
+          })]
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx("div", {
+      className: "slimfit-upload-single-drag-content",
+      onClick: function onClick(e) {
+        var target = e.target;
+        if (!(target !== null && target !== void 0 && target.closest('.slimfit-upload-operation-btn'))) {
+          e.stopPropagation();
+        }
+      },
+      onDrop: function onDrop(e) {
+        if (uploadStatus && uploadStatus !== 'removed') {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+      },
+      children: content
+    });
+  }, [children, uploadStatus, uploadFileName, uploadFileSize, uploadStatusIcon, uploadTimestamp, handleRemove, disabled]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('slimfit-upload-single-drag-wrapper', wrapperClassName),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-upload-single-content",
+      children: [/*#__PURE__*/_jsx(AntdUploadDragger, _objectSpread(_objectSpread({}, restProps), {}, {
+        className: classNames(className, {
+          'slimfit-upload-drag-error': uploadStatus === 'error'
+        }),
+        ref: ref,
+        disabled: disabled,
+        showUploadList: false,
+        onChange: handleChange,
+        beforeUpload: handleBeforeUpload,
+        children: uploadContent
+      })), tip && /*#__PURE__*/_jsx("span", {
+        className: classNames('slimfit-upload-tip', {
+          'slimfit-upload-tip-error': uploadStatus === 'error'
+        }),
+        children: tip
+      })]
+    })
+  });
+});
+
+/** 多文件基础上传 */
+var MultipleBasicUpload = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var wrapperClassName = props.wrapperClassName,
+    tip = props.tip,
+    disabled = props.disabled,
+    children = props.children,
+    placeholder = props.placeholder,
+    restProps = _objectWithoutProperties(props, _excluded3);
+  var _useSlimfitMultipleUp = useSlimfitMultipleUpload(props),
+    uploadFileList = _useSlimfitMultipleUp.uploadFileList,
+    uploadFileInfoList = _useSlimfitMultipleUp.uploadFileInfoList,
+    handleChange = _useSlimfitMultipleUp.handleChange;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('slimfit-upload-multiple-basic-wrapper', wrapperClassName),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "slimfit-upload-single-content",
+      children: [/*#__PURE__*/_jsx(AntdUpload, _objectSpread(_objectSpread({}, restProps), {}, {
+        ref: ref,
+        fileList: uploadFileList,
+        showUploadList: false,
+        onChange: handleChange,
+        children: children || /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          children: i18n.t('Upload.selectFile')
+        })
+      })), tip && /*#__PURE__*/_jsx("span", {
+        className: "slimfit-upload-tip",
+        children: tip
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "slimfit-upload-multiple-basic-file-list",
+      children: uploadFileInfoList.map(function (_ref) {
+        var uid = _ref.uid,
+          fileName = _ref.fileName,
+          status = _ref.status,
+          statusIcon = _ref.statusIcon,
+          handleRemove = _ref.handleRemove;
+        return /*#__PURE__*/_jsxs("div", {
+          className: "slimfit-upload-multiple-basic-file-item",
+          children: [/*#__PURE__*/_jsx(Input, {
+            className: classNames('slimfit-upload-input', {
+              'slimfit-upload-input-error': status === 'error'
+            }),
+            placeholder: fileName,
+            suffix: statusIcon,
+            readOnly: true
+          }), /*#__PURE__*/_jsx(IconDelete, {
+            className: "slimfit-upload-icon",
+            onClick: handleRemove
+          })]
+        }, uid);
+      })
+    })]
+  });
+});
+
+/** 多文件拖拽上传 */
+var MultipleDragUpload = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var wrapperClassName = props.wrapperClassName,
+    tip = props.tip,
+    disabled = props.disabled,
+    children = props.children,
+    placeholder = props.placeholder,
+    beforeUpload = props.beforeUpload,
+    restProps = _objectWithoutProperties(props, _excluded4);
+  var _useSlimfitMultipleUp2 = useSlimfitMultipleUpload(props),
+    uploadFileList = _useSlimfitMultipleUp2.uploadFileList,
+    uploadFileInfoList = _useSlimfitMultipleUp2.uploadFileInfoList,
+    handleChange = _useSlimfitMultipleUp2.handleChange,
+    setUploadFileList = _useSlimfitMultipleUp2.setUploadFileList;
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    defererList = _useState4[0],
+    setDefererList = _useState4[1];
+  var existPendingFile = useMemo(function () {
+    return uploadFileInfoList.some(function (file) {
+      return !file.status;
+    });
+  }, [uploadFileInfoList]);
+  var tableColumns = [{
+    title: i18n.t('Upload.fileName'),
+    dataIndex: 'fileName',
+    key: 'fileName'
+  }, {
+    title: i18n.t('Upload.fileSize'),
+    dataIndex: 'fileSize',
+    key: 'fileSize'
+  }, {
+    title: i18n.t('Upload.fileStatus'),
+    dataIndex: 'status',
+    key: 'status'
+  }, {
+    title: i18n.t('Upload.fileOperation'),
+    dataIndex: 'operation'
+  }];
+  var dataSource = useMemo(function () {
+    return uploadFileInfoList.map(function (file) {
+      var uid = file.uid,
+        fileName = file.fileName,
+        formatIcon = file.formatIcon,
+        fileSize = file.sizeStr,
+        statusDesc = file.statusDesc,
+        statusIcon = file.statusIcon,
+        handleRemove = file.handleRemove;
+      return {
+        key: uid,
+        fileName: /*#__PURE__*/_jsxs(Flex, {
+          gap: 8,
+          children: [formatIcon, fileName]
+        }),
+        fileSize: fileSize,
+        status: /*#__PURE__*/_jsxs(Flex, {
+          gap: 8,
+          children: [statusIcon, statusDesc]
+        }),
+        operation: /*#__PURE__*/_jsx(IconDelete, {
+          className: "slimfit-upload-icon",
+          onClick: handleRemove
+        })
+      };
+    });
+  }, [uploadFileInfoList]);
+  var handleBeforeUpload = useCallback(function (file) {
+    setUploadFileList(function (list) {
+      return [].concat(_toConsumableArray(list), [file]);
+    });
+    return new Promise(function (resolve) {
+      setDefererList(function (defererList) {
+        return [].concat(_toConsumableArray(defererList), [function () {
+          return resolve(true);
+        }]);
+      });
+    });
+  }, [beforeUpload]);
+  var handleUpload = useCallback(function () {
+    var deferer = defererList.shift();
+    while (deferer) {
+      deferer();
+      deferer = defererList.shift();
+    }
+  }, [defererList]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('slimfit-upload-multiple-drag-wrapper', wrapperClassName),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "slimfit-upload-single-content",
+      children: [/*#__PURE__*/_jsx(AntdUpload, _objectSpread(_objectSpread({}, restProps), {}, {
+        ref: ref,
+        fileList: uploadFileList,
+        disabled: disabled,
+        showUploadList: false,
+        onChange: handleChange,
+        beforeUpload: handleBeforeUpload,
+        children: children || /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          children: i18n.t('Upload.selectFile')
+        })
+      })), tip && /*#__PURE__*/_jsx("span", {
+        className: "slimfit-upload-tip",
+        children: tip
+      })]
+    }), /*#__PURE__*/_jsx(Table, {
+      className: "slimfit-upload-multiple-drag-table",
+      columns: tableColumns,
+      dataSource: dataSource,
+      pagination: false,
+      locale: {
+        emptyText: /*#__PURE__*/_jsx(AntdUploadDragger, _objectSpread(_objectSpread({}, restProps), {}, {
+          fileList: uploadFileList,
+          disabled: disabled,
+          showUploadList: false,
+          onChange: handleChange,
+          beforeUpload: handleBeforeUpload,
+          openFileDialogOnClick: false,
+          children: i18n.t('Upload.multipleDragUploadPlaceholder')
+        }))
+      }
+    }), /*#__PURE__*/_jsxs(Flex, {
+      className: "slimfit-upload-btns",
+      gap: 8,
+      children: [/*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        disabled: disabled || !existPendingFile,
+        onClick: handleUpload,
+        children: i18n.t('Upload.clickUpload')
+      }), /*#__PURE__*/_jsx(Button, {
+        disabled: disabled,
+        children: i18n.t('Upload.cancelUpload')
+      })]
+    })]
+  });
+});
+var PendingImage = function PendingImage() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      width: "100",
+      height: "100",
+      rx: "2",
+      fill: "#F6F6FA"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M21.5518 72.1985H78.4483L56.6468 48.0605L41.758 63.0797L35.9088 57.1793L21.5518 72.1985Z",
+      fill: "#E9E9F2"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "27.8018",
+      y: "31.0347",
+      width: "13.7931",
+      height: "13.7931",
+      rx: "6.89655",
+      fill: "#E9E9F2"
+    })]
+  });
+};
+var PictureDragUpload = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var wrapperClassName = props.wrapperClassName,
+    tip = props.tip,
+    disabled = props.disabled,
+    multiple = props.multiple,
+    children = props.children,
+    placeholder = props.placeholder,
+    beforeUpload = props.beforeUpload,
+    restProps = _objectWithoutProperties(props, _excluded5);
+  var _useSlimfitMultipleUp3 = useSlimfitMultipleUpload(props),
+    uploadFileList = _useSlimfitMultipleUp3.uploadFileList,
+    uploadFileInfoList = _useSlimfitMultipleUp3.uploadFileInfoList,
+    handleChange = _useSlimfitMultipleUp3.handleChange,
+    setUploadFileList = _useSlimfitMultipleUp3.setUploadFileList;
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defererList = _useState6[0],
+    setDefererList = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    previewFileId = _useState8[0],
+    setPreviewFileId = _useState8[1];
+  var existPendingFile = useMemo(function () {
+    return uploadFileInfoList.some(function (file) {
+      return !file.status;
+    });
+  }, [uploadFileInfoList]);
+  var handleBeforeUpload = useCallback(function (file) {
+    setUploadFileList(function (list) {
+      return [].concat(_toConsumableArray(list), [file]);
+    });
+    return new Promise(function (resolve) {
+      setDefererList(function (defererList) {
+        return [].concat(_toConsumableArray(defererList), [function () {
+          return resolve(true);
+        }]);
+      });
+    });
+  }, [beforeUpload]);
+  var handleUpload = useCallback(function () {
+    var deferer = defererList.shift();
+    while (deferer) {
+      deferer();
+      deferer = defererList.shift();
+    }
+  }, [defererList]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('slimfit-upload-picture-drag-wrapper', wrapperClassName),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "slimfit-upload-single-content",
+      children: [/*#__PURE__*/_jsx(AntdUpload, _objectSpread(_objectSpread({}, restProps), {}, {
+        ref: ref,
+        multiple: multiple,
+        fileList: uploadFileList,
+        disabled: disabled,
+        showUploadList: false,
+        onChange: handleChange,
+        beforeUpload: handleBeforeUpload,
+        children: children || /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          children: i18n.t('Upload.selectFile')
+        })
+      })), tip && /*#__PURE__*/_jsx("span", {
+        className: "slimfit-upload-tip",
+        children: tip
+      })]
+    }), /*#__PURE__*/_jsx(AntdUploadDragger, _objectSpread(_objectSpread({}, restProps), {}, {
+      multiple: multiple,
+      fileList: uploadFileList,
+      disabled: disabled,
+      showUploadList: false,
+      onChange: handleChange,
+      beforeUpload: handleBeforeUpload,
+      openFileDialogOnClick: false,
+      children: !!uploadFileInfoList.length ? /*#__PURE__*/_jsx("div", {
+        className: "slimfit-upload-picture-drag-list",
+        children: uploadFileInfoList.map(function (file) {
+          var uid = file.uid,
+            fileName = file.fileName,
+            status = file.status,
+            statusIcon = file.statusIcon,
+            statusDesc = file.statusDesc,
+            url = file.url,
+            handleRemove = file.handleRemove;
+          return /*#__PURE__*/_jsxs("div", {
+            className: "slimfit-upload-picture-drag-item",
+            children: [status === 'done' ? /*#__PURE__*/_jsx(Image, {
+              style: {
+                width: '100px',
+                height: '100px'
+              },
+              src: url,
+              alt: fileName,
+              preview: {
+                visible: previewFileId === uid,
+                src: url,
+                onVisibleChange: function onVisibleChange(visible) {
+                  setPreviewFileId(visible ? uid : undefined);
+                }
+              }
+            }) : ['error', 'uploading'].includes(status || '') ? /*#__PURE__*/_jsxs("div", {
+              className: "slimfit-upload-picture-drag-item-content",
+              children: [/*#__PURE__*/_jsx("span", {
+                children: statusIcon
+              }), /*#__PURE__*/_jsx("span", {
+                children: statusDesc
+              })]
+            }) : /*#__PURE__*/_jsx(PendingImage, {}), /*#__PURE__*/_jsx("div", {
+              className: "slimfit-upload-picture-drag-item-filename",
+              title: fileName,
+              children: fileName
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "slimfit-upload-picture-drag-item-mask",
+              children: [/*#__PURE__*/_jsx(IconEye, {
+                style: {
+                  fontSize: '20px'
+                },
+                onClick: function onClick() {
+                  return setPreviewFileId(uid);
+                }
+              }), /*#__PURE__*/_jsx("span", {
+                children: "|"
+              }), /*#__PURE__*/_jsx(IconDelete, {
+                style: {
+                  fontSize: '20px'
+                },
+                onClick: handleRemove
+              })]
+            })]
+          }, uid);
+        })
+      }) : /*#__PURE__*/_jsx("div", {
+        className: "slimfit-upload-picture-drag-placeholder",
+        children: i18n.t('Upload.multipleDragUploadPlaceholder')
+      })
+    })), /*#__PURE__*/_jsxs(Flex, {
+      className: "slimfit-upload-btns",
+      gap: 8,
+      children: [/*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        disabled: disabled || !existPendingFile,
+        onClick: handleUpload,
+        children: i18n.t('Upload.clickUpload')
+      }), /*#__PURE__*/_jsx(Button, {
+        disabled: disabled,
+        children: i18n.t('Upload.cancelUpload')
+      })]
+    })]
+  });
+});
+var Upload = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    draggable = props.draggable,
+    multiple = props.multiple,
+    maxCount = props.maxCount,
+    children = props.children,
+    listType = props.listType,
+    restProps = _objectWithoutProperties(props, _excluded6);
+  useLocale();
+  var Component = null;
+  if (['picture-card', 'picture', 'picture-circle'].includes(listType || '')) {
+    Component = PictureDragUpload;
+  } else if (draggable) {
+    Component = multiple ? MultipleDragUpload : SingleDragUpload;
+  } else {
+    Component = multiple ? MultipleBasicUpload : SingleInputUpload;
+  }
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, restProps), {}, {
+    ref: ref,
+    wrapperClassName: "slimfit-upload-wrapper",
+    className: classNames('slimfit-upload', className),
+    multiple: multiple,
+    maxCount: maxCount,
+    children: children
+  }));
+});
+var UploadDragger = AntdUploadDragger;
+Upload.displayName = 'Upload';
+Upload.Dragger = UploadDragger;
+export default Upload;

package/lib/esm/upload/use-slimfit-upload.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { UploadProps as AntdUploadProps } from 'antd';
+import { type UploadFile } from 'antd';
+import { RcFile, UploadChangeParam } from 'antd/es/upload';
+import './style.less';
+export declare const useSlimfitUpload: (uploadProps: Pick<AntdUploadProps, 'onChange' | 'beforeUpload' | 'onRemove' | 'defaultFileList' | 'fileList'>) => {
+    uploadFile: UploadFile<any> | undefined;
+    uploadFileName: string | undefined;
+    uploadFileSize: string;
+    uploadStatus: import("antd/es/upload/interface").UploadFileStatus | undefined;
+    uploadStatusIcon: import("react/jsx-runtime").JSX.Element | null;
+    uploadTimestamp: number | undefined;
+    handleChange: (info: UploadChangeParam<UploadFile>) => void;
+    handleBeforeUpload: (file: RcFile, fileList: RcFile[]) => void;
+    handleRemove: () => Promise<void>;
+};
+export declare const useSlimfitMultipleUpload: (uploadProps: Pick<AntdUploadProps, 'onChange' | 'onRemove' | 'defaultFileList' | 'fileList'>) => {
+    uploadFileList: UploadFile<any>[];
+    uploadFileInfoList: {
+        uid: string;
+        fileName: string;
+        url: string | undefined;
+        thumbUrl: string | undefined;
+        status: import("antd/es/upload/interface").UploadFileStatus | undefined;
+        size: number | undefined;
+        sizeStr: string;
+        statusIcon: import("react/jsx-runtime").JSX.Element | null;
+        statusDesc: string;
+        formatIcon: import("react/jsx-runtime").JSX.Element;
+        handleRemove: () => Promise<void>;
+    }[];
+    handleChange: (info: UploadChangeParam<UploadFile>) => void;
+    setUploadFileList: import("react").Dispatch<import("react").SetStateAction<UploadFile<any>[]>>;
+};