rsuite 5.39.0 → 5.41.0

package/esm/Uploader/UploadFileItem.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useEffect, useState } from 'react';
@@ -6,7 +7,6 @@ import Attachment from '@rsuite/icons/legacy/Attachment';
 import Reload from '@rsuite/icons/Reload';
 import { previewFile, useClassNames } from '../utils';
 import CloseButton from '../CloseButton';
-
 /**
  * Format display file size
  * @param size
@@ -15,79 +15,67 @@ export var formatSize = function formatSize(size) {
   if (size === void 0) {
     size = 0;
   }
-
   var K = 1024;
   var M = 1024 * 1024;
   var G = 1024 * 1024 * 1024;
-
   if (size > G) {
     return (size / G).toFixed(2) + "GB";
   }
-
   if (size > M) {
     return (size / M).toFixed(2) + "MB";
   }
-
   if (size > K) {
     return (size / K).toFixed(2) + "KB";
   }
-
   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, ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "renderThumbnail", "onPreview", "onCancel", "onReupload"]);
-
+    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, ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "renderThumbnail", "onPreview", "onCancel", "onReupload"]);
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix;
-
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix(listType, {
     disabled: disabled,
     'has-error': file.status === 'error'
   }));
-
   var _useState = useState(file.url ? file.url : null),
-      previewImage = _useState[0],
-      setPreviewImage = _useState[1];
+    previewImage = _useState[0],
+    setPreviewImage = _useState[1];
   /**
    * Get thumbnail of image file
    */
-
-
   var getThumbnail = useCallback(function (callback) {
     var _file$blobFile;
-
     if (!~['picture-text', 'picture'].indexOf(listType)) {
       return;
-    } // The thumbnail file size cannot be larger than the preset value.
-
+    }
 
+    // The thumbnail file size cannot be larger than the preset value.
     if (!file.blobFile || (file === null || file === void 0 ? void 0 : (_file$blobFile = file.blobFile) === null || _file$blobFile === void 0 ? void 0 : _file$blobFile.size) > maxPreviewFileSize) {
       return;
     }
-
     previewFile(file.blobFile, callback);
   }, [file, listType, maxPreviewFileSize]);
   useEffect(function () {
@@ -101,31 +89,28 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (disabled) {
       return;
     }
-
     onPreview === null || onPreview === void 0 ? void 0 : onPreview(file, event);
   }, [disabled, file, onPreview]);
   var handleRemove = useCallback(function (event) {
     if (disabled) {
       return;
     }
-
     onCancel === null || onCancel === void 0 ? void 0 : onCancel(file.fileKey, event);
   }, [disabled, file.fileKey, onCancel]);
   var handleReupload = useCallback(function (event) {
     if (disabled) {
       return;
     }
-
     onReupload === null || onReupload === void 0 ? void 0 : onReupload(file, event);
   }, [disabled, file, onReupload]);
+
   /**
    * Rendering progress bar
    */
-
   var renderProgressBar = function renderProgressBar() {
     var _file$progress = file.progress,
-        progress = _file$progress === void 0 ? 0 : _file$progress,
-        status = file.status;
+      progress = _file$progress === void 0 ? 0 : _file$progress,
+      status = file.status;
     var show = !disabled && status === 'uploading';
     var visibility = show ? 'visible' : 'hidden';
     var wrapStyle = {
@@ -142,7 +127,6 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style: progressbarStyle
     }));
   };
-
   var renderPreview = function renderPreview() {
     var thumbnail = previewImage ? /*#__PURE__*/React.createElement("img", {
       role: "presentation",
@@ -156,17 +140,15 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix('preview')
     }, renderThumbnail ? renderThumbnail(file, thumbnail) : thumbnail);
   };
+
   /**
    * Render the loading state.
    */
-
-
   var renderIcon = function renderIcon() {
     var uploading = file.status === 'uploading';
     var classes = prefix('icon-wrapper', {
       'icon-loading': uploading
     });
-
     if (uploading) {
       return /*#__PURE__*/React.createElement("div", {
         className: classes
@@ -174,37 +156,32 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: prefix('icon')
       }));
     }
-
     if (listType === 'picture' || listType === 'picture-text') {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, /*#__PURE__*/React.createElement(Attachment, {
       className: prefix('icon')
     }));
   };
+
   /**
    * Render the remove file button.
    */
-
-
   var renderRemoveButton = function renderRemoveButton() {
     if (!removable) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(CloseButton, {
       className: prefix('btn-remove'),
       onClick: handleRemove
     });
   };
