@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/dist/cjs/Tree/demo/checkable.js

@@ -39,29 +39,29 @@ var checkable_default = () => {
   const treeData = [
     {
       label: "parent 1",
-      key: "0-0",
+      key: 1,
       children: [
         {
           label: "parent 1-0",
-          key: "0-0-0",
+          key: 10,
           children: [
             {
               label: "leaf",
-              key: "0-0-0-0"
+              key: 100
             },
             {
               label: "leaf",
-              key: "0-0-0-1"
+              key: 101
             }
           ]
         },
         {
           label: "parent 1-1",
-          key: "0-0-1",
+          key: 20,
           children: [
             {
               label: "leaf",
-              key: "0-0-1-0"
+              key: 201
             }
           ]
         }

package/dist/cjs/Tree/demo/draggable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

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

@@ -0,0 +1,88 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tree/demo/draggable.tsx
+var draggable_exports = {};
+__export(draggable_exports, {
+  default: () => draggable_default
+});
+module.exports = __toCommonJS(draggable_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var FIELD_NAMES = {
+  key: "key",
+  label: "label",
+  children: "children"
+};
+var draggable_default = () => {
+  const [data, setData] = (0, import_react.useState)([
+    {
+      label: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          label: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { label: "leaf-1", key: "0-0-0-0" },
+            { label: "leaf-2", key: "0-0-0-1" }
+          ]
+        },
+        {
+          label: "parent 1-1",
+          key: "0-0-1",
+          children: [{ label: "leaf-3", key: "0-0-1-0" }]
+        }
+      ]
+    },
+    {
+      label: "parent 2",
+      key: "0-1",
+      children: [{ label: "leaf-4", key: "0-1-0" }]
+    }
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Tree,
+    {
+      draggable: true,
+      defaultExpandAll: true,
+      dataSource: data,
+      onDrop: (info) => setData(
+        (prev) => (0, import_yee_c.moveTreeNode)(
+          prev,
+          {
+            dragKey: info.dragKey,
+            dropKey: info.dropKey,
+            position: info.position
+          },
+          FIELD_NAMES
+        )
+      )
+    }
+  );
+};

package/dist/cjs/Tree/demo/expanded.js

@@ -38,29 +38,29 @@ var expanded_default = () => {
   const [expandedKeys, setExpandedKeys] = (0, import_react.useState)(["0-0", "0-0-0"]);
   const treeData = [
     {
-      title: "parent 1",
+      label: "parent 1",
       key: "0-0",
       children: [
         {
-          title: "parent 1-0",
+          label: "parent 1-0",
           key: "0-0-0",
           children: [
             {
-              title: "leaf",
+              label: "leaf",
               key: "0-0-0-0"
             },
             {
-              title: "leaf",
+              label: "leaf",
               key: "0-0-0-1"
             }
           ]
         },
         {
-          title: "parent 1-1",
+          label: "parent 1-1",
           key: "0-0-1",
           children: [
             {
-              title: "leaf",
+              label: "leaf",
               key: "0-0-1-0"
             }
           ]

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

@@ -1,3 +1,4 @@
 import Tree from './tree';
 export type { TreeProps } from './interface';
+export { moveTreeNode } from './utils/tree-tools';
 export default Tree;

package/dist/cjs/Tree/index.js

@@ -29,8 +29,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Tree/index.ts
 var Tree_exports = {};
 __export(Tree_exports, {
-  default: () => Tree_default
+  default: () => Tree_default,
+  moveTreeNode: () => import_tree_tools.moveTreeNode
 });
 module.exports = __toCommonJS(Tree_exports);
 var import_tree = __toESM(require("./tree"));
+var import_tree_tools = require("./utils/tree-tools");
 var Tree_default = import_tree.default;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export type SemanticType = '';
+export type DragPosition = 'before' | 'after' | 'inside';
+export type { MoveInfo } from './utils/tree-tools';
 export type TreeNode<T> = {
     /**
      * uid
@@ -102,6 +104,30 @@ export interface TreeProps<T> {
      * Whether to allow dragging
      */
     draggable?: boolean;
+    /**
+     * Whether to allow dropping a dragged node at the given position.
+     * Return false to forbid the drop (cursor shows "no-drop").
+     */
+    allowDrop?: (info: {
+        dragNode: T;
+        dropNode: T;
+        position: DragPosition;
+    }) => boolean;
+    /**
+     * Callback after a node is dropped. Pure controlled: the Tree does not
+     * mutate dataSource — reorder it yourself (e.g. with `moveTreeNode`).
+     */
+    onDrop?: (info: {
+        /** Original data of the dragged node */
+        dragNode: T;
+        /** Original data of the target node */
+        dropNode: T;
+        dragKey: string | number;
+        dropKey: string | number;
+        position: DragPosition;
+        /** Convenience flag: true when position is 'before' or 'after' */
+        dropToGap: boolean;
+    }) => void;
     /**
      * Whether to show connecting lines
      */

package/dist/cjs/Tree/style/index.less

@@ -2,11 +2,36 @@
 
 @{pls} {
   &-node {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: var(--yee-tree-node-height);
 
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
+    &-dragging {
+      opacity: 0.4;
+    }
+
+    &-drag-over-before {
+      box-shadow: inset 0 2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-after {
+      box-shadow: inset 0 -2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-inside {
+      background: color-mix(
+        in srgb,
+        var(--yee-primary-color) 12%,
+        transparent
+      );
+    }
+
     &-switcher {
       display: inline-flex;
       align-items: center;

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

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -64,9 +78,16 @@ var Node = (props) => {
     checkedKeys,
     expandedKeys,
     switcherIcon,
+    draggable,
+    draggingKey,
+    dropState,
     onCheck,
     onSelect,
-    onExpand
+    onExpand,
+    onNodeDragStart,
+    onNodeDragOver,
+    onNodeDragLeave,
+    onNodeDrop
   } = (0, import_react.useContext)(import_tree.TreeContext);
   const expanded = expandedKeys.includes(key);
   const checked = checkedKeys.includes(key);
@@ -143,15 +164,28 @@ var Node = (props) => {
       }
     ));
   };
+  const isDropTarget = (dropState == null ? void 0 : dropState.key) === key;
+  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)
+  } : {};
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
-    {
+    __spreadValues({
       className: (0, import_clsx.default)(`${prefixCls}-node`, {
         [`${prefixCls}-node-with-line`]: showLine,
         [`${prefixCls}-leaf-node`]: isLeaf,
-        [`${prefixCls}-last-node`]: isLast
+        [`${prefixCls}-last-node`]: isLast,
+        [`${prefixCls}-node-dragging`]: draggingKey === key,
+        [`${prefixCls}-node-drag-over-before`]: dropPosition === "before",
+        [`${prefixCls}-node-drag-over-after`]: dropPosition === "after",
+        [`${prefixCls}-node-drag-over-inside`]: dropPosition === "inside"
       })
-    },
+    }, dragProps),
     renderEmptyNodes(depth),
     renderExpandedIcon(),
     renderCheckbox(),

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

@@ -1,6 +1,10 @@
 import React, { ChangeEvent } from 'react';
-import type { TreeProps } from './interface';
+import type { DragPosition, TreeProps } from './interface';
 import './style/index.less';
+type DropState = {
+    key: string | number;
+    position: DragPosition;
+} | null;
 export declare const TreeContext: React.Context<{
     prefixCls?: string | undefined;
     checkable?: boolean | undefined;
@@ -11,9 +15,16 @@ export declare const TreeContext: React.Context<{
     selectedKeys: Array<string | number>;
     checkedKeys: Array<string | number>;
     expandedKeys: Array<string | number>;
+    draggable?: boolean | undefined;
+    draggingKey: string | number | 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;
 }>;
 declare const Tree: <T extends Record<string, unknown> = any>(baseprops: TreeProps<T>) => React.JSX.Element;
 export default Tree;

package/dist/cjs/Tree/tree.js

@@ -51,11 +51,22 @@ var TreeContext = (0, import_react.createContext)({
   selectedKeys: [],
   checkedKeys: [],
   expandedKeys: [],
+  draggable: false,
+  draggingKey: null,
+  dropState: null,
   onCheck: () => {
   },
   onSelect: () => {
   },
   onExpand: () => {
+  },
+  onNodeDragStart: () => {
+  },
+  onNodeDragOver: () => {
+  },
+  onNodeDragLeave: () => {
+  },
+  onNodeDrop: () => {
   }
 });
 var Tree = (baseprops) => {
@@ -80,6 +91,9 @@ var Tree = (baseprops) => {
     icon,
     showLine,
     switcherIcon,
+    draggable,
+    allowDrop,
+    onDrop,
     onSelect,
     onCheck,
     onExpand
@@ -179,25 +193,167 @@ var Tree = (baseprops) => {
     },
     [mergedExpandedKeys, itemMap, onExpand]
   );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(prefixCls, className), style }, /* @__PURE__ */ import_react.default.createElement(
-    TreeContext.Provider,
-    {
-      value: {
-        prefixCls,
-        checkable,
-        showIcon,
-        icon,
-        showLine,
-        switcherIcon,
-        selectedKeys: mergedSelectedKeys,
-        checkedKeys: mergedCheckedKeys,
-        expandedKeys: mergedExpandedKeys,
-        onCheck: handleCheck,
-        onSelect: handleSelect,
-        onExpand: handleExpand
+  const dragKeyRef = (0, import_react.useRef)(null);
+  const [draggingKey, setDraggingKey] = (0, import_react.useState)(null);
+  const [dropState, setDropState] = (0, import_react.useState)(null);
+  const isIllegalMove = (0, import_react.useCallback)(
+    (dragKey, dropKey) => {
+      if (dragKey === dropKey)
+        return true;
+      const dropNode = itemMap.get(dropKey);
+      return !!dropNode && dropNode.path.includes(dragKey);
+    },
+    [itemMap]
+  );
+  const resolvePosition = (0, import_react.useCallback)(
+    (rect, clientY) => {
+      const offset = (clientY - rect.top) / rect.height;
+      if (offset < 0.25)
+        return "before";
+      if (offset > 0.75)
+        return "after";
+      return "inside";
+    },
+    []
+  );
+  const handleDragStart = (0, import_react.useCallback)(
+    (key, e) => {
+      const node = itemMap.get(key);
+      if (node == null ? void 0 : node.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dragKeyRef.current = key;
+      setDraggingKey(key);
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+        try {
+          e.dataTransfer.setData("text/plain", String(key));
+        } catch (e2) {
+        }
+      }
+    },
+    [itemMap]
+  );
+  const handleDragOver = (0, import_react.useCallback)(
+    (key, e) => {
+      const dragKey = dragKeyRef.current;
+      if (dragKey === null)
+        return;
+      if (isIllegalMove(dragKey, key))
+        return;
+      const dropNode = itemMap.get(key);
+      if (!dropNode || dropNode.disabled)
+        return;
+      const position = resolvePosition(
+        e.currentTarget.getBoundingClientRect(),
+        e.clientY
+      );
+      const dragNode = itemMap.get(dragKey);
+      if (allowDrop && dragNode && allowDrop({
+        dragNode: dragNode.original,
+        dropNode: dropNode.original,
+        position
+      }) === false) {
+        return;
       }
+      e.preventDefault();
+      if (e.dataTransfer)
+        e.dataTransfer.dropEffect = "move";
+      setDropState(
+        (prev) => prev && prev.key === key && prev.position === position ? prev : { key, position }
+      );
     },
-    flatItems.map((node, index) => /* @__PURE__ */ import_react.default.createElement(import_tree_node.default, { node, key: node.key || index }))
-  ));
+    [itemMap, isIllegalMove, resolvePosition, allowDrop]
+  );
+  const handleDragLeave = (0, import_react.useCallback)(
+    // Intentionally a no-op: dragleave fires spuriously when crossing child
+    // elements. Drop state is cleared in handleDragEnd at the Tree root.
+    () => {
+    },
+    []
+  );
+  const handleDrop = (0, import_react.useCallback)(
+    (key, e) => {
+      e.preventDefault();
+      const dragKey = dragKeyRef.current;
+      if (dragKey === null)
+        return;
+      const position = resolvePosition(
+        e.currentTarget.getBoundingClientRect(),
+        e.clientY
+      );
+      if (isIllegalMove(dragKey, key))
+        return;
+      const dragNode = itemMap.get(dragKey);
+      const dropNode = itemMap.get(key);
+      if (!dragNode || !dropNode)
+        return;
+      if (allowDrop && allowDrop({
+        dragNode: dragNode.original,
+        dropNode: dropNode.original,
+        position
+      }) === false) {
+        return;
+      }
+      onDrop == null ? void 0 : onDrop({
+        dragNode: dragNode.original,
+        dropNode: dropNode.original,
+        dragKey,
+        dropKey: key,
+        position,
+        dropToGap: position !== "inside"
+      });
+      if (position === "inside") {
+        setMergedExpandedKeys(
+          (prev) => prev.includes(key) ? prev : [...prev, key]
+        );
+      }
+      dragKeyRef.current = null;
+      setDraggingKey(null);
+      setDropState(null);
+    },
+    [itemMap, isIllegalMove, resolvePosition, allowDrop, onDrop]
+  );
+  const handleDragEnd = (0, import_react.useCallback)(() => {
+    dragKeyRef.current = null;
+    setDraggingKey(null);
+    setDropState(null);
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(prefixCls, className),
+      style,
+      onDragEnd: handleDragEnd
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      TreeContext.Provider,
+      {
+        value: {
+          prefixCls,
+          checkable,
+          showIcon,
+          icon,
+          showLine,
+          switcherIcon,
+          selectedKeys: mergedSelectedKeys,
+          checkedKeys: mergedCheckedKeys,
+          expandedKeys: mergedExpandedKeys,
+          draggable,
+          draggingKey,
+          dropState,
+          onCheck: handleCheck,
+          onSelect: handleSelect,
+          onExpand: handleExpand,
+          onNodeDragStart: handleDragStart,
+          onNodeDragOver: handleDragOver,
+          onNodeDragLeave: handleDragLeave,
+          onNodeDrop: handleDrop
+        }
+      },
+      flatItems.map((node, index) => /* @__PURE__ */ import_react.default.createElement(import_tree_node.default, { node, key: node.key || index }))
+    )
+  );
 };
 var tree_default = Tree;

package/dist/cjs/Tree/utils/tree-tools.d.ts

@@ -1,4 +1,25 @@
 import { TreeNode } from '../interface';
+export type DragPosition = 'before' | 'after' | 'inside';
+export interface MoveInfo {
+    dragKey: string | number;
+    dropKey: string | number;
+    position: DragPosition;
+}
+/**
+ * Reorder the nested dataSource immutably after a drag.
+ *
+ * Two phases: detach the dragged subtree, then insert it at the drop target.
+ * Only the modified path gets new arrays + shallow-cloned wrappers; untouched
+ * nodes are reused by reference (data may carry non-cloneable values like
+ * React elements / functions in `icon`).
+ *
+ * Returns a brand-new root array; returns the input unchanged if dragKey is
+ * not found or drag and drop resolve to the same location.
+ */
+export declare function moveTreeNode<T extends Record<string, unknown>>(tree: T | T[], info: MoveInfo, fieldNames: {
+    key: keyof T;
+    children: keyof T;
+}): T[];
 export declare function getChildKeys<T extends Record<string, unknown>>(data: T, fieldNames: {
     key: keyof T;
     children: keyof T;