@rainbow-oh/yee-c 0.6.4 → 0.8.0

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;