xref: /foundation/arkui/advanced_ui_component/interstitialdialogaction/interfaces/interstitialdialogaction.js (revision c8a96e64)

/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to  in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
const ComponentContent = requireNapi("arkui.node").ComponentContent;
const curves = requireNativeModule('ohos.curves');
const DIALOG_BORDER_RADIUS = { "id": -1, "type": 10002, params: ['sys.float.ohos_id_corner_radius_default_m'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" };
const DIALOG_INNER_PADDING_SIZE = 16;
const DIALOG_MAX_WIDTH = 480;
const DIALOG_OFFSET_X = 0;
const DIALOG_OFFSET_Y_FOR_BAR = -88;
const DIALOG_OFFSET_Y_FOR_NONE = -44;
const STANDARD_MIN_COMPONENT_HEIGHT = 82;
const STANDARD_MAX_COMPONENT_HEIGHT = 94;
const DIALOG_SHADOW_RADIUS = 16;
const DIALOG_SHADOW_OFFSET_Y = 10;
const DIALOG_SHADOW_COLOR = '#19000000';
const TITLE_LINE_DISTANCE = 2;
const TITLE_MAX_LINE = 2;
const SUBTITLE_MAX_LINE = 1;
const TEXT_LEFT_MARGIN_SIZE = 16;
const SUBTITLE_DEFAULT_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_secondary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" };
const TITLE_DEFAULT_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_primary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" };
const OPERATE_AREA_AVOID_WIDTH = 28;
const CLOSE_ICON_DARK_RESOURCE = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_tertiary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" };
const CLOSE_ICON_LIGHT_RESOURCE = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_primary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" };
const CLOSE_BUTTON_BORDER_RADIUS = 8;
const CLOSE_BUTTON_ICON_SIZE = 16;
const CLOSE_BUTTON_HOT_SPOT_SIZE = 32;
const CLOSE_BUTTON_MARGIN = 8;
const CLOSE_BUTTON_ICON_OPACITY = 0.6;
const CLOSE_BUTTON_RESPONSE_REGION_OFFSET_X = -8;
const CLOSE_BUTTON_RESPONSE_REGION_OFFSET_Y = -8;
const CLOSE_BUTTON_OFFSET_X = 0;
const CLOSE_BUTTON_OFFSET_Y = -50;
const FOREGROUND_IMAGE_OFFSET_X = 4;
const FOREGROUND_IMAGE_OFFSET_Y = 0;
export var IconStyle;
(function (e2) {
    e2[e2["DARK"] = 0] = "DARK";
    e2[e2["LIGHT"] = 1] = "LIGHT";
})(IconStyle || (IconStyle = {}));
export var TitlePosition;
(function (d2) {
    d2[d2["TOP"] = 0] = "TOP";
    d2[d2["BOTTOM"] = 1] = "BOTTOM";
})(TitlePosition || (TitlePosition = {}));
export var BottomOffset;
(function (c2) {
    c2[c2["OFFSET_FOR_BAR"] = 0] = "OFFSET_FOR_BAR";
    c2[c2["OFFSET_FOR_NONE"] = 1] = "OFFSET_FOR_NONE";
})(BottomOffset || (BottomOffset = {}));
class DialogParams {
    constructor(a2, b2) {
        this.options = a2;
        this.defaultCloseAction = b2;
    }
}
function dialogBuilder(k, l = null) {
    const m = k;
    (l ? l : this).observeComponentCreation2((x1, y1, z1 = m) => {
        Row.create();
        Row.backgroundColor('rgba(0,0,0,0)');
        Row.width('100%');
        Row.height(STANDARD_MAX_COMPONENT_HEIGHT);
        Row.padding({
            left: DIALOG_INNER_PADDING_SIZE,
            right: DIALOG_INNER_PADDING_SIZE
        });
        Row.constraintSize({
            minHeight: STANDARD_MIN_COMPONENT_HEIGHT,
            maxHeight: STANDARD_MAX_COMPONENT_HEIGHT,
            maxWidth: DIALOG_MAX_WIDTH
        });
    }, Row);
    (l ? l : this).observeComponentCreation2((t1, u1, v1 = m) => {
        Flex.create();
        Flex.backgroundColor(v1.options.backgroundImage === undefined ? '#EBEEF5' : 'rgba(0,0,0,0)');
        Flex.shadow({
            radius: DIALOG_SHADOW_RADIUS,
            offsetX: 0,
            offsetY: DIALOG_SHADOW_OFFSET_Y,
            color: DIALOG_SHADOW_COLOR
        });
        Flex.height(STANDARD_MIN_COMPONENT_HEIGHT);
        Flex.width('100%');
        Flex.alignSelf(ItemAlign.End);
        Flex.direction(Direction.Rtl);
        Flex.zIndex(1);
        Flex.borderRadius({
            topLeft: DIALOG_BORDER_RADIUS,
            topRight: DIALOG_BORDER_RADIUS,
            bottomLeft: DIALOG_BORDER_RADIUS,
            bottomRight: DIALOG_BORDER_RADIUS
        });
        Flex.onClick(() => {
            if (v1.options.onDialogClick !== undefined) {
                v1.options.onDialogClick();
            }
            v1.defaultCloseAction();
        });
    }, Flex);
    (l ? l : this).observeComponentCreation2((q1, r1, s1 = m) => {
        Row.create();
        Row.padding({ left: OPERATE_AREA_AVOID_WIDTH });
        Row.direction(Direction.Rtl);
        Row.defaultFocus(true);
        Row.align(Alignment.End);
        Row.alignSelf(ItemAlign.End);
        Row.constraintSize({
            maxWidth: '50%',
            minWidth: '40%'
        });
    }, Row);
    (l ? l : this).observeComponentCreation2((m1, n1, o1 = m) => {
        SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.xmark_circle_fill'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" });
        SymbolGlyph.fontColor([o1.options.iconStyle === IconStyle.DARK ?
                CLOSE_ICON_DARK_RESOURCE : CLOSE_ICON_LIGHT_RESOURCE]);
        SymbolGlyph.borderRadius(CLOSE_BUTTON_BORDER_RADIUS);
        SymbolGlyph.width(CLOSE_BUTTON_ICON_SIZE);
        SymbolGlyph.height(CLOSE_BUTTON_ICON_SIZE);
        SymbolGlyph.opacity(CLOSE_BUTTON_ICON_OPACITY);
        SymbolGlyph.draggable(false);
        SymbolGlyph.focusable(true);
        SymbolGlyph.responseRegion({
            x: CLOSE_BUTTON_RESPONSE_REGION_OFFSET_X,
            y: CLOSE_BUTTON_RESPONSE_REGION_OFFSET_Y,
            width: CLOSE_BUTTON_HOT_SPOT_SIZE,
            height: CLOSE_BUTTON_HOT_SPOT_SIZE
        });
        SymbolGlyph.margin(CLOSE_BUTTON_MARGIN);
        SymbolGlyph.alignSelf(ItemAlign.End);
        SymbolGlyph.offset({
            x: CLOSE_BUTTON_OFFSET_X,
            y: CLOSE_BUTTON_OFFSET_Y
        });
        SymbolGlyph.onClick(() => {
            if (o1.options.onDialogClose !== undefined) {
                o1.options.onDialogClose();
            }
            o1.defaultCloseAction();
        });
    }, SymbolGlyph);
    (l ? l : this).observeComponentCreation2((j1, k1, l1 = m) => {
        Image.create(l1.options.foregroundImage);
        Image.height(STANDARD_MAX_COMPONENT_HEIGHT);
        Image.objectFit(ImageFit.Contain);
        Image.fitOriginalSize(true);
        Image.offset({
            x: FOREGROUND_IMAGE_OFFSET_X,
            y: FOREGROUND_IMAGE_OFFSET_Y
        });
        Image.alignSelf(ItemAlign.End);
    }, Image);
    Row.pop();
    (l ? l : this).observeComponentCreation2((g1, h1, i1 = m) => {
        Flex.create({
            direction: i1.options.titlePosition === TitlePosition.BOTTOM ?
                FlexDirection.ColumnReverse : FlexDirection.Column,
            justifyContent: FlexAlign.Center
        });
        Flex.constraintSize({
            maxWidth: '60%',
            minWidth: '50%'
        });
        Flex.flexGrow(1);
        Flex.margin({ left: TEXT_LEFT_MARGIN_SIZE });
    }, Flex);
    (l ? l : this).observeComponentCreation2((d1, e1, f1 = m) => {
        Text.create(f1.options.title);
        Text.alignSelf(ItemAlign.Start);
        Text.maxFontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_sub_title1'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" });
        Text.minFontSize(16);
        Text.fontColor(f1.options.titleColor !== undefined ? f1.options.titleColor : TITLE_DEFAULT_COLOR);
        Text.fontWeight(FontWeight.Bold);
        Text.margin(f1.options.titlePosition ? { top: TITLE_LINE_DISTANCE } : { bottom: TITLE_LINE_DISTANCE });
        Text.maxLines(TITLE_MAX_LINE);
        Text.wordBreak(WordBreak.BREAK_WORD);
        Text.textOverflow({ overflow: TextOverflow.Ellipsis });
    }, Text);
    Text.pop();
    (l ? l : this).observeComponentCreation2((a1, b1, c1 = m) => {
        Text.create(c1.options.subtitle);
        Text.alignSelf(ItemAlign.Start);
        Text.maxFontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" });
        Text.minFontSize(9);
        Text.fontColor(c1.options.subtitleColor !== undefined ? c1.options.subtitleColor : SUBTITLE_DEFAULT_COLOR);
        Text.maxLines(SUBTITLE_MAX_LINE);
        Text.wordBreak(WordBreak.BREAK_WORD);
        Text.textOverflow({ overflow: TextOverflow.Ellipsis });
    }, Text);
    Text.pop();
    Flex.pop();
    Flex.pop();
    (l ? l : this).observeComponentCreation2((w, x, y = m) => {
        Image.create(y.options.backgroundImage);
        Image.width('100%');
        Image.height(STANDARD_MIN_COMPONENT_HEIGHT);
        Image.offset({ x: '-100%', y: 0 });
        Image.borderRadius(DIALOG_BORDER_RADIUS);
        Image.zIndex(0);
        Image.alignSelf(ItemAlign.End);
        Image.onClick(() => {
            if (y.options.onDialogClose !== undefined) {
                y.options.onDialogClose();
            }
            y.defaultCloseAction();
        });
    }, Image);
    Row.pop();
}
export class InterstitialDialogAction {
    constructor(i) {
        this.uiContext = i.uiContext;
        this.bottomOffsetType = i.bottomOffsetType;
        this.dialogParam = new DialogParams(i, () => {
            this.closeDialog();
        });
        this.contentNode = new ComponentContent(this.uiContext, wrapBuilder(dialogBuilder), this.dialogParam);
    }
    openDialog() {
        if (this.contentNode !== null) {
            this.uiContext.getPromptAction().openCustomDialog(this.contentNode, {
                isModal: false,
                autoCancel: false,
                offset: {
                    dx: DIALOG_OFFSET_X,
                    dy: this.bottomOffsetType === BottomOffset.OFFSET_FOR_BAR ?
                        DIALOG_OFFSET_Y_FOR_BAR : DIALOG_OFFSET_Y_FOR_NONE
                },
                alignment: DialogAlignment.Bottom,
                transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY.animation({ duration: 150, curve: Curve.Sharp })
                    .combine(TransitionEffect.scale({ x: 0.85, y: 0.85, centerX: '50%', centerY: '85%' })
                    .animation({ curve: curves.interpolatingSpring(0, 1, 228, 24) })), TransitionEffect.OPACITY.animation({ duration: 250, curve: Curve.Sharp })
                    .combine(TransitionEffect.scale({ x: 0.85, y: 0.85, centerX: '50%', centerY: '85%' })
                    .animation({ duration: 250, curve: Curve.Friction })))
            })
                .catch((f) => {
                let g = f.message;
                let h = f.code;
                console.error(`${h}: ${g}`);
            });
        }
    }
    closeDialog() {
        if (this.contentNode !== null) {
            this.uiContext.getPromptAction().closeCustomDialog(this.contentNode)
                .catch((b) => {
                let c = b.message;
                let d = b.code;
                console.error(`${d}: ${c}`);
            });
        }
    }
}

export default { InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset };