react-native-fxview 1.0.2-beta2 → 1.0.2-beta3
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.
- package/FXViewCategoryController.d.ts +100 -0
- package/FXViewCategoryController.js +270 -0
- package/FXViewManager.d.ts +2 -0
- package/FXViewManager.js +2 -0
- package/FXViewManager.ts +3 -0
- package/index.d.ts +1 -1
- package/index.js +2 -1
- package/index.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComponentItem, ComponentController } from "./types";
|
|
3
|
+
export declare class FXViewCategoryController {
|
|
4
|
+
fxViewId: string;
|
|
5
|
+
categoryId: string;
|
|
6
|
+
private updateCallback?;
|
|
7
|
+
private componentMap;
|
|
8
|
+
private componentQueue;
|
|
9
|
+
constructor(fxViewId: string, categoryId: string, triggerUpdate?: () => void);
|
|
10
|
+
/**
|
|
11
|
+
* 创建并展示组件
|
|
12
|
+
* @param component 要显示的组件
|
|
13
|
+
* @param componentId 可选的组件 ID
|
|
14
|
+
* @returns 组件控制器
|
|
15
|
+
*/
|
|
16
|
+
add(component: React.ReactNode, componentId?: string): ComponentController;
|
|
17
|
+
/**
|
|
18
|
+
* 创建但不显示组件
|
|
19
|
+
* @param component 要创建的组件
|
|
20
|
+
* @param componentId 可选的组件 ID
|
|
21
|
+
* @returns 组件控制器
|
|
22
|
+
*/
|
|
23
|
+
build(component: React.ReactNode, componentId?: string): ComponentController;
|
|
24
|
+
/**
|
|
25
|
+
* 显示已存在的组件
|
|
26
|
+
* @param componentId 组件 ID
|
|
27
|
+
*/
|
|
28
|
+
show(componentId: string): void;
|
|
29
|
+
/**
|
|
30
|
+
* 隐藏但不删除组件
|
|
31
|
+
* @param componentId 组件 ID
|
|
32
|
+
*/
|
|
33
|
+
hide(componentId: string): void;
|
|
34
|
+
/**
|
|
35
|
+
* 更新组件内容
|
|
36
|
+
* @param componentId 组件 ID
|
|
37
|
+
* @param component 新的组件内容
|
|
38
|
+
*/
|
|
39
|
+
update(componentId: string, component: React.ReactNode): void;
|
|
40
|
+
/**
|
|
41
|
+
* 彻底删除组件
|
|
42
|
+
* @param componentId 组件 ID（必需）
|
|
43
|
+
*/
|
|
44
|
+
remove(componentId: string): void;
|
|
45
|
+
/**
|
|
46
|
+
* 移除最后一个组件（可选：用于向后兼容）
|
|
47
|
+
*/
|
|
48
|
+
removeLast(): void;
|
|
49
|
+
/**
|
|
50
|
+
* 清空所有组件
|
|
51
|
+
*/
|
|
52
|
+
clearAll(): void;
|
|
53
|
+
/**
|
|
54
|
+
* 注册更新回调
|
|
55
|
+
* @param updateCallback 更新回调函数
|
|
56
|
+
*/
|
|
57
|
+
registerUpdateCallback(updateCallback?: () => void): void;
|
|
58
|
+
/**
|
|
59
|
+
* 获取组件列表
|
|
60
|
+
* @returns 组件列表
|
|
61
|
+
*/
|
|
62
|
+
getComponents(): ComponentItem[];
|
|
63
|
+
/**
|
|
64
|
+
* 获取组件数量
|
|
65
|
+
* @returns 组件数量
|
|
66
|
+
*/
|
|
67
|
+
getComponentCount(): number;
|
|
68
|
+
/**
|
|
69
|
+
* 获取可见组件数量
|
|
70
|
+
* @returns 可见组件数量
|
|
71
|
+
*/
|
|
72
|
+
getVisibleComponentCount(): number;
|
|
73
|
+
/**
|
|
74
|
+
* 检查组件是否存在
|
|
75
|
+
* @param componentId 组件 ID
|
|
76
|
+
* @returns 是否存在
|
|
77
|
+
*/
|
|
78
|
+
hasComponent(componentId: string): boolean;
|
|
79
|
+
/**
|
|
80
|
+
* 检查组件是否可见
|
|
81
|
+
* @param componentId 组件 ID
|
|
82
|
+
* @returns 是否可见
|
|
83
|
+
*/
|
|
84
|
+
isVisible(componentId: string): boolean;
|
|
85
|
+
/**
|
|
86
|
+
* 触发更新
|
|
87
|
+
*/
|
|
88
|
+
private triggerUpdate;
|
|
89
|
+
/**
|
|
90
|
+
* 创建组件控制器
|
|
91
|
+
* @param componentId 组件 ID
|
|
92
|
+
* @returns 组件控制器
|
|
93
|
+
*/
|
|
94
|
+
private createController;
|
|
95
|
+
/**
|
|
96
|
+
* 自动生成 componentId
|
|
97
|
+
* @returns 生成的 componentId
|
|
98
|
+
*/
|
|
99
|
+
private autoComponentId;
|
|
100
|
+
}
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FXViewCategoryController = void 0;
|
|
4
|
+
const PriorityQueue_1 = require("./queue/PriorityQueue");
|
|
5
|
+
class FXViewCategoryController {
|
|
6
|
+
constructor(fxViewId, categoryId, triggerUpdate) {
|
|
7
|
+
// 存储组件的 Map 和优先队列
|
|
8
|
+
this.componentMap = new Map();
|
|
9
|
+
this.componentQueue = new PriorityQueue_1.PriorityQueue(PriorityQueue_1.HeapType.MAX_HEAP, PriorityQueue_1.PriorityOrder.FIFO);
|
|
10
|
+
this.fxViewId = fxViewId;
|
|
11
|
+
this.categoryId = categoryId;
|
|
12
|
+
this.updateCallback = triggerUpdate;
|
|
13
|
+
}
|
|
14
|
+
// ========== 主要 API 方法 ==========
|
|
15
|
+
/**
|
|
16
|
+
* 创建并展示组件
|
|
17
|
+
* @param component 要显示的组件
|
|
18
|
+
* @param componentId 可选的组件 ID
|
|
19
|
+
* @returns 组件控制器
|
|
20
|
+
*/
|
|
21
|
+
add(component, componentId) {
|
|
22
|
+
console.log(`FXViewCategoryController.add`, `[${this.categoryId}]`, componentId);
|
|
23
|
+
const finalComponentId = componentId || this.autoComponentId();
|
|
24
|
+
// 如果组件已存在，先移除旧的
|
|
25
|
+
if (this.componentMap.has(finalComponentId)) {
|
|
26
|
+
console.warn(`Component ${finalComponentId} already exists, removing old one`);
|
|
27
|
+
this.remove(finalComponentId);
|
|
28
|
+
}
|
|
29
|
+
const componentItem = {
|
|
30
|
+
componentId: finalComponentId,
|
|
31
|
+
component,
|
|
32
|
+
visible: true, // add 方法默认可见
|
|
33
|
+
};
|
|
34
|
+
this.componentMap.set(finalComponentId, componentItem);
|
|
35
|
+
this.componentQueue.enqueue(componentItem);
|
|
36
|
+
this.triggerUpdate();
|
|
37
|
+
return this.createController(finalComponentId);
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* 创建但不显示组件
|
|
41
|
+
* @param component 要创建的组件
|
|
42
|
+
* @param componentId 可选的组件 ID
|
|
43
|
+
* @returns 组件控制器
|
|
44
|
+
*/
|
|
45
|
+
build(component, componentId) {
|
|
46
|
+
console.log(`FXViewCategoryController.build`, `[${this.categoryId}]`, componentId);
|
|
47
|
+
const finalComponentId = componentId || this.autoComponentId();
|
|
48
|
+
// 如果组件已存在，先移除旧的
|
|
49
|
+
if (this.componentMap.has(finalComponentId)) {
|
|
50
|
+
console.warn(`Component ${finalComponentId} already exists, removing old one`);
|
|
51
|
+
this.remove(finalComponentId);
|
|
52
|
+
}
|
|
53
|
+
const componentItem = {
|
|
54
|
+
componentId: finalComponentId,
|
|
55
|
+
component,
|
|
56
|
+
visible: false, // build 方法默认不可见
|
|
57
|
+
};
|
|
58
|
+
this.componentMap.set(finalComponentId, componentItem);
|
|
59
|
+
this.componentQueue.enqueue(componentItem);
|
|
60
|
+
// build 不触发更新，因为组件不可见
|
|
61
|
+
// this.triggerUpdate();
|
|
62
|
+
return this.createController(finalComponentId);
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* 显示已存在的组件
|
|
66
|
+
* @param componentId 组件 ID
|
|
67
|
+
*/
|
|
68
|
+
show(componentId) {
|
|
69
|
+
console.log(`FXViewCategoryController.show`, `[${this.categoryId}]`, componentId);
|
|
70
|
+
const componentItem = this.componentMap.get(componentId);
|
|
71
|
+
if (!componentItem) {
|
|
72
|
+
console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
// 如果已经可见，不需要重复操作
|
|
76
|
+
if (componentItem.visible) {
|
|
77
|
+
console.log(`Component ${componentId} is already visible`);
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
componentItem.visible = true;
|
|
81
|
+
this.triggerUpdate();
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* 隐藏但不删除组件
|
|
85
|
+
* @param componentId 组件 ID
|
|
86
|
+
*/
|
|
87
|
+
hide(componentId) {
|
|
88
|
+
console.log(`FXViewCategoryController.hide`, `[${this.categoryId}]`, componentId);
|
|
89
|
+
const componentItem = this.componentMap.get(componentId);
|
|
90
|
+
if (!componentItem) {
|
|
91
|
+
console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
// 如果已经隐藏，不需要重复操作
|
|
95
|
+
if (!componentItem.visible) {
|
|
96
|
+
console.log(`Component ${componentId} is already hidden`);
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
componentItem.visible = false;
|
|
100
|
+
this.triggerUpdate();
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* 更新组件内容
|
|
104
|
+
* @param componentId 组件 ID
|
|
105
|
+
* @param component 新的组件内容
|
|
106
|
+
*/
|
|
107
|
+
update(componentId, component) {
|
|
108
|
+
console.log(`FXViewCategoryController.update`, `[${this.categoryId}]`, componentId);
|
|
109
|
+
const componentItem = this.componentMap.get(componentId);
|
|
110
|
+
if (!componentItem) {
|
|
111
|
+
console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
// 更新组件内容
|
|
115
|
+
componentItem.component = component;
|
|
116
|
+
// 只有在组件可见时才触发更新
|
|
117
|
+
if (componentItem.visible) {
|
|
118
|
+
this.triggerUpdate();
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
console.log(`Component ${componentId} is hidden, update without re-render`);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* 彻底删除组件
|
|
126
|
+
* @param componentId 组件 ID（必需）
|
|
127
|
+
*/
|
|
128
|
+
remove(componentId) {
|
|
129
|
+
console.log(`FXViewCategoryController.remove`, `[${this.categoryId}]`, componentId);
|
|
130
|
+
const componentItem = this.componentMap.get(componentId);
|
|
131
|
+
if (!componentItem) {
|
|
132
|
+
console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
// 从 Map 中删除
|
|
136
|
+
this.componentMap.delete(componentId);
|
|
137
|
+
// 从优先队列中删除
|
|
138
|
+
this.componentQueue.remove(componentItem);
|
|
139
|
+
this.triggerUpdate();
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* 移除最后一个组件（可选：用于向后兼容）
|
|
143
|
+
*/
|
|
144
|
+
removeLast() {
|
|
145
|
+
console.log(`FXViewCategoryController.removeLast`, `[${this.categoryId}]`);
|
|
146
|
+
const lastComponent = this.componentQueue.peek();
|
|
147
|
+
if (!lastComponent) {
|
|
148
|
+
console.warn(`No component to remove in category ${this.categoryId}`);
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
this.remove(lastComponent.componentId);
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* 清空所有组件
|
|
155
|
+
*/
|
|
156
|
+
clearAll() {
|
|
157
|
+
console.log(`FXViewCategoryController.clearAll`, `[${this.categoryId}]`);
|
|
158
|
+
const hadVisibleComponents = Array.from(this.componentMap.values()).some((item) => item.visible);
|
|
159
|
+
this.componentMap.clear();
|
|
160
|
+
this.componentQueue.clear();
|
|
161
|
+
// 只有在有可见组件时才触发更新
|
|
162
|
+
if (hadVisibleComponents) {
|
|
163
|
+
this.triggerUpdate();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* 注册更新回调
|
|
168
|
+
* @param updateCallback 更新回调函数
|
|
169
|
+
*/
|
|
170
|
+
registerUpdateCallback(updateCallback) {
|
|
171
|
+
this.updateCallback = updateCallback;
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* 获取组件列表
|
|
175
|
+
* @returns 组件列表
|
|
176
|
+
*/
|
|
177
|
+
getComponents() {
|
|
178
|
+
return this.componentQueue.getAll();
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* 获取组件数量
|
|
182
|
+
* @returns 组件数量
|
|
183
|
+
*/
|
|
184
|
+
getComponentCount() {
|
|
185
|
+
return this.componentMap.size;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* 获取可见组件数量
|
|
189
|
+
* @returns 可见组件数量
|
|
190
|
+
*/
|
|
191
|
+
getVisibleComponentCount() {
|
|
192
|
+
return Array.from(this.componentMap.values()).filter((item) => item.visible)
|
|
193
|
+
.length;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* 检查组件是否存在
|
|
197
|
+
* @param componentId 组件 ID
|
|
198
|
+
* @returns 是否存在
|
|
199
|
+
*/
|
|
200
|
+
hasComponent(componentId) {
|
|
201
|
+
return this.componentMap.has(componentId);
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* 检查组件是否可见
|
|
205
|
+
* @param componentId 组件 ID
|
|
206
|
+
* @returns 是否可见
|
|
207
|
+
*/
|
|
208
|
+
isVisible(componentId) {
|
|
209
|
+
var _a;
|
|
210
|
+
const component = this.componentMap.get(componentId);
|
|
211
|
+
return (_a = component === null || component === void 0 ? void 0 : component.visible) !== null && _a !== void 0 ? _a : false;
|
|
212
|
+
}
|
|
213
|
+
// ========== 私有方法 ==========
|
|
214
|
+
/**
|
|
215
|
+
* 触发更新
|
|
216
|
+
*/
|
|
217
|
+
triggerUpdate() {
|
|
218
|
+
console.log(`FXViewCategoryController.triggerUpdate`, `[${this.categoryId}]`);
|
|
219
|
+
if (this.updateCallback) {
|
|
220
|
+
this.updateCallback();
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* 创建组件控制器
|
|
225
|
+
* @param componentId 组件 ID
|
|
226
|
+
* @returns 组件控制器
|
|
227
|
+
*/
|
|
228
|
+
createController(componentId) {
|
|
229
|
+
console.log(`FXViewCategoryController.createController`, `[${this.categoryId}]`, componentId);
|
|
230
|
+
// ✅ 修复：不在闭包中捕获 componentItem，每次都从 Map 获取最新引用
|
|
231
|
+
return {
|
|
232
|
+
show: () => {
|
|
233
|
+
this.show(componentId);
|
|
234
|
+
},
|
|
235
|
+
hide: () => {
|
|
236
|
+
this.hide(componentId);
|
|
237
|
+
},
|
|
238
|
+
remove: () => {
|
|
239
|
+
this.remove(componentId);
|
|
240
|
+
},
|
|
241
|
+
update: (component) => {
|
|
242
|
+
this.update(componentId, component);
|
|
243
|
+
},
|
|
244
|
+
getFxViewId: () => this.fxViewId,
|
|
245
|
+
getCategoryId: () => this.categoryId,
|
|
246
|
+
getComponentId: () => componentId,
|
|
247
|
+
getComponent: () => {
|
|
248
|
+
var _a;
|
|
249
|
+
// ✅ 每次都从 Map 获取最新的组件引用
|
|
250
|
+
return (_a = this.componentMap.get(componentId)) === null || _a === void 0 ? void 0 : _a.component;
|
|
251
|
+
},
|
|
252
|
+
isVisible: () => {
|
|
253
|
+
return this.isVisible(componentId);
|
|
254
|
+
},
|
|
255
|
+
exists: () => {
|
|
256
|
+
return this.hasComponent(componentId);
|
|
257
|
+
},
|
|
258
|
+
};
|
|
259
|
+
}
|
|
260
|
+
/**
|
|
261
|
+
* 自动生成 componentId
|
|
262
|
+
* @returns 生成的 componentId
|
|
263
|
+
*/
|
|
264
|
+
autoComponentId() {
|
|
265
|
+
return `component_${Date.now()}_${Math.random()
|
|
266
|
+
.toString(36)
|
|
267
|
+
.substring(2, 9)}`;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
exports.FXViewCategoryController = FXViewCategoryController;
|
package/FXViewManager.d.ts
CHANGED
package/FXViewManager.js
CHANGED
package/FXViewManager.ts
CHANGED
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -17,10 +17,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.FXViewManager = exports.FXView = void 0;
|
|
20
|
+
exports.FXManager = exports.FXViewManager = exports.FXView = void 0;
|
|
21
21
|
// 主入口文件
|
|
22
22
|
var FXView_1 = require("./FXView");
|
|
23
23
|
Object.defineProperty(exports, "FXView", { enumerable: true, get: function () { return __importDefault(FXView_1).default; } });
|
|
24
24
|
var FXViewManager_1 = require("./FXViewManager");
|
|
25
25
|
Object.defineProperty(exports, "FXViewManager", { enumerable: true, get: function () { return FXViewManager_1.FXViewManager; } });
|
|
26
|
+
Object.defineProperty(exports, "FXManager", { enumerable: true, get: function () { return __importDefault(FXViewManager_1).default; } });
|
|
26
27
|
__exportStar(require("./types"), exports);
|
package/index.ts
CHANGED
package/package.json
CHANGED