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 n28 = px2vp(o28.width); 683 } 684 n28 -= (this.theme.windows.padding.start.value - (this.theme.button.margin.end.value / 2)); 685 n28 -= this.theme.windows.padding.end.value; 686 n28 -= this.theme.button.margin.start.value / 2; 687 n28 -= this.getCloseButtonWidth(); 688 } 689 return n28; 690 } 691 692 getMessageFontWeight() { 693 return this.theme.message.fontWeight; 694 } 695 696 getButtonMargin() { 697 return { 698 top: LengthMetrics.vp(this.theme.button.textMargin.top.value / 2 - 4), 699 bottom: LengthMetrics.vp(this.theme.button.textMargin.bottom.value / 2 - 4), 700 start: LengthMetrics.vp(this.theme.button.margin.start.value / 2 - 4), 701 end: LengthMetrics.vp(this.theme.button.margin.end.value / 2 - 4) 702 }; 703 } 704 705 getButtonTextMargin() { 706 return { top: LengthMetrics.vp(this.theme.button.textMargin.bottom.value ) }; 707 } 708 709 getButtonTextPadding() { 710 return this.theme.button.padding; 711 } 712 713 getButtonHoverColor() { 714 return this.theme.button.hoverColor; 715 } 716 717 getButtonBackgroundColor() { 718 return this.theme.button.backgroundColor; 719 } 720 721 getFirstButtonText() { 722 return this.buttons?.[0]?.text; 723 } 724 725 getSecondButtonText() { 726 return this.buttons?.[1]?.text; 727 } 728 729 getFirstButtonFontSize() { 730 return this.buttons?.[0]?.fontSize ?? this.theme.button.fontSize; 731 } 732 733 getSecondButtonFontSize() { 734 return this.buttons?.[1]?.fontSize ?? this.theme.button.fontSize; 735 } 736 737 getFirstButtonFontColor() { 738 return this.buttons?.[0]?.fontColor ?? this.theme.button.fontColor; 739 } 740 741 getSecondButtonFontColor() { 742 return this.buttons?.[1]?.fontColor ?? this.theme.button.fontColor; 743 } 744 745 getButtonMinFontSize() { 746 return this.theme.button.minFontSize; 747 } 748 749 getButtonFontWeight() { 750 return this.theme.button.fontWeight; 751 } 752 753 getWindowsPadding() { 754 return { 755 top: this.theme.windows.padding.top, 756 bottom: LengthMetrics.vp(this.theme.windows.padding.bottom.value - 757 (this.theme.button.textMargin.bottom.value / 2)), 758 start: LengthMetrics.vp(this.theme.windows.padding.start.value - 759 (this.theme.button.margin.end.value / 2)), 760 end: this.theme.windows.padding.end 761 }; 762 } 763 764 onWillApplyTheme(m28) { 765 this.theme.title.fontColor = m28.colors.fontPrimary; 766 this.theme.button.fontColor = m28.colors.fontEmphasize; 767 this.theme.message.fontColor = m28.colors.fontSecondary; 768 this.theme.message.plainFontColor = m28.colors.fontPrimary; 769 this.closeButtonFillColorWithTheme = m28.colors.iconSecondary; 770 } 771 772 aboutToAppear() { 773 this.listener.on("change", (l28) => { 774 this.currentScreenStatus = l28.matches; 775 }); 776 } 777 778 aboutToDisappear() { 779 this.listener.off("change"); 780 } 781 782 getScrollMaxHeight() { 783 let j28 = undefined; 784 if (this.currentScreenStatus !== this.beforeScreenStatus) { 785 this.applySizeOptions = this.getApplyMaxSize(); 786 this.beforeScreenStatus = this.currentScreenStatus; 787 return j28; 788 } 789 j28 = this.applyHeight; 790 j28 -= this.titleHeight; 791 j28 -= this.buttonHeight; 792 j28 -= this.theme.windows.padding.top.value; 793 j28 -= (this.theme.button.textMargin.bottom.value / 2); 794 j28 -= this.theme.title.margin.bottom.value; 795 j28 -= (this.theme.windows.padding.bottom.value - 796 (this.theme.button.textMargin.bottom.value / 2)); 797 if (Math.floor(this.textHeight) > Math.floor(j28 + 1)) { 798 return j28; 799 } 800 else { 801 j28 = undefined; 802 return j28; 803 } 804 } 805 806 getLayoutWeight() { 807 let i28; 808 if ((this.icon.image !== '' && this.icon.image !== void (0)) || 809 (this.title.text !== '' && this.title.text !== void (0)) || 810 (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) || 811 (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0))) { 812 i28 = 1; 813 } 814 else { 815 i28 = 0; 816 } 817 return i28; 818 } 819 820 getApplyMaxSize() { 821 let e28 = undefined; 822 let f28 = undefined; 823 let g28 = undefined; 824 let h28 = display.getDefaultDisplaySync(); 825 if (px2vp(h28.width) > 400) { 826 e28 = 400; 827 } 828 else { 829 e28 = px2vp(h28.width); 830 } 831 if (px2vp(h28.height) > 480) { 832 f28 = 480; 833 } 834 else { 835 f28 = px2vp(h28.height) - 40 - 40; 836 } 837 g28 = { maxWidth: e28, maxHeight: f28 }; 838 this.messageMaxWeight = this.getMessageMaxWeight(); 839 return g28; 840 } 841 842 initialRender() { 843 this.observeComponentCreation2((z27, a28) => { 844 Row.create(); 845 Row.direction(this.popupDirection); 846 Row.alignItems(VerticalAlign.Top); 847 Row.padding(this.getWindowsPadding()); 848 Row.constraintSize(ObservedObject.GetRawObject(this.applySizeOptions)); 849 Row.onAreaChange((c28, d28) => { 850 this.applyHeight = d28.height; 851 }); 852 }, Row); 853 this.observeComponentCreation2((s27, t27) => { 854 If.create(); 855 if (this.icon.image !== '' && this.icon.image !== void (0)) { 856 this.ifElseBranchUpdateFunction(0, () => { 857 this.observeComponentCreation2((x27, y27) => { 858 Image.create(this.getIconImage()); 859 Image.direction(this.popupDirection); 860 Image.width(this.getIconWidth()); 861 Image.height(this.getIconHeight()); 862 Image.margin(this.getIconMargin()); 863 Image.fillColor(this.getIconFillColor()); 864 Image.borderRadius(this.getIconBorderRadius()); 865 }, Image); 866 }); 867 } 868 else { 869 this.ifElseBranchUpdateFunction(1, () => { 870 }); 871 } 872 }, If); 873 If.pop(); 874 this.observeComponentCreation2((m22, n22) => { 875 If.create(); 876 if (this.title.text !== '' && this.title.text !== void (0)) { 877 this.ifElseBranchUpdateFunction(0, () => { 878 this.observeComponentCreation2((q27, r27) => { 879 Column.create(); 880 Column.direction(this.popupDirection); 881 Column.layoutWeight(this.getLayoutWeight()); 882 }, Column); 883 this.observeComponentCreation2((l27, m27) => { 884 Flex.create({ alignItems: ItemAlign.Start }); 885 Flex.direction(this.popupDirection); 886 Flex.width("100%"); 887 Flex.margin(this.getTitleMargin()); 888 Flex.onAreaChange((o27, p27) => { 889 this.titleHeight = p27.height; 890 }); 891 }, Flex); 892 this.observeComponentCreation2((j27, k27) => { 893 Text.create(this.getTitleText()); 894 Text.direction(this.popupDirection); 895 Text.flexGrow(1); 896 Text.maxLines(2); 897 Text.align(Alignment.Start); 898 Text.padding(this.getTitlePadding()); 899 Text.minFontSize(this.getTitleMinFontSize()); 900 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 901 Text.fontWeight(this.getTitleFontWeight()); 902 Text.fontSize(this.getTitleFontSize()); 903 Text.fontColor(this.getTitleFontColor()); 904 Text.constraintSize({ minHeight: this.getCloseButtonHeight() }); 905 }, Text); 906 Text.pop(); 907 this.observeComponentCreation2((w26, x26) => { 908 If.create(); 909 if (this.showClose || this.showClose === void (0)) { 910 this.ifElseBranchUpdateFunction(0, () => { 911 this.observeComponentCreation2((e27, f27) => { 912 Button.createWithChild(); 913 Button.direction(this.popupDirection); 914 Button.width(this.getCloseButtonWidth()); 915 Button.height(this.getCloseButtonHeight()); 916 Button.padding(this.getCloseButtonPadding()); 917 Button.backgroundColor(ObservedObject.GetRawObject(this.closeButtonBackgroundColor)); 918 Button.flexShrink(0); 919 Button.onHover((i27) => { 920 if (i27) { 921 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor(); 922 } 923 else { 924 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor(); 925 } 926 }); 927 Button.onClick(() => { 928 if (this.onClose) { 929 this.onClose(); 930 } 931 }); 932 }, Button); 933 this.observeComponentCreation2((c27, d27) => { 934 Image.create(this.getCloseButtonImage()); 935 Image.direction(this.popupDirection); 936 Image.focusable(true); 937 Image.width(this.getCloseButtonImageWidth()); 938 Image.height(this.getCloseButtonImageHeight()); 939 Image.fillColor(this.getCloseButtonFillColor()); 940 }, Image); 941 Button.pop(); 942 }); 943 } 944 else { 945 this.ifElseBranchUpdateFunction(1, () => { 946 }); 947 } 948 }, If); 949 If.pop(); 950 Flex.pop(); 951 this.observeComponentCreation2((u26, v26) => { 952 Scroll.create(); 953 Scroll.direction(this.popupDirection); 954 Scroll.width("100%"); 955 Scroll.align(Alignment.TopStart); 956 Scroll.padding(this.getMessagePadding()); 957 Scroll.scrollBar(BarState.Auto); 958 Scroll.scrollable(ScrollDirection.Vertical); 959 Scroll.constraintSize({ maxHeight: this.getScrollMaxHeight() }); 960 }, Scroll); 961 this.observeComponentCreation2((p26, q26) => { 962 Text.create(this.getMessageText()); 963 Text.direction(this.popupDirection); 964 Text.fontSize(this.getMessageFontSize()); 965 Text.fontColor(this.getMessageFontColor()); 966 Text.fontWeight(this.getMessageFontWeight()); 967 Text.constraintSize({ minHeight: this.getCloseButtonHeight() }); 968 Text.onAreaChange((s26, t26) => { 969 this.textHeight = t26.height; 970 }); 971 }, Text); 972 Text.pop(); 973 Scroll.pop(); 974 this.observeComponentCreation2((k26, l26) => { 975 Flex.create({ wrap: FlexWrap.Wrap }); 976 Flex.direction(this.popupDirection); 977 Flex.margin(this.getButtonTextMargin()); 978 Flex.flexGrow(1); 979 Flex.onAreaChange((n26, o26) => { 980 this.buttonHeight = o26.height; 981 }); 982 }, Flex); 983 this.observeComponentCreation2((x25, y25) => { 984 If.create(); 985 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 986 this.ifElseBranchUpdateFunction(0, () => { 987 this.observeComponentCreation2((f26, g26) => { 988 Button.createWithChild(); 989 Button.direction(this.popupDirection); 990 Button.margin(this.getButtonMargin()); 991 Button.padding(this.getButtonTextPadding()); 992 Button.backgroundColor(ObservedObject.GetRawObject(this.firstButtonBackgroundColor)); 993 Button.onHover((j26) => { 994 if (j26) { 995 this.firstButtonBackgroundColor = this.getButtonHoverColor(); 996 } 997 else { 998 this.firstButtonBackgroundColor = this.getButtonBackgroundColor(); 999 } 1000 }); 1001 Button.onClick(() => { 1002 if (this.buttons?.[0]?.action) { 1003 this.buttons?.[0]?.action(); 1004 } 1005 }); 1006 }, Button); 1007 this.observeComponentCreation2((d26, e26) => { 1008 Text.create(this.getFirstButtonText()); 1009 Text.direction(this.popupDirection); 1010 Text.maxLines(2); 1011 Text.focusable(true); 1012 Text.fontSize(this.getFirstButtonFontSize()); 1013 Text.fontColor(this.getFirstButtonFontColor()); 1014 Text.fontWeight(this.getButtonFontWeight()); 1015 Text.minFontSize(this.getButtonMinFontSize()); 1016 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1017 }, Text); 1018 Text.pop(); 1019 Button.pop(); 1020 }); 1021 } 1022 else { 1023 this.ifElseBranchUpdateFunction(1, () => { 1024 }); 1025 } 1026 }, If); 1027 If.pop(); 1028 this.observeComponentCreation2((k25, l25) => { 1029 If.create(); 1030 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 1031 this.ifElseBranchUpdateFunction(0, () => { 1032 this.observeComponentCreation2((s25, t25) => { 1033 Button.createWithChild(); 1034 Button.direction(this.popupDirection); 1035 Button.margin(this.getButtonMargin()); 1036 Button.padding(this.getButtonTextPadding()); 1037 Button.backgroundColor(ObservedObject.GetRawObject(this.secondButtonBackgroundColor)); 1038 Button.onHover((w25) => { 1039 if (w25) { 1040 this.secondButtonBackgroundColor = this.getButtonHoverColor(); 1041 } 1042 else { 1043 this.secondButtonBackgroundColor = this.getButtonBackgroundColor(); 1044 } 1045 }); 1046 Button.onClick(() => { 1047 if (this.buttons?.[1]?.action) { 1048 this.buttons?.[1]?.action(); 1049 } 1050 }); 1051 }, Button); 1052 this.observeComponentCreation2((q25, r25) => { 1053 Text.create(this.getSecondButtonText()); 1054 Text.direction(this.popupDirection); 1055 Text.maxLines(2); 1056 Text.focusable(true); 1057 Text.fontSize(this.getSecondButtonFontSize()); 1058 Text.fontColor(this.getSecondButtonFontColor()); 1059 Text.fontWeight(this.getButtonFontWeight()); 1060 Text.minFontSize(this.getButtonMinFontSize()); 1061 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1062 }, Text); 1063 Text.pop(); 1064 Button.pop(); 1065 }); 1066 } 1067 else { 1068 this.ifElseBranchUpdateFunction(1, () => { 1069 }); 1070 } 1071 }, If); 1072 If.pop(); 1073 Flex.pop(); 1074 Column.pop(); 1075 }); 1076 } 1077 else { 1078 this.ifElseBranchUpdateFunction(1, () => { 1079 this.observeComponentCreation2((y24, z24) => { 1080 Column.create(); 1081 Column.direction(this.popupDirection); 1082 Column.layoutWeight(this.getLayoutWeight()); 1083 }, Column); 1084 this.observeComponentCreation2((w24, x24) => { 1085 Row.create(); 1086 Row.direction(this.popupDirection); 1087 Row.alignItems(VerticalAlign.Top); 1088 }, Row); 1089 this.observeComponentCreation2((u24, v24) => { 1090 Scroll.create(); 1091 Scroll.direction(this.popupDirection); 1092 Scroll.layoutWeight(this.getLayoutWeight()); 1093 Scroll.align(Alignment.TopStart); 1094 Scroll.padding(this.getMessagePadding()); 1095 Scroll.scrollBar(BarState.Auto); 1096 Scroll.scrollable(ScrollDirection.Vertical); 1097 Scroll.constraintSize({ maxHeight: this.getScrollMaxHeight() }); 1098 }, Scroll); 1099 this.observeComponentCreation2((p24, q24) => { 1100 Text.create(this.getMessageText()); 1101 Text.direction(this.popupDirection); 1102 Text.fontSize(this.getMessageFontSize()); 1103 Text.fontColor(this.getMessageFontColor()); 1104 Text.fontWeight(this.getMessageFontWeight()); 1105 Text.constraintSize({ 1106 maxWidth: this.messageMaxWeight, 1107 minHeight: this.getCloseButtonHeight() 1108 }); 1109 Text.onAreaChange((s24, t24) => { 1110 this.textHeight = t24.height; 1111 }); 1112 }, Text); 1113 Text.pop(); 1114 Scroll.pop(); 1115 this.observeComponentCreation2((c24, d24) => { 1116 If.create(); 1117 if (this.showClose || this.showClose === void (0)) { 1118 this.ifElseBranchUpdateFunction(0, () => { 1119 this.observeComponentCreation2((k24, l24) => { 1120 Button.createWithChild(); 1121 Button.direction(this.popupDirection); 1122 Button.width(this.getCloseButtonWidth()); 1123 Button.height(this.getCloseButtonHeight()); 1124 Button.padding(this.getCloseButtonPadding()); 1125 Button.backgroundColor(ObservedObject.GetRawObject(this.closeButtonBackgroundColor)); 1126 Button.flexShrink(0); 1127 Button.onHover((o24) => { 1128 if (o24) { 1129 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor(); 1130 } 1131 else { 1132 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor(); 1133 } 1134 }); 1135 Button.onClick(() => { 1136 if (this.onClose) { 1137 this.onClose(); 1138 } 1139 }); 1140 }, Button); 1141 this.observeComponentCreation2((i24, j24) => { 1142 Image.create(this.getCloseButtonImage()); 1143 Image.direction(this.popupDirection); 1144 Image.focusable(true); 1145 Image.width(this.getCloseButtonImageWidth()); 1146 Image.height(this.getCloseButtonImageHeight()); 1147 Image.fillColor(this.getCloseButtonFillColor()); 1148 }, Image); 1149 Button.pop(); 1150 }); 1151 } 1152 else { 1153 this.ifElseBranchUpdateFunction(1, () => { 1154 }); 1155 } 1156 }, If); 1157 If.pop(); 1158 Row.pop(); 1159 this.observeComponentCreation2((x23, y23) => { 1160 Flex.create({ wrap: FlexWrap.Wrap }); 1161 Flex.direction(this.popupDirection); 1162 Flex.margin(this.getButtonTextMargin()); 1163 Flex.flexGrow(1); 1164 Flex.onAreaChange((a24, b24) => { 1165 this.buttonHeight = b24.height; 1166 }); 1167 }, Flex); 1168 this.observeComponentCreation2((k23, l23) => { 1169 If.create(); 1170 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 1171 this.ifElseBranchUpdateFunction(0, () => { 1172 this.observeComponentCreation2((s23, t23) => { 1173 Button.createWithChild(); 1174 Button.direction(this.popupDirection); 1175 Button.margin(this.getButtonMargin()); 1176 Button.padding(this.getButtonTextPadding()); 1177 Button.backgroundColor(ObservedObject.GetRawObject(this.firstButtonBackgroundColor)); 1178 Button.onHover((w23) => { 1179 if (w23) { 1180 this.firstButtonBackgroundColor = this.getButtonHoverColor(); 1181 } 1182 else { 1183 this.firstButtonBackgroundColor = this.getButtonBackgroundColor(); 1184 } 1185 }); 1186 Button.onClick(() => { 1187 if (this.buttons?.[0]?.action) { 1188 this.buttons?.[0]?.action(); 1189 } 1190 }); 1191 }, Button); 1192 this.observeComponentCreation2((q23, r23) => { 1193 Text.create(this.getFirstButtonText()); 1194 Text.direction(this.popupDirection); 1195 Text.maxLines(2); 1196 Text.focusable(true); 1197 Text.fontSize(this.getFirstButtonFontSize()); 1198 Text.fontColor(this.getFirstButtonFontColor()); 1199 Text.fontWeight(this.getButtonFontWeight()); 1200 Text.minFontSize(this.getButtonMinFontSize()); 1201 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1202 }, Text); 1203 Text.pop(); 1204 Button.pop(); 1205 }); 1206 } 1207 else { 1208 this.ifElseBranchUpdateFunction(1, () => { 1209 }); 1210 } 1211 }, If); 1212 If.pop(); 1213 this.observeComponentCreation2((x22, y22) => { 1214 If.create(); 1215 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 1216 this.ifElseBranchUpdateFunction(0, () => { 1217 this.observeComponentCreation2((f23, g23) => { 1218 Button.createWithChild(); 1219 Button.direction(this.popupDirection); 1220 Button.margin(this.getButtonMargin()); 1221 Button.padding(this.getButtonTextPadding()); 1222 Button.backgroundColor(ObservedObject.GetRawObject(this.secondButtonBackgroundColor)); 1223 Button.onHover((j23) => { 1224 if (j23) { 1225 this.secondButtonBackgroundColor = this.getButtonHoverColor(); 1226 } 1227 else { 1228 this.secondButtonBackgroundColor = this.getButtonBackgroundColor(); 1229 } 1230 }); 1231 Button.onClick(() => { 1232 if (this.buttons?.[1]?.action) { 1233 this.buttons?.[1]?.action(); 1234 } 1235 }); 1236 }, Button); 1237 this.observeComponentCreation2((d23, e23) => { 1238 Text.create(this.getSecondButtonText()); 1239 Text.direction(this.popupDirection); 1240 Text.maxLines(2); 1241 Text.focusable(true); 1242 Text.fontSize(this.getSecondButtonFontSize()); 1243 Text.fontColor(this.getSecondButtonFontColor()); 1244 Text.fontWeight(this.getButtonFontWeight()); 1245 Text.minFontSize(this.getButtonMinFontSize()); 1246 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1247 }, Text); 1248 Text.pop(); 1249 Button.pop(); 1250 }); 1251 } 1252 else { 1253 this.ifElseBranchUpdateFunction(1, () => { 1254 }); 1255 } 1256 }, If); 1257 If.pop(); 1258 Flex.pop(); 1259 Column.pop(); 1260 }); 1261 } 1262 }, If); 1263 If.pop(); 1264 Row.pop(); 1265 } 1266 1267 rerender() { 1268 this.updateDirtyElements(); 1269 } 1270} 1271 1272export default { Popup };