@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/src/Tree/interface.ts

@@ -1,5 +1,9 @@
 export type SemanticType = '';
 
+export type DragPosition = 'before' | 'after' | 'inside';
+
+export type { MoveInfo } from './utils/tree-tools';
+
 export type TreeNode<T> = {
   /**
    * uid
@@ -104,6 +108,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/src/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/src/Tree/tree-node.tsx

@@ -35,9 +35,16 @@ const Node = <T extends Record<string, unknown> = any>(
     checkedKeys,
     expandedKeys,
     switcherIcon,
+    draggable,
+    draggingKey,
+    dropState,
     onCheck,
     onSelect,
     onExpand,
+    onNodeDragStart,
+    onNodeDragOver,
+    onNodeDragLeave,
+    onNodeDrop,
   } = useContext(TreeContext);
 
   const expanded = expandedKeys.includes(key);
@@ -138,16 +145,35 @@ const Node = <T extends Record<string, unknown> = any>(
     ));
   };
 
+  const isDropTarget = dropState?.key === key;
+  const dropPosition = isDropTarget ? dropState.position : null;
+
+  const dragProps =
+    draggable && !disabled
+      ? {
+          draggable: true as const,
+          onDragStart: (e: React.DragEvent) => onNodeDragStart(key, e),
+          onDragOver: (e: React.DragEvent) => onNodeDragOver(key, e),
+          onDragLeave: (e: React.DragEvent) => onNodeDragLeave(key, e),
+          onDrop: (e: React.DragEvent) => onNodeDrop(key, e),
+        }
+      : {};
+
   return (
     <div
       className={clsx(`${prefixCls}-node`, {
         [`${prefixCls}-node-with-line`]: showLine,
         [`${prefixCls}-leaf-node`]: isLeaf,
         [`${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',
       })}
       // style={{
       //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
       // }}
+      {...dragProps}
     >
       {renderEmptyNodes(depth)}
       {renderExpandedIcon()}

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/index.ts

@@ -53,6 +53,9 @@ export * from './Radio';
 export { default as Radio } from './Radio';
 export * from './Select';
 export { default as Select } from './Select';
+
+export * from './Segmented';
+export { default as Segmented } from './Segmented';
 export * from './Skeleton';
 export { default as Skeleton } from './Skeleton';
 export * from './Space';
@@ -99,6 +102,9 @@ export { default as Steps } from './Steps';
 export * from './Tooltip';
 export { default as Tooltip } from './Tooltip';
 
+export * from './Tour';
+export { default as Tour } from './Tour';
+
 export * from './Table';
 export { default as Table } from './Table';
 

package/src/locale/interface.ts

@@ -109,6 +109,14 @@ export interface LocaleForm {
   defaultValidateMessage?: string; // "Invalid format"
 }
 
+// Tour component
+export interface LocaleTour {
+  previous: string; // "Previous"
+  next: string; // "Next"
+  finish: string; // "Finish"
+  skip: string; // "Skip"
+}
+
 export interface Locale {
   locale: string;
   global: LocaleGlobal;
@@ -125,6 +133,7 @@ export interface Locale {
   popconfirm: LocalePopconfirm;
   qrcode: LocaleQRCode;
   form: LocaleForm;
+  tour: LocaleTour;
 }
 
 // ============ Translation key type inference ============

package/src/locale/lang/en_US.ts

@@ -116,6 +116,13 @@ const locale: Locale = {
     cancelText: 'Cancel',
   },
 
+  tour: {
+    previous: 'Previous',
+    next: 'Next',
+    finish: 'Finish',
+    skip: 'Skip',
+  },
+
   popconfirm: {
     okText: 'OK',
     cancelText: 'Cancel',

package/src/locale/lang/ja_JP.ts

@@ -117,6 +117,13 @@ const locale: Locale = {
     cancelText: 'キャンセル',
   },
 
+  tour: {
+    previous: '前へ',
+    next: '次へ',
+    finish: '完了',
+    skip: 'スキップ',
+  },
+
   popconfirm: {
     okText: 'OK',
     cancelText: 'キャンセル',

package/src/locale/lang/zh_CN.ts

@@ -107,6 +107,13 @@ const locale: Locale = {
     cancelText: '取消',
   },
 
+  tour: {
+    previous: '上一步',
+    next: '下一步',
+    finish: '完成',
+    skip: '跳过',
+  },
+
   popconfirm: {
     okText: '确定',
     cancelText: '取消',

package/src/locale/lang/zh_TW.ts

@@ -107,6 +107,13 @@ const locale: Locale = {
     cancelText: '取消',
   },
 
+  tour: {
+    previous: '上一步',
+    next: '下一步',
+    finish: '完成',
+    skip: '跳過',
+  },
+
   popconfirm: {
     okText: '確定',
     cancelText: '取消',

package/src/style/color.blue.css

@@ -30,7 +30,7 @@
   --yee-text-color-description: #7c7c7c;
   --yee-text-color-disabled: #bfbfbf;
   --yee-text-color-highlight: #f58220;
-  --yee-text-color-auxiliary: #bfbfbf;
+  --yee-text-color-auxiliary: #f5f5f5;
   --yee-color-split: #e7e7e7;
   --yee-border-color: #cbd6e2;
   --yee-border-color-hover-focus: #75b9f0;

package/src/style/color.crimson.css

@@ -30,7 +30,7 @@
   --yee-text-color-description: #8d8d8d;
   --yee-text-color-disabled: #bfbfbf;
   --yee-text-color-highlight: #bc463e;
-  --yee-text-color-auxiliary: #bfbfbf;
+  --yee-text-color-auxiliary: #f5f5f5;
   --yee-color-split: #eeeeee;
   --yee-border-color: #cccccc;
   --yee-border-color-hover-focus: #7aadc2;