react-extjs 0.0.1

package/src/components/ButtonGroup.tsx

@@ -0,0 +1,170 @@
+import { forwardRef, useImperativeHandle, useState, useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
+import { Button, type ButtonProps } from './Button';
+
+export interface ButtonGroupItem extends ButtonProps {
+  /** 跨行（table 布局，默认 1） */
+  rowspan?: number;
+  /** 跨列（table 布局，默认 1） */
+  colspan?: number;
+  /** 原生 key */
+  key?: string | number;
+}
+
+/**
+ * 运行时句柄（对齐 Ext.ButtonGroup 动态增删改按钮）：
+ * - addItem(item, index?)：在末尾（或指定位置）插入一个按钮项
+ * - removeItem(index)：删除指定位置的按钮项
+ * - updateItem(index, partial)：就地更新某项（text/disabled/handler 等）
+ * - getItems()：读当前按钮项数组
+ */
+export interface ButtonGroupHandle {
+  addItem: (item: ButtonGroupItem, index?: number) => void;
+  removeItem: (index: number) => void;
+  updateItem: (index: number, partial: Partial<ButtonGroupItem>) => void;
+  getItems: () => ButtonGroupItem[];
+}
+
+export interface ButtonGroupProps {
+  /** 分组标题；省略则不渲染标题头并加 x-btn-group-notitle */
+  title?: string;
+  /** 列数（table 布局，默认 3） */
+  columns?: number;
+  /** 按钮项（复用 Button 两层 table DOM） */
+  items?: ButtonGroupItem[];
+  /** 根宽（默认自适应内容） */
+  width?: number | string;
+  className?: string;
+  style?: CSSProperties;
+  testId?: string;
+  children?: ReactNode;
+}
+
+/**
+ * 复刻 Ext.ButtonGroup（ExtJS 3.2.1 src/widgets/ButtonGroup.js）。
+ * 本质是 frame:true 的 Panel：9 宫格圆角结构，仅 baseCls 由 x-panel 替换为 x-btn-group；
+ * 头部为 x-btn-group-header（含 x-btn-group-header-text）；body 为 table 布局的 x-btn-group-body，
+ * 按 columns 将按钮排入单元格（支持每项 rowspan/colspan）。无标题时根加 x-btn-group-notitle。
+ */
+export const ButtonGroup = forwardRef<ButtonGroupHandle, ButtonGroupProps>(
+  ({
+  title,
+  columns = 3,
+  items = [],
+  width,
+  className,
+  style,
+  testId,
+  children,
+}: ButtonGroupProps, ref) => {
+  // 单源数组法：items 为唯一真相，句柄直接基于 prev 纯函数改写
+  const [dynItems, setDynItems] = useState<ButtonGroupItem[]>(() => items);
+  const itemsRef = useRef(dynItems);
+  itemsRef.current = dynItems;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      addItem: (item: ButtonGroupItem, index?: number) =>
+        setDynItems((prev) => {
+          const next = [...prev];
+          if (index === undefined || index >= next.length) next.push(item);
+          else next.splice(index, 0, item);
+          return next;
+        }),
+      removeItem: (index: number) => setDynItems((prev) => prev.filter((_, i) => i !== index)),
+      updateItem: (index: number, partial: Partial<ButtonGroupItem>) =>
+        setDynItems((prev) => prev.map((it, i) => (i === index ? { ...it, ...partial } : it))),
+      getItems: () => itemsRef.current,
+    }),
+    [],
+  );
+
+  useEffect(() => setDynItems(items), [items]);
+
+  const rootClass = [
+    'x-btn-group',
+    !title ? 'x-btn-group-notitle' : '',
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const header = title ? (
+    <div className="x-btn-group-header">
+      <span className="x-btn-group-header-text">{title}</span>
+    </div>
+  ) : null;
+
+  // table 布局：顺序流式排布，每行 columns 个单元格（默认 1 列宽）。
+  // 支持每项 rowspan/colspan（对齐 Ext.layout.TableLayout 的单元格合并语义）。
+  const cols = Math.max(1, columns);
+  const rows: ReactNode[][] = [[]];
+  let rowCol = 0;
+  const cellOf = (it: ButtonGroupItem): ReactNode => {
+    const rs = it.rowspan ?? 1;
+    const cs = it.colspan ?? 1;
+    return (
+      <td
+        className="x-btn-group-cell"
+        rowSpan={rs > 1 ? rs : undefined}
+        colSpan={cs > 1 ? cs : undefined}
+        key={it.key ?? it.text}
+      >
+        <Button {...it} />
+      </td>
+    );
+  };
+  for (const it of dynItems) {
+    if (rowCol >= cols) {
+      rows.push([]);
+      rowCol = 0;
+    }
+    rows[rows.length - 1].push(cellOf(it));
+    rowCol += it.colspan ?? 1;
+  }
+  // 末行不足列数时补空单元格，保持表格宽度一致
+  while (rowCol < cols) {
+    rows[rows.length - 1].push(<td key={`pad-${rowCol}`} />);
+    rowCol++;
+  }
+
+  return (
+    <div
+      className={rootClass}
+      // Ext 经 onAfterLayout 给 x-btn-group 设精确宽度（贴合内容）；react 无运行时，
+      // 用 inline-block 收缩到内容宽度，复刻「紧凑分组框」外观（避免 block 撑满父容器导致空白像素差）。
+      style={{ display: 'inline-block', width, ...style }}
+      data-testid={testId}
+    >
+      <div className="x-btn-group-tl">
+        <div className="x-btn-group-tr">
+          <div className="x-btn-group-tc">{header}</div>
+        </div>
+      </div>
+      <div className="x-btn-group-bwrap">
+        <div className="x-btn-group-ml">
+          <div className="x-btn-group-mr">
+            <div className="x-btn-group-mc">
+              <div className="x-btn-group-body">
+                {children ?? (
+                  <table cellPadding={0} cellSpacing={0}>
+                    <tbody>{rows.map((r, i) => <tr key={i}>{r}</tr>)}</tbody>
+                  </table>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="x-btn-group-bl" style={{ height: 3 }}>
+          <div className="x-btn-group-br">
+            <div className="x-btn-group-bc" style={{ height: 3, fontSize: 0, lineHeight: 0 }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;

package/src/components/CalendarPicker.tsx

@@ -0,0 +1,431 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+  type CSSProperties,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { TriggerField, type TriggerFieldHandle } from './Form';
+import { DatePicker } from './DatePicker';
+import { Button } from './Button';
+
+/* ------------------------------------------------------------------ */
+/* CalendarPicker —— 组合原生积木实现的日期范围选择器（单面板双日历）   */
+/*                                                                    */
+/* 保真契约（DOM/class 全部为原版 Ext 3.2.1 真实存在的 class，零新增 CSS）： */
+/*  - 字段层用两个无触发器的 TriggerField（hideTrigger）拼成一体范围框： */
+/*      span.x-form-field-wrap.x-form-field-trigger-wrap             */
+/*        > input.x-form-text（点字段任意处即弹面板，无独立图标）      */
+/*  - 浮层为“单面板双日历”：复用 Ext.menu.DateMenu 的 DOM 结构与定位   */
+/*      div.x-menu.x-menu-floating.x-layer.x-date-menu              */
+/*        > ul.x-menu-list（flex 并排，右格加分隔线，对齐 antd 双月面板）*/
+/*          > li.x-menu-list-item × 2                               */
+/*          > div.x-date-picker（左=起点，右=终点；内部 DatePicker    */
+/*            已逐像素保真，含表头/日历网格/月份选择浮层/今天按钮）     */
+/*                                                                    */
+/* 值结构：{ start: string, end: string }（均为 format 格式字符串）。   */
+/* 标准 Ext 3.2.1 无日期范围选择器；社区变体常见“单面板双日历”形态，    */
+/* 本组件以原版 x-date-picker 积木拼出该能力，DOM 全部为原版已有 class， */
+/* 符合“不新增/不修改 CSS”的开发标准。                                 */
+/* ------------------------------------------------------------------ */
+
+/** 对齐 Ext Date.format 的最小子集（Y/m/d/H/i/s），默认 'm/d/Y'。 */
+function pad(n: number, w = 2): string {
+  return String(n).padStart(w, '0');
+}
+function formatDate(d: Date, fmt = 'm/d/Y'): string {
+  const map: Record<string, string> = {
+    Y: String(d.getFullYear()),
+    y: String(d.getFullYear()).slice(-2),
+    m: pad(d.getMonth() + 1),
+    d: pad(d.getDate()),
+    H: pad(d.getHours()),
+    i: pad(d.getMinutes()),
+    s: pad(d.getSeconds()),
+  };
+  return fmt.replace(/[YymdHis]/g, (t) => map[t] ?? t);
+}
+/** 按 format 的 token 顺序解析；仅支持数字段（对齐 DateField 默认行为）。 */
+function parseDate(str: string, fmt = 'm/d/Y'): Date | null {
+  const order = fmt.match(/[Ymd]/g) ?? ['m', 'd', 'Y'];
+  const parts = str.split(/[^\d]+/).filter(Boolean).map(Number);
+  if (parts.length < 3) return null;
+  let y: number | undefined, m: number | undefined, d: number | undefined;
+  order.forEach((t, i) => {
+    if (t === 'Y') y = parts[i];
+    else if (t === 'm') m = parts[i];
+    else if (t === 'd') d = parts[i];
+  });
+  if (y === undefined || m === undefined || d === undefined) return null;
+  if (y < 100) y += 2000;
+  const dt = new Date(y, m - 1, d);
+  return Number.isNaN(dt.getTime()) ? null : dt;
+}
+
+/** 范围值：起止两个日期，均为 format 格式字符串。空串表示未选。 */
+export interface CalendarRangeValue {
+  start: string;
+  end: string;
+}
+
+/* ----------------- 单面板双日历浮层（复用 DateMenu 结构） ----------------- */
+
+interface RangeMenuProps {
+  open?: boolean;
+  anchorRef?: RefObject<HTMLElement>;
+  /** 已提交到输入框的起/止值（仅用于面板打开时初始化草稿）。 */
+  startValue?: Date | null;
+  endValue?: Date | null;
+  startDay?: number;
+  showToday?: boolean;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  disabledDays?: number[];
+  onClose: () => void;
+  /** 点击底部“确定”：把面板内草稿（start/end）提交到输入框并关闭面板。 */
+  onApply?: (start: Date | null, end: Date | null) => void;
+}
+
+function RangeMenu({
+  open,
+  anchorRef,
+  startValue,
+  endValue,
+  startDay,
+  showToday,
+  minDate,
+  maxDate,
+  disabledDays,
+  onClose,
+  onApply,
+}: RangeMenuProps) {
+  const [dynOpen, setDynOpen] = useState<boolean>(open ?? false);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
+  // 面板内草稿选择（独立于已提交值）：选日期只更新草稿高亮，不写入输入框。
+  const [draftStart, setDraftStart] = useState<Date | null>(startValue ?? null);
+  const [draftEnd, setDraftEnd] = useState<Date | null>(endValue ?? null);
+
+  useEffect(() => {
+    if (open !== undefined) setDynOpen(open);
+  }, [open]);
+
+  useEffect(() => {
+    if (!dynOpen) {
+      setCoords(null);
+      return;
+    }
+    // 每次打开用已提交值初始化草稿（DatePicker 卸载重建，value 作初值高亮）。
+    setDraftStart(startValue ?? null);
+    setDraftEnd(endValue ?? null);
+    const el = anchorRef?.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      setCoords({ top: Math.round(r.bottom), left: Math.round(r.left) });
+    }
+    const onDocDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement;
+      if (
+        !t.closest('.x-date-menu') &&
+        !t.closest('.x-date-picker') &&
+        !(anchorRef?.current && anchorRef.current.contains(t))
+      ) {
+        onClose();
+        setDynOpen(false);
+      }
+    };
+    const close = () => {
+      onClose();
+      setDynOpen(false);
+    };
+    const t = window.setTimeout(() => {
+      document.addEventListener('mousedown', onDocDown);
+      window.addEventListener('resize', close);
+    }, 0);
+    return () => {
+      window.clearTimeout(t);
+      document.removeEventListener('mousedown', onDocDown);
+      window.removeEventListener('resize', close);
+    };
+  }, [dynOpen, anchorRef, onClose, startValue, endValue]);
+
+  if (!dynOpen || !coords) return null;
+
+  return createPortal(
+    <div
+      className="x-menu x-menu-floating x-layer x-date-menu"
+      style={{
+        position: 'fixed',
+        visibility: 'visible',
+        zIndex: 15000,
+        top: coords.top,
+        left: coords.left,
+        background: '#fff',
+        border: '1px solid #f0f0f0',
+        borderRadius: 8,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.12)',
+        padding: 0,
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <a href="#" className="x-menu-focus" tabIndex={-1} onClick={(e) => e.preventDefault()} />
+      <ul
+        className="x-menu-list"
+        style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', margin: 0, padding: 2, gap: 0 }}
+      >
+        <li
+          className="x-menu-list-item"
+          style={{ display: 'block', listStyle: 'none', margin: 0, padding: 1 }}
+        >
+          <DatePicker
+            className="x-menu-date-item"
+            style={{ margin: 0, border: 'none' }}
+            value={draftStart ?? undefined}
+            startDay={startDay}
+            showToday={showToday}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabledDays={disabledDays}
+            onSelect={(d) => setDraftStart(d)}
+          />
+        </li>
+        <li
+          className="x-menu-list-item"
+          style={{
+            display: 'block',
+            listStyle: 'none',
+            margin: 0,
+            padding: '1px 1px 1px 6px',
+            borderLeft: '1px solid #f0f0f0',
+          }}
+        >
+          <DatePicker
+            className="x-menu-date-item"
+            style={{ margin: 0, border: 'none' }}
+            value={draftEnd ?? undefined}
+            startDay={startDay}
+            showToday={showToday}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabledDays={disabledDays}
+            onSelect={(d) => setDraftEnd(d)}
+          />
+        </li>
+      </ul>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+          gap: 3,
+          padding: 5,
+          borderTop: '1px solid #f0f0f0',
+        }}
+      >
+        <Button
+          text="确定"
+          disabled={!draftStart || !draftEnd}
+          handler={() => onApply?.(draftStart, draftEnd)}
+        />
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/* ----------------------------- 范围选择器 ----------------------------- */
+
+export interface CalendarPickerProps {
+  id?: string;
+  /** 起始字段名（表单提交用）。 */
+  startName?: string;
+  /** 结束字段名（表单提交用）。 */
+  endName?: string;
+  /** 受控范围值 {start,end}。提供时作为唯一来源（受控模式），由 onChange 回写。 */
+  value?: CalendarRangeValue;
+  /** 非受控初始范围值（对齐 Ext 默认 value 作为初值）。 */
+  defaultValue?: CalendarRangeValue;
+  /** 显示格式，对齐 Ext format（默认 'm/d/Y'）。 */
+  format?: string;
+  /** 单侧字段宽度（像素），透传给内部两个 TriggerField。 */
+  width?: number;
+  disabled?: boolean;
+  /** 文本框是否可编辑（对齐 Ext editable，默认 true）。 */
+  editable?: boolean;
+  /** 最小可选日期（格式字符串，对齐 Ext minValue），作用于起止两侧。 */
+  minValue?: string;
+  /** 最大可选日期（格式字符串，对齐 Ext maxValue），作用于起止两侧。 */
+  maxValue?: string;
+  /** 禁用的星期索引数组，如 [0,6]（对齐 Ext disabledDays）。 */
+  disabledDays?: number[];
+  /** 一周起始日，0=周日（对齐 Ext startDay）。 */
+  startDay?: number;
+  /** 是否显示底部“今天”按钮（范围选择器默认不显示，对齐 antd 双月面板观感）。 */
+  showToday?: boolean;
+  /** 未选择时的占位提示。 */
+  emptyText?: string;
+  placeholder?: string;
+  /** 起止之间的分隔符，默认“  至  ”。 */
+  separator?: string;
+  /** 范围变化回调（参数为 {start,end}）。 */
+  onChange?: (value: CalendarRangeValue) => void;
+  /** 从日历面板选中日期后的回调（对齐 Ext select，参数为最新 {start,end}）。 */
+  onSelect?: (value: CalendarRangeValue) => void;
+  cls?: string;
+  style?: CSSProperties;
+}
+
+export interface CalendarPickerHandle {
+  getValue: () => CalendarRangeValue;
+  setValue: (v: CalendarRangeValue) => void;
+  getValueDate: () => { start: Date | null; end: Date | null };
+  setValueDate: (start: Date | null, end: Date | null) => void;
+  getStartValue: () => string;
+  getEndValue: () => string;
+  setStartValue: (v: string) => void;
+  setEndValue: (v: string) => void;
+  focus: () => void;
+}
+
+const EMPTY: CalendarRangeValue = { start: '', end: '' };
+
+export const CalendarPicker = forwardRef<CalendarPickerHandle, CalendarPickerProps>(
+  function CalendarPicker(
+    {
+      id,
+      startName,
+      endName,
+      value,
+      defaultValue,
+      format = 'm/d/Y',
+      width,
+      disabled,
+      editable = true,
+      minValue,
+      maxValue,
+      disabledDays,
+      startDay,
+      showToday = false,
+      emptyText,
+      placeholder,
+      separator = '  至  ',
+      onChange,
+      onSelect,
+      cls,
+      style,
+    },
+    ref,
+  ) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState<CalendarRangeValue>(defaultValue ?? value ?? EMPTY);
+    const current = isControlled ? (value as CalendarRangeValue) : internal;
+
+    const [open, setOpen] = useState(false);
+    const wrapRef = useRef<HTMLSpanElement>(null);
+    const startRef = useRef<TriggerFieldHandle>(null);
+
+    const minD = minValue ? parseDate(minValue, format) ?? undefined : undefined;
+    const maxD = maxValue ? parseDate(maxValue, format) ?? undefined : undefined;
+    const startD = current.start ? parseDate(current.start, format) : null;
+    const endD = current.end ? parseDate(current.end, format) : null;
+    // 范围字段默认单侧宽度（隐藏触发器后 input 占满整宽，需给一个基准宽度避免塌陷）。
+    const fieldWidth = width ?? 120;
+
+    const commit = (next: CalendarRangeValue, picked: boolean) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+      if (picked) onSelect?.(next);
+    };
+
+    // 仅点「确定」时把面板内草稿提交到输入框并关闭面板（选日期本身不提交）。
+    const applyRange = (s: Date | null, e: Date | null) => {
+      commit(
+        {
+          start: s ? formatDate(s, format) : '',
+          end: e ? formatDate(e, format) : '',
+        },
+        true,
+      );
+      setOpen(false);
+    };
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getValue: () => current,
+        setValue: (v) => commit(v, false),
+        getValueDate: () => ({
+          start: current.start ? parseDate(current.start, format) : null,
+          end: current.end ? parseDate(current.end, format) : null,
+        }),
+        setValueDate: (s, e) =>
+          commit(
+            { start: s ? formatDate(s, format) : '', end: e ? formatDate(e, format) : '' },
+            false,
+          ),
+        getStartValue: () => current.start,
+        getEndValue: () => current.end,
+        setStartValue: (v) => commit({ ...current, start: v }, false),
+        setEndValue: (v) => commit({ ...current, end: v }, false),
+        focus: () => startRef.current?.focus(),
+      }),
+      [current, isControlled, format],
+    );
+
+    return (
+      <span
+        id={id}
+        ref={wrapRef}
+        className={cls}
+        style={{ position: 'relative', display: 'inline-block', ...style }}
+        onClick={() => !disabled && setOpen(true)}
+      >
+        <TriggerField
+          ref={startRef}
+          name={startName}
+          value={current.start}
+          width={fieldWidth}
+          disabled={disabled}
+          editable={editable}
+          hideTrigger
+          emptyText={emptyText}
+          placeholder={placeholder}
+          onChange={(v) => commit({ ...current, start: v }, false)}
+        />
+        <span
+          style={{ display: 'inline-block', verticalAlign: 'middle', color: '#444', padding: '0 4px' }}
+        >
+          {separator}
+        </span>
+        <TriggerField
+          name={endName}
+          value={current.end}
+          width={fieldWidth}
+          disabled={disabled}
+          editable={editable}
+          hideTrigger
+          emptyText={emptyText}
+          placeholder={placeholder}
+          onChange={(v) => commit({ ...current, end: v }, false)}
+        />
+        <RangeMenu
+          open={open}
+          anchorRef={wrapRef}
+          startValue={startD}
+          endValue={endD}
+          startDay={startDay}
+          showToday={showToday}
+          minDate={minD}
+          maxDate={maxD}
+          disabledDays={disabledDays}
+          onClose={() => setOpen(false)}
+          onApply={(s, e) => applyRange(s, e)}
+        />
+      </span>
+    );
+  },
+);
+
+CalendarPicker.displayName = 'CalendarPicker';