rsuite 4.10.10 → 4.11.1

package/lib/TreePicker/TreePicker.js

@@ -581,7 +581,7 @@ function (_React$Component) {
       nextState.selectedValue = value;
     }
 
-    if ((0, _treeUtils.compareArray)(expandItemValues, prevState.expandItemValues)) {
+    if ((0, _treeUtils.compareArray)(expandItemValues, prevState.expandItemValues) && Array.isArray(expandItemValues)) {
       nextState.expandItemValues = expandItemValues;
     }
 
@@ -673,7 +673,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) && Array.isArray(expandItemValues)) {
       this.unserializeLists('expand', expandItemValues);
       this.setState({
         expandItemValues: expandItemValues
@@ -1034,26 +1034,20 @@ function (_React$Component) {
 
   _proto.renderDropdownMenu = function renderDropdownMenu() {
     var _this$props16 = this.props,
-        _this$props16$height = _this$props16.height,
-        height = _this$props16$height === void 0 ? defaultHeight : _this$props16$height,
         searchable = _this$props16.searchable,
         searchKeyword = _this$props16.searchKeyword,
         renderExtraFooter = _this$props16.renderExtraFooter,
         locale = _this$props16.locale,
         renderMenu = _this$props16.renderMenu,
         menuStyle = _this$props16.menuStyle,
-        virtualized = _this$props16.virtualized,
         menuClassName = _this$props16.menuClassName,
         menuAutoWidth = _this$props16.menuAutoWidth;
     var keyword = !(0, _isUndefined2.default)(searchKeyword) ? searchKeyword : this.state.searchKeyword;
     var classes = (0, _classnames.default)(menuClassName, this.addPrefix('tree-menu'));
-    var styles = virtualized ? (0, _extends3.default)({
-      height: height
-    }, menuStyle) : menuStyle;
     return React.createElement(_Picker.MenuWrapper, {
       autoWidth: menuAutoWidth,
       className: classes,
-      style: styles,
+      style: menuStyle,
       ref: this.menuRef,
       getToggleInstance: this.getToggleInstance,
       getPositionInstance: this.getPositionInstance
@@ -1152,8 +1146,7 @@ function (_React$Component) {
         inline = _this$props18.inline,
         style = _this$props18.style,
         locale = _this$props18.locale,
-        virtualized = _this$props18.virtualized,
-        searchable = _this$props18.searchable;
+        virtualized = _this$props18.virtualized;
     var layer = 0;
     var classes = (0, _classnames.default)((0, _utils.defaultClassPrefix)('tree'), (_classNames2 = {}, _classNames2[className] = inline, _classNames2));
     var nodes = [];
@@ -1180,33 +1173,36 @@ function (_React$Component) {
           className: this.addPrefix('none')
         }, locale.noResultsText);
       }
-    } // 当未定义 height 且 设置了 virtualized 为 true，treeHeight 设置默认高度
+    } // The height of virtualized tree should be subtract the value of paddingBottom
 
 
-    var treeHeight = (0, _isUndefined2.default)(height) && virtualized ? defaultHeight : height;
+    var treeHeight = height - 12;
     var treeWidth = (0, _isUndefined2.default)(style === null || style === void 0 ? void 0 : style.width) ? defaultWidth : style.width;
-    var styles = inline ? (0, _extends3.default)({
-      height: treeHeight
-    }, style) : {};
-    var listHeight = (0, _treeUtils.getVirtualLisHeight)(inline, searchable, treeHeight);
+    var listStyles = inline ? (0, _extends3.default)({
+      height: height
+    }, style) : style;
     return React.createElement(React.Fragment, null, React.createElement("div", {
       ref: this.treeViewRef,
       className: classes,
-      style: styles,
+      style: listStyles,
       onKeyDown: this.handleKeyDown
     }, React.createElement("div", {
       className: this.addTreePrefix('nodes')
     }, virtualized ? React.createElement(_AutoSizer.default, {
-      defaultHeight: listHeight,
-      defaultWidth: treeWidth
+      defaultHeight: treeHeight,
+      defaultWidth: treeWidth,
+      style: {
+        width: 'auto',
+        height: 'auto'
+      }
     }, function (_ref4) {
       var height = _ref4.height,
           width = _ref4.width;
       return React.createElement(_List.default, {
         ref: _this9.listRef,
         width: width || treeWidth,
-        height: height || listHeight,
-        rowHeight: 38,
+        height: height,
+        rowHeight: 36,
         rowCount: nodes.length,
         rowRenderer: _this9.measureRowRenderer(nodes)
       });
@@ -1333,6 +1329,7 @@ TreePicker.propTypes = (0, _extends3.default)({}, _propTypes2.listPickerPropType
   searchBy: _propTypes.default.func
 });
 TreePicker.defaultProps = (0, _extends3.default)({}, _propTypes2.listPickerDefaultProps, {
+  height: defaultHeight,
   searchable: true,
   menuAutoWidth: true,
   locale: {

package/lib/utils/treeUtils.js

@@ -6,7 +6,6 @@ exports.__esModule = true;
 exports.shouldShowNodeByExpanded = shouldShowNodeByExpanded;
 exports.flattenTree = flattenTree;
 exports.getNodeParents = getNodeParents;
-exports.getVirtualLisHeight = getVirtualLisHeight;
 exports.hasVisibleChildren = hasVisibleChildren;
 exports.treeDeprecatedWarning = treeDeprecatedWarning;
 exports.compareArray = compareArray;
@@ -41,12 +40,11 @@ var _shallowEqualArray = _interopRequireDefault(require("../utils/shallowEqualAr
 
 var _constants = require("../constants");
 
-var SEARCH_BAR_HEIGHT = 48;
-var MENU_PADDING = 12; // Tree Node 之间的 间隔
-
+// Tree Node 之间的 间隔
 var TREE_NODE_GAP = 4;
 /**
- * 判断当前节点是否应该显示
+ * Whether current node is visible
+ * when all the parents of the current node is expanded, the current node should be visible
  * @param {*} expandItemValues
  * @param {*} parentKeys
  */
@@ -130,21 +128,6 @@ function getNodeParents(node, parentKey, valueKey) {
   traverse(node);
   return parents;
 }
-/**
- * 获取 VirtualList 的高度
- * @param {*} inline
- * @param {*} height
- */
-
-
-function getVirtualLisHeight(inline, searchable, height) {
-  if (height === void 0) {
-    height = 0;
-  }
-
-  var searchBarHeight = searchable ? SEARCH_BAR_HEIGHT : 0;
-  return inline ? height - MENU_PADDING * 2 : height - searchBarHeight - MENU_PADDING * 2;
-}
 /**
  * 判断节点是否存在可见的子节点。
  * @param node

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "4.10.10",
+  "version": "4.11.1",
   "description": "A suite of react components",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/CheckPicker/CheckPicker.d.ts

@@ -1,14 +1,21 @@
 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';
 
-export interface CheckPickerProps extends FormControlPickerProps<any[]>, SelectProps<any[]> {
+export interface CheckPickerProps extends FormControlPickerProps<any[]>, BaseSelectProps {
   /** Top the selected option in the options */
   sticky?: boolean;
 
   /** A picker that can be counted */
   countable?: boolean;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: any[],
+    item: ItemDataType[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }
 
 declare const CheckPicker: React.ComponentType<CheckPickerProps>;

package/src/CheckTreePicker/CheckTreePicker.tsx

@@ -50,7 +50,6 @@ import {
   shouldShowNodeByExpanded,
   flattenTree,
   getNodeParents,
-  getVirtualLisHeight,
   hasVisibleChildren,
   treeDeprecatedWarning,
   getExpandItemValues,
@@ -111,6 +110,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
   };
   static defaultProps = {
     ...listPickerDefaultProps,
+    height: defaultHeight,
     cascade: true,
     countable: true,
     searchable: true,
@@ -144,7 +144,8 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
         check: nextValue,
         expand: nextExpandItemValues
       },
-      props
+      props,
+      true
     );
 
     this.state = {
@@ -582,7 +583,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     return list;
   }
 
-  unserializeLists(lists: any, nextProps: CheckTreePickerProps = this.props) {
+  unserializeLists(lists: any, nextProps: CheckTreePickerProps = this.props, initial = false) {
     const { valueKey, cascade, uncheckableItemValues = [] } = nextProps;
     const expandAll = getExpandAll(nextProps);
     // Reset values to false
@@ -613,7 +614,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
               }
             });
           } else {
-            this.nodes[refKey][listKey] = expandAll;
+            this.nodes[refKey][listKey] = initial ? expandAll : false;
           }
         }
       });
@@ -903,12 +904,10 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
 
   renderDropdownMenu() {
     const {
-      height = defaultHeight,
       locale,
       menuStyle,
       searchable,
       renderMenu,
-      virtualized,
       searchKeyword,
       renderExtraFooter,
       menuClassName,
@@ -918,13 +917,12 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     const keyword = !_.isUndefined(searchKeyword) ? searchKeyword : this.state.searchKeyword;
     const classes = classNames(menuClassName, this.addPrefix('check-tree-menu'));
     const menu = this.renderCheckTree();
-    const styles = virtualized ? { height, ...menuStyle } : menuStyle;
 
     return (
       <MenuWrapper
         autoWidth={menuAutoWidth}
         className={classes}
-        style={styles}
+        style={menuStyle}
         ref={this.menuRef}
         getToggleInstance={this.getToggleInstance}
         getPositionInstance={this.getPositionInstance}
@@ -1077,16 +1075,7 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
 
   renderCheckTree() {
     const { filterData, isSomeNodeHasChildren } = this.state;
-    const {
-      inline,
-      style,
-      height,
-      className,
-      onScroll,
-      locale,
-      virtualized,
-      searchable
-    } = this.props;
+    const { inline, style, height, className, onScroll, locale, virtualized } = this.props;
 
     // 树节点的层级
     const layer = 0;
@@ -1096,7 +1085,6 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     });
 
     let formattedNodes = [];
-
     if (!virtualized) {
       formattedNodes = getFormattedTree(filterData, this.nodes, this.props).map(node =>
         this.renderNode(node, layer)
@@ -1112,31 +1100,34 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
       }
     }
 
-    // 当未定义 height 且 设置了 virtualized 为 true，treeHeight 设置默认高度
-    const treeHeight = _.isUndefined(height) && virtualized ? defaultHeight : height;
+    // The height of virtualized tree should be subtract the value of paddingBottom
+    const treeHeight = height - 12;
     const treeWidth = _.isUndefined(style?.width) ? defaultWidth : style.width;
-    const styles = inline ? { height: treeHeight, ...style } : {};
+    const listStyles = inline ? { height: height, ...style } : style;
 
     const treeNodesClass = classNames(this.addTreePrefix('nodes'), {
       [this.addTreePrefix('all-uncheckable')]: getEveryFisrtLevelNodeUncheckable(this.nodes)
     });
-    const listHeight = getVirtualLisHeight(inline, searchable, treeHeight);
     return (
       <div
         ref={this.treeViewRef}
         className={classes}
-        style={styles}
+        style={listStyles}
         onScroll={onScroll}
         onKeyDown={this.handleKeyDown}
       >
         <div className={treeNodesClass}>
           {virtualized ? (
-            <AutoSizer defaultHeight={listHeight} defaultWidth={treeWidth}>
+            <AutoSizer
+              defaultHeight={treeHeight}
+              defaultWidth={treeWidth}
+              style={{ width: 'auto', height: 'auto' }}
+            >
               {({ height, width }) => (
                 <List
                   ref={this.listRef}
                   width={width || treeWidth}
-                  height={height || listHeight}
+                  height={height}
                   rowHeight={36}
                   rowCount={formattedNodes.length}
                   rowRenderer={this.measureRowRenderer(formattedNodes)}

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;
 
@@ -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/test/SelectPickerSpec.js

@@ -1,4 +1,4 @@
-import React, { useState } 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';
@@ -338,14 +338,15 @@ describe('SelectPicker', () => {
     assert.ok(list[0].innerText, 'Louisa');
   });
 
-  it.only('SearchWord should be reset when controlled and triggered off', done => {
+  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 = React.forwardRef((props, ref) => {
+    const Wrapper = () => {
       const [search, setSearch] = useState(searchRef);
+      const containerRef = useRef();
       searchRef = search;
       const handleSearch = value => {
         setSearch(value);
@@ -354,11 +355,11 @@ describe('SelectPicker', () => {
         onClose();
       };
       return (
-        <div>
+        <div ref={containerRef}>
           <button id="exit">exit</button>
           <Dropdown
+            container={() => containerRef.current}
             search={search}
-            ref={ref}
             defaultOpen
             onClose={handleClose}
             onSearch={handleSearch}
@@ -366,14 +367,15 @@ describe('SelectPicker', () => {
           />
         </div>
       );
-    });
+    };
     Wrapper.displayName = 'WrapperSelectPicker';
     ReactTestUtils.act(() => {
       ReactDOM.render(<Wrapper />, container);
     });
 
     const exit = container?.querySelector('#exit');
-    const input = document.querySelector(searchInputClassName);
+    const input = container.querySelector(searchInputClassName);
+
     // change search
     input.value = 'a';
     ReactTestUtils.Simulate.change(input);

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>;