rsuite 4.10.1 → 4.10.2

package/es/CheckTreePicker/CheckTreePicker.js

@@ -471,11 +471,11 @@ function (_React$Component) {
       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;
     }
 
@@ -542,7 +542,7 @@ function (_React$Component) {
 
     if (compareArray(value, prevState.value)) {
       this.unserializeLists({
-        check: value,
+        check: value !== null && value !== void 0 ? value : [],
         expand: expandItemValues
       });
       this.setState({
@@ -556,7 +556,7 @@ function (_React$Component) {
   _proto.updateExpandItemValuesChange = function updateExpandItemValuesChange(prevState) {
     var expandItemValues = this.props.expandItemValues;
 
-    if (compareArray(expandItemValues, prevState.expandItemValues)) {
+    if (compareArray(expandItemValues, prevState.expandItemValues) && _isArray(expandItemValues)) {
       this.unserializeLists({
         expand: expandItemValues
       });
@@ -573,7 +573,7 @@ function (_React$Component) {
         expandItemValues = _this$state3.expandItemValues;
     var uncheckableItemValues = this.props.uncheckableItemValues;
 
-    if (compareArray(uncheckableItemValues, prevState.uncheckableItemValues)) {
+    if (compareArray(uncheckableItemValues, prevState.uncheckableItemValues) && _isArray(uncheckableItemValues)) {
       this.flattenNodes(data);
       this.unserializeLists({
         check: selectedValues,
@@ -625,6 +625,7 @@ function (_React$Component) {
 
     if (isEveryChildChecked(node, this.nodes, this.props)) {
       this.nodes[node.refKey].checkAll = true;
+      this.nodes[node.refKey].check = true;
       return CHECK_STATE.CHECK;
     }
 
@@ -844,7 +845,7 @@ function (_React$Component) {
     });
   }
   /**
-   * 过滤选中的values中不包含 uncheckableItemValues 的那些值
+   * 过滤选中的 values 中不包含 uncheckableItemValues 的那些值
    * @param {*} values
    */
   ;
@@ -1005,7 +1006,7 @@ function (_React$Component) {
   };
 
   _proto.toggleNode = function toggleNode(key, node, toggleValue) {
-    // 如果该节点处于 disabledChecbox，则忽略该值
+    // 如果该节点处于 disabledCheckbox，则忽略该值
     if (!node.uncheckable) {
       this.nodes[node.refKey][key] = toggleValue;
     }

package/es/utils/treeUtils.js

@@ -146,7 +146,11 @@ export function treeDeprecatedWarning(props, keys) {
  */
 
 export function compareArray(a, b) {
-  return _isArray(a) && _isArray(b) && !shallowEqualArray(a, b);
+  if (!(_isArray(a) && _isArray(b))) {
+    return a !== b;
+  }
+
+  return !shallowEqualArray(a, b);
 }
 /**
  * 获取 expandAll 的 value

package/lib/CheckTreePicker/CheckTreePicker.js

@@ -505,11 +505,11 @@ function (_React$Component) {
       nextState.value = value;
     }
 
-    if ((0, _treeUtils.compareArray)(expandItemValues, prevState.expandItemValues)) {
+    if ((0, _treeUtils.compareArray)(expandItemValues, prevState.expandItemValues) && (0, _isArray2.default)(expandItemValues)) {
       nextState.expandItemValues = expandItemValues;
     }
 
-    if ((0, _treeUtils.compareArray)(uncheckableItemValues, prevState.uncheckableItemValues)) {
+    if ((0, _treeUtils.compareArray)(uncheckableItemValues, prevState.uncheckableItemValues) && (0, _isArray2.default)(uncheckableItemValues)) {
       nextState.uncheckableItemValues = uncheckableItemValues;
     }
 
@@ -576,7 +576,7 @@ function (_React$Component) {
 
     if ((0, _treeUtils.compareArray)(value, prevState.value)) {
       this.unserializeLists({
-        check: value,
+        check: value !== null && value !== void 0 ? value : [],
         expand: expandItemValues
       });
       this.setState({
@@ -590,7 +590,7 @@ function (_React$Component) {
   _proto.updateExpandItemValuesChange = function updateExpandItemValuesChange(prevState) {
     var expandItemValues = this.props.expandItemValues;
 
-    if ((0, _treeUtils.compareArray)(expandItemValues, prevState.expandItemValues)) {
+    if ((0, _treeUtils.compareArray)(expandItemValues, prevState.expandItemValues) && (0, _isArray2.default)(expandItemValues)) {
       this.unserializeLists({
         expand: expandItemValues
       });
@@ -607,7 +607,7 @@ function (_React$Component) {
         expandItemValues = _this$state3.expandItemValues;
     var uncheckableItemValues = this.props.uncheckableItemValues;
 
-    if ((0, _treeUtils.compareArray)(uncheckableItemValues, prevState.uncheckableItemValues)) {
+    if ((0, _treeUtils.compareArray)(uncheckableItemValues, prevState.uncheckableItemValues) && (0, _isArray2.default)(uncheckableItemValues)) {
       this.flattenNodes(data);
       this.unserializeLists({
         check: selectedValues,
@@ -659,6 +659,7 @@ function (_React$Component) {
 
     if ((0, _utils2.isEveryChildChecked)(node, this.nodes, this.props)) {
       this.nodes[node.refKey].checkAll = true;
+      this.nodes[node.refKey].check = true;
       return _constants.CHECK_STATE.CHECK;
     }
 
@@ -878,7 +879,7 @@ function (_React$Component) {
     });
   }
   /**
-   * 过滤选中的values中不包含 uncheckableItemValues 的那些值
+   * 过滤选中的 values 中不包含 uncheckableItemValues 的那些值
    * @param {*} values
    */
   ;
@@ -1039,7 +1040,7 @@ function (_React$Component) {
   };
 
   _proto.toggleNode = function toggleNode(key, node, toggleValue) {
-    // 如果该节点处于 disabledChecbox，则忽略该值
+    // 如果该节点处于 disabledCheckbox，则忽略该值
     if (!node.uncheckable) {
       this.nodes[node.refKey][key] = toggleValue;
     }

package/lib/utils/treeUtils.js

@@ -185,7 +185,11 @@ function treeDeprecatedWarning(props, keys) {
 
 
 function compareArray(a, b) {
-  return (0, _isArray2.default)(a) && (0, _isArray2.default)(b) && !(0, _shallowEqualArray.default)(a, b);
+  if (!((0, _isArray2.default)(a) && (0, _isArray2.default)(b))) {
+    return a !== b;
+  }
+
+  return !(0, _shallowEqualArray.default)(a, b);
 }
 /**
  * 获取 expandAll 的 value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.10.1",
+  "version": "4.10.2",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -57,7 +57,7 @@
     "classnames": ">=2.0.0",
     "date-fns": "^1.30.1",
     "dom-lib": "^1.2.1",
-    "element-resize-event": "^3.0.3",
+    "element-resize-event": "^3.0.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-lifecycles-compat": "^3.0.4",

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/TreePicker/test/TreePickerSpec.js

@@ -2,13 +2,22 @@ import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { findDOMNode } from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import { getDOMNode, getInstance } from '@test/testUtils';
 import TreePicker from '../TreePicker';
 
 Enzyme.configure({ adapter: new Adapter() });
+let container;
 
-export const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
 
 const data = [
   {
@@ -157,7 +166,7 @@ describe('TreePicker', () => {
   });
 
   it('Should call `onChange` callback', done => {
-    const doneOp = values => {
+    const doneOp = () => {
       done();
     };
     const instance = getDOMNode(<TreePicker inline onChange={doneOp} data={data} />);
@@ -243,7 +252,7 @@ describe('TreePicker', () => {
   });
 
   it('Should focus item by keyCode=13 ', done => {
-    const doneOp = values => {
+    const doneOp = () => {
       done();
     };
     const instance = mount(<TreePicker data={data} onChange={doneOp} inline defaultExpandAll />);
@@ -271,8 +280,6 @@ describe('TreePicker', () => {
   });
 
   it('Should load data async', () => {
-    let activeNode = null;
-    let layer = 0;
     const data = [
       {
         label: 'Master',
@@ -293,8 +300,6 @@ describe('TreePicker', () => {
 
     let newData = [];
     const mockOnExpand = (node, l, concat) => {
-      activeNode = node;
-      layer = l;
       newData = concat(data, children);
     };
 
@@ -391,13 +396,36 @@ describe('TreePicker', () => {
     assert.ok(list[0].innerText, 'Louisa');
   });
 
-  it('Should call renderValue', () => {
-    const instance1 = getDOMNode(<TreePicker value="Test" renderValue={() => '1'} />);
-    const instance2 = getDOMNode(<TreePicker value="Test" renderValue={() => null} />);
-    const instance3 = getDOMNode(<TreePicker value="Test" renderValue={() => undefined} />);
+  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 <TreePicker data={data} ref={pickerRef} expandItemValues={expandItemValues} open />;
+    });
+
+    TestApp.displayName = 'TestCheckTreePicker';
+
+    const ref = React.createRef();
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<TestApp ref={ref} />, container);
+    });
 
-    assert.equal(instance1.querySelector('.rs-picker-toggle-value').innerText, '1');
-    assert.equal(instance2.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
-    assert.equal(instance3.querySelector('.rs-picker-toggle-placeholder').innerText, 'Select');
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-tree-node-expanded').length,
+      0
+    );
+
+    ReactTestUtils.act(() => {
+      ref.current.setExpandItemValues(['Master']);
+    });
+    assert.equal(
+      ref.current.picker.treeViewRef.current.querySelectorAll('.rs-tree-node-expanded').length,
+      1
+    );
   });
 });

package/src/utils/treeUtils.ts

@@ -123,7 +123,10 @@ export function treeDeprecatedWarning(
  * @param b
  */
 export function compareArray(a: any[], b: any[]) {
-  return _.isArray(a) && _.isArray(b) && !shallowEqualArray(a, b);
+  if (!(_.isArray(a) && _.isArray(b))) {
+    return a !== b;
+  }
+  return !shallowEqualArray(a, b);
 }
 
 /**