react-extjs 0.0.1

package/src/components/Window.tsx

@@ -0,0 +1,441 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, type ReactNode } from 'react';
+import { Toolbar } from './Toolbar';
+
+/**
+ * Window —— 保真复刻 Ext.Window / Ext.Panel(frame) 的 9 宫格结构。
+ *
+ * 保真契约（DOM/class 严格对齐 Ext 3.2.1 运行时产出，由 dump golden 校验）：
+ *  - 根：x-window（position:absolute；plain 时加 x-window-plain；resizable 时加 x-resizable-pinned；
+ *        maximized 时加 x-window-maximized）
+ *  - 顶部：x-window-tl > x-window-tr > x-window-tc > x-window-header.x-unselectable
+ *        header 内顺序（对 golden 实测）：x-tool x-tool-close → x-tool x-tool-restore(hidden)
+ *        → x-tool x-tool-maximize → span.x-window-header-text
+ *        （注意：Window 的 close 工具在文本「之前」；maximize 图标在 close 左侧、视觉靠右）
+ *  - bwrap：x-window-bwrap > x-window-ml > x-window-mr > x-window-mc > x-window-body（带 inline 尺寸）
+ *  - 底部：x-window-bl > x-window-br > x-window-bc > x-window-footer.x-panel-btns
+ *        > Toolbar(根类 x-panel-fbar x-small-editor x-toolbar-layout-ct，按钮右对齐) + x-clear
+ *  - 末尾：a.x-dlg-focus（focus 锚点）
+ *  - resizable：根追加 8 个透明缩放手柄（x-resizable-handle-{edge} x-unselectable x-window-handle，
+ *        opacity:0，不影响可见像素；edge = north/south/east/west/northeast/northwest/southeast/southwest）
+ *  - modal：容器内含 .ext-el-mask 兄弟节点（在窗口之前），bg rgb(204,204,204) opacity .5，z-index 9020，
+ *        视觉被容器 overflow:hidden 裁剪（对齐 Ext 的 modal mask）
+ *
+ * Ext 运行时注入的 inline 尺寸（必须复刻，否则像素错位）：
+ *  - x-window-body: width = width - 14（左右 frame 7+7）；height = height - 66（header25+footer39+frameV2）
+ */
+export interface WindowButton {
+  text: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  /** 显式宽度（如 MessageBox 按钮固定 75px） */
+  width?: number;
+}
+
+export interface WindowProps {
+  title?: string;
+  width?: number;
+  height?: number;
+  /** 容器内的 left（默认 0） */
+  left?: number;
+  /** 容器内的 top（默认 0） */
+  top?: number;
+  /** 显示关闭按钮（默认 true） */
+  closable?: boolean;
+  /** 透明 body 背景（默认 false，蓝灰渐变） */
+  plain?: boolean;
+  /** 底部按钮（渲染为右对齐 Toolbar） */
+  buttons?: WindowButton[];
+  onClose?: () => void;
+  /** 可最大化：头部渲染 maximize/restore 工具，点击切换 */
+  maximizable?: boolean;
+  onMaximize?: () => void;
+  onRestore?: () => void;
+  /** 可最小化：头部渲染 minimize 工具，点击折叠收起为仅标题栏（对齐 Ext 默认 minimize → fireEvent onMinimize，不整窗消失）；标题栏展开工具或句柄 expand 可恢复 */
+  minimizable?: boolean;
+  onMinimize?: () => void;
+  /** 可缩放：根追加 8 个透明缩放手柄（结构保真；拖拽缩放交互见下） */
+  resizable?: boolean;
+  /** 可拖拽移动（默认 true，对齐 Ext.Window.draggable）。点击 header（非工具区）拖动 */
+  draggable?: boolean;
+  /** 最小宽/高约束（拖拽缩放时生效，避免 body 尺寸为负） */
+  minWidth?: number;
+  minHeight?: number;
+  /** 模态：渲染 .ext-el-mask 遮罩（覆盖容器） */
+  modal?: boolean;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  /** 高度自适应（如 MessageBox）：根与 body 不固定高度，由内容撑开 */
+  autoHeight?: boolean;
+  /** 底部按钮水平对齐：默认 right（Window 习惯）；MessageBox 用 center */
+  footerAlign?: 'left' | 'center' | 'right';
+  /** 初始可见性（默认 true，对齐 Ext Window 默认渲染即显示）；运行时可由句柄 open/close 改写 */
+  visible?: boolean;
+}
+/** 命令式句柄：对齐 Ext.Window 的运行时 show/hide/setTitle/maximize/restore 与动态内容替换 */
+export interface WindowHandle {
+  open: () => void;
+  close: () => void;
+  setTitle: (t: string) => void;
+  setContent: (node: ReactNode) => void;
+  maximize: () => void;
+  restore: () => void;
+  /** 最小化：折叠收起为仅标题栏（对齐 Ext 默认 minimize → fireEvent onMinimize，默认不整窗消失） */
+  minimize: () => void;
+  /** 取消最小化：恢复正文与底部工具条 */
+  expand: () => void;
+  isVisible: () => boolean;
+}
+
+// Ext 运行时注入的 frame 常数（对 golden 实测得出）
+//  常规窗口 body inline 宽 = width - 14（左右 frame 7+7，body 无 padding）。
+//  plain 窗口（如 MessageBox）body 带左右 padding(10+10) → inline 宽 = width - 32，
+//  其 offsetWidth(=inline+20) 正好填满 .x-window-mr(=width-12)，无溢出（普通窗口 body 无 padding 故恰好窄 2px，对齐 Ext）。
+const BODY_W_OFFSET = 14;
+const BODY_H_OFFSET = 66; // header(25) + footer(39) + 上下 frame(2)
+
+// resizable 8 向手柄（对 golden 实测：Ext 默认生成全部 8 个，opacity:0 透明）
+const RESIZE_EDGES = [
+  'north', 'south', 'east', 'west',
+  'northeast', 'northwest', 'southeast', 'southwest',
+];
+
+// 各边手柄的光标（对齐 Ext.Resizable 的 handle cursor）
+const HANDLE_CURSOR: Record<string, string> = {
+  north: 'ns-resize', south: 'ns-resize',
+  east: 'ew-resize', west: 'ew-resize',
+  northeast: 'nesw-resize', southwest: 'nesw-resize',
+  northwest: 'nwse-resize', southeast: 'nwse-resize',
+};
+
+export const Window = forwardRef<WindowHandle, WindowProps>(
+  (
+    {
+      title,
+      width = 400,
+      height = 220,
+      left = 0,
+      top = 0,
+      closable = true,
+      plain = false,
+      buttons,
+      onClose,
+      maximizable = false,
+      onMaximize,
+      onRestore,
+      minimizable = false,
+      onMinimize,
+      resizable = false,
+      draggable = true,
+      minWidth = 100,
+      minHeight = 100,
+      modal = false,
+      children,
+      style,
+      className,
+      autoHeight = false,
+      footerAlign = 'right',
+      visible = true,
+    },
+    ref,
+  ) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  // 几何状态：maximize 时填满容器，restore 时还原
+  const [geom, setGeom] = useState({ width, height, left, top });
+  const [maximized, setMaximized] = useState(false);
+  // 最小化：对齐 Ext 默认 minimize 仅 fireEvent（不隐藏窗口），这里用「折叠收起」呈现可见的最小化形态
+  const [minimized, setMinimized] = useState(false);
+  // 双轨动态态：visible/title/content 既接受静态 prop，也支持运行时通过句柄改写。
+  const [dynVisible, setDynVisible] = useState(visible);
+  const [dynTitle, setDynTitle] = useState<string | undefined>(undefined);
+  const [dynContent, setDynContent] = useState<ReactNode | undefined>(undefined);
+  // 同步静态 prop 变化（演示中主要通过句柄改写，这里保证 prop 驱动也生效）
+  useEffect(() => setDynVisible(visible), [visible]);
+
+  const handleMaximize = () => {
+    const p = rootRef.current?.parentElement;
+    if (p) {
+      setGeom({ width: p.clientWidth, height: p.clientHeight, left: 0, top: 0 });
+    }
+    setMaximized(true);
+    setMinimized(false);
+    onMaximize?.();
+  };
+  const handleRestore = () => {
+    setGeom({ width, height, left, top });
+    setMaximized(false);
+    setMinimized(false);
+    onRestore?.();
+  };
+  const handleMinimize = () => {
+    // 对齐 Ext 默认 minimize：仅触发 onMinimize 回调（fireEvent），窗口折叠收起为仅标题栏，不整窗消失
+    setMinimized(true);
+    onMinimize?.();
+  };
+  const handleExpand = () => {
+    // 取消最小化：恢复正文与底部工具条
+    setMinimized(false);
+  };
+
+  useImperativeHandle(ref, () => ({
+    open: () => setDynVisible(true),
+    close: () => setDynVisible(false),
+    setTitle: (t: string) => setDynTitle(t),
+    setContent: (node: ReactNode) => setDynContent(node),
+    maximize: () => handleMaximize(),
+    restore: () => handleRestore(),
+    minimize: () => handleMinimize(),
+    expand: () => handleExpand(),
+    isVisible: () => dynVisible,
+  }));
+  // 拖拽描述：null 表示空闲；move 为移动，resize 带 edge
+  const dragRef = useRef<null | {
+    type: 'move' | 'resize';
+    edge?: string;
+    startX: number;
+    startY: number;
+    start: { width: number; height: number; left: number; top: number };
+  }>(null);
+
+  // 拖拽过程中绑定到 window 的监听（move 改几何，up 解绑）
+  const attachDragListeners = () => {
+    const onMove = (e: MouseEvent) => {
+      const d = dragRef.current;
+      if (!d) return;
+      const dx = e.clientX - d.startX;
+      const dy = e.clientY - d.startY;
+      if (d.type === 'move') {
+        setGeom((g) => ({ ...g, left: d.start.left + dx, top: d.start.top + dy }));
+        return;
+      }
+      // resize：按 edge 单边/双边更新，带最小尺寸约束
+      const edge = d.edge!;
+      const start = d.start;
+      let { width, height, left, top } = start;
+      const has = (s: string) => edge.includes(s);
+      if (has('east')) width = Math.max(minWidth, start.width + dx);
+      if (has('south')) height = Math.max(minHeight, start.height + dy);
+      if (has('west')) {
+        const w = Math.max(minWidth, start.width - dx);
+        width = w;
+        left = start.left + (start.width - w);
+      }
+      if (has('north')) {
+        const h = Math.max(minHeight, start.height - dy);
+        height = h;
+        top = start.top + (start.height - h);
+      }
+      setGeom({ width, height, left, top });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  const onHeaderMouseDown = (e: React.MouseEvent) => {
+    if (!draggable || maximized) return;
+    // 工具区（close/maximize/restore）点击不触发拖拽，交给工具 handler
+    if ((e.target as HTMLElement).closest('.x-tool')) return;
+    e.preventDefault();
+    dragRef.current = {
+      type: 'move',
+      startX: e.clientX,
+      startY: e.clientY,
+      start: { ...geom },
+    };
+    attachDragListeners();
+  };
+
+  const onHandleMouseDown = (e: React.MouseEvent, edge: string) => {
+    if (!resizable || maximized) return;
+    e.preventDefault();
+    e.stopPropagation();
+    dragRef.current = {
+      type: 'resize',
+      edge,
+      startX: e.clientX,
+      startY: e.clientY,
+      start: { ...geom },
+    };
+    attachDragListeners();
+  };
+
+  const rootCls = [
+    'x-window',
+    plain ? 'x-window-plain' : '',
+    resizable ? 'x-resizable-pinned' : '',
+    maximized ? 'x-window-maximized' : '',
+    // 最小化：复用 Ext 折叠类 x-panel-collapsed，触发 ext-all.css 内置
+    // `.x-panel-collapsed .x-window-tl { border-bottom:1px solid }` 闭合标题栏（最外层顶框横跨全宽，含圆角区，不断裂）。
+    minimized ? 'x-panel-collapsed' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const headerEl = (
+    <div
+      className="x-window-header x-unselectable"
+      unselectable="on"
+      onMouseDown={onHeaderMouseDown}
+      style={{ cursor: draggable && !maximized && !minimized ? 'move' : undefined }}
+    >
+      {closable && (
+        <div className="x-tool x-tool-close" unselectable="on" onClick={onClose}>
+          {' '}
+        </div>
+      )}
+      {(maximizable || minimizable) && (
+        <div
+          className="x-tool x-tool-restore"
+          unselectable="on"
+          style={{ display: maximized || minimized ? 'block' : 'none' }}
+          onClick={maximized ? handleRestore : handleExpand}
+        >
+          {' '}
+        </div>
+      )}
+      {maximizable && (
+        <div
+          className="x-tool x-tool-maximize"
+          unselectable="on"
+          style={{ display: maximized ? 'none' : 'block' }}
+          onClick={handleMaximize}
+        >
+          {' '}
+        </div>
+      )}
+      {minimizable && (
+        <div
+          className="x-tool x-tool-minimize"
+          unselectable="on"
+          style={{ display: minimized ? 'none' : 'block' }}
+          onClick={handleMinimize}
+        >
+          {' '}
+        </div>
+      )}
+      {title && <span className="x-window-header-text">{dynTitle ?? title}</span>}
+    </div>
+  );
+
+  const bodyWidth = geom.width - (plain ? 32 : BODY_W_OFFSET);
+  // 无 footer 时不减 footer 高度，并改用更矮的底部圆角收口偏移（header + 底部 frame）
+  const bodyHeight = geom.height - (buttons?.length ? BODY_H_OFFSET : 33);
+
+  // 底部圆角框架始终渲染：对齐 Ext，无论有无 footer，窗口底部都需 x-window-bl/br/bc 收口。
+  // 无 footer 内容时加 x-panel-nofooter（CSS 将其压成 6px 圆角底）；有 footer 时在其中渲染按钮区。
+  // 最小化（收起）时 footer 不渲染，故同样视为无 footer → 加 x-panel-nofooter 收口，避免底部框架塌成 0 高、边框断裂。
+  const noFooter = !buttons?.length || minimized;
+  const bottomFrame = (
+    <div className={`x-window-bl${noFooter ? ' x-panel-nofooter' : ''}`}>
+      <div className="x-window-br">
+        <div className="x-window-bc">
+          {buttons?.length && !minimized && (
+            <div className="x-window-footer x-panel-btns">
+              <Toolbar
+                rootClass="x-panel-fbar x-small-editor x-toolbar-layout-ct"
+                buttonAlign={footerAlign === 'right' ? 'left' : footerAlign}
+                items={
+                  footerAlign === 'right'
+                    ? ['->', ...buttons.map((b) => ({ text: b.text, disabled: b.disabled, onClick: b.onClick, width: b.width }))]
+                    : buttons.map((b) => ({ text: b.text, disabled: b.disabled, onClick: b.onClick, width: b.width }))
+                }
+              />
+              <div className="x-clear" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  const resizeHandles = resizable && !minimized
+    ? RESIZE_EDGES.map((edge) => (
+        <div
+          key={edge}
+          className={`x-resizable-handle x-resizable-handle-${edge} x-unselectable x-window-handle`}
+          unselectable="on"
+          onMouseDown={(e) => onHandleMouseDown(e, edge)}
+          style={{ cursor: HANDLE_CURSOR[edge] }}
+        >
+          {' '}
+        </div>
+      ))
+    : null;
+
+  // 可见性双轨：dynVisible=false 时不渲染（含 modal 遮罩一并消失），对齐 Ext Window.hide()。
+  if (!dynVisible) return null;
+
+  const windowEl = (
+    <div
+      ref={rootRef}
+      className={rootCls}
+      style={{
+        position: 'absolute',
+        left: geom.left,
+        top: geom.top,
+        width: geom.width,
+        ...(minimized ? { height: 'auto' } : autoHeight ? {} : { height: geom.height }),
+        ...style,
+      }}
+    >
+      <div className="x-window-tl">
+        <div className="x-window-tr">
+          <div className="x-window-tc">{headerEl}</div>
+        </div>
+      </div>
+      {!minimized && (
+        <div className="x-window-bwrap">
+          <div className="x-window-ml">
+            <div className="x-window-mr">
+              <div className="x-window-mc">
+                <div
+                  className="x-window-body"
+                  style={{
+                    width: bodyWidth,
+                    ...(autoHeight ? {} : { height: bodyHeight }),
+                  }}
+                >
+                  {dynContent ?? children}
+                </div>
+              </div>
+            </div>
+          </div>
+          {bottomFrame}
+        </div>
+      )}
+      <a href="#" className="x-dlg-focus" tabIndex={-1}>
+        {' '}
+      </a>
+      {resizeHandles}
+    </div>
+  );
+
+  // modal：渲染 .ext-el-mask 遮罩作为兄弟节点（在窗口之前），覆盖容器
+  if (modal) {
+    const maskEl = (
+      <div
+        className="ext-el-mask"
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: '100%',
+          height: '100%',
+          zIndex: 9020,
+        }}
+      />
+    );
+    return <>{maskEl}{windowEl}</>;
+  }
+
+  return windowEl;
+});
+Window.displayName = 'Window';
+
+export default Window;