[TreeSelect]废弃 searchInbox 属性，多选组件支持配置已选数据超长展示省略号

Author: liyuan-meng

src/components/tree-select/demos/basic-tree-select.md

@@ -61,7 +61,6 @@ class TreeSelectDemo extends React.Component {
                 {/*<h5>单选搜索框在下拉框内</h5>*/}
                 <TreeSelect
                   searchable
-                  searchInBox={false}
                   allowClear
                   onSearch={this.handleSearch}
                   value={{
@@ -77,7 +76,6 @@ class TreeSelectDemo extends React.Component {
               {/*<div>*/}
               {/*  <h5>单选搜索框在下拉框外（新）</h5>*/}
               {/*  <TreeSelect*/}
-              {/*    searchInBox*/}
               {/*    searchable*/}
               {/*    allowClear*/}
               {/*    onSearch={this.handleSearch}*/}

…components/tree-select/demos/multiple.md src/components/tree-select/demos/basic.mdsrc/components/tree-select/demos/multiple.md renamed to src/components/tree-select/demos/basic.md src/components/tree-select/demos/multiple.md renamed to src/components/tree-select/demos/basic.md

@@ -163,7 +163,7 @@ class TreeSelectDemo extends React.Component {
                     allowClear
                     placeholder="选择一个选项"
                     style={{ width: 328 }}
-                    footerTypes={['ok', 'reset']}
+                    footerTypes={['ok', 'cancel']}
                     dataSource={this.treeData}
                     showIcon={false}
                     value={this.state.confirmNodes}

src/components/tree-select/demos/dynamicLoad.md

@@ -100,7 +100,6 @@ class TreeSelectDemo extends React.Component {
                 <h5>单选</h5>
                 <TreeSelect
                   searchable
-                  searchInBox
                   allowClear
                   type="single"
                   containParentNode
@@ -146,7 +145,6 @@ class TreeSelectDemo extends React.Component {
                 <h5>多选</h5>
                 <TreeSelect
                   searchable
-                  searchInBox
                   allowClear
                   type="multiple"
                   containParentNode

src/components/tree-select/demos/line.md

@@ -132,7 +132,6 @@ class TreeSelectDemo extends React.Component {
                   showLine
                   lineType="dashed"
                   searchable
-                  searchInBox
                   allowClear
                   type="single"
                   isUnfold
@@ -150,7 +149,6 @@ class TreeSelectDemo extends React.Component {
                 <TreeSelect
                   showLine
                   searchable
-                  searchInBox
                   allowClear
                   type="multiple"
                   isUnfold

src/components/tree-select/demos/path.md

@@ -130,7 +130,6 @@ class TreeSelectDemo extends React.Component {
                 <h5>单选</h5>
                 <TreeSelect
                   searchable
-                  searchInBox
                   showPath
                   allowClear
                   type="single"
@@ -148,7 +147,6 @@ class TreeSelectDemo extends React.Component {
                 <h5>多选</h5>
                 <TreeSelect
                   searchable
-                  searchInBox
                   allowClear
                   showPath
                   type="multiple"

src/components/tree-select/demos/searchable.md

@@ -47,7 +47,25 @@ class TreeSelectDemo extends React.Component {
 					name: '禁止删除节点4',
 					pId: 11,
 					children: []
-				}
+				},
+              {
+                id: 115,
+                name: '禁止删除节点5',
+                pId: 11,
+                children: []
+              },
+              {
+                id: 116,
+                name: '禁止删除节点6',
+                pId: 11,
+                children: []
+              },
+              {
+                id: 117,
+                name: '禁止删除节点7',
+                pId: 11,
+                children: []
+              }
 			]
 		},
 		{
@@ -58,6 +76,15 @@ class TreeSelectDemo extends React.Component {
 			disableAdd: true,
 			disableRename: true,
 			children: []
+		},
+		{
+			id: 15,
+			name: '超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
+			pId: 1,
+			disableRemove: true,
+			disableAdd: true,
+			disableRename: true,
+			children: []
 		}
 	];
 
@@ -94,9 +121,26 @@ class TreeSelectDemo extends React.Component {
                 this.setState({ disabled: checked })
               }}>禁用</Checkbox>
               <div>
-                <h5>单选搜索框在下拉框外（新）</h5>
+                <h5>单选</h5>
+                <TreeSelect
+                  searchable
+                  allowClear
+                  disabled={this.state.disabled}
+                  type="single"
+                  isUnfold
+                  containParentNode
+                  placeholder="选择一个选项"
+                  style={{ width: 328 }}
+                  dataSource={this.treeData}
+                  value={this.state.singleNodes}
+                  onChange={this.onChangeSingle}
+                />
+              </div>
+              <div>
+                <h5>单选-已选数据超长可滚动</h5>
                 <TreeSelect
                   searchable
+                  scrollSelected
                   allowClear
                   disabled={this.state.disabled}
                   type="single"
@@ -110,7 +154,7 @@ class TreeSelectDemo extends React.Component {
                 />
               </div>
               <div>
-                <h5>多选搜索框在下拉框外（新）</h5>
+                <h5>多选</h5>
                 <TreeSelect
                   searchable
                   allowClear
@@ -126,10 +170,10 @@ class TreeSelectDemo extends React.Component {
                 />
               </div>
               <div>
-                <h5>多选限制标签数量（新）</h5>
+                <h5>多选-限制标签展示数量</h5>
                 <TreeSelect
                   searchable
-                  maxTagCount={1}
+                  maxTagCount={5}
                   allowClear
                   disabled={this.state.disabled}
                   type="multiple"
@@ -143,27 +187,65 @@ class TreeSelectDemo extends React.Component {
                 />
               </div>
               <div>
-                <h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>单选搜索框在下拉框内（旧）</h5>
+                <h5>多选-不限制标签展示数量</h5>
                 <TreeSelect
                   searchable
-                  searchInBox={false}
+                  maxTagCount={0}
                   allowClear
                   disabled={this.state.disabled}
-                  type="single"
+                  type="multiple"
                   isUnfold
                   containParentNode
                   placeholder="选择一个选项"
                   style={{ width: 328 }}
                   dataSource={this.treeData}
-                  value={this.state.singleNodes}
-                  onChange={this.onChangeSingle}
+                  value={this.state.selectedNodes}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div>
+                <h5>多选-不限制标签展示数量且展示滚动条</h5>
+                <TreeSelect
+                  searchable
+                  maxTagCount={0}
+                  maxHeight={58}
+                  allowClear
+                  disabled={this.state.disabled}
+                  type="multiple"
+                  isUnfold
+                  containParentNode
+                  placeholder="选择一个选项"
+                  style={{ width: 328 }}
+                  dataSource={this.treeData}
+                  value={this.state.selectedNodes}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div>
+                <h5>多选-已选数据逗号分隔且超长展示省略号</h5>
+                <TreeSelect
+                  searchable
+                  maxTagCount={0}
+                  showTag={false}
+                  allowClear
+                  disabled={this.state.disabled}
+                  type="multiple"
+                  isUnfold
+                  containParentNode
+                  placeholder="选择一个选项"
+                  style={{ width: 328 }}
+                  dataSource={this.treeData}
+                  value={this.state.selectedNodes}
+                  onChange={this.handleChange}
                 />
               </div>
               <div>
-                <h5 style={{ color: 'rgba(0,0,0,0.45)', fontWeight: 400 }}>多选搜索框在下拉框内（旧）</h5>
+                <h5>多选-已选数据逗号分隔且超长可滚动</h5>
                 <TreeSelect
                   searchable
-                  searchInBox={false}
+                  maxTagCount={0}
+                  showTag={false}
+                  scrollSelected
                   allowClear
                   disabled={this.state.disabled}
                   type="multiple"

src/components/tree-select/index.js

@@ -6,9 +6,9 @@ import ShuyunUtils from 'shuyun-utils';
 import ContextProvider from '@contexts/context-provider';
 import { noop } from '@utils';
 
-import Tree from './tree';
+import Tree from './tree/tree';
 import Selected from './selected';
-import SingleTree from './single-tree';
+import SingleTree from './tree/single-tree';
 import { selector, SINGLE, MULTIPLE, getNodePath } from './const';
 
 import './index.less';
@@ -197,9 +197,9 @@ class TreeSelect extends Component {
     }
   };
 
-  handleSelect = () => {
+  handleSelect = ({ isClose = false } = {}) => {
     const { open } = this.state;
-    const { onSelectOpen, onSelectClose, open: propOpen, searchInBox, type } = this.props;
+    const { onSelectOpen, onSelectClose, open: propOpen, type } = this.props;
     if (open) {
       onSelectClose();
     } else {
@@ -211,7 +211,7 @@ class TreeSelect extends Component {
         setTimeout(() => {
           this.optionsNode.current.classList.add('show');
         });
-      } else if (!searchInBox || searchInBox && type === MULTIPLE || searchInBox && type !== MULTIPLE && !this.state.isSearch) {
+      } else if (type !== MULTIPLE && !this.state.isSearch || isClose) {
         this.optionsNode.current.classList.remove('show');
         setTimeout(() => {
           this.setState({ open: !open });
@@ -290,7 +290,7 @@ class TreeSelect extends Component {
       prevValue: selectedNodes,
     });
     this.props.onOk(node, selectedNodes);
-    this.handleSelect();
+    this.handleSelect({ isClose: true });
   };
 
   handleCancel = () => {
@@ -299,7 +299,7 @@ class TreeSelect extends Component {
       value: prevValue,
     });
     this.props.onCancel();
-    this.handleSelect();
+    this.handleSelect({ isClose: true });
   };
 
   handleReset = () => {
@@ -386,7 +386,6 @@ class TreeSelect extends Component {
           treeData={this.props.isDynamicLoad ? this.props.dataSource : this.state.treeData}
           disabled={disabled}
           searchable={searchable}
-          searchInBox={this.props.searchInBox}
           treeRef={this.treeRef}
           setSearchStatus={this.setSearchStatus}
           onMultiChange={this.onValueChange}
@@ -427,14 +426,15 @@ TreeSelect.propTypes = {
   onOk: PropTypes.func,
   onCancel: PropTypes.func,
   onReset: PropTypes.func,
-  searchInBox: PropTypes.bool,
   showTag: PropTypes.bool,
   maxTagCount: PropTypes.number,
+  scrollSelected: PropTypes.bool,
   dropdownStyle: PropTypes.object,
   dropdownClassName: PropTypes.string,
   position: PropTypes.oneOf(['top', 'bottom', 'auto']),
   maxHeight: PropTypes.number,
   size: PropTypes.oneOf(['small', 'default', 'large']),
+  borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large', 'circle']),
 };
 
 TreeSelect.defaultProps = {
@@ -460,14 +460,15 @@ TreeSelect.defaultProps = {
   onOk: noop,
   onCancel: noop,
   onReset: noop,
-  searchInBox: true,
   showTag: true,
   maxTagCount: 1,
+  scrollSelected: false,
   dropdownStyle: {},
   dropdownClassName: '',
   position: 'bottom',
   maxHeight: undefined,
   size: 'default',
+  borderRadiusSize: 'default',
 };
 
 export default TreeSelect;