react-extjs 0.0.1

package/src/components/GridFilters.tsx

@@ -0,0 +1,332 @@
+import React from 'react';
+
+/**
+ * Ext.ux.grid.GridFilters 的保真复刻（本地过滤版）。
+ *
+ * 保真契约：
+ *  - 类型/校验逻辑严格对齐 examples/ux/gridfilters/filter/*.js 的 validateRecord / getValue / isActivatable。
+ *  - 控件 UI 复用原版 GridFilters.css / RangeMenu.css 的 iconCls（ux-rangemenu-gt/lt/eq、
+ *    ux-gridfilter-text-icon）与对应 PNG 图片，不新增/不改写任何 CSS。
+ *  - 通过 Grid 列定义上的 `filter` 配置驱动（对齐 Ext GridFilters.addFilters 读取 ColumnModel
+ *    上 filter 属性的列定义式用法）；type 缺省时按首条数据值推断（对齐 filter.type || field.type）。
+ */
+
+export type GridFilterType = 'string' | 'numeric' | 'date' | 'list' | 'boolean';
+
+export interface GridFilterConfig {
+  /** 过滤器类型；省略时按数据推断。 */
+  type?: GridFilterType;
+  /** 目标字段（通常与列 dataIndex 一致；列定义式下自动取列 dataIndex）。 */
+  dataIndex?: string;
+  /** 初始值。 */
+  value?: any;
+  /** 初始是否激活。 */
+  active?: boolean;
+  // string 专用
+  /** iconCls，默认 ux-gridfilter-text-icon。 */
+  iconCls?: string;
+  // numeric / date 专用：比较子项顺序（'-' 为分隔线）
+  menuItems?: string[];
+  // date 专用
+  dateFormat?: string;
+  beforeText?: string;
+  afterText?: string;
+  onText?: string;
+  // list 专用：本地选项（数组，元素可为 字符串 | [id,label] | {id,label/name/text}）
+  options?: any[];
+  phpMode?: boolean;
+  // boolean 专用
+  yesText?: string;
+  noText?: string;
+  defaultValue?: boolean | null;
+  [k: string]: any;
+}
+
+const BLANK = '/extjs-assets/images/default/s.gif';
+
+/** 按首条数据值推断过滤器类型（对齐 Ext filter.type || store.fields.get(dI).type）。 */
+export function inferFilterType(data: any[], dataIndex: string): GridFilterType {
+  const vals = (data || [])
+    .map((r) => r[dataIndex])
+    .filter((v) => v !== undefined && v !== null && v !== '');
+  if (vals.length === 0) return 'string';
+  if (vals.every((v) => typeof v === 'boolean')) return 'boolean';
+  if (vals.every((v) => typeof v === 'number')) return 'numeric';
+  if (vals.every((v) => v instanceof Date)) return 'date';
+  if (
+    typeof vals[0] === 'string' &&
+    vals.every((v) => /^\d{4}-\d{2}-\d{2}/.test(String(v)))
+  ) {
+    return 'date';
+  }
+  return 'string';
+}
+
+/** 各类型的空值初始态。 */
+export function defaultEmpty(def: GridFilterConfig): any {
+  switch (def.type) {
+    case 'numeric':
+    case 'date':
+      return {};
+    case 'list':
+      return [];
+    case 'boolean':
+      return def.defaultValue ?? null;
+    default:
+      return '';
+  }
+}
+
+/** 是否具备激活条件（对齐各 Filter.isActivatable）。 */
+export function isFilterActivatable(def: GridFilterConfig, value: any): boolean {
+  switch (def.type) {
+    case 'string':
+      return !!value && String(value).length > 0;
+    case 'numeric':
+      return (
+        !!value &&
+        Object.keys(value).some(
+          (k) => value[k] !== undefined && value[k] !== null && value[k] !== '',
+        )
+      );
+    case 'date':
+      return (
+        !!value &&
+        Object.keys(value).some((k) => !!value[k])
+      );
+    case 'list':
+      return !!value && Array.isArray(value) && value.length > 0;
+    case 'boolean':
+      return value !== undefined && value !== null;
+    default:
+      return false;
+  }
+}
+
+function dayMs(s: string): number {
+  if (!s) return NaN;
+  // 按「日」比较：取前 10 位 YYYY-MM-DD，兼容 'YYYY-MM-DD' 与 'YYYY-MM-DD HH:MM:SS' 两种数据格式，
+  // 与原版 Ext DateFilter 仅按日期判定（忽略时分秒）一致。
+  const t = new Date(String(s).slice(0, 10) + 'T00:00:00').getTime();
+  return t;
+}
+
+/** 单条记录是否通过某过滤器（对齐各 Filter.validateRecord）。 */
+export function validateFilter(def: GridFilterConfig, value: any, row: any): boolean {
+  const di = def.dataIndex as string;
+  const v = row[di];
+  switch (def.type) {
+    case 'string': {
+      const fv = (value as string) || '';
+      if (typeof v !== 'string') return fv.length === 0;
+      return v.toLowerCase().indexOf(fv.toLowerCase()) > -1;
+    }
+    case 'numeric': {
+      const val = v as number;
+      const fv = (value || {}) as Record<string, number | undefined>;
+      if (fv.eq !== undefined && fv.eq !== null && val != fv.eq) return false;
+      if (fv.lt !== undefined && fv.lt !== null && (val as number) >= fv.lt) return false;
+      if (fv.gt !== undefined && fv.gt !== null && (val as number) <= fv.gt) return false;
+      return true;
+    }
+    case 'date': {
+      if (typeof v !== 'string' || !v) return false;
+      const t = dayMs(v);
+      if (isNaN(t)) return false;
+      const fv = (value || {}) as Record<string, string | undefined>;
+      if (fv.before && dayMs(fv.before) <= t) return false;
+      if (fv.after && dayMs(fv.after) >= t) return false;
+      if (fv.on && dayMs(fv.on) !== t) return false;
+      return true;
+    }
+    case 'list': {
+      const sel = (value as any[]) || [];
+      return sel.indexOf(v) > -1;
+    }
+    case 'boolean': {
+      return v === !!value;
+    }
+    default:
+      return true;
+  }
+}
+
+/** 把 list 的 options 元素归一化为 [id, label]。 */
+function normalizeOption(opt: any): [string, string] {
+  if (Array.isArray(opt)) return [String(opt[0]), String(opt[1])];
+  if (opt && typeof opt === 'object') {
+    const id = opt.id;
+    const label = opt.text ?? opt.name ?? opt.label ?? String(id);
+    return [String(id), String(label)];
+  }
+  return [String(opt), String(opt)];
+}
+
+export interface FilterWidgetProps {
+  def: GridFilterConfig;
+  value: any;
+  onChange: (value: any) => void;
+}
+
+/**
+ * 过滤器子菜单控件（对齐 Ext.ux.menu.RangeMenu / ListMenu / DateFilter / StringFilter / BooleanFilter 的菜单体）。
+ * 通过 Menu 的 render 插槽承载，复用原版 iconCls 图片。
+ */
+export const FilterWidget: React.FC<FilterWidgetProps> = ({ def, value, onChange }) => {
+  const v = value ?? defaultEmpty(def);
+
+  if (def.type === 'string') {
+    return (
+      <div style={{ padding: '3px 6px', minWidth: 160 }}>
+        <input
+          type="text"
+          placeholder="Enter Filter Text..."
+          value={typeof v === 'string' ? v : ''}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ width: '100%', boxSizing: 'border-box' }}
+        />
+      </div>
+    );
+  }
+
+  if (def.type === 'numeric') {
+    const items: Array<[string, string, string] | '-'> = [
+      ['lt', def.beforeText ?? 'Less Than', 'ux-rangemenu-lt'],
+      ['gt', def.afterText ?? 'Greater Than', 'ux-rangemenu-gt'],
+      '-',
+      ['eq', def.onText ?? 'Equals', 'ux-rangemenu-eq'],
+    ];
+    return (
+      <div style={{ padding: '3px 6px', minWidth: 170 }}>
+        {items.map((it, idx) =>
+          it === '-' ? (
+            <div key={`sep-${idx}`} className="x-menu-sep-li" style={{ margin: '2px 0' }}>
+              <span className="x-menu-sep" />
+            </div>
+          ) : (
+            <div
+              key={it[0]}
+              style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}
+            >
+              <img className={`x-menu-item-icon ${it[2]}`} src={BLANK} alt="" />
+              <input
+                type="number"
+                placeholder={it[1]}
+                value={v[it[0]] ?? ''}
+                onChange={(e) => {
+                  const nv = { ...v };
+                  const raw = e.target.value;
+                  if (raw === '') delete nv[it[0]];
+                  else nv[it[0]] = Number(raw);
+                  onChange(nv);
+                }}
+                style={{ width: 110, boxSizing: 'border-box' }}
+              />
+            </div>
+          ),
+        )}
+      </div>
+    );
+  }
+
+  if (def.type === 'date') {
+    const fields: Array<[string, string, string]> = [
+      ['before', def.beforeText ?? 'Before', 'ux-rangemenu-lt'],
+      ['after', def.afterText ?? 'After', 'ux-rangemenu-gt'],
+      ['on', def.onText ?? 'On', 'ux-rangemenu-eq'],
+    ];
+    return (
+      <div style={{ padding: '3px 6px', minWidth: 180 }}>
+        {fields.map((f) => (
+          <div
+            key={f[0]}
+            style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}
+          >
+            <img className={`x-menu-item-icon ${f[2]}`} src={BLANK} alt="" />
+            <span style={{ width: 48 }}>{f[1]}</span>
+            <input
+              type="date"
+              value={v[f[0]] ?? ''}
+              onChange={(e) => {
+                const nv = { ...v };
+                if (!e.target.value) delete nv[f[0]];
+                else nv[f[0]] = e.target.value;
+                onChange(nv);
+              }}
+              style={{ boxSizing: 'border-box' }}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (def.type === 'list') {
+    const opts = (def.options || []).map(normalizeOption);
+    return (
+      <div style={{ padding: '2px 0', maxHeight: 220, overflow: 'auto', minWidth: 150 }}>
+        {opts.map(([id, label]) => {
+          const checked = Array.isArray(v) && v.indexOf(id) > -1;
+          return (
+            <div
+              key={id}
+              className={[
+                'x-menu-list-item',
+                'x-menu-item-check-item',
+                checked ? 'x-menu-item-checked' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              style={{ position: 'relative', cursor: 'pointer' }}
+              onClick={(e) => {
+                e.stopPropagation();
+                const set = new Set(Array.isArray(v) ? v : []);
+                if (set.has(id)) set.delete(id);
+                else set.add(id);
+                onChange([...set]);
+              }}
+            >
+              {checked && <img className="x-menu-item-icon" src={BLANK} alt="" />}
+              <span className="x-menu-item-text">{label}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // boolean
+  const yes = def.yesText ?? 'Yes';
+  const no = def.noText ?? 'No';
+  const cur = v === true;
+  const row = (label: string, val: boolean) => {
+    const checked = cur === val;
+    return (
+      <div
+        className={[
+          'x-menu-list-item',
+          'x-menu-item-check-item',
+          checked ? 'x-menu-item-checked' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        style={{ position: 'relative', cursor: 'pointer' }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onChange(val);
+        }}
+      >
+        {checked && <img className="x-menu-item-icon" src={BLANK} alt="" />}
+        <span className="x-menu-item-text">{label}</span>
+      </div>
+    );
+  };
+  return (
+    <div style={{ padding: '2px 0', minWidth: 120 }}>
+      {row(yes, true)}
+      {row(no, false)}
+    </div>
+  );
+};
+
+export default FilterWidget;

package/src/components/GroupTab.tsx

@@ -0,0 +1,274 @@
+import React, { Children, isValidElement, useMemo, useState } from 'react';
+
+/**
+ * GroupTab（等价 Ext.ux.GroupTabPanel / GroupTab）
+ * ------------------------------------------------------------------
+ * 分组标签：左侧分组条（每个分组含一个主标题 + 可展开的 sub-tab 子列表），
+ * 右侧 CardLayout 显示「当前激活分组」的「当前激活子页」。
+ *
+ * 交互完全由 mousedown / click 驱动（与 Ext 一致，本组件无拖拽）：
+ *  - 点击 expand 开关（a.x-grouptabs-expand） -> 展开/收起该分组的 sub 列表；
+ *  - 点击分组主标题（非 sub、非 expand）     -> 激活该分组并把内容定位到 mainItem；
+ *  - 点击某个 sub 子页                       -> 激活该分组并切换到对应子页。
+ *
+ * 注意：Ext 原文的 expand / 圆角 / joint 都依赖 gif 图片资源，这里用纯 CSS
+ * （+/- 伪元素、白边 joint）忠实还原视觉，不引入外部图片。
+ */
+
+export interface GroupTabPageProps {
+  /** 子页 id（缺省自动生成） */
+  pageId?: string;
+  title: string;
+  /** 图标类（demo 中可自定义 CSS 着色），可选 */
+  iconCls?: string;
+  /** 悬停提示（等价 tabTip） */
+  tabTip?: string;
+  children?: React.ReactNode;
+}
+
+/** 声明式占位：仅用于配置，真实渲染由 GroupTabPanel 接管 */
+export const GroupTabPage: React.FC<GroupTabPageProps> = () => null;
+
+export interface GroupTabProps {
+  /** 分组 id（缺省自动生成） */
+  groupId?: string;
+  title: string;
+  iconCls?: string;
+  /** 初始是否展开 sub 列表 */
+  expanded?: boolean;
+  /** 点击分组主标题时定位到的子页：索引或 pageId，默认 0 */
+  mainItem?: number | string;
+  /** 子页：GroupTabPage 列表 */
+  children?: React.ReactNode;
+}
+
+/** 声明式占位：仅用于配置 */
+export const GroupTab: React.FC<GroupTabProps> = () => null;
+
+export interface GroupTabPanelProps {
+  /** 分组条位置，默认 left */
+  tabPosition?: 'left' | 'right';
+  /** 初始激活分组：索引或 groupId，默认第 0 个 */
+  activeGroup?: number | string;
+  /** 左侧分组条宽度（等价 Ext.TabPanel.tabWidth，原生默认 120） */
+  tabWidth?: number;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+interface ParsedPage {
+  id: string;
+  title: string;
+  iconCls?: string;
+  tabTip?: string;
+  content: React.ReactNode;
+}
+interface ParsedGroup {
+  id: string;
+  title: string;
+  iconCls?: string;
+  expanded: boolean;
+  mainItem: string; // 解析后的 pageId
+  pages: ParsedPage[];
+}
+
+function parseGroups(children: React.ReactNode): ParsedGroup[] {
+  const groups: ParsedGroup[] = [];
+  Children.forEach(children, (gc, gi) => {
+    if (!isValidElement(gc)) return;
+    if (gc.type !== GroupTab) return;
+    const gp = gc.props as GroupTabProps;
+    const gid = gp.groupId ?? `gt-${gi}`;
+    const pages: ParsedPage[] = [];
+    Children.forEach(gp.children, (pc, pi) => {
+      if (!isValidElement(pc)) return;
+      if (pc.type !== GroupTabPage) return;
+      const pp = pc.props as GroupTabPageProps;
+      pages.push({
+        id: pp.pageId ?? `pg-${gi}-${pi}`,
+        title: pp.title,
+        iconCls: pp.iconCls,
+        tabTip: pp.tabTip,
+        content: pp.children,
+      });
+    });
+    let mainItem: string;
+    if (typeof gp.mainItem === 'number') {
+      mainItem = pages[gp.mainItem]?.id ?? pages[0]?.id ?? '';
+    } else if (typeof gp.mainItem === 'string') {
+      mainItem = pages.find((p) => p.id === gp.mainItem)?.id ?? pages[0]?.id ?? '';
+    } else {
+      mainItem = pages[0]?.id ?? '';
+    }
+    groups.push({
+      id: gid,
+      title: gp.title,
+      iconCls: gp.iconCls,
+      expanded: gp.expanded ?? false,
+      mainItem,
+      pages,
+    });
+  });
+  return groups;
+}
+
+export const GroupTabPanel: React.FC<GroupTabPanelProps> = ({
+  tabPosition = 'left',
+  activeGroup,
+  tabWidth = 120,
+  width,
+  height,
+  className,
+  children,
+}) => {
+  const groups = useMemo(() => parseGroups(children), [children]);
+
+  const initGroupId = useMemo(() => {
+    if (typeof activeGroup === 'number') return groups[activeGroup]?.id ?? groups[0]?.id ?? '';
+    if (typeof activeGroup === 'string') {
+      return groups.find((g) => g.id === activeGroup)?.id ?? groups[0]?.id ?? '';
+    }
+    return groups[0]?.id ?? '';
+  }, [groups, activeGroup]);
+
+  const [activeGroupId, setActiveGroupId] = useState<string>(initGroupId);
+  const [expanded, setExpanded] = useState<Record<string, boolean>>(() => {
+    const m: Record<string, boolean> = {};
+    groups.forEach((g) => (m[g.id] = g.expanded));
+    return m;
+  });
+  const [activeTabByGroup, setActiveTabByGroup] = useState<Record<string, string>>(() => {
+    const m: Record<string, string> = {};
+    groups.forEach((g) => (m[g.id] = g.mainItem));
+    return m;
+  });
+
+  const activateGroup = (gid: string) => {
+    const g = groups.find((x) => x.id === gid);
+    if (!g) return;
+    setActiveGroupId(gid);
+    setActiveTabByGroup((prev) => ({ ...prev, [gid]: g.mainItem }));
+  };
+
+  const toggleGroup = (gid: string) =>
+    setExpanded((prev) => ({ ...prev, [gid]: !prev[gid] }));
+
+  const activatePage = (gid: string, pid: string) => {
+    setActiveGroupId(gid);
+    setActiveTabByGroup((prev) => ({ ...prev, [gid]: pid }));
+  };
+
+  const activeGroupData = groups.find((g) => g.id === activeGroupId);
+  const activePage = activeGroupData?.pages.find(
+    (p) => p.id === activeTabByGroup[activeGroupId],
+  );
+
+  const wrapStyle: React.CSSProperties = {
+    width: width ?? '100%',
+    height: height ?? 320,
+  };
+
+  // 原生 GroupTab.css 采用 float 布局（.x-tab-panel-left .x-grouptabs-panel-header{float:left}
+  // / .x-grouptabs-bwrap{float:right}），其宽度本应由 Ext.TabPanel 的 JS 布局计算
+  // （GroupTabPanel.js: header.setWidth(tabWidth)；adjustBodyWidth(w) => w - tabWidth）。
+  // 本 React 组件未复刻该 JS，故在此以组件内联方式补齐等价宽度，使原生 float 布局成立。
+  const headerStyle: React.CSSProperties = {
+    width: tabWidth,
+    height: '100%',
+  };
+  const bwrapStyle: React.CSSProperties = {
+    width: `calc(100% - ${tabWidth}px)`,
+    height: '100%',
+  };
+
+  return (
+    <div
+      className={[
+        'x-grouptabs-panel',
+        `x-tab-panel-${tabPosition}`,
+        'x-grouptabs-panel-' + tabPosition,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={wrapStyle}
+    >
+      <div
+        className={`x-tab-panel-header x-grouptabs-panel-header x-tab-panel-header-${tabPosition}`}
+        style={headerStyle}
+      >
+        <div className="x-tab-strip-wrap" style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
+          <ul
+            className={`x-grouptabs-strip x-grouptabs-tab-strip-${tabPosition}`}
+            style={{ listStyle: 'none', margin: 0, padding: 0 }}
+          >
+            {groups.map((g, gi) => {
+              const isActiveGroup = g.id === activeGroupId;
+              const isExpanded = !!expanded[g.id];
+              const groupCls = [
+                'x-grouptabs-main',
+                gi === 0 ? 'x-tab-first' : '',
+                isActiveGroup ? 'x-grouptabs-strip-active' : '',
+                isExpanded ? 'x-grouptabs-expanded' : '',
+              ]
+                .filter(Boolean)
+                .join(' ');
+              return (
+                <li key={g.id} className={groupCls} id={g.id}>
+                  <a
+                    className="x-grouptabs-expand"
+                    onClick={() => toggleGroup(g.id)}
+                    title={isExpanded ? '收起' : '展开'}
+                  />
+                  <a
+                    className={`x-grouptabs-text ${g.iconCls ?? ''}`}
+                    onClick={() => activateGroup(g.id)}
+                  >
+                    {g.iconCls ? <span className={`x-grouptabs-icon ${g.iconCls}`} /> : null}
+                    <span className="x-grouptabs-label">{g.title}</span>
+                  </a>
+                  {isExpanded && g.pages.length > 0 && (
+                    <ul className="x-grouptabs-sub">
+                      {g.pages.map((p) => {
+                        const isActivePage = isActiveGroup && p.id === activeTabByGroup[g.id];
+                        return (
+                          <li
+                            key={p.id}
+                            className={isActivePage ? 'x-grouptabs-strip-active' : ''}
+                            title={p.tabTip}
+                          >
+                            <a
+                              className={`x-grouptabs-text ${p.iconCls ?? ''}`}
+                              onClick={() => activatePage(g.id, p.id)}
+                            >
+                              {p.iconCls ? (
+                                <span className={`x-grouptabs-icon ${p.iconCls}`} />
+                              ) : null}
+                              <span className="x-grouptabs-label">{p.title}</span>
+                            </a>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+      <div className="x-grouptabs-bwrap" style={bwrapStyle}>
+        <div
+          className={`x-tab-panel-body x-tab-panel-body-${tabPosition} x-grouptabs-panel-body`}
+          style={{ width: '100%', height: '100%', overflow: 'auto' }}
+        >
+          <div className="x-grouptab-page">{activePage ? activePage.content : null}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GroupTabPanel;