1/* 2 * Copyright (c) 2024 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15const ComponentContent = requireNapi("arkui.node").ComponentContent; 16const curves = requireNativeModule('ohos.curves'); 17const DIALOG_BORDER_RADIUS = { "id": -1, "type": 10002, params: ['sys.float.ohos_id_corner_radius_default_m'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; 18const DIALOG_INNER_PADDING_SIZE = 16; 19const DIALOG_MAX_WIDTH = 480; 20const DIALOG_OFFSET_X = 0; 21const DIALOG_OFFSET_Y_FOR_BAR = -88; 22const DIALOG_OFFSET_Y_FOR_NONE = -44; 23const STANDARD_MIN_COMPONENT_HEIGHT = 82; 24const STANDARD_MAX_COMPONENT_HEIGHT = 94; 25const DIALOG_SHADOW_RADIUS = 16; 26const DIALOG_SHADOW_OFFSET_Y = 10; 27const DIALOG_SHADOW_COLOR = '#19000000'; 28const TITLE_LINE_DISTANCE = 2; 29const TITLE_MAX_LINE = 2; 30const SUBTITLE_MAX_LINE = 1; 31const TEXT_LEFT_MARGIN_SIZE = 16; 32const SUBTITLE_DEFAULT_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_secondary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; 33const TITLE_DEFAULT_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_primary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; 34const OPERATE_AREA_AVOID_WIDTH = 28; 35const CLOSE_ICON_DARK_RESOURCE = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_tertiary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; 36const CLOSE_ICON_LIGHT_RESOURCE = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_primary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; 37const CLOSE_BUTTON_BORDER_RADIUS = 8; 38const CLOSE_BUTTON_ICON_SIZE = 16; 39const CLOSE_BUTTON_HOT_SPOT_SIZE = 32; 40const CLOSE_BUTTON_MARGIN = 8; 41const CLOSE_BUTTON_ICON_OPACITY = 0.6; 42const CLOSE_BUTTON_RESPONSE_REGION_OFFSET_X = -8; 43const CLOSE_BUTTON_RESPONSE_REGION_OFFSET_Y = -8; 44const CLOSE_BUTTON_OFFSET_X = 0; 45const CLOSE_BUTTON_OFFSET_Y = -50; 46const FOREGROUND_IMAGE_OFFSET_X = 4; 47const FOREGROUND_IMAGE_OFFSET_Y = 0; 48export var IconStyle; 49(function (e2) { 50 e2[e2["DARK"] = 0] = "DARK"; 51 e2[e2["LIGHT"] = 1] = "LIGHT"; 52})(IconStyle || (IconStyle = {})); 53export var TitlePosition; 54(function (d2) { 55 d2[d2["TOP"] = 0] = "TOP"; 56 d2[d2["BOTTOM"] = 1] = "BOTTOM"; 57})(TitlePosition || (TitlePosition = {})); 58export var BottomOffset; 59(function (c2) { 60 c2[c2["OFFSET_FOR_BAR"] = 0] = "OFFSET_FOR_BAR"; 61 c2[c2["OFFSET_FOR_NONE"] = 1] = "OFFSET_FOR_NONE"; 62})(BottomOffset || (BottomOffset = {})); 63class DialogParams { 64 constructor(a2, b2) { 65 this.options = a2; 66 this.defaultCloseAction = b2; 67 } 68} 69function dialogBuilder(k, l = null) { 70 const m = k; 71 (l ? l : this).observeComponentCreation2((x1, y1, z1 = m) => { 72 Row.create(); 73 Row.backgroundColor('rgba(0,0,0,0)'); 74 Row.width('100%'); 75 Row.height(STANDARD_MAX_COMPONENT_HEIGHT); 76 Row.padding({ 77 left: DIALOG_INNER_PADDING_SIZE, 78 right: DIALOG_INNER_PADDING_SIZE 79 }); 80 Row.constraintSize({ 81 minHeight: STANDARD_MIN_COMPONENT_HEIGHT, 82 maxHeight: STANDARD_MAX_COMPONENT_HEIGHT, 83 maxWidth: DIALOG_MAX_WIDTH 84 }); 85 }, Row); 86 (l ? l : this).observeComponentCreation2((t1, u1, v1 = m) => { 87 Flex.create(); 88 Flex.backgroundColor(v1.options.backgroundImage === undefined ? '#EBEEF5' : 'rgba(0,0,0,0)'); 89 Flex.shadow({ 90 radius: DIALOG_SHADOW_RADIUS, 91 offsetX: 0, 92 offsetY: DIALOG_SHADOW_OFFSET_Y, 93 color: DIALOG_SHADOW_COLOR 94 }); 95 Flex.height(STANDARD_MIN_COMPONENT_HEIGHT); 96 Flex.width('100%'); 97 Flex.alignSelf(ItemAlign.End); 98 Flex.direction(Direction.Rtl); 99 Flex.zIndex(1); 100 Flex.borderRadius({ 101 topLeft: DIALOG_BORDER_RADIUS, 102 topRight: DIALOG_BORDER_RADIUS, 103 bottomLeft: DIALOG_BORDER_RADIUS, 104 bottomRight: DIALOG_BORDER_RADIUS 105 }); 106 Flex.onClick(() => { 107 if (v1.options.onDialogClick !== undefined) { 108 v1.options.onDialogClick(); 109 } 110 v1.defaultCloseAction(); 111 }); 112 }, Flex); 113 (l ? l : this).observeComponentCreation2((q1, r1, s1 = m) => { 114 Row.create(); 115 Row.padding({ left: OPERATE_AREA_AVOID_WIDTH }); 116 Row.direction(Direction.Rtl); 117 Row.defaultFocus(true); 118 Row.align(Alignment.End); 119 Row.alignSelf(ItemAlign.End); 120 Row.constraintSize({ 121 maxWidth: '50%', 122 minWidth: '40%' 123 }); 124 }, Row); 125 (l ? l : this).observeComponentCreation2((m1, n1, o1 = m) => { 126 SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.xmark_circle_fill'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); 127 SymbolGlyph.fontColor([o1.options.iconStyle === IconStyle.DARK ? 128 CLOSE_ICON_DARK_RESOURCE : CLOSE_ICON_LIGHT_RESOURCE]); 129 SymbolGlyph.borderRadius(CLOSE_BUTTON_BORDER_RADIUS); 130 SymbolGlyph.width(CLOSE_BUTTON_ICON_SIZE); 131 SymbolGlyph.height(CLOSE_BUTTON_ICON_SIZE); 132 SymbolGlyph.opacity(CLOSE_BUTTON_ICON_OPACITY); 133 SymbolGlyph.draggable(false); 134 SymbolGlyph.focusable(true); 135 SymbolGlyph.responseRegion({ 136 x: CLOSE_BUTTON_RESPONSE_REGION_OFFSET_X, 137 y: CLOSE_BUTTON_RESPONSE_REGION_OFFSET_Y, 138 width: CLOSE_BUTTON_HOT_SPOT_SIZE, 139 height: CLOSE_BUTTON_HOT_SPOT_SIZE 140 }); 141 SymbolGlyph.margin(CLOSE_BUTTON_MARGIN); 142 SymbolGlyph.alignSelf(ItemAlign.End); 143 SymbolGlyph.offset({ 144 x: CLOSE_BUTTON_OFFSET_X, 145 y: CLOSE_BUTTON_OFFSET_Y 146 }); 147 SymbolGlyph.onClick(() => { 148 if (o1.options.onDialogClose !== undefined) { 149 o1.options.onDialogClose(); 150 } 151 o1.defaultCloseAction(); 152 }); 153 }, SymbolGlyph); 154 (l ? l : this).observeComponentCreation2((j1, k1, l1 = m) => { 155 Image.create(l1.options.foregroundImage); 156 Image.height(STANDARD_MAX_COMPONENT_HEIGHT); 157 Image.objectFit(ImageFit.Contain); 158 Image.fitOriginalSize(true); 159 Image.offset({ 160 x: FOREGROUND_IMAGE_OFFSET_X, 161 y: FOREGROUND_IMAGE_OFFSET_Y 162 }); 163 Image.alignSelf(ItemAlign.End); 164 }, Image); 165 Row.pop(); 166 (l ? l : this).observeComponentCreation2((g1, h1, i1 = m) => { 167 Flex.create({ 168 direction: i1.options.titlePosition === TitlePosition.BOTTOM ? 169 FlexDirection.ColumnReverse : FlexDirection.Column, 170 justifyContent: FlexAlign.Center 171 }); 172 Flex.constraintSize({ 173 maxWidth: '60%', 174 minWidth: '50%' 175 }); 176 Flex.flexGrow(1); 177 Flex.margin({ left: TEXT_LEFT_MARGIN_SIZE }); 178 }, Flex); 179 (l ? l : this).observeComponentCreation2((d1, e1, f1 = m) => { 180 Text.create(f1.options.title); 181 Text.alignSelf(ItemAlign.Start); 182 Text.maxFontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_sub_title1'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); 183 Text.minFontSize(16); 184 Text.fontColor(f1.options.titleColor !== undefined ? f1.options.titleColor : TITLE_DEFAULT_COLOR); 185 Text.fontWeight(FontWeight.Bold); 186 Text.margin(f1.options.titlePosition ? { top: TITLE_LINE_DISTANCE } : { bottom: TITLE_LINE_DISTANCE }); 187 Text.maxLines(TITLE_MAX_LINE); 188 Text.wordBreak(WordBreak.BREAK_WORD); 189 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 190 }, Text); 191 Text.pop(); 192 (l ? l : this).observeComponentCreation2((a1, b1, c1 = m) => { 193 Text.create(c1.options.subtitle); 194 Text.alignSelf(ItemAlign.Start); 195 Text.maxFontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); 196 Text.minFontSize(9); 197 Text.fontColor(c1.options.subtitleColor !== undefined ? c1.options.subtitleColor : SUBTITLE_DEFAULT_COLOR); 198 Text.maxLines(SUBTITLE_MAX_LINE); 199 Text.wordBreak(WordBreak.BREAK_WORD); 200 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 201 }, Text); 202 Text.pop(); 203 Flex.pop(); 204 Flex.pop(); 205 (l ? l : this).observeComponentCreation2((w, x, y = m) => { 206 Image.create(y.options.backgroundImage); 207 Image.width('100%'); 208 Image.height(STANDARD_MIN_COMPONENT_HEIGHT); 209 Image.offset({ x: '-100%', y: 0 }); 210 Image.borderRadius(DIALOG_BORDER_RADIUS); 211 Image.zIndex(0); 212 Image.alignSelf(ItemAlign.End); 213 Image.onClick(() => { 214 if (y.options.onDialogClose !== undefined) { 215 y.options.onDialogClose(); 216 } 217 y.defaultCloseAction(); 218 }); 219 }, Image); 220 Row.pop(); 221} 222export class InterstitialDialogAction { 223 constructor(i) { 224 this.uiContext = i.uiContext; 225 this.bottomOffsetType = i.bottomOffsetType; 226 this.dialogParam = new DialogParams(i, () => { 227 this.closeDialog(); 228 }); 229 this.contentNode = new ComponentContent(this.uiContext, wrapBuilder(dialogBuilder), this.dialogParam); 230 } 231 openDialog() { 232 if (this.contentNode !== null) { 233 this.uiContext.getPromptAction().openCustomDialog(this.contentNode, { 234 isModal: false, 235 autoCancel: false, 236 offset: { 237 dx: DIALOG_OFFSET_X, 238 dy: this.bottomOffsetType === BottomOffset.OFFSET_FOR_BAR ? 239 DIALOG_OFFSET_Y_FOR_BAR : DIALOG_OFFSET_Y_FOR_NONE 240 }, 241 alignment: DialogAlignment.Bottom, 242 transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY.animation({ duration: 150, curve: Curve.Sharp }) 243 .combine(TransitionEffect.scale({ x: 0.85, y: 0.85, centerX: '50%', centerY: '85%' }) 244 .animation({ curve: curves.interpolatingSpring(0, 1, 228, 24) })), TransitionEffect.OPACITY.animation({ duration: 250, curve: Curve.Sharp }) 245 .combine(TransitionEffect.scale({ x: 0.85, y: 0.85, centerX: '50%', centerY: '85%' }) 246 .animation({ duration: 250, curve: Curve.Friction }))) 247 }) 248 .catch((f) => { 249 let g = f.message; 250 let h = f.code; 251 console.error(`${h}: ${g}`); 252 }); 253 } 254 } 255 closeDialog() { 256 if (this.contentNode !== null) { 257 this.uiContext.getPromptAction().closeCustomDialog(this.contentNode) 258 .catch((b) => { 259 let c = b.message; 260 let d = b.code; 261 console.error(`${d}: ${c}`); 262 }); 263 } 264 } 265} 266 267export default { InterstitialDialogAction, IconStyle, TitlePosition, BottomOffset };