rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/Uploader/UploadFileItem.js

@@ -1,76 +1,68 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "renderThumbnail", "onPreview", "onCancel", "onReupload"];
 import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import Attachment from '@rsuite/icons/Attachment';
 import Reload from '@rsuite/icons/Reload';
 import CloseButton from "../internals/CloseButton/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { previewFile } from "./utils/previewFile.js";
 /**
  * Format display file size
  * @param size
  */
-export var formatSize = function formatSize(size) {
+export const formatSize = function (size) {
   if (size === void 0) {
     size = 0;
   }
-  var K = 1024;
-  var M = 1024 * 1024;
-  var G = 1024 * 1024 * 1024;
+  const K = 1024;
+  const M = 1024 * 1024;
+  const G = 1024 * 1024 * 1024;
   if (size > G) {
-    return (size / G).toFixed(2) + "GB";
+    return `${(size / G).toFixed(2)}GB`;
   }
   if (size > M) {
-    return (size / M).toFixed(2) + "MB";
+    return `${(size / M).toFixed(2)}MB`;
   }
   if (size > K) {
-    return (size / K).toFixed(2) + "KB";
+    return `${(size / K).toFixed(2)}KB`;
   }
-  return size + "B";
+  return `${size}B`;
 };
-var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    disabled = props.disabled,
-    _props$allowReupload = props.allowReupload,
-    allowReupload = _props$allowReupload === void 0 ? true : _props$allowReupload,
-    file = props.file,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'uploader-file-item' : _props$classPrefix,
-    _props$listType = props.listType,
-    listType = _props$listType === void 0 ? 'text' : _props$listType,
-    className = props.className,
-    _props$removable = props.removable,
-    removable = _props$removable === void 0 ? true : _props$removable,
-    _props$maxPreviewFile = props.maxPreviewFileSize,
-    maxPreviewFileSize = _props$maxPreviewFile === void 0 ? 1024 * 1024 * 5 : _props$maxPreviewFile,
-    locale = props.locale,
-    renderFileInfo = props.renderFileInfo,
-    renderThumbnail = props.renderThumbnail,
-    onPreview = props.onPreview,
-    onCancel = props.onCancel,
-    onReupload = props.onReupload,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix(listType, {
-    disabled: disabled,
+const UploadFileItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    disabled,
+    allowReupload = true,
+    file,
+    classPrefix = 'uploader-file-item',
+    listType = 'text',
+    className,
+    removable = true,
+    maxPreviewFileSize = 1024 * 1024 * 5,
+    // 5MB
+    locale,
+    renderFileInfo,
+    renderThumbnail,
+    onPreview,
+    onCancel,
+    onReupload,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withClassPrefix,
+    prefix
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix(listType, {
+    disabled,
     'has-error': file.status === 'error'
   }));
-  var _useState = useState(file.url ? file.url : null),
-    previewImage = _useState[0],
-    setPreviewImage = _useState[1];
+  const [previewImage, setPreviewImage] = useState(file.url ? file.url : null);
 
   /**
    * Get thumbnail of image file
    */
-  var getThumbnail = useCallback(function (callback) {
+  const getThumbnail = useCallback(callback => {
     var _file$blobFile;
     if (!~['picture-text', 'picture'].indexOf(listType)) {
       return;
@@ -82,26 +74,26 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     previewFile(file.blobFile, callback);
   }, [file, listType, maxPreviewFileSize]);
-  useEffect(function () {
+  useEffect(() => {
     if (!file.url) {
-      getThumbnail(function (previewImage) {
+      getThumbnail(previewImage => {
         setPreviewImage(previewImage);
       });
     }
   }, [file.url, getThumbnail]);
-  var handlePreview = useCallback(function (event) {
+  const handlePreview = useCallback(event => {
     if (disabled) {
       return;
     }
     onPreview === null || onPreview === void 0 || onPreview(file, event);
   }, [disabled, file, onPreview]);
-  var handleRemove = useCallback(function (event) {
+  const handleRemove = useCallback(event => {
     if (disabled) {
       return;
     }
     onCancel === null || onCancel === void 0 || onCancel(file.fileKey, event);
   }, [disabled, file.fileKey, onCancel]);
-  var handleReupload = useCallback(function (event) {
+  const handleReupload = useCallback(event => {
     if (disabled) {
       return;
     }
@@ -111,17 +103,18 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Rendering progress bar
    */
-  var renderProgressBar = function renderProgressBar() {
-    var _file$progress = file.progress,
-      progress = _file$progress === void 0 ? 0 : _file$progress,
-      status = file.status;
-    var show = !disabled && status === 'uploading';
-    var visibility = show ? 'visible' : 'hidden';
-    var wrapStyle = {
-      visibility: visibility
+  const renderProgressBar = () => {
+    const {
+      progress = 0,
+      status
+    } = file;
+    const show = !disabled && status === 'uploading';
+    const visibility = show ? 'visible' : 'hidden';
+    const wrapStyle = {
+      visibility
     };
-    var progressbarStyle = {
-      width: progress + "%"
+    const progressbarStyle = {
+      width: `${progress}%`
     };
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('progress'),
@@ -131,13 +124,13 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style: progressbarStyle
     }));
   };
-  var renderPreview = function renderPreview() {
-    var thumbnail = previewImage ? /*#__PURE__*/React.createElement("img", {
+  const renderPreview = () => {
+    const thumbnail = previewImage ? /*#__PURE__*/React.createElement("img", {
       role: "presentation",
       src: previewImage,
       alt: file.name,
       onClick: handlePreview,
-      "aria-label": "Preview: " + file.name
+      "aria-label": `Preview: ${file.name}`
     }) : /*#__PURE__*/React.createElement(Attachment, {
       className: prefix('icon')
     });
@@ -149,9 +142,9 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Render the loading state.
    */
-  var renderIcon = function renderIcon() {
-    var uploading = file.status === 'uploading';
-    var classes = prefix('icon-wrapper', {
+  const renderIcon = () => {
+    const uploading = file.status === 'uploading';
+    const classes = prefix('icon-wrapper', {
       'icon-loading': uploading
     });
     if (uploading) {
@@ -175,20 +168,20 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Render the remove file button.
    */
-  var renderRemoveButton = function renderRemoveButton() {
+  const renderRemoveButton = () => {
     if (!removable) {
       return null;
     }
-    var closeLabel = 'Remove file';
+    let closeLabel = 'Remove file';
     if (locale !== null && locale !== void 0 && locale.removeFile) {
-      closeLabel = (locale === null || locale === void 0 ? void 0 : locale.removeFile) + (file !== null && file !== void 0 && file.name ? ": " + (file === null || file === void 0 ? void 0 : file.name) : '');
+      closeLabel = (locale === null || locale === void 0 ? void 0 : locale.removeFile) + (file !== null && file !== void 0 && file.name ? `: ${file === null || file === void 0 ? void 0 : file.name}` : '');
     }
     return /*#__PURE__*/React.createElement(CloseButton, {
       className: prefix('btn-remove'),
       onClick: handleRemove,
       tabIndex: -1,
       locale: {
-        closeLabel: closeLabel
+        closeLabel
       },
       "aria-hidden": disabled
     });
@@ -197,7 +190,7 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Render error messages.
    */
-  var renderErrorStatus = function renderErrorStatus() {
+  const renderErrorStatus = () => {
     if (file.status === 'error') {
       return /*#__PURE__*/React.createElement("div", {
         className: prefix('status')
@@ -216,7 +209,7 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Render file size.
    */
-  var renderFileSize = function renderFileSize() {
+  const renderFileSize = () => {
     if (file.status !== 'error' && file.blobFile) {
       var _file$blobFile2;
       return /*#__PURE__*/React.createElement("span", {
@@ -229,12 +222,12 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Render file panel
    */
-  var renderFilePanel = function renderFilePanel() {
-    var fileElement = /*#__PURE__*/React.createElement("div", {
+  const renderFilePanel = () => {
+    const fileElement = /*#__PURE__*/React.createElement("div", {
       className: prefix('title'),
       tabIndex: -1,
       onClick: handlePreview,
-      "aria-label": "Preview: " + file.name
+      "aria-label": `Preview: ${file.name}`
     }, file.name);
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('panel')
@@ -260,20 +253,4 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), renderIcon(), renderFilePanel(), renderProgressBar(), renderRemoveButton());
 });
 UploadFileItem.displayName = 'UploadFileItem';
-UploadFileItem.propTypes = {
-  locale: PropTypes.any,
-  file: PropTypes.object.isRequired,
-  listType: oneOf(['text', 'picture-text', 'picture']),
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  maxPreviewFileSize: PropTypes.number,
-  classPrefix: PropTypes.string,
-  removable: PropTypes.bool,
-  allowReupload: PropTypes.bool,
-  renderFileInfo: PropTypes.func,
-  renderThumbnail: PropTypes.func,
-  onCancel: PropTypes.func,
-  onPreview: PropTypes.func,
-  onReupload: PropTypes.func
-};
 export default UploadFileItem;

package/esm/Uploader/UploadTrigger.js

@@ -1,105 +1,84 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "name", "accept", "multiple", "disabled", "readOnly", "children", "classPrefix", "className", "draggable", "locale", "onChange", "onDragEnter", "onDragLeave", "onDragOver", "onDrop"];
-import React, { useCallback, useRef, useState, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { useRef, useState, useImperativeHandle } from 'react';
 import Button from "../Button/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { isIE11 } from "../internals/utils/index.js";
-var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? Button : _props$as,
-    name = props.name,
-    accept = props.accept,
-    multiple = props.multiple,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    children = props.children,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'uploader-trigger' : _props$classPrefix,
-    className = props.className,
-    draggable = props.draggable,
-    locale = props.locale,
-    onChange = props.onChange,
-    onDragEnter = props.onDragEnter,
-    onDragLeave = props.onDragLeave,
-    onDragOver = props.onDragOver,
-    onDrop = props.onDrop,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var rootRef = useRef(null);
-  var _useState = useState(false),
-    dragOver = _useState[0],
-    setDragOver = _useState[1];
-  var inputRef = useRef(null);
-  var _useClassNames = useClassNames(classPrefix),
-    merge = _useClassNames.merge,
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix({
-    disabled: disabled,
+import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
+const UploadTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = Button,
+    name,
+    accept,
+    multiple,
+    disabled,
+    readOnly,
+    children,
+    classPrefix = 'uploader-trigger',
+    className,
+    draggable,
+    locale,
+    onChange,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    ...rest
+  } = props;
+  const rootRef = useRef(null);
+  const [dragOver, setDragOver] = useState(false);
+  const inputRef = useRef(null);
+  const {
+    merge,
+    withClassPrefix,
+    prefix
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    disabled,
     customize: children,
     'drag-over': dragOver
   }));
-  var handleClick = useCallback(function () {
+  const handleClick = useEventCallback(() => {
     var _inputRef$current;
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
-  }, []);
-  var handleClearInput = useCallback(function () {
+  });
+  const handleClearInput = useEventCallback(() => {
     if (inputRef.current) {
       inputRef.current.value = '';
     }
-  }, []);
-  var handleDragEnter = useCallback(function (event) {
+  });
+  const handleDragEnter = useEventCallback(event => {
     if (draggable) {
       event.preventDefault();
       setDragOver(true);
     }
     onDragEnter === null || onDragEnter === void 0 || onDragEnter(event);
-  }, [draggable, onDragEnter]);
-  var handleDragLeave = useCallback(function (event) {
+  });
+  const handleDragLeave = useEventCallback(event => {
     if (draggable) {
       event.preventDefault();
       setDragOver(false);
     }
     onDragLeave === null || onDragLeave === void 0 || onDragLeave(event);
-  }, [draggable, onDragLeave]);
-  var handleDragOver = useCallback(function (event) {
+  });
+  const handleDragOver = useEventCallback(event => {
     draggable && event.preventDefault();
     onDragOver === null || onDragOver === void 0 || onDragOver(event);
-  }, [draggable, onDragOver]);
-  var handleDrop = useCallback(function (event) {
+  });
+  const handleDrop = useEventCallback(event => {
     if (draggable) {
       event.preventDefault();
       setDragOver(false);
       onChange === null || onChange === void 0 || onChange(event);
     }
     onDrop === null || onDrop === void 0 || onDrop(event);
-  }, [draggable, onChange, onDrop]);
-  var handleChange = useCallback(function (event) {
-    if (isIE11()) {
-      var _event$target;
-      /**
-       * IE11 triggers onChange event of file input when element.value is assigned
-       * https://github.com/facebook/react/issues/8793
-       */
-      if (((_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.files) === null || _event$target === void 0 ? void 0 : _event$target.length) > 0) {
-        onChange === null || onChange === void 0 || onChange(event);
-      }
-      return;
-    }
-    onChange === null || onChange === void 0 || onChange(event);
-  }, [onChange]);
-  useImperativeHandle(ref, function () {
-    return {
-      root: rootRef.current,
-      clearInput: handleClearInput
-    };
   });
-  var buttonProps = _extends({}, rest, {
-    disabled: disabled,
+  useImperativeHandle(ref, () => ({
+    root: rootRef.current,
+    clearInput: handleClearInput
+  }));
+  const buttonProps = {
+    ...rest,
+    disabled,
     className: prefix('btn')
-  });
+  };
   if (!disabled && !readOnly) {
     buttonProps.onClick = handleClick;
     buttonProps.onDragEnter = handleDragEnter;
@@ -107,7 +86,7 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     buttonProps.onDragOver = handleDragOver;
     buttonProps.onDrop = handleDrop;
   }
-  var trigger = children ? (/*#__PURE__*/React.cloneElement(React.Children.only(children), buttonProps)) : /*#__PURE__*/React.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
+  const trigger = children ? (/*#__PURE__*/React.cloneElement(React.Children.only(children), buttonProps)) : /*#__PURE__*/React.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
   return /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
     className: classes
@@ -119,25 +98,8 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     readOnly: readOnly,
     accept: accept,
     ref: inputRef,
-    onChange: handleChange
+    onChange: onChange
   }), trigger);
 });
 UploadTrigger.displayName = 'UploadTrigger';
-UploadTrigger.propTypes = {
-  locale: PropTypes.any,
-  name: PropTypes.string,
-  multiple: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  accept: PropTypes.string,
-  onChange: PropTypes.func,
-  classPrefix: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  draggable: PropTypes.bool,
-  onDragEnter: PropTypes.func,
-  onDragLeave: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onDrop: PropTypes.func
-};
 export default UploadTrigger;