1/* 2 * Copyright (c) 2024 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16if (!('finalizeConstruction' in ViewPU.prototype)) { 17 Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {}); 18 } 19 if (PUV2ViewBase.contextStack === undefined) { 20 Reflect.set(PUV2ViewBase, 'contextStack', []); 21 } 22 const Chip = requireNapi('arkui.advanced.Chip').Chip; 23 const ChipSize = requireNapi('arkui.advanced.Chip').ChipSize; 24 const AccessibilitySelectedType = requireNapi('arkui.advanced.Chip').AccessibilitySelectedType; 25 const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; 26 const c1 = (selectedIndexes) => {}; 27 const colorStops = [ 28 ['rgba(0, 0, 0, 1)', 0], 29 ['rgba(0, 0, 0, 0)', 1], 30 ]; 31 const b1 = { 32 itemStyle: { 33 size: ChipSize.NORMAL, 34 backgroundColor: { 35 id: -1, 36 type: 10001, 37 params: ['sys.color.ohos_id_color_button_normal'], 38 bundleName: '__harDefaultBundleName__', 39 moduleName: '__harDefaultModuleName__', 40 }, 41 fontColor: { 42 id: -1, 43 type: 10001, 44 params: ['sys.color.ohos_id_color_text_primary'], 45 bundleName: '__harDefaultBundleName__', 46 moduleName: '__harDefaultModuleName__', 47 }, 48 selectedFontColor: { 49 id: -1, 50 type: 10001, 51 params: ['sys.color.ohos_id_color_text_primary_contrary'], 52 bundleName: '__harDefaultBundleName__', 53 moduleName: '__harDefaultModuleName__', 54 }, 55 selectedBackgroundColor: { 56 id: -1, 57 type: 10001, 58 params: ['sys.color.ohos_id_color_emphasize'], 59 bundleName: '__harDefaultBundleName__', 60 moduleName: '__harDefaultModuleName__', 61 }, 62 fillColor: { 63 id: -1, 64 type: 10001, 65 params: ['sys.color.ohos_id_color_secondary'], 66 bundleName: '__harDefaultBundleName__', 67 moduleName: '__harDefaultModuleName__', 68 }, 69 h4: { 70 id: -1, 71 type: 10001, 72 params: ['sys.color.ohos_id_color_text_primary_contrary'], 73 bundleName: '__harDefaultBundleName__', 74 moduleName: '__harDefaultModuleName__', 75 }, 76 }, 77 chipGroupSpace: { itemSpace: 8, startSpace: 16, endSpace: 16 }, 78 chipGroupPadding: { top: 14, bottom: 14 }, 79 }; 80 const e4 = { 81 backgroundColor: { 82 id: -1, 83 type: 10001, 84 params: ['sys.color.ohos_id_color_button_normal'], 85 bundleName: '__harDefaultBundleName__', 86 moduleName: '__harDefaultModuleName__', 87 }, 88 borderRadius: { 89 id: -1, 90 type: 10002, 91 params: ['sys.float.ohos_id_corner_radius_tips_instant_tip'], 92 bundleName: '__harDefaultBundleName__', 93 moduleName: '__harDefaultModuleName__', 94 }, 95 i4: 16, 96 j4: 24, 97 l4: 28, 98 m4: 36, 99 marginLeft: 8, 100 marginRight: 16, 101 fillColor: { 102 id: -1, 103 type: 10001, 104 params: ['sys.color.ohos_id_color_primary'], 105 bundleName: '__harDefaultBundleName__', 106 moduleName: '__harDefaultModuleName__', 107 }, 108 o1: -1, 109 }; 110 var f4; 111 (function (s4) { 112 s4[(s4['NORMAL'] = 36)] = 'NORMAL'; 113 s4[(s4['SMALL'] = 28)] = 'SMALL'; 114 })(f4 || (f4 = {})); 115 function c4(uiContext, value, isValid, defaultValue) { 116 if (value === void 0 || value === null) { 117 return defaultValue; 118 } 119 const resourceManager = uiContext.getHostContext()?.resourceManager; 120 if (!resourceManager) { 121 return defaultValue; 122 } 123 if (typeof value === 'object') { 124 let r4 = value; 125 if (r4.type === 10002 || r4.type === 10007) { 126 if (resourceManager.getNumber(r4.id) >= 0) { 127 return value; 128 } 129 } else if (r4.type === 10003) { 130 if (j(resourceManager.getStringSync(r4.id))) { 131 return value; 132 } 133 } 134 } else if (typeof value === 'number') { 135 if (value >= 0) { 136 return value; 137 } 138 } else if (typeof value === 'string') { 139 if (isValid(value)) { 140 return value; 141 } 142 } 143 return defaultValue; 144 } 145 function i(dimension, q4) { 146 const matches = dimension.match(q4); 147 if (!matches || matches.length < 3) { 148 return false; 149 } 150 const value = Number.parseFloat(matches[1]); 151 return value >= 0; 152 } 153 function j(dimension) { 154 return i( 155 dimension, 156 new RegExp('(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx|%)?$', 'i') 157 ); 158 } 159 function d4(dimension) { 160 return i( 161 dimension, 162 new RegExp('(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx)?$', 'i') 163 ); 164 } 165 export class IconGroupSuffix extends ViewPU { 166 constructor( 167 parent, 168 params, 169 __localStorage, 170 elmtId = -1, 171 paramsLambda = undefined, 172 extraInfo 173 ) { 174 super(parent, __localStorage, elmtId, extraInfo); 175 if (typeof paramsLambda === 'function') { 176 this.paramsGenerator_ = paramsLambda; 177 } 178 this.n2 = this.initializeConsume('chipSize', 'chipSize'); 179 this.n4 = new SynchedPropertyObjectOneWayPU(params.items, this, 'items'); 180 this.symbolEffect = new SymbolEffect(); 181 this.setInitiallyProvidedValue(params); 182 this.finalizeConstruction(); 183 } 184 setInitiallyProvidedValue(params) { 185 if (params.items === undefined) { 186 this.n4.set([]); 187 } 188 if (params.symbolEffect !== undefined) { 189 this.symbolEffect = params.symbolEffect; 190 } 191 } 192 updateStateVars(params) { 193 this.n4.reset(params.items); 194 } 195 purgeVariableDependenciesOnElmtId(rmElmtId) { 196 this.n2.purgeDependencyOnElmtId(rmElmtId); 197 this.n4.purgeDependencyOnElmtId(rmElmtId); 198 } 199 aboutToBeDeleted() { 200 this.n2.aboutToBeDeleted(); 201 this.n4.aboutToBeDeleted(); 202 SubscriberManager.Get().delete(this.id__()); 203 this.aboutToBeDeletedInternal(); 204 } 205 get chipSize() { 206 return this.n2.get(); 207 } 208 set chipSize(newValue) { 209 this.n2.set(newValue); 210 } 211 get items() { 212 return this.n4.get(); 213 } 214 set items(newValue) { 215 this.n4.set(newValue); 216 } 217 getBackgroundSize() { 218 if (this.chipSize === ChipSize.SMALL) { 219 return e4.l4; 220 } else { 221 return e4.m4; 222 } 223 } 224 getIconSize(val) { 225 if (val === undefined) { 226 return this.chipSize === ChipSize.SMALL ? e4.i4 : e4.j4; 227 } 228 let value; 229 if (this.chipSize === ChipSize.SMALL) { 230 value = c4(this.getUIContext(), val, j, e4.i4); 231 } else { 232 value = c4(this.getUIContext(), val, j, e4.j4); 233 } 234 return value; 235 } 236 SymbolItemBuilder(item, parent = null) { 237 this.observeComponentCreation2((elmtId, isInitialRender) => { 238 SymbolGlyph.create(); 239 SymbolGlyph.fontColor([e4.fillColor]); 240 SymbolGlyph.fontSize(this.getIconSize()); 241 SymbolGlyph.attributeModifier.bind(this)(item.symbol); 242 SymbolGlyph.focusable(true); 243 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 244 SymbolGlyph.symbolEffect(this.symbolEffect, false); 245 SymbolGlyph.symbolEffect(this.symbolEffect, e4.o1); 246 }, SymbolGlyph); 247 } 248 IconItemBuilder(item, parent = null) { 249 this.observeComponentCreation2((elmtId, isInitialRender) => { 250 Image.create(item.icon.src); 251 Image.fillColor(e4.fillColor); 252 Image.size({ 253 width: this.getIconSize(item.icon.size?.width), 254 height: this.getIconSize(item.icon.size?.height), 255 }); 256 Image.focusable(true); 257 }, Image); 258 } 259 initialRender() { 260 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 261 this.observeComponentCreation2((elmtId, isInitialRender) => { 262 Row.create({ space: 8 }); 263 }, Row); 264 this.observeComponentCreation2((elmtId, isInitialRender) => { 265 ForEach.create(); 266 const forEachItemGenFunction = (_item) => { 267 const p4 = _item; 268 this.observeComponentCreation2((elmtId, isInitialRender) => { 269 Button.createWithChild(); 270 Button.size({ 271 width: this.getBackgroundSize(), 272 height: this.getBackgroundSize(), 273 }); 274 Button.backgroundColor(e4.backgroundColor); 275 Button.borderRadius(e4.borderRadius); 276 Button.accessibilityText(this.getAccessibilityText(p4)); 277 Button.accessibilityDescription(this.getAccessibilityDescription(p4)); 278 Button.accessibilityLevel(this.getAccessibilityLevel(p4)); 279 Button.onClick(() => { 280 if (!(p4 instanceof SymbolGlyphModifier)) { 281 p4.action(); 282 } 283 }); 284 Button.borderRadius(e4.borderRadius); 285 }, Button); 286 this.observeComponentCreation2((elmtId, isInitialRender) => { 287 If.create(); 288 if (p4 instanceof SymbolGlyphModifier) { 289 this.ifElseBranchUpdateFunction(0, () => { 290 this.observeComponentCreation2((elmtId, isInitialRender) => { 291 SymbolGlyph.create(); 292 SymbolGlyph.fontColor([e4.fillColor]); 293 SymbolGlyph.fontSize(this.getIconSize()); 294 SymbolGlyph.attributeModifier.bind(this)(p4); 295 SymbolGlyph.focusable(true); 296 SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); 297 SymbolGlyph.symbolEffect(this.symbolEffect, false); 298 SymbolGlyph.symbolEffect(this.symbolEffect, e4.o1); 299 }, SymbolGlyph); 300 }); 301 } else if (this.isSymbolItem(p4)) { 302 this.ifElseBranchUpdateFunction(1, () => { 303 this.SymbolItemBuilder.bind(this)(p4); 304 }); 305 } else { 306 this.ifElseBranchUpdateFunction(2, () => { 307 this.IconItemBuilder.bind(this)(p4); 308 }); 309 } 310 }, If); 311 If.pop(); 312 Button.pop(); 313 }; 314 this.forEachUpdateFunction( 315 elmtId, 316 this.items || [], 317 forEachItemGenFunction 318 ); 319 }, ForEach); 320 ForEach.pop(); 321 Row.pop(); 322 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 323 } 324 isSymbolItem(item) { 325 return typeof item.symbol !== 'undefined'; 326 } 327 getAccessibilityLevel(item) { 328 if (item instanceof SymbolGlyphModifier) { 329 return 'auto'; 330 } 331 return item.accessibilityLevel ?? 'auto'; 332 } 333 getAccessibilityDescription(item) { 334 if ( 335 item instanceof SymbolGlyphModifier || 336 typeof item.accessibilityDescription === 'undefined' 337 ) { 338 return undefined; 339 } 340 return item.accessibilityDescription; 341 } 342 getAccessibilityText(item) { 343 if ( 344 item instanceof SymbolGlyphModifier || 345 typeof item.accessibilityText === 'undefined' 346 ) { 347 return undefined; 348 } 349 return item.accessibilityText; 350 } 351 rerender() { 352 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 353 this.updateDirtyElements(); 354 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 355 } 356 } 357 export class ChipGroup extends ViewPU { 358 constructor( 359 parent, 360 params, 361 __localStorage, 362 elmtId = -1, 363 paramsLambda = undefined, 364 extraInfo 365 ) { 366 super(parent, __localStorage, elmtId, extraInfo); 367 if (typeof paramsLambda === 'function') { 368 this.paramsGenerator_ = paramsLambda; 369 } 370 this.n4 = new SynchedPropertyObjectOneWayPU(params.items, this, 'items'); 371 this.o4 = new SynchedPropertyObjectOneWayPU( 372 params.itemStyle, 373 this, 374 'itemStyle' 375 ); 376 this.n2 = new ObservedPropertyObjectPU(b1.itemStyle.size, this, 'chipSize'); 377 this.addProvidedVar('chipSize', this.n2, false); 378 this.q4 = new SynchedPropertyObjectOneWayPU( 379 params.selectedIndexes, 380 this, 381 'selectedIndexes' 382 ); 383 this.r4 = new SynchedPropertySimpleOneWayPU( 384 params.multiple, 385 this, 386 'multiple' 387 ); 388 this.s4 = new SynchedPropertyObjectOneWayPU( 389 params.chipGroupSpace, 390 this, 391 'chipGroupSpace' 392 ); 393 this.suffix = undefined; 394 this.onChange = c1; 395 this.scroller = new Scroller(); 396 this.t4 = new ObservedPropertySimplePU( 397 this.scroller.isAtEnd(), 398 this, 399 'isReachEnd' 400 ); 401 this.u4 = new SynchedPropertyObjectOneWayPU( 402 params.chipGroupPadding, 403 this, 404 'chipGroupPadding' 405 ); 406 this.v4 = new ObservedPropertySimplePU(true, this, 'isRefresh'); 407 this.setInitiallyProvidedValue(params); 408 this.declareWatch('items', this.onItemsChange); 409 this.declareWatch('itemStyle', this.itemStyleOnChange); 410 this.declareWatch('multiple', this.onMultipleChange); 411 this.finalizeConstruction(); 412 } 413 setInitiallyProvidedValue(params) { 414 if (params.items === undefined) { 415 this.n4.set([]); 416 } 417 if (params.itemStyle === undefined) { 418 this.o4.set(b1.itemStyle); 419 } 420 if (params.chipSize !== undefined) { 421 this.chipSize = params.chipSize; 422 } 423 if (params.selectedIndexes === undefined) { 424 this.q4.set([0]); 425 } 426 if (params.multiple === undefined) { 427 this.r4.set(false); 428 } 429 if (params.chipGroupSpace === undefined) { 430 this.s4.set(b1.chipGroupSpace); 431 } 432 if (params.suffix !== undefined) { 433 this.suffix = params.suffix; 434 } 435 if (params.onChange !== undefined) { 436 this.onChange = params.onChange; 437 } 438 if (params.scroller !== undefined) { 439 this.scroller = params.scroller; 440 } 441 if (params.isReachEnd !== undefined) { 442 this.isReachEnd = params.isReachEnd; 443 } 444 if (params.chipGroupPadding === undefined) { 445 this.u4.set(b1.chipGroupPadding); 446 } 447 if (params.isRefresh !== undefined) { 448 this.isRefresh = params.isRefresh; 449 } 450 } 451 updateStateVars(params) { 452 this.n4.reset(params.items); 453 this.o4.reset(params.itemStyle); 454 this.q4.reset(params.selectedIndexes); 455 this.r4.reset(params.multiple); 456 this.s4.reset(params.chipGroupSpace); 457 this.u4.reset(params.chipGroupPadding); 458 } 459 purgeVariableDependenciesOnElmtId(rmElmtId) { 460 this.n4.purgeDependencyOnElmtId(rmElmtId); 461 this.o4.purgeDependencyOnElmtId(rmElmtId); 462 this.n2.purgeDependencyOnElmtId(rmElmtId); 463 this.q4.purgeDependencyOnElmtId(rmElmtId); 464 this.r4.purgeDependencyOnElmtId(rmElmtId); 465 this.s4.purgeDependencyOnElmtId(rmElmtId); 466 this.t4.purgeDependencyOnElmtId(rmElmtId); 467 this.u4.purgeDependencyOnElmtId(rmElmtId); 468 this.v4.purgeDependencyOnElmtId(rmElmtId); 469 } 470 aboutToBeDeleted() { 471 this.n4.aboutToBeDeleted(); 472 this.o4.aboutToBeDeleted(); 473 this.n2.aboutToBeDeleted(); 474 this.q4.aboutToBeDeleted(); 475 this.r4.aboutToBeDeleted(); 476 this.s4.aboutToBeDeleted(); 477 this.t4.aboutToBeDeleted(); 478 this.u4.aboutToBeDeleted(); 479 this.v4.aboutToBeDeleted(); 480 SubscriberManager.Get().delete(this.id__()); 481 this.aboutToBeDeletedInternal(); 482 } 483 get items() { 484 return this.n4.get(); 485 } 486 set items(newValue) { 487 this.n4.set(newValue); 488 } 489 get itemStyle() { 490 return this.o4.get(); 491 } 492 set itemStyle(newValue) { 493 this.o4.set(newValue); 494 } 495 get chipSize() { 496 return this.n2.get(); 497 } 498 set chipSize(newValue) { 499 this.n2.set(newValue); 500 } 501 get selectedIndexes() { 502 return this.q4.get(); 503 } 504 set selectedIndexes(newValue) { 505 this.q4.set(newValue); 506 } 507 get multiple() { 508 return this.r4.get(); 509 } 510 set multiple(newValue) { 511 this.r4.set(newValue); 512 } 513 get chipGroupSpace() { 514 return this.s4.get(); 515 } 516 set chipGroupSpace(newValue) { 517 this.s4.set(newValue); 518 } 519 get isReachEnd() { 520 return this.t4.get(); 521 } 522 set isReachEnd(newValue) { 523 this.t4.set(newValue); 524 } 525 get chipGroupPadding() { 526 return this.u4.get(); 527 } 528 set chipGroupPadding(newValue) { 529 this.u4.set(newValue); 530 } 531 get isRefresh() { 532 return this.v4.get(); 533 } 534 set isRefresh(newValue) { 535 this.v4.set(newValue); 536 } 537 onItemsChange() { 538 this.isRefresh = !this.isRefresh; 539 } 540 onMultipleChange() { 541 this.selectedIndexes = this.getSelectedIndexes(); 542 } 543 itemStyleOnChange() { 544 this.chipSize = this.getChipSize(); 545 } 546 aboutToAppear() { 547 this.itemStyleOnChange(); 548 if (this.getSelectedIndexes().length === 0) { 549 this.selectedIndexes = [0]; 550 } 551 } 552 getChipSize() { 553 if (this.itemStyle && this.itemStyle.size) { 554 if (typeof this.itemStyle.size === 'object') { 555 if ( 556 !this.itemStyle.size.width || 557 !this.itemStyle.size.height || 558 !this.itemStyle.size 559 ) { 560 return b1.itemStyle.size; 561 } 562 } 563 return this.itemStyle.size; 564 } 565 return b1.itemStyle.size; 566 } 567 getFontColor() { 568 if (this.itemStyle && this.itemStyle.fontColor) { 569 if (typeof this.itemStyle.fontColor === 'object') { 570 let o4 = this.itemStyle.fontColor; 571 if (o4 == undefined || o4 == null) { 572 return b1.itemStyle.fontColor; 573 } 574 if (o4.type === 10001) { 575 return this.itemStyle.fontColor; 576 } 577 return b1.itemStyle.fontColor; 578 } 579 return this.itemStyle.fontColor; 580 } 581 return b1.itemStyle.fontColor; 582 } 583 getSelectedFontColor() { 584 if (this.itemStyle && this.itemStyle.selectedFontColor) { 585 if (typeof this.itemStyle.selectedFontColor === 'object') { 586 let n4 = this.itemStyle.selectedFontColor; 587 if (n4 == undefined || n4 == null) { 588 return b1.itemStyle.selectedFontColor; 589 } 590 if (n4.type === 10001) { 591 return this.itemStyle.selectedFontColor; 592 } 593 return b1.itemStyle.selectedFontColor; 594 } 595 return this.itemStyle.selectedFontColor; 596 } 597 return b1.itemStyle.selectedFontColor; 598 } 599 getFillColor() { 600 if (this.itemStyle && this.itemStyle.fontColor) { 601 return this.itemStyle.fontColor; 602 } 603 return b1.itemStyle.fillColor; 604 } 605 getSelectedFillColor() { 606 if (this.itemStyle && this.itemStyle.selectedFontColor) { 607 return this.itemStyle.selectedFontColor; 608 } 609 return b1.itemStyle.h4; 610 } 611 getBackgroundColor() { 612 if (this.itemStyle && this.itemStyle.backgroundColor) { 613 if (typeof this.itemStyle.backgroundColor === 'object') { 614 let m4 = this.itemStyle.backgroundColor; 615 if (m4 == undefined || m4 == null) { 616 return b1.itemStyle.backgroundColor; 617 } 618 if (m4.type === 10001) { 619 return this.itemStyle.backgroundColor; 620 } 621 return b1.itemStyle.backgroundColor; 622 } 623 return this.itemStyle.backgroundColor; 624 } 625 return b1.itemStyle.backgroundColor; 626 } 627 getSelectedBackgroundColor() { 628 if (this.itemStyle && this.itemStyle.selectedBackgroundColor) { 629 if (typeof this.itemStyle.selectedBackgroundColor === 'object') { 630 let l4 = this.itemStyle.selectedBackgroundColor; 631 if (l4 == undefined || l4 == null) { 632 return b1.itemStyle.selectedBackgroundColor; 633 } 634 if (l4.type === 10001) { 635 return this.itemStyle.selectedBackgroundColor; 636 } 637 return b1.itemStyle.selectedBackgroundColor; 638 } 639 return this.itemStyle.selectedBackgroundColor; 640 } 641 return b1.itemStyle.selectedBackgroundColor; 642 } 643 getSelectedIndexes() { 644 let k4 = []; 645 k4 = (this.selectedIndexes ?? [0]).filter((element, index, array) => { 646 return ( 647 element >= 0 && 648 element % 1 == 0 && 649 element != null && 650 element != undefined && 651 array.indexOf(element) === index && 652 element < (this.items || []).length 653 ); 654 }); 655 return k4; 656 } 657 isMultiple() { 658 return this.multiple ?? false; 659 } 660 getChipGroupItemSpace() { 661 if (this.chipGroupSpace == undefined) { 662 return b1.chipGroupSpace.itemSpace; 663 } 664 return c4( 665 this.getUIContext(), 666 this.chipGroupSpace.itemSpace, 667 d4, 668 b1.chipGroupSpace.itemSpace 669 ); 670 } 671 getChipGroupStartSpace() { 672 if (this.chipGroupSpace == undefined) { 673 return b1.chipGroupSpace.startSpace; 674 } 675 return c4( 676 this.getUIContext(), 677 this.chipGroupSpace.startSpace, 678 d4, 679 b1.chipGroupSpace.startSpace 680 ); 681 } 682 getChipGroupEndSpace() { 683 if (this.chipGroupSpace == undefined) { 684 return b1.chipGroupSpace.endSpace; 685 } 686 return c4( 687 this.getUIContext(), 688 this.chipGroupSpace.endSpace, 689 d4, 690 b1.chipGroupSpace.endSpace 691 ); 692 } 693 getOnChange() { 694 return this.onChange ?? c1; 695 } 696 isSelected(itemIndex) { 697 if (!this.isMultiple()) { 698 return itemIndex == this.getSelectedIndexes()[0]; 699 } else { 700 return this.getSelectedIndexes().some((element, index, array) => { 701 return element == itemIndex; 702 }); 703 } 704 } 705 getPaddingTop() { 706 if (!this.chipGroupPadding || !this.chipGroupPadding.top) { 707 return b1.chipGroupPadding.top; 708 } 709 return c4( 710 this.getUIContext(), 711 this.chipGroupPadding.top, 712 d4, 713 b1.chipGroupPadding.top 714 ); 715 } 716 getPaddingBottom() { 717 if (!this.chipGroupPadding || !this.chipGroupPadding.bottom) { 718 return b1.chipGroupPadding.bottom; 719 } 720 return c4( 721 this.getUIContext(), 722 this.chipGroupPadding.bottom, 723 d4, 724 b1.chipGroupPadding.bottom 725 ); 726 } 727 getChipGroupHeight() { 728 if (typeof this.chipSize === 'string') { 729 if (this.chipSize === ChipSize.NORMAL) { 730 return f4.NORMAL; 731 } else { 732 return f4.SMALL; 733 } 734 } else if (typeof this.chipSize === 'object') { 735 return this.chipSize.height; 736 } else { 737 return f4.NORMAL; 738 } 739 } 740 initialRender() { 741 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 742 this.observeComponentCreation2((elmtId, isInitialRender) => { 743 Row.create(); 744 Row.align(Alignment.End); 745 Row.width('100%'); 746 }, Row); 747 this.observeComponentCreation2((elmtId, isInitialRender) => { 748 Stack.create(); 749 Stack.padding({ 750 top: this.getPaddingTop(), 751 bottom: this.getPaddingBottom(), 752 }); 753 Stack.layoutWeight(1); 754 Stack.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN); 755 Stack.alignContent(Alignment.End); 756 }, Stack); 757 this.observeComponentCreation2((elmtId, isInitialRender) => { 758 Scroll.create(this.scroller); 759 Scroll.scrollable(ScrollDirection.Horizontal); 760 Scroll.scrollBar(BarState.Off); 761 Scroll.align(Alignment.Start); 762 Scroll.width('100%'); 763 Scroll.clip(false); 764 Scroll.onScroll(() => { 765 this.isReachEnd = this.scroller.isAtEnd(); 766 }); 767 }, Scroll); 768 this.observeComponentCreation2((elmtId, isInitialRender) => { 769 Row.create({ space: this.getChipGroupItemSpace() }); 770 Row.padding({ 771 left: this.getChipGroupStartSpace(), 772 right: this.getChipGroupEndSpace(), 773 }); 774 Row.constraintSize({ minWidth: '100%' }); 775 }, Row); 776 this.observeComponentCreation2((elmtId, isInitialRender) => { 777 ForEach.create(); 778 const forEachItemGenFunction = (_item, index) => { 779 const j4 = _item; 780 this.observeComponentCreation2((elmtId, isInitialRender) => { 781 If.create(); 782 if (j4) { 783 this.ifElseBranchUpdateFunction(0, () => { 784 Chip.bind(this)( 785 makeBuilderParameterProxy('Chip', { 786 prefixIcon: () => this.getPrefixIcon(j4), 787 prefixSymbol: () => j4?.prefixSymbol, 788 label: () => ({ 789 text: j4?.label?.text ?? ' ', 790 fontColor: this.getFontColor(), 791 activatedFontColor: this.getSelectedFontColor(), 792 }), 793 suffixIcon: () => this.getSuffixIcon(j4), 794 suffixSymbol: () => j4?.suffixSymbol, 795 suffixSymbolOptions: () => j4.suffixSymbolOptions, 796 allowClose: () => j4.allowClose ?? false, 797 closeOptions: () => j4.closeOptions, 798 enabled: () => true, 799 activated: () => this.isSelected(index), 800 backgroundColor: () => this.getBackgroundColor(), 801 size: () => this.getChipSize(), 802 activatedBackgroundColor: () => 803 this.getSelectedBackgroundColor(), 804 accessibilitySelectedType: () => 805 this.multiple 806 ? AccessibilitySelectedType.CHECKED 807 : AccessibilitySelectedType.SELECTED, 808 accessibilityDescription: () => j4.accessibilityDescription, 809 accessibilityLevel: () => j4.accessibilityLevel, 810 onClicked: () => () => { 811 if (this.isSelected(index)) { 812 if (!!this.isMultiple()) { 813 if (this.getSelectedIndexes().length > 1) { 814 this.selectedIndexes.splice( 815 this.selectedIndexes.indexOf(index), 816 1 817 ); 818 } 819 } 820 } else { 821 if ( 822 !this.selectedIndexes || 823 this.selectedIndexes.length === 0 824 ) { 825 this.selectedIndexes = this.getSelectedIndexes(); 826 } 827 if (!this.isMultiple()) { 828 this.selectedIndexes = []; 829 } 830 this.selectedIndexes.push(index); 831 } 832 this.getOnChange()(this.getSelectedIndexes()); 833 }, 834 }) 835 ); 836 }); 837 } else { 838 this.ifElseBranchUpdateFunction(1, () => {}); 839 } 840 }, If); 841 If.pop(); 842 }; 843 this.forEachUpdateFunction( 844 elmtId, 845 this.items || [], 846 forEachItemGenFunction, 847 () => { 848 return JSON.stringify(this.isRefresh); 849 }, 850 true, 851 false 852 ); 853 }, ForEach); 854 ForEach.pop(); 855 Row.pop(); 856 Scroll.pop(); 857 this.observeComponentCreation2((elmtId, isInitialRender) => { 858 If.create(); 859 if (this.suffix && !this.isReachEnd) { 860 this.ifElseBranchUpdateFunction(0, () => { 861 this.observeComponentCreation2((elmtId, isInitialRender) => { 862 Stack.create(); 863 Stack.width(e4.m4); 864 Stack.height(this.getChipGroupHeight()); 865 Stack.linearGradient({ angle: 90, colors: colorStops }); 866 Stack.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN); 867 Stack.hitTestBehavior(HitTestMode.None); 868 }, Stack); 869 Stack.pop(); 870 }); 871 } else { 872 this.ifElseBranchUpdateFunction(1, () => {}); 873 } 874 }, If); 875 If.pop(); 876 Stack.pop(); 877 this.observeComponentCreation2((elmtId, isInitialRender) => { 878 If.create(); 879 if (this.suffix) { 880 this.ifElseBranchUpdateFunction(0, () => { 881 this.observeComponentCreation2((elmtId, isInitialRender) => { 882 Row.create(); 883 Row.padding({ 884 left: e4.marginLeft, 885 right: e4.marginRight, 886 }); 887 }, Row); 888 this.suffix.bind(this)(); 889 Row.pop(); 890 }); 891 } else { 892 this.ifElseBranchUpdateFunction(1, () => {}); 893 } 894 }, If); 895 If.pop(); 896 Row.pop(); 897 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 898 } 899 getPrefixIcon(i4) { 900 return { 901 src: i4.prefixIcon?.src ?? '', 902 size: i4.prefixIcon?.size ?? undefined, 903 fillColor: this.getFillColor(), 904 activatedFillColor: this.getSelectedFillColor(), 905 }; 906 } 907 getSuffixIcon(h4) { 908 if (typeof h4.suffixImageIcon !== 'undefined') { 909 return { 910 src: h4.suffixImageIcon.src, 911 size: h4.suffixImageIcon.size, 912 fillColor: this.getFillColor(), 913 activatedFillColor: this.getSelectedFillColor(), 914 action: h4.suffixImageIcon.action, 915 accessibilityText: h4.suffixImageIcon.accessibilityText, 916 accessibilityDescription: h4.suffixImageIcon.accessibilityDescription, 917 accessibilityLevel: h4.suffixImageIcon.accessibilityLevel, 918 }; 919 } 920 return { 921 src: h4.suffixIcon?.src ?? '', 922 size: h4.suffixIcon?.size ?? undefined, 923 fillColor: this.getFillColor(), 924 activatedFillColor: this.getSelectedFillColor(), 925 }; 926 } 927 rerender() { 928 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); 929 this.updateDirtyElements(); 930 PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); 931 } 932 } 933 934 export default { 935 ChipGroup, 936 IconGroupSuffix, 937 }; 938