@rainbow-oh/yee-c 0.6.4 → 0.8.0

package/src/Tree/demo/draggable.tsx

@@ -47,6 +47,8 @@ export default () => {
             {
               dragKey: info.dragKey,
               dropKey: info.dropKey,
+              dragPath: info.dragPath,
+              dropPath: info.dropPath,
               position: info.position,
             },
             FIELD_NAMES,

package/src/Tree/interface.ts

@@ -6,13 +6,14 @@ export type { MoveInfo } from './utils/tree-tools';
 
 export type TreeNode<T> = {
   /**
-   * uid
+   * Unique internal identifier built from key path joined by '\x00'.
+   * Guaranteed unique even when user-provided `key` values repeat across branches.
    */
   uid: string;
   /**
-   * Unique key
-   * */
-  key: string;
+   * User-provided key (may not be globally unique)
+   */
+  key: string | number;
   /**
    * Display node text
    */
@@ -22,7 +23,7 @@ export type TreeNode<T> = {
    */
   title?: string;
   /**
-   * Child nodes
+   * Child nodes (only present in raw tree; not used in flat list)
    */
   children?: Array<TreeNode<T>>;
   /**
@@ -30,16 +31,16 @@ export type TreeNode<T> = {
    */
   depth: number;
   /**
-   * Parent node key
-   * */
-  pKey: string | null;
+   * Parent node uid (null for root nodes)
+   */
+  pUid: string | null;
   /**
    * Whether this is a leaf node
-   * */
+   */
   isLeaf: boolean;
   /**
    * Whether this is the last node at its level
-   * */
+   */
   isLast: boolean;
   /**
    * Whether disabled
@@ -50,17 +51,17 @@ export type TreeNode<T> = {
    */
   icon?: React.ReactNode | (() => React.ReactNode);
   /**
-   * Ancestor keys
+   * Ancestor keys (user-provided keys, for building uid path)
    */
-  path: string[];
+  path: Array<string | number>;
   /**
-   * Whether to show connecting lines
+   * Whether to show connecting lines at given depth levels
    */
   lines: number[];
   /**
-   * List of child node keys
+   * All descendant uids (collected bottom-up). Used for check/uncheck propagation.
    */
-  childKeys?: Array<string | number>;
+  childUids?: Array<string>;
   /**
    * Original data
    */
@@ -69,6 +70,7 @@ export type TreeNode<T> = {
 
 export interface TreeNodeProps<T> {
   node: TreeNode<T>;
+  style?: React.CSSProperties;
 }
 
 export interface TreeProps<T> {
@@ -93,11 +95,11 @@ export interface TreeProps<T> {
    */
   defaultExpandAll?: boolean;
   /**
-   * Specify which tree nodes to expand by default
+   * Specify which tree nodes to expand by default (user keys)
    */
   defaultExpandedKeys?: string[];
   /**
-   * Controlled expanded tree nodes
+   * Controlled expanded tree nodes (user keys)
    */
   expandedKeys?: string[];
   /**
@@ -128,6 +130,10 @@ export interface TreeProps<T> {
     dropNode: T;
     dragKey: string | number;
     dropKey: string | number;
+    /** Full key path from root to the dragged node (for non-unique key support) */
+    dragPath: Array<string | number>;
+    /** Full key path from root to the drop target (for non-unique key support) */
+    dropPath: Array<string | number>;
     position: DragPosition;
     /** Convenience flag: true when position is 'before' or 'after' */
     dropToGap: boolean;
@@ -164,22 +170,39 @@ export interface TreeProps<T> {
   loadData?: () => void;
   /**
    * Data source
-   * */
+   */
   dataSource?: Array<T> | T;
   /**
-   * Checked tree nodes (controlled)
+   * Enable virtual scrolling for large datasets.
+   * Requires `height` to be set.
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Height of the scrollable container in pixels.
+   * Required when `virtual` is true.
+   */
+  height?: number;
+  /**
+   * Fixed height of each tree node row in pixels.
+   * Used for virtual scroll calculation.
+   * @default 28
+   */
+  itemHeight?: number;
+  /**
+   * Checked tree nodes (controlled, user keys)
    */
   checkedKeys?: Array<string | number>;
   /**
-   * Checked tree nodes (uncontrolled)
+   * Checked tree nodes (uncontrolled, user keys)
    */
   defaultCheckedKeys?: Array<string | number>;
   /**
-   * Set selected tree nodes, set multiple to true for multi-select
+   * Set selected tree nodes, set multiple to true for multi-select (user keys)
    */
   selectedKeys?: Array<string | number>;
   /**
-   * Set default selected tree nodes, set multiple to true for multi-select
+   * Set default selected tree nodes (user keys)
    */
   defaultSelectedKeys?: Array<string | number>;
   /**
@@ -212,7 +235,7 @@ export interface TreeProps<T> {
     params: {
       expanded: boolean;
       expandedNodes: T[];
-      node: T[];
+      node: T;
     },
   ) => void;
 }

package/src/Tree/tree-node.tsx

@@ -11,12 +11,11 @@ import './style/index.less';
 const Node = <T extends Record<string, unknown> = any>(
   props: TreeNodeProps<T>,
 ) => {
-  const { node } = props;
+  const { node, style: nodeStyle } = props;
   const {
-    key,
+    uid,
     isLeaf,
     isLast,
-    path,
     label,
     title,
     disabled,
@@ -31,12 +30,13 @@ const Node = <T extends Record<string, unknown> = any>(
     showIcon,
     icon: contextIcon,
     showLine,
-    selectedKeys,
-    checkedKeys,
-    expandedKeys,
+    selectedUids,
+    checkedUids,
+    indeterminateUids,
+    expandedUids,
     switcherIcon,
     draggable,
-    draggingKey,
+    draggingUid,
     dropState,
     onCheck,
     onSelect,
@@ -47,14 +47,10 @@ const Node = <T extends Record<string, unknown> = any>(
     onNodeDrop,
   } = useContext(TreeContext);
 
-  const expanded = expandedKeys.includes(key);
-  const checked = checkedKeys.includes(key);
-  const selected = selectedKeys.includes(key);
-
-  // All nodes on the path must be visible for this node to display
-  const visible = path.every((p) => expandedKeys.includes(p));
-
-  if (!visible) return null;
+  const expanded = expandedUids.has(uid);
+  const checked = checkedUids.has(uid);
+  const indeterminate = indeterminateUids.has(uid);
+  const selected = selectedUids.has(uid);
 
   const renderExpandedIcon = () => {
     const expandedIcon = switcherIcon ? (
@@ -82,7 +78,7 @@ const Node = <T extends Record<string, unknown> = any>(
             size="small"
             type="text"
             icon={expanded ? expandedIcon : collapseIcon}
-            onClick={() => onExpand(key)}
+            onClick={() => onExpand(uid)}
           />
         )}
       </span>
@@ -93,7 +89,12 @@ const Node = <T extends Record<string, unknown> = any>(
     if (!checkable) return null;
     return (
       <span className={`${prefixCls}-node-checkbox`}>
-        <Checkbox value={key} checked={checked} onChange={onCheck} />
+        <Checkbox
+          value={uid}
+          checked={checked}
+          indeterminate={indeterminate}
+          onChange={(e) => onCheck(e, uid)}
+        />
       </span>
     );
   };
@@ -113,7 +114,7 @@ const Node = <T extends Record<string, unknown> = any>(
         type="text"
         title={_title}
         icon={showIcon ? _icon : undefined}
-        onClick={disabled ? undefined : () => onSelect(key)}
+        onClick={disabled ? undefined : () => onSelect(uid)}
       >
         {label}
       </Button>
@@ -121,8 +122,6 @@ const Node = <T extends Record<string, unknown> = any>(
   };
 
   const renderEmptyNodes = (depth: number) => {
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-
     const temp = new Array(depth).fill(0);
     if (showLine) {
       return temp.map((_, index) => (
@@ -145,17 +144,17 @@ const Node = <T extends Record<string, unknown> = any>(
     ));
   };
 
-  const isDropTarget = dropState?.key === key;
+  const isDropTarget = dropState?.uid === uid;
   const dropPosition = isDropTarget ? dropState.position : null;
 
   const dragProps =
     draggable && !disabled
       ? {
           draggable: true as const,
-          onDragStart: (e: React.DragEvent) => onNodeDragStart(key, e),
-          onDragOver: (e: React.DragEvent) => onNodeDragOver(key, e),
-          onDragLeave: (e: React.DragEvent) => onNodeDragLeave(key, e),
-          onDrop: (e: React.DragEvent) => onNodeDrop(key, e),
+          onDragStart: (e: React.DragEvent) => onNodeDragStart(uid, e),
+          onDragOver: (e: React.DragEvent) => onNodeDragOver(uid, e),
+          onDragLeave: (e: React.DragEvent) => onNodeDragLeave(uid, e),
+          onDrop: (e: React.DragEvent) => onNodeDrop(uid, e),
         }
       : {};
 
@@ -165,14 +164,12 @@ const Node = <T extends Record<string, unknown> = any>(
         [`${prefixCls}-node-with-line`]: showLine,
         [`${prefixCls}-leaf-node`]: isLeaf,
         [`${prefixCls}-last-node`]: isLast,
-        [`${prefixCls}-node-dragging`]: draggingKey === key,
+        [`${prefixCls}-node-dragging`]: draggingUid === uid,
         [`${prefixCls}-node-drag-over-before`]: dropPosition === 'before',
         [`${prefixCls}-node-drag-over-after`]: dropPosition === 'after',
         [`${prefixCls}-node-drag-over-inside`]: dropPosition === 'inside',
       })}
-      // style={{
-      //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
-      // }}
+      style={nodeStyle}
       {...dragProps}
     >
       {renderEmptyNodes(depth)}