@rainbow-oh/yee-c 0.6.4 → 0.7.0

package/dist/esm/Table/interface.d.ts

@@ -498,7 +498,7 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
     /**
      * Row class name, unlike classNames, this prop can be set dynamically via a function
      */
-    rowClassName?: (record: object) => string | undefined;
+    rowClassName?: (record: Record<string, any>) => string | undefined;
     /**
      * Row style, unlike styles, this prop can be set dynamically via a function
      */

package/dist/esm/Tree/demo/draggable.js

@@ -53,6 +53,8 @@ export default (function () {
         return moveTreeNode(prev, {
           dragKey: info.dragKey,
           dropKey: info.dropKey,
+          dragPath: info.dragPath,
+          dropPath: info.dropPath,
           position: info.position
         }, FIELD_NAMES);
       });

package/dist/esm/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/esm/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/esm/Tree/tree-node.js

@@ -11,11 +11,11 @@ import Checkbox from "../Checkbox";
 import { TreeContext } from "./tree";
 import "./style/index.less";
 var Node = function Node(props) {
-  var node = props.node;
-  var key = node.key,
+  var node = props.node,
+    nodeStyle = props.style;
+  var uid = node.uid,
     isLeaf = node.isLeaf,
     isLast = node.isLast,
-    path = node.path,
     label = node.label,
     title = node.title,
     disabled = node.disabled,
@@ -29,12 +29,13 @@ var Node = function Node(props) {
     showIcon = _useContext.showIcon,
     contextIcon = _useContext.icon,
     showLine = _useContext.showLine,
-    selectedKeys = _useContext.selectedKeys,
-    checkedKeys = _useContext.checkedKeys,
-    expandedKeys = _useContext.expandedKeys,
+    selectedUids = _useContext.selectedUids,
+    checkedUids = _useContext.checkedUids,
+    indeterminateUids = _useContext.indeterminateUids,
+    expandedUids = _useContext.expandedUids,
     switcherIcon = _useContext.switcherIcon,
     draggable = _useContext.draggable,
-    draggingKey = _useContext.draggingKey,
+    draggingUid = _useContext.draggingUid,
     dropState = _useContext.dropState,
     onCheck = _useContext.onCheck,
     onSelect = _useContext.onSelect,
@@ -43,15 +44,10 @@ var Node = function Node(props) {
     onNodeDragOver = _useContext.onNodeDragOver,
     onNodeDragLeave = _useContext.onNodeDragLeave,
     onNodeDrop = _useContext.onNodeDrop;
-  var expanded = expandedKeys.includes(key);
-  var checked = checkedKeys.includes(key);
-  var selected = selectedKeys.includes(key);
-
-  // All nodes on the path must be visible for this node to display
-  var visible = path.every(function (p) {
-    return expandedKeys.includes(p);
-  });
-  if (!visible) return null;
+  var expanded = expandedUids.has(uid);
+  var checked = checkedUids.has(uid);
+  var indeterminate = indeterminateUids.has(uid);
+  var selected = selectedUids.has(uid);
   var renderExpandedIcon = function renderExpandedIcon() {
     var expandedIcon = switcherIcon ? switcherIcon[0] : /*#__PURE__*/React.createElement(ChevronDown, {
       strokeWidth: 1
@@ -69,7 +65,7 @@ var Node = function Node(props) {
       type: "text",
       icon: expanded ? expandedIcon : collapseIcon,
       onClick: function onClick() {
-        return onExpand(key);
+        return onExpand(uid);
       }
     }));
   };
@@ -78,9 +74,12 @@ var Node = function Node(props) {
     return /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-node-checkbox")
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      value: key,
+      value: uid,
       checked: checked,
-      onChange: onCheck
+      indeterminate: indeterminate,
+      onChange: function onChange(e) {
+        return onCheck(e, uid);
+      }
     }));
   };
   var renderLabel = function renderLabel() {
@@ -94,13 +93,11 @@ var Node = function Node(props) {
       title: _title,
       icon: showIcon ? _icon : undefined,
       onClick: disabled ? undefined : function () {
-        return onSelect(key);
+        return onSelect(uid);
       }
     }, label);
   };
   var renderEmptyNodes = function renderEmptyNodes(depth) {
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-
     var temp = new Array(depth).fill(0);
     if (showLine) {
       return temp.map(function (_, index) {
@@ -118,28 +115,26 @@ var Node = function Node(props) {
       });
     });
   };
-  var isDropTarget = (dropState === null || dropState === void 0 ? void 0 : dropState.key) === key;
+  var isDropTarget = (dropState === null || dropState === void 0 ? void 0 : dropState.uid) === uid;
   var dropPosition = isDropTarget ? dropState.position : null;
   var dragProps = draggable && !disabled ? {
     draggable: true,
     onDragStart: function onDragStart(e) {
-      return onNodeDragStart(key, e);
+      return onNodeDragStart(uid, e);
     },
     onDragOver: function onDragOver(e) {
-      return onNodeDragOver(key, e);
+      return onNodeDragOver(uid, e);
     },
     onDragLeave: function onDragLeave(e) {
-      return onNodeDragLeave(key, e);
+      return onNodeDragLeave(uid, e);
     },
     onDrop: function onDrop(e) {
-      return onNodeDrop(key, e);
+      return onNodeDrop(uid, e);
     }
   } : {};
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: clsx("".concat(prefixCls, "-node"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-node-with-line"), showLine), "".concat(prefixCls, "-leaf-node"), isLeaf), "".concat(prefixCls, "-last-node"), isLast), "".concat(prefixCls, "-node-dragging"), draggingKey === key), "".concat(prefixCls, "-node-drag-over-before"), dropPosition === 'before'), "".concat(prefixCls, "-node-drag-over-after"), dropPosition === 'after'), "".concat(prefixCls, "-node-drag-over-inside"), dropPosition === 'inside'))
-    // style={{
-    //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
-    // }}
+    className: clsx("".concat(prefixCls, "-node"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-node-with-line"), showLine), "".concat(prefixCls, "-leaf-node"), isLeaf), "".concat(prefixCls, "-last-node"), isLast), "".concat(prefixCls, "-node-dragging"), draggingUid === uid), "".concat(prefixCls, "-node-drag-over-before"), dropPosition === 'before'), "".concat(prefixCls, "-node-drag-over-after"), dropPosition === 'after'), "".concat(prefixCls, "-node-drag-over-inside"), dropPosition === 'inside')),
+    style: nodeStyle
   }, dragProps), renderEmptyNodes(depth), renderExpandedIcon(), renderCheckbox(), renderLabel());
 };
 export default Node;

package/dist/esm/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;