chore: merge develop

Author: github-actions[bot]

packages/components/affix/Affix.tsx

@@ -59,7 +59,9 @@ const Affix = forwardRef<AffixRef, AffixProps>((props, ref) => {
         let fixedTop: number | false;
         if (props.offsetBottom !== undefined && props.offsetTop === undefined) {
           const bottomThreshold = containerToBottom - (offsetBottom ?? 0);
-          if (wrapToBottom >= bottomThreshold) {
+          // When the container has scrolled out of the viewport
+          // the affix element should not be fixed to avoid a negative top value
+          if (containerToBottom > 0 && wrapToBottom >= bottomThreshold) {
             fixedTop = bottomThreshold - wrapHeight;
           } else {
             fixedTop = false;

packages/components/affix/_example/container.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import { Affix, Button } from 'tdesign-react';
 
 export default function ContainerExample() {
-  const [container, setContainer] = useState(null);
+  const containerRef = useRef<HTMLDivElement>();
 
   const backgroundStyle = {
     height: '1500px',
@@ -18,7 +18,7 @@ export default function ContainerExample() {
 
   return (
     <div
-      ref={setContainer}
+      ref={containerRef}
       style={{
         border: '1px solid var(--component-stroke)',
         borderRadius: '3px',
@@ -29,10 +29,10 @@ export default function ContainerExample() {
       }}
     >
       <div style={backgroundStyle}>
-        <Affix zIndex={10} offsetTop={50} container={container}>
+        <Affix zIndex={10} offsetTop={50} container={() => containerRef.current}>
           <Button>Top</Button>
         </Affix>
-        <Affix offsetBottom={50} container={container}>
+        <Affix offsetBottom={50} container={() => containerRef.current}>
           <Button>Bottom</Button>
         </Affix>
       </div>

packages/components/cascader/core/effect.ts

@@ -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
@@ -47,15 +49,25 @@ export function expendClickEffect(
   }
 
   if (!multiple && (node.isLeaf() || checkStrictly) && trigger === 'click') {
+    // 当 trigger 为 hover 时，点击节点一定是关闭 panel 的操作
+    const shouldClosePanel = !checkStrictly || propsTrigger === 'hover';
+
+    // 再次点击已选中节点，无需重复更新值，但仍需关闭弹窗
+    if (node.checked) {
+      if (shouldClosePanel) {
+        setVisible(false, {});
+      }
+      return;
+    }
+
     treeStore.resetChecked();
-    const checked = node.setChecked(!node.checked);
+    const checked = node.setChecked(true);
     const [value] = checked;
 
     // 非受控状态下更新状态
     setValue(valueType === 'single' ? value : node.getPath().map((item) => item.value), 'check', node.getModel());
 
-    // 当 trigger 为 hover 时 ，点击节点一定是关闭 panel 的操作
-    if (!checkStrictly || propsTrigger === 'hover') {
+    if (shouldClosePanel) {
       setVisible(false, {});
     }
   }
@@ -211,31 +223,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/helper.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];
 };
 
 /**
@@ -141,6 +158,25 @@ export function isEmptyValues(value: unknown): boolean {
  * @returns boolean
  */
 export function isValueInvalid(value: CascaderValue, cascaderContext: CascaderContextType) {
-  const { multiple, showAllLevels } = cascaderContext;
-  return (multiple && !Array.isArray(value)) || (!multiple && Array.isArray(value) && !showAllLevels);
+  const { multiple, showAllLevels, valueType } = cascaderContext;
+
+  // 多选模式：
+  // value 必须是数组
+  if (multiple) {
+    return !Array.isArray(value);
+  }
+
+  // 单选模式：
+  // valueType === 'full' 时，使用完整路径数组
+  if (valueType === 'full') {
+    return !Array.isArray(value);
+  }
+
+  // 其它情况默认 value 为非数组
+  // 若是数组，仅在 showAllLevels=true 时合法
+  if (Array.isArray(value)) {
+    return !showAllLevels;
+  }
+
+  return false;
 }