react-extjs 0.0.1

package/src/components/dnd/Reorderer.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { DragZone } from './DragZone';
+import { DropZone } from './DropZone';
+
+/**
+ * Reorderer —— 保真复刻 Ext.ux.Reorderer（UX：通用列表重排）。
+ *
+ * Reorderer 把「DragZone + DropZone + 插入指示线 + 状态管理」封装为一个开箱
+ * 即用的可重排列表组件：传入 items 与 renderItem，组件内部维护顺序状态，
+ * 拖拽时显示插入指示线，松手后按索引重排并回调 onChange。等价于 Ext 示例中
+ * 给一个容器挂上 Reorderer 后即可上下拖拽排序。
+ *
+ * 底层复用 DragZone / DropZone（即 DndManager 引擎），不重复实现拖放内核。
+ */
+export interface ReordererProps<T> {
+  /** 受控项列表（顺序即视觉顺序） */
+  items: T[];
+  /** 取每项唯一 key（等价 Reorderer 的 itemId） */
+  getKey: (item: T) => string;
+  /** 渲染每项内容 */
+  renderItem: (item: T) => React.ReactNode;
+  ddGroup?: string;
+  className?: string;
+  itemClassName?: string;
+  /** 重排后回调（内部顺序已更新时调用） */
+  onChange?: (items: T[]) => void;
+}
+
+export function Reorderer<T>(props: ReordererProps<T>): React.ReactElement {
+  const [order, setOrder] = useState<T[]>(props.items);
+  const itemsRef = useRef(props.items);
+  itemsRef.current = props.items;
+
+  // 受控同步：外部 items 变化时跟随（但若内部正在拖拽则以后者为准）
+  useEffect(() => {
+    setOrder(props.items);
+  }, [props.items]);
+
+  const itemIds = order.map((i) => props.getKey(i));
+
+  const onDropItem = (data: any, index: number) => {
+    const key = data?.item?.id as string | undefined;
+    if (!key) return;
+    const next = [...order];
+    const from = next.findIndex((i) => props.getKey(i) === key);
+    if (from === -1) return;
+    const [moved] = next.splice(from, 1);
+    let to = index;
+    if (from < index) to = index - 1;
+    next.splice(to, 0, moved);
+    setOrder(next);
+    props.onChange?.(next);
+  };
+
+  return (
+    <DropZone
+      ddGroup={props.ddGroup ?? 'reorder'}
+      className={props.className}
+      overClass="x-dd-drop-over"
+      itemIds={itemIds}
+      onDropItem={onDropItem}
+    >
+      <DragZone
+        ddGroup={props.ddGroup ?? 'reorder'}
+        items={order.map((i) => ({ id: props.getKey(i), content: props.renderItem(i) }))}
+        getDragData={(it) => ({
+          item: { id: it.id, value: order.find((x) => props.getKey(x) === it.id) },
+        })}
+        itemClassName={props.itemClassName}
+      />
+    </DropZone>
+  );
+}

package/src/components/dnd/ToolbarReorderer.tsx

