@rainbow-oh/yee-c 0.6.4 → 0.7.0

package/dist/cjs/Tree/interface.d.ts

@@ -4,13 +4,14 @@ export type DragPosition = 'before' | 'after' | 'inside';
 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
      */
@@ -20,7 +21,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>>;
     /**
@@ -28,16 +29,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
@@ -48,17 +49,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
      */
@@ -66,6 +67,7 @@ export type TreeNode<T> = {
 };
 export interface TreeNodeProps<T> {
     node: TreeNode<T>;
+    style?: React.CSSProperties;
 }
 export interface TreeProps<T> {
     /**
@@ -89,11 +91,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[];
     /**
@@ -124,6 +126,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>;
     /**
@@ -204,6 +227,6 @@ export interface TreeProps<T> {
     onExpand?: (expandedKeys: Array<string | number>, params: {
         expanded: boolean;
         expandedNodes: T[];
-        node: T[];
+        node: T;
     }) => void;
 }

package/dist/cjs/Tree/tree-node.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TreeNodeProps } from './interface';
 import './style/index.less';
-declare const Node: <T extends Record<string, unknown> = any>(props: TreeNodeProps<T>) => React.JSX.Element | null;
+declare const Node: <T extends Record<string, unknown> = any>(props: TreeNodeProps<T>) => React.JSX.Element;
 export default Node;

package/dist/cjs/Tree/tree-node.js

@@ -54,12 +54,11 @@ var import_Checkbox = __toESM(require("../Checkbox"));
 var import_tree = require("./tree");
 var import_style = require("./style/index.less");
 var Node = (props) => {
-  const { node } = props;
+  const { node, style: nodeStyle } = props;
   const {
-    key,
+    uid,
     isLeaf,
     isLast,
-    path,
     label,
     title,
     disabled,
@@ -74,12 +73,13 @@ var Node = (props) => {
     showIcon,
     icon: contextIcon,
     showLine,
-    selectedKeys,
-    checkedKeys,
-    expandedKeys,
+    selectedUids,
+    checkedUids,
+    indeterminateUids,
+    expandedUids,
     switcherIcon,
     draggable,
-    draggingKey,
+    draggingUid,
     dropState,
     onCheck,
     onSelect,
@@ -89,12 +89,10 @@ var Node = (props) => {
     onNodeDragLeave,
     onNodeDrop
   } = (0, import_react.useContext)(import_tree.TreeContext);
-  const expanded = expandedKeys.includes(key);
-  const checked = checkedKeys.includes(key);
-  const selected = selectedKeys.includes(key);
-  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 ? switcherIcon[0] : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { strokeWidth: 1 });
     const collapseIcon = switcherIcon ? switcherIcon[1] : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { strokeWidth: 1 });
@@ -113,14 +111,22 @@ var Node = (props) => {
         size: "small",
         type: "text",
         icon: expanded ? expandedIcon : collapseIcon,
-        onClick: () => onExpand(key)
+        onClick: () => onExpand(uid)
       }
     ));
   };
   const renderCheckbox = () => {
     if (!checkable)
       return null;
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-node-checkbox` }, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { value: key, checked, onChange: onCheck }));
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-node-checkbox` }, /* @__PURE__ */ import_react.default.createElement(
+      import_Checkbox.default,
+      {
+        value: uid,
+        checked,
+        indeterminate,
+        onChange: (e) => onCheck(e, uid)
+      }
+    ));
   };
   const renderLabel = () => {
     const _title = title || (typeof label === "string" ? label : void 0);
@@ -136,7 +142,7 @@ var Node = (props) => {
         type: "text",
         title: _title,
         icon: showIcon ? _icon : void 0,
-        onClick: disabled ? void 0 : () => onSelect(key)
+        onClick: disabled ? void 0 : () => onSelect(uid)
       },
       label
     );
@@ -164,14 +170,14 @@ var Node = (props) => {
       }
     ));
   };
-  const isDropTarget = (dropState == null ? void 0 : dropState.key) === key;
+  const isDropTarget = (dropState == null ? void 0 : dropState.uid) === uid;
   const dropPosition = isDropTarget ? dropState.position : null;
   const dragProps = draggable && !disabled ? {
     draggable: true,
-    onDragStart: (e) => onNodeDragStart(key, e),
-    onDragOver: (e) => onNodeDragOver(key, e),
-    onDragLeave: (e) => onNodeDragLeave(key, e),
-    onDrop: (e) => onNodeDrop(key, e)
+    onDragStart: (e) => onNodeDragStart(uid, e),
+    onDragOver: (e) => onNodeDragOver(uid, e),
+    onDragLeave: (e) => onNodeDragLeave(uid, e),
+    onDrop: (e) => onNodeDrop(uid, e)
   } : {};
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -180,11 +186,12 @@ var Node = (props) => {
         [`${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: nodeStyle
     }, dragProps),
     renderEmptyNodes(depth),
     renderExpandedIcon(),

package/dist/cjs/Tree/tree.d.ts

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import type { DragPosition, TreeProps } from './interface';
 import './style/index.less';
 type DropState = {
-    key: string | number;
+    uid: string;
     position: DragPosition;
 } | null;
 export declare const TreeContext: React.Context<{
@@ -12,19 +12,20 @@ export declare const TreeContext: React.Context<{
     icon?: React.ReactNode | ((props: any) => React.ReactNode);
     showLine?: boolean | undefined;
     switcherIcon?: [React.ReactNode, React.ReactNode] | undefined;
-    selectedKeys: Array<string | number>;
-    checkedKeys: Array<string | number>;
-    expandedKeys: Array<string | number>;
+    selectedUids: Set<string>;
+    checkedUids: Set<string>;
+    indeterminateUids: Set<string>;
+    expandedUids: Set<string>;
     draggable?: boolean | undefined;
-    draggingKey: string | number | null;
+    draggingUid: string | null;
     dropState: DropState;
-    onCheck: (event: ChangeEvent<HTMLInputElement>) => void;
-    onSelect: (key: string | number) => void;
-    onExpand: (key: string | number) => void;
-    onNodeDragStart: (key: string | number, e: React.DragEvent) => void;
-    onNodeDragOver: (key: string | number, e: React.DragEvent) => void;
-    onNodeDragLeave: (key: string | number, e: React.DragEvent) => void;
-    onNodeDrop: (key: string | number, e: React.DragEvent) => void;
+    onCheck: (event: ChangeEvent<HTMLInputElement>, uid: string) => void;
+    onSelect: (uid: string) => void;
+    onExpand: (uid: string) => void;
+    onNodeDragStart: (uid: string, e: React.DragEvent) => void;
+    onNodeDragOver: (uid: string, e: React.DragEvent) => void;
+    onNodeDragLeave: (uid: string, e: React.DragEvent) => void;
+    onNodeDrop: (uid: string, e: React.DragEvent) => void;
 }>;
 declare const Tree: <T extends Record<string, unknown> = any>(baseprops: TreeProps<T>) => React.JSX.Element;
 export default Tree;