rsuite 4.8.9 → 4.9.3

package/lib/Uploader/Uploader.js

@@ -70,14 +70,15 @@ function (_React$Component) {
 
       (_this$props$onRemove = (_this$props = _this.props).onRemove) === null || _this$props$onRemove === void 0 ? void 0 : _this$props$onRemove.call(_this$props, file);
       (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, nextFileList);
+
+      _this.cleanInputValue();
     };
 
     _this.handleUploadTriggerChange = function (event) {
-      var _this$props$onChange2, _this$props4;
-
       var _this$props3 = _this.props,
           autoUpload = _this$props3.autoUpload,
-          shouldQueueUpdate = _this$props3.shouldQueueUpdate;
+          shouldQueueUpdate = _this$props3.shouldQueueUpdate,
+          onChange = _this$props3.onChange;
 
       var fileList = _this.getFileList();
 
@@ -92,20 +93,32 @@ function (_React$Component) {
         });
       });
       var nextFileList = [].concat(fileList, newFileList);
+      var checkState = shouldQueueUpdate === null || shouldQueueUpdate === void 0 ? void 0 : shouldQueueUpdate(nextFileList, newFileList);
+
+      var upload = function upload() {
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList);
+
+        _this.setState({
+          fileList: nextFileList
+        }, function () {
+          autoUpload && _this.handleAjaxUpload();
+        });
+      };
 
-      if ((shouldQueueUpdate === null || shouldQueueUpdate === void 0 ? void 0 : shouldQueueUpdate(nextFileList, newFileList)) === false) {
+      if (checkState instanceof Promise) {
+        checkState.then(function (res) {
+          if (res) {
+            upload();
+          }
+        });
+        return;
+      } else if (checkState === false) {
         _this.cleanInputValue();
 
         return;
       }
 
-      (_this$props$onChange2 = (_this$props4 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props4, nextFileList);
-
-      _this.setState({
-        fileList: nextFileList
-      }, function () {
-        autoUpload && _this.handleAjaxUpload();
-      });
+      upload();
     };
 
     _this.handleAjaxUploadSuccess = function (file, response, event, xhr) {
@@ -115,9 +128,9 @@ function (_React$Component) {
       });
 
       _this.updateFileList(nextFile, function () {
-        var _this$props$onSuccess, _this$props5;
+        var _this$props$onSuccess, _this$props4;
 
-        (_this$props$onSuccess = (_this$props5 = _this.props).onSuccess) === null || _this$props$onSuccess === void 0 ? void 0 : _this$props$onSuccess.call(_this$props5, response, nextFile, event, xhr);
+        (_this$props$onSuccess = (_this$props4 = _this.props).onSuccess) === null || _this$props$onSuccess === void 0 ? void 0 : _this$props$onSuccess.call(_this$props4, response, nextFile, event, xhr);
       });
     };
 
@@ -127,9 +140,9 @@ function (_React$Component) {
       });
 
       _this.updateFileList(nextFile, function () {
-        var _this$props$onError, _this$props6;
+        var _this$props$onError, _this$props5;
 
-        (_this$props$onError = (_this$props6 = _this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props6, status, nextFile, event, xhr);
+        (_this$props$onError = (_this$props5 = _this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props5, status, nextFile, event, xhr);
       });
     };
 
@@ -140,21 +153,21 @@ function (_React$Component) {
       });
 
       _this.updateFileList(nextFile, function () {
-        var _this$props$onProgres, _this$props7;
+        var _this$props$onProgres, _this$props6;
 
-        (_this$props$onProgres = (_this$props7 = _this.props).onProgress) === null || _this$props$onProgres === void 0 ? void 0 : _this$props$onProgres.call(_this$props7, percent, nextFile, event, xhr);
+        (_this$props$onProgres = (_this$props6 = _this.props).onProgress) === null || _this$props$onProgres === void 0 ? void 0 : _this$props$onProgres.call(_this$props6, percent, nextFile, event, xhr);
       });
     };
 
     _this.handleUploadFile = function (file) {
-      var _this$props8 = _this.props,
-          name = _this$props8.name,
-          action = _this$props8.action,
-          headers = _this$props8.headers,
-          withCredentials = _this$props8.withCredentials,
-          timeout = _this$props8.timeout,
-          data = _this$props8.data,
-          onUpload = _this$props8.onUpload;
+      var _this$props7 = _this.props,
+          name = _this$props7.name,
+          action = _this$props7.action,
+          headers = _this$props7.headers,
+          withCredentials = _this$props7.withCredentials,
+          timeout = _this$props7.timeout,
+          data = _this$props7.data,
+          onUpload = _this$props7.onUpload;
       var xhr = (0, _utils.ajaxUpload)({
         name: name,
         timeout: timeout,
@@ -177,9 +190,9 @@ function (_React$Component) {
     };
 
     _this.handleReupload = function (file) {
-      var _this$props9 = _this.props,
-          onReupload = _this$props9.onReupload,
-          autoUpload = _this$props9.autoUpload;
+      var _this$props8 = _this.props,
+          onReupload = _this$props8.onReupload,
+          autoUpload = _this$props8.autoUpload;
       autoUpload && _this.handleUploadFile(file);
       onReupload === null || onReupload === void 0 ? void 0 : onReupload(file);
     };
@@ -249,7 +262,16 @@ function (_React$Component) {
     var shouldUpload = this.props.shouldUpload;
     var fileList = this.getFileList();
     fileList.forEach(function (file) {
-      if ((shouldUpload === null || shouldUpload === void 0 ? void 0 : shouldUpload(file)) === false) {
+      var checkState = shouldUpload === null || shouldUpload === void 0 ? void 0 : shouldUpload(file);
+
+      if (checkState instanceof Promise) {
+        checkState.then(function (res) {
+          if (res) {
+            _this2.handleUploadFile(file);
+          }
+        });
+        return;
+      } else if (checkState === false) {
         return;
       }
 
@@ -284,13 +306,13 @@ function (_React$Component) {
   _proto.renderFileItems = function renderFileItems() {
     var _this3 = this;
 
-    var _this$props10 = this.props,
-        disabledFileItem = _this$props10.disabledFileItem,
-        listType = _this$props10.listType,
-        onPreview = _this$props10.onPreview,
-        maxPreviewFileSize = _this$props10.maxPreviewFileSize,
-        renderFileInfo = _this$props10.renderFileInfo,
-        removable = _this$props10.removable;
+    var _this$props9 = this.props,
+        disabledFileItem = _this$props9.disabledFileItem,
+        listType = _this$props9.listType,
+        onPreview = _this$props9.onPreview,
+        maxPreviewFileSize = _this$props9.maxPreviewFileSize,
+        renderFileInfo = _this$props9.renderFileInfo,
+        removable = _this$props9.removable;
     var fileList = this.getFileList();
     return React.createElement("div", {
       key: "items",
@@ -312,15 +334,15 @@ function (_React$Component) {
   };
 
   _proto.renderUploadTrigger = function renderUploadTrigger() {
-    var _this$props11 = this.props,
-        name = _this$props11.name,
-        multiple = _this$props11.multiple,
-        disabled = _this$props11.disabled,
-        accept = _this$props11.accept,
-        children = _this$props11.children,
-        toggleComponentClass = _this$props11.toggleComponentClass,
-        draggable = _this$props11.draggable,
-        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props11, ["name", "multiple", "disabled", "accept", "children", "toggleComponentClass", "draggable"]);
+    var _this$props10 = this.props,
+        name = _this$props10.name,
+        multiple = _this$props10.multiple,
+        disabled = _this$props10.disabled,
+        accept = _this$props10.accept,
+        children = _this$props10.children,
+        toggleComponentClass = _this$props10.toggleComponentClass,
+        draggable = _this$props10.draggable,
+        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props10, ["name", "multiple", "disabled", "accept", "children", "toggleComponentClass", "draggable"]);
     var unhandled = (0, _utils.getUnhandledProps)(Uploader, rest);
     return React.createElement(_UploadTrigger.default, (0, _extends2.default)({}, unhandled, {
       name: name,
@@ -338,14 +360,14 @@ function (_React$Component) {
   _proto.render = function render() {
     var _classNames;
 
-    var _this$props12 = this.props,
-        classPrefix = _this$props12.classPrefix,
-        className = _this$props12.className,
-        listType = _this$props12.listType,
-        fileListVisible = _this$props12.fileListVisible,
-        locale = _this$props12.locale,
-        style = _this$props12.style,
-        draggable = _this$props12.draggable;
+    var _this$props11 = this.props,
+        classPrefix = _this$props11.classPrefix,
+        className = _this$props11.className,
+        listType = _this$props11.listType,
+        fileListVisible = _this$props11.fileListVisible,
+        locale = _this$props11.locale,
+        style = _this$props11.style,
+        draggable = _this$props11.draggable;
     var classes = (0, _classnames.default)(className, classPrefix, this.addPrefix(listType), (_classNames = {}, _classNames[this.addPrefix('draggable')] = draggable, _classNames));
     var renderList = [this.renderUploadTrigger()];
 

package/lib/styles/utilities.less

@@ -44,9 +44,11 @@
 .fade {
   opacity: 0;
   transition: opacity 0.15s linear;
+  pointer-events: none;
 
   &.in {
     opacity: 1;
+    pointer-events: unset;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.8.9",
+  "version": "4.9.3",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -63,7 +63,7 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.21.0",
     "recompose": "^0.30.0",
-    "rsuite-table": "^3.14.3",
+    "rsuite-table": "^3.14.4",
     "schema-typed": "^1.5.1"
   },
   "peerDependencies": {

package/src/Footer/Footer.tsx

@@ -13,7 +13,7 @@ class Footer extends React.Component<FooterProps> {
     const { className, classPrefix, ...props } = this.props;
     const classes = classNames(classPrefix, className);
 
-    return <div {...props} className={classes} />;
+    return <footer {...props} className={classes} />;
   }
 }
 

package/src/Footer/test/FooterSpec.js

@@ -6,6 +6,7 @@ describe('Footer', () => {
   it('Should render a Footer', () => {
     const title = 'Test';
     const instance = getDOMNode(<Footer>{title}</Footer>);
+    assert.equal(instance.tagName, 'FOOTER');
     assert.include(instance.className, 'rs-footer');
     assert.equal(innerText(instance), title);
   });

package/src/InputPicker/InputAutosize.tsx

@@ -158,7 +158,8 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
       className,
       placeholder,
       inputClassName,
-      inputStyle
+      inputStyle,
+      tabIndex
     } = this.props;
 
     const inputId = this.getInputId();
@@ -185,6 +186,7 @@ class InputAutosize extends React.Component<InputAutosizeProps, InputAutosizeSta
     htmlInputProps.className = inputClassName;
     htmlInputProps.id = inputId || inputId;
     htmlInputProps.style = nextInputStyle;
+    htmlInputProps.tabIndex = tabIndex;
 
     return (
       <div className={className} style={wrapperStyle}>

package/src/InputPicker/InputPicker.tsx

@@ -472,20 +472,11 @@ class InputPicker extends React.Component<InputPickerProps, InputPickerState> {
     const { onClose, multi } = this.props;
     const value: any = this.getValue();
 
-    const nextState: InputPickerState = {
-      focusItemValue: multi ? _.get(value, 0) : value
-    };
-
-    if (multi) {
-      /**
-       在多选的情况下, 当 searchKeyword 过长，在 focus 的时候会导致内容换行。
-       把 searchKeyword 清空是为了，Menu 在展开时候位置正确。
-       */
-      nextState.searchKeyword = '';
-    }
-
     onClose?.();
-    this.setState(nextState);
+    this.setState({
+      focusItemValue: multi ? _.get(value, 0) : value,
+      searchKeyword: ''
+    });
   };
 
   handleEnter = () => {
@@ -506,6 +497,11 @@ class InputPicker extends React.Component<InputPickerProps, InputPickerState> {
     this.handleChange(value, event);
   };
 
+  handleInputFocus = () => {
+    this.setState({ open: true });
+    this.triggerRef.current?.show();
+  };
+
   removeLastItem = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const tagName = _.get(event, 'target.tagName');
     if (tagName !== 'INPUT') {
@@ -665,10 +661,8 @@ class InputPicker extends React.Component<InputPickerProps, InputPickerState> {
   }
 
   renderInputSearch() {
-    const { multi, onBlur, onFocus } = this.props;
+    const { multi, onBlur, onFocus, tabIndex } = this.props;
     const props: any = {
-      onBlur,
-      onFocus,
       componentClass: 'input',
       inputRef: this.inputRef
     };
@@ -682,8 +676,11 @@ class InputPicker extends React.Component<InputPickerProps, InputPickerState> {
     return (
       <InputSearch
         {...props}
+        tabIndex={tabIndex}
         onChange={this.handleSearch}
         value={this.state.open ? this.state.searchKeyword : ''}
+        onBlur={onBlur}
+        onFocus={createChainedFunction(this.handleInputFocus, onFocus)}
       />
     );
   }

package/src/InputPicker/test/InputPickerSpec.js

@@ -321,4 +321,9 @@ describe('InputPicker', () => {
     assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
   });
+
+  it('Should set a tabindex for input', () => {
+    const instance = getDOMNode(<InputPicker tabIndex={10} />);
+    assert.equal(instance.querySelector('.rs-picker-search-input').getAttribute('tabindex'), '10');
+  });
 });

package/src/Nav/Nav.tsx

@@ -5,7 +5,13 @@ import { setStatic } from 'recompose';
 import shallowEqual from '../utils/shallowEqual';
 
 import NavItem from './NavItem';
-import { prefix, getUnhandledProps, defaultProps, ReactChildren } from '../utils';
+import {
+  prefix,
+  getUnhandledProps,
+  defaultProps,
+  ReactChildren,
+  createChainedFunction
+} from '../utils';
 import { getClassNamePrefix } from '../utils/prefix';
 import { NavbarContext } from '../Navbar/Navbar';
 import { SidenavContext } from '../Sidenav/Sidenav';
@@ -56,21 +62,21 @@ class Nav extends React.Component<NavProps> {
     const hasWaterline = appearance !== 'default';
 
     const items = ReactChildren.mapCloneElement(children, item => {
-      const { eventKey, active, ...rest } = item.props;
+      const { eventKey, active, onSelect: onSelectItem, ...rest } = item.props;
       const displayName = item?.type?.displayName;
       const hasTooltip = sidenav && !expanded;
 
       if (~displayName?.indexOf('(NavItem)')) {
         return {
           ...rest,
-          onSelect,
+          onSelect: createChainedFunction(onSelect, onSelectItem),
           hasTooltip,
           active: typeof activeKey === 'undefined' ? active : shallowEqual(activeKey, eventKey)
         };
       } else if (~displayName?.indexOf('(Dropdown)')) {
         return {
           ...rest,
-          onSelect,
+          onSelect: createChainedFunction(onSelect, onSelectItem),
           activeKey,
           showHeader: hasTooltip,
           componentClass: 'li'

package/src/Nav/test/NavSpec.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactTestUtils from 'react-dom/test-utils';
 import { innerText, getDOMNode } from '@test/testUtils';
 
 import Nav from '../Nav';
@@ -68,4 +69,38 @@ describe('Nav', () => {
     const instance = getDOMNode(<Nav classPrefix="custom-prefix" />);
     assert.ok(instance.className.match(/\bcustom-prefix\b/));
   });
+
+  it('Should call onSelect callback', done => {
+    const doneOp = eventKey => {
+      if (eventKey === 2) {
+        done();
+      }
+    };
+    const instance = getDOMNode(
+      <Nav onSelect={doneOp}>
+        <Nav.Item eventKey={1}>1</Nav.Item>
+        <Nav.Item eventKey={2}>2</Nav.Item>
+      </Nav>
+    );
+
+    ReactTestUtils.Simulate.click(instance.querySelectorAll('.rs-nav-item a')[1]);
+  });
+
+  it('Should call onSelect callback on Nav.Item', done => {
+    const doneOp = eventKey => {
+      if (eventKey === 2) {
+        done();
+      }
+    };
+    const instance = getDOMNode(
+      <Nav>
+        <Nav.Item eventKey={1}>1</Nav.Item>
+        <Nav.Item eventKey={2} onSelect={doneOp}>
+          2
+        </Nav.Item>
+      </Nav>
+    );
+
+    ReactTestUtils.Simulate.click(instance.querySelectorAll('.rs-nav-item a')[1]);
+  });
 });

package/src/Overlay/OverlayTrigger.tsx

@@ -211,7 +211,13 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
     }
 
     if (typeof speaker === 'function') {
-      return <Overlay {...overlayProps}>{speaker}</Overlay>;
+      return (
+        <Overlay {...overlayProps}>
+          {(props, ref) => {
+            return speaker({ ...props, onClose: this.hide }, ref);
+          }}
+        </Overlay>
+      );
     }
 
     return <Overlay {...overlayProps}>{React.cloneElement(speaker, speakerProps)}</Overlay>;

package/src/RangeSlider/RangeSlider.tsx

@@ -146,7 +146,7 @@ class RangeSlider extends React.Component<RangeSliderProps, RangeSliderState> {
       end = value;
     }
 
-    this.setValue([start, end], event);
+    this.setValue([start, end].sort() as ValueType, event);
   };
 
   handleDragMove = (key: 'start' | 'end', event: React.MouseEvent) => {

package/src/TagPicker/test/TagPickerSpec.js

@@ -351,4 +351,9 @@ describe('TagPicker', () => {
     assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
   });
+
+  it('Should set a tabindex for input', () => {
+    const instance = getDOMNode(<TagPicker tabIndex={10} />);
+    assert.equal(instance.querySelector('input[type="text"]').getAttribute('tabindex'), '10');
+  });
 });

package/src/Uploader/Uploader.d.ts

@@ -67,10 +67,13 @@ export interface UploaderProps extends StandardProps {
   listType?: 'text' | 'picture-text' | 'picture';
 
   /** Allow the queue to be updated. After you select a file, update the checksum function before the upload file queue, and return false to not update */
-  shouldQueueUpdate?: (fileList: FileType[], newFile: FileType[] | FileType) => boolean;
+  shouldQueueUpdate?: (
+    fileList: FileType[],
+    newFile: FileType[] | FileType
+  ) => boolean | Promise<boolean>;
 
   /** Allow uploading of files. Check function before file upload, return false without uploading  */
-  shouldUpload?: (file: FileType) => boolean;
+  shouldUpload?: (file: FileType) => boolean | Promise<boolean>;
 
   /** callback function that the upload queue has changed */
   onChange?: (fileList: FileType[]) => void;

package/src/Uploader/Uploader.tsx

@@ -132,10 +132,11 @@ class Uploader extends React.Component<UploaderProps, UploaderState> {
 
     this.props.onRemove?.(file);
     this.props.onChange?.(nextFileList);
+    this.cleanInputValue();
   };
 
   handleUploadTriggerChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { autoUpload, shouldQueueUpdate } = this.props;
+    const { autoUpload, shouldQueueUpdate, onChange } = this.props;
     const fileList = this.getFileList();
     const files: File[] = getFiles(event);
     const newFileList: FileType[] = [];
@@ -150,23 +151,42 @@ class Uploader extends React.Component<UploaderProps, UploaderState> {
     });
 
     const nextFileList = [...fileList, ...newFileList];
+    const checkState = shouldQueueUpdate?.(nextFileList, newFileList);
+    const upload = () => {
+      onChange?.(nextFileList);
+      this.setState({ fileList: nextFileList }, () => {
+        autoUpload && this.handleAjaxUpload();
+      });
+    };
 
-    if (shouldQueueUpdate?.(nextFileList, newFileList) === false) {
+    if (checkState instanceof Promise) {
+      checkState.then(res => {
+        if (res) {
+          upload();
+        }
+      });
+      return;
+    } else if (checkState === false) {
       this.cleanInputValue();
       return;
     }
-
-    this.props.onChange?.(nextFileList);
-    this.setState({ fileList: nextFileList }, () => {
-      autoUpload && this.handleAjaxUpload();
-    });
+    upload();
   };
 
   handleAjaxUpload() {
     const { shouldUpload } = this.props;
     const fileList = this.getFileList();
     fileList.forEach(file => {
-      if (shouldUpload?.(file) === false) {
+      const checkState = shouldUpload?.(file);
+
+      if (checkState instanceof Promise) {
+        checkState.then(res => {
+          if (res) {
+            this.handleUploadFile(file);
+          }
+        });
+        return;
+      } else if (checkState === false) {
         return;
       }
 
@@ -336,6 +356,7 @@ class Uploader extends React.Component<UploaderProps, UploaderState> {
       ...rest
     } = this.props;
     const unhandled = getUnhandledProps(Uploader, rest);
+
     return (
       <UploadTrigger
         {...unhandled}

package/src/Whisper/test/WhisperSpec.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
-import { getDOMNode } from '@test/testUtils';
+import { getDOMNode, createTestContainer } from '@test/testUtils';
 
 import Whisper from '../Whisper';
 import Tooltip from '../../Tooltip';
@@ -166,4 +167,48 @@ describe('Whisper', () => {
 
     ReactTestUtils.Simulate.click(whisper);
   });
+
+  it('Should Overlay be closed, after call onClose', done => {
+    const doneOp = () => {
+      done();
+    };
+    const btnRef = React.createRef();
+    const closeBtnRef = React.createRef();
+    const Overlay = React.forwardRef(({ style, onClose, ...rest }, ref) => {
+      return (
+        <div {...rest} style={style} ref={ref}>
+          <button ref={closeBtnRef} onClick={onClose}>
+            close
+          </button>
+        </div>
+      );
+    });
+
+    Overlay.displayName = 'Overlay';
+
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <Whisper
+          onExited={doneOp}
+          trigger="click"
+          speaker={(props, ref) => {
+            const { className, left, top, onClose } = props;
+            return (
+              <Overlay style={{ left, top }} onClose={onClose} className={className} ref={ref} />
+            );
+          }}
+        >
+          <button ref={btnRef}>button</button>
+        </Whisper>,
+        createTestContainer()
+      );
+    });
+    ReactTestUtils.act(() => {
+      ReactTestUtils.Simulate.click(btnRef.current);
+    });
+
+    ReactTestUtils.act(() => {
+      ReactTestUtils.Simulate.click(closeBtnRef.current);
+    });
+  });
 });

package/src/styles/utilities.less

@@ -44,9 +44,11 @@
 .fade {
   opacity: 0;
   transition: opacity 0.15s linear;
+  pointer-events: none;
 
   &.in {
     opacity: 1;
+    pointer-events: unset;
   }
 }