@@ -0,0 +1,226 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, type ButtonProps } from '../Button';
+import { Toolbar, type ToolbarAlign, type ToolbarItem } from '../Toolbar';
+import { Draggable } from './DragSource';
+import { dndManager, useDndState, type DropTargetReg } from './DndContext';
+
+/**
+ * ToolbarReorderer —— 保真复刻 Ext.ux.ToolbarReorderer + Ext.ux.ToolbarDroppable
+ * （examples/ux/ToolbarReorderer.js、ToolbarDroppable.js）。
+ *
+ * 对应 Ext 官方 canonical 示例 `toolbar-ds.html`：同一工具栏同时挂两个插件——
+ *  1) ToolbarReorderer：工具栏内每个按钮（reorderable !== false）变拖拽源，
+ *     水平拖拽时按指针 X 与各按钮中点比较，越过中点即实时换位（等价原 onMovedLeft/Right）。
+ *  2) ToolbarDroppable：工具栏作为一个 DropTarget，从外部 palette 拖入的项经
+ *     createItem(data) 转换为工具栏按钮，按落点 X 算插入位（等价 calculateEntryIndex）。
+ *
+ * 与 Ext 的差异（React 化）：
+ *  - Ext 用 Ext.dd.DD 直接移动真实按钮节点并动画归位；这里复刻为「拖出 ghost + 落点
+ *    插入指示线 + 松手改数组」的受控模式，与本项目 Portal/Reorderer 一致。
+ *  - 横向插入位置由 useDndState() 暴露的 proxy x 实时计算（等价 calculateEntryIndex）。
+ */
+
+let TB_SEQ = 0;
+
+export interface ToolbarReorderItem {
+  /** 稳定 id，用于重排定位 */
+  id: string;
+  /** 按钮配置（透传给 Ext.Button 保真组件） */
+  config: ButtonProps;
+  /** 是否可重排，默认 true；false 的按钮固定不可拖（等价 reorderable:false） */
+  reorderable?: boolean;
+}
+
+export interface ToolbarReordererProps {
+  /** 初始按钮集合（仅作为种子，运行时重排/拖入均为内部状态） */
+  items: ToolbarReorderItem[];
+  /** 拖放组（内部重排与外部 palette 拖入共用，需同组才能交互） */
+  ddGroup?: string;
+  buttonAlign?: ToolbarAlign;
+  width?: number | string;
+  className?: string;
+  /** 测试 id，挂在根容器上 */
+  testId?: string;
+  /**
+   * 接收外部（如 palette）拖入时把拖拽数据转换为工具栏项。
+   * 不提供则拒绝外部拖入（仅保留内部重排能力，等价单独的 ToolbarReorderer）。
+   */
+  createItem?: (data: any) => ToolbarReorderItem;
+  /** 内部重排完成后回调，参数为最新顺序的 items */
+  onReordered?: (items: ToolbarReorderItem[]) => void;
+  /** 外部项拖入后回调，参数为新项与插入索引 */
+  onItemDropped?: (item: ToolbarReorderItem, index: number) => void;
+}
+
+/** 按指针 X 与各 [data-tool-id] 单元格中点比较，计算插入索引（等价 calculateEntryIndex） */
+function computeIndex(container: HTMLElement | null, px: number): number {
+  if (!container) return 0;
+  const cells = Array.from(
+    container.querySelectorAll<HTMLElement>('[data-tool-id]'),
+  );
+  for (let i = 0; i < cells.length; i++) {
+    const r = cells[i].getBoundingClientRect();
+    if (px < r.left + r.width / 2) return i;
+  }
+  return cells.length;
+}
+
+/** 竖向插入指示线（等价 Ext 的插入指示，方向改为横向工具栏） */
+const ToolbarIndicator: React.FC<{
+  containerRef: React.RefObject<HTMLDivElement>;
+  index: number;
+}> = ({ containerRef, index }) => {
+  const [style, setStyle] = useState<React.CSSProperties>({});
+  useEffect(() => {
+    const c = containerRef.current;
+    if (!c) return;
+    const cr = c.getBoundingClientRect();
+    const cells = Array.from(
+      c.querySelectorAll<HTMLElement>('[data-tool-id]'),
+    );
+    let left: number;
+    if (cells.length === 0) left = 8;
+    else if (index >= cells.length) {
+      const r = cells[cells.length - 1].getBoundingClientRect();
+      left = r.right - cr.left;
+    } else {
+      const r = cells[index].getBoundingClientRect();
+      left = r.left - cr.left;
+    }
+    setStyle({ left, top: 4, height: Math.max(12, cr.height - 8) });
+  }, [index, containerRef]);
+  return <div className="x-toolbar-reorder-indicator" style={style} />;
+};
+
+export const ToolbarReorderer: React.FC<ToolbarReordererProps> = (props) => {
+  const {
+    items,
+    ddGroup = 'toolbar',
+    buttonAlign = 'left',
+    width,
+    className,
+    testId,
+    createItem,
+    onReordered,
+    onItemDropped,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const toolbarId = useRef(`tbrt-${(TB_SEQ += 1)}`).current;
+
+  // 内部项状态（种子来自 props，运行期重排/拖入均改此状态）
+  const [list, setList] = useState<ToolbarReorderItem[]>(() => items.slice());
+  const listRef = useRef(list);
+  listRef.current = list;
+
+  // 回调 ref，避免注册闭包过期
+  const onReorderedRef = useRef(onReordered);
+  onReorderedRef.current = onReordered;
+  const onItemDroppedRef = useRef(onItemDropped);
+  onItemDroppedRef.current = onItemDropped;
+
+  const dnd = useDndState();
+  const [insertIndex, setInsertIndex] = useState<number | null>(null);
+
+  // 拖拽悬停本工具栏时，实时计算横向插入位置
+  useEffect(() => {
+    if (dnd.overId === toolbarId && dnd.visible && containerRef.current) {
+      setInsertIndex(computeIndex(containerRef.current, dnd.x + 12));
+    } else {
+      setInsertIndex(null);
+    }
+  }, [dnd.overId, dnd.x, dnd.visible, toolbarId]);
+
+  // 手动注册 DropTarget，掌控 overId 匹配与 onDrop 逻辑（等价 ToolbarDroppable.createDropTarget）
+  const dropRef = useRef<(data: any, e: PointerEvent) => boolean>(() => false);
+  dropRef.current = (data, e) => {
+    const c = containerRef.current;
+    if (!c) return false;
+    const idx = computeIndex(c, e.clientX);
+    const prev = listRef.current;
+
+    // 内部重排：拖拽数据为 { __reorderId }
+    if (data && data.__reorderId) {
+      const from = prev.findIndex((x) => x.id === data.__reorderId);
+      if (from < 0) return false;
+      const next = prev.slice();
+      const [m] = next.splice(from, 1);
+      const to = idx > from ? idx - 1 : idx;
+      next.splice(to, 0, m);
+      listRef.current = next;
+      setList(next);
+      onReorderedRef.current?.(next);
+      return true;
+    }
+
+    // 外部拖入：经 createItem 转换为工具栏按钮
+    if (createItem) {
+      const ni = createItem(data);
+      if (!ni.id) ni.id = `tbi-${(TB_SEQ += 1)}`;
+      const next = prev.slice();
+      next.splice(idx, 0, ni);
+      listRef.current = next;
+      setList(next);
+      onItemDroppedRef.current?.(ni, idx);
+      return true;
+    }
+
+    return false;
+  };
+
+  useEffect(() => {
+    const reg: DropTargetReg = {
+      id: toolbarId,
+      groups: [ddGroup],
+      el: containerRef.current as HTMLElement,
+      validate: () => true,
+      onDrop: (data, e) => dropRef.current(data, e),
+    };
+    dndManager.registerDrop(reg);
+    return () => dndManager.unregisterDrop(toolbarId);
+  }, [toolbarId, ddGroup]);
+
+  // 把内部项渲染为工具栏项：可重排项包 Draggable，否则直接 Button
+  const toolbarItems: ToolbarItem[] = useMemo(
+    () =>
+      list.map((it) => {
+        const btn = <Button {...it.config} />;
+        if (it.reorderable === false) return btn;
+        return (
+          <Draggable
+            ddGroup={ddGroup}
+            getDragData={() => ({ __reorderId: it.id })}
+            renderGhost={() => <Button {...it.config} />}
+          >
+            {btn}
+          </Draggable>
+        );
+      }),
+    [list, ddGroup],
+  );
+
+  const over = dnd.overId === toolbarId;
+  const rootCls = [
+    'x-toolbar-reorderer',
+    over ? 'x-toolbar-drop-over' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      ref={containerRef}
+      className={rootCls}
+      data-testid={testId}
+      style={{ position: 'relative' }}
+    >
+      <Toolbar items={toolbarItems} buttonAlign={buttonAlign} width={width} />
+      {insertIndex !== null && (
+        <ToolbarIndicator containerRef={containerRef} index={insertIndex} />
+      )}
+    </div>
+  );
+};
+
+export default ToolbarReorderer;