@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/tree/foundation.ts

@@ -3,7 +3,7 @@
  * https://github.com/react-component/tree
  */
 
-import { isUndefined, difference, pick, cloneDeep, get } from 'lodash';
+import { isUndefined, difference, pick, get } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     flattenTreeData,
@@ -22,6 +22,9 @@ import {
     calcDropActualPosition
 } from './treeUtil';
 
+import type { KeyMapProps } from './treeUtil';
+export type { KeyMapProps };
+
 export interface BasicTreeNodeProps {
     [x: string]: any;
     expanded?: boolean;
@@ -39,12 +42,13 @@ export interface BasicTreeNodeProps {
     directory?: boolean;
     selectedKey?: string;
     motionKey?: string[] | string;
-    eventKey?: string
+    eventKey?: string;
+    showLine?: boolean
 }
 
 export interface BasicTreeNodeData {
     [x: string]: any;
-    key: string;
+    key?: string;
     value?: number | string;
     label?: any;
     icon?: any;
@@ -156,7 +160,11 @@ export interface BasicRenderFullLabelProps {
         expanded: boolean;
         /* Is it unfolding */
         loading: boolean
-    }
+    };
+    /* Whether the node meets the search conditions */
+    filtered: boolean | undefined;
+    /* Current search box input */
+    searchWord: string | undefined
 }
 
 export interface BasicSearchRenderProps {
@@ -197,7 +205,7 @@ export interface BasicTreeProps {
     emptyContent?: any;
     expandAction?: ExpandAction;
     expandedKeys?: string[];
-    filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string) => boolean);
+    filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string, data?: BasicTreeNodeData) => boolean);
     hideDraggingNode?: boolean;
     labelEllipsis?: boolean;
     leafOnly?: boolean;
@@ -217,8 +225,8 @@ export interface BasicTreeProps {
     onExpand?: (expandedKeys: string[], expandedOtherProps: BasicExpandedOtherProps) => void;
     onLoad?: (loadedKeys?: Set<string>, treeNode?: BasicTreeNodeData) => void;
     onContextMenu?: (e: any, node: BasicTreeNodeData) => void;
-    onSearch?: (sunInput: string) => void;
-    onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    onSearch?: (sunInput: string, filteredExpandedKeys: string[]) => void;
+    onSelect?: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
     preventScroll?: boolean;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: BasicTreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: BasicRenderFullLabelProps) => any;
@@ -229,6 +237,7 @@ export interface BasicTreeProps {
     searchStyle?: any;
     showClear?: boolean;
     showFilteredOnly?: boolean;
+    showLine?: boolean;
     style?: any;
     treeData?: BasicTreeNodeData[];
     treeDataSimpleJson?: TreeDataSimpleJson;
@@ -303,7 +312,7 @@ export interface TreeAdapter extends DefaultAdapter<BasicTreeProps, BasicTreeInn
     notifyExpand: (expandedKeys: Set<string>, { expanded, node }: BasicExpandedOtherProps) => void;
     notifySelect: (selectKey: string, bool: boolean, node: BasicTreeNodeData) => void;
     notifyChange: (value: BasicValue) => void;
-    notifySearch: (input: string) => void;
+    notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
     notifyRightClick: (e: any, node: BasicTreeNodeData) => void;
     notifyDoubleClick: (e: any, node: BasicTreeNodeData) => void;
     cacheFlattenNodes: (bool: boolean) => void;
@@ -350,14 +359,6 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         return Boolean(inputValue) && showFilteredOnly;
     }
 
