rsuite 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+<a name="5.0.2"></a>
+
+## [5.0.2](https://github.com/rsuite/rsuite/compare/v5.0.1...v5.0.2) (2021-10-15)
+
+### Bug Fixes
+
+- **date-range-picker:** fix date formatting error when typing ([#1991](https://github.com/rsuite/rsuite/issues/1991)) ([f65f7f8](https://github.com/rsuite/rsuite/commit/f65f7f8))
+- **pickers:** clean button overlapping with value ([#1984](https://github.com/rsuite/rsuite/issues/1984)) ([ec127dc](https://github.com/rsuite/rsuite/commit/ec127dc))
+- **table:** fix the typescript type definition of Table ([#1998](https://github.com/rsuite/rsuite/issues/1998)) ([8d00b8d](https://github.com/rsuite/rsuite/commit/8d00b8d)), closes [#1958](https://github.com/rsuite/rsuite/issues/1958)
+- **tag-picker:** update TagPicker trigger props declare. ([#1996](https://github.com/rsuite/rsuite/issues/1996)) ([27da381](https://github.com/rsuite/rsuite/commit/27da381))
+- **uploader:** improve thumbnail rendering on file list ([#1997](https://github.com/rsuite/rsuite/issues/1997)) ([68344d7](https://github.com/rsuite/rsuite/commit/68344d7))
+
 <a name="5.0.1"></a>
 
 ## [5.0.1](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.8...v5.0.1) (2021-10-09)

package/Uploader/styles/index.less

@@ -213,6 +213,11 @@
       > img {
         .img-cover();
       }
+
+      .rs-uploader-file-item-icon {
+        font-size: @uploader-file-item-icon-font-size;
+        margin: @uploader-file-item-icon-margin-plus;
+      }
     }
 
     &-status {
@@ -351,6 +356,11 @@
       > img {
         .img-cover();
       }
+
+      .rs-uploader-file-item-icon {
+        font-size: @uploader-file-item-icon-font-size;
+        margin: @uploader-file-item-icon-margin;
+      }
     }
 
     &-content {

package/cjs/Cascader/Cascader.js

@@ -473,7 +473,8 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
     classPrefix: classPrefix,
     hasValue: hasValue,
-    name: 'cascader'
+    name: 'cascader',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1]; // TODO: bad api design

package/cjs/DatePicker/DatePicker.js

@@ -417,7 +417,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
     classPrefix: classPrefix,
     name: 'date',
-    hasValue: hasValue
+    hasValue: hasValue,
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/DateRangePicker/DateRangePicker.js

@@ -98,7 +98,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
       locale = _useCustom.locale,
-      formatDate = _useCustom.formatDate;
+      formatDate = _useCustom.formatDate,
+      parseDate = _useCustom.parseDate;
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
@@ -393,13 +394,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
 
-    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr)) {
+    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {
+      locale: locale.dateLocale
+    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {
+      locale: locale.dateLocale
+    })) {
       setInputState('Error');
       return;
     }
 
-    var startDate = new Date(rangeValue[0]);
-    var endDate = new Date(rangeValue[1]);
+    var startDate = parseDate(rangeValue[0], formatStr);
+    var endDate = parseDate(rangeValue[1], formatStr);
     var selectValue = [startDate, endDate];
 
     if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {
@@ -569,7 +574,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
     classPrefix: classPrefix,
     name: 'daterange',
-    hasValue: hasValue
+    hasValue: hasValue,
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/InputPicker/InputPicker.js

@@ -674,7 +674,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classPrefix: classPrefix,
     appearance: appearance,
     hasValue: hasValue,
-    name: 'input'
+    name: 'input',
+    cleanable: cleanable
   })),
       pickerClasses = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/MultiCascader/MultiCascader.js

@@ -479,7 +479,8 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
     classPrefix: classPrefix,
     hasValue: hasValue,
-    name: 'cascader'
+    name: 'cascader',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/SelectPicker/SelectPicker.js

@@ -301,7 +301,8 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     classPrefix: classPrefix,
     appearance: appearance,
     hasValue: hasValue,
-    name: 'select'
+    name: 'select',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TableProps, ColumnProps, ColumnGroupProps } from 'rsuite-table';
-import { StandardProps } from '../@types/common';
+import { Column, Cell, HeaderCell, ColumnGroup, TableProps } from 'rsuite-table';
+import { StandardProps, RsRefForwardingComponent } from '../@types/common';
 export interface TableInstance extends React.Component<TableProps> {
     scrollTop: (top: number) => void;
     scrollLeft: (left: number) => void;
@@ -13,13 +13,13 @@ export interface CellProps extends StandardProps {
     /** Row Data */
     rowData?: any;
 }
-interface TableComponent extends React.ForwardRefExoticComponent<TableProps & {
+interface TableComponent extends RsRefForwardingComponent<'div', TableProps & {
     ref?: React.Ref<TableInstance>;
 }> {
-    Column: React.ComponentType<ColumnProps>;
-    ColumnGroup: React.ComponentType<ColumnGroupProps>;
-    Cell: React.ComponentType<CellProps>;
-    HeaderCell: React.ComponentType<StandardProps>;
+    Column: typeof Column;
+    Cell: typeof Cell;
+    HeaderCell: typeof HeaderCell;
+    ColumnGroup: typeof ColumnGroup;
 }
 declare const Table: TableComponent;
 export default Table;

package/cjs/TagPicker/index.d.ts

@@ -7,7 +7,7 @@ export interface TagPickerProps extends InputPickerProps {
     /**
      * Set the trigger for creating tags. only valid when creatable
      */
-    trigger: TriggerType | TriggerType[];
+    trigger?: TriggerType | TriggerType[];
 }
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;

package/cjs/TreePicker/TreePicker.js

@@ -729,7 +729,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classPrefix: classPrefix,
     appearance: appearance,
     hasValue: hasValidValue,
-    name: 'tree'
+    name: 'tree',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/Uploader/UploadFileItem.d.ts

@@ -13,9 +13,11 @@ export interface UploadFileItemProps extends WithAsProps {
     allowReupload?: boolean;
     locale?: UploaderLocale;
     renderFileInfo?: (file: FileType, fileElement: React.ReactNode) => React.ReactNode;
+    renderThumbnail?: (file: FileType, thumbnail: React.ReactNode) => React.ReactNode;
     onCancel?: (fileKey: number | string, event: React.MouseEvent) => void;
     onPreview?: (file: FileType, event: React.MouseEvent) => void;
     onReupload?: (file: FileType, event: React.MouseEvent) => void;
+    onThumbnailCompleted?: (thumbnail: string) => void;
 }
 /**
  * Format display file size

package/cjs/Uploader/UploadFileItem.js

@@ -71,10 +71,12 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "onPreview", "onCancel", "onReupload"]);
+      onThumbnailCompleted = props.onThumbnailCompleted,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "renderThumbnail", "onPreview", "onCancel", "onReupload", "onThumbnailCompleted"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -99,7 +101,8 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
     if (!~['picture-text', 'picture'].indexOf(listType)) {
       return;
-    }
+    } // 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;
@@ -111,9 +114,10 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     if (!file.url) {
       getThumbnail(function (previewImage) {
         setPreviewImage(previewImage);
+        onThumbnailCompleted === null || onThumbnailCompleted === void 0 ? void 0 : onThumbnailCompleted(previewImage);
       });
     }
-  }, [file.url, getThumbnail]);
+  }, [file.url, getThumbnail, onThumbnailCompleted]);
   var handlePreview = (0, _react.useCallback)(function (event) {
     if (disabled) {
       return;
@@ -161,18 +165,17 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   };
 
   var renderPreview = function renderPreview() {
-    if (previewImage) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefix('preview')
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        role: "presentation",
-        src: previewImage,
-        alt: file.name,
-        onClick: handlePreview
-      }));
-    }
-
-    return null;
+    var thumbnail = previewImage ? /*#__PURE__*/_react.default.createElement("img", {
+      role: "presentation",
+      src: previewImage,
+      alt: file.name,
+      onClick: handlePreview
+    }) : /*#__PURE__*/_react.default.createElement(_Attachment.default, {
+      className: prefix('icon')
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefix('preview')
+    }, renderThumbnail ? renderThumbnail(file, thumbnail) : thumbnail);
   };
   /**
    * Render the loading state.
@@ -184,11 +187,22 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     var classes = prefix('icon-wrapper', {
       'icon-loading': uploading
     });
+
+    if (uploading) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: prefix('icon')
+      }));
+    }
+
+    if (listType === 'picture' || listType === 'picture-text') {
+      return null;
+    }
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classes
-    }, uploading ? /*#__PURE__*/_react.default.createElement("i", {
-      className: prefix('icon')
-    }) : /*#__PURE__*/_react.default.createElement(_Attachment.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Attachment.default, {
       className: prefix('icon')
     }));
   };
@@ -293,9 +307,11 @@ UploadFileItem.propTypes = {
   removable: _propTypes.default.bool,
   allowReupload: _propTypes.default.bool,
   renderFileInfo: _propTypes.default.func,
+  renderThumbnail: _propTypes.default.func,
   onCancel: _propTypes.default.func,
   onPreview: _propTypes.default.func,
-  onReupload: _propTypes.default.func
+  onReupload: _propTypes.default.func,
+  onThumbnailCompleted: _propTypes.default.func
 };
 var _default = UploadFileItem;
 exports.default = _default;

package/cjs/Uploader/Uploader.d.ts

@@ -93,6 +93,8 @@ export interface UploaderProps extends WithAsProps {
     onRemove?: (file: FileType) => void;
     /** Custom render file information */
     renderFileInfo?: (file: FileType, fileElement: React.ReactNode) => React.ReactNode;
+    /** Custom render thumbnail */
+    renderThumbnail?: (file: FileType, thumbnail: React.ReactNode) => React.ReactNode;
 }
 export declare type FileStatusType = 'inited' | 'uploading' | 'error' | 'finished';
 export interface FileProgressType {

package/cjs/Uploader/Uploader.js

@@ -153,13 +153,14 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       shouldUpload = props.shouldUpload,
       shouldQueueUpdate = props.shouldQueueUpdate,
       renderFileInfo = props.renderFileInfo,
+      renderThumbnail = props.renderThumbnail,
       onPreview = props.onPreview,
       onChange = props.onChange,
       onSuccess = props.onSuccess,
       onError = props.onError,
       onProgress = props.onProgress,
       onReupload = props.onReupload,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "listType", "defaultFileList", "fileList", "fileListVisible", "locale", "style", "draggable", "name", "multiple", "disabled", "readOnly", "plaintext", "accept", "children", "toggleAs", "removable", "disabledFileItem", "maxPreviewFileSize", "autoUpload", "action", "headers", "withCredentials", "disableMultipart", "timeout", "data", "onRemove", "onUpload", "shouldUpload", "shouldQueueUpdate", "renderFileInfo", "onPreview", "onChange", "onSuccess", "onError", "onProgress", "onReupload"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "listType", "defaultFileList", "fileList", "fileListVisible", "locale", "style", "draggable", "name", "multiple", "disabled", "readOnly", "plaintext", "accept", "children", "toggleAs", "removable", "disabledFileItem", "maxPreviewFileSize", "autoUpload", "action", "headers", "withCredentials", "disableMultipart", "timeout", "data", "onRemove", "onUpload", "shouldUpload", "shouldQueueUpdate", "renderFileInfo", "renderThumbnail", "onPreview", "onChange", "onSuccess", "onError", "onProgress", "onReupload"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -415,6 +416,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         onReupload: handleReupload,
         onCancel: handleRemoveFile,
         renderFileInfo: renderFileInfo,
+        renderThumbnail: renderThumbnail,
         removable: removable && !readOnly && !plaintext,
         allowReupload: !readOnly && !plaintext
       });
@@ -473,6 +475,7 @@ Uploader.propTypes = {
   style: _propTypes.default.object,
   toggleAs: _propTypes.default.elementType,
   renderFileInfo: _propTypes.default.func,
+  renderThumbnail: _propTypes.default.func,
   removable: _propTypes.default.bool,
   fileListVisible: _propTypes.default.bool,
   draggable: _propTypes.default.bool,

package/cjs/utils/previewFile.d.ts

@@ -1,2 +1,3 @@
+export declare function isImage(file: any): boolean;
 declare const _default: (file: File, callback: (result: string | ArrayBuffer) => void) => void;
 export default _default;

package/cjs/utils/previewFile.js

@@ -1,9 +1,20 @@
 "use strict";
 
 exports.__esModule = true;
+exports.isImage = isImage;
 exports.default = void 0;
+// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+var MIME = ['image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'];
+
+function isImage(file) {
+  return MIME.includes(file === null || file === void 0 ? void 0 : file.type);
+}
 
 var _default = function _default(file, callback) {
+  if (!isImage(file)) {
+    return callback(null);
+  }
+
   var reader = new FileReader();
 
   reader.onloadend = function () {

package/dist/rsuite-rtl.css

@@ -15344,6 +15344,10 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
        object-fit: cover;
   }
 }
+.rs-uploader-picture .rs-uploader-file-item-preview .rs-uploader-file-item-icon {
+  font-size: 22px;
+  margin: 22px;
+}
 .rs-uploader-picture .rs-uploader-file-item-status {
   position: absolute;
   top: 0;
@@ -15708,6 +15712,10 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
        object-fit: cover;
   }
 }
+.rs-uploader-picture-text .rs-uploader-file-item-preview .rs-uploader-file-item-icon {
+  font-size: 22px;
+  margin: 12px;
+}
 .rs-uploader-picture-text .rs-uploader-file-item-content {
   padding: 5px 12px;
 }