npm - react-extjs - Versions diffs - 0.0.1 - Mend

react-extjs 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/LICENSE +21 -0
package/package.json +36 -0
package/src/components/AbsoluteLayout.tsx +206 -0
package/src/components/Accordion.tsx +266 -0
package/src/components/AnchorLayout.tsx +131 -0
package/src/components/BorderLayout.tsx +512 -0
package/src/components/Box.tsx +289 -0
package/src/components/Button.tsx +300 -0
package/src/components/ButtonGroup.tsx +170 -0
package/src/components/CalendarPicker.tsx +431 -0
package/src/components/CardLayout.tsx +122 -0
package/src/components/CenterLayout.tsx +95 -0
package/src/components/CheckboxGroup.tsx +200 -0
package/src/components/ColorMenu.tsx +195 -0
package/src/components/ColorPalette.tsx +126 -0
package/src/components/ColumnLayout.tsx +183 -0
package/src/components/ColumnTree.tsx +383 -0
package/src/components/CycleButton.tsx +302 -0
package/src/components/DataView.tsx +244 -0
package/src/components/DataViewMore.tsx +337 -0
package/src/components/DataViewTransition.tsx +235 -0
package/src/components/DateMenu.tsx +163 -0
package/src/components/DatePicker.tsx +387 -0
package/src/components/DisplayField.tsx +73 -0
package/src/components/Editor.tsx +214 -0
package/src/components/EditorGrid.tsx +361 -0
package/src/components/FieldLabeler.tsx +81 -0
package/src/components/FieldReplicator.tsx +135 -0
package/src/components/FieldSet.tsx +149 -0
package/src/components/FitLayout.tsx +76 -0
package/src/components/Form.tsx +3484 -0
package/src/components/Grid.tsx +2173 -0
package/src/components/GridFilters.tsx +332 -0
package/src/components/GroupTab.tsx +274 -0
package/src/components/HtmlEditor.tsx +391 -0
package/src/components/ImageOrganizer.tsx +984 -0
package/src/components/ImageOrganizerService.ts +361 -0
package/src/components/ListView.tsx +221 -0
package/src/components/LoadMask.tsx +74 -0
package/src/components/Menu.tsx +227 -0
package/src/components/MessageBox.tsx +138 -0
package/src/components/MultiSlider.tsx +369 -0
package/src/components/Organizer.tsx +403 -0
package/src/components/PagingToolbar.tsx +255 -0
package/src/components/Panel.tsx +451 -0
package/src/components/ProgressBar.tsx +127 -0
package/src/components/PropertyGrid.tsx +142 -0
package/src/components/QuickTip.tsx +174 -0
package/src/components/Resizable.tsx +241 -0
package/src/components/RowLayout.tsx +126 -0
package/src/components/Slider.tsx +353 -0
package/src/components/SliderField.tsx +206 -0
package/src/components/SpinnerField.tsx +141 -0
package/src/components/SplitBar.tsx +215 -0
package/src/components/Spotlight.tsx +262 -0
package/src/components/StatusBar.tsx +118 -0
package/src/components/TabPanel.tsx +540 -0
package/src/components/TableLayout.tsx +132 -0
package/src/components/ThemeSwitcher.tsx +167 -0
package/src/components/ToolTip.tsx +226 -0
package/src/components/Toolbar.tsx +321 -0
package/src/components/Tree.tsx +809 -0
package/src/components/TreeGrid.tsx +418 -0
package/src/components/Viewport.tsx +218 -0
package/src/components/Window.tsx +441 -0
package/src/components/Writer.tsx +303 -0
package/src/components/XmlTreeLoader.tsx +233 -0
package/src/components/dnd/DndContext.tsx +328 -0
package/src/components/dnd/DragSource.tsx +202 -0
package/src/components/dnd/DragZone.tsx +66 -0
package/src/components/dnd/DropTarget.tsx +86 -0
package/src/components/dnd/DropZone.tsx +166 -0
package/src/components/dnd/PanelProxy.tsx +81 -0
package/src/components/dnd/PanelResizer.tsx +143 -0
package/src/components/dnd/Portal.tsx +254 -0
package/src/components/dnd/Reorderer.tsx +73 -0
package/src/components/dnd/ToolbarReorderer.tsx +226 -0
package/src/main.tsx +2649 -0
package/src/styles/ext-theme.css +889 -0
package/src/util/theme.ts +95 -0

package/src/components/ThemeSwitcher.tsx ADDED Viewed

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { ComboBox, type ComboItem } from './Form';
+import { ensureDefaultTheme, resolveHref } from '../util/theme';
+/* ThemeSwitcher —— 用保真复刻的 ComboBox 驱动 Ext JS 3.2.1 的原生主题切换。
+ *
+ * 机制（对齐 Ext.util.CSS.swapStyleSheet，src/util/CSS.js:68）：
+ *   Ext 的「主题」= 整篇替换 <head> 中主题样式表 <link> 指向的 xtheme-*.css。
+ *   本组件按固定 id 复用/新建一条 <link> 追加到 <head> 末尾；相等特异性下后加载者
+ *   （即本主题表）优先，从而覆盖 base 结构表（ext-all.css）之上的默认蓝主题。
+ *   等价于删旧 link + 新建 link，不改动任何组件 DOM 与既有 CSS。
+ *
+ * 用法：
+ *   import { ThemeSwitcher } from 'react-extjs/components/ThemeSwitcher';
+ *   <ThemeSwitcher />                       // 默认 4 套 Ext 主题 + localStorage 持久化
+ *   <ThemeSwitcher themes={[...]} storageKey={false} />  // 自定义主题、关闭持久化
+ */
+export type ThemeOption = ComboItem;
+/* 本组件只按 Ext.util.CSS.swapStyleSheet 机制整篇替换主题 <link>：换文件即换色。
+ * 主题色完全由被加载的 xtheme-*.css（原版 ExtJS 主题表）本身决定，切换器不含任何样式逻辑；
+ * 各组件亦直接套用原版 ExtJS 类名（.x-panel/.x-panel-header/.x-splitbar-h 等）由 ext-all.css /
+ * xtheme 主题化，不新增任何自定义 CSS 变量或规则。 */
+export const EXT_THEMES: ThemeOption[] = [
+  { value: 'xtheme-blue', text: 'Blue（默认）' },
+  { value: 'xtheme-gray', text: 'Gray' },
+  { value: 'xtheme-access', text: 'Accessibility' },
+  { value: 'xtheme-brand', text: 'Brand（品牌绿）' },
+];
+export interface ThemeSwitcherProps {
+  /** 可选主题列表；默认 EXT_THEMES（Blue / Gray / Accessibility / Brand 品牌绿）。
+   *  value 为主题 CSS 基名（如 'xtheme-gray'，组件自动拼 cssBase + '.css'）；
+   *  也可直接传完整 href（含 '/' 或以 '.css' 结尾或 http(s):），用于自定义主题路径。 */
+  themes?: ThemeOption[];
+  /** 受控当前主题 value；不传则由组件内部管理（优先读 storageKey，否则 defaultValue / 首项）。 */
+  value?: string;
+  /** 非受控初始主题 value。 */
+  defaultValue?: string;
+  /** 切换回调：(value, option) => void。 */
+  onChange?: (value: string, option: ThemeOption) => void;
+  /** 左侧标签文字；传空字符串可隐藏标签。默认 '主题'。 */
+  label?: string;
+  /** ComboBox 宽度。默认 170。 */
+  width?: number;
+  /** localStorage 持久化 key；传 false 关闭持久化。默认 'react-extjs-theme'。 */
+  storageKey?: string | false;
+  /** 动态主题 <link> 的 id（同页多个切换器时用不同 id 隔离）。默认 'extjs-dynamic-theme'。 */
+  linkId?: string;
+  /** 主题 CSS 目录前缀（用于拼基名 href）。默认 '/extjs-assets/css/'。 */
+  cssBase?: string;
+  /** 是否允许输入过滤。默认 false（纯选择）。 */
+  editable?: boolean;
+  /** 内部 ComboBox 的 id（不传则自动生成，保证同页多实例不冲突）。 */
+  id?: string;
+  /** 根节点附加 class（根节点已含 x-theme-switcher）。 */
+  className?: string;
+  /** 根节点 inline style。 */
+  style?: React.CSSProperties;
+}
+/** 把主题 value 解析为完整 href（实现见 src/util/theme.ts 的 resolveHref，本组件直接复用）。 */
+/** 等价 Ext.util.CSS.swapStyleSheet：按 id 复用/新建一条主题 <link>。 */
+function applyTheme(value: string, cssBase: string, linkId: string) {
+  const href = resolveHref(value, cssBase);
+  let link = document.getElementById(linkId) as HTMLLinkElement | null;
+  if (!link) {
+    link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    document.head.appendChild(link);
+  }
+  if (link.getAttribute('href') !== href) {
+    link.href = href;
+  }
+}
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = (props) => {
+  const {
+    themes = EXT_THEMES,
+    value,
+    defaultValue,
+    onChange,
+    label = '主题',
+    width = 170,
+    storageKey = 'react-extjs-theme',
+    linkId = 'extjs-dynamic-theme',
+    cssBase = '/extjs-assets/css/',
+    editable = false,
+    id,
+    className,
+    style,
+  } = props;
+  const controlled = value !== undefined;
+  const reactId = React.useId();
+  const comboId = id ?? `x-theme-switcher-${reactId}`;
+  const [internal, setInternal] = useState<string>(() => {
+    if (controlled) return value as string;
+    const stored = storageKey ? localStorage.getItem(storageKey) : null;
+    return stored || defaultValue || (themes[0] ? themes[0].value : '');
+  });
+  const current = controlled ? (value as string) : internal;
+  // 每次 current 变化即应用主题（含挂载初值与 storage 恢复）。
+  useEffect(() => {
+    // 保证默认主题 <link> 存在（无 ThemeSwitcher 时由入口 ensureDefaultTheme 建；
+    // 此处再幂等兜底，使仅引入本组件也必有默认主题）。
+    ensureDefaultTheme({ linkId, cssBase });
+    applyTheme(current, cssBase, linkId);
+  }, [current, cssBase, linkId]);
+  // 卸载清理：仅「非持久化」实例移除其主题 <link>，避免离开演示页后残留全局样式表。
+  // 持久化实例（含默认 storageKey）的 link 保留，作为站点级主题来源。
+  useEffect(() => {
+    return () => {
+      if (storageKey === false) {
+        const l = document.getElementById(linkId);
+        if (l && l.parentNode) l.parentNode.removeChild(l);
+      }
+    };
+  }, [linkId, storageKey]);
+  const handleChange = (v: string) => {
+    if (!controlled) setInternal(v);
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, v);
+      } catch {
+        /* localStorage 不可用时忽略，仅本次生效 */
+      }
+    }
+    const opt = themes.find((t) => t.value === v);
+    onChange?.(v, opt as ThemeOption);
+  };
+  return (
+    <div
+      className={className ? `x-theme-switcher ${className}` : 'x-theme-switcher'}
+      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, ...style }}
+    >
+      {label ? (
+        <label
+          className="x-theme-switcher-label"
+          htmlFor={comboId}
+          style={{ whiteSpace: 'nowrap' }}
+        >
+          {label}
+        </label>
+      ) : null}
+      <ComboBox
+        id={comboId}
+        name="theme"
+        data={themes}
+        value={current}
+        onChange={handleChange}
+        width={width}
+        editable={editable}
+      />
+    </div>
+  );
+};
+export default ThemeSwitcher;

package/src/components/ToolTip.tsx ADDED Viewed

@@ -0,0 +1,226 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useImperativeHandle,
+} from 'react';
+export type ToolTipAnchor = 'top' | 'bottom' | 'left' | 'right';
+export interface ToolTipProps {
+  /** 标题（渲染 .x-tip-header > .x-tip-header-text） */
+  title?: string;
+  /** body 内容（HTML 字符串，渲染进 .x-tip-body） */
+  html?: string;
+  /** body 内容（React 节点，与 html 二选一） */
+  children?: React.ReactNode;
+  /** tip 宽度（px）。未给时由内容撑开（对齐 Ext 默认 autoWidth） */
+  width?: number;
+  /** 是否渲染关闭按钮（.x-tip-close） */
+  closable?: boolean;
+  /** 箭头方向（在对应边中央绘制 .x-tip-anchor） */
+  anchor?: ToolTipAnchor;
+  /** 阴影（Ext 默认 'sides'，此处仅占位，保真时关闭以免半透明阴影干扰像素对比） */
+  shadow?: boolean;
+  /** 相对容器的 left（对齐 Ext showAt 的 x） */
+  x?: number;
+  /** 相对容器的 top（对齐 Ext showAt 的 y） */
+  y?: number;
+  /** hover 目标元素 CSS 选择器；提供后默认隐藏，鼠标进入显示、移出隐藏 */
+  target?: string;
+  /** 显示延迟（ms）。Ext 默认 500；测试可设 0 加速 */
+  showDelay?: number;
+  /** 隐藏延迟（ms）。Ext 默认 200 */
+  hideDelay?: number;
+  /** 受控初始可见（保真固定显示用） */
+  visible?: boolean;
+  onClose?: () => void;
+  /** 保真裁剪/测试定位用根节点 testid */
+  testId?: string;
+  /** 附加根 class */
+  className?: string;
+  /** 附加根 style（覆盖/补充定位） */
+  style?: React.CSSProperties;
+}
+/** 命令式句柄：运行时控制显示/隐藏与内容 */
+export interface ToolTipHandle {
+  /** 显示 tip */
+  show: () => void;
+  /** 隐藏 tip */
+  hide: () => void;
+  /** 当前是否可见 */
+  isVisible: () => boolean;
+  /** 运行时改写标题 */
+  setTitle: (title: string) => void;
+  /** 运行时改写 body（HTML 字符串） */
+  setBody: (html: string) => void;
+}
+/**
+ * 保真映射（来源 src/widgets/tips/Tip.js + ext-all.css .x-tip 规则）：
+ * - Tip 继承 Panel，baseCls='x-tip'，frame:true → 复用 9 宫格圆角结构，
+ *   但 class 前缀为 x-tip-（非 x-panel-）：tl/tr/tc/ml/mr/mc/bl/br/bc。
+ * - header 落于 .x-tip-tc 内（class x-tip-header > span.x-tip-header-text）；
+ *   可选 closable 渲染 .x-tip-close（CSS 背景 qtip/close.gif）。
+ * - body 落于 .x-tip-mc 内（class x-tip-body）。
+ * - anchor 箭头：.x-tip-anchor（绝对定位，width 9px）+ x-tip-anchor-{top|bottom|left|right}。
+ * - 根 .x-tip position:absolute（CSS），inline left/top 由 showAt 注入。
+ * React 仅重写行为与定位，DOM 结构与 class 名与 Ext JS 3.2.1 完全一致。
+ */
+export const ToolTip = forwardRef<ToolTipHandle, ToolTipProps>(function ToolTip(
+  {
+    title,
+    html,
+    children,
+    width,
+    closable = false,
+    anchor,
+    x = 0,
+    y = 0,
+    target,
+    showDelay = 500,
+    hideDelay = 200,
+    visible,
+    onClose,
+    testId,
+    className,
+    style,
+  },
+  ref,
+) {
+  // 双轨：prop 作为初始值，句柄可运行时改写
+  const [dynTitle, setDynTitle] = useState(title);
+  const [dynHtml, setDynHtml] = useState(html);
+  const [dynVisible, setDynVisible] = useState(visible ?? true);
+  // visible / title / html prop 受控：变化时同步到双轨 state
+  useEffect(() => {
+    setDynVisible(visible ?? true);
+  }, [visible]);
+  useEffect(() => {
+    setDynTitle(title);
+  }, [title]);
+  useEffect(() => {
+    setDynHtml(html);
+  }, [html]);
+  const shown = dynVisible;
+  const showTimer = useRef<number | undefined>(undefined);
+  const hideTimer = useRef<number | undefined>(undefined);
+  const show = useCallback(() => setDynVisible(true), []);
+  const hide = useCallback(() => setDynVisible(false), []);
+  const isVisible = useCallback(() => dynVisible, [dynVisible]);
+  const setTitle = useCallback((t: string) => setDynTitle(t), []);
+  const setBody = useCallback((h: string) => setDynHtml(h), []);
+  useImperativeHandle(
+    ref,
+    () => ({ show, hide, isVisible, setTitle, setBody }),
+    [show, hide, isVisible, setTitle, setBody],
+  );
+  const showHeader = !!dynTitle || closable;
+  // hover 触发显示/隐藏（target 存在时启用）
+  useEffect(() => {
+    if (!target) return;
+    setDynVisible(false);
+    const el = document.querySelector(target);
+    if (!el) return;
+    const onOver = () => {
+      window.clearTimeout(hideTimer.current);
+      showTimer.current = window.setTimeout(() => setDynVisible(true), showDelay);
+    };
+    const onOut = () => {
+      window.clearTimeout(showTimer.current);
+      hideTimer.current = window.setTimeout(() => setDynVisible(false), hideDelay);
+    };
+    el.addEventListener('mouseover', onOver);
+    el.addEventListener('mouseout', onOut);
+    return () => {
+      el.removeEventListener('mouseover', onOver);
+      el.removeEventListener('mouseout', onOut);
+      window.clearTimeout(showTimer.current);
+      window.clearTimeout(hideTimer.current);
+    };
+    // 仅绑定一次（target/延迟变化极少，演示固定）
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
+  const rootStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: x,
+    top: y,
+    visibility: shown ? 'visible' : 'hidden',
+    ...(width !== undefined ? { width } : {}),
+  };
+  // anchor 默认定位（与 Ext.syncAnchor 近似：贴边中央偏左位置由 CSS sprite 决定视觉，
+  // 这里仅给一个合理的几何落点，保证截图时箭头可见且不溢出 tip bounding box 太多）
+  const anchorStyle: React.CSSProperties =
+    anchor === 'top'
+      ? { position: 'absolute', top: -8, left: 12 }
+      : anchor === 'bottom'
+      ? { position: 'absolute', bottom: -8, left: 12 }
+      : anchor === 'left'
+      ? { position: 'absolute', left: -9, top: 8 }
+      : anchor === 'right'
+      ? { position: 'absolute', right: -10, top: 8 }
+      : {};
+  return (
+    <div
+      className={['x-tip', shown ? '' : 'x-hidden', className].filter(Boolean).join(' ')}
+      data-testid={testId}
+      style={{ ...rootStyle, ...style }}
+    >
+      <div className="x-tip-tl">
+        <div className="x-tip-tr">
+          <div className="x-tip-tc">
+            {showHeader && (
+              <div className="x-tip-header" unselectable="on">
+                {dynTitle && <span className="x-tip-header-text">{dynTitle}</span>}
+                {closable && (
+                  <div
+                    className="x-tip-close"
+                    unselectable="on"
+                    onClick={onClose}
+                    style={{ display: 'block' }}
+                  >
+                    &#160;
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="x-tip-bwrap">
+        <div className="x-tip-ml">
+          <div className="x-tip-mr">
+            <div className="x-tip-mc">
+              {dynHtml !== undefined ? (
+                <div className="x-tip-body" dangerouslySetInnerHTML={{ __html: dynHtml }} />
+              ) : (
+                <div className="x-tip-body">{children}</div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="x-tip-bl" style={{ height: 3 }}>
+          <div className="x-tip-br">
+            <div className="x-tip-bc" style={{ height: 3, fontSize: 0, lineHeight: 0 }} />
+          </div>
+        </div>
+      </div>
+      {anchor && <div className={`x-tip-anchor x-tip-anchor-${anchor}`} style={anchorStyle} />}
+    </div>
+  );
+});
+export default ToolTip;