-    getCopyFromState(items: string[] | string) {
-        const res: Partial<BasicTreeInnerData> = {};
-        normalizedArr(items).forEach(key => {
-            res[key] = cloneDeep(this.getState(key));
-        });
-        return res;
-    }
-
     getTreeNodeProps(key: string) {
         const {
             expandedKeys = new Set([]),
@@ -421,7 +422,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
 
     notifyMultipleChange(key: string[], e: any) {
         const { keyEntities } = this.getStates();
-        const { leafOnly, checkRelation } = this.getProps();
+        const { leafOnly, checkRelation, keyMaps } = this.getProps();
         let value;
         let keyList = [];
         if (checkRelation === 'related') {
@@ -432,13 +433,14 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         if (this.getProp('onChangeWithObject')) {
             value = keyList.map((itemKey: string) => keyEntities[itemKey].data);
         } else {
-            value = getValueOrKey(keyList.map((itemKey: string) => keyEntities[itemKey].data));
+            value = getValueOrKey(keyList.map((itemKey: string) => keyEntities[itemKey].data), keyMaps);
         }
         this._adapter.notifyChange(value);
     }
 
     notifyChange(key: string[] | string, e: any) {
         const isMultiple = this._isMultiple();
+        const { keyMaps } = this.getProps();
         const { keyEntities } = this.getStates();
         if (this.getProp('treeDataSimpleJson')) {
             this.notifyJsonChange(key, e);
@@ -450,7 +452,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
                 value = get(keyEntities, key).data;
             } else {
                 const { data } = get(keyEntities, key);
-                value = getValueOrKey(data);
+                value = getValueOrKey(data, keyMaps);
             }
             this._adapter.notifyChange(value);
         }
@@ -460,7 +462,8 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         // Input is a controlled component, so the value value needs to be updated
         this._adapter.updateInputValue(sugInput);
         const { expandedKeys, selectedKeys, keyEntities, treeData } = this.getStates();
-        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp } = this.getProps();
+        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp, keyMaps } = this.getProps();
+        const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : get(keyMaps, 'label', 'label');
         let filteredOptsKeys: string[] = [];
         let expandedOptsKeys: string[] = [];
         let flattenNodes: BasicFlattenNode[] = [];
@@ -469,10 +472,10 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         if (!sugInput) {
             expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
             expandedOptsKeys.forEach(item => expandedKeys.add(item));
-            flattenNodes = flattenTreeData(treeData, expandedKeys);
+            flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps);
         } else {
             filteredOptsKeys = Object.values(keyEntities)
-                .filter((item: BasicKeyEntity) => filter(sugInput, item.data, filterTreeNode, treeNodeFilterProp))
+                .filter((item: BasicKeyEntity) => filter(sugInput, item.data, filterTreeNode, realFilterProp))
                 .map((item: BasicKeyEntity) => item.key);
             expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
             const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
@@ -480,16 +483,18 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
             flattenNodes = flattenTreeData(
                 treeData,
                 new Set(expandedOptsKeys),
+                keyMaps,
                 showFilteredOnly && filteredShownKeys
             );
         }
-        this._adapter.notifySearch(sugInput);
+        const newFilteredExpandedKeys = new Set(expandedOptsKeys);
+        this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
         this._adapter.updateState({
             expandedKeys,
             flattenNodes,
             motionKeys: new Set([]),
             filteredKeys: new Set(filteredOptsKeys),
-            filteredExpandedKeys: new Set(expandedOptsKeys),
+            filteredExpandedKeys: newFilteredExpandedKeys,
             filteredShownKeys,
         });
     }
@@ -515,7 +520,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     }
 
     handleSingleSelect(e: any, treeNode: BasicTreeNodeProps) {
-        let { selectedKeys } = this.getCopyFromState('selectedKeys');
+        let selectedKeys = [...this.getState('selectedKeys')];
         const { selected, eventKey, data } = treeNode;
         const targetSelected = !selected;
 
@@ -536,7 +541,8 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
 
     calcCheckedKeys(eventKey: string, targetStatus: boolean) {
         const { keyEntities } = this.getStates();
-        const { checkedKeys, halfCheckedKeys } = this.getCopyFromState(['checkedKeys', 'halfCheckedKeys']);
+        const checkedKeys = new Set(this.getState('checkedKeys')) as Set<string>;
+        const halfCheckedKeys = new Set(this.getState('halfCheckedKeys')) as Set<string>;
         return targetStatus ?
             calcCheckedKeysForChecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys) :
             calcCheckedKeysForUnchecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys);
@@ -569,7 +575,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     */
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean) {
         const { keyEntities, disabledKeys } = this.getStates();
-        const { checkedKeys } = this.getCopyFromState(['checkedKeys']);
+        const checkedKeys = new Set(this.getState('checkedKeys'));
         const descendantKeys = normalizeKeyList(findDescendantKeys([eventKey], keyEntities, false), keyEntities, true);
         const hasDisabled = descendantKeys.some((key: string) => disabledKeys.has(key));
         // If none of the descendant nodes are disabled, follow the normal logic
@@ -622,10 +628,11 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
 
     setExpandedStatus(treeNode: BasicTreeNodeProps) {
         const { inputValue, treeData, filteredShownKeys, keyEntities } = this.getStates();
+        const { keyMaps } = this.getProps();
         const isSearching = Boolean(inputValue);
         const showFilteredOnly = this._showFilteredOnly();
         const expandedStateKey = isSearching ? 'filteredExpandedKeys' : 'expandedKeys';
-        const expandedKeys = this.getCopyFromState(expandedStateKey)[expandedStateKey];
+        const expandedKeys = new Set(this.getState(expandedStateKey)) as Set<string>;
 
         let motionType = 'show';
         const { eventKey, expanded, data } = treeNode;
@@ -641,6 +648,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
             const flattenNodes = flattenTreeData(
                 treeData,
                 expandedKeys,
+                keyMaps,
                 isSearching && showFilteredOnly && filteredShownKeys
             );
             const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
@@ -673,7 +681,6 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         });
     }
 
