rsuite 4.9.3 → 4.10.2

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/MultiCascader/DropdownMenu.tsx

@@ -166,7 +166,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
         className={classes}
         componentClass="li"
         indeterminate={cascade && !active && this.utils.isSomeChildChecked(node, value)}
-        onSelectItem={this.handleSelect.bind(this, layer, node)}
+        onSelectItem={this.handleSelect.bind(this, layer)}
         onCheck={onCheck}
         checkable={!uncheckable}
       >

package/src/MultiCascader/MultiCascader.d.ts

@@ -41,6 +41,14 @@ export interface MultiCascaderProps<ValueType = any> extends FormControlPickerPr
     event: React.SyntheticEvent<HTMLElement>
   ) => void;
 
+  /** Called after the checkbox state changes */
+  onCheck?: (
+    value: ValueType,
+    item: any,
+    checked: boolean,
+    event: React.SyntheticEvent<HTMLElement>
+  ) => void;
+
   /** Called when clean */
   onClean?: (event: React.SyntheticEvent<HTMLElement>) => void;
 

package/src/MultiCascader/MultiCascader.tsx

@@ -57,7 +57,8 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     renderMenuItem: PropTypes.func,
     renderMenu: PropTypes.func,
     onSearch: PropTypes.func,
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    onCheck: PropTypes.func
   };
 
   static defaultProps = {
@@ -187,7 +188,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
   }
 
   handleCheck = (item: any, event: React.SyntheticEvent<any>, checked: boolean) => {
-    const { valueKey, onChange, cascade, uncheckableItemValues } = this.props;
+    const { valueKey, cascade, uncheckableItemValues, onChange, onCheck } = this.props;
     const itemValue = item[valueKey];
     let value = [];
 
@@ -208,6 +209,7 @@ class MultiCascader extends React.Component<MultiCascaderProps, MultiCascaderSta
     }
 
     onChange?.(value, event);
+    onCheck?.(value, item, checked, event);
   };
 
   handleChangeForSearchItem = (value: any, checked: boolean, event: React.SyntheticEvent<any>) => {

package/src/MultiCascader/test/DropdownMenuSpec.js

@@ -112,6 +112,23 @@ describe('MultiCascader -  DropdownMenu', () => {
     }, 1);
   });
 
