react-native-fxview 1.0.0 → 1.0.2

package/FXCategoryController.d.ts

@@ -0,0 +1,100 @@
+import React from "react";
+import { FXComponentItem, FXComponentController } from "./types";
+export declare class FXCategoryController {
+    fxViewId: string;
+    categoryId: string;
+    private updateCallback?;
+    private componentMap;
+    private componentQueue;
+    constructor(fxViewId: string, categoryId: string, triggerUpdate?: () => void);
+    /**
+     * 创建并展示组件
+     * @param component 要显示的组件
+     * @param componentId 可选的组件 ID
+     * @returns 组件控制器
+     */
+    add(component: React.ReactNode, componentId?: string): FXComponentController;
+    /**
+     * 创建但不显示组件
+     * @param component 要创建的组件
+     * @param componentId 可选的组件 ID
+     * @returns 组件控制器
+     */
+    build(component: React.ReactNode, componentId?: string): FXComponentController;
+    /**
+     * 显示已存在的组件
+     * @param componentId 组件 ID
+     */
+    show(componentId: string): void;
+    /**
+     * 隐藏但不删除组件
+     * @param componentId 组件 ID
+     */
+    hide(componentId: string): void;
+    /**
+     * 更新组件内容
+     * @param componentId 组件 ID
+     * @param component 新的组件内容
+     */
+    update(componentId: string, component: React.ReactNode): void;
+    /**
+     * 彻底删除组件
+     * @param componentId 组件 ID（必需）
+     */
+    remove(componentId: string): void;
+    /**
+     * 移除最后一个组件（可选：用于向后兼容）
+     */
+    removeLast(): void;
+    /**
+     * 清空所有组件
+     */
+    clearAll(): void;
+    /**
+     * 注册更新回调
+     * @param updateCallback 更新回调函数
+     */
+    registerUpdateCallback(updateCallback?: () => void): void;
+    /**
+     * 获取组件列表
+     * @returns 组件列表
+     */
+    getComponents(): FXComponentItem[];
+    /**
+     * 获取组件数量
+     * @returns 组件数量
+     */
+    getComponentCount(): number;
+    /**
+     * 获取可见组件数量
+     * @returns 可见组件数量
+     */
+    getVisibleComponentCount(): number;
+    /**
+     * 检查组件是否存在
+     * @param componentId 组件 ID
+     * @returns 是否存在
+     */
+    hasComponent(componentId: string): boolean;
+    /**
+     * 检查组件是否可见
+     * @param componentId 组件 ID
+     * @returns 是否可见
+     */
+    isVisible(componentId: string): boolean;
+    /**
+     * 触发更新
+     */
+    private triggerUpdate;
+    /**
+     * 创建组件控制器
+     * @param componentId 组件 ID
+     * @returns 组件控制器
+     */
+    private createController;
+    /**
+     * 自动生成 componentId
+     * @returns 生成的 componentId
+     */
+    private autoComponentId;
+}

package/FXCategoryController.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FXCategoryController = void 0;
+const PriorityQueue_1 = require("./queue/PriorityQueue");
+class FXCategoryController {
+    constructor(fxViewId, categoryId, triggerUpdate) {
+        // 存储组件的 Map 和优先队列
+        this.componentMap = new Map();
+        this.componentQueue = new PriorityQueue_1.PriorityQueue(PriorityQueue_1.HeapType.MAX_HEAP, PriorityQueue_1.PriorityOrder.FIFO);
+        this.fxViewId = fxViewId;
+        this.categoryId = categoryId;
+        this.updateCallback = triggerUpdate;
+    }
+    // ========== 主要 API 方法 ==========
+    /**
+     * 创建并展示组件
+     * @param component 要显示的组件
+     * @param componentId 可选的组件 ID
+     * @returns 组件控制器
+     */
+    add(component, componentId) {
+        console.log(`FXViewCategoryController.add`, `[${this.categoryId}]`, componentId);
+        const finalComponentId = componentId || this.autoComponentId();
+        // 如果组件已存在，先移除旧的
+        if (this.componentMap.has(finalComponentId)) {
+            console.warn(`Component ${finalComponentId} already exists, removing old one`);
+            this.remove(finalComponentId);
+        }
+        const componentItem = {
+            componentId: finalComponentId,
+            component,
+            visible: true, // add 方法默认可见
+        };
+        this.componentMap.set(finalComponentId, componentItem);
+        this.componentQueue.enqueue(componentItem);
+        this.triggerUpdate();
+        return this.createController(finalComponentId);
+    }
+    /**
+     * 创建但不显示组件
+     * @param component 要创建的组件
+     * @param componentId 可选的组件 ID
+     * @returns 组件控制器
+     */
+    build(component, componentId) {
+        console.log(`FXViewCategoryController.build`, `[${this.categoryId}]`, componentId);
+        const finalComponentId = componentId || this.autoComponentId();
+        // 如果组件已存在，先移除旧的
+        if (this.componentMap.has(finalComponentId)) {
+            console.warn(`Component ${finalComponentId} already exists, removing old one`);
+            this.remove(finalComponentId);
+        }
+        const componentItem = {
+            componentId: finalComponentId,
+            component,
+            visible: false, // build 方法默认不可见
+        };
+        this.componentMap.set(finalComponentId, componentItem);
+        this.componentQueue.enqueue(componentItem);
+        // build 不触发更新，因为组件不可见
+        // this.triggerUpdate();
+        return this.createController(finalComponentId);
+    }
+    /**
+     * 显示已存在的组件
+     * @param componentId 组件 ID
+     */
+    show(componentId) {
+        console.log(`FXViewCategoryController.show`, `[${this.categoryId}]`, componentId);
+        const componentItem = this.componentMap.get(componentId);
+        if (!componentItem) {
+            console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
+            return;
+        }
+        // 如果已经可见，不需要重复操作
+        if (componentItem.visible) {
+            console.log(`Component ${componentId} is already visible`);
+            return;
+        }
+        componentItem.visible = true;
+        this.triggerUpdate();
+    }
+    /**
+     * 隐藏但不删除组件
+     * @param componentId 组件 ID
+     */
+    hide(componentId) {
+        console.log(`FXViewCategoryController.hide`, `[${this.categoryId}]`, componentId);
+        const componentItem = this.componentMap.get(componentId);
+        if (!componentItem) {
+            console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
+            return;
+        }
+        // 如果已经隐藏，不需要重复操作
+        if (!componentItem.visible) {
+            console.log(`Component ${componentId} is already hidden`);
+            return;
+        }
+        componentItem.visible = false;
+        this.triggerUpdate();
+    }
+    /**
+     * 更新组件内容
+     * @param componentId 组件 ID
+     * @param component 新的组件内容
+     */
+    update(componentId, component) {
+        console.log(`FXViewCategoryController.update`, `[${this.categoryId}]`, componentId);
+        const componentItem = this.componentMap.get(componentId);
+        if (!componentItem) {
+            console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
+            return;
+        }
+        // 更新组件内容
+        componentItem.component = component;
+        // 只有在组件可见时才触发更新
+        if (componentItem.visible) {
+            this.triggerUpdate();
+        }
+        else {
+            console.log(`Component ${componentId} is hidden, update without re-render`);
+        }
+    }
+    /**
+     * 彻底删除组件
+     * @param componentId 组件 ID（必需）
+     */
+    remove(componentId) {
+        console.log(`FXViewCategoryController.remove`, `[${this.categoryId}]`, componentId);
+        const componentItem = this.componentMap.get(componentId);
+        if (!componentItem) {
+            console.warn(`Component ${componentId} not found in category ${this.categoryId}`);
+            return;
+        }
+        // 从 Map 中删除
+        this.componentMap.delete(componentId);
+        // 从优先队列中删除
+        this.componentQueue.remove(componentItem);
+        this.triggerUpdate();
+    }
+    /**
+     * 移除最后一个组件（可选：用于向后兼容）
+     */
+    removeLast() {
+        console.log(`FXViewCategoryController.removeLast`, `[${this.categoryId}]`);
+        const lastComponent = this.componentQueue.peek();
+        if (!lastComponent) {
+            console.warn(`No component to remove in category ${this.categoryId}`);
+            return;
+        }
+        this.remove(lastComponent.componentId);
+    }
+    /**
+     * 清空所有组件
+     */
+    clearAll() {
+        console.log(`FXViewCategoryController.clearAll`, `[${this.categoryId}]`);
+        const hadVisibleComponents = Array.from(this.componentMap.values()).some((item) => item.visible);
+        this.componentMap.clear();
+        this.componentQueue.clear();
+        // 只有在有可见组件时才触发更新
+        if (hadVisibleComponents) {
+            this.triggerUpdate();
+        }
+    }
+    /**
+     * 注册更新回调
+     * @param updateCallback 更新回调函数
+     */
+    registerUpdateCallback(updateCallback) {
+        this.updateCallback = updateCallback;
+    }
+    /**
+     * 获取组件列表
+     * @returns 组件列表
+     */
+    getComponents() {
+        return this.componentQueue.getAll();
+    }
+    /**
+     * 获取组件数量
+     * @returns 组件数量
+     */
+    getComponentCount() {
+        return this.componentMap.size;
+    }
+    /**
+     * 获取可见组件数量
+     * @returns 可见组件数量
+     */
+    getVisibleComponentCount() {
+        return Array.from(this.componentMap.values()).filter((item) => item.visible)
+            .length;
+    }
+    /**
+     * 检查组件是否存在
+     * @param componentId 组件 ID
+     * @returns 是否存在
+     */
+    hasComponent(componentId) {
+        return this.componentMap.has(componentId);
+    }
+    /**
+     * 检查组件是否可见
+     * @param componentId 组件 ID
+     * @returns 是否可见
+     */
+    isVisible(componentId) {
+        var _a;
+        const component = this.componentMap.get(componentId);
+        return (_a = component === null || component === void 0 ? void 0 : component.visible) !== null && _a !== void 0 ? _a : false;
+    }
+    // ========== 私有方法 ==========
+    /**
+     * 触发更新
+     */
+    triggerUpdate() {
+        console.log(`FXViewCategoryController.triggerUpdate`, `[${this.categoryId}]`);
+        if (this.updateCallback) {
+            this.updateCallback();
+        }
+    }
+    /**
+     * 创建组件控制器
+     * @param componentId 组件 ID
+     * @returns 组件控制器
+     */
+    createController(componentId) {
+        console.log(`FXViewCategoryController.createController`, `[${this.categoryId}]`, componentId);
+        // ✅ 修复：不在闭包中捕获 componentItem，每次都从 Map 获取最新引用
+        return {
+            show: () => {
+                this.show(componentId);
+            },
+            hide: () => {
+                this.hide(componentId);
+            },
+            remove: () => {
+                this.remove(componentId);
+            },
+            update: (component) => {
+                this.update(componentId, component);
+            },
+            getFxViewId: () => this.fxViewId,
+            getCategoryId: () => this.categoryId,
+            getComponentId: () => componentId,
+            getComponent: () => {
+                var _a;
+                // ✅ 每次都从 Map 获取最新的组件引用
+                return (_a = this.componentMap.get(componentId)) === null || _a === void 0 ? void 0 : _a.component;
+            },
+            isVisible: () => {
+                return this.isVisible(componentId);
+            },
+            exists: () => {
+                return this.hasComponent(componentId);
+            },
+        };
+    }
+    /**
+     * 自动生成 componentId
+     * @returns 生成的 componentId
+     */
+    autoComponentId() {
+        return `component_${Date.now()}_${Math.random()
+            .toString(36)
+            .substring(2, 9)}`;
+    }
+}
+exports.FXCategoryController = FXCategoryController;

package/{FXViewCategoryController.ts → FXCategoryController.ts}

@@ -1,15 +1,15 @@
 import React from "react";
-import { ComponentItem, ComponentController } from "./types";
-import { HeapType, PriorityOrder, PriorityQueue } from "../queue/PriorityQueue";
+import { FXComponentItem, FXComponentController } from "./types";
+import { HeapType, PriorityOrder, PriorityQueue } from "./queue/PriorityQueue";
 
-export class FXViewCategoryController {
+export class FXCategoryController {
   public fxViewId: string;
   public categoryId: string;
   private updateCallback?: () => void;
 
   // 存储组件的 Map 和优先队列
-  private componentMap: Map<string, ComponentItem> = new Map();
-  private componentQueue: PriorityQueue<ComponentItem> = new PriorityQueue(
+  private componentMap: Map<string, FXComponentItem> = new Map();
+  private componentQueue: PriorityQueue<FXComponentItem> = new PriorityQueue(
     HeapType.MAX_HEAP,
     PriorityOrder.FIFO,
   );
@@ -32,7 +32,7 @@ export class FXViewCategoryController {
    * @param componentId 可选的组件 ID
    * @returns 组件控制器
    */
-  add(component: React.ReactNode, componentId?: string): ComponentController {
+  add(component: React.ReactNode, componentId?: string): FXComponentController {
     console.log(
       `FXViewCategoryController.add`,
       `[${this.categoryId}]`,
@@ -49,7 +49,7 @@ export class FXViewCategoryController {
       this.remove(finalComponentId);
     }
 
-    const componentItem: ComponentItem = {
+    const componentItem: FXComponentItem = {
       componentId: finalComponentId,
       component,
       visible: true, // add 方法默认可见
@@ -68,7 +68,10 @@ export class FXViewCategoryController {
    * @param componentId 可选的组件 ID
    * @returns 组件控制器
    */
-  build(component: React.ReactNode, componentId?: string): ComponentController {
+  build(
+    component: React.ReactNode,
+    componentId?: string,
+  ): FXComponentController {
     console.log(
       `FXViewCategoryController.build`,
       `[${this.categoryId}]`,
@@ -85,7 +88,7 @@ export class FXViewCategoryController {
       this.remove(finalComponentId);
     }
 
-    const componentItem: ComponentItem = {
+    const componentItem: FXComponentItem = {
       componentId: finalComponentId,
       component,
       visible: false, // build 方法默认不可见
@@ -270,7 +273,7 @@ export class FXViewCategoryController {
    * 获取组件列表
    * @returns 组件列表
    */
-  getComponents(): ComponentItem[] {
+  getComponents(): FXComponentItem[] {
     return this.componentQueue.getAll();
   }
 
@@ -331,7 +334,7 @@ export class FXViewCategoryController {
    * @param componentId 组件 ID
    * @returns 组件控制器
    */
-  private createController(componentId: string): ComponentController {
+  private createController(componentId: string): FXComponentController {
     console.log(
       `FXViewCategoryController.createController`,
       `[${this.categoryId}]`,

package/FXView.d.ts

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import { ViewProps } from "react-native";
+import { FXComponentItem } from "./types";
+interface FXViewProps extends ViewProps {
+    fxViewId?: string;
+}
+interface FXViewState {
+    components: FXComponentItem[];
+}
+export default class FXView extends Component<FXViewProps, FXViewState> {
+    state: FXViewState;
+    private viewId;
+    constructor(props: FXViewProps);
+    componentDidMount(): void;
+    componentDidUpdate(_prevProps: FXViewProps): void;
+    componentWillUnmount(): void;
+    updateComponents: () => void;
+    render(): React.JSX.Element;
+}
+export type { FXViewProps };

package/FXView.js

@@ -0,0 +1,103 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const FXViewManager_1 = require("./FXViewManager");
+class FXView extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            components: [],
+        };
+        this.updateComponents = () => {
+            const components = FXViewManager_1.FXViewManager.getInstance().getComponents(this.viewId);
+            this.setState({ components: components });
+        };
+        // 使用 fxViewId，如果没有则生成一个唯一 ID
+        this.viewId =
+            props.fxViewId ||
+                `auto_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+    }
+    componentDidMount() {
+        console.log("FXView mounted with viewId:", this.viewId);
+        // 注册到视图管理器
+        FXViewManager_1.FXViewManager.getInstance().registerView(this.viewId, this.updateComponents);
+        // 初始更新
+        this.updateComponents();
+    }
+    componentDidUpdate(_prevProps) {
+        console.log("FXView updated", this.viewId);
+        const newViewId = this.props.fxViewId || this.viewId;
+        if (newViewId !== this.viewId) {
+            // ID 变化时重新注册
+            console.log("FXView updated changed", this.viewId);
+            FXViewManager_1.FXViewManager.getInstance().unregisterView(this.viewId);
+            this.viewId = newViewId;
+            FXViewManager_1.FXViewManager.getInstance().registerView(this.viewId, this.updateComponents);
+            this.updateComponents();
+        }
+    }
+    componentWillUnmount() {
+        console.log("FXView unmounted", this.viewId);
+        // 注销视图（会自动清理所有组件和回调）
+        FXViewManager_1.FXViewManager.getInstance().unregisterView(this.viewId);
+    }
+    render() {
+        const { children } = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _a = this.props, { fxViewId } = _a, restProps = __rest(_a, ["fxViewId"]);
+        const { components } = this.state;
+        console.log("rendering fxView components", components.length);
+        return (<react_native_1.View {...restProps}>
+        {children}
+        {components.map((item) => item.visible ? (<react_1.default.Fragment key={item.componentId}>
+              {item.component}
+            </react_1.default.Fragment>) : null)}
+      </react_native_1.View>);
+    }
+}
+exports.default = FXView;

package/FXView.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { View, ViewProps } from "react-native";
-import { ComponentItem } from "./types";
+import { FXComponentItem } from "./types";
 import { FXViewManager } from "./FXViewManager";
 
 interface FXViewProps extends ViewProps {
@@ -8,7 +8,7 @@ interface FXViewProps extends ViewProps {
 }
 
 interface FXViewState {
-  components: ComponentItem[];
+  components: FXComponentItem[];
 }
 
 export default class FXView extends Component<FXViewProps, FXViewState> {
@@ -43,8 +43,8 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
 
     if (newViewId !== this.viewId) {
       // ID 变化时重新注册
+      console.log("FXView updated changed", this.viewId);
       FXViewManager.getInstance().unregisterView(this.viewId);
-
       this.viewId = newViewId;
 
       FXViewManager.getInstance().registerView(