react-extjs 0.0.1

package/src/components/DataViewMore.tsx

@@ -0,0 +1,337 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * DataViewMore —— 保真复刻 Ext.ux.DataView-more（examples/ux/DataView-more.js）。
+ *
+ * 该 UX 文件提供两个 DataView 增强（plugin）：
+ *  1. Ext.DataView.LabelEditor —— 内联标签编辑器：点击项内的 span.x-editable 即浮出
+ *     Ext.Editor（TextField）覆盖在原标签上（hideEl:false），回车/Esc/失焦完成编辑、写回
+ *     record 数据（onSave -> record.set(dataIndex, value)）。对齐项：
+ *       - alignment:"tl-tl"、hideEl:false、shim:false、completeOnEnter、cancelOnEsc、
+ *         labelSelector:"span.x-editable"、selectOnFocus。
+ *  2. Ext.DataView.DragSelector —— 橡皮筋框选：在容器空白处按下拖拽绘制 x-view-selector，
+ *     松手时选中与框相交的全部项（等价 Ext.dd.DragTracker 的 onDrag 命中测试）。
+ *
+ * 本项目 base DataView 已内联实现 DragSelector 行为（x-view-selector 橡皮筋 + 相交选中），
+ * 故此处 DataViewMore 直接复用同款框选逻辑，并新增 LabelEditor 这一真正缺失的能力。
+ *
+ * 保真契约（DOM/class）：
+ *  - 容器 div.x-data-view（position:relative，承载 x-view-selector 框）。
+ *  - 每个条目 div.x-view-item（x-list-selected 选中 / x-view-over 悬停标记，与 base DataView 一致；
+ *    选中态复用 Ext.ListView 的 x-list-selected，xtheme 蓝 #dfe8f6 / 灰 #f0f0f0 原生主题化）。
+ *  - 条目内可编辑标题用 span.x-editable（labelSelector），编辑时浮出
+ *    input.x-form-text.x-small-editor（cls 对齐 Ext.Editor）。
+ *  - 框选浮层 div.x-view-selector（#c3daf9 背景 + #3399bb 边框，ext-all.css 既有规则）。
+ */
+
+/* ---------------- 内联标签编辑器（Ext.DataView.LabelEditor 复刻） ---------------- */
+
+export interface DataViewLabelEditorProps {
+  /** 当前标签文本（等价 record.data[dataIndex]） */
+  value: string;
+  /** 编辑完成（回车 / 失焦）时写回，等价 onSave -> record.set(dataIndex, value) */
+  onCommit: (value: string) => void;
+  /** 等同 Ext.Editor 的 dataIndex（仅作语义标注，便于与 store 字段对应） */
+  dataIndex?: string;
+  className?: string;
+}
+
+/**
+ * 内联可编辑标签：静止时渲染 span.x-editable，点击（非 Ctrl/Shift）在其上覆盖一个输入框，
+ * 完成即写回。对齐 Ext.DataView.LabelEditor 的 mousedown + startEdit + onSave 链路。
+ */
+export const DataViewLabelEditor: React.FC<DataViewLabelEditorProps> = ({
+  value,
+  onCommit,
+  className,
+}) => {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const startEdit = useCallback(
+    (e: React.MouseEvent) => {
+      // 仅左键、无修饰键时进入编辑（对齐 onMouseDown 的 !ctrlKey && !shiftKey 守卫）
+      if (e.button !== 0 || e.ctrlKey || e.shiftKey) return;
+      e.stopPropagation();
+      e.preventDefault();
+      setDraft(value);
+      setEditing(true);
+      // 聚焦并全选（selectOnFocus:true）
+      requestAnimationFrame(() => {
+        const el = inputRef.current;
+        if (el) {
+          el.focus();
+          el.select();
+        }
+      });
+    },
+    [value],
+  );
+
+  const commit = useCallback(() => {
+    setEditing(false);
+    if (draft !== value) onCommit(draft);
+  }, [draft, value, onCommit]);
+
+  const cancel = useCallback(() => {
+    setEditing(false);
+    setDraft(value);
+  }, [value]);
+
+  return (
+    <span
+      className={['x-editable', className].filter(Boolean).join(' ')}
+      style={{ position: 'relative', display: 'inline-block' }}
+      onMouseDown={startEdit}
+    >
+      {value}
+      {editing && (
+        <input
+          ref={inputRef}
+          className="x-form-text x-small-editor x-editor"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              commit(); // completeOnEnter
+            } else if (e.key === 'Escape') {
+              e.preventDefault();
+              cancel(); // cancelOnEsc
+            }
+          }}
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            fontSize: 12,
+            zIndex: 10,
+          }}
+        />
+      )}
+    </span>
+  );
+};
+
+/* ---------------- 可编辑 DataView（DataView + more 包） ---------------- */
+
+export interface DataViewMoreItem {
+  id: string | number;
+  name: string;
+  sub?: string;
+  color?: string;
+  [key: string]: unknown;
+}
+
+export interface DataViewMoreProps {
+  data: DataViewMoreItem[];
+  /** 橡皮筋框选需 multiSelect（对齐 DragSelector 一般配合 multiSelect 使用） */
+  multiSelect?: boolean;
+  width?: number;
+  height?: number;
+  /** 标题编辑完成：等价 LabelEditor 的 onSave -> record.set(dataIndex, value) */
+  onLabelCommit?: (id: string | number, name: string) => void;
+  /** 选中变化回调（对齐 Ext DataView 的 selectionchange：fn(selectedIndexes)） */
+  onSelectionChange?: (indexes: number[]) => void;
+  emptyText?: string;
+}
+
+/**
+ * DataViewMore —— 在 base DataView 之上叠加 LabelEditor，形成「可内联重命名的图标网格」。
+ * 条目渲染卡片（色块 + span.x-editable 标题 + 副标题）；点击标题可原地改名；
+ * 在空白处拖拽可框选多个条目（DragSelector）。
+ */
+export const DataViewMore: React.FC<DataViewMoreProps> = ({
+  data,
+  multiSelect = true,
+  width,
+  height,
+  onLabelCommit,
+  onSelectionChange,
+  emptyText,
+}) => {
+  const [items, setItems] = useState<DataViewMoreItem[]>(() => data);
+  const [selectedIdx, setSelectedIdx] = useState<number[]>([]);
+  const [overIdx, setOverIdx] = useState<number | null>(null);
+  const [drag, setDrag] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragStart = useRef<{ x: number; y: number } | null>(null);
+  const itemsRef = useRef<DataViewMoreItem[]>(items);
+  itemsRef.current = items;
+  const selectedRef = useRef<number[]>(selectedIdx);
+  selectedRef.current = selectedIdx;
+
+  const commitName = useCallback(
+    (id: string | number, name: string) => {
+      setItems((prev) => prev.map((it) => (it.id === id ? { ...it, name } : it)));
+      onLabelCommit?.(id, name);
+    },
+    [onLabelCommit],
+  );
+
+  const selectSingle = useCallback(
+    (index: number, additive: boolean) => {
+      setSelectedIdx((prev) => {
+        const next = additive && multiSelect
+          ? prev.includes(index)
+            ? prev.filter((i) => i !== index)
+            : [...prev, index]
+          : [index];
+        onSelectionChange?.(next);
+        return next;
+      });
+    },
+    [multiSelect, onSelectionChange],
+  );
+
+  // 橡皮筋框选：mousedown 在容器空白（非 item / 非 editable 标签）开始
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      if (target.closest('.x-view-item')) return; // 点在条目上走 click 逻辑
+      if (!multiSelect) return;
+      const rect = containerRef.current!.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      dragStart.current = { x, y };
+      setDrag({ x, y, w: 0, h: 0 });
+      setDragActive(true);
+    },
+    [multiSelect],
+  );
+
+  // 框选进行中：window 级监听，保证在容器外松手也能完成（等价 Ext.dd.DragTracker 绑 document）
+  useEffect(() => {
+    if (!dragActive) return;
+    const onMove = (e: MouseEvent) => {
+      if (!dragStart.current) return;
+      const rect = containerRef.current!.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const { x: sx, y: sy } = dragStart.current;
+      setDrag({
+        x: Math.min(sx, x),
+        y: Math.min(sy, y),
+        w: Math.abs(x - sx),
+        h: Math.abs(y - sy),
+      });
+    };
+    const onUp = () => {
+      const d = dragStart.current;
+      const cur = drag;
+      dragStart.current = null;
+      setDragActive(false);
+      if (!d || !cur) {
+        setDrag(null);
+        return;
+      }
+      const container = containerRef.current!;
+      const cRect = container.getBoundingClientRect();
+      const selRect = { left: cur.x, top: cur.y, right: cur.x + cur.w, bottom: cur.y + cur.h };
+      const hit: number[] = [];
+      container.querySelectorAll<HTMLElement>('.x-view-item').forEach((el, i) => {
+        const r = el.getBoundingClientRect();
+        const rel = {
+          left: r.left - cRect.left,
+          top: r.top - cRect.top,
+          right: r.right - cRect.left,
+          bottom: r.bottom - cRect.top,
+        };
+        const intersects =
+          rel.right >= selRect.left && rel.left <= selRect.right &&
+          rel.bottom >= selRect.top && rel.top <= selRect.bottom;
+        if (intersects) hit.push(i);
+      });
+      setSelectedIdx((prev) => {
+        const next = multiSelect ? Array.from(new Set([...prev, ...hit])) : hit;
+        onSelectionChange?.(next);
+        return next;
+      });
+      setDrag(null);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [dragActive, drag, multiSelect, onSelectionChange]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="x-data-view"
+      style={{ position: 'relative', width, height, userSelect: 'none', overflow: 'auto' }}
+      onMouseDown={onMouseDown}
+    >
+      {items.length === 0 && emptyText != null ? (
+        <div className="x-view-empty" style={{ padding: '10px 8px', fontSize: 12 }}>
+          {emptyText}
+        </div>
+      ) : (
+        items.map((item, i) => (
+          <div
+            key={item.id}
+            className={[
+              'x-view-item',
+              selectedIdx.includes(i) ? 'x-list-selected' : '',
+              overIdx === i ? 'x-view-over' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            onClick={(e) => selectSingle(i, (e as React.MouseEvent).ctrlKey)}
+            onMouseEnter={() => setOverIdx(i)}
+            onMouseLeave={() => setOverIdx((o) => (o === i ? null : o))}
+            style={{
+              width: 120,
+              margin: 6,
+              padding: '8px 6px',
+              float: 'left',
+              textAlign: 'center',
+              borderRadius: 4,
+            }}
+          >
+            <div
+              style={{
+                width: 48,
+                height: 48,
+                margin: '0 auto 6px',
+                borderRadius: 8,
+                background: item.color,
+                border: '1px solid rgba(0,0,0,.15)',
+              }}
+            />
+            <div style={{ fontSize: 12 }}>
+              <DataViewLabelEditor value={item.name} onCommit={(v) => commitName(item.id, v)} />
+            </div>
+            {item.sub && (
+              <div style={{ fontSize: 11, marginTop: 2 }}>{item.sub}</div>
+            )}
+          </div>
+        ))
+      )}
+      {drag && (
+        <div
+          className="x-view-selector"
+          style={{
+            position: 'absolute',
+            left: drag.x,
+            top: drag.y,
+            width: drag.w,
+            height: drag.h,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+(DataViewMore as unknown as { displayName?: string }).displayName = 'DataViewMore';
+
+export default DataViewMore;

package/src/components/DataViewTransition.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+/**
+ * Ext.ux.DataViewTransition 保真复刻（来源 examples/ux/DataViewTransition.js）。
+ *
+ * 保真契约（视觉/行为对齐 Ext 插件，而非照搬其 store/tpl/plugin 体系）：
+ *  - 容器 div.x-data-view.x-data-view-transition（position:relative，承载绝对定位的条目）。
+ *  - 悬停项追加 x-view-over（对齐 Ext DataView overClass 标记，与 DataView.tsx 一致）。
+ *  - 每个条目渲染为 div.x-view-item（itemSelector 等价），以 id 为 key 稳定挂载，
+ *    绝对定位到网格坐标 (row*itemHeight, col*itemWidth)。
+ *  - 数据集合变化（增/删/重排）时：
+ *      * 仍存在的条目平滑滑动到新网格坐标（top/left CSS transition，duration 对齐 Ext 默认 750ms）；
+ *      * 被移除的条目淡出（opacity→0）后卸载；
+ *      * 新增的条目淡入（opacity 0→1）。
+ *    与 Ext 插件一致：首次渲染无动画，仅后续 datachanged 才动画。
+ *
+ * React 与 Ext 差异说明（刻意修正，不影响保真）：
+ *  - Ext 用 store + tpl + itemSelector + idProperty 维护条目身份；此处用不可变的 items 数组 +
+ *    稳定的 id 字段（idProperty 默认 'id'）表达同一语义，由 React key 维持身份。
+ *  - Ext 用 Ext.TaskMgr 逐帧插值；此处用 CSS transition 由浏览器合成，结果一致且更省。
+ */
+
+export interface TransitionItem {
+  /** 稳定唯一 id（等价 Ext idProperty，供跨渲染维持条目身份 / 动画定位） */
+  id: string;
+  /** 默认渲染文本（renderItem 未提供时展示） */
+  text?: string;
+  [key: string]: unknown;
+}
+
+export interface DataViewTransitionProps {
+  /** 数据集合（等价 Ext store 经 filter/sort 后的 records；顺序即网格从左到右、从上到下的顺序） */
+  items: TransitionItem[];
+  /** 动画时长 ms（对齐 Ext defaults.duration = 750） */
+  duration?: number;
+  /** 身份字段名（默认 'id'） */
+  idProperty?: string;
+  /** 单个条目外框宽（含 margin/gap，用于计算列数与步进；对齐 Ext itemWidth） */
+  itemWidth: number;
+  /** 单个条目外框高（含 margin/gap；对齐 Ext itemHeight） */
+  itemHeight: number;
+  /** 容器宽（px）；用于计算列数 floor(width/itemWidth) */
+  width?: number;
+  /** 容器高（px）；省略时取 rows*itemHeight 自适应 */
+  height?: number;
+  /** 自定义条目渲染（等价 Ext tpl）；缺省渲染 item.text */
+  renderItem?: (item: TransitionItem) => React.ReactNode;
+  /** 追加在容器根上的 class */
+  className?: string;
+}
+
+interface RenderEntry {
+  id: string;
+  item: TransitionItem;
+  leaving: boolean;
+}
+
+export const DataViewTransition: React.FC<DataViewTransitionProps> = ({
+  items,
+  duration = 750,
+  idProperty = 'id',
+  itemWidth,
+  itemHeight,
+  width,
+  height,
+  renderItem,
+  className = '',
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [rendered, setRendered] = useState<RenderEntry[]>(() =>
+    items.map((it) => ({ id: it[idProperty] as string, item: it, leaving: false })),
+  );
+  const [positions, setPositions] = useState<Record<string, { top: number; left: number }>>(() => {
+    const containerW = width ?? 600;
+    const cols = Math.max(1, Math.floor(containerW / itemWidth));
+    const p: Record<string, { top: number; left: number }> = {};
+    items.forEach((it, i) => {
+      const row = Math.floor(i / cols);
+      const col = i % cols;
+      p[it[idProperty] as string] = { top: row * itemHeight, left: col * itemWidth };
+    });
+    return p;
+  });
+  const [opacity, setOpacity] = useState<Record<string, number>>(() => {
+    const o: Record<string, number> = {};
+    items.forEach((it) => (o[it[idProperty] as string] = 1));
+    return o;
+  });
+  // 悬停项（对齐 Ext DataView overClass）：mouseover/out 切换 x-view-over（与 DataView.tsx 一致）。
+  const [overId, setOverId] = useState<string | null>(null);
+  // 上一帧的 items，用于 diff 出 added / removed（避免把 rendered 放进 effect 依赖引发重渲染循环）
+  const prevItemsRef = useRef<TransitionItem[]>(items);
+
+  // 计算网格坐标：列数 = floor(容器宽 / 条目宽)
+  const layout = useCallback(
+    (list: TransitionItem[]) => {
+      const containerW = width ?? containerRef.current?.clientWidth ?? 600;
+      const cols = Math.max(1, Math.floor(containerW / itemWidth));
+      const pos: Record<string, { top: number; left: number }> = {};
+      list.forEach((it, i) => {
+        const row = Math.floor(i / cols);
+        const col = i % cols;
+        pos[it[idProperty] as string] = { top: row * itemHeight, left: col * itemWidth };
+      });
+      return pos;
+    },
+    [width, itemWidth, itemHeight, idProperty],
+  );
+
+  useEffect(() => {
+    const idOf = (it: TransitionItem) => it[idProperty] as string;
+    const newIds = new Set(items.map(idOf));
+    const prevItems = prevItemsRef.current;
+    const prevIds = new Set(prevItems.map(idOf));
+    const pos = layout(items);
+
+    const staying = items.filter((it) => prevIds.has(idOf(it)));
+    const added = items.filter((it) => !prevIds.has(idOf(it)));
+    const leavingData = prevItems.filter((it) => !newIds.has(idOf(it)));
+
+    const nextRendered: RenderEntry[] = [
+      ...staying.map((it) => ({ id: idOf(it), item: it, leaving: false })),
+      ...leavingData.map((it) => ({ id: idOf(it), item: it, leaving: true })),
+      ...added.map((it) => ({ id: idOf(it), item: it, leaving: false })),
+    ];
+    setRendered(nextRendered);
+    setPositions((prev) => ({ ...prev, ...pos }));
+
+    // 保留项与新增项目标 opacity=1；移除项 opacity=0（淡出）
+    setOpacity((prev) => {
+      const o = { ...prev };
+      items.forEach((it) => (o[idOf(it)] = 1));
+      leavingData.forEach((it) => (o[idOf(it)] = 0));
+      return o;
+    });
+
+    if (added.length) {
+      // 新增项先以 opacity=0 挂载，下一帧淡入
+      setOpacity((prev) => {
+        const o = { ...prev };
+        added.forEach((it) => (o[idOf(it)] = 0));
+        return o;
+      });
+      const raf = requestAnimationFrame(() => {
+        setOpacity((prev) => {
+          const o = { ...prev };
+          added.forEach((it) => (o[idOf(it)] = 1));
+          return o;
+        });
+      });
+      leavingData.forEach((it) => scheduleRemove(idOf(it)));
+      prevItemsRef.current = items;
+      return () => cancelAnimationFrame(raf);
+    }
+
+    leavingData.forEach((it) => scheduleRemove(idOf(it)));
+    prevItemsRef.current = items;
+
+    function scheduleRemove(id: string) {
+      window.setTimeout(() => {
+        setRendered((r) => r.filter((x) => x.id !== id));
+        setOpacity((o) => {
+          const n = { ...o };
+          delete n[id];
+          return n;
+        });
+        setPositions((p) => {
+          const n = { ...p };
+          delete n[id];
+          return n;
+        });
+      }, duration);
+    }
+  }, [items, duration, idProperty, layout]);
+
+  const containerH =
+    height ??
+    Math.max(
+      1,
+      Math.ceil(
+        Math.max(rendered.length, items.length) /
+          Math.max(1, Math.floor((width ?? 600) / itemWidth)),
+      ) * itemHeight,
+    );
+
+  return (
+    <div
+      ref={containerRef}
+      className={['x-data-view', 'x-data-view-transition', className].filter(Boolean).join(' ')}
+      style={{
+        position: 'relative',
+        width,
+        height: containerH,
+        overflow: height != null ? 'auto' : 'hidden',
+      }}
+    >
+      {rendered.map((e) => {
+        const pos = positions[e.id] ?? { top: 0, left: 0 };
+        const op = opacity[e.id] ?? 1;
+        return (
+          <div
+            key={e.id}
+            className={[
+              'x-view-item',
+              e.leaving ? 'x-view-item-leaving' : '',
+              overId === e.id ? 'x-view-over' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            onMouseEnter={() => setOverId(e.id)}
+            onMouseLeave={() => setOverId((o) => (o === e.id ? null : o))}
+            style={{
+              position: 'absolute',
+              top: pos.top,
+              left: pos.left,
+              width: itemWidth,
+              height: itemHeight,
+              opacity: op,
+              transition: `top ${duration}ms ease, left ${duration}ms ease, opacity ${duration}ms ease`,
+              boxSizing: 'border-box',
+              textAlign: 'center',
+              overflow: 'hidden',
+            }}
+          >
+            {renderItem ? renderItem(e.item) : (e.item.text ?? '')}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+(DataViewTransition as unknown as { displayName?: string }).displayName = 'DataViewTransition';
+
+export default DataViewTransition;