+  it('Should call onSelect callback with 4 params', done => {
+    const doneOp = (node, activePaths, createConcat, event) => {
+      if (
+        typeof node === 'object' &&
+        Array.isArray(activePaths) &&
+        typeof createConcat === 'function' &&
+        event.target
+      ) {
+        done();
+      }
+    };
+
+    const instance = getInstance(<Dropdown defaultOpen data={items} onSelect={doneOp} />);
+    const menuContainer = getDOMNode(instance.menuContainerRef.current);
+    ReactTestUtils.Simulate.click(menuContainer.querySelectorAll('.rs-checkbox')[1]);
+  });
+
   it('Should not call onSelect callback on disabled item', () => {
     const onSelectSpy = sinon.spy();
     const instance = getInstance(

package/src/MultiCascader/test/MultiCascaderSpec.js

@@ -7,7 +7,6 @@ import Button from '../../Button';
 
 const namespace = `${globalKey}-picker`;
 const toggleClassName = `.${namespace}-toggle-placeholder`;
-const activeClassName = '.rs-dropdown-menu-item-active';
 
 const items = [
   {
@@ -209,6 +208,20 @@ describe('MultiCascader', () => {
     ReactTestUtils.Simulate.click(menu.querySelector('.rs-checkbox'));
   });
 
+  it('Should call onCheck callback ', done => {
+    let checkbox = null;
+    const doneOp = (value, item, checked, event) => {
+      if (value[0] === 'abc' && item.value === 'abc' && checked && event.target === checkbox) {
+        done();
+      }
+    };
+
+    const instance = getInstance(<Dropdown data={items} defaultOpen onCheck={doneOp} />);
+    const menu = findDOMNode(instance.menuContainerRef.current);
+    checkbox = menu.querySelector('.rs-checkbox-wrapper');
+    ReactTestUtils.Simulate.click(checkbox);
+  });
+
   it('Should call onChange callback ', done => {
     const doneOp = value => {
       if (value[0] === 'abc') {

package/src/Overlay/OverlayTrigger.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnimationEventProps, StandardProps, TypeAttributes } from '../@types/common';
 
-export type OverlayTriggerTrigger = 'click' | 'hover' | 'focus' | 'active' | 'none';
+export type OverlayTriggerTrigger = 'click' | 'contextMenu' | 'hover' | 'focus' | 'active' | 'none';
 
 export interface TriggerProps extends AnimationEventProps, StandardProps {
   /** Triggering events */

package/src/Overlay/OverlayTrigger.tsx

@@ -26,6 +26,7 @@ interface TriggerProps {
   onMouseOut?: React.MouseEventHandler;
   onBlur?: React.MouseEventHandler;
   onClick?: React.MouseEventHandler;
+  onContextMenu?: React.MouseEventHandler;
   onFocus?: React.MouseEventHandler;
 }
 
@@ -81,7 +82,11 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
   handleSpeakerMouseLeave = () => {
     const { trigger } = this.props;
     this.mouseEnteredToSpeaker = false;
-    if (!isOneOf('click', trigger) && !isOneOf('active', trigger)) {
+    if (
+      !isOneOf('click', trigger) &&
+      !isOneOf('active', trigger) &&
+      !isOneOf('contextMenu', trigger)
+    ) {
       this.hideWithCheck();
     }
   };
@@ -130,6 +135,10 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
     }
   };
 
+  preventDefault = (event: React.MouseEvent<Element, MouseEvent>) => {
+    event.preventDefault();
+  };
+
   handleDelayedShow = () => {
     const { delayShow, enterable } = this.props;
     const delay = isNil(delayShow) ? this.props.delay : delayShow;
@@ -197,6 +206,8 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
 
     if (isOneOf('click', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
+    } else if (isOneOf('contextMenu', trigger)) {
+      overlayProps.onHide = createChainedFunction(this.hide, onHide);
     } else if (isOneOf('active', trigger)) {
       overlayProps.onHide = createChainedFunction(this.hide, onHide);
     }
@@ -228,6 +239,7 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
       children,
       speaker,
       onClick,
+      onContextMenu,
       trigger,
       onMouseOver,
       onMouseOut,
@@ -254,6 +266,15 @@ class OverlayTrigger extends React.Component<OverlayTriggerProps, OverlayTrigger
         props.onClick = createChainedFunction(this.toggleHideAndShow, props.onClick);
       }
 
+      if (isOneOf('contextMenu', trigger)) {
+        props.onContextMenu = createChainedFunction(
+          this.preventDefault,
+          this.toggleHideAndShow,
+          triggerProps.onContextMenu,
+          onContextMenu
+        );
+      }
+
       if (isOneOf('active', trigger)) {
         props.onClick = createChainedFunction(this.handleDelayedShow, props.onClick);
       }

package/src/Overlay/test/OverlayTriggerSpec.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import ReactTestUtils from 'react-dom/test-utils';
+import { getDOMNode } from '@test/testUtils';
+
+import OverlayTrigger from '../OverlayTrigger';
+import Tooltip from '../../Tooltip';
+
+describe('OverlayTrigger', () => {
+  it('Should create Whisper element', () => {
+    const instance = getDOMNode(
+      <OverlayTrigger speaker={<Tooltip>tooltip</Tooltip>}>
+        <button type="button">button</button>
+      </OverlayTrigger>
+    );
+    assert.equal(instance.nodeName, 'BUTTON');
+  });
+
+  it('Should maintain overlay classname when trigger click', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="click"
+        speaker={<Tooltip className="test-whisper_click">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    ReactTestUtils.Simulate.click(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_click').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger contextMenu', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="contextMenu"
+        speaker={<Tooltip className="test-whisper_context-menu">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+    ReactTestUtils.Simulate.contextMenu(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_context-menu').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger focus', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="focus"
+        speaker={<Tooltip className="test-whisper_focus">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.focus(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_focus').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger mouseOver and setting [trigger="hover"]', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="hover"
+        speaker={<Tooltip className="test-whisper_hover">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.mouseOver(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_hover').length, 1);
+  });
+
+  it('Should maintain overlay classname when trigger click and setting [trigger="active"]  ', () => {
+    const whisper = getDOMNode(
+      <OverlayTrigger
+        trigger="active"
+        speaker={<Tooltip className="test-whisper_active">test</Tooltip>}
+      >
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.click(whisper);
+    assert.equal(document.getElementsByClassName('test-whisper_active').length, 1);
+  });
+
+  it('Should call onClick callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onClick={doneOp} trigger="click" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.click(whisper);
+  });
+
+  it('Should call onContextMenu callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onContextMenu={doneOp} trigger="contextMenu" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.contextMenu(whisper);
+  });
+
+  it('Should call onFocus callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onFocus={doneOp} trigger="focus" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.focus(whisper);
+  });
+
+  it('Should call onMouseOver callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onMouseOver={doneOp} trigger="hover" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.mouseOver(whisper);
+  });
+
+  it('Should call onMouseOut callback', done => {
+    const doneOp = () => {
+      done();
+    };
+
+    const whisper = getDOMNode(
+      <OverlayTrigger onMouseOut={doneOp} trigger="hover" speaker={<Tooltip />}>
+        <button>button</button>
+      </OverlayTrigger>
+    );
+
+    ReactTestUtils.Simulate.mouseOut(whisper);
+  });
+});

package/src/Table/styles/common.less

@@ -166,11 +166,12 @@
     border-style: solid;
     border-width: 0;
     border-color: @table-border-color;
-    display: block;
     overflow: hidden;
     position: absolute;
     white-space: normal;
     background: @table-body-background;
+    display: table;
+    table-layout: fixed;
 
     &.first {
       border-left-width: 0;

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);
 }
 
 /**