-    // eslint-disable-next-line max-len
     handleNodeLoad(loadedKeys: Set<string>, loadingKeys: Set<string>, data: BasicTreeNodeData, resolve: (value?: any) => void) {
         const { loadData, onLoad } = this.getProps();
         const { key } = data;
@@ -683,10 +690,8 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
 
         // Process the loaded data
         loadData(data).then(() => {
-            const {
-                loadedKeys: prevLoadedKeys,
-                loadingKeys: prevLoadingKeys
-            } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+            const prevLoadedKeys = new Set(this.getState('loadedKeys')) as Set<string>;
+            const prevLoadingKeys = new Set(this.getState('loadingKeys')) as Set<string>;
             const newLoadedKeys = prevLoadedKeys.add(key);
             const newLoadingKeys = new Set([...prevLoadingKeys]);
             newLoadingKeys.delete(key);

package/tree/rtl.scss

@@ -5,55 +5,63 @@ $module: #{$prefix}-tree;
     .#{$module} {
         direction: rtl;
     }
-    
+
     .#{$module}-wrapper {
         direction: rtl;
     }
-    
+
     .#{$module}-option-list {
         direction: rtl;
-    
+
         .#{$module}-option-expand-icon,
         .#{$module}-option-empty-icon {
             margin-right: 0;
             margin-left: $spacing-tree_icon-marginRight;
         }
-    
+
         .#{$module}-option {
+            padding-left: 0;
+            padding-right: $spacing-tree_option_level1-paddingLeft;
             &-label {
                 & > .#{$prefix}-icon {
                     margin-right: 0;
                     margin-left: $spacing-tree_icon-marginRight;
                 }
-    
+
                 .#{$prefix}-checkbox {
                     margin-right: 0;
                     margin-left: $spacing-tree_icon-marginRight;
                 }
             }
-    
+
             &-collapsed {
                 .#{$module}-option-expand-icon {
                     transform: rotate(90deg);
                 }
             }
         }
-    
+
         @for $i from 1 through 20 {
-            .#{$module}-option-level-#{$i} {
+            li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
                 padding-left: 0;
                 padding-right: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
             }
         }
-    
+
         .#{$module}-option-label-empty {
             padding-left: auto;
             padding-right: 0;
         }
+
+        .#{$module}-option {
+            &-switcher {
+                margin-right: 0;
+                margin-left: $spacing-tree_icon-marginRight;
+            }
+        }
     }
-    
+
     .#{$module}-option-list-block {
         direction: rtl;
     }
 }
-

package/tree/tree.scss

@@ -1,11 +1,9 @@
-@import "./animation.scss";
+@import './animation.scss';
 @import './variables.scss';
 
-
 $module: #{$prefix}-tree;
 
 .#{$module} {
-
     &-search-wrapper {
         padding: $spacing-tree_search_wrapper-paddingY $spacing-tree_search_wrapper-paddingX;
     }
@@ -34,6 +32,7 @@ $module: #{$prefix}-tree;
         box-sizing: border-box;
         padding-top: $spacing-tree_option-paddingTop;
         padding-bottom: $spacing-tree_option-paddingBottom;
+        padding-left: $spacing-tree_option_level1-paddingLeft;
     }
 
     li > .#{$module}-option-label {
@@ -55,8 +54,9 @@ $module: #{$prefix}-tree;
         display: flex;
         align-items: center;
         cursor: pointer;
-        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
-        transform:scale($transform_scale-tree-option);
+        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg
+            $transition_delay-tree_option-bg;
+        transform: scale($transform_scale-tree-option);
 
         @include font-size-regular;
         word-break: break-word;
@@ -134,13 +134,9 @@ $module: #{$prefix}-tree;
             }
         }
 
