feat(Cascader): support same values across levels with valueType='full'

Author: RylanBot

packages/common

@@ -1,7 +1,9 @@
-import { isNumber, isFunction, cloneDeep } from 'lodash-es';
-import { TreeNode, CascaderContextType, TdCascaderProps, TreeNodeValue, TreeNodeModel } from '../interface';
+import { cloneDeep, isFunction, isNumber } from 'lodash-es';
+import { pathToKey } from '@tdesign/common-js/tree-v1/tree-node-model';
 import { getFullPathLabel, getTreeValue } from './helper';
 
+import type { CascaderContextType, TdCascaderProps, TreeNode, TreeNodeModel, TreeNodeValue } from '../interface';
+
 /**
  * 点击item的副作用
  * @param propsTrigger
@@ -211,31 +213,46 @@ export const treeNodesEffect = (
  * @param treeStore
  * @param treeValue
  * @param expend
+ * @param valueType
  */
 export const treeStoreExpendEffect = (
   treeStore: CascaderContextType['treeStore'],
   value: CascaderContextType['value'],
   expend: TreeNodeValue[],
+  valueType?: TdCascaderProps['valueType'],
 ) => {
   const treeValue = getTreeValue(value);
 
   if (!treeStore) return;
+
+  const allowDuplicateValue = treeStore.config?.allowDuplicateValue;
+
   // init expanded, 无expend状态时设置
   if (Array.isArray(treeValue) && expend.length === 0) {
     const expandedMap = new Map();
-    const [val] = treeValue;
-    if (val) {
-      expandedMap.set(val, true);
-      const node = treeStore.getNode(val);
-      if (!node) {
-        treeStore.refreshNodes();
-        return;
+
+    // 对于 valueType='full'，value 本身就是完整路径，用它来查找节点
+    let node = null;
+    if (valueType === 'full' && Array.isArray(value) && value.length > 0) {
+      node = treeStore.getNode(value as TreeNodeValue[]);
+    } else {
+      const [val] = treeValue;
+      if (val) {
+        expandedMap.set(val, true);
+        node = treeStore.getNode(val);
       }
+    }
+
+    if (node) {
       node.getParents().forEach((tn: TreeNode) => {
-        expandedMap.set(tn.value, true);
+        const expandedKey = allowDuplicateValue ? pathToKey(tn.getPath().map((n) => n.value)) : tn.value;
+        expandedMap.set(expandedKey, true);
       });
       const expandedArr = Array.from(expandedMap.keys());
       treeStore.replaceExpanded(expandedArr);
+    } else if (treeValue.length > 0) {
+      treeStore.refreshNodes();
+      return;
     } else {
       treeStore.resetExpanded();
     }

packages/components/cascader/core/effect.ts

@@ -1,9 +1,11 @@
+import { PATH_SEPARATOR } from '@tdesign/common-js/tree-v1/tree-node-model';
 import { isEmpty } from 'lodash-es';
-import {
-  TreeNode,
+
+import type {
   CascaderContextType,
-  TdCascaderProps,
   CascaderValue,
+  TdCascaderProps,
+  TreeNode,
   TreeNodeValue,
   TreeOptionData,
 } from '../interface';
@@ -15,20 +17,34 @@ import {
  * @returns
  */
 export function getSingleContent(cascaderContext: CascaderContextType): string {
-  const { value, multiple, treeStore, showAllLevels } = cascaderContext;
-  const BooleanIsFalseExceptZero = 0;
-  if (multiple || (!value && value !== BooleanIsFalseExceptZero)) return '';
-
-  if (Array.isArray(value)) return '';
-  const node = treeStore && treeStore.getNodes(value as TreeNodeValue | TreeNode);
-  if (!(node && node.length)) {
-    return value as string;
+  const { value, multiple, treeStore, showAllLevels, valueType } = cascaderContext;
+
+  const isEmpty = (!value && value !== 0) || (Array.isArray(value) && value.length === 0);
+  const isInvalidFullPathValue = valueType === 'full' && !Array.isArray(value);
+  if (multiple || isEmpty || isInvalidFullPathValue) return '';
+
+  const formatContent = (path: TreeNode[]) => {
+    if (!path?.length) return '';
+    return showAllLevels ? path.map((node) => node.label).join(` ${PATH_SEPARATOR} `) : path[path.length - 1].label;
+  };
+
+  const getDefaultDisplay = (val: any) => (Array.isArray(val) ? val.join(` ${PATH_SEPARATOR} `) : String(val));
+
+  // valueType = 'full'
+  if (valueType === 'full' && Array.isArray(value) && value.length > 0) {
+    const node = treeStore?.getNode(value as string[]);
+    const path = node?.getPath();
+    return path?.length ? formatContent(path) : getDefaultDisplay(value);
   }
-  const path = node && node[0].getPath();
-  if (path && path.length) {
-    return showAllLevels ? path.map((node: TreeNode) => node.label).join(' / ') : path[path.length - 1].label;
+
+  // valueType = 'single'
+  const nodes = treeStore?.getNodes(value as TreeNodeValue | TreeNode);
+  if (!nodes?.length) {
+    return getDefaultDisplay(value);
   }
-  return value as string;
+
+  const path = nodes[0].getPath();
+  return path?.length ? formatContent(path) : getDefaultDisplay(value);
 }
 
 /**
@@ -38,18 +54,23 @@ export function getSingleContent(cascaderContext: CascaderContextType): string {
  * @returns
  */
 export function getMultipleContent(cascaderContext: CascaderContextType) {
-  const { value, multiple, treeStore, showAllLevels } = cascaderContext;
+  const { value, multiple, treeStore, showAllLevels, valueType } = cascaderContext;
 
   if (!multiple) return [];
   if (multiple && !Array.isArray(value)) return [];
 
-  const node = treeStore && treeStore.getNodes(value as TreeNodeValue | TreeNode);
-  if (!node) return [];
-
   return (value as TreeNodeValue[])
     .map((item: TreeNodeValue) => {
-      const node = treeStore.getNodes(item);
-      return showAllLevels ? getFullPathLabel(node?.[0]) : node?.[0]?.label;
+      let node: TreeNode | undefined;
+      // valueType='full' 时，item 是路径数组，使用 getNode 获取节点
+      if (valueType === 'full' && Array.isArray(item)) {
+        node = treeStore?.getNode(item as string[]);
+      } else {
+        const nodes = treeStore?.getNodes(item);
+        node = nodes?.[0];
+      }
+      if (!node) return undefined;
+      return showAllLevels ? getFullPathLabel(node) : node?.label;
     })
     .filter((item) => !!item);
 }
@@ -107,20 +128,16 @@ export const getTreeValue = (value: CascaderContextType['value']) => {
 };
 
 /**
- * 按数据类型计算通用数值
- * @param value
- * @param showAllLevels
- * @param multiple
- * @returns
+ * 获取用于展开的节点值
  */
-export const getCascaderValue = (value: CascaderValue, valueType: TdCascaderProps['valueType'], multiple: boolean) => {
-  if (valueType === 'single') {
-    return value;
-  }
-  if (multiple) {
-    return (value as Array<CascaderValue>).map((item: TreeNodeValue[]) => item[item.length - 1]);
+export const getExpandValue = (value: CascaderContextType['value'], valueType?: TdCascaderProps['valueType']) => {
+  if (valueType === 'full' && Array.isArray(value) && value.length > 0) {
+    // valueType='full' 时，value 是完整路径数组
+    // 返回最后一个值用于展开
+    return value[value.length - 1] as TreeNodeValue;
   }
-  return value[(value as Array<CascaderValue>).length - 1];
+  const treeValue = getTreeValue(value);
+  return treeValue[0];
 };
 
 /**

packages/components/cascader/core/helper.ts

@@ -1,13 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { isArray, isEqual, isFunction } from 'lodash-es';
 
+import { pathToKey } from '@tdesign/common-js/tree-v1/tree-node-model';
 import TreeStore from '@tdesign/common-js/tree-v1/tree-store';
 import type { TypeTreeNodeData } from '@tdesign/common-js/tree-v1/types';
 
 import useControlled from '../hooks/useControlled';
 import useDefaultProps from '../hooks/useDefaultProps';
 import { treeNodesEffect, treeStoreExpendEffect } from './core/effect';
-import { getCascaderValue, getTreeValue, isEmptyValues, isValueInvalid } from './core/helper';
+import { getTreeValue, isEmptyValues, isValueInvalid } from './core/helper';
 import { cascaderDefaultProps } from './defaultProps';
 
 import type { TreeOptionData } from '../common';
@@ -122,6 +123,7 @@ export const useCascaderContext = (originalProps: TdCascaderProps) => {
           ...keys,
           children: typeof keys.children === 'string' ? keys.children : 'children',
         },
+        allowDuplicateValue: props.valueType === 'full',
         onLoad: () => {
           setTimeout(() => {
             store.refreshNodes();
@@ -135,7 +137,7 @@ export const useCascaderContext = (originalProps: TdCascaderProps) => {
     } else {
       treeStore.reload(options);
       treeStore.refreshNodes();
-      treeStoreExpendEffect(treeStore, scopeVal, []);
+      treeStoreExpendEffect(treeStore, scopeVal, [], props.valueType);
       treeNodesEffect(inputVal, treeStore, setTreeNodes, props.filter, isParentFilterable);
     }
   };
@@ -161,14 +163,14 @@ export const useCascaderContext = (originalProps: TdCascaderProps) => {
 
   // value 校验逻辑
   useEffect(() => {
-    const { setValue, multiple, valueType = 'single' } = cascaderContext;
+    const { setValue, multiple } = cascaderContext;
 
     if (isValueInvalid(innerValue, cascaderContext)) {
       setValue(multiple ? [] : '', 'invalid-value');
     }
 
     if (!isEmptyValues(innerValue)) {
-      setScopeVal(getCascaderValue(innerValue, valueType, multiple));
+      setScopeVal(innerValue);
     } else {
       setScopeVal(multiple ? [] : '');
     }
@@ -181,8 +183,8 @@ export const useCascaderContext = (originalProps: TdCascaderProps) => {
 
   useEffect(() => {
     if (!treeStore) return;
-    treeStoreExpendEffect(treeStore, scopeVal, expend);
-  }, [treeStore, scopeVal, expend]);
+    treeStoreExpendEffect(treeStore, scopeVal, expend, props.valueType);
+  }, [treeStore, scopeVal, expend, props.valueType]);
 
   useEffect(() => {
     if (!treeStore) return;
@@ -191,8 +193,27 @@ export const useCascaderContext = (originalProps: TdCascaderProps) => {
 
   useEffect(() => {
     if (!treeStore) return;
-    treeStore.replaceChecked(getTreeValue(scopeVal));
-  }, [options, scopeVal, treeStore, multiple]);
+
+    const { valueType } = props;
+
+    const getCheckedKeys = (): TreeNodeValue[] => {
+      if (valueType !== 'full') {
+        return getTreeValue(scopeVal);
+      }
+
+      const isValidPath = (path: unknown): path is TreeNodeValue[] => Array.isArray(path) && path.length > 0;
+
+      // 多选模式
+      if (multiple && Array.isArray(scopeVal)) {
+        return (scopeVal as TreeNodeValue[][]).filter(isValidPath).map(pathToKey);
+      }
+
+      // 单选模式
+      return isValidPath(scopeVal) ? [pathToKey(scopeVal)] : [];
+    };
+
+    treeStore.replaceChecked(getCheckedKeys());
+  }, [options, scopeVal, treeStore, multiple, props]);
 
   useEffect(() => {
     if (!innerPopupVisible && isFilterable) {
@@ -212,32 +233,29 @@ export const useCascaderContext = (originalProps: TdCascaderProps) => {
     multiple: TdCascaderProps['multiple'],
   ) => {
     const { treeStore } = cascaderContext;
+    if (!treeStore) return [];
+
     const optionsData: TreeOptionData[] = [];
 
-    if (!treeStore) return optionsData;
+    const pushNodeData = (node?: TreeNode) => {
+      if (node?.data) optionsData.push(node.data);
+    };
 
     if (valueType === 'full') {
-      if (multiple) {
-        // 未来需支持全路径拼接搜索
-        arrValue.forEach((value) => {
-          if (isArray(value) && value.length) {
-            const nodeValue = value[value.length - 1];
-            const [node] = treeStore.getNodes(nodeValue) || [];
-            node?.data && optionsData.push(node.data);
-          }
-        });
-      } else if (isArray(arrValue) && arrValue.length) {
-        const nodeValue = arrValue[arrValue.length - 1];
-        const [node] = treeStore.getNodes(nodeValue) || [];
-        node?.data && optionsData.push(node.data);
-      }
-    } else if (valueType === 'single') {
-      arrValue.forEach((value) => {
-        const [node] = treeStore.getNodes(value) || [];
-        node?.data && optionsData.push(node.data);
+      const values = multiple ? arrValue : [arrValue];
+      values.forEach((v) => {
+        if (isArray(v) && v.length) {
+          pushNodeData(treeStore.getNode(v as TreeNodeValue[]));
+        }
       });
+      return optionsData;
     }
 
+    arrValue.forEach((v) => {
+      const node = treeStore.getNodes(v)?.[0];
+      pushNodeData(node);
+    });
+
     return optionsData;
   };