Merge pull request ant-design#15947 from ant-design/tree-select-showS…

…earch

feat: TreeSelect support `showSearch` in multiple mode (ant-design#15933)

components/tree-select/__tests__/index.test.js

@@ -1,6 +1,18 @@
+import React from 'react';
+import { mount } from 'enzyme';
 import TreeSelect from '..';
 import focusTest from '../../../tests/shared/focusTest';
 
 describe('TreeSelect', () => {
   focusTest(TreeSelect);
+
+  describe('showSearch', () => {
+    it('keep default logic', () => {
+      const single = mount(<TreeSelect open />);
+      expect(single.find('.ant-select-search__field').length).toBeFalsy();
+
+      const multiple = mount(<TreeSelect multiple open />);
+      expect(multiple.find('.ant-select-search__field').length).toBeTruthy();
+    });
+  });
 });

components/tree-select/index.en-US.md

@@ -36,7 +36,7 @@ Any data whose entries are defined in a hierarchical manner is fit to use this c
 | searchValue | work with `onSearch` to make search value controlled. | string | - |
 | treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
 | showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
-| showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false |
+| showSearch | Support search or not | boolean | single: `false` \| multiple: `true` |
 | size | To set the size of the select input, options: `large` `small` | string | 'default' |
 | suffixIcon | The custom suffix icon | ReactNode | - |
 | treeCheckable | Whether to show checkbox on the treeNodes | boolean | false |

components/tree-select/index.tsx

@@ -19,7 +19,6 @@ export default class TreeSelect extends React.Component<TreeSelectProps, any> {
   static defaultProps = {
     transitionName: 'slide-up',
     choiceTransitionName: 'zoom',
-    showSearch: false,
   };
 
   private rcTreeSelect: any;
@@ -83,6 +82,12 @@ export default class TreeSelect extends React.Component<TreeSelectProps, any> {
       className,
     );
 
+    // showSearch: single - false, multiple - true
+    let { showSearch } = restProps;
+    if (!('showSearch' in restProps)) {
+      showSearch = !!(restProps.multiple || restProps.treeCheckable);
+    }
+
     let checkable = rest.treeCheckable;
     if (checkable) {
       checkable = <span className={`${prefixCls}-tree-checkbox-inner`} />;
@@ -108,6 +113,7 @@ export default class TreeSelect extends React.Component<TreeSelectProps, any> {
         removeIcon={removeIcon}
         clearIcon={clearIcon}
         {...rest}
+        showSearch={showSearch}
         getPopupContainer={getPopupContainer || getContextPopupContainer}
         dropdownClassName={classNames(dropdownClassName, `${prefixCls}-tree-dropdown`)}
         prefixCls={prefixCls}

components/tree-select/index.zh-CN.md

@@ -36,7 +36,7 @@ title: TreeSelect
 | searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - |
 | treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
 | showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
-| showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false |
+| showSearch | 是否支持搜索框 | boolean | 单选：`false` \| 多选：`true` |
 | size | 选择框大小，可选 `large` `small` | string | 'default' |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |
 | treeCheckable | 显示 checkbox | boolean | false |

package.json

@@ -84,7 +84,7 @@
     "rc-time-picker": "~3.6.1",
     "rc-tooltip": "~3.7.3",
     "rc-tree": "~1.15.2",
-    "rc-tree-select": "~2.6.0",
+    "rc-tree-select": "~2.7.0",
     "rc-trigger": "^2.6.2",
     "rc-upload": "~2.6.0",
     "rc-util": "^4.5.1",