1/* 2 * Copyright (c) 2023 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 16import display from '@ohos.display'; 17import mediaquery from '@ohos.mediaquery' 18 19interface IconTheme { 20 size: SizeOptions; 21 margin: Margin; 22 fillColor: ResourceColor; 23 borderRadius: Length; 24} 25 26interface TitleTheme { 27 margin: Margin; 28 minFontSize: number; 29 fontWeight: FontWeight; 30 fontSize: Resource; 31 fontColor: ResourceColor; 32} 33 34interface ButtonTheme { 35 margin: Margin; 36 padding: Padding; 37 fontSize: Resource; 38 fontColor: ResourceColor; 39 textMargin: Margin; 40 minFontSize: number; 41 fontWeight: FontWeight; 42 hoverColor: ResourceColor; 43 backgroundColor: ResourceColor; 44} 45 46interface MessageTheme { 47 fontSize: Resource; 48 fontColor: ResourceColor; 49 fontWeight: FontWeight; 50 plainFontColor: ResourceColor; 51} 52 53interface CloseButtonTheme { 54 size: SizeOptions; 55 image: ResourceStr; 56 imageSize: SizeOptions; 57 margin: Margin; 58 padding: Padding; 59 fillColor: ResourceColor; 60 hoverColor: ResourceColor; 61 backgroundColor: ResourceColor; 62} 63 64interface WindowsTheme { 65 padding: Padding; 66} 67 68interface PopupTheme { 69 icon: IconTheme; 70 title: TitleTheme; 71 button: ButtonTheme; 72 message: MessageTheme; 73 windows: WindowsTheme; 74 closeButton: CloseButtonTheme; 75} 76 77export const defaultTheme: PopupTheme = { 78 icon: { 79 size: { width: 32, height: 32 }, 80 margin: { top: 12, bottom: 12, left: 12, right: 12 }, 81 fillColor: '', 82 borderRadius: $r('sys.float.ohos_id_corner_radius_default_s') 83 84 }, 85 title: { 86 margin: { bottom: 2 }, 87 minFontSize: 12, 88 fontWeight: FontWeight.Medium, 89 fontSize: $r('sys.float.ohos_id_text_size_sub_title2'), 90 fontColor: $r('sys.color.ohos_id_color_text_primary') 91 }, 92 button: { 93 margin: { top: 16, bottom: 16, left: 16, right: 16 }, 94 padding: { top: 4, bottom: 4, left: 4, right: 4 }, 95 fontSize: $r('sys.float.ohos_id_text_size_button2'), 96 fontColor: $r('sys.color.ohos_id_color_text_primary_activated'), 97 textMargin: { top: 8, bottom: 8, left: 8, right: 8 }, 98 minFontSize: 9, 99 fontWeight: FontWeight.Medium, 100 hoverColor: $r('sys.color.ohos_id_color_hover'), 101 backgroundColor: $r('sys.color.ohos_id_color_background_transparent') 102 }, 103 message: { 104 fontSize: $r('sys.float.ohos_id_text_size_body2'), 105 fontColor: $r('sys.color.ohos_id_color_text_secondary'), 106 fontWeight: FontWeight.Regular, 107 plainFontColor: $r('sys.color.ohos_id_color_text_primary') 108 }, 109 windows: { 110 padding: { top: 12, bottom: 12, left: 12, right: 12 }, 111 }, 112 closeButton: { 113 size: { width: 22, height: 22 }, 114 imageSize: { width: 18, height: 18 }, 115 padding: { top: 2, bottom: 2, left: 2, right: 2 }, 116 margin: { top: 12, bottom: 12, left: 12, right: 12 }, 117 image: $r('sys.media.ohos_ic_public_cancel'), 118 fillColor: $r('sys.color.ohos_id_color_secondary'), 119 hoverColor: $r('sys.color.ohos_id_color_hover'), 120 backgroundColor: $r('sys.color.ohos_id_color_background_transparent') 121 }, 122}; 123 124export interface PopupTextOptions { 125 text: ResourceStr; 126 fontSize?: number | string | Resource; 127 fontColor?: ResourceColor; 128 fontWeight?: number | FontWeight | string; 129} 130 131export interface PopupButtonOptions { 132 text: ResourceStr; 133 action?: () => void; 134 fontSize?: number | string | Resource; 135 fontColor?: ResourceColor; 136} 137 138export interface PopupIconOptions { 139 image: ResourceStr; 140 width?: Dimension; 141 height?: Dimension; 142 fillColor?: ResourceColor; 143 borderRadius?: Length | BorderRadiuses; 144} 145 146export interface PopupOptions { 147 icon?: PopupIconOptions; 148 title?: PopupTextOptions; 149 message: PopupTextOptions; 150 showClose?: boolean | Resource; 151 onClose?: () => void; 152 buttons?: [PopupButtonOptions?, PopupButtonOptions?]; 153} 154 155const noop = () => { 156}; 157 158@Builder 159export function Popup(options: PopupOptions) { 160 PopupComponent({ 161 icon: options.icon, 162 title: options.title, 163 message: options.message, 164 showClose: options.showClose, 165 onClose: options.onClose, 166 buttons: options.buttons 167 }) 168} 169 170@Component 171export struct PopupComponent { 172 private onClose: () => void = noop; 173 private theme: PopupTheme = defaultTheme; 174 @Prop icon: PopupIconOptions = { image: '' }; 175 @Prop title: PopupTextOptions = { text: '' }; 176 @Prop message: PopupTextOptions = { text: '' }; 177 @Prop showClose: boolean | Resource = true; 178 @Prop buttons: [PopupButtonOptions?, PopupButtonOptions?] = [{ text: '' }, { text: '' }]; 179 textHeight: number = 0; 180 @State titleHeight: number = 0; 181 @State applyHeight: number = 0; 182 @State buttonHeight: number = 0; 183 @State messageMaxWeight: number = 0; 184 @State beforeScreenStatus: boolean = undefined; 185 @State currentScreenStatus: boolean = true; 186 @State applySizeOptions : ConstraintSizeOptions = undefined; 187 @State closeButtonBackgroundColor: ResourceColor = $r('sys.color.ohos_id_color_background_transparent'); 188 @State firstButtonBackgroundColor: ResourceColor = $r('sys.color.ohos_id_color_background_transparent'); 189 @State secondButtonBackgroundColor: ResourceColor = $r('sys.color.ohos_id_color_background_transparent'); 190 private listener = mediaquery.matchMediaSync('(orientation: landscape)') 191 192 private getIconWidth(): Dimension { 193 return this.icon?.width ?? this.theme.icon.size.width as number 194 } 195 196 private getIconHeight(): Dimension { 197 return this.icon?.height ?? this.theme.icon.size.height as number 198 } 199 200 private getIconFillColor(): ResourceColor { 201 return this.icon?.fillColor ?? this.theme.icon.fillColor 202 } 203 204 private getIconBorderRadius(): Length | BorderRadiuses { 205 return this.icon?.borderRadius ?? this.theme.icon.borderRadius 206 } 207 208 private getIconMargin(): Margin { 209 return { left: this.theme.button.margin.left as number / 2, 210 right: this.theme.icon.margin.right as number - (this.theme.button.margin.right as number / 2) } 211 } 212 213 private getIconImage(): ResourceStr | undefined { 214 return this.icon?.image 215 } 216 217 private getTitleText(): ResourceStr | undefined { 218 return this.title?.text 219 } 220 221 private getTitlePadding(): Padding { 222 return { left: this.theme.button.margin.left as number / 2, right: this.theme.closeButton.margin.right } 223 } 224 225 private getTitleMargin(): Margin { 226 return this.theme.title.margin 227 } 228 229 private getTitleMinFontSize(): number | string | Resource { 230 return this.theme.title.minFontSize 231 } 232 233 private getTitleFontWeight(): number | FontWeight | string { 234 return this.title?.fontWeight ?? this.theme.title.fontWeight 235 } 236 237 private getTitleFontSize(): number | string | Resource { 238 return this.title?.fontSize ?? this.theme.title.fontSize 239 } 240 241 private getTitleFontColor(): ResourceColor { 242 return this.title?.fontColor ?? this.theme.title.fontColor 243 } 244 245 private getCloseButtonWidth(): Length | undefined { 246 return this.theme.closeButton.size.width 247 } 248 249 private getCloseButtonHeight(): Length | undefined { 250 return this.theme.closeButton.size.height 251 } 252 253 private getCloseButtonImage(): ResourceStr { 254 return this.theme.closeButton.image 255 } 256 257 private getCloseButtonFillColor(): ResourceColor { 258 return this.theme.closeButton.fillColor 259 } 260 261 private getCloseButtonHoverColor(): ResourceColor { 262 return this.theme.closeButton.hoverColor 263 } 264 265 private getCloseButtonBackgroundColor(): ResourceColor { 266 return this.theme.closeButton.backgroundColor 267 } 268 269 private getCloseButtonPadding(): Padding { 270 return this.theme.closeButton.padding 271 } 272 273 private getCloseButtonImageWidth(): Length | undefined { 274 return this.theme.closeButton.imageSize.width 275 } 276 277 private getCloseButtonImageHeight(): Length | undefined { 278 return this.theme.closeButton.imageSize.height 279 } 280 281 private getMessageText(): string | Resource { 282 return this.message.text 283 } 284 285 private getMessageFontSize(): number | string | Resource { 286 return this.message.fontSize ?? this.theme.message.fontSize 287 } 288 289 private getMessageFontColor(): ResourceColor { 290 let fontColor: ResourceColor 291 if (this.message.fontColor) { 292 fontColor = this.message.fontColor 293 } else { 294 if (this.title.text !== '' && this.title.text !== void (0)) { 295 fontColor = this.theme.message.fontColor 296 } else { 297 fontColor = this.theme.message.plainFontColor 298 } 299 } 300 return fontColor 301 } 302 303 private getMessagePadding(): Padding { 304 let padding: Padding 305 if (this.title.text !== '' && this.title.text !== void (0)) { 306 padding = { left: this.theme.button.margin.left as number / 2 } 307 } 308 else { 309 padding = { left: this.theme.button.margin.left as number / 2, right: this.theme.closeButton.margin.right } 310 } 311 return padding 312 } 313 314 private getMessageMaxWeight(): number | undefined { 315 let textMaxWeight: number = undefined 316 let defaultDisplaySync: display.Display = display.getDefaultDisplaySync() 317 if (this.showClose || this.showClose === void (0)) { 318 if (px2vp(defaultDisplaySync.width) > 400) { 319 textMaxWeight = 400 320 } else { 321 textMaxWeight = px2vp(defaultDisplaySync.width) - 40 - 40 322 } 323 textMaxWeight -= (this.theme.windows.padding.left as number - (this.theme.button.margin.right as number / 2)) 324 textMaxWeight -= this.theme.windows.padding.right as number 325 textMaxWeight -= this.theme.button.margin.left as number / 2 326 textMaxWeight -= this.getCloseButtonWidth() as number 327 } 328 return textMaxWeight 329 } 330 331 private getMessageFontWeight(): number | FontWeight | string { 332 return this.theme.message.fontWeight 333 } 334 335 private getButtonMargin(): Margin { 336 return { top: this.theme.button.textMargin.top as number / 2 - 4, 337 bottom: this.theme.button.textMargin.bottom as number / 2 - 4, 338 left: this.theme.button.margin.left as number / 2 - 4, 339 right: this.theme.button.margin.right as number / 2 - 4 340 } 341 } 342 343 private getButtonTextMargin(): Margin { 344 return { top: this.theme.button.textMargin.bottom as number / 2 } 345 } 346 347 private getButtonTextPadding(): Padding { 348 return this.theme.button.padding 349 } 350 351 private getButtonHoverColor(): ResourceColor { 352 return this.theme.button.hoverColor 353 } 354 355 private getButtonBackgroundColor(): ResourceColor { 356 return this.theme.button.backgroundColor 357 } 358 359 private getFirstButtonText(): string | Resource | undefined { 360 return this.buttons?.[0]?.text 361 } 362 363 private getSecondButtonText(): string | Resource | undefined { 364 return this.buttons?.[1]?.text 365 } 366 367 private getFirstButtonFontSize(): number | string | Resource { 368 return this.buttons?.[0]?.fontSize ?? this.theme.button.fontSize 369 } 370 371 private getSecondButtonFontSize(): number | string | Resource { 372 return this.buttons?.[1]?.fontSize ?? this.theme.button.fontSize 373 } 374 375 private getFirstButtonFontColor(): ResourceColor { 376 return this.buttons?.[0]?.fontColor ?? this.theme.button.fontColor 377 } 378 379 private getSecondButtonFontColor(): ResourceColor { 380 return this.buttons?.[1]?.fontColor ?? this.theme.button.fontColor 381 } 382 383 private getButtonMinFontSize(): Dimension { 384 return this.theme.button.minFontSize 385 } 386 387 private getButtonFontWeight(): number | FontWeight | string { 388 return this.theme.button.fontWeight 389 } 390 391 private getWindowsPadding(): Padding { 392 return { 393 top: this.theme.windows.padding.top, 394 bottom: this.theme.windows.padding.bottom as number - (this.theme.button.textMargin.bottom as number / 2), 395 left: this.theme.windows.padding.left as number - (this.theme.button.margin.right as number / 2), 396 right: this.theme.windows.padding.right 397 } 398 } 399 400 aboutToAppear() { 401 this.listener.on("change", (mediaQueryResult: mediaquery.MediaQueryResult) => { 402 this.currentScreenStatus = mediaQueryResult.matches 403 }) 404 } 405 406 aboutToDisappear() { 407 this.listener.off("change") 408 } 409 410 getScrollMaxHeight(): number { 411 let scrollMaxHeight: number = undefined 412 if (this.currentScreenStatus !== this.beforeScreenStatus) { 413 this.applySizeOptions = this.getApplyMaxSize(); 414 this.beforeScreenStatus = this.currentScreenStatus 415 return scrollMaxHeight; 416 } 417 scrollMaxHeight = this.applyHeight 418 scrollMaxHeight -= this.titleHeight 419 scrollMaxHeight -= this.buttonHeight 420 scrollMaxHeight -= this.theme.windows.padding.top as number 421 scrollMaxHeight -= (this.theme.button.textMargin.bottom as number / 2) 422 scrollMaxHeight -= this.theme.title.margin.bottom as number 423 scrollMaxHeight -= (this.theme.windows.padding.bottom as number - (this.theme.button.textMargin.bottom as number / 2)) 424 if (Math.floor(this.textHeight) > Math.floor(scrollMaxHeight + 1)) { 425 return scrollMaxHeight 426 } else { 427 scrollMaxHeight = undefined 428 return scrollMaxHeight 429 } 430 } 431 432 private getLayoutWeight(): number { 433 let layoutWeight: number 434 if ((this.icon.image !== '' && this.icon.image !== void (0)) || 435 (this.title.text !== '' && this.title.text !== void (0)) || 436 (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) || 437 (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0))) { 438 layoutWeight = 1 439 } else { 440 layoutWeight = 0 441 } 442 return layoutWeight 443 } 444 445 private getApplyMaxSize(): ConstraintSizeOptions { 446 let applyMaxWidth: number = undefined 447 let applyMaxHeight: number = undefined 448 let applyMaxSize: ConstraintSizeOptions = undefined 449 let defaultDisplaySync: display.Display = display.getDefaultDisplaySync() 450 if (px2vp(defaultDisplaySync.width) > 400) { 451 applyMaxWidth = 400 452 } else { 453 applyMaxWidth = px2vp(defaultDisplaySync.width) - 40 - 40 454 } 455 if (px2vp(defaultDisplaySync.height) > 480) { 456 applyMaxHeight = 480 457 } else { 458 applyMaxHeight = px2vp(defaultDisplaySync.height) - 40 - 40 459 } 460 applyMaxSize = { maxWidth: applyMaxWidth, maxHeight: applyMaxHeight } 461 this.messageMaxWeight = this.getMessageMaxWeight() 462 return applyMaxSize 463 } 464 465 build() { 466 Row() { 467 if (this.icon.image !== '' && this.icon.image !== void (0)) { 468 Image(this.getIconImage()) 469 .width(this.getIconWidth()) 470 .height(this.getIconHeight()) 471 .margin(this.getIconMargin()) 472 .fillColor(this.getIconFillColor()) 473 .borderRadius(this.getIconBorderRadius()) 474 } 475 if (this.title.text !== '' && this.title.text !== void (0)) { 476 Column() { 477 Flex({ alignItems: ItemAlign.Start }) { 478 Text(this.getTitleText()) 479 .flexGrow(1) 480 .maxLines(2) 481 .align(Alignment.Start) 482 .padding(this.getTitlePadding()) 483 .minFontSize(this.getTitleMinFontSize()) 484 .textOverflow({ overflow: TextOverflow.Ellipsis }) 485 .fontWeight(this.getTitleFontWeight()) 486 .fontSize(this.getTitleFontSize()) 487 .fontColor(this.getTitleFontColor()) 488 .constraintSize({ minHeight: this.getCloseButtonHeight() }) 489 if (this.showClose || this.showClose === void (0)) { 490 Button() { 491 Image(this.getCloseButtonImage()) 492 .focusable(true) 493 .width(this.getCloseButtonImageWidth()) 494 .height(this.getCloseButtonImageHeight()) 495 .fillColor(this.getCloseButtonFillColor()) 496 } 497 .width(this.getCloseButtonWidth()) 498 .height(this.getCloseButtonHeight()) 499 .padding(this.getCloseButtonPadding()) 500 .backgroundColor(this.closeButtonBackgroundColor) 501 .onHover((isHover: boolean) => { 502 if (isHover) { 503 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor() 504 } 505 else { 506 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor() 507 } 508 }) 509 .onClick(() => { 510 if (this.onClose) { 511 this.onClose(); 512 } 513 }) 514 } 515 } 516 .width("100%") 517 .margin(this.getTitleMargin()) 518 .onAreaChange((_, rect) => { 519 this.titleHeight = rect.height as number 520 }) 521 522 Scroll() { 523 Text(this.getMessageText()) 524 .fontSize(this.getMessageFontSize()) 525 .fontColor(this.getMessageFontColor()) 526 .fontWeight(this.getMessageFontWeight()) 527 .constraintSize({ minHeight: this.getCloseButtonHeight() }) 528 .onAreaChange((_, rect) => { 529 this.textHeight = rect.height as number 530 }) 531 } 532 .width("100%") 533 .align(Alignment.TopStart) 534 .padding(this.getMessagePadding()) 535 .scrollBar(BarState.Auto) 536 .scrollable(ScrollDirection.Vertical) 537 .constraintSize({ maxHeight: this.getScrollMaxHeight() }) 538 539 Flex({ wrap: FlexWrap.Wrap }) { 540 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 541 Button() { 542 Text(this.getFirstButtonText()) 543 .maxLines(2) 544 .focusable(true) 545 .fontSize(this.getFirstButtonFontSize()) 546 .fontColor(this.getFirstButtonFontColor()) 547 .fontWeight(this.getButtonFontWeight()) 548 .minFontSize(this.getButtonMinFontSize()) 549 .textOverflow({ overflow: TextOverflow.Ellipsis }) 550 } 551 .margin(this.getButtonMargin()) 552 .padding(this.getButtonTextPadding()) 553 .backgroundColor(this.firstButtonBackgroundColor) 554 .onHover((isHover: boolean) => { 555 if (isHover) { 556 this.firstButtonBackgroundColor = this.getButtonHoverColor() 557 } 558 else { 559 this.firstButtonBackgroundColor = this.getButtonBackgroundColor() 560 } 561 }) 562 .onClick(() => { 563 if (this.buttons?.[0]?.action) { 564 this.buttons?.[0]?.action(); 565 } 566 }) 567 } 568 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 569 Button() { 570 Text(this.getSecondButtonText()) 571 .maxLines(2) 572 .focusable(true) 573 .fontSize(this.getSecondButtonFontSize()) 574 .fontColor(this.getSecondButtonFontColor()) 575 .fontWeight(this.getButtonFontWeight()) 576 .minFontSize(this.getButtonMinFontSize()) 577 .textOverflow({ overflow: TextOverflow.Ellipsis }) 578 } 579 .margin(this.getButtonMargin()) 580 .padding(this.getButtonTextPadding()) 581 .backgroundColor(this.secondButtonBackgroundColor) 582 .onHover((isHover: boolean) => { 583 if (isHover) { 584 this.secondButtonBackgroundColor = this.getButtonHoverColor() 585 } 586 else { 587 this.secondButtonBackgroundColor = this.getButtonBackgroundColor() 588 } 589 }) 590 .onClick(() => { 591 if (this.buttons?.[1]?.action) { 592 this.buttons?.[1]?.action(); 593 } 594 }) 595 } 596 } 597 .margin(this.getButtonTextMargin()) 598 .flexGrow(1) 599 .onAreaChange((_, rect) => { 600 this.buttonHeight = rect.height as number 601 }) 602 } 603 .layoutWeight(this.getLayoutWeight()) 604 } 605 else { 606 Column() { 607 Row() { 608 Scroll() { 609 Text(this.getMessageText()) 610 .fontSize(this.getMessageFontSize()) 611 .fontColor(this.getMessageFontColor()) 612 .fontWeight(this.getMessageFontWeight()) 613 .constraintSize({ maxWidth: this.messageMaxWeight, minHeight: this.getCloseButtonHeight() }) 614 .onAreaChange((_, rect) => { 615 this.textHeight = rect.height as number 616 }) 617 } 618 .layoutWeight(this.getLayoutWeight()) 619 .align(Alignment.TopStart) 620 .padding(this.getMessagePadding()) 621 .scrollBar(BarState.Auto) 622 .scrollable(ScrollDirection.Vertical) 623 .constraintSize({ maxHeight: this.getScrollMaxHeight() }) 624 625 if (this.showClose || this.showClose === void (0)) { 626 Button() { 627 Image(this.getCloseButtonImage()) 628 .focusable(true) 629 .width(this.getCloseButtonImageWidth()) 630 .height(this.getCloseButtonImageHeight()) 631 .fillColor(this.getCloseButtonFillColor()) 632 } 633 .width(this.getCloseButtonWidth()) 634 .height(this.getCloseButtonHeight()) 635 .padding(this.getCloseButtonPadding()) 636 .backgroundColor(this.closeButtonBackgroundColor) 637 .onHover((isHover: boolean) => { 638 if (isHover) { 639 this.closeButtonBackgroundColor = this.getCloseButtonHoverColor() 640 } 641 else { 642 this.closeButtonBackgroundColor = this.getCloseButtonBackgroundColor() 643 } 644 }) 645 .onClick(() => { 646 if (this.onClose) { 647 this.onClose(); 648 } 649 }) 650 } 651 } 652 .alignItems(VerticalAlign.Top) 653 .margin(this.getTitleMargin()) 654 655 Flex({ wrap: FlexWrap.Wrap }) { 656 if (this.buttons?.[0]?.text !== '' && this.buttons?.[0]?.text !== void (0)) { 657 Button() { 658 Text(this.getFirstButtonText()) 659 .maxLines(2) 660 .focusable(true) 661 .fontSize(this.getFirstButtonFontSize()) 662 .fontColor(this.getFirstButtonFontColor()) 663 .fontWeight(this.getButtonFontWeight()) 664 .minFontSize(this.getButtonMinFontSize()) 665 .textOverflow({ overflow: TextOverflow.Ellipsis }) 666 } 667 .margin(this.getButtonMargin()) 668 .padding(this.getButtonTextPadding()) 669 .backgroundColor(this.firstButtonBackgroundColor) 670 .onHover((isHover: boolean) => { 671 if (isHover) { 672 this.firstButtonBackgroundColor = this.getButtonHoverColor() 673 } 674 else { 675 this.firstButtonBackgroundColor = this.getButtonBackgroundColor() 676 } 677 }) 678 .onClick(() => { 679 if (this.buttons?.[0]?.action) { 680 this.buttons?.[0]?.action(); 681 } 682 }) 683 } 684 if (this.buttons?.[1]?.text !== '' && this.buttons?.[1]?.text !== void (0)) { 685 Button() { 686 Text(this.getSecondButtonText()) 687 .maxLines(2) 688 .focusable(true) 689 .fontSize(this.getSecondButtonFontSize()) 690 .fontColor(this.getSecondButtonFontColor()) 691 .fontWeight(this.getButtonFontWeight()) 692 .minFontSize(this.getButtonMinFontSize()) 693 .textOverflow({ overflow: TextOverflow.Ellipsis }) 694 } 695 .margin(this.getButtonMargin()) 696 .padding(this.getButtonTextPadding()) 697 .backgroundColor(this.secondButtonBackgroundColor) 698 .onHover((isHover: boolean) => { 699 if (isHover) { 700 this.secondButtonBackgroundColor = this.getButtonHoverColor() 701 } 702 else { 703 this.secondButtonBackgroundColor = this.getButtonBackgroundColor() 704 } 705 }) 706 .onClick(() => { 707 if (this.buttons?.[1]?.action) { 708 this.buttons?.[1]?.action(); 709 } 710 }) 711 } 712 } 713 .margin(this.getButtonTextMargin()) 714 .flexGrow(1) 715 .onAreaChange((_, rect) => { 716 this.buttonHeight = rect.height as number 717 }) 718 } 719 .layoutWeight(this.getLayoutWeight()) 720 } 721 } 722 .alignItems(VerticalAlign.Top) 723 .padding(this.getWindowsPadding()) 724 .constraintSize(this.applySizeOptions) 725 .onAreaChange((_, rect) => { 726 this.applyHeight = rect.height as number 727 }) 728 } 729} 730