-        &-highlight,
-        &-filtered {
-            &,
-            .#{$prefix}-checkbox-addon {
-                font-weight: $font-tree_option_hightlight-fontWeight;
-                color: $color-tree_option_hightlight-text;
-            }
+        &-highlight {
+            font-weight: $font-tree_option_hightlight-fontWeight;
+            color: $color-tree_option_hightlight-text;
         }
 
         &-hidden {
@@ -167,7 +163,7 @@ $module: #{$prefix}-tree;
         &-draggable {
             box-sizing: border-box;
             border-left: $width-tree_option_draggable-border solid transparent;
-            margin-top: -$width-tree_option_draggable-border;
+            // margin-top: -$width-tree_option_draggable-border;
 
             .#{$module}-option-label {
                 border-top: $width-tree_option_draggable-border transparent solid;
@@ -179,7 +175,26 @@ $module: #{$prefix}-tree;
             }
 
             .#{$module}-option-drag-over-gap-bottom {
-                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default solid;
+                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default
+                    solid;
+            }
+
+            .#{$module}-option-indent {
+                .#{$module}-option-indent-unit:before {
+                    top: 0px;
+                    bottom: 0px;
+                }  
+            }
+
+            .#{$module}-option-switcher-leaf-line::before {
+                top: 0px;
+                bottom: 0px;
+            }
+
+            &.#{$module}-option-tree-node-last-leaf {
+                .#{$module}-option-switcher-leaf-line::before {
+                    height: 50%;
+                }
             }
         }
 
@@ -189,7 +204,8 @@ $module: #{$prefix}-tree;
             }
 
             &.#{$module}-option-fullLabel-drag-over-gap-bottom {
-                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default solid;
+                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default
+                    solid;
             }
         }
 
@@ -211,7 +227,85 @@ $module: #{$prefix}-tree;
                     left: -$width-tree_option_draggable-border;
                     bottom: 0;
                     right: -1px;
-                    border-top: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
+                    border-top: $width-tree_option_draggable-border solid
+                        $color-tree_option_draggable_insert-border-default;
+                }
+            }
+        }
+        &-indent {
+            align-self: stretch;
+            white-space: nowrap;
+            user-select: none;
+            &-unit {
+                display: inline-block;
+                width: $spacing-tree_option_level-paddingLeft;
+            }
+        }
+
+        &-indent-show-line {
+            .#{$module}-option-indent-unit {
+                position: relative;
+                height: 100%;
+
+                &::before {
+                    position: absolute;
+                    top: -$spacing-tree_option-paddingTop;
+                    inset-inline-start: calc($width-tree_emptyIcon / 2);
+                    bottom: -$spacing-tree_option-paddingBottom;
+                    border-inline-end: $width-tree_option_line solid var(--semi-color-text-3);
+                    content: '';
+                }
+
+                &-end {
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        &-switcher {
+            position: relative;
+            flex: none;
+            align-self: stretch;
+            width: $width-tree_emptyIcon;
+            margin: 0;
+            text-align: center;
+            cursor: pointer;
+            user-select: none;
+            margin-right: $spacing-tree_icon-marginRight;
+            &-leaf-line {
+                z-index: 1;
+                position: relative;
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+
+                &::before {
+                    position: absolute;
+                    top: -$spacing-tree_option-paddingTop;
+                    inset-inline-start: calc($width-tree_emptyIcon / 2);
+                    bottom: -$spacing-tree_option-paddingBottom;
+                    border-inline-end: $width-tree_option_line solid var(--semi-color-text-3);
+                    content: '';
+                }
+
+                &::after {
+                    box-sizing: border-box;
+                    position: absolute;
+                    width: calc(($spacing-tree_option_level-paddingLeft / 2) * 0.8);
+                    height: 50%;
+                    border-bottom: $width-tree_option_line solid var(--semi-color-text-3);
+                    content: '';
+                    margin-inline-start: $width-tree_option_line;
+                }
+            }
+        }
+
+        &-tree-node-last-leaf {
+            .#{$module}-option-switcher-leaf-line {
+                &::before {
+                    height: calc(50% + $spacing-tree_option-paddingTop);
                 }
             }
         }
@@ -236,7 +330,7 @@ $module: #{$prefix}-tree;
     }
 
     @for $i from 1 through 20 {
-        .#{$module}-option-level-#{$i} {
+        li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
             padding-left: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
         }
     }
@@ -302,6 +396,7 @@ $module: #{$prefix}-tree;
 
         &-spin-icon {
             display: flex;
+            line-height: 0; // make the spin icon in the center
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;