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) - 40 - 40; 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) - 40 - 40; 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.onHover((i27) => { 919 if (i27) { 920 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor(); 921 } 922 else { 923 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor(); 924 } 925 }); 926 Button.onClick(() => { 927 if (this.onClose) { 928 this.onClose(); 929 } 930 }); 931 }, Button); 932 this.observeComponentCreation2((c27, d27) => { 933 Image.create(this.getCloseButtonImage()); 934 Image.direction(this.popupDirection); 935 Image.focusable(true); 936 Image.width(this.getCloseButtonImageWidth()); 937 Image.height(this.getCloseButtonImageHeight()); 938 Image.fillColor(this.getCloseButtonFillColor()); 939 }, Image); 940 Button.pop(); 941 }); 942 } 943 else { 944 this.ifElseBranchUpdateFunction(1, () => { 945 }); 946 } 947 }, If); 948 If.pop(); 949 Flex.pop(); 950 this.observeComponentCreation2((u26, v26) => { 951 Scroll.create(); 952 Scroll.direction(this.popupDirection); 953 Scroll.width("100%"); 954 Scroll.align(Alignment.TopStart); 955 Scroll.padding(this.getMessagePadding()); 956 Scroll.scrollBar(BarState.Auto); 957 Scroll.scrollable(ScrollDirection.Vertical); 958 Scroll.constraintSize({ maxHeight: this.getScrollMaxHeight() }); 959 }, Scroll); 960 this.observeComponentCreation2((p26, q26) => { 961 Text.create(this.getMessageText()); 962 Text.direction(this.popupDirection); 963 Text.fontSize(this.getMessageFontSize()); 964 Text.fontColor(this.getMessageFontColor()); 965 Text.fontWeight(this.getMessageFontWeight()); 966 Text.constraintSize({ minHeight: this.getCloseButtonHeight() }); 967 Text.onAreaChange((s26, t26) => { 968 this.textHeight = t26.height; 969 }); 970 }, Text); 971 Text.pop(); 972 Scroll.pop(); 973 this.observeComponentCreation2((k26, l26) => { 974 Flex.create({ wrap: FlexWrap.Wrap }); 975 Flex.direction(this.popupDirection); 976 Flex.margin(this.getButtonTextMargin()); 977 Flex.flexGrow(1); 978 Flex.onAreaChange((n26, o26) => { 979 this.buttonHeight = o26.height; 980 }); 981 }, Flex); 982 this.observeComponentCreation2((x25, y25) => { 983 If.create(); 984 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 985 this.ifElseBranchUpdateFunction(0, () => { 986 this.observeComponentCreation2((f26, g26) => { 987 Button.createWithChild(); 988 Button.direction(this.popupDirection); 989 Button.margin(this.getButtonMargin()); 990 Button.padding(this.getButtonTextPadding()); 991 Button.backgroundColor(ObservedObject.GetRawObject(this.firstButtonBackgroundColor)); 992 Button.onHover((j26) => { 993 if (j26) { 994 this.firstButtonBackgroundColor = this.getButtonHoverColor(); 995 } 996 else { 997 this.firstButtonBackgroundColor = this.getButtonBackgroundColor(); 998 } 999 }); 1000 Button.onClick(() => { 1001 if (this.buttons?.[0]?.action) { 1002 this.buttons?.[0]?.action(); 1003 } 1004 }); 1005 }, Button); 1006 this.observeComponentCreation2((d26, e26) => { 1007 Text.create(this.getFirstButtonText()); 1008 Text.direction(this.popupDirection); 1009 Text.maxLines(2); 1010 Text.focusable(true); 1011 Text.fontSize(this.getFirstButtonFontSize()); 1012 Text.fontColor(this.getFirstButtonFontColor()); 1013 Text.fontWeight(this.getButtonFontWeight()); 1014 Text.minFontSize(this.getButtonMinFontSize()); 1015 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1016 }, Text); 1017 Text.pop(); 1018 Button.pop(); 1019 }); 1020 } 1021 else { 1022 this.ifElseBranchUpdateFunction(1, () => { 1023 }); 1024 } 1025 }, If); 1026 If.pop(); 1027 this.observeComponentCreation2((k25, l25) => { 1028 If.create(); 1029 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 1030 this.ifElseBranchUpdateFunction(0, () => { 1031 this.observeComponentCreation2((s25, t25) => { 1032 Button.createWithChild(); 1033 Button.direction(this.popupDirection); 1034 Button.margin(this.getButtonMargin()); 1035 Button.padding(this.getButtonTextPadding()); 1036 Button.backgroundColor(ObservedObject.GetRawObject(this.secondButtonBackgroundColor)); 1037 Button.onHover((w25) => { 1038 if (w25) { 1039 this.secondButtonBackgroundColor = this.getButtonHoverColor(); 1040 } 1041 else { 1042 this.secondButtonBackgroundColor = this.getButtonBackgroundColor(); 1043 } 1044 }); 1045 Button.onClick(() => { 1046 if (this.buttons?.[1]?.action) { 1047 this.buttons?.[1]?.action(); 1048 } 1049 }); 1050 }, Button); 1051 this.observeComponentCreation2((q25, r25) => { 1052 Text.create(this.getSecondButtonText()); 1053 Text.direction(this.popupDirection); 1054 Text.maxLines(2); 1055 Text.focusable(true); 1056 Text.fontSize(this.getSecondButtonFontSize()); 1057 Text.fontColor(this.getSecondButtonFontColor()); 1058 Text.fontWeight(this.getButtonFontWeight()); 1059 Text.minFontSize(this.getButtonMinFontSize()); 1060 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1061 }, Text); 1062 Text.pop(); 1063 Button.pop(); 1064 }); 1065 } 1066 else { 1067 this.ifElseBranchUpdateFunction(1, () => { 1068 }); 1069 } 1070 }, If); 1071 If.pop(); 1072 Flex.pop(); 1073 Column.pop(); 1074 }); 1075 } 1076 else { 1077 this.ifElseBranchUpdateFunction(1, () => { 1078 this.observeComponentCreation2((y24, z24) => { 1079 Column.create(); 1080 Column.direction(this.popupDirection); 1081 Column.layoutWeight(this.getLayoutWeight()); 1082 }, Column); 1083 this.observeComponentCreation2((w24, x24) => { 1084 Row.create(); 1085 Row.direction(this.popupDirection); 1086 Row.alignItems(VerticalAlign.Top); 1087 }, Row); 1088 this.observeComponentCreation2((u24, v24) => { 1089 Scroll.create(); 1090 Scroll.direction(this.popupDirection); 1091 Scroll.layoutWeight(this.getLayoutWeight()); 1092 Scroll.align(Alignment.TopStart); 1093 Scroll.padding(this.getMessagePadding()); 1094 Scroll.scrollBar(BarState.Auto); 1095 Scroll.scrollable(ScrollDirection.Vertical); 1096 Scroll.constraintSize({ maxHeight: this.getScrollMaxHeight() }); 1097 }, Scroll); 1098 this.observeComponentCreation2((p24, q24) => { 1099 Text.create(this.getMessageText()); 1100 Text.direction(this.popupDirection); 1101 Text.fontSize(this.getMessageFontSize()); 1102 Text.fontColor(this.getMessageFontColor()); 1103 Text.fontWeight(this.getMessageFontWeight()); 1104 Text.constraintSize({ 1105 maxWidth: this.messageMaxWeight, 1106 minHeight: this.getCloseButtonHeight() 1107 }); 1108 Text.onAreaChange((s24, t24) => { 1109 this.textHeight = t24.height; 1110 }); 1111 }, Text); 1112 Text.pop(); 1113 Scroll.pop(); 1114 this.observeComponentCreation2((c24, d24) => { 1115 If.create(); 1116 if (this.showClose || this.showClose === void (0)) { 1117 this.ifElseBranchUpdateFunction(0, () => { 1118 this.observeComponentCreation2((k24, l24) => { 1119 Button.createWithChild(); 1120 Button.direction(this.popupDirection); 1121 Button.width(this.getCloseButtonWidth()); 1122 Button.height(this.getCloseButtonHeight()); 1123 Button.padding(this.getCloseButtonPadding()); 1124 Button.backgroundColor(ObservedObject.GetRawObject(this.closeButtonBackgroundColor)); 1125 Button.onHover((o24) => { 1126 if (o24) { 1127 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor(); 1128 } 1129 else { 1130 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor(); 1131 } 1132 }); 1133 Button.onClick(() => { 1134 if (this.onClose) { 1135 this.onClose(); 1136 } 1137 }); 1138 }, Button); 1139 this.observeComponentCreation2((i24, j24) => { 1140 Image.create(this.getCloseButtonImage()); 1141 Image.direction(this.popupDirection); 1142 Image.focusable(true); 1143 Image.width(this.getCloseButtonImageWidth()); 1144 Image.height(this.getCloseButtonImageHeight()); 1145 Image.fillColor(this.getCloseButtonFillColor()); 1146 }, Image); 1147 Button.pop(); 1148 }); 1149 } 1150 else { 1151 this.ifElseBranchUpdateFunction(1, () => { 1152 }); 1153 } 1154 }, If); 1155 If.pop(); 1156 Row.pop(); 1157 this.observeComponentCreation2((x23, y23) => { 1158 Flex.create({ wrap: FlexWrap.Wrap }); 1159 Flex.direction(this.popupDirection); 1160 Flex.margin(this.getButtonTextMargin()); 1161 Flex.flexGrow(1); 1162 Flex.onAreaChange((a24, b24) => { 1163 this.buttonHeight = b24.height; 1164 }); 1165 }, Flex); 1166 this.observeComponentCreation2((k23, l23) => { 1167 If.create(); 1168 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 1169 this.ifElseBranchUpdateFunction(0, () => { 1170 this.observeComponentCreation2((s23, t23) => { 1171 Button.createWithChild(); 1172 Button.direction(this.popupDirection); 1173 Button.margin(this.getButtonMargin()); 1174 Button.padding(this.getButtonTextPadding()); 1175 Button.backgroundColor(ObservedObject.GetRawObject(this.firstButtonBackgroundColor)); 1176 Button.onHover((w23) => { 1177 if (w23) { 1178 this.firstButtonBackgroundColor = this.getButtonHoverColor(); 1179 } 1180 else { 1181 this.firstButtonBackgroundColor = this.getButtonBackgroundColor(); 1182 } 1183 }); 1184 Button.onClick(() => { 1185 if (this.buttons?.[0]?.action) { 1186 this.buttons?.[0]?.action(); 1187 } 1188 }); 1189 }, Button); 1190 this.observeComponentCreation2((q23, r23) => { 1191 Text.create(this.getFirstButtonText()); 1192 Text.direction(this.popupDirection); 1193 Text.maxLines(2); 1194 Text.focusable(true); 1195 Text.fontSize(this.getFirstButtonFontSize()); 1196 Text.fontColor(this.getFirstButtonFontColor()); 1197 Text.fontWeight(this.getButtonFontWeight()); 1198 Text.minFontSize(this.getButtonMinFontSize()); 1199 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1200 }, Text); 1201 Text.pop(); 1202 Button.pop(); 1203 }); 1204 } 1205 else { 1206 this.ifElseBranchUpdateFunction(1, () => { 1207 }); 1208 } 1209 }, If); 1210 If.pop(); 1211 this.observeComponentCreation2((x22, y22) => { 1212 If.create(); 1213 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 1214 this.ifElseBranchUpdateFunction(0, () => { 1215 this.observeComponentCreation2((f23, g23) => { 1216 Button.createWithChild(); 1217 Button.direction(this.popupDirection); 1218 Button.margin(this.getButtonMargin()); 1219 Button.padding(this.getButtonTextPadding()); 1220 Button.backgroundColor(ObservedObject.GetRawObject(this.secondButtonBackgroundColor)); 1221 Button.onHover((j23) => { 1222 if (j23) { 1223 this.secondButtonBackgroundColor = this.getButtonHoverColor(); 1224 } 1225 else { 1226 this.secondButtonBackgroundColor = this.getButtonBackgroundColor(); 1227 } 1228 }); 1229 Button.onClick(() => { 1230 if (this.buttons?.[1]?.action) { 1231 this.buttons?.[1]?.action(); 1232 } 1233 }); 1234 }, Button); 1235 this.observeComponentCreation2((d23, e23) => { 1236 Text.create(this.getSecondButtonText()); 1237 Text.direction(this.popupDirection); 1238 Text.maxLines(2); 1239 Text.focusable(true); 1240 Text.fontSize(this.getSecondButtonFontSize()); 1241 Text.fontColor(this.getSecondButtonFontColor()); 1242 Text.fontWeight(this.getButtonFontWeight()); 1243 Text.minFontSize(this.getButtonMinFontSize()); 1244 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1245 }, Text); 1246 Text.pop(); 1247 Button.pop(); 1248 }); 1249 } 1250 else { 1251 this.ifElseBranchUpdateFunction(1, () => { 1252 }); 1253 } 1254 }, If); 1255 If.pop(); 1256 Flex.pop(); 1257 Column.pop(); 1258 }); 1259 } 1260 }, If); 1261 If.pop(); 1262 Row.pop(); 1263 } 1264 1265 rerender() { 1266 this.updateDirtyElements(); 1267 } 1268} 1269 1270export default { Popup };