+
   /**
    * Render error messages.
    */
-
-
   var renderErrorStatus = function renderErrorStatus() {
     if (file.status === 'error') {
       return /*#__PURE__*/React.createElement("div", {
@@ -217,30 +194,25 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: prefix('icon-reupload')
       })));
     }
-
     return null;
   };
+
   /**
    * Render file size.
    */
-
-
   var renderFileSize = function renderFileSize() {
     if (file.status !== 'error' && file.blobFile) {
       var _file$blobFile2;
-
       return /*#__PURE__*/React.createElement("span", {
         className: prefix('size')
       }, formatSize(file === null || file === void 0 ? void 0 : (_file$blobFile2 = file.blobFile) === null || _file$blobFile2 === void 0 ? void 0 : _file$blobFile2.size));
     }
-
     return null;
   };
+
   /**
    * Render file panel
    */
-
-
   var renderFilePanel = function renderFilePanel() {
     var fileElement = /*#__PURE__*/React.createElement("div", {
       className: prefix('title'),
@@ -252,21 +224,18 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix('content')
     }, renderFileInfo ? renderFileInfo(file, fileElement) : fileElement, renderErrorStatus(), renderFileSize()));
   };
-
   if (listType === 'picture') {
     return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
       ref: ref,
       className: classes
     }), renderIcon(), renderPreview(), renderErrorStatus(), renderRemoveButton());
   }
-
   if (listType === 'picture-text') {
     return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
       ref: ref,
       className: classes
     }), renderIcon(), renderPreview(), renderFilePanel(), renderProgressBar(), renderRemoveButton());
   }
-
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes

package/esm/Uploader/UploadTrigger.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useRef, useState, useImperativeHandle } from 'react';
@@ -6,38 +7,33 @@ import { isIE11, useClassNames } from '../utils';
 import Button from '../Button';
 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, ["as", "name", "accept", "multiple", "disabled", "readOnly", "children", "classPrefix", "className", "draggable", "locale", "onChange", "onDragEnter", "onDragLeave", "onDragOver", "onDrop"]);
-
+    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, ["as", "name", "accept", "multiple", "disabled", "readOnly", "children", "classPrefix", "className", "draggable", "locale", "onChange", "onDragEnter", "onDragLeave", "onDragOver", "onDrop"]);
   var rootRef = useRef(null);
-
   var _useState = useState(false),
-      dragOver = _useState[0],
-      setDragOver = _useState[1];
-
+    dragOver = _useState[0],
+    setDragOver = _useState[1];
   var inputRef = useRef(null);
-
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix;
-
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
     customize: children,
@@ -45,7 +41,6 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
   var handleClick = useCallback(function () {
     var _inputRef$current;
-
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
   }, []);
   var handleClearInput = useCallback(function () {
@@ -58,7 +53,6 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       event.preventDefault();
       setDragOver(true);
     }
-
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(event);
   }, [draggable, onDragEnter]);
   var handleDragLeave = useCallback(function (event) {
@@ -66,7 +60,6 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       event.preventDefault();
       setDragOver(false);
     }
-
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(event);
   }, [draggable, onDragLeave]);
   var handleDragOver = useCallback(function (event) {
@@ -79,13 +72,11 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setDragOver(false);
       onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
-
     onDrop === null || onDrop === void 0 ? void 0 : onDrop(event);
   }, [draggable, onChange, onDrop]);
   var handleChange = useCallback(function (event) {
     if (isIE11()) {
       var _event$target, _event$target$files;
-
       /**
        * IE11 triggers onChange event of file input when element.value is assigned
        * https://github.com/facebook/react/issues/8793
@@ -93,10 +84,8 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$files = _event$target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.length) > 0) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
       }
-
       return;
     }
-
     onChange === null || onChange === void 0 ? void 0 : onChange(event);
   }, [onChange]);
   useImperativeHandle(ref, function () {
@@ -105,12 +94,10 @@ var UploadTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       clearInput: handleClearInput
     };
   });
-
   var buttonProps = _extends({}, rest, {
     disabled: disabled,
     className: prefix('btn')
   });
-
   if (!disabled && !readOnly) {
     buttonProps.onClick = handleClick;
     buttonProps.onDragEnter = handleDragEnter;
@@ -118,7 +105,6 @@ 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);
   return /*#__PURE__*/React.createElement("div", {
     ref: rootRef,