@douyinfe/semi-ui 2.6.0 → 2.7.1

package/tree/_story/tree.stories.js

@@ -1,12 +1,11 @@
 import React, { useRef, useState } from 'react';
+import { cloneDeep, difference, isEqual } from 'lodash';
+import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
 import AutoSizer from '../autoSizer';
-import { Button, ButtonGroup, Input, Popover, Toast } from '../../index';
+import { Button, ButtonGroup, Input, Popover, Toast, Space } from '../../index';
 import BigTree from './BigData';
 import testData from './data';
-import { cloneDeep, difference, isEqual } from 'lodash';
-import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
-
 const TreeNode = Tree.TreeNode;
 
 export default {
@@ -2338,4 +2337,65 @@ export const CheckRelationDemo = () => {
       />
     </>
   );
-};
+};
+
+export const ValueImpactExpansionWithDynamicTreeData = () => {
+  const json = {
+      "Node0": { 
+          "Child Node0-0": '0-0', 
+          "Child Node0-1": '0-1', 
+      },
+      "Node1": { 
+          "Child Node1-0": '1-0', 
+          "Child Node1-1": '1-1', 
+      }
+  }
+  const json2 = {
+      "Updated Node0": { 
+          "Updated Child Node0-0": {
+              'Updated Child Node0-0-0':'0-0'
+          }, 
+          "Updated Child Node0-1": '0-1', 
+      },
+      "Updated Node1": { 
+          "Updated Child Node1-0": '1-0', 
+          "Updated Child Node1-1": '1-1', 
+      }
+  }
+  const style = {
+      width: 260,
+      height: 420,
+      border: '1px solid var(--color-border)'
+  }
+  const [value, setValue] = useState('0-0')
+  const [tree, setTree] = useState(json);
+  const handleValueButtonClick = () => {
+      if (value === '0-0') {
+          setValue('1-0');
+      } else {
+          setValue('0-0');
+      }
+  }
+  const handleTreeDataButtonClick = () => {
+      if(isEqual(tree, json)){
+          setTree(json2);
+      } else {
+          setTree(json);
+      }
+  }
+  return (  
+    <>
+      <div>value 受控时，当 treeData/treeDataSimpleJson 改变时，应该根据 value 自动展开</div>
+      <Tree 
+          value={value}
+          treeDataSimpleJson={tree} 
+          style={style}
+          onChange={v => setValue(v)}
+      />
+      <Space>
+          <Button onClick={handleValueButtonClick}>改变 value</Button>
+          <Button onClick={handleTreeDataButtonClick}>改变 TreeData</Button>    
+      </Space>
+    </>
+  )
+}

package/tree/index.tsx

@@ -192,6 +192,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         const newState: Partial<TreeState> = {
             prevProps: props,
         };
+        const isExpandControlled = 'expandedKeys' in props;
 
         // Accept a props field as a parameter to determine whether to update the field
         const needUpdate = (name: string) => {
@@ -239,7 +240,8 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 newState.motionType = null;
             }
         }
-        const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+        const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+        const expandAllWhenDataChange = dataUpdated && props.expandAll;
         if (!isSeaching) {
             // Update expandedKeys
             if (needUpdate('expandedKeys') || (prevProps && needUpdate('autoExpandParent'))) {
@@ -273,7 +275,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                     props.multiple,
                     valueEntities
                 );
-            } else if (!prevProps && props.value) {
+            } else if ((!prevProps || (!isExpandControlled && dataUpdated)) && props.value) {
                 newState.expandedKeys = calcExpandedKeysForValues(
                     props.value,
                     keyEntities,

package/tree/interface.ts

@@ -131,6 +131,7 @@ export interface NodeListProps {
     motionKeys: Set<string>;
     motionType: string;
     flattenList: FlattenNode[] | undefined;
+    searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
 export type TransitionNodes<T> = Array<T | Array<T>>;

package/tree/nodeList.tsx

@@ -55,13 +55,14 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
     }
 
     onMotionEnd = () => {
+        typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
         this.setState({ transitionNodes: [] });
     };
 
     render() {
-        const { flattenNodes, motionType, renderTreeNode } = this.props;
+        const { flattenNodes, motionType, searchTargetIsDeep, renderTreeNode } = this.props;
         const { transitionNodes } = this.state;
-        const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+        const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
         const options = mapData.map(treeNode => {
             const isMotionNode = Array.isArray(treeNode);
             if (isMotionNode && !(treeNode as FlattenNode[]).length) {

package/treeSelect/__test__/treeSelect.test.js

@@ -552,6 +552,17 @@ describe('TreeSelect', () => {
         searchWrapper.find('input').simulate('change', event);
         expect(spyOnSearch.calledOnce).toBe(true);
         expect(spyOnSearch.calledWithMatch(searchValue)).toBe(true);
+
+        /* Check the input parameters of onSearch */
+        searchValue = '北京';
+        event = { target: { value: searchValue } };
+        searchWrapper.find('input').simulate('change', event);
+        expect(spyOnSearch.callCount).toBe(2);
+        const firstCall = spyOnSearch.getCall(1);
+        const args = firstCall.args;
+        expect(args[0]).toEqual('北京');
+        expect(args[1].includes('yazhou')).toEqual(true);
+        expect(args[1].includes('zhongguo')).toEqual(true);
     });
 
     it('filterTreeNode shows correct result', () => {
@@ -937,4 +948,21 @@ describe('TreeSelect', () => {
         ).toEqual(0);
     });
 
+    it('expandedKeys controlled + filterTreeNode', () => {
+        const spyOnExpand = sinon.spy(() => { });
+        const treeSelect = getTreeSelect({
+            expandedKeys: [],
+            onExpand: spyOnExpand,
+            filterTreeNode: true,
+        });
+        const searchWrapper = treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-search-wrapper`);
+        const searchValue = '北京';
+        const event = { target: { value: searchValue } };
+        searchWrapper.find('input').simulate('change', event);
+        expect(spyOnExpand.callCount).toBe(0);
+        /* filter won't impact on the expansion of node when expandedKeys is controlled */
+        const topNode = treeSelect.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-1`);
+        expect(topNode.at(0).hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)).toEqual(true);
+        expect(topNode.at(1).hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)).toEqual(true);
+    });
 })

package/treeSelect/_story/treeSelect.stories.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { Icon, Button, Form, Popover, Tag } from '../../index';
+import { Icon, Button, Form, Popover, Tag, Typography } from '../../index';
 import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
 import { IconCreditCard } from '@douyinfe/semi-icons';
 const TreeNode = TreeSelect.TreeNode;
+const { Title } = Typography;
 
 export default {
   title: 'TreeSelect',
@@ -1406,4 +1407,56 @@ export const CheckRelationDemo = () => {
       />
     </>
   );
-};
+};
+
+export const SearchableAndExpandedKeys = () => {
+  const [expandedKeys1, setExpandedKeys1] = useState([]);
+  const [expandedKeys2, setExpandedKeys2] = useState([]);
+  const [expandedKeys3, setExpandedKeys3] = useState([]);
+  return (
+      <>
+          <Title heading={6}>expandedKeys 受控</Title>
+          <TreeSelect
+              style={{ width: 300, marginBottom: 30 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData2}
+              expandedKeys={expandedKeys1}
+              defaultValue='beijing'
+              onExpand={v => {
+                  console.log('onExpand value: ', v);
+                  setExpandedKeys1(v);
+              }}
+          />
+          <Title heading={6}>expandedKeys 受控 + 开启搜索</Title>
+          <TreeSelect
+              style={{ width: 300, marginBottom: 30 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData2}
+              filterTreeNode
+              defaultValue='beijing'
+              expandedKeys={expandedKeys2}
+              onExpand={v => {
+                  console.log('onExpand value: ', v);
+                  setExpandedKeys2(v);
+              }}
+          />
+          <Title heading={6}>expandedKeys 受控 + 开启搜索 + 搜索时更新 expandedKeys</Title>
+          <TreeSelect
+              style={{ width: 300, marginBottom: 30 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData2}
+              filterTreeNode
+              expandedKeys={expandedKeys3}
+              defaultValue='beijing'
+              onExpand={v => {
+                  console.log('onExpand value: ', v);
+                  setExpandedKeys3(v)
+              }}
+              onSearch={(input, filterExpandedKeys) => {
+                  console.log('onExpand filterExpandedKeys: ', filterExpandedKeys);
+                  setExpandedKeys3(filterExpandedKeys);
+              }}
+          />
+      </>
+  )
+}

package/treeSelect/index.tsx

@@ -331,6 +331,9 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.clickOutsideHandler = null;
         this.foundation = new TreeSelectFoundation(this.adapter);
         this.treeSelectID = Math.random().toString(36).slice(2);
+        this.onMotionEnd = () => {
+            this.adapter.rePositionDropdown();
+        };
     }
 
     // eslint-disable-next-line max-lines-per-function
@@ -561,8 +564,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             notifySelect: ((selectKey, bool, node) => {
                 this.props.onSelect && this.props.onSelect(selectKey, bool, node);
             }),
-            notifySearch: input => {
-                this.props.onSearch && this.props.onSearch(input);
+            notifySearch: (input, filteredExpandedKeys) => {
+                this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
             },
             cacheFlattenNodes: bool => {
                 this._flattenNodes = bool ? cloneDeep(this.state.flattenNodes) : null;
@@ -1232,9 +1235,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderNodeList = () => {
-        const { flattenNodes, motionKeys, motionType } = this.state;
+        const { flattenNodes, motionKeys, motionType, filteredKeys } = this.state;
         const { direction } = this.context;
         const { virtualize, motionExpand } = this.props;
+        const isExpandControlled = 'expandedKeys' in this.props;
         if (!virtualize || isEmpty(virtualize)) {
             return (
                 <NodeList
@@ -1242,6 +1246,13 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                     flattenList={this._flattenNodes}
                     motionKeys={motionExpand ? motionKeys : new Set([])}
                     motionType={motionType}
+                    // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
+                    searchTargetIsDeep={
+                        isExpandControlled &&
+                        motionExpand &&
+                        isEmpty(motionKeys) &&
+                        !isEmpty(filteredKeys)
+                    }
                     onMotionEnd={this.onMotionEnd}
                     renderTreeNode={this.renderTreeNode}
                 />