rsuite 4.10.8 → 4.11.0

package/src/CheckTreePicker/test/CheckTreePickerSpec.js

@@ -567,45 +567,65 @@ describe('CheckTreePicker', () => {
       4
     );
   });
-  it('Should expand when has props defaultExpandAll and data change', () => {
-    const Wrapper = React.forwardRef((props, ref) => {
-      const nextData = [
-        {
-          label: 'Fujian',
-          value: 3,
-          children: [
-            {
-              label: 'Fuzhou',
-              value: 36
-            }
-          ]
-        },
-        {
-          label: 'Guangdong',
-          value: 4,
-          children: [
-            {
-              label: 'Guangzhou',
-              value: 45
-            }
-          ]
-        }
-      ];
-      const [willChangeData, setData] = useState(data);
-      const handleClick = () => {
-        setData(nextData);
+
+  describe('data change', () => {
+    const renderStart = () => {
+      const containerRef = React.createRef();
+      const Wrapper = () => {
+        const nextData = [
+          {
+            label: 'Fujian',
+            value: 3,
+            children: [
+              {
+                label: 'Fuzhou',
+                value: 36
+              }
+            ]
+          },
+          {
+            label: 'Guangdong',
+            value: 4,
+            children: [
+              {
+                label: 'Guangzhou',
+                value: 45
+              }
+            ]
+          }
+        ];
+        const [willChangeData, setData] = useState(data);
+        const handleClick = () => {
+          setData(nextData);
+        };
+        return (
+          <div ref={containerRef}>
+            <button onClick={handleClick} className="change-data">
+              change data
+            </button>
+            <CheckTreePicker inline defaultExpandAll data={willChangeData} />
+          </div>
+        );
       };
-      return (
-        <div ref={ref}>
-          <button onClick={handleClick} className="change-data">
-            change data
-          </button>
-          <CheckTreePicker inline defaultExpandAll data={willChangeData} />
-        </div>
-      );
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<Wrapper />, container);
+      });
+      return containerRef.current;
+    };
+
+    it('Should expand when has props defaultExpandAll', () => {
+      const container = renderStart();
+      ReactTestUtils.Simulate.click(container.querySelector('.change-data'));
+      expect(container.querySelectorAll('.rs-check-tree-open').length).to.equal(2);
+    });
+
+    it('Should be all closed, when click close icon', () => {
+      const container = renderStart();
+      ReactTestUtils.Simulate.click(container.querySelector('.change-data'));
+      container.querySelectorAll('.rs-check-tree-node-expand-icon').forEach(element => {
+        ReactTestUtils.Simulate.click(element);
+      });
+      expect(container.querySelectorAll('.rs-check-tree-open').length).to.equal(0);
     });
-    const instance = getDOMNode(<Wrapper />);
-    ReactTestUtils.Simulate.click(instance.querySelector('.change-data'));
-    expect(instance.querySelectorAll('.rs-check-tree-open').length).to.equal(2);
   });
 });

package/src/InputPicker/InputPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface InputPickerProps extends FormControlPickerProps<any>, SelectProps<any> {
+export interface InputPickerProps extends FormControlPickerProps<any>, BaseSelectProps {
   /** Settings can create new options */
   creatable?: boolean;
 

package/src/SelectPicker/SelectPicker.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 
-export interface SelectProps<ValueType = any> {
+export interface BaseSelectProps {
   /** Set group condition key in data */
   groupBy?: string;
 
@@ -22,13 +22,6 @@ export interface SelectProps<ValueType = any> {
   /** Custom render menu group */
   renderMenuGroup?: (title: React.ReactNode, item: ItemDataType) => React.ReactNode;
 
-  /** Custom render selected items */
-  renderValue?: (
-    value: ValueType,
-    item: ItemDataType | ItemDataType[],
-    selectedElement: React.ReactNode
-  ) => React.ReactNode;
-
   /** Called when the option is selected */
   onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent<any>) => void;
 
@@ -36,7 +29,7 @@ export interface SelectProps<ValueType = any> {
   onGroupTitleClick?: (event: React.SyntheticEvent<any>) => void;
 
   /** Called when searching */
-  onSearch?: (searchKeyword: string, event: React.SyntheticEvent<any>) => void;
+  onSearch?: (searchKeyword: string, event?: React.SyntheticEvent<any>) => void;
 
   /** Called when clean */
   onClean?: (event: React.SyntheticEvent<any>) => void;
@@ -53,6 +46,14 @@ export interface SelectProps<ValueType = any> {
   /** Custom search rules. */
   searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
 }
+export interface SelectProps<ValueType> extends BaseSelectProps {
+  /** Custom render selected items */
+  renderValue?: (
+    value: ValueType,
+    item: ItemDataType,
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
+}
 
 export interface SelectPickerProps extends FormControlPickerProps<any>, SelectProps<any> {}
 

package/src/SelectPicker/SelectPicker.tsx

@@ -282,7 +282,7 @@ class SelectPicker extends React.Component<SelectPickerProps, SelectPickerState>
       searchKeyword: '',
       active: false
     });
-
+    this.props.onSearch?.('');
     this.props.onClose?.();
   };
 

package/src/SelectPicker/test/SelectPickerSpec.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
 import { globalKey, getDOMNode, getInstance } from '@test/testUtils';
 
@@ -34,6 +35,18 @@ const data = [
   }
 ];
 
+let container;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
+
 describe('SelectPicker', () => {
   it('Should clean selected default value', () => {
     const instance = getDOMNode(<Dropdown defaultOpen data={data} defaultValue={'Eugenia'} />);
@@ -324,4 +337,59 @@ describe('SelectPicker', () => {
     assert.equal(list.length, 1);
     assert.ok(list[0].innerText, 'Louisa');
   });
+
+  it('SearchWord should be reset when controlled and triggered off', done => {
+    let searchRef = '';
+    let onClose = null;
+    const promise = new Promise(resolve => {
+      onClose = resolve;
+    });
+    const Wrapper = () => {
+      const [search, setSearch] = useState(searchRef);
+      const containerRef = useRef();
+      searchRef = search;
+      const handleSearch = value => {
+        setSearch(value);
+      };
+      const handleClose = () => {
+        onClose();
+      };
+      return (
+        <div ref={containerRef}>
+          <button id="exit">exit</button>
+          <Dropdown
+            container={() => containerRef.current}
+            search={search}
+            defaultOpen
+            onClose={handleClose}
+            onSearch={handleSearch}
+            data={data}
+          />
+        </div>
+      );
+    };
+    Wrapper.displayName = 'WrapperSelectPicker';
+    ReactTestUtils.act(() => {
+      ReactDOM.render(<Wrapper />, container);
+    });
+
+    const exit = container?.querySelector('#exit');
+    const input = container.querySelector(searchInputClassName);
+
+    // change search
+    input.value = 'a';
+    ReactTestUtils.Simulate.change(input);
+    assert.equal(searchRef, 'a');
+
+    ReactTestUtils.act(() => {
+      // close select
+      // ReactTestUtils can't trigger document click event
+      exit.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    promise.then(() => {
+      assert.equal(searchRef, '');
+      done();
+    });
+  });
 });

package/src/TagPicker/TagPicker.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker/SelectPicker.d';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
+import { BaseSelectProps } from '../SelectPicker/SelectPicker.d';
 import { TagProps } from '../Tag/Tag.d';
 
-export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[]> {
+export interface TagPickerProps extends FormControlPickerProps, BaseSelectProps {
   /** Option to cache value when searching asynchronously */
   cacheData?: any[];
 
@@ -16,6 +16,13 @@ export interface TagPickerProps extends FormControlPickerProps, SelectProps<any[
    * https://github.com/rsuite/rsuite/blob/master/src/Tag/Tag.d.ts
    */
   tagProps?: TagProps;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const TagPicker: React.ComponentType<TagPickerProps>;