react-native-fxdialog 1.0.0-beta04 → 1.0.0-beta06

package/FXDialog.d.ts

@@ -1,17 +1,22 @@
-import { FXDialogAnimationType, FXDialogAction, FXDialogTitle, FXDialogMessage, FXDialogCustomView, FXDialogCloseType, FXDialogController, FXDialogAnimationImpl } from "./types";
+import { FXDialogViewProps } from "./FXDialogView";
+import { FXDialogAnimationType, FXDialogAction, FXDialogTitle, FXDialogMessage, FXDialogCustomContent, FXDialogCloseType, FXDialogController, FXDialogAnimationImpl, FXDialogUpdateConfig, FXDialogQueueItem, FXDialogContent } from "./types";
+import { FXDialogStyleInterceptor } from "./style/FXDialogStyleInterceptor";
+import { FXDialogAnimation } from "./animation/FXDialogAnimation";
 import { ViewStyle } from "react-native";
+import React from "react";
 /**
  * Dialog 构建器
  */
 declare class FXDialog {
-    private _fxViewId?;
-    private _priority;
-    private _didShow?;
-    private _didClose?;
-    private _queueItem;
-    private _enqueue;
-    private viewDefaultAnimation;
-    private viewConfiguration;
+    protected _fxViewId?: string;
+    protected _priority: number;
+    protected _didShow?: () => void;
+    protected _didClose?: (closeType?: FXDialogCloseType) => void;
+    protected _queueItem: FXDialogQueueItem | null;
+    protected _enqueue: boolean;
+    protected _viewDefaultAnimation: FXDialogAnimation;
+    protected _viewConfiguration: FXDialogViewProps;
+    protected _styleInterceptor: FXDialogStyleInterceptor;
     /**
      * 设置弹窗类型
      */
@@ -34,20 +39,48 @@ declare class FXDialog {
     /**
      * 添加自定义视图
      */
-    addCustom(view: FXDialogCustomView): this;
+    addCustom(view: FXDialogCustomContent): this;
+    /**
+     * 添加背景，有默认样式，默认铺满overlay，position: "absolute"，传进来的组件带style，会合并默认样式
+     * 注意：这里设置style属性最好不要设置布局相关的样式，比如宽高、margin、padding, top/left/right/bottom 等，这些设置不管用，会被默认样式覆盖
+     * @param view 自定义背景组件
+     */
+    appendBackground(view: React.ReactNode): this;
     /**
      * 设置点击背景是否关闭
      */
     clickBackgroundClose(enable: boolean): this;
+    /**
+     * 设置背景样式
+     */
+    backgroundStyle(style: ViewStyle): this;
+    /**
+     * 添加容器背景，有默认样式，默认铺满container，position: "absolute"，传进来的组件带style，会合并默认样式
+     * 注意：这里设置style属性最好不要设置布局相关的样式，比如宽高、margin、padding, top/left/right/bottom 等，这些设置不管用，会被默认样式覆盖
+     * @param view 自定义容器背景组件
+     */
+    appendContainer(view: React.ReactNode): this;
     /**
      * 设置容器样式
      */
     containerStyle(style: ViewStyle): this;
     /**
-     * 添加背景样式
+     * 设置内容区域容器样式 除按钮外的内容区域样式
+     */
+    contentsContainerStyle(style: ViewStyle): this;
+    /**
+     * 设置按钮区样式
+     */
+    actionsContainerStyle(style: ViewStyle): this;
+    /**
+     * 设置弹窗显示动画时长
+     * @param duration 动画时长 ms
      */
-    backgroundStyle(style: ViewStyle): this;
     showAnimationDuration(duration: number): this;
+    /**
+     * 设置弹窗关闭动画时长
+     * @param duration 动画时长 ms
+     */
     closeAnimationDuration(duration: number): this;
     /**
      * 设置动画：支持传入内置类型
@@ -63,7 +96,7 @@ declare class FXDialog {
      */
     containerScrollMaxHeight(maxHeight: number): this;
     /**
-     * 设置按钮区最小高度
+     * 设置弹窗需要滚动时按钮区最小高度
      * @param minHeight 最小高度
      */
     actionsScrollMinHeight(minHeight: number): this;
@@ -94,6 +127,25 @@ declare class FXDialog {
      * 设置关闭回调
      */
     didClose(callback: (closeType?: FXDialogCloseType) => void): this;
+    /**
+     * 更新弹窗内容
+     * @param updates 要更新的内容
+     */
+    protected update(updates: FXDialogUpdateConfig): void;
+    /**
+     * 更新弹窗内容
+     * @param update 要更新的内容，通过id匹配
+     */
+    protected updateContent(update: FXDialogContent): void;
+    /**
+     * 更新操作按钮
+     * @param actions 要更新的操作按钮，通过id匹配
+     */
+    protected updateAction(update: FXDialogAction): void;
+    protected updateBackgroundStyle(style: ViewStyle): void;
+    protected updateContainerStyle(style: ViewStyle): void;
+    protected updateContentsContainerStyle(style: ViewStyle): void;
+    protected updateActionsContainerStyle(style: ViewStyle): void;
     /**
      * 显示弹窗
      */
@@ -101,12 +153,7 @@ declare class FXDialog {
     /**
      * 触发关闭，关闭弹窗， 转发给 DialogManager
      */
-    private close;
-    /**
-     * 更新弹窗内容
-     * @param updates 要更新的内容
-     */
-    private update;
+    protected close(closeType?: FXDialogCloseType): void;
     /**
      * 静态函数关闭弹窗，关闭的是最近展示出来的那个。触发关闭弹窗，并不是关闭完成。转发给 DialogManager
      * @param fxViewId 可选，指定要关闭的弹窗的 fxViewId

package/FXDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FXDialog.d.ts","sourceRoot":"","sources":["FXDialog.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,qBAAqB,EACrB,cAAc,EAGd,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAElB,qBAAqB,EAGtB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;GAEG;AACH,cAAM,QAAQ;IAEZ,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,SAAS,CAAC,CAA0C;IAE5D,OAAO,CAAC,UAAU,CAAkC;IACpD,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,oBAAoB,CAI1B;IACF,OAAO,CAAC,iBAAiB,CAIvB;IACF;;OAEG;IACH,MAAM,CAAC,KAAK,IAAI,QAAQ;IAIxB,MAAM,CAAC,WAAW,IAAI,QAAQ;IAO9B,MAAM,CAAC,KAAK,IAAI,QAAQ;IAIxB,OAAO,CAAC,MAAM,CAAC,YAAY;IAY3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAQpC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI;IAQ1C;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAWvC;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI;IAQzC;;OAEG;IACH,oBAAoB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAK3C;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAQtC;;OAEG;IACH,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAQvC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK7C,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK9C;;OAEG;IACH,aAAa,CAAC,SAAS,EAAE,qBAAqB,GAAG,IAAI;IAKrD;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,GAAG,IAAI;IAI/C;;OAEG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAKjD;;;OAGG;IACH,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAK/C;;;OAGG;IACH,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAK/C;;;;OAIG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAK/B;;;;;;OAMG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKhC;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAKnC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,iBAAiB,KAAK,IAAI,GAAG,IAAI;IAOjE;;OAEG;IACH,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI;IA+BlD;;OAEG;IACH,OAAO,CAAC,KAAK;IASb;;;OAGG;IACH,OAAO,CAAC,MAAM;IAoBd;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,iBAAiB;IAW7D;;;OAGG;IACH,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM;CAIjC;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FXDialog.d.ts","sourceRoot":"","sources":["FXDialog.ts"],"names":[],"mappings":"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"}

package/FXDialog.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const types_1 = require("./types");
+const FXDialogStyleInterceptor_1 = require("./style/FXDialogStyleInterceptor");
 const FXDialogManager_1 = __importDefault(require("./FXDialogManager"));
 const FXDialogAnimation_1 = require("./animation/FXDialogAnimation");
 const react_native_fxview_1 = require("react-native-fxview");
@@ -16,12 +17,14 @@ class FXDialog {
         // 队列项 调用 show() 时生成，show 之前是 null
         this._queueItem = null;
         this._enqueue = false;
-        this.viewDefaultAnimation = new FXDialogAnimation_1.FXDialogAnimation(types_1.FXDialogAnimationType.Scale, 300, 200);
-        this.viewConfiguration = {
+        this._viewDefaultAnimation = new FXDialogAnimation_1.FXDialogAnimation(types_1.FXDialogAnimationType.Scale, 300, 200);
+        this._viewConfiguration = {
             type: types_1.FXDialogType.Alert,
             closeOnClickBackground: true,
-            elements: [],
+            contents: [],
+            actions: [],
         };
+        this._styleInterceptor = FXDialogStyleInterceptor_1.FXDialogStyleInterceptorChain;
     }
     /**
      * 设置弹窗类型
@@ -36,9 +39,9 @@ class FXDialog {
         return this.createDialog(types_1.FXDialogType.Popup, types_1.FXDialogAnimationType.SlideUp);
     }
     static createDialog(dialogType, animationType) {
-        const dialog = new FXDialog();
-        dialog.viewConfiguration.type = dialogType;
-        dialog.viewDefaultAnimation.animationType =
+        const dialog = new this();
+        dialog._viewConfiguration.type = dialogType;
+        dialog._viewDefaultAnimation.animationType =
             animationType || types_1.FXDialogAnimationType.Scale;
         return dialog;
     }
@@ -48,10 +51,7 @@ class FXDialog {
      */
     addTitle(title) {
         var _a;
-        (_a = this.viewConfiguration.elements) === null || _a === void 0 ? void 0 : _a.push({
-            type: types_1.FXDialogElementType.Title,
-            item: title,
-        });
+        (_a = this._viewConfiguration.contents) === null || _a === void 0 ? void 0 : _a.push(title);
         return this;
     }
     /**
@@ -59,10 +59,7 @@ class FXDialog {
      */
     addMessage(message) {
         var _a;
-        (_a = this.viewConfiguration.elements) === null || _a === void 0 ? void 0 : _a.push({
-            type: types_1.FXDialogElementType.Message,
-            item: message,
-        });
+        (_a = this._viewConfiguration.contents) === null || _a === void 0 ? void 0 : _a.push(message);
         return this;
     }
     /**
@@ -70,10 +67,7 @@ class FXDialog {
      */
     addAction(action) {
         var _a;
-        (_a = this.viewConfiguration.elements) === null || _a === void 0 ? void 0 : _a.push({
-            type: types_1.FXDialogElementType.Action,
-            item: Object.assign(Object.assign({}, action), { type: action.type || types_1.FXDialogActionType.Default }),
-        });
+        (_a = this._viewConfiguration.actions) === null || _a === void 0 ? void 0 : _a.push(action);
         return this;
     }
     /**
@@ -81,46 +75,83 @@ class FXDialog {
      */
     addCustom(view) {
         var _a;
-        (_a = this.viewConfiguration.elements) === null || _a === void 0 ? void 0 : _a.push({
-            type: types_1.FXDialogElementType.CustomView,
-            item: view,
-        });
+        (_a = this._viewConfiguration.contents) === null || _a === void 0 ? void 0 : _a.push(view);
+        return this;
+    }
+    /**
+     * 添加背景，有默认样式，默认铺满overlay，position: "absolute"，传进来的组件带style，会合并默认样式
+     * 注意：这里设置style属性最好不要设置布局相关的样式，比如宽高、margin、padding, top/left/right/bottom 等，这些设置不管用，会被默认样式覆盖
+     * @param view 自定义背景组件
+     */
+    appendBackground(view) {
+        this._viewConfiguration.appendBackground = view;
         return this;
     }
     /**
      * 设置点击背景是否关闭
      */
     clickBackgroundClose(enable) {
-        this.viewConfiguration.closeOnClickBackground = enable;
+        this._viewConfiguration.closeOnClickBackground = enable;
+        return this;
+    }
+    /**
+     * 设置背景样式
+     */
+    backgroundStyle(style) {
+        this._viewConfiguration.backgroundStyle = Object.assign(Object.assign({}, this._viewConfiguration.backgroundStyle), style);
+        return this;
+    }
+    /**
+     * 添加容器背景，有默认样式，默认铺满container，position: "absolute"，传进来的组件带style，会合并默认样式
+     * 注意：这里设置style属性最好不要设置布局相关的样式，比如宽高、margin、padding, top/left/right/bottom 等，这些设置不管用，会被默认样式覆盖
+     * @param view 自定义容器背景组件
+     */
+    appendContainer(view) {
+        this._viewConfiguration.appendContainer = view;
         return this;
     }
     /**
      * 设置容器样式
      */
     containerStyle(style) {
-        this.viewConfiguration.containerStyle = Object.assign(Object.assign({}, this.viewConfiguration.containerStyle), style);
+        this._viewConfiguration.containerStyle = Object.assign(Object.assign({}, this._viewConfiguration.containerStyle), style);
         return this;
     }
     /**
-     * 添加背景样式
+     * 设置内容区域容器样式 除按钮外的内容区域样式
      */
-    backgroundStyle(style) {
-        this.viewConfiguration.backgroundStyle = Object.assign(Object.assign({}, this.viewConfiguration.backgroundStyle), style);
+    contentsContainerStyle(style) {
+        this._viewConfiguration.contentsContainerStyle = Object.assign(Object.assign({}, this._viewConfiguration.contentsContainerStyle), style);
         return this;
     }
+    /**
+     * 设置按钮区样式
+     */
+    actionsContainerStyle(style) {
+        this._viewConfiguration.actionsContainerStyle = Object.assign(Object.assign({}, this._viewConfiguration.actionsContainerStyle), style);
+        return this;
+    }
+    /**
+     * 设置弹窗显示动画时长
+     * @param duration 动画时长 ms
+     */
     showAnimationDuration(duration) {
-        this.viewDefaultAnimation.showDuration = duration;
+        this._viewDefaultAnimation.showDuration = duration;
         return this;
     }
+    /**
+     * 设置弹窗关闭动画时长
+     * @param duration 动画时长 ms
+     */
     closeAnimationDuration(duration) {
-        this.viewDefaultAnimation.closeDuration = duration;
+        this._viewDefaultAnimation.closeDuration = duration;
         return this;
     }
     /**
      * 设置动画：支持传入内置类型
      */
     animationType(animation) {
-        this.viewDefaultAnimation.animationType = animation;
+        this._viewDefaultAnimation.animationType = animation;
         return this;
     }
     /**
@@ -128,22 +159,22 @@ class FXDialog {
      * @param animator 自定义动画控制器
      */
     animator(animator) {
-        this.viewConfiguration.animator = animator;
+        this._viewConfiguration.animator = animator;
         return this;
     }
     /**
      * 设置弹窗容器最大高度
      */
     containerScrollMaxHeight(maxHeight) {
-        this.viewConfiguration.containerScrollMaxHeight = maxHeight;
+        this._viewConfiguration.containerScrollMaxHeight = maxHeight;
         return this;
     }
     /**
-     * 设置按钮区最小高度
+     * 设置弹窗需要滚动时按钮区最小高度
      * @param minHeight 最小高度
      */
     actionsScrollMinHeight(minHeight) {
-        this.viewConfiguration.actionsScrollMinHeight = minHeight;
+        this._viewConfiguration.actionsScrollMinHeight = minHeight;
         return this;
     }
     /**
@@ -151,7 +182,7 @@ class FXDialog {
      * @param maxHeight 最大高度
      */
     actionsScrollMaxHeight(maxHeight) {
-        this.viewConfiguration.actionsScrollMaxHeight = maxHeight;
+        this._viewConfiguration.actionsScrollMaxHeight = maxHeight;
         return this;
     }
     /**
@@ -188,20 +219,88 @@ class FXDialog {
         this._didClose = callback;
         return this;
     }
+    /**
+     * 更新弹窗内容
+     * @param updates 要更新的内容
+     */
+    update(updates) {
+        try {
+            react_native_fxview_1.logger.log("Dialog update", this._fxViewId);
+            if (this._queueItem) {
+                // 通过引用调用DialogView的update方法（只作用于弹窗层）
+                const dialogViewRef = this._queueItem.dialogViewRef;
+                react_native_fxview_1.logger.log("[Dialog] update", this._queueItem.dialogViewRef);
+                if (dialogViewRef && dialogViewRef.current) {
+                    dialogViewRef.current.update(updates);
+                }
+                else {
+                    react_native_fxview_1.logger.warn("[Dialog] Cannot update: DialogView ref not available");
+                }
+            }
+            else {
+                react_native_fxview_1.logger.warn("[Dialog] Cannot update: dialog not shown yet");
+            }
+        }
+        catch (error) {
+            react_native_fxview_1.logger.error("[Dialog] Failed to update dialog", error);
+        }
+    }
+    /**
+     * 更新弹窗内容
+     * @param update 要更新的内容，通过id匹配
+     */
+    updateContent(update) {
+        this.update({
+            contents: [update],
+        });
+    }
+    /**
+     * 更新操作按钮
+     * @param actions 要更新的操作按钮，通过id匹配
+     */
+    updateAction(update) {
+        this.update({
+            actions: [update],
+        });
+    }
+    updateBackgroundStyle(style) {
+        this.update({
+            backgroundStyle: style,
+        });
+    }
+    updateContainerStyle(style) {
+        this.update({
+            containerStyle: style,
+        });
+    }
+    updateContentsContainerStyle(style) {
+        this.update({
+            contentsContainerStyle: style,
+        });
+    }
+    updateActionsContainerStyle(style) {
+        this.update({
+            actionsContainerStyle: style,
+        });
+    }
     // region========== 显示方法 ==========
     /**
      * 显示弹窗
      */
     show(fxViewId) {
         try {
-            if (!this.viewConfiguration.animator) {
-                this.viewConfiguration.animator = this.viewDefaultAnimation;
+            if (!this._viewConfiguration.animator) {
+                this._viewConfiguration.animator = this._viewDefaultAnimation;
             }
+            if (this._styleInterceptor) {
+                this._viewConfiguration = this._styleInterceptor.intercept(this._viewConfiguration);
+            }
+            react_native_fxview_1.logger.log("Dialog show", this._viewConfiguration);
             this._queueItem = FXDialogManager_1.default.getInstance().show({
                 fxViewId: fxViewId,
                 priority: this._priority,
                 enqueue: this._enqueue,
-                dialogProps: this.viewConfiguration,
+                dialogProps: this._viewConfiguration,
                 didShow: this._didShow,
                 didClose: this._didClose,
             });
@@ -214,6 +313,12 @@ class FXDialog {
             return {
                 close: this.close.bind(this),
                 update: this.update.bind(this),
+                updateContent: this.updateContent.bind(this),
+                updateAction: this.updateAction.bind(this),
+                updateBackgroundStyle: this.updateBackgroundStyle.bind(this),
+                updateContainerStyle: this.updateContainerStyle.bind(this),
+                updateContentContainerStyle: this.updateContentsContainerStyle.bind(this),
+                updateActionsContainerStyle: this.updateActionsContainerStyle.bind(this),
                 fxViewId: () => this._fxViewId,
             };
         }
@@ -231,32 +336,6 @@ class FXDialog {
             FXDialogManager_1.default.getInstance().close(this._queueItem, closeType || types_1.FXDialogCloseSystemType.Custom);
         }
     }
-    /**
-     * 更新弹窗内容
-     * @param updates 要更新的内容
-     */
-    update(updates) {
-        try {
-            react_native_fxview_1.logger.log("Dialog update", this._fxViewId);
-            if (this._queueItem) {
-                // 通过引用调用DialogView的update方法（只作用于弹窗层）
-                const dialogViewRef = this._queueItem.dialogViewRef;
-                react_native_fxview_1.logger.log("[Dialog] update", this._queueItem.dialogViewRef);
-                if (dialogViewRef && dialogViewRef.current) {
-                    dialogViewRef.current.update(updates);
-                }
-                else {
-                    react_native_fxview_1.logger.warn("[Dialog] Cannot update: DialogView ref not available");
-                }
-            }
-            else {
-                react_native_fxview_1.logger.warn("[Dialog] Cannot update: dialog not shown yet");
-            }
-        }
-        catch (error) {
-            react_native_fxview_1.logger.error("[Dialog] Failed to update dialog", error);
-        }
-    }
     /**
      * 静态函数关闭弹窗，关闭的是最近展示出来的那个。触发关闭弹窗，并不是关闭完成。转发给 DialogManager
      * @param fxViewId 可选，指定要关闭的弹窗的 fxViewId

package/FXDialogView.d.ts

@@ -1,11 +1,16 @@
 import React, { Component } from "react";
 import { ViewStyle } from "react-native";
-import { FXDialogType, FXDialogAction, FXDialogElement, FXDialogAnimationImpl, FXDialogUpdateConfiguration } from "./types";
+import { FXDialogType, FXDialogAction, FXDialogAnimationImpl, FXDialogUpdateConfig, FXDialogContent } from "./types";
 export interface FXDialogViewProps {
     type?: FXDialogType;
-    elements?: FXDialogElement[];
-    containerStyle?: ViewStyle;
+    contents?: FXDialogContent[];
+    actions?: FXDialogAction[];
     backgroundStyle?: ViewStyle;
+    containerStyle?: ViewStyle;
+    contentsContainerStyle?: ViewStyle;
+    actionsContainerStyle?: ViewStyle;
+    appendBackground?: React.ReactNode;
+    appendContainer?: React.ReactNode;
     animator?: FXDialogAnimationImpl;
     closeOnClickBackground?: boolean;
     actionsScrollMinHeight?: number;
@@ -22,10 +27,16 @@ interface FXDialogViewState {
     actionsScrollable: boolean;
     adjustedContentHeight: number;
     adjustedActionsHeight: number;
-    displayElements?: FXDialogElement[];
-    measureElements?: FXDialogElement[];
+    displayContents?: FXDialogContent[];
+    displayActions?: FXDialogAction[];
+    measureContents?: FXDialogContent[];
+    measureActions?: FXDialogAction[];
     containerStyle?: ViewStyle;
     backgroundStyle?: ViewStyle;
+    contentsContainerStyle?: ViewStyle;
+    actionsContainerStyle?: ViewStyle;
+    appendBackground?: React.ReactNode;
+    appendContainer?: React.ReactNode;
 }
 export declare const FXDialogViewDefaultScrollConfig: {
     layout: {
@@ -47,7 +58,7 @@ export default class FXDialogView extends Component<FXDialogViewProps, FXDialogV
     componentDidMount(): void;
     componentWillUnmount(): void;
     shouldComponentUpdate(nextProps: FXDialogViewProps, nextState: FXDialogViewState): boolean;
-    update(updates: FXDialogUpdateConfiguration): void;
+    update(updates: FXDialogUpdateConfig): void;
     private handleContentLayout;
     private handleActionsLayout;
     private checkIfBothMeasured;
@@ -55,13 +66,18 @@ export default class FXDialogView extends Component<FXDialogViewProps, FXDialogV
     private calculateScrollState;
     handleBackdropPress: () => void;
     handleActionPress: (action: FXDialogAction) => void;
-    private categorizeElements;
+    private categorizeContents;
+    private allActions;
     private renderTitle;
     private renderMessage;
-    private renderCustomView;
-    private renderContentElement;
+    private renderCustomContent;
+    private renderSingleContent;
+    private renderSingleAction;
+    renderAppendBackground(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    renderAppendContainer(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
     renderActions: (actions: FXDialogAction[]) => React.JSX.Element;
-    renderContentArea: (elements: FXDialogElement[]) => React.JSX.Element;
+    renderContents: (contents: FXDialogContent[]) => React.JSX.Element;
+    renderAllArea: (contents: FXDialogContent[], actions: FXDialogAction[]) => React.JSX.Element;
     render(): React.JSX.Element;
 }
 export {};

package/FXDialogView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FXDialogView.d.ts","sourceRoot":"","sources":["FXDialogView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAML,SAAS,EAKV,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,YAAY,EACZ,cAAc,EAEd,eAAe,EAOf,qBAAqB,EAErB,2BAA2B,EAC5B,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,UAAU,iBAAiB;IAEzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAE5B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAE5B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAE9B,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B;;;;;;;;;;;CAgB3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,SAAS,CACjD,iBAAiB,EACjB,iBAAiB,CAClB;IACC,OAAO,CAAC,QAAQ,CAAC,CAAwB;IACzC,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,KAAK,CAAsB;gBAEvB,KAAK,EAAE,iBAAiB;IA8BpC,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,qBAAqB,CACnB,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,iBAAiB,GAC3B,OAAO;IA4BV,MAAM,CAAC,OAAO,EAAE,2BAA2B,GAAG,IAAI;IAoClD,OAAO,CAAC,mBAAmB,CAQzB;IAEF,OAAO,CAAC,mBAAmB,CAQzB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,6BAA6B,CAE9B;IAEP,OAAO,CAAC,oBAAoB,CAgB1B;IAEF,mBAAmB,aAKjB;IAEF,iBAAiB,GAAI,QAAQ,cAAc,UAgBzC;IAEF,OAAO,CAAC,kBAAkB,CAgBxB;IAEF,OAAO,CAAC,WAAW,CAcjB;IAEF,OAAO,CAAC,aAAa,CAcnB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,oBAAoB,CA8B1B;IAEF,aAAa,GAAI,SAAS,cAAc,EAAE,uBAsExC;IAEF,iBAAiB,GAAI,UAAU,eAAe,EAAE,uBAiC9C;IAEF,MAAM;CA6CP"}
+{"version":3,"file":"FXDialogView.d.ts","sourceRoot":"","sources":["FXDialogView.tsx"],"names":[],"mappings":"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"}