react-extjs 0.0.1

package/src/components/CycleButton.tsx

@@ -0,0 +1,302 @@
+import React, { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Menu, type MenuItem } from './Menu';
+
+export interface CycleButtonHandle {
+  /** 追加/插入选项（index 省略则追加到末尾） */
+  addItem: (item: CycleItem, index?: number) => void;
+  /** 删除指定索引选项，激活索引自动收紧 */
+  removeItem: (index: number) => void;
+  /** 局部更新指定索引选项 */
+  updateItem: (index: number, partial: Partial<CycleItem>) => void;
+  /** 设置激活项（等价 Ext.setActiveItem） */
+  setActive: (index: number) => void;
+  /** 取当前激活索引 */
+  getActive: () => number;
+  /** 取当前选项克隆数组 */
+  getItems: () => CycleItem[];
+}
+
+export interface CycleItem {
+  text?: string;
+  iconCls?: string;
+  disabled?: boolean;
+  /** 初始选中项（仅首项生效，多个 checked 取第一个） */
+  checked?: boolean;
+}
+
+export interface CycleButtonProps {
+  /** 按钮文字（showText=false 时固定显示此文字；默认使用首选项 text 同款占位） */
+  text?: string;
+  /** True 时把当前激活项的 text（含 prependText）显示为按钮文字（等同 Ext.CycleButton.showText） */
+  showText?: boolean;
+  /** 显示在激活项文字前的静态前缀（仅 showText=true 生效） */
+  prependText?: string;
+  /** 固定图标 class，始终显示，不随激活项变化（等同 Ext.CycleButton.forceIcon） */
+  forceIcon?: string;
+  /** 选项列表（等价 Ext items：渲染为 x-cycle-menu 内 CheckItem 单组） */
+  items: CycleItem[];
+  scale?: 'small' | 'medium' | 'large';
+  iconAlign?: 'top' | 'right' | 'bottom' | 'left';
+  type?: 'submit' | 'reset' | 'button';
+  cls?: string;
+  disabled?: boolean;
+  arrowAlign?: 'right' | 'bottom';
+  width?: number;
+  minWidth?: number;
+  /** 激活项变化回调（等价 Ext change / changeHandler：fn(activeIndex, item)） */
+  onChange?: (activeIndex: number, item: CycleItem) => void;
+}
+
+/**
+ * CycleButton —— 保真复刻 Ext.CycleButton（src/widgets/CycleButton.js，继承 Ext.SplitButton）。
+ *
+ * 保真契约（DOM/class 严格对齐源码）：
+ *  - 根容器与 Ext.SplitButton 完全一致：<table class="x-btn x-btn-split ..."> 两层 table 模板；
+ *    em 承载 x-btn-split（箭头区 s-arrow.gif），点击箭头 = 展开菜单。
+ *  - 菜单：<Menu rootClassName="x-cycle-menu">，每个 item 为 Ext.menu.CheckItem（单 group 互斥），
+ *    激活项 <li class="x-menu-item-checked">（背景 #def8f6 + 勾选 checked.gif）。
+ *
+ * 行为契约（对齐 CycleButton.js）：
+ *  - 主体点击 -> 在 items 间循环到下一项（toggleSelected）：skip disabled，到末尾回卷到首项；
+ *    同时 setActiveItem -> 更新显示文本/图标 + 触发 onChange（等同 change 事件）。
+ *  - 箭头区点击 -> 展开菜单（与 SplitButton 一致），点菜单项 -> 直接 setActiveItem 到该项。
+ *  - showText=true 时按钮文字 = prependText + 激活项 text；forceIcon 时图标固定不随项变化。
+ */
+export const CycleButton = forwardRef<CycleButtonHandle, CycleButtonProps>(
+  (
+    {
+      text = '',
+      showText = false,
+      prependText = '',
+      forceIcon,
+      items,
+      scale = 'small',
+      iconAlign = 'left',
+      type = 'button',
+      cls = '',
+      disabled = false,
+      arrowAlign = 'right',
+      width,
+      minWidth,
+      onChange,
+    },
+    ref,
+  ) => {
+  // 单源数组法：dynItems 为唯一真相，句柄运行时改写；useEffect([items]) 同步 prop 变化。
+  const [dynItems, setDynItems] = useState<CycleItem[]>(() => items);
+  const itemsRef = useRef<CycleItem[]>(dynItems);
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const fc = items.findIndex((it) => it.checked);
+    return fc >= 0 ? fc : 0;
+  });
+  const activeIndexRef = useRef(activeIndex);
+  useEffect(() => {
+    itemsRef.current = dynItems;
+  }, [dynItems]);
+  useEffect(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+  useEffect(() => {
+    setDynItems(items);
+  }, [items]);
+
+  useImperativeHandle(
+    ref,
+    (): CycleButtonHandle => ({
+      addItem: (item, index) => {
+        setDynItems((prev) => {
+          const next = [...prev];
+          if (index == null || index >= next.length) next.push(item);
+          else next.splice(index, 0, item);
+          return next;
+        });
+      },
+      removeItem: (index) => {
+        const curLen = itemsRef.current.length;
+        setDynItems((prev) => prev.filter((_, i) => i !== index));
+        setActiveIndex((prev) => {
+          if (curLen <= 1) return 0;
+          const newLen = curLen - 1;
+          if (index < prev) return prev - 1;
+          if (index === prev) return Math.min(prev, newLen - 1);
+          return Math.min(prev, newLen - 1);
+        });
+      },
+      updateItem: (index, partial) => {
+        setDynItems((prev) => prev.map((it, i) => (i === index ? { ...it, ...partial } : it)));
+      },
+      setActive: (i) => {
+        setActiveIndex(i);
+        const it = itemsRef.current[i];
+        if (it) onChange?.(i, it);
+        activeIndexRef.current = i;
+      },
+      getActive: () => activeIndexRef.current,
+      getItems: () => itemsRef.current.map((it) => ({ ...it })),
+    }),
+    [onChange],
+  );
+
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [clicked, setClicked] = useState(false);
+  const [arrowHovered, setArrowHovered] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const wrapRef = useRef<HTMLSpanElement>(null);
+
+  // 外部点击 / Esc 关闭菜单（等同 Ext 的 document 级监听）
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onDocDown = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDocDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  const activeItem = dynItems[activeIndex] ?? dynItems[0];
+
+  const displayText = showText ? `${prependText}${activeItem?.text ?? ''}` : text;
+  const displayIconCls = forceIcon || activeItem?.iconCls || '';
+
+  // 与 Ext.Button 一致：图标 + 文字 -> x-btn-text-icon；仅图标 -> x-btn-icon；无 -> x-btn-noicon
+  const iconStateClass = displayIconCls
+    ? displayText
+      ? 'x-btn-text-icon'
+      : 'x-btn-icon'
+    : 'x-btn-noicon';
+
+  const emClass =
+    arrowAlign === 'bottom' ? 'x-btn-split-bottom' : 'x-btn-split';
+
+  const tableClass = [
+    'x-btn',
+    cls,
+    iconStateClass,
+    disabled ? 'x-item-disabled' : '',
+    hovered ? 'x-btn-over' : '',
+    focused ? 'x-btn-focus' : '',
+    clicked ? 'x-btn-click' : '',
+    arrowHovered ? 'x-btn-menu-active' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // 菜单项：激活项 checked（单组互斥，等同 CheckItem），点击 -> 选中并关闭
+  const menuItems: MenuItem[] = dynItems.map((it, i) => ({
+    text: it.text,
+    iconCls: it.iconCls,
+    disabled: it.disabled,
+    checked: i === activeIndex,
+    handler: () => {
+      setActiveIndex(i);
+      onChange?.(i, it);
+      setMenuOpen(false);
+    },
+  }));
+
+  // 主体点击：循环到下一项（toggleSelected），跳过 disabled，末尾回卷首项
+  const handleBodyClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (disabled) return;
+      e.preventDefault();
+      for (let step = 1; step < dynItems.length; step++) {
+        const idx = (activeIndex + step) % dynItems.length;
+        if (!dynItems[idx].disabled) {
+          setActiveIndex(idx);
+          onChange?.(idx, dynItems[idx]);
+          break;
+        }
+      }
+    },
+    [disabled, dynItems, activeIndex, onChange],
+  );
+
+  // 箭头区点击（target 为 EM 即箭头区）-> 展开菜单
+  const handleEmClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+      if ((e.target as HTMLElement).tagName !== 'EM') return; // 主体点击交给 handleBodyClick
+      e.preventDefault();
+      setMenuOpen((o) => !o);
+    },
+    [disabled],
+  );
+
+  return (
+    <span ref={wrapRef} style={{ position: 'relative', display: 'block' }}>
+      <table
+        cellSpacing={0}
+        className={tableClass}
+        style={{ ...(minWidth ? { minWidth } : {}), ...(width ? { width: `${width}px` } : {}) }}
+      >
+        <tbody className={`x-btn-${scale} x-btn-icon-${scale}-${iconAlign}`}>
+          <tr>
+            <td className="x-btn-tl"><i>&#160;</i></td>
+            <td className="x-btn-tc"></td>
+            <td className="x-btn-tr"><i>&#160;</i></td>
+          </tr>
+          <tr>
+            <td className="x-btn-ml"><i>&#160;</i></td>
+            <td className="x-btn-mc">
+              <em
+                className={emClass}
+                unselectable="on"
+                onClick={handleEmClick}
+                onMouseEnter={() => !disabled && setArrowHovered(true)}
+                onMouseLeave={() => !disabled && setArrowHovered(false)}
+              >
+                <button
+                  type={type}
+                  className={['x-btn-text', displayIconCls].filter(Boolean).join(' ')}
+                  style={{
+                    ...(displayIconCls ? {} : { padding: 0 }),
+                  }}
+                  onClick={handleBodyClick}
+                  onMouseEnter={() => !disabled && setHovered(true)}
+                  onMouseLeave={() => !disabled && setHovered(false)}
+                  onFocus={() => !disabled && setFocused(true)}
+                  onBlur={() => !disabled && setFocused(false)}
+                  onMouseDown={() => !disabled && setClicked(true)}
+                  onMouseUp={() => !disabled && setClicked(false)}
+                >{displayText || ' '}</button>
+              </em>
+            </td>
+            <td className="x-btn-mr"><i>&#160;</i></td>
+          </tr>
+          <tr>
+            <td className="x-btn-bl"><i>&#160;</i></td>
+            <td className="x-btn-bc"></td>
+            <td className="x-btn-br"><i>&#160;</i></td>
+          </tr>
+        </tbody>
+      </table>
+      {menuOpen && (
+        <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 15000 }}>
+          <Menu
+            rootClassName="x-cycle-menu"
+            items={menuItems}
+            onItemClick={(_item, index) => {
+              setActiveIndex(index);
+              onChange?.(index, dynItems[index]);
+              setMenuOpen(false);
+            }}
+          />
+        </div>
+      )}
+    </span>
+  );
+});
+
+CycleButton.displayName = 'CycleButton';
+
+export default CycleButton;

package/src/components/DataView.tsx

@@ -0,0 +1,244 @@
+import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle } from 'react';
+
+export interface DataViewItem {
+  text: string;
+  value?: string;
+}
+
+export interface DataViewProps {
+  /** 数据项（等价 Ext DataView 的 store 数据，displayField='text'） */
+  data: DataViewItem[];
+  /** 初始选中项索引（可多值，开启 multiSelect 时） */
+  selected?: number | number[];
+  /** 允许多选（点击累加 / 拖拽框选多值），默认单选 */
+  multiSelect?: boolean;
+  width?: number;
+  height?: number;
+  /** 选中变化回调（等价 Ext selectionchange / click：fn(selectedIndexes)） */
+  onSelectionChange?: (indexes: number[]) => void;
+  /** 空数据提示文本（对齐 Ext.DataView.emptyText；data 为空时渲染，复用既有 DOM 结构）。 */
+  emptyText?: string;
+}
+
+/**
+ * DataView —— 保真复刻 Ext.DataView（src/widgets/DataView.js）。
+ *
+ * 保真契约（DOM/class 严格对齐源码）：
+ *  - 容器 <div class="x-data-view">（position:relative，承载拖拽选择框），内部按 itemTpl 渲染
+ *    N×<div class="x-view-item">（itemSelector 默认 div.x-view-item）。
+ *  - 选中项追加 x-list-selected（复用 Ext.ListView 原生选中类，xtheme-blue/gray 中均有主题化规则：
+ *    blue #dfe8f6 / gray #f0f0f0；零自定义 CSS，蓝/灰原生主题化），
+ *    悬停项追加 x-view-over（Ext 默认 overClass；原版 DataView 悬停无主题高亮，保持一致）。
+ *    注：原版 Ext.DataView 的 selectedClass 为 'x-view-selected'，但框架（ext-all/xtheme）对其
+ *    无 base 规则，选中视觉本由示例 CSS 提供；此处为"零新增 CSS"改用原生 .x-list-selected。
+ *  - 拖拽框选渲染 <div class="x-view-selector">（ext-all.css 唯一有规则的 x-view 类：
+ *    #c3daf9 背景 + #3399bb 边框，CSS 2706/5958）。
+ *
+ * 行为契约（对齐 DataView.js onMouseDown / onClick / doSingleSelect / doMultiSelect）：
+ *  - 点击项 -> 单选（清空其他）；multiSelect 下 Ctrl/点击累加切换。
+ *  - 悬停项 -> x-view-over（mouseover/mouseout）。
+ *  - 在容器空白处按下并拖拽 -> 绘制 x-view-selector，松手时选中与框相交的所有项（multiSelect 框选）。
+ */
+export interface DataViewHandle {
+  /** 追加一项（动态数据源） */
+  addItem: (item: DataViewItem) => void;
+  /** 按下标删除一项（同时调整选中索引，前移其后的选中项） */
+  removeByIndex: (index: number) => void;
+  /** 读取当前全部项（含动态追加/删除后的结果） */
+  getItems: () => DataViewItem[];
+  /** 读取当前选中下标数组 */
+  getSelected: () => number[];
+  /** 程序化设置选中下标 */
+  setSelected: (indexes: number[]) => void;
+  /** 清空全部项 */
+  clear: () => void;
+}
+
+export const DataView = forwardRef<DataViewHandle, DataViewProps>(function DataView(
+  { data, selected, multiSelect = false, width, height, onSelectionChange, emptyText },
+  ref,
+) {
+  // 单源数组：默认渲染 = prop data（未调用句柄时与原 React.FC 行为一致）；
+  // 句柄的 addItem/removeByIndex/clear 直接改写 items，作为「动态态」。
+  const [items, setItems] = useState<DataViewItem[]>(() => data);
+  const initial = selected == null ? [] : Array.isArray(selected) ? selected : [selected];
+  const [selectedIdx, setSelectedIdx] = useState<number[]>(initial);
+  const [overIdx, setOverIdx] = useState<number | null>(null);
+  const [drag, setDrag] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragStart = useRef<{ x: number; y: number } | null>(null);
+  // 镜像最新值，供 getItems/getSelected 同步读取（句柄闭包在 commit 阶段执行，无 TDZ）
+  const itemsRef = useRef<DataViewItem[]>(items);
+  itemsRef.current = items;
+  const selectedRef = useRef<number[]>(selectedIdx);
+  selectedRef.current = selectedIdx;
+
+  const emit = useCallback(
+    (idx: number[]) => {
+      onSelectionChange?.(idx);
+    },
+    [onSelectionChange],
+  );
+
+  const selectSingle = useCallback(
+    (index: number, additive: boolean) => {
+      let next: number[];
+      if (additive && multiSelect) {
+        next = selectedIdx.includes(index)
+          ? selectedIdx.filter((i) => i !== index)
+          : [...selectedIdx, index];
+      } else {
+        next = [index];
+      }
+      setSelectedIdx(next);
+      emit(next);
+    },
+    [multiSelect, selectedIdx, emit],
+  );
+
+  // 命令式句柄：运行时动态增删数据源 / 读写选中态
+  useImperativeHandle(
+    ref,
+    () => ({
+      addItem: (item: DataViewItem) => setItems((prev) => [...prev, item]),
+      removeByIndex: (index: number) => {
+        if (index < 0) return;
+        setItems((prev) => prev.filter((_, i) => i !== index));
+        setSelectedIdx((prev) =>
+          prev.filter((s) => s !== index).map((s) => (s > index ? s - 1 : s)),
+        );
+      },
+      getItems: () => itemsRef.current,
+      getSelected: () => selectedRef.current,
+      setSelected: (indexes: number[]) => {
+        setSelectedIdx(indexes);
+        emit(indexes);
+      },
+      clear: () => {
+        setItems([]);
+        setSelectedIdx([]);
+      },
+    }),
+    [emit],
+  );
+
+  // 拖拽框选：mousedown 在容器空白（非 item）开始
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      if (target.classList.contains('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 });
+    },
+    [multiSelect],
+  );
+
+  const onMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!dragStart.current) return;
+      const rect = containerRef.current!.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const sx = dragStart.current.x;
+      const sy = dragStart.current.y;
+      setDrag({
+        x: Math.min(sx, x),
+        y: Math.min(sy, y),
+        w: Math.abs(x - sx),
+        h: Math.abs(y - sy),
+      });
+    },
+    [],
+  );
+
+  const onMouseUp = useCallback(() => {
+    if (!dragStart.current || !drag) {
+      dragStart.current = null;
+      setDrag(null);
+      return;
+    }
+    // 选中与框相交的项
+    const container = containerRef.current!;
+    const cRect = container.getBoundingClientRect();
+    const selRect = {
+      left: drag.x,
+      top: drag.y,
+      right: drag.x + drag.w,
+      bottom: drag.y + drag.h,
+    };
+    const hit: number[] = [];
+    const items = container.querySelectorAll<HTMLElement>('.x-view-item');
+    items.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);
+    });
+    const next = multiSelect ? Array.from(new Set([...selectedIdx, ...hit])) : hit;
+    setSelectedIdx(next);
+    emit(next);
+    dragStart.current = null;
+    setDrag(null);
+  }, [drag, multiSelect, selectedIdx, emit]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="x-data-view"
+      style={{ position: 'relative', width, height, userSelect: 'none' }}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+    >
+      {items.length === 0 && emptyText != null ? (
+        <div className="x-view-empty" style={{ padding: '10px 8px' }}>
+          {emptyText}
+        </div>
+      ) : (
+        items.map((item, i) => (
+        <div
+          key={i}
+          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))}
+        >
+          {item.text}
+        </div>
+      )))}
+      {drag && (
+        <div
+          className="x-view-selector"
+          style={{
+            position: 'absolute',
+            left: drag.x,
+            top: drag.y,
+            width: drag.w,
+            height: drag.h,
+          }}
+        />
+      )}
+    </div>
+  );
+});
+
+(DataView as unknown as { displayName?: string }).displayName = 'DataView';
+
+export default DataView;