1/* 2 * Copyright (c) 2023-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 */ 15 16if (!("finalizeConstruction" in ViewPU.prototype)) { 17 Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); 18} 19 20const display = requireNapi('display'); 21const mediaquery = requireNapi('mediaquery'); 22const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 23 24export const defaultTheme = { 25 icon: { 26 size: { width: 32, height: 32 }, 27 margin: { 28 top: LengthMetrics.vp(12), 29 bottom: LengthMetrics.vp(12), 30 start: LengthMetrics.vp(12), 31 end: LengthMetrics.vp(12) 32 }, 33 fillColor: '', 34 borderRadius: { 35 "id": -1, 36 "type": 10002, 37 params: ['sys.float.ohos_id_corner_radius_default_s'], 38 "bundleName": "__harDefaultBundleName__", 39 "moduleName": "__harDefaultModuleName__" 40 } 41 }, 42 title: { 43 margin: { bottom: LengthMetrics.vp(2) }, 44 minFontSize: 12, 45 fontWeight: FontWeight.Medium, 46 fontSize: { 47 "id": -1, 48 "type": 10002, 49 params: ['sys.float.ohos_id_text_size_sub_title2'], 50 "bundleName": "__harDefaultBundleName__", 51 "moduleName": "__harDefaultModuleName__" 52 }, 53 fontColor: { 54 "id": -1, 55 "type": 10001, 56 params: ['sys.color.font_primary'], 57 "bundleName": "__harDefaultBundleName__", 58 "moduleName": "__harDefaultModuleName__" 59 } 60 }, 61 button: { 62 margin: { 63 top: LengthMetrics.vp(16), 64 bottom: LengthMetrics.vp(16), 65 start: LengthMetrics.vp(16), 66 end: LengthMetrics.vp(16) 67 }, 68 padding: { 69 top: LengthMetrics.vp(4), 70 bottom: LengthMetrics.vp(4), 71 start: LengthMetrics.vp(4), 72 end: LengthMetrics.vp(4) 73 }, 74 fontSize: { 75 "id": -1, 76 "type": 10002, 77 params: ['sys.float.ohos_id_text_size_button2'], 78 "bundleName": "__harDefaultBundleName__", 79 "moduleName": "__harDefaultModuleName__" 80 }, 81 fontColor: { 82 "id": -1, 83 "type": 10001, 84 params: ['sys.color.font_emphasize'], 85 "bundleName": "__harDefaultBundleName__", 86 "moduleName": "__harDefaultModuleName__" 87 }, 88 textMargin: { 89 top: LengthMetrics.vp(8), 90 bottom: LengthMetrics.vp(8), 91 start: LengthMetrics.vp(8), 92 end: LengthMetrics.vp(8) 93 }, 94 minFontSize: 9, 95 fontWeight: FontWeight.Medium, 96 hoverColor: { 97 "id": -1, 98 "type": 10001, 99 params: ['sys.color.ohos_id_color_hover'], 100 "bundleName": "__harDefaultBundleName__", 101 "moduleName": "__harDefaultModuleName__" 102 }, 103 backgroundColor: { 104 "id": -1, 105 "type": 10001, 106 params: ['sys.color.ohos_id_color_background_transparent'], 107 "bundleName": "__harDefaultBundleName__", 108 "moduleName": "__harDefaultModuleName__" 109 } 110 }, 111 message: { 112 fontSize: { 113 "id": -1, 114 "type": 10002, 115 params: ['sys.float.ohos_id_text_size_body2'], 116 "bundleName": "__harDefaultBundleName__", 117 "moduleName": "__harDefaultModuleName__" 118 }, 119 fontColor: { 120 "id": -1, 121 "type": 10001, 122 params: ['sys.color.font_secondary'], 123 "bundleName": "__harDefaultBundleName__", 124 "moduleName": "__harDefaultModuleName__" 125 }, 126 fontWeight: FontWeight.Regular, 127 plainFontColor: { 128 "id": -1, 129 "type": 10001, 130 params: ['sys.color.font_primary'], 131 "bundleName": "__harDefaultBundleName__", 132 "moduleName": "__harDefaultModuleName__" 133 } 134 }, 135 windows: { 136 padding: { 137 top: LengthMetrics.vp(12), 138 bottom: LengthMetrics.vp(12), 139 start: LengthMetrics.vp(12), 140 end: LengthMetrics.vp(12) 141 }, 142 }, 143 closeButton: { 144 size: { width: 22, height: 22 }, 145 imageSize: { width: 18, height: 18 }, 146 padding: { 147 top: LengthMetrics.vp(2), 148 bottom: LengthMetrics.vp(2), 149 start: LengthMetrics.vp(2), 150 end: LengthMetrics.vp(2) 151 }, 152 margin: { 153 top: LengthMetrics.vp(12), 154 bottom: LengthMetrics.vp(12), 155 start: LengthMetrics.vp(12), 156 end: LengthMetrics.vp(12) 157 }, 158 image: { 159 "id": -1, 160 "type": 20000, 161 params: ['sys.media.ohos_ic_public_cancel'], 162 "bundleName": "__harDefaultBundleName__", 163 "moduleName": "__harDefaultModuleName__" 164 }, 165 fillColor: { 166 "id": -1, 167 "type": 10001, 168 params: ['sys.color.icon_secondary'], 169 "bundleName": "__harDefaultBundleName__", 170 "moduleName": "__harDefaultModuleName__" 171 }, 172 hoverColor: { 173 "id": -1, 174 "type": 10001, 175 params: ['sys.color.ohos_id_color_hover'], 176 "bundleName": "__harDefaultBundleName__", 177 "moduleName": "__harDefaultModuleName__" 178 }, 179 backgroundColor: { 180 "id": -1, 181 "type": 10001, 182 params: ['sys.color.ohos_id_color_background_transparent'], 183 "bundleName": "__harDefaultBundleName__", 184 "moduleName": "__harDefaultModuleName__" 185 } 186 }, 187}; 188const noop = () => { 189}; 190 191export function Popup(r29, s29 = null) { 192 const t29 = r29; 193 { 194 (s29 ? s29 : this).observeComponentCreation2((v29, w29, x29 = t29) => { 195 if (w29) { 196 let y29 = new PopupComponent(typeof PUV2ViewBase !== "undefined" && s29 instanceof PUV2ViewBase ? s29 : this, { 197 icon: x29.icon, 198 title: x29.title, 199 message: x29.message, 200 popupDirection: x29.direction, 201 showClose: x29.showClose, 202 onClose: x29.onClose, 203 buttons: x29.buttons 204 }, undefined, v29, () => { 205 }, { page: "library/src/main/ets/components/popup/popup.ets", line: 198, col: 3 }); 206 ViewPU.create(y29); 207 let z29 = () => { 208 return { 209 icon: x29.icon, 210 title: x29.title, 211 message: x29.message, 212 popupDirection: x29.direction, 213 showClose: x29.showClose, 214 onClose: x29.onClose, 215 buttons: x29.buttons 216 }; 217 }; 218 y29.paramsGenerator_ = z29; 219 } 220 else { 221 (s29 ? s29 : this).updateStateVarsOfChildByElmtId(v29, { 222 icon: x29.icon, 223 title: x29.title, 224 message: x29.message, 225 popupDirection: x29.direction, 226 showClose: x29.showClose, 227 buttons: x29.buttons 228 }); 229 } 230 }, { name: "PopupComponent" }); 231 } 232} 233 234export class PopupComponent extends ViewPU { 235 constructor(l29, m29, n29, o29 = -1, p29 = undefined, q29) { 236 super(l29, n29, o29, q29); 237 if (typeof p29 === "function") { 238 this.paramsGenerator_ = p29; 239 } 240 this.onClose = noop; 241 this.theme = defaultTheme; 242 this.__icon = new SynchedPropertyObjectOneWayPU(m29.icon, this, "icon"); 243 this.__title = new SynchedPropertyObjectOneWayPU(m29.title, this, "title"); 244 this.__message = new SynchedPropertyObjectOneWayPU(m29.message, this, "message"); 245 this.__popupDirection = new SynchedPropertySimpleOneWayPU(m29.popupDirection, this, "popupDirection"); 246 this.__showClose = new SynchedPropertyObjectOneWayPU(m29.showClose, this, "showClose"); 247 this.__buttons = new SynchedPropertyObjectOneWayPU(m29.buttons, this, "buttons"); 248 this.textHeight = 0; 249 this.__titleHeight = new ObservedPropertySimplePU(0, this, "titleHeight"); 250 this.__applyHeight = new ObservedPropertySimplePU(0, this, "applyHeight"); 251 this.__buttonHeight = new ObservedPropertySimplePU(0, this, "buttonHeight"); 252 this.__messageMaxWeight = new ObservedPropertyObjectPU(0, this, "messageMaxWeight"); 253 this.__beforeScreenStatus = new ObservedPropertySimplePU(undefined, this, "beforeScreenStatus"); 254 this.__currentScreenStatus = new ObservedPropertySimplePU(true, this, "currentScreenStatus"); 255 this.__applySizeOptions = new ObservedPropertyObjectPU(undefined, this, "applySizeOptions"); 256 this.__closeButtonBackgroundColor = new ObservedPropertyObjectPU({ 257 "id": -1, 258 "type": 10001, 259 params: ['sys.color.ohos_id_color_background_transparent'], 260 "bundleName": "__harDefaultBundleName__", 261 "moduleName": "__harDefaultModuleName__" 262 }, this, "closeButtonBackgroundColor"); 263 this.__firstButtonBackgroundColor = new ObservedPropertyObjectPU({ 264 "id": -1, 265 "type": 10001, 266 params: ['sys.color.ohos_id_color_background_transparent'], 267 "bundleName": "__harDefaultBundleName__", 268 "moduleName": "__harDefaultModuleName__" 269 }, this, "firstButtonBackgroundColor"); 270 this.__secondButtonBackgroundColor = new ObservedPropertyObjectPU({ 271 "id": -1, 272 "type": 10001, 273 params: ['sys.color.ohos_id_color_background_transparent'], 274 "bundleName": "__harDefaultBundleName__", 275 "moduleName": "__harDefaultModuleName__" 276 }, this, "secondButtonBackgroundColor"); 277 this.__closeButtonFillColorWithTheme = new ObservedPropertyObjectPU({ 278 "id": -1, 279 "type": 10001, 280 params: ['sys.color.icon_secondary'], 281 "bundleName": "__harDefaultBundleName__", 282 "moduleName": "__harDefaultModuleName__" 283 }, this, "closeButtonFillColorWithTheme"); 284 this.listener = mediaquery.matchMediaSync('(orientation: landscape)'); 285 this.setInitiallyProvidedValue(m29); 286 this.finalizeConstruction(); 287 } 288 289 setInitiallyProvidedValue(k29) { 290 if (k29.onClose !== undefined) { 291 this.onClose = k29.onClose; 292 } 293 if (k29.theme !== undefined) { 294 this.theme = k29.theme; 295 } 296 if (k29.icon === undefined) { 297 this.__icon.set({ image: '' }); 298 } 299 if (k29.title === undefined) { 300 this.__title.set({ text: '' }); 301 } 302 if (k29.message === undefined) { 303 this.__message.set({ text: '' }); 304 } 305 if (k29.popupDirection === undefined) { 306 this.__popupDirection.set(Direction.Auto); 307 } 308 if (k29.showClose === undefined) { 309 this.__showClose.set(true); 310 } 311 if (k29.buttons === undefined) { 312 this.__buttons.set([{ text: '' }, { text: '' }]); 313 } 314 if (k29.textHeight !== undefined) { 315 this.textHeight = k29.textHeight; 316 } 317 if (k29.titleHeight !== undefined) { 318 this.titleHeight = k29.titleHeight; 319 } 320 if (k29.applyHeight !== undefined) { 321 this.applyHeight = k29.applyHeight; 322 } 323 if (k29.buttonHeight !== undefined) { 324 this.buttonHeight = k29.buttonHeight; 325 } 326 if (k29.messageMaxWeight !== undefined) { 327 this.messageMaxWeight = k29.messageMaxWeight; 328 } 329 if (k29.beforeScreenStatus !== undefined) { 330 this.beforeScreenStatus = k29.beforeScreenStatus; 331 } 332 if (k29.currentScreenStatus !== undefined) { 333 this.currentScreenStatus = k29.currentScreenStatus; 334 } 335 if (k29.applySizeOptions !== undefined) { 336 this.applySizeOptions = k29.applySizeOptions; 337 } 338 if (k29.closeButtonBackgroundColor !== undefined) { 339 this.closeButtonBackgroundColor = k29.closeButtonBackgroundColor; 340 } 341 if (k29.firstButtonBackgroundColor !== undefined) { 342 this.firstButtonBackgroundColor = k29.firstButtonBackgroundColor; 343 } 344 if (k29.secondButtonBackgroundColor !== undefined) { 345 this.secondButtonBackgroundColor = k29.secondButtonBackgroundColor; 346 } 347 if (k29.closeButtonFillColorWithTheme !== undefined) { 348 this.closeButtonFillColorWithTheme = k29.closeButtonFillColorWithTheme; 349 } 350 if (k29.listener !== undefined) { 351 this.listener = k29.listener; 352 } 353 } 354 355 updateStateVars(j29) { 356 this.__icon.reset(j29.icon); 357 this.__title.reset(j29.title); 358 this.__message.reset(j29.message); 359 this.__popupDirection.reset(j29.popupDirection); 360 this.__showClose.reset(j29.showClose); 361 this.__buttons.reset(j29.buttons); 362 } 363 364 purgeVariableDependenciesOnElmtId(i29) { 365 this.__icon.purgeDependencyOnElmtId(i29); 366 this.__title.purgeDependencyOnElmtId(i29); 367 this.__message.purgeDependencyOnElmtId(i29); 368 this.__popupDirection.purgeDependencyOnElmtId(i29); 369 this.__showClose.purgeDependencyOnElmtId(i29); 370 this.__buttons.purgeDependencyOnElmtId(i29); 371 this.__titleHeight.purgeDependencyOnElmtId(i29); 372 this.__applyHeight.purgeDependencyOnElmtId(i29); 373 this.__buttonHeight.purgeDependencyOnElmtId(i29); 374 this.__messageMaxWeight.purgeDependencyOnElmtId(i29); 375 this.__beforeScreenStatus.purgeDependencyOnElmtId(i29); 376 this.__currentScreenStatus.purgeDependencyOnElmtId(i29); 377 this.__applySizeOptions.purgeDependencyOnElmtId(i29); 378 this.__closeButtonBackgroundColor.purgeDependencyOnElmtId(i29); 379 this.__firstButtonBackgroundColor.purgeDependencyOnElmtId(i29); 380 this.__secondButtonBackgroundColor.purgeDependencyOnElmtId(i29); 381 this.__closeButtonFillColorWithTheme.purgeDependencyOnElmtId(i29); 382 } 383 384 aboutToBeDeleted() { 385 this.__icon.aboutToBeDeleted(); 386 this.__title.aboutToBeDeleted(); 387 this.__message.aboutToBeDeleted(); 388 this.__popupDirection.aboutToBeDeleted(); 389 this.__showClose.aboutToBeDeleted(); 390 this.__buttons.aboutToBeDeleted(); 391 this.__titleHeight.aboutToBeDeleted(); 392 this.__applyHeight.aboutToBeDeleted(); 393 this.__buttonHeight.aboutToBeDeleted(); 394 this.__messageMaxWeight.aboutToBeDeleted(); 395 this.__beforeScreenStatus.aboutToBeDeleted(); 396 this.__currentScreenStatus.aboutToBeDeleted(); 397 this.__applySizeOptions.aboutToBeDeleted(); 398 this.__closeButtonBackgroundColor.aboutToBeDeleted(); 399 this.__firstButtonBackgroundColor.aboutToBeDeleted(); 400 this.__secondButtonBackgroundColor.aboutToBeDeleted(); 401 this.__closeButtonFillColorWithTheme.aboutToBeDeleted(); 402 SubscriberManager.Get().delete(this.id__()); 403 this.aboutToBeDeletedInternal(); 404 } 405 406 get icon() { 407 return this.__icon.get(); 408 } 409 410 set icon(h29) { 411 this.__icon.set(h29); 412 } 413 414 get title() { 415 return this.__title.get(); 416 } 417 418 set title(g29) { 419 this.__title.set(g29); 420 } 421 422 get message() { 423 return this.__message.get(); 424 } 425 426 set message(f29) { 427 this.__message.set(f29); 428 } 429 430 get popupDirection() { 431 return this.__popupDirection.get(); 432 } 433 434 set popupDirection(e29) { 435 this.__popupDirection.set(e29); 436 } 437 438 get showClose() { 439 return this.__showClose.get(); 440 } 441 442 set showClose(d29) { 443 this.__showClose.set(d29); 444 } 445 446 get buttons() { 447 return this.__buttons.get(); 448 } 449 450 set buttons(c29) { 451 this.__buttons.set(c29); 452 } 453 454 get titleHeight() { 455 return this.__titleHeight.get(); 456 } 457 458 set titleHeight(b29) { 459 this.__titleHeight.set(b29); 460 } 461 462 get applyHeight() { 463 return this.__applyHeight.get(); 464 } 465 466 set applyHeight(a29) { 467 this.__applyHeight.set(a29); 468 } 469 470 get buttonHeight() { 471 return this.__buttonHeight.get(); 472 } 473 474 set buttonHeight(z28) { 475 this.__buttonHeight.set(z28); 476 } 477 478 get messageMaxWeight() { 479 return this.__messageMaxWeight.get(); 480 } 481 482 set messageMaxWeight(y28) { 483 this.__messageMaxWeight.set(y28); 484 } 485 486 get beforeScreenStatus() { 487 return this.__beforeScreenStatus.get(); 488 } 489 490 set beforeScreenStatus(x28) { 491 this.__beforeScreenStatus.set(x28); 492 } 493 494 get currentScreenStatus() { 495 return this.__currentScreenStatus.get(); 496 } 497 498 set currentScreenStatus(w28) { 499 this.__currentScreenStatus.set(w28); 500 } 501 502 get applySizeOptions() { 503 return this.__applySizeOptions.get(); 504 } 505 506 set applySizeOptions(v28) { 507 this.__applySizeOptions.set(v28); 508 } 509 510 get closeButtonBackgroundColor() { 511 return this.__closeButtonBackgroundColor.get(); 512 } 513 514 set closeButtonBackgroundColor(u28) { 515 this.__closeButtonBackgroundColor.set(u28); 516 } 517 518 get firstButtonBackgroundColor() { 519 return this.__firstButtonBackgroundColor.get(); 520 } 521 522 set firstButtonBackgroundColor(t28) { 523 this.__firstButtonBackgroundColor.set(t28); 524 } 525 526 get secondButtonBackgroundColor() { 527 return this.__secondButtonBackgroundColor.get(); 528 } 529 530 set secondButtonBackgroundColor(s28) { 531 this.__secondButtonBackgroundColor.set(s28); 532 } 533 534 get closeButtonFillColorWithTheme() { 535 return this.__closeButtonFillColorWithTheme.get(); 536 } 537 538 set closeButtonFillColorWithTheme(r28) { 539 this.__closeButtonFillColorWithTheme.set(r28); 540 } 541 542 getIconWidth() { 543 return this.icon?.width ?? this.theme.icon.size.width; 544 } 545 546 getIconHeight() { 547 return this.icon?.height ?? this.theme.icon.size.height; 548 } 549 550 getIconFillColor() { 551 return this.icon?.fillColor ?? this.theme.icon.fillColor; 552 } 553 554 getIconBorderRadius() { 555 return this.icon?.borderRadius ?? this.theme.icon.borderRadius; 556 } 557 558 getIconMargin() { 559 return { 560 start: new LengthMetrics(this.theme.button.margin.start.value / 2, this.theme.button.margin.start.unit), 561 end: new LengthMetrics(this.theme.icon.margin.start.value - (this.theme.button.margin.end.value / 2), this.theme.button.margin.start.unit) 562 }; 563 } 564 565 getIconImage() { 566 return this.icon?.image; 567 } 568 569 getTitleText() { 570 return this.title?.text; 571 } 572 573 getTitlePadding() { 574 return { 575 start: new LengthMetrics(this.theme.button.margin.start.value / 2, this.theme.button.margin.start.unit), 576 end: this.theme.closeButton.margin.end 577 }; 578 } 579 580 getTitleMargin() { 581 return this.theme.title.margin; 582 } 583 584 getTitleMinFontSize() { 585 return this.theme.title.minFontSize; 586 } 587 588 getTitleFontWeight() { 589 return this.title?.fontWeight ?? this.theme.title.fontWeight; 590 } 591 592 getTitleFontSize() { 593 return this.title?.fontSize ?? this.theme.title.fontSize; 594 } 595 596 getTitleFontColor() { 597 return this.title?.fontColor ?? this.theme.title.fontColor; 598 } 599 600 getCloseButtonWidth() { 601 return this.theme.closeButton.size.width; 602 } 603 604 getCloseButtonHeight() { 605 return this.theme.closeButton.size.height; 606 } 607 608 getCloseButtonImage() { 609 return this.theme.closeButton.image; 610 } 611 612 getCloseButtonFillColor() { 613 return this.closeButtonFillColorWithTheme; 614 } 615 616 getCloseButtonHoverColor() { 617 return this.theme.closeButton.hoverColor; 618 } 619 620 getCloseButtonBackgroundColor() { 621 return this.theme.closeButton.backgroundColor; 622 } 623 624 getCloseButtonPadding() { 625 return this.theme.closeButton.padding; 626 } 627 628 getCloseButtonImageWidth() { 629 return this.theme.closeButton.imageSize.width; 630 } 631 632 getCloseButtonImageHeight() { 633 return this.theme.closeButton.imageSize.height; 634 } 635 636 getMessageText() { 637 return this.message.text; 638 } 639 640 getMessageFontSize() { 641 return this.message.fontSize ?? this.theme.message.fontSize; 642 } 643 644 getMessageFontColor() { 645 let q28; 646 if (this.message.fontColor) { 647 q28 = this.message.fontColor; 648 } 649 else { 650 if (this.title.text !== '' && this.title.text !== void (0)) { 651 q28 = this.theme.message.fontColor; 652 } 653 else { 654 q28 = this.theme.message.plainFontColor; 655 } 656 } 657 return q28; 658 } 659 660 getMessagePadding() { 661 let p28; 662 if (this.title.text !== '' && this.title.text !== void (0)) { 663 p28 = { start: LengthMetrics.vp(this.theme.button.margin.start.value / 2) }; 664 } 665 else { 666 p28 = { 667 start: LengthMetrics.vp(this.theme.button.margin.start.value / 2), 668 end: LengthMetrics.vp(this.theme.closeButton.margin.end.value) 669 }; 670 } 671 return p28; 672 } 673 674 getMessageMaxWeight() { 675 let n28 = undefined; 676 let o28 = display.getDefaultDisplaySync(); 677 if (this.showClose || this.showClose === void (0)) { 678 if (px2vp(o28.width) > 400) { 679 n28 = 400; 680 } 681 else { 682 if (o28.width != 0) { 683 n28 = px2vp(o28.width); 684 } else { 685 // The previewer does not support the display interface to use abnormal values 686 n28 = -1; 687 } 688 } 689 n28 -= (this.theme.windows.padding.start.value - (this.theme.button.margin.end.value / 2)); 690 n28 -= this.theme.windows.padding.end.value; 691 n28 -= this.theme.button.margin.start.value / 2; 692 n28 -= this.getCloseButtonWidth(); 693 } 694 return n28; 695 } 696 697 getMessageFontWeight() { 698 return this.theme.message.fontWeight; 699 } 700 701 getButtonMargin() { 702 return { 703 top: LengthMetrics.vp(this.theme.button.textMargin.top.value / 2 - 4), 704 bottom: LengthMetrics.vp(this.theme.button.textMargin.bottom.value / 2 - 4), 705 start: LengthMetrics.vp(this.theme.button.margin.start.value / 2 - 4), 706 end: LengthMetrics.vp(this.theme.button.margin.end.value / 2 - 4) 707 }; 708 } 709 710 getButtonTextMargin() { 711 return { top: LengthMetrics.vp(this.theme.button.textMargin.bottom.value ) }; 712 } 713 714 getButtonTextPadding() { 715 return this.theme.button.padding; 716 } 717 718 getButtonHoverColor() { 719 return this.theme.button.hoverColor; 720 } 721 722 getButtonBackgroundColor() { 723 return this.theme.button.backgroundColor; 724 } 725 726 getFirstButtonText() { 727 return this.buttons?.[0]?.text; 728 } 729 730 getSecondButtonText() { 731 return this.buttons?.[1]?.text; 732 } 733 734 getFirstButtonFontSize() { 735 return this.buttons?.[0]?.fontSize ?? this.theme.button.fontSize; 736 } 737 738 getSecondButtonFontSize() { 739 return this.buttons?.[1]?.fontSize ?? this.theme.button.fontSize; 740 } 741 742 getFirstButtonFontColor() { 743 return this.buttons?.[0]?.fontColor ?? this.theme.button.fontColor; 744 } 745 746 getSecondButtonFontColor() { 747 return this.buttons?.[1]?.fontColor ?? this.theme.button.fontColor; 748 } 749 750 getButtonMinFontSize() { 751 return this.theme.button.minFontSize; 752 } 753 754 getButtonFontWeight() { 755 return this.theme.button.fontWeight; 756 } 757 758 getWindowsPadding() { 759 return { 760 top: this.theme.windows.padding.top, 761 bottom: LengthMetrics.vp(this.theme.windows.padding.bottom.value - 762 (this.theme.button.textMargin.bottom.value / 2)), 763 start: LengthMetrics.vp(this.theme.windows.padding.start.value - 764 (this.theme.button.margin.end.value / 2)), 765 end: this.theme.windows.padding.end 766 }; 767 } 768 769 onWillApplyTheme(m28) { 770 this.theme.title.fontColor = m28.colors.fontPrimary; 771 this.theme.button.fontColor = m28.colors.fontEmphasize; 772 this.theme.message.fontColor = m28.colors.fontSecondary; 773 this.theme.message.plainFontColor = m28.colors.fontPrimary; 774 this.closeButtonFillColorWithTheme = m28.colors.iconSecondary; 775 } 776 777 aboutToAppear() { 778 this.listener.on("change", (l28) => { 779 this.currentScreenStatus = l28.matches; 780 }); 781 } 782 783 aboutToDisappear() { 784 this.listener.off("change"); 785 } 786 787 getScrollMaxHeight() { 788 let j28 = undefined; 789 if (this.currentScreenStatus !== this.beforeScreenStatus) { 790 this.applySizeOptions = this.getApplyMaxSize(); 791 this.beforeScreenStatus = this.currentScreenStatus; 792 return j28; 793 } 794 j28 = this.applyHeight; 795 j28 -= this.titleHeight; 796 j28 -= this.buttonHeight; 797 j28 -= this.theme.windows.padding.top.value; 798 j28 -= (this.theme.button.textMargin.bottom.value / 2); 799 j28 -= this.theme.title.margin.bottom.value; 800 j28 -= (this.theme.windows.padding.bottom.value - 801 (this.theme.button.textMargin.bottom.value / 2)); 802 if (Math.floor(this.textHeight) > Math.floor(j28 + 1)) { 803 return j28; 804 } 805 else { 806 j28 = undefined; 807 return j28; 808 } 809 } 810 811 getLayoutWeight() { 812 let i28; 813 if ((this.icon.image !== '' && this.icon.image !== void (0)) || 814 (this.title.text !== '' && this.title.text !== void (0)) || 815 (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) || 816 (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0))) { 817 i28 = 1; 818 } 819 else { 820 i28 = 0; 821 } 822 return i28; 823 } 824 825 getApplyMaxSize() { 826 let e28 = undefined; 827 let f28 = undefined; 828 let g28 = undefined; 829 let h28 = display.getDefaultDisplaySync(); 830 if (px2vp(h28.width) > 400) { 831 e28 = 400; 832 } 833 else { 834 if (h28.width != 0) { 835 e28 = px2vp(h28.width); 836 } else { 837 // The previewer does not support the display interface to use abnormal values 838 e28 = -1; 839 } 840 } 841 if (px2vp(h28.height) > 480) { 842 f28 = 480; 843 } 844 else { 845 f28 = px2vp(h28.height) - 40 - 40; 846 } 847 g28 = { maxWidth: e28, maxHeight: f28 }; 848 this.messageMaxWeight = this.getMessageMaxWeight(); 849 return g28; 850 } 851 852 initialRender() { 853 this.observeComponentCreation2((z27, a28) => { 854 Row.create(); 855 Row.direction(this.popupDirection); 856 Row.alignItems(VerticalAlign.Top); 857 Row.padding(this.getWindowsPadding()); 858 Row.constraintSize(ObservedObject.GetRawObject(this.applySizeOptions)); 859 Row.onAreaChange((c28, d28) => { 860 this.applyHeight = d28.height; 861 }); 862 }, Row); 863 this.observeComponentCreation2((s27, t27) => { 864 If.create(); 865 if (this.icon.image !== '' && this.icon.image !== void (0)) { 866 this.ifElseBranchUpdateFunction(0, () => { 867 this.observeComponentCreation2((x27, y27) => { 868 Image.create(this.getIconImage()); 869 Image.direction(this.popupDirection); 870 Image.width(this.getIconWidth()); 871 Image.height(this.getIconHeight()); 872 Image.margin(this.getIconMargin()); 873 Image.fillColor(this.getIconFillColor()); 874 Image.borderRadius(this.getIconBorderRadius()); 875 }, Image); 876 }); 877 } 878 else { 879 this.ifElseBranchUpdateFunction(1, () => { 880 }); 881 } 882 }, If); 883 If.pop(); 884 this.observeComponentCreation2((m22, n22) => { 885 If.create(); 886 if (this.title.text !== '' && this.title.text !== void (0)) { 887 this.ifElseBranchUpdateFunction(0, () => { 888 this.observeComponentCreation2((q27, r27) => { 889 Column.create(); 890 Column.direction(this.popupDirection); 891 Column.layoutWeight(this.getLayoutWeight()); 892 }, Column); 893 this.observeComponentCreation2((l27, m27) => { 894 Flex.create({ alignItems: ItemAlign.Start }); 895 Flex.direction(this.popupDirection); 896 Flex.width("100%"); 897 Flex.margin(this.getTitleMargin()); 898 Flex.onAreaChange((o27, p27) => { 899 this.titleHeight = p27.height; 900 }); 901 }, Flex); 902 this.observeComponentCreation2((j27, k27) => { 903 Text.create(this.getTitleText()); 904 Text.direction(this.popupDirection); 905 Text.flexGrow(1); 906 Text.maxLines(2); 907 Text.align(Alignment.Start); 908 Text.padding(this.getTitlePadding()); 909 Text.minFontSize(this.getTitleMinFontSize()); 910 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 911 Text.fontWeight(this.getTitleFontWeight()); 912 Text.fontSize(this.getTitleFontSize()); 913 Text.fontColor(this.getTitleFontColor()); 914 Text.constraintSize({ minHeight: this.getCloseButtonHeight() }); 915 }, Text); 916 Text.pop(); 917 this.observeComponentCreation2((w26, x26) => { 918 If.create(); 919 if (this.showClose || this.showClose === void (0)) { 920 this.ifElseBranchUpdateFunction(0, () => { 921 this.observeComponentCreation2((e27, f27) => { 922 Button.createWithChild(); 923 Button.direction(this.popupDirection); 924 Button.width(this.getCloseButtonWidth()); 925 Button.height(this.getCloseButtonHeight()); 926 Button.padding(this.getCloseButtonPadding()); 927 Button.backgroundColor(ObservedObject.GetRawObject(this.closeButtonBackgroundColor)); 928 Button.onHover((i27) => { 929 if (i27) { 930 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor(); 931 } 932 else { 933 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor(); 934 } 935 }); 936 Button.onClick(() => { 937 if (this.onClose) { 938 this.onClose(); 939 } 940 }); 941 }, Button); 942 this.observeComponentCreation2((c27, d27) => { 943 Image.create(this.getCloseButtonImage()); 944 Image.direction(this.popupDirection); 945 Image.focusable(true); 946 Image.width(this.getCloseButtonImageWidth()); 947 Image.height(this.getCloseButtonImageHeight()); 948 Image.fillColor(this.getCloseButtonFillColor()); 949 }, Image); 950 Button.pop(); 951 }); 952 } 953 else { 954 this.ifElseBranchUpdateFunction(1, () => { 955 }); 956 } 957 }, If); 958 If.pop(); 959 Flex.pop(); 960 this.observeComponentCreation2((u26, v26) => { 961 Scroll.create(); 962 Scroll.direction(this.popupDirection); 963 Scroll.width("100%"); 964 Scroll.align(Alignment.TopStart); 965 Scroll.padding(this.getMessagePadding()); 966 Scroll.scrollBar(BarState.Auto); 967 Scroll.scrollable(ScrollDirection.Vertical); 968 Scroll.constraintSize({ maxHeight: this.getScrollMaxHeight() }); 969 }, Scroll); 970 this.observeComponentCreation2((p26, q26) => { 971 Text.create(this.getMessageText()); 972 Text.direction(this.popupDirection); 973 Text.fontSize(this.getMessageFontSize()); 974 Text.fontColor(this.getMessageFontColor()); 975 Text.fontWeight(this.getMessageFontWeight()); 976 Text.constraintSize({ minHeight: this.getCloseButtonHeight() }); 977 Text.onAreaChange((s26, t26) => { 978 this.textHeight = t26.height; 979 }); 980 }, Text); 981 Text.pop(); 982 Scroll.pop(); 983 this.observeComponentCreation2((k26, l26) => { 984 Flex.create({ wrap: FlexWrap.Wrap }); 985 Flex.direction(this.popupDirection); 986 Flex.margin(this.getButtonTextMargin()); 987 Flex.flexGrow(1); 988 Flex.onAreaChange((n26, o26) => { 989 this.buttonHeight = o26.height; 990 }); 991 }, Flex); 992 this.observeComponentCreation2((x25, y25) => { 993 If.create(); 994 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 995 this.ifElseBranchUpdateFunction(0, () => { 996 this.observeComponentCreation2((f26, g26) => { 997 Button.createWithChild(); 998 Button.direction(this.popupDirection); 999 Button.margin(this.getButtonMargin()); 1000 Button.padding(this.getButtonTextPadding()); 1001 Button.backgroundColor(ObservedObject.GetRawObject(this.firstButtonBackgroundColor)); 1002 Button.onHover((j26) => { 1003 if (j26) { 1004 this.firstButtonBackgroundColor = this.getButtonHoverColor(); 1005 } 1006 else { 1007 this.firstButtonBackgroundColor = this.getButtonBackgroundColor(); 1008 } 1009 }); 1010 Button.onClick(() => { 1011 if (this.buttons?.[0]?.action) { 1012 this.buttons?.[0]?.action(); 1013 } 1014 }); 1015 }, Button); 1016 this.observeComponentCreation2((d26, e26) => { 1017 Text.create(this.getFirstButtonText()); 1018 Text.direction(this.popupDirection); 1019 Text.maxLines(2); 1020 Text.focusable(true); 1021 Text.fontSize(this.getFirstButtonFontSize()); 1022 Text.fontColor(this.getFirstButtonFontColor()); 1023 Text.fontWeight(this.getButtonFontWeight()); 1024 Text.minFontSize(this.getButtonMinFontSize()); 1025 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1026 }, Text); 1027 Text.pop(); 1028 Button.pop(); 1029 }); 1030 } 1031 else { 1032 this.ifElseBranchUpdateFunction(1, () => { 1033 }); 1034 } 1035 }, If); 1036 If.pop(); 1037 this.observeComponentCreation2((k25, l25) => { 1038 If.create(); 1039 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 1040 this.ifElseBranchUpdateFunction(0, () => { 1041 this.observeComponentCreation2((s25, t25) => { 1042 Button.createWithChild(); 1043 Button.direction(this.popupDirection); 1044 Button.margin(this.getButtonMargin()); 1045 Button.padding(this.getButtonTextPadding()); 1046 Button.backgroundColor(ObservedObject.GetRawObject(this.secondButtonBackgroundColor)); 1047 Button.onHover((w25) => { 1048 if (w25) { 1049 this.secondButtonBackgroundColor = this.getButtonHoverColor(); 1050 } 1051 else { 1052 this.secondButtonBackgroundColor = this.getButtonBackgroundColor(); 1053 } 1054 }); 1055 Button.onClick(() => { 1056 if (this.buttons?.[1]?.action) { 1057 this.buttons?.[1]?.action(); 1058 } 1059 }); 1060 }, Button); 1061 this.observeComponentCreation2((q25, r25) => { 1062 Text.create(this.getSecondButtonText()); 1063 Text.direction(this.popupDirection); 1064 Text.maxLines(2); 1065 Text.focusable(true); 1066 Text.fontSize(this.getSecondButtonFontSize()); 1067 Text.fontColor(this.getSecondButtonFontColor()); 1068 Text.fontWeight(this.getButtonFontWeight()); 1069 Text.minFontSize(this.getButtonMinFontSize()); 1070 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1071 }, Text); 1072 Text.pop(); 1073 Button.pop(); 1074 }); 1075 } 1076 else { 1077 this.ifElseBranchUpdateFunction(1, () => { 1078 }); 1079 } 1080 }, If); 1081 If.pop(); 1082 Flex.pop(); 1083 Column.pop(); 1084 }); 1085 } 1086 else { 1087 this.ifElseBranchUpdateFunction(1, () => { 1088 this.observeComponentCreation2((y24, z24) => { 1089 Column.create(); 1090 Column.direction(this.popupDirection); 1091 Column.layoutWeight(this.getLayoutWeight()); 1092 }, Column); 1093 this.observeComponentCreation2((w24, x24) => { 1094 Row.create(); 1095 Row.direction(this.popupDirection); 1096 Row.alignItems(VerticalAlign.Top); 1097 }, Row); 1098 this.observeComponentCreation2((u24, v24) => { 1099 Scroll.create(); 1100 Scroll.direction(this.popupDirection); 1101 Scroll.layoutWeight(this.getLayoutWeight()); 1102 Scroll.align(Alignment.TopStart); 1103 Scroll.padding(this.getMessagePadding()); 1104 Scroll.scrollBar(BarState.Auto); 1105 Scroll.scrollable(ScrollDirection.Vertical); 1106 Scroll.constraintSize({ maxHeight: this.getScrollMaxHeight() }); 1107 }, Scroll); 1108 this.observeComponentCreation2((p24, q24) => { 1109 Text.create(this.getMessageText()); 1110 Text.direction(this.popupDirection); 1111 Text.fontSize(this.getMessageFontSize()); 1112 Text.fontColor(this.getMessageFontColor()); 1113 Text.fontWeight(this.getMessageFontWeight()); 1114 Text.constraintSize({ 1115 maxWidth: this.messageMaxWeight, 1116 minHeight: this.getCloseButtonHeight() 1117 }); 1118 Text.onAreaChange((s24, t24) => { 1119 this.textHeight = t24.height; 1120 }); 1121 }, Text); 1122 Text.pop(); 1123 Scroll.pop(); 1124 this.observeComponentCreation2((c24, d24) => { 1125 If.create(); 1126 if (this.showClose || this.showClose === void (0)) { 1127 this.ifElseBranchUpdateFunction(0, () => { 1128 this.observeComponentCreation2((k24, l24) => { 1129 Button.createWithChild(); 1130 Button.direction(this.popupDirection); 1131 Button.width(this.getCloseButtonWidth()); 1132 Button.height(this.getCloseButtonHeight()); 1133 Button.padding(this.getCloseButtonPadding()); 1134 Button.backgroundColor(ObservedObject.GetRawObject(this.closeButtonBackgroundColor)); 1135 Button.onHover((o24) => { 1136 if (o24) { 1137 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor(); 1138 } 1139 else { 1140 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor(); 1141 } 1142 }); 1143 Button.onClick(() => { 1144 if (this.onClose) { 1145 this.onClose(); 1146 } 1147 }); 1148 }, Button); 1149 this.observeComponentCreation2((i24, j24) => { 1150 Image.create(this.getCloseButtonImage()); 1151 Image.direction(this.popupDirection); 1152 Image.focusable(true); 1153 Image.width(this.getCloseButtonImageWidth()); 1154 Image.height(this.getCloseButtonImageHeight()); 1155 Image.fillColor(this.getCloseButtonFillColor()); 1156 }, Image); 1157 Button.pop(); 1158 }); 1159 } 1160 else { 1161 this.ifElseBranchUpdateFunction(1, () => { 1162 }); 1163 } 1164 }, If); 1165 If.pop(); 1166 Row.pop(); 1167 this.observeComponentCreation2((x23, y23) => { 1168 Flex.create({ wrap: FlexWrap.Wrap }); 1169 Flex.direction(this.popupDirection); 1170 Flex.margin(this.getButtonTextMargin()); 1171 Flex.flexGrow(1); 1172 Flex.onAreaChange((a24, b24) => { 1173 this.buttonHeight = b24.height; 1174 }); 1175 }, Flex); 1176 this.observeComponentCreation2((k23, l23) => { 1177 If.create(); 1178 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 1179 this.ifElseBranchUpdateFunction(0, () => { 1180 this.observeComponentCreation2((s23, t23) => { 1181 Button.createWithChild(); 1182 Button.direction(this.popupDirection); 1183 Button.margin(this.getButtonMargin()); 1184 Button.padding(this.getButtonTextPadding()); 1185 Button.backgroundColor(ObservedObject.GetRawObject(this.firstButtonBackgroundColor)); 1186 Button.onHover((w23) => { 1187 if (w23) { 1188 this.firstButtonBackgroundColor = this.getButtonHoverColor(); 1189 } 1190 else { 1191 this.firstButtonBackgroundColor = this.getButtonBackgroundColor(); 1192 } 1193 }); 1194 Button.onClick(() => { 1195 if (this.buttons?.[0]?.action) { 1196 this.buttons?.[0]?.action(); 1197 } 1198 }); 1199 }, Button); 1200 this.observeComponentCreation2((q23, r23) => { 1201 Text.create(this.getFirstButtonText()); 1202 Text.direction(this.popupDirection); 1203 Text.maxLines(2); 1204 Text.focusable(true); 1205 Text.fontSize(this.getFirstButtonFontSize()); 1206 Text.fontColor(this.getFirstButtonFontColor()); 1207 Text.fontWeight(this.getButtonFontWeight()); 1208 Text.minFontSize(this.getButtonMinFontSize()); 1209 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1210 }, Text); 1211 Text.pop(); 1212 Button.pop(); 1213 }); 1214 } 1215 else { 1216 this.ifElseBranchUpdateFunction(1, () => { 1217 }); 1218 } 1219 }, If); 1220 If.pop(); 1221 this.observeComponentCreation2((x22, y22) => { 1222 If.create(); 1223 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 1224 this.ifElseBranchUpdateFunction(0, () => { 1225 this.observeComponentCreation2((f23, g23) => { 1226 Button.createWithChild(); 1227 Button.direction(this.popupDirection); 1228 Button.margin(this.getButtonMargin()); 1229 Button.padding(this.getButtonTextPadding()); 1230 Button.backgroundColor(ObservedObject.GetRawObject(this.secondButtonBackgroundColor)); 1231 Button.onHover((j23) => { 1232 if (j23) { 1233 this.secondButtonBackgroundColor = this.getButtonHoverColor(); 1234 } 1235 else { 1236 this.secondButtonBackgroundColor = this.getButtonBackgroundColor(); 1237 } 1238 }); 1239 Button.onClick(() => { 1240 if (this.buttons?.[1]?.action) { 1241 this.buttons?.[1]?.action(); 1242 } 1243 }); 1244 }, Button); 1245 this.observeComponentCreation2((d23, e23) => { 1246 Text.create(this.getSecondButtonText()); 1247 Text.direction(this.popupDirection); 1248 Text.maxLines(2); 1249 Text.focusable(true); 1250 Text.fontSize(this.getSecondButtonFontSize()); 1251 Text.fontColor(this.getSecondButtonFontColor()); 1252 Text.fontWeight(this.getButtonFontWeight()); 1253 Text.minFontSize(this.getButtonMinFontSize()); 1254 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1255 }, Text); 1256 Text.pop(); 1257 Button.pop(); 1258 }); 1259 } 1260 else { 1261 this.ifElseBranchUpdateFunction(1, () => { 1262 }); 1263 } 1264 }, If); 1265 If.pop(); 1266 Flex.pop(); 1267 Column.pop(); 1268 }); 1269 } 1270 }, If); 1271 If.pop(); 1272 Row.pop(); 1273 } 1274 1275 rerender() { 1276 this.updateDirtyElements(); 1277 } 1278} 1279 1280export default { Popup };