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
  1. package/LICENSE +21 -0
  2. package/package.json +36 -0
  3. package/src/components/AbsoluteLayout.tsx +206 -0
  4. package/src/components/Accordion.tsx +266 -0
  5. package/src/components/AnchorLayout.tsx +131 -0
  6. package/src/components/BorderLayout.tsx +512 -0
  7. package/src/components/Box.tsx +289 -0
  8. package/src/components/Button.tsx +300 -0
  9. package/src/components/ButtonGroup.tsx +170 -0
  10. package/src/components/CalendarPicker.tsx +431 -0
  11. package/src/components/CardLayout.tsx +122 -0
  12. package/src/components/CenterLayout.tsx +95 -0
  13. package/src/components/CheckboxGroup.tsx +200 -0
  14. package/src/components/ColorMenu.tsx +195 -0
  15. package/src/components/ColorPalette.tsx +126 -0
  16. package/src/components/ColumnLayout.tsx +183 -0
  17. package/src/components/ColumnTree.tsx +383 -0
  18. package/src/components/CycleButton.tsx +302 -0
  19. package/src/components/DataView.tsx +244 -0
  20. package/src/components/DataViewMore.tsx +337 -0
  21. package/src/components/DataViewTransition.tsx +235 -0
  22. package/src/components/DateMenu.tsx +163 -0
  23. package/src/components/DatePicker.tsx +387 -0
  24. package/src/components/DisplayField.tsx +73 -0
  25. package/src/components/Editor.tsx +214 -0
  26. package/src/components/EditorGrid.tsx +361 -0
  27. package/src/components/FieldLabeler.tsx +81 -0
  28. package/src/components/FieldReplicator.tsx +135 -0
  29. package/src/components/FieldSet.tsx +149 -0
  30. package/src/components/FitLayout.tsx +76 -0
  31. package/src/components/Form.tsx +3484 -0
  32. package/src/components/Grid.tsx +2173 -0
  33. package/src/components/GridFilters.tsx +332 -0
  34. package/src/components/GroupTab.tsx +274 -0
  35. package/src/components/HtmlEditor.tsx +391 -0
  36. package/src/components/ImageOrganizer.tsx +984 -0
  37. package/src/components/ImageOrganizerService.ts +361 -0
  38. package/src/components/ListView.tsx +221 -0
  39. package/src/components/LoadMask.tsx +74 -0
  40. package/src/components/Menu.tsx +227 -0
  41. package/src/components/MessageBox.tsx +138 -0
  42. package/src/components/MultiSlider.tsx +369 -0
  43. package/src/components/Organizer.tsx +403 -0
  44. package/src/components/PagingToolbar.tsx +255 -0
  45. package/src/components/Panel.tsx +451 -0
  46. package/src/components/ProgressBar.tsx +127 -0
  47. package/src/components/PropertyGrid.tsx +142 -0
  48. package/src/components/QuickTip.tsx +174 -0
  49. package/src/components/Resizable.tsx +241 -0
  50. package/src/components/RowLayout.tsx +126 -0
  51. package/src/components/Slider.tsx +353 -0
  52. package/src/components/SliderField.tsx +206 -0
  53. package/src/components/SpinnerField.tsx +141 -0
  54. package/src/components/SplitBar.tsx +215 -0
  55. package/src/components/Spotlight.tsx +262 -0
  56. package/src/components/StatusBar.tsx +118 -0
  57. package/src/components/TabPanel.tsx +540 -0
  58. package/src/components/TableLayout.tsx +132 -0
  59. package/src/components/ThemeSwitcher.tsx +167 -0
  60. package/src/components/ToolTip.tsx +226 -0
  61. package/src/components/Toolbar.tsx +321 -0
  62. package/src/components/Tree.tsx +809 -0
  63. package/src/components/TreeGrid.tsx +418 -0
  64. package/src/components/Viewport.tsx +218 -0
  65. package/src/components/Window.tsx +441 -0
  66. package/src/components/Writer.tsx +303 -0
  67. package/src/components/XmlTreeLoader.tsx +233 -0
  68. package/src/components/dnd/DndContext.tsx +328 -0
  69. package/src/components/dnd/DragSource.tsx +202 -0
  70. package/src/components/dnd/DragZone.tsx +66 -0
  71. package/src/components/dnd/DropTarget.tsx +86 -0
  72. package/src/components/dnd/DropZone.tsx +166 -0
  73. package/src/components/dnd/PanelProxy.tsx +81 -0
  74. package/src/components/dnd/PanelResizer.tsx +143 -0
  75. package/src/components/dnd/Portal.tsx +254 -0
  76. package/src/components/dnd/Reorderer.tsx +73 -0
  77. package/src/components/dnd/ToolbarReorderer.tsx +226 -0
  78. package/src/main.tsx +2649 -0
  79. package/src/styles/ext-theme.css +889 -0
  80. package/src/util/theme.ts +95 -0
package/src/util/theme.ts ADDED
@@ -0,0 +1,95 @@
1
+ /* 框架默认主题自动注入（铁律：base = 纯结构，主题经 <link> 提供，可运行时切换）。
2
+ *
3
+ * 机制：consumer 只 import 框架即可获得默认主题，无需手动在 index.html 写 <link>，
4
+ * 也无需挂载 ThemeSwitcher。本函数在框架入口（main.tsx / ThemeSwitcher）调用一次，
5
+ * 幂等：若 document 中已存在同 id 的主题 <link>（ThemeSwitcher 建的、或已注入的），直接跳过。
6
+ *
7
+ * 关键点（加载顺序，事关主题切换能否生效）：
8
+ * base 结构表 ext-all.css 由 ext-theme.css 的 `@import` 引入，而 ext-all.css 自身带
9
+ * Ext 的「默认蓝」色值（如 .x-panel-header / .x-panel-body 的 `border:1px solid` 经
10
+ * currentColor 取蓝字色）。若主题 <link> 置于 <head> 最前（prepend），则 ext-all 的
11
+ * 蓝色默认值因在层叠中「后到」而胜出，导致切换 gray/access 时边框/文字仍蓝——
12
+ * 这正是早期 bug 的根因。故此处用 head.appendChild 把主题 <link> 插到 <head> 末尾，
13
+ * 保证 xtheme-*.css（被切换的色值）晚于 ext-all 加载、以其整篇色值覆盖默认蓝。
14
+ *
15
+ * 本框架的覆盖规则（ext-theme.css 中 .x-panel-header 仅设 border-width/style、不写
16
+ * border-color，颜色交给 xtheme）与主题色分属不同属性，二者顺序无关；xtheme 只需
17
+ * 晚于 ext-all 即可让主题色生效（等价原 @import xtheme-*.css 置于 ext-all.css 之后）。
18
+ *
19
+ * 切换主题仍由 ThemeSwitcher 整篇换该 <link> 的 href（Ext.util.CSS.swapStyleSheet 模型）。
20
+ */
21
+
22
+ export const DEFAULT_THEME = 'xtheme-blue';
23
+ export const THEME_CSS_BASE = '/extjs-assets/css/';
24
+
25
+ export interface EnsureDefaultThemeOptions {
26
+ /** 动态主题 <link> 的 id（与 ThemeSwitcher 一致，默认 'extjs-dynamic-theme'）。 */
27
+ linkId?: string;
28
+ /** 默认主题 value（基名或完整 href）。默认 DEFAULT_THEME。 */
29
+ value?: string;
30
+ /** 主题 CSS 目录前缀，用于拼基名 href。默认 THEME_CSS_BASE。 */
31
+ cssBase?: string;
32
+ }
33
+
34
+ /** 把主题 value 解析为完整 href：基名 → cssBase+'.css'；完整路径原样返回。 */
35
+ export function resolveHref(value: string, cssBase: string = THEME_CSS_BASE): string {
36
+ if (/^https?:/i.test(value) || value.startsWith('/') || /\.css$/i.test(value)) {
37
+ return value;
38
+ }
39
+ return `${cssBase}${value}.css`;
40
+ }
41
+
42
+ /**
43
+ * 主题 → 该主题自带图片资源目录。
44
+ * Ext 各主题把同名 gif/png 放在各自 images 目录下（如 access 用 images/access/、brand 用
45
+ * images/brand/）；blue 与 gray 共用 images/default/（gray 仅换色、不另发图标，故其 tree 等
46
+ * 目录只含少量继承图）。切换主题时，原生落点图标、ghost 图标等应按当前主题取对应目录的资源，
47
+ * 否则会一直显示 default 的蓝图标，破坏主题观感。
48
+ */
49
+ const THEME_IMAGE_DIR: Record<string, string> = {
50
+ 'xtheme-blue': 'default',
51
+ 'xtheme-gray': 'default',
52
+ 'xtheme-access': 'access',
53
+ 'xtheme-brand': 'brand',
54
+ };
55
+
56
+ /** 读取当前生效主题名（基名，如 'xtheme-blue'）。优先读动态 <link> href，其次 localStorage，回落默认。 */
57
+ export function getActiveThemeName(linkId = 'extjs-dynamic-theme'): string {
58
+ if (typeof document !== 'undefined') {
59
+ const link = document.getElementById(linkId) as HTMLLinkElement | null;
60
+ const base = link?.href?.split('/').pop() || '';
61
+ if (base.endsWith('.css')) return base.replace(/\.css$/, '');
62
+ }
63
+ try {
64
+ const stored = localStorage.getItem('react-extjs-theme');
65
+ if (stored) return stored;
66
+ } catch {
67
+ /* localStorage 不可用时忽略，回落默认 */
68
+ }
69
+ return DEFAULT_THEME;
70
+ }
71
+
72
+ /** 当前主题对应的图片资源目录（'default' / 'access' / 'brand'）。 */
73
+ export function getActiveImageDir(): string {
74
+ return THEME_IMAGE_DIR[getActiveThemeName()] ?? 'default';
75
+ }
76
+
77
+ /** 按当前主题解析原生 per-theme 图片路径（如 resolveThemeImageUrl('tree/drop-between.gif')）。 */
78
+ export function resolveThemeImageUrl(rel: string): string {
79
+ const dir = getActiveImageDir();
80
+ return `/extjs-assets/images/${dir}/${rel}`;
81
+ }
82
+
83
+ /** 幂等注入默认主题 <link>。SSR / 无 document 时安全跳过。 */
84
+ export function ensureDefaultTheme(options: EnsureDefaultThemeOptions = {}): void {
85
+ if (typeof document === 'undefined') return;
86
+ const { linkId = 'extjs-dynamic-theme', value = DEFAULT_THEME, cssBase = THEME_CSS_BASE } = options;
87
+ if (document.getElementById(linkId)) return;
88
+ const link = document.createElement('link');
89
+ link.id = linkId;
90
+ link.rel = 'stylesheet';
91
+ link.type = 'text/css';
92
+ link.href = resolveHref(value, cssBase);
93
+ // append 而非 prepend：确保 xtheme 晚于 ext-all.css（默认蓝）加载，主题色可覆盖默认蓝。
94
+ document.head.appendChild(link);
95
+ }