@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/src/Tree/tree.tsx

@@ -5,11 +5,13 @@ import React, {
   useCallback,
   useContext,
   useMemo,
+  useRef,
+  useState,
 } from 'react';
 import { GlobalContext } from '../Config-Provider';
 import useMergedState from '../hooks/useMergedState';
 import mergeContextToProps from '../utils/mergeContextToProps';
-import type { TreeProps } from './interface';
+import type { DragPosition, TreeProps } from './interface';
 import TreeNode from './tree-node';
 import { getCheckedKeys, tree2array } from './utils/tree-tools';
 
@@ -21,6 +23,8 @@ const DEFAULTFIELDNAMES = {
   children: 'children' as const,
 };
 
+type DropState = { key: string | number; position: DragPosition } | null;
+
 export const TreeContext = createContext<{
   prefixCls?: string;
   checkable?: boolean;
@@ -31,17 +35,31 @@ export const TreeContext = createContext<{
   selectedKeys: Array<string | number>;
   checkedKeys: Array<string | number>;
   expandedKeys: Array<string | number>;
+  draggable?: boolean;
+  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;
 }>({
   showIcon: true,
   selectedKeys: [],
   checkedKeys: [],
   expandedKeys: [],
+  draggable: false,
+  draggingKey: null,
+  dropState: null,
   onCheck: () => {},
   onSelect: () => {},
   onExpand: () => {},
+  onNodeDragStart: () => {},
+  onNodeDragOver: () => {},
+  onNodeDragLeave: () => {},
+  onNodeDrop: () => {},
 });
 
 const Tree = <T extends Record<string, unknown> = any>(
@@ -70,6 +88,9 @@ const Tree = <T extends Record<string, unknown> = any>(
     icon,
     showLine,
     switcherIcon,
+    draggable,
+    allowDrop,
+    onDrop,
     onSelect,
     onCheck,
     onExpand,
@@ -198,8 +219,161 @@ const Tree = <T extends Record<string, unknown> = any>(
     [mergedExpandedKeys, itemMap, onExpand],
   );
 
+  // --- drag & drop (native HTML5) ---
+  // dataTransfer is not reliably readable during dragover, so the drag key
+  // lives in a ref as the source of truth; a state mirrors it for styling.
+  const dragKeyRef = useRef<string | number | null>(null);
+  const [draggingKey, setDraggingKey] = useState<string | number | null>(null);
+  const [dropState, setDropState] = useState<DropState>(null);
+
+  // A drop is a cycle/illegal if the target is the dragged node itself or one
+  // of its descendants. Covers before/after/inside uniformly.
+  const isIllegalMove = useCallback(
+    (dragKey: string | number, dropKey: string | number) => {
+      if (dragKey === dropKey) return true;
+      const dropNode = itemMap.get(dropKey as string);
+      return !!dropNode && dropNode.path.includes(dragKey as string);
+    },
+    [itemMap],
+  );
+
+  const resolvePosition = useCallback(
+    (rect: DOMRect, clientY: number): DragPosition => {
+      const offset = (clientY - rect.top) / rect.height;
+      if (offset < 0.25) return 'before';
+      if (offset > 0.75) return 'after';
+      return 'inside';
+    },
+    [],
+  );
+
+  const handleDragStart = useCallback(
+    (key: string | number, e: React.DragEvent) => {
+      const node = itemMap.get(key as string);
+      if (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 {
+          /* some browsers throw on setData in certain modes */
+        }
+      }
+    },
+    [itemMap],
+  );
+
+  const handleDragOver = useCallback(
+    (key: string | number, e: React.DragEvent) => {
+      const dragKey = dragKeyRef.current;
+      if (dragKey === null) return;
+      if (isIllegalMove(dragKey, key)) return;
+      const dropNode = itemMap.get(key as string);
+      if (!dropNode || dropNode.disabled) return;
+
+      const position = resolvePosition(
+        (e.currentTarget as HTMLElement).getBoundingClientRect(),
+        e.clientY,
+      );
+
+      const dragNode = itemMap.get(dragKey as string);
+      if (
+        allowDrop &&
+        dragNode &&
+        allowDrop({
+          dragNode: dragNode.original,
+          dropNode: dropNode.original,
+          position,
+        }) === false
+      ) {
+        return; // not calling preventDefault shows the "no-drop" cursor
+      }
+
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+      setDropState((prev) =>
+        prev && prev.key === key && prev.position === position
+          ? prev
+          : { key, position },
+      );
+    },
+    [itemMap, isIllegalMove, resolvePosition, allowDrop],
+  );
+
+  const handleDragLeave = useCallback(
+    // Intentionally a no-op: dragleave fires spuriously when crossing child
+    // elements. Drop state is cleared in handleDragEnd at the Tree root.
+    () => {},
+    [],
+  );
+
+  const handleDrop = useCallback(
+    (key: string | number, e: React.DragEvent) => {
+      e.preventDefault();
+      const dragKey = dragKeyRef.current;
+      if (dragKey === null) return;
+
+      const position = resolvePosition(
+        (e.currentTarget as HTMLElement).getBoundingClientRect(),
+        e.clientY,
+      );
+
+      if (isIllegalMove(dragKey, key)) return;
+      const dragNode = itemMap.get(dragKey as string);
+      const dropNode = itemMap.get(key as string);
+      if (!dragNode || !dropNode) return;
+      if (
+        allowDrop &&
+        allowDrop({
+          dragNode: dragNode.original,
+          dropNode: dropNode.original,
+          position,
+        }) === false
+      ) {
+        return;
+      }
+
+      onDrop?.({
+        dragNode: dragNode.original,
+        dropNode: dropNode.original,
+        dragKey,
+        dropKey: key,
+        position,
+        dropToGap: position !== 'inside',
+      });
+
+      // Auto-expand the target after a drop-inside so the dragged node is
+      // visible. Only effective in uncontrolled expandedKeys mode.
+      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 = useCallback(() => {
+    dragKeyRef.current = null;
+    setDraggingKey(null);
+    setDropState(null);
+  }, []);
+
   return (
-    <div className={clsx(prefixCls, className)} style={style}>
+    <div
+      className={clsx(prefixCls, className)}
+      style={style}
+      onDragEnd={handleDragEnd}
+    >
       <TreeContext.Provider
         value={{
           prefixCls,
@@ -211,9 +385,16 @@ const Tree = <T extends Record<string, unknown> = any>(
           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) => (

package/src/Tree/utils/tree-tools.ts

@@ -1,5 +1,112 @@
 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 function moveTreeNode<T extends Record<string, unknown>>(
+  tree: T | T[],
+  info: MoveInfo,
+  fieldNames: { key: keyof T; children: keyof T },
+): T[] {
+  if (!tree || (Array.isArray(tree) && tree.length === 0)) return [];
+
+  const { key: K, children: C } = fieldNames;
+  const { dragKey, dropKey, position } = info;
+  const root = Array.isArray(tree) ? tree : [tree];
+
+  // Phase 1: detach the drag node subtree (immutably).
+  // Returns the rebuilt array (without the drag node) plus the detached node.
+  const detach = (
+    nodes: T[],
+  ): { found: T | null; nodes: T[] } => {
+    let found: T | null = null;
+    const next: T[] = [];
+    for (const n of nodes) {
+      if (n[K] === dragKey) {
+        found = n; // keep the original subtree reference intact
+        continue;
+      }
+      const kids = n[C] as T[] | undefined;
+      if (Array.isArray(kids)) {
+        const r = detach(kids);
+        if (r.found) {
+          found = r.found;
+          next.push({ ...n, [C]: r.nodes });
+        } else {
+          next.push(n); // unchanged branch: reuse original ref
+        }
+      } else {
+        next.push(n);
+      }
+    }
+    return { found, nodes: next };
+  };
+
+  const { found: dragNode, nodes: withoutDrag } = detach(root);
+  if (!dragNode) return root; // dragKey not found: no-op
+
+  // Phase 2: insert per position into the tree that no longer contains the drag node.
+  // Note: do NOT short-circuit with an early return once inserted — siblings that
+  // follow the matched subtree must still be copied (by reference) or they'd be lost.
+  const insert = (nodes: T[]): { inserted: boolean; nodes: T[] } => {
+    const next: T[] = [];
+    let inserted = false;
+    for (const n of nodes) {
+      if (!inserted && position === 'inside' && n[K] === dropKey) {
+        const oldKids = (Array.isArray(n[C]) ? n[C] : []) as T[];
+        next.push({ ...n, [C]: [...oldKids, dragNode] });
+        inserted = true;
+        continue;
+      }
+      if (!inserted && position === 'before' && n[K] === dropKey) {
+        next.push(dragNode, n);
+        inserted = true;
+        continue;
+      }
+      if (!inserted && position === 'after' && n[K] === dropKey) {
+        next.push(n, dragNode);
+        inserted = true;
+        continue;
+      }
+      const kids = n[C] as T[] | undefined;
+      if (inserted || !Array.isArray(kids)) {
+        // Already inserted, or a leaf with no subtree to search: keep by ref.
+        next.push(n);
+      } else {
+        const r = insert(kids);
+        if (r.inserted) {
+          next.push({ ...n, [C]: r.nodes });
+          inserted = true;
+        } else {
+          next.push(n);
+        }
+      }
+    }
+    return { inserted, nodes: next };
+  };
+
+  const { inserted, nodes: result } = insert(withoutDrag);
+  // If the drop target wasn't found, nothing should change — return the
+  // original (drag node stays put) rather than silently dropping it.
+  return inserted ? result : root;
+}
+
 export function getChildKeys<T extends Record<string, unknown>>(
   data: T,
   fieldNames: {

package/src/Trigger/style/index.less

@@ -8,6 +8,23 @@
     display: none;
   }
 
+  &-arrow {
+    &::after {
+      position: absolute;
+      bottom: 0;
+      z-index: 0;
+      width: var(--yee-popup-arrow-width);
+      height: var(--yee-popup-arrow-height);
+      margin: auto;
+      border-radius: var(--yee-popup-arrow-border-radius);
+      box-shadow: var(--yee-box-shadow-popover-arrow);
+      transform: translateY(var(--yee-popup-arrow-translate-y))
+        rotate(var(--yee-popup-arrow-rotate));
+      content: '';
+      inset-inline: 0;
+    }
+  }
+
   &-topLeft,
   &-top,
   &-topRight {

package/src/Trigger/trigger.tsx

@@ -26,6 +26,7 @@ const Trigger: FC<TriggerProps> = (baseprops) => {
     mouseLeaveDelay = 0.2,
     arrow,
     forceRender = false,
+    popupStyle,
     onOpenChange,
     zIndex,
     ...rest
@@ -130,6 +131,7 @@ const Trigger: FC<TriggerProps> = (baseprops) => {
       onOpenChange?.(false);
     }
   };
+
   return (
     <RcTrigger
       {...rest}
@@ -156,7 +158,7 @@ const Trigger: FC<TriggerProps> = (baseprops) => {
         motionAppear: true,
         motionEnter: true,
       }}
-      popupStyle={{ pointerEvents: 'auto' }}
+      popupStyle={{ pointerEvents: 'auto', ...popupStyle }}
       {...(zIndex !== undefined ? { zIndex } : {})}
       getPopupClassNameFromAlign={getPopupClassNameFromAlign}
       onOpenChange={handlePopupOpenChange}

package/src/style/size.css

@@ -8,10 +8,17 @@
   --yee-z-index-message: 1100; /* L6 全局反馈 */
   --yee-z-index-max: 1110; /* L7 最顶层 */
 
+  /* common size */
+  --yee-popup-arrow-width: 8px;
+  --yee-popup-arrow-height: 8px;
+  --yee-popup-border-radius: 4px;
+  --yee-popup-arrow-translate-y: 50%;
+  --yee-popup-arrow-rotate: -135deg;
+
   /* --Alert-- */
   --yee-alert-close-top: 7px;
   --yee-alert-close-right: 11px;
-  --yee-alert-icon-margin-right: 6px;
+  --yee-alert-icon-margin-right: 12px;
   --yee-alert-title-font-size: 16px;
   --yee-alert-message-font-size: 14px;
   --yee-alert-banner-padding: 8px 12px;
@@ -26,7 +33,7 @@
   --yee-anchor-static-content-padding: 8px 0;
   --yee-anchor-static-item-active-width: 2px;
   --yee-anchor-static-item-active-height: 22px;
-  --yee-anchor-vertical-line-left: 4px;
+  --yee-anchor-vertical-line-left: 0;
   --yee-anchor-horizontal-item-padding: 6px 12px;
   --yee-anchor-nav-arrow-left: -8px;
   --yee-anchor-nav-arrow-height: 80px;
@@ -376,6 +383,8 @@
   --yee-popover-header-font-weight: 500;
   --yee-popover-header-font-size: 16px;
   --yee-popover-header-line-height: 24px;
+  --yee-popover-arrow-width: var(--yee-popup-arrow-width);
+  --yee-popover-arrow-height: var(--yee-popup-arrow-height);
 
   /* --Progress-- */
   --yee-progress-text-width: 48px;
@@ -768,8 +777,8 @@
   --yee-tooltip-z-index: var(--yee-z-index-tooltip);
   --yee-tooltip-padding: 8px 12px;
   --yee-tooltip-border-radius: 4px;
-  --yee-tooltip-arrow-width: 8px;
-  --yee-tooltip-arrow-height: 8px;
+  --yee-tooltip-arrow-width: var(--yee-popup-arrow-width);
+  --yee-tooltip-arrow-height: var(--yee-popup-arrow-height);
   --yee-tooltip-arrow-border-radius: 0 0 2px 0;
   --yee-tooltip-arrow-translate-y: 50%;
   --yee-tooltip-arrow-rotate: -135deg;

package/src/utils/debounce.ts

@@ -1,4 +1,13 @@
-function debounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
+type AnyFn = (...args: any[]) => any;
+
+export type Debounced<T extends AnyFn> = ((
+  ...args: Parameters<T>
+) => void) & {
+  /** Cancel any pending invocation. */
+  cancel: () => void;
+};
+
+function debounce<T extends AnyFn>(fn: T, delay: number): Debounced<T> {
   if (typeof fn !== 'function') {
     throw new Error('Expected fn to be a function');
   }
@@ -7,15 +16,25 @@ function debounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
   }
 
   let timer: ReturnType<typeof setTimeout> | undefined = undefined;
-  return function (...args: Parameters<T>) {
+
+  const debounced = function (this: unknown, ...args: Parameters<T>) {
     if (timer !== undefined) {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      // @ts-ignore
+      timer = undefined;
       fn.apply(this, args);
     }, delay);
+  } as Debounced<T>;
+
+  debounced.cancel = () => {
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
   };
+
+  return debounced;
 }
 
 export default debounce;

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.1.0";
+export const version = "0.2.0";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;