react-native-fxview 1.0.2-beta2 → 1.0.2-beta4

package/FXView.js

@@ -43,10 +43,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const FXViewManager_1 = require("./FXViewManager");
+const FXLogger_1 = __importDefault(require("./logger/FXLogger"));
 class FXView extends react_1.Component {
     constructor(props) {
         super(props);
@@ -63,18 +67,18 @@ class FXView extends react_1.Component {
                 `auto_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
     }
     componentDidMount() {
-        console.log("FXView mounted with viewId:", this.viewId);
+        FXLogger_1.default.debug("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);
+        FXLogger_1.default.debug("FXView", `updated: ${this.viewId}`);
         const newViewId = this.props.fxViewId || this.viewId;
         if (newViewId !== this.viewId) {
             // ID 变化时重新注册
-            console.log("FXView updated changed", this.viewId);
+            FXLogger_1.default.debug("FXView", `updated changed: ${this.viewId}`);
             FXViewManager_1.FXViewManager.getInstance().unregisterView(this.viewId);
             this.viewId = newViewId;
             FXViewManager_1.FXViewManager.getInstance().registerView(this.viewId, this.updateComponents);
@@ -82,7 +86,7 @@ class FXView extends react_1.Component {
         }
     }
     componentWillUnmount() {
-        console.log("FXView unmounted", this.viewId);
+        FXLogger_1.default.debug("FXView", `unmounted: ${this.viewId}`);
         // 注销视图（会自动清理所有组件和回调）
         FXViewManager_1.FXViewManager.getInstance().unregisterView(this.viewId);
     }
@@ -91,7 +95,7 @@ class FXView extends react_1.Component {
         // 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);
+        FXLogger_1.default.debug("FXView", `rendering components: ${components.length}`);
         return (<react_native_1.View {...restProps}>
         {children}
         {components.map((item) => item.visible ? (<react_1.default.Fragment key={item.componentId}>

package/FXView.tsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { View, ViewProps } from "react-native";
 import { FXComponentItem } from "./types";
 import { FXViewManager } from "./FXViewManager";
+import logger from "./logger/FXLogger";
 
 interface FXViewProps extends ViewProps {
   fxViewId?: string; // 动态标识属性，可选
@@ -27,7 +28,7 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
   }
 
   componentDidMount() {
-    console.log("FXView mounted with viewId:", this.viewId);
+    logger.debug("FXView", `mounted with viewId: ${this.viewId}`);
     // 注册到视图管理器
     FXViewManager.getInstance().registerView(
       this.viewId,
@@ -38,12 +39,12 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
   }
 
   componentDidUpdate(_prevProps: FXViewProps) {
-    console.log("FXView updated", this.viewId);
+    logger.debug("FXView", `updated: ${this.viewId}`);
     const newViewId = this.props.fxViewId || this.viewId;
 
     if (newViewId !== this.viewId) {
       // ID 变化时重新注册
-      console.log("FXView updated changed", this.viewId);
+      logger.debug("FXView", `updated changed: ${this.viewId}`);
       FXViewManager.getInstance().unregisterView(this.viewId);
       this.viewId = newViewId;
 
@@ -56,7 +57,7 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
   }
 
   componentWillUnmount() {
-    console.log("FXView unmounted", this.viewId);
+    logger.debug("FXView", `unmounted: ${this.viewId}`);
     // 注销视图（会自动清理所有组件和回调）
     FXViewManager.getInstance().unregisterView(this.viewId);
   }
@@ -71,7 +72,7 @@ export default class FXView extends Component<FXViewProps, FXViewState> {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { fxViewId, ...restProps } = this.props;
     const { components } = this.state;
-    console.log("rendering fxView components", components.length);
+    logger.debug("FXView", `rendering components: ${components.length}`);
     return (
       <View {...restProps}>
         {children}

package/FXViewCategoryController.d.ts

@@ -0,0 +1,100 @@
+import React from "react";
+import { ComponentItem, ComponentController } from "./types";
+export declare class FXViewCategoryController {
+    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): ComponentController;
+    /**
+     * 创建但不显示组件
+     * @param component 要创建的组件
+     * @param componentId 可选的组件 ID
+     * @returns 组件控制器
+     */
+    build(component: React.ReactNode, componentId?: string): ComponentController;
+    /**
+     * 显示已存在的组件
+     * @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(): ComponentItem[];
+    /**
+     * 获取组件数量
+     * @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/FXViewCategoryController.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FXViewCategoryController = void 0;
+const PriorityQueue_1 = require("./queue/PriorityQueue");
+class FXViewCategoryController {
+    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.FXViewCategoryController = FXViewCategoryController;

package/FXViewManager.d.ts

@@ -84,7 +84,15 @@ export declare class FXViewManager {
      * @returns 是否成功注销
      */
     unregisterView(fxViewId: string): boolean;
+    /**
+     * 注册生命周期回调
+     * @param callbacks 生命周期回调
+     */
     registerLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void;
+    /**
+     * 注销生命周期回调
+     * @param callbacks 生命周期回调
+     */
     unregisterLifecycleCallbacks(callbacks: FXLifecycleCallbacks): void;
     /**
      * 获取最近使用的视图 ID（栈顶）
@@ -144,3 +152,5 @@ export declare class FXViewManager {
      */
     private autoFXViewId;
 }
+declare const FXManager: FXViewManager;
+export default FXManager;