rsuite 4.10.1 → 4.10.5

package/src/Cascader/Cascader.tsx

@@ -69,9 +69,11 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     }
   };
 
+  toggleRef: React.RefObject<any>;
   triggerRef: React.RefObject<any>;
   containerRef: React.RefObject<any>;
   positionRef: React.RefObject<any>;
+  menuWrapperRef: React.RefObject<any>;
   menuContainerRef: React.RefObject<any>;
   isControlled: boolean;
 
@@ -97,20 +99,22 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     this.state = {
       ...initState,
       ...getDerivedStateForCascade(props, initState),
-      flattenData: flattenTree(props.data)
+      flattenData: flattenTree(props.data, props.childrenKey)
     };
 
     this.isControlled = !_.isUndefined(props.value);
     this.triggerRef = React.createRef();
     this.containerRef = React.createRef();
     this.positionRef = React.createRef();
+    this.toggleRef = React.createRef();
 
     // for test
+    this.menuWrapperRef = React.createRef();
     this.menuContainerRef = React.createRef();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { value, data, labelKey, valueKey } = nextProps;
+    const { value, data, labelKey, valueKey, childrenKey } = nextProps;
     if (data !== prevState.data) {
       // First get the value of the clicked node `selectNodeValue`, and then get the new `newChildren`.
       const selectNodeValue = prevState?.selectNode?.[valueKey];
@@ -127,13 +131,13 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
             newChildren.map(item => stringToObject(item, labelKey, valueKey))
           ),
           data,
-          flattenData: flattenTree(data)
+          flattenData: flattenTree(data, childrenKey)
         };
       }
 
       return {
         ...getDerivedStateForCascade(nextProps, prevState),
-        flattenData: flattenTree(data),
+        flattenData: flattenTree(data, childrenKey),
         data
       };
     }
@@ -397,6 +401,14 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     return items;
   }
 
+  getPositionInstance = () => {
+    return this.positionRef.current;
+  };
+
+  getToggleInstance = () => {
+    return this.toggleRef.current;
+  };
+
   renderSearchResultPanel() {
     const { locale } = this.props;
     const { searchKeyword } = this.state;
@@ -439,7 +451,13 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     );
 
     return (
-      <MenuWrapper className={classes} style={menuStyle}>
+      <MenuWrapper
+        ref={this.menuWrapperRef}
+        className={classes}
+        style={menuStyle}
+        getToggleInstance={this.getToggleInstance}
+        getPositionInstance={this.getPositionInstance}
+      >
         {searchable && (
           <SearchBar
             placeholder={locale.searchPlaceholder}
@@ -538,6 +556,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           >
             <PickerToggle
               {...unhandled}
+              ref={this.toggleRef}
               componentClass={toggleComponentClass}
               onClean={createChainedFunction(this.handleClean, onClean)}
               cleanable={cleanable && !disabled}

package/src/Cascader/test/CascaderSpec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
+import ReactTestUtils, { act } from 'react-dom/test-utils';
 import Cascader from '../Cascader';
 import Button from '../../Button';
 import { getDOMNode, getInstance } from '@test/testUtils';
@@ -214,4 +214,59 @@ describe('Cascader', () => {
     assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
   });
+
+  it('Should show search items with childrenKey', () => {
+    const itemsWithChildrenKey = {
+      childrenKey: 'sub',
+      data: [
+        {
+          value: 't',
+          label: 't'
+        },
+        {
+          value: 'h',
+          label: 'h'
+        },
+        {
+          value: 'g',
+          label: 'g',
+          sub: [
+            {
+              value: 'g-m',
+              label: 'g-m'
+            },
+            {
+              value: 'g-b',
+              label: 'g-b'
+            }
+          ]
+        }
+      ]
+    };
+
+    const instance = getInstance(
+      <Cascader
+        defaultOpen
+        data={itemsWithChildrenKey.data}
+        childrenKey={itemsWithChildrenKey.childrenKey}
+      />
+    );
+
+    const overlay = getDOMNode(instance.menuWrapperRef.current);
+
+    ReactTestUtils.act(() => {
+      const input = overlay.querySelector('.rs-picker-search-bar-input');
+
+      ReactTestUtils.Simulate.focus(input);
+
+      input.value = 'g';
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    ReactTestUtils.act(() => {
+      const searchResult = overlay.querySelectorAll('.rs-picker-cascader-row');
+
+      assert.equal(searchResult.length, 2);
+    });
+  });
 });

package/src/CheckTreePicker/CheckTreePicker.tsx

@@ -195,11 +195,14 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
       nextState.value = value;
     }
 
-    if (compareArray(expandItemValues, prevState.expandItemValues)) {
+    if (compareArray(expandItemValues, prevState.expandItemValues) && _.isArray(expandItemValues)) {
       nextState.expandItemValues = expandItemValues;
     }
 
-    if (compareArray(uncheckableItemValues, prevState.uncheckableItemValues)) {
+    if (
+      compareArray(uncheckableItemValues, prevState.uncheckableItemValues) &&
+      _.isArray(uncheckableItemValues)
+    ) {
       nextState.uncheckableItemValues = uncheckableItemValues;
     }
 
@@ -258,7 +261,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     const { value } = this.props;
     if (compareArray(value, prevState.value)) {
       this.unserializeLists({
-        check: value,
+        check: value ?? [],
         expand: expandItemValues
       });
       this.setState({
@@ -271,7 +274,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
 
   updateExpandItemValuesChange(prevState: CheckTreePickerState) {
     const { expandItemValues } = this.props;
-    if (compareArray(expandItemValues, prevState.expandItemValues)) {
+    if (compareArray(expandItemValues, prevState.expandItemValues) && _.isArray(expandItemValues)) {
       this.unserializeLists({
         expand: expandItemValues
       });
@@ -284,7 +287,10 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
   updateUncheckableItemValuesChange(prevState: CheckTreePickerState) {
     const { data, selectedValues, expandItemValues } = this.state;
     const { uncheckableItemValues } = this.props;
-    if (compareArray(uncheckableItemValues, prevState.uncheckableItemValues)) {
+    if (
+      compareArray(uncheckableItemValues, prevState.uncheckableItemValues) &&
+      _.isArray(uncheckableItemValues)
+    ) {
       this.flattenNodes(data);
       this.unserializeLists({
         check: selectedValues,
@@ -343,6 +349,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
 
     if (isEveryChildChecked(node, this.nodes, this.props)) {
       this.nodes[node.refKey].checkAll = true;
+      this.nodes[node.refKey].check = true;
       return CHECK_STATE.CHECK;
     }
 
@@ -481,6 +488,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     const checkItems = [];
     Object.keys(this.nodes).map((refKey: string) => {
       const node = this.nodes[refKey];
+
       if (selectedValues.some((value: any) => shallowEqual(node[valueKey], value))) {
         checkItems.push(node);
       }
@@ -531,7 +539,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
   }
 
   /**
-   * 过滤选中的values中不包含 uncheckableItemValues 的那些值
+   * 过滤选中的 values 中不包含 uncheckableItemValues 的那些值
    * @param {*} values
    */
   filterSelectedValues(values: any[]) {
@@ -743,7 +751,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
   }
 
   toggleNode(key: string, node: Node, toggleValue: boolean) {
-    // 如果该节点处于 disabledChecbox，则忽略该值
+    // 如果该节点处于 disabledCheckbox，则忽略该值
     if (!node.uncheckable) {
       this.nodes[node.refKey][key] = toggleValue;
     }

package/src/CheckTreePicker/test/CheckTreePickerSpec.js

@@ -4,10 +4,23 @@ import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { getDOMNode, getInstance } from '@test/testUtils';
 import CheckTreePicker from '../CheckTreePicker';
-import { findDOMNode } from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
+import { assert } from 'chai';
 
 Enzyme.configure({ adapter: new Adapter() });
 
+let container;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
+
 const data = [
   {
     label: 'Master',
@@ -298,6 +311,66 @@ describe('CheckTreePicker', () => {
     instance.unmount();
   });
 
+  it('Should return 2 values', done => {
+    const customData = [
+      {
+        value: '1',
+        label: '1',
+        children: [
+          {
+            value: '1-1',
+            label: '1-1'
+          },
+          {
+            value: '1-2',
+            label: '1-2'
+          },
+          {
+            value: '1-3',
+            label: '1-3'
+          }
+        ]
+      },
+      {
+        value: '2',
+        label: '2',
+        children: [
+          {
+            value: '2-1',
+            label: '2-1'
+          },
+          {
+            value: '2-2',
+            label: '2-2'
+          },
+          {
+            value: '2-3',
+            label: '2-3'
+          }
+        ]
+      }
+    ];
+
+    const doneOp = values => {
+      if (values.length === 2) {
+        done();
+      }
+    };
+    const instance = getDOMNode(
+      <CheckTreePicker
+        data={customData}
+        inline
+        value={['1-1', '1-2', '1-3']}
+        cascade
+        defaultExpandAll
+        onChange={doneOp}
+      />
+    );
+
+    assert.equal(instance.querySelectorAll('.rs-checkbox-checked').length, 4);
+    ReactTestUtils.Simulate.change(instance.querySelectorAll('.rs-check-tree-node input')[5]);
+  });
+
   it('Should render empty tree when searchKeyword is `name`', () => {
     const instance = mount(<CheckTreePicker data={data} inline searchKeyword="name" />);
     assert.equal(instance.find('.rs-check-tree-node').length, 0);
@@ -384,4 +457,114 @@ describe('CheckTreePicker', () => {
     assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
     assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
   });
+
+  it('Should controlled by value', () => {
+    const TestApp = React.forwardRef((props, ref) => {
+      const [value, setValue] = React.useState();
+      const pickerRef = React.useRef();
+      React.useImperativeHandle(ref, () => ({
+        picker: pickerRef.current,
+        setValue
+      }));
+
+      return <CheckTreePicker data={data} ref={pickerRef} value={value} defaultExpandAll open />;
+    });
+
+    TestApp.displayName = 'TestCheckTreePicker';
+
+    const ref = React.createRef();
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<TestApp ref={ref} />, container);
+    });
+
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-checkbox-checked').length,
+      0
+    );
+
+    ReactTestUtils.act(() => {
+      ref.current.setValue(['Master']);
+    });
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-checkbox-checked').length,
+      4
+    );
+  });
+
+  it('Should controlled by expandItemValues', () => {
+    const TestApp = React.forwardRef((props, ref) => {
+      const [expandItemValues, setExpandItemValues] = React.useState();
+      const pickerRef = React.useRef();
+      React.useImperativeHandle(ref, () => ({
+        picker: pickerRef.current,
+        setExpandItemValues
+      }));
+
+      return (
+        <CheckTreePicker data={data} ref={pickerRef} expandItemValues={expandItemValues} open />
+      );
+    });
+
+    TestApp.displayName = 'TestCheckTreePicker';
+
+    const ref = React.createRef();
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<TestApp ref={ref} />, container);
+    });
+
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-check-tree-node-expanded')
+        .length,
+      0
+    );
+
+    ReactTestUtils.act(() => {
+      ref.current.setExpandItemValues(['Master']);
+    });
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-check-tree-node-expanded')
+        .length,
+      1
+    );
+  });
+
+  it('Should controlled by uncheckableItemValues', () => {
+    const TestApp = React.forwardRef((props, ref) => {
+      const [uncheckableItemValues, setUncheckableItemValues] = React.useState();
+      const pickerRef = React.useRef();
+      React.useImperativeHandle(ref, () => ({
+        picker: pickerRef.current,
+        setUncheckableItemValues
+      }));
+
+      return (
+        <CheckTreePicker
+          data={data}
+          ref={pickerRef}
+          uncheckableItemValues={uncheckableItemValues}
+          open
+        />
+      );
+    });
+
+    TestApp.displayName = 'TestCheckTreePicker';
+
+    const ref = React.createRef();
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<TestApp ref={ref} />, container);
+    });
+
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-checkbox-inner').length,
+      5
+    );
+
+    ReactTestUtils.act(() => {
+      ref.current.setUncheckableItemValues(['Master']);
+    });
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-checkbox-inner').length,
+      4
+    );
+  });
 });

package/src/DatePicker/test/DatePickerSpec.js

@@ -293,4 +293,24 @@ describe('DatePicker', () => {
     );
     assert.equal(picker.querySelector('.rs-calendar-time-dropdown-column li').innerText, '12');
   });
+
+  it('Should keep AM PM unchanged', () => {
+    const instance = getInstance(
+      <DatePicker
+        value={parse('2017-08-14 13:00:00')}
+        format="hh:mm:ss A"
+        defaultOpen
+        showMeridian
+      />
+    );
+
+    const picker = instance.menuContainerRef.current;
+
+    assert.equal(picker.querySelector('.rs-calendar-header-title-time').innerText, '01:00:00');
+
+    ReactTestUtils.Simulate.click(picker.querySelector('.rs-calendar-time-dropdown-cell'));
+
+    assert.equal(picker.querySelector('.rs-calendar-header-meridian').innerText, 'PM');
+    assert.equal(picker.querySelector('.rs-calendar-header-title-time').innerText, '12:00:00');
+  });
 });

package/src/Drawer/index.tsx

@@ -1,6 +1,4 @@
-import { setStatic, setDisplayName } from 'recompose';
-
-import { defaultProps } from '../utils';
+import { setStatic, setDisplayName, defaultProps } from '../utils';
 import Drawer from './Drawer';
 import ModalBody from '../Modal/ModalBody';
 import ModalHeader from '../Modal/ModalHeader';

package/src/Dropdown/Dropdown.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { setStatic } from 'recompose';
 import { contains } from 'dom-lib';
 
 import RootCloseWrapper from '../Overlay/RootCloseWrapper';
@@ -11,6 +10,7 @@ import DropdownToggle from './DropdownToggle';
 import DropdownMenu from './DropdownMenu';
 import DropdownMenuItem from './DropdownMenuItem';
 import {
+  setStatic,
   createChainedFunction,
   prefix,
   isOneOf,

package/src/FlexboxGrid/FlexboxGrid.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 
-import { defaultProps, prefix } from '../utils';
+import { setStatic, defaultProps, prefix } from '../utils';
 import FlexboxGridItem from './FlexboxGridItem';
 import { FlexboxGridProps } from './FlexboxGrid.d';
 

package/src/FormGroup/FormGroup.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { compose } from 'recompose';
-import { withStyleProps, defaultProps, prefix, createContext } from '../utils';
+import { compose, withStyleProps, defaultProps, prefix, createContext } from '../utils';
 import { FormGroupProps } from './FormGroup.d';
 
 export const FormGroupContext = createContext(null);

package/src/Input/Input.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 import _ from 'lodash';
 
 import {
+  compose,
   withStyleProps,
   defaultProps,
   createChainedFunction,

package/src/InputGroup/InputGroup.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic, compose } from 'recompose';
 import InputGroupAddon from './InputGroupAddon';
 import InputGroupButton from './InputGroupButton';
-import { prefix, withStyleProps, defaultProps, createContext } from '../utils';
+import { setStatic, compose, prefix, withStyleProps, defaultProps, createContext } from '../utils';
 import { InputGroupProps } from './InputGroup.d';
 
 export const InputGroupContext = createContext(null);

package/src/IntlProvider/withLocale.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import _ from 'lodash';
-import { setDisplayName, wrapDisplayName } from 'recompose';
+import { setDisplayName, wrapDisplayName } from '../utils';
 import format from 'date-fns/format';
 import defaultLocale from './locales/default';
 import extendReactStatics from '../utils/extendReactStatics';

package/src/List/List.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { setStatic } from 'recompose';
 import classNames from 'classnames';
 import { on } from 'dom-lib';
 import {
@@ -12,7 +11,7 @@ import {
   getEdgeOffset,
   getScrollingParent
 } from './utils';
-import { prefix, defaultProps, getUnhandledProps } from '../utils';
+import { setStatic, prefix, defaultProps, getUnhandledProps } from '../utils';
 import ListItem from './ListItem';
 import { ListProps } from './List.d';
 import Manager from './Manager';

package/src/List/ListItem.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { setDisplayName } from 'recompose';
 import classNames from 'classnames';
-import { defaultProps, getUnhandledProps, prefix } from '../utils';
+import { setDisplayName, defaultProps, getUnhandledProps, prefix } from '../utils';
 import ListContext from './ListContext';
 import { ListItemProps } from './ListItem.d';
 import { ManagerRef } from './Manager';

package/src/Loader/Loader.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { withStyleProps, defaultProps, prefix } from '../utils';
+import { compose, withStyleProps, defaultProps, prefix } from '../utils';
 import { LoaderProps } from './Loader.d';
 
 class Loader extends React.Component<LoaderProps> {

package/src/Modal/Modal.tsx

@@ -2,12 +2,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { setStatic } from 'recompose';
 import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
 import BaseModal from './BaseModal';
 import Bounce from '../Animation/Bounce';
 import { on, getHeight } from 'dom-lib';
-import { prefix, defaultProps, createChainedFunction } from '../utils';
+import { setStatic, prefix, defaultProps, createChainedFunction } from '../utils';
 import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
 import ModalBody from './ModalBody';
 import ModalHeader from './ModalHeader';

package/src/Modal/ModalDialog.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { compose } from 'recompose';
 
-import { withStyleProps, defaultProps, prefix, refType } from '../utils';
+import { compose, withStyleProps, defaultProps, prefix, refType } from '../utils';
 import { ModalDialogProps } from './ModalDialog.d';
 import mergeRefs from '../utils/mergeRefs';
 

package/src/MultiCascader/MultiCascader.tsx

@@ -80,6 +80,8 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
   menuContainerRef: React.RefObject<any>;
   positionRef: React.RefObject<any>;
   triggerRef: React.RefObject<any>;
+  toggleRef: React.RefObject<any>;
+
   constructor(props) {
     super(props);
 
@@ -115,6 +117,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     this.menuContainerRef = React.createRef();
     this.positionRef = React.createRef();
     this.triggerRef = React.createRef();
+    this.toggleRef = React.createRef();
   }
 
   static getCascadeState(nextProps: MultiCascaderProps, flattenData: any[], nextValue?: any[]) {
@@ -321,6 +324,13 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     }
     return items;
   }
+  getPositionInstance = () => {
+    return this.positionRef.current;
+  };
+
+  getToggleInstance = () => {
+    return this.toggleRef.current;
+  };
 
   renderSearchRow = (item: any, key: number) => {
     const { labelKey, valueKey, cascade, disabledItemValues = [] } = this.props;
@@ -422,7 +432,12 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     const menuProps = _.pick(this.props, Object.keys(dropdownMenuPropTypes));
 
     return (
-      <MenuWrapper className={classes} style={menuStyle}>
+      <MenuWrapper
+        className={classes}
+        style={menuStyle}
+        getToggleInstance={this.getToggleInstance}
+        getPositionInstance={this.getPositionInstance}
+      >
         {searchable && (
           <SearchBar
             placeholder={locale.searchPlaceholder}
@@ -533,6 +548,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
         >
           <PickerToggle
             {...unhandled}
+            ref={this.toggleRef}
             componentClass={toggleComponentClass}
             onClean={createChainedFunction(this.handleClean, onClean)}
             cleanable={cleanable && !disabled}

package/src/Nav/Nav.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { setStatic } from 'recompose';
 import shallowEqual from '../utils/shallowEqual';
 
 import NavItem from './NavItem';
 import {
+  setStatic,
   prefix,
   getUnhandledProps,
   defaultProps,