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 16var __decorate = 17 (this && this.__decorate) || 18 function (decorators, target, key, desc) { 19 var c = arguments.length, 20 r = c < 3 ? target : desc === null ? (desc = Object.getOwnPropertyDescriptor(target, key)) : desc, 21 d; 22 if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') 23 r = Reflect.decorate(decorators, target, key, desc); 24 else 25 for (var i = decorators.length - 1; i >= 0; i--) 26 if ((d = decorators[i])) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 27 return c > 3 && r && Object.defineProperty(target, key, r), r; 28 }; 29var SegmentButtonItemOptionsArray_1, SegmentButtonOptions_1; 30if (!('finalizeConstruction' in ViewPU.prototype)) { 31 Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {}); 32} 33 34const curves = globalThis.requireNativeModule('ohos.curves'); 35const KeyCode = globalThis.requireNapi('multimodalInput.keyCode').KeyCode; 36const util = globalThis.requireNapi('util'); 37const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 38const I18n = requireNapi('i18n'); 39const MIN_ITEM_COUNT = 2; 40const MAX_ITEM_COUNT = 5; 41const DEFAULT_MAX_FONT_SCALE = 1; 42const MAX_MAX_FONT_SCALE = 2; 43const MIN_MAX_FONT_SCALE = 1; 44const RESOURCE_TYPE_FLOAT = 10002; 45const RESOURCE_TYPE_INTEGER = 10007; 46const segmentButtonTheme = { 47 FONT_COLOR: { 48 id: -1, 49 type: 10001, 50 params: ['sys.color.segment_button_unselected_text_color'], 51 bundleName: '__harDefaultBundleName__', 52 moduleName: '__harDefaultModuleName__', 53 }, 54 TAB_SELECTED_FONT_COLOR: { 55 id: -1, 56 type: 10001, 57 params: ['sys.color.segment_button_checked_text_color'], 58 bundleName: '__harDefaultBundleName__', 59 moduleName: '__harDefaultModuleName__', 60 }, 61 CAPSULE_SELECTED_FONT_COLOR: { 62 id: -1, 63 type: 10001, 64 params: ['sys.color.ohos_id_color_foreground_contrary'], 65 bundleName: '__harDefaultBundleName__', 66 moduleName: '__harDefaultModuleName__', 67 }, 68 FONT_SIZE: { 69 id: -1, 70 type: 10002, 71 params: ['sys.float.segment_button_unselected_text_size'], 72 bundleName: '__harDefaultBundleName__', 73 moduleName: '__harDefaultModuleName__', 74 }, 75 SELECTED_FONT_SIZE: { 76 id: -1, 77 type: 10002, 78 params: ['sys.float.segment_button_checked_text_size'], 79 bundleName: '__harDefaultBundleName__', 80 moduleName: '__harDefaultModuleName__', 81 }, 82 BACKGROUND_COLOR: { 83 id: -1, 84 type: 10001, 85 params: ['sys.color.segment_button_backboard_color'], 86 bundleName: '__harDefaultBundleName__', 87 moduleName: '__harDefaultModuleName__', 88 }, 89 TAB_SELECTED_BACKGROUND_COLOR: { 90 id: -1, 91 type: 10001, 92 params: ['sys.color.segment_button_checked_foreground_color'], 93 bundleName: '__harDefaultBundleName__', 94 moduleName: '__harDefaultModuleName__', 95 }, 96 CAPSULE_SELECTED_BACKGROUND_COLOR: { 97 id: -1, 98 type: 10001, 99 params: ['sys.color.ohos_id_color_emphasize'], 100 bundleName: '__harDefaultBundleName__', 101 moduleName: '__harDefaultModuleName__', 102 }, 103 FOCUS_BORDER_COLOR: { 104 id: -1, 105 type: 10001, 106 params: ['sys.color.ohos_id_color_focused_outline'], 107 bundleName: '__harDefaultBundleName__', 108 moduleName: '__harDefaultModuleName__', 109 }, 110 HOVER_COLOR: { 111 id: -1, 112 type: 10001, 113 params: ['sys.color.segment_button_hover_color'], 114 bundleName: '__harDefaultBundleName__', 115 moduleName: '__harDefaultModuleName__', 116 }, 117 PRESS_COLOR: { 118 id: -1, 119 type: 10001, 120 params: ['sys.color.segment_button_press_color'], 121 bundleName: '__harDefaultBundleName__', 122 moduleName: '__harDefaultModuleName__', 123 }, 124 BACKGROUND_BLUR_STYLE: { 125 id: -1, 126 type: 10002, 127 params: ['sys.float.segment_button_background_blur_style'], 128 bundleName: '__harDefaultBundleName__', 129 moduleName: '__harDefaultModuleName__', 130 }, 131 CONSTRAINT_SIZE_MIN_HEIGHT: { 132 id: -1, 133 type: 10002, 134 params: ['sys.float.segment_button_height'], 135 bundleName: '__harDefaultBundleName__', 136 moduleName: '__harDefaultModuleName__', 137 }, 138 SEGMENT_BUTTON_MIN_FONT_SIZE: { 139 id: -1, 140 type: 10002, 141 params: ['sys.float.segment_button_min_font_size'], 142 bundleName: '__harDefaultBundleName__', 143 moduleName: '__harDefaultModuleName__', 144 }, 145 SEGMENT_BUTTON_NORMAL_BORDER_RADIUS: { 146 id: -1, 147 type: 10002, 148 params: ['sys.float.segment_button_normal_border_radius'], 149 bundleName: '__harDefaultBundleName__', 150 moduleName: '__harDefaultModuleName__', 151 }, 152 SEGMENT_ITEM_TEXT_OVERFLOW: { 153 id: -1, 154 type: 10002, 155 params: ['sys.float.segment_marquee'], 156 bundleName: '__harDefaultBundleName__', 157 moduleName: '__harDefaultModuleName__', 158 }, 159 SEGMENT_BUTTON_FOCUS_TEXT_COLOR: { 160 id: -1, 161 type: 10001, 162 params: ['sys.color.segment_button_focus_text_primary'], 163 bundleName: '__harDefaultBundleName__', 164 moduleName: '__harDefaultModuleName__', 165 }, 166 SEGMENT_BUTTON_SHADOW: { 167 id: -1, 168 type: 10002, 169 params: ['sys.float.segment_button_shadow'], 170 bundleName: '__harDefaultBundleName__', 171 moduleName: '__harDefaultModuleName__', 172 }, 173 SEGMENT_TEXT_HORIZONTAL_PADDING: { 174 id: -1, 175 type: 10002, 176 params: ['sys.float.segment_button_text_l_r_padding'], 177 bundleName: '__harDefaultBundleName__', 178 moduleName: '__harDefaultModuleName__', 179 }, 180 SEGMENT_TEXT_VERTICAL_PADDING: { 181 id: -1, 182 type: 10002, 183 params: ['sys.float.segment_button_text_u_d_padding'], 184 bundleName: '__harDefaultBundleName__', 185 moduleName: '__harDefaultModuleName__', 186 }, 187 SEGMENT_TEXT_CAPSULE_VERTICAL_PADDING: { 188 id: -1, 189 type: 10002, 190 params: ['sys.float.segment_button_text_capsule_u_d_padding'], 191 bundleName: '__harDefaultBundleName__', 192 moduleName: '__harDefaultModuleName__', 193 }, 194 SEGMENT_BUTTON_FOCUS_CUSTOMIZED_BG_COLOR: { 195 id: -1, 196 type: 10001, 197 params: ['sys.color.segment_button_focus_backboard_primary'], 198 bundleName: '__harDefaultBundleName__', 199 moduleName: '__harDefaultModuleName__', 200 }, 201 SEGMENT_FOCUS_STYLE_CUSTOMIZED: { 202 id: -1, 203 type: 10002, 204 params: ['sys.float.segment_focus_control'], 205 bundleName: '__harDefaultBundleName__', 206 moduleName: '__harDefaultModuleName__', 207 }, 208}; 209function nearEqual(first, second) { 210 return Math.abs(first - second) < 0.001; 211} 212let SegmentButtonItemOptions = class SegmentButtonItemOptions { 213 constructor(options) { 214 this.icon = options.icon; 215 this.selectedIcon = options.selectedIcon; 216 this.text = options.text; 217 this.iconAccessibilityText = options.iconAccessibilityText; 218 this.selectedIconAccessibilityText = options.selectedIconAccessibilityText; 219 this.accessibilityLevel = options.accessibilityLevel; 220 this.accessibilityDescription = options.accessibilityDescription; 221 } 222}; 223SegmentButtonItemOptions = __decorate([Observed], SegmentButtonItemOptions); 224let SegmentButtonItemOptionsArray = (SegmentButtonItemOptionsArray_1 = class SegmentButtonItemOptionsArray extends ( 225 Array 226) { 227 constructor(elementsOrLength) { 228 super(typeof elementsOrLength === 'number' ? elementsOrLength : 0); 229 this.changeStartIndex = void 0; 230 this.deleteCount = void 0; 231 this.addLength = void 0; 232 if (typeof elementsOrLength !== 'number' && elementsOrLength !== void 0) { 233 super.push(...elementsOrLength.map((element) => new SegmentButtonItemOptions(element))); 234 } 235 } 236 push(...items) { 237 if (this.length + items.length > MAX_ITEM_COUNT) { 238 console.warn('Exceeded the maximum number of elements (5).'); 239 return this.length; 240 } 241 this.changeStartIndex = this.length; 242 this.deleteCount = 0; 243 this.addLength = items.length; 244 return super.push(...items.map((element) => new SegmentButtonItemOptions(element))); 245 } 246 pop() { 247 if (this.length <= MIN_ITEM_COUNT) { 248 console.warn('Below the minimum number of elements (2).'); 249 return void 0; 250 } 251 this.changeStartIndex = this.length - 1; 252 this.deleteCount = 1; 253 this.addLength = 0; 254 return super.pop(); 255 } 256 shift() { 257 if (this.length <= MIN_ITEM_COUNT) { 258 console.warn('Below the minimum number of elements (2).'); 259 return void 0; 260 } 261 this.changeStartIndex = 0; 262 this.deleteCount = 1; 263 this.addLength = 0; 264 return super.shift(); 265 } 266 unshift(...items) { 267 if (this.length + items.length > MAX_ITEM_COUNT) { 268 console.warn('Exceeded the maximum number of elements (5).'); 269 return this.length; 270 } 271 if (items.length > 0) { 272 this.changeStartIndex = 0; 273 this.deleteCount = 0; 274 this.addLength = items.length; 275 } 276 return super.unshift(...items.map((element) => new SegmentButtonItemOptions(element))); 277 } 278 splice(start, deleteCount, ...items) { 279 let length = this.length - deleteCount < 0 ? 0 : this.length - deleteCount; 280 length += items.length; 281 if (length < MIN_ITEM_COUNT) { 282 console.warn('Below the minimum number of elements (2).'); 283 return []; 284 } 285 if (length > MAX_ITEM_COUNT) { 286 console.warn('Exceeded the maximum number of elements (5).'); 287 return []; 288 } 289 this.changeStartIndex = start; 290 this.deleteCount = deleteCount; 291 this.addLength = items.length; 292 return super.splice(start, deleteCount, ...items); 293 } 294 static create(elements) { 295 return new SegmentButtonItemOptionsArray_1(elements); 296 } 297}); 298SegmentButtonItemOptionsArray = SegmentButtonItemOptionsArray_1 = __decorate([Observed], SegmentButtonItemOptionsArray); 299export { SegmentButtonItemOptionsArray }; 300let SegmentButtonOptions = (SegmentButtonOptions_1 = class SegmentButtonOptions { 301 get buttons() { 302 return this._buttons; 303 } 304 set buttons(val) { 305 if (this._buttons !== void 0 && this._buttons !== val) { 306 this.onButtonsChange?.(); 307 } 308 this._buttons = val; 309 } 310 constructor(options) { 311 this.multiply = false; 312 this.showText = false; 313 this.showIcon = false; 314 this._buttons = void 0; 315 this.fontColor = options.fontColor ?? segmentButtonTheme.FONT_COLOR; 316 this.selectedFontColor = options.selectedFontColor ?? segmentButtonTheme.TAB_SELECTED_FONT_COLOR; 317 this.fontSize = options.fontSize ?? segmentButtonTheme.FONT_SIZE; 318 this.selectedFontSize = options.selectedFontSize ?? segmentButtonTheme.SELECTED_FONT_SIZE; 319 this.fontWeight = options.fontWeight ?? FontWeight.Regular; 320 this.selectedFontWeight = options.selectedFontWeight ?? FontWeight.Medium; 321 this.backgroundColor = options.backgroundColor ?? segmentButtonTheme.BACKGROUND_COLOR; 322 this.selectedBackgroundColor = options.selectedBackgroundColor ?? segmentButtonTheme.TAB_SELECTED_BACKGROUND_COLOR; 323 this.imageSize = options.imageSize ?? { width: 24, height: 24 }; 324 this.buttonPadding = options.buttonPadding; 325 this.textPadding = options.textPadding; 326 this.type = options.type; 327 this.backgroundBlurStyle = 328 options.backgroundBlurStyle ?? LengthMetrics.resource(segmentButtonTheme.BACKGROUND_BLUR_STYLE).value; 329 this.localizedTextPadding = options.localizedTextPadding; 330 this.localizedButtonPadding = options.localizedButtonPadding; 331 this.direction = options.direction ?? Direction.Auto; 332 this.buttons = new SegmentButtonItemOptionsArray(options.buttons); 333 if (this.type === 'capsule') { 334 this.multiply = options.multiply ?? false; 335 this.onButtonsUpdated(); 336 this.selectedFontColor = options.selectedFontColor ?? segmentButtonTheme.CAPSULE_SELECTED_FONT_COLOR; 337 this.selectedBackgroundColor = 338 options.selectedBackgroundColor ?? segmentButtonTheme.CAPSULE_SELECTED_BACKGROUND_COLOR; 339 } else { 340 this.showText = true; 341 } 342 let themePadding = LengthMetrics.resource({ 343 id: -1, 344 type: 10002, 345 params: ['sys.float.segment_button_baseplate_padding'], 346 bundleName: '__harDefaultBundleName__', 347 moduleName: '__harDefaultModuleName__', 348 }).value; 349 this.componentPadding = this.multiply ? 0 : themePadding; 350 } 351 onButtonsUpdated() { 352 this.buttons?.forEach((button) => { 353 this.showText ||= button.text !== void 0; 354 this.showIcon ||= button.icon !== void 0 || button.selectedIcon !== void 0; 355 }); 356 if (this.showText && this.showIcon) { 357 this.iconTextRadius = 12; 358 this.iconTextBackgroundRadius = 14; 359 } 360 } 361 static tab(options) { 362 return new SegmentButtonOptions_1({ 363 type: 'tab', 364 buttons: options.buttons, 365 fontColor: options.fontColor, 366 selectedFontColor: options.selectedFontColor, 367 fontSize: options.fontSize, 368 selectedFontSize: options.selectedFontSize, 369 fontWeight: options.fontWeight, 370 selectedFontWeight: options.selectedFontWeight, 371 backgroundColor: options.backgroundColor, 372 selectedBackgroundColor: options.selectedBackgroundColor, 373 imageSize: options.imageSize, 374 buttonPadding: options.buttonPadding, 375 textPadding: options.textPadding, 376 localizedTextPadding: options.localizedTextPadding, 377 localizedButtonPadding: options.localizedButtonPadding, 378 backgroundBlurStyle: options.backgroundBlurStyle, 379 direction: options.direction, 380 }); 381 } 382 static capsule(options) { 383 return new SegmentButtonOptions_1({ 384 type: 'capsule', 385 buttons: options.buttons, 386 multiply: options.multiply, 387 fontColor: options.fontColor, 388 selectedFontColor: options.selectedFontColor, 389 fontSize: options.fontSize, 390 selectedFontSize: options.selectedFontSize, 391 fontWeight: options.fontWeight, 392 selectedFontWeight: options.selectedFontWeight, 393 backgroundColor: options.backgroundColor, 394 selectedBackgroundColor: options.selectedBackgroundColor, 395 imageSize: options.imageSize, 396 buttonPadding: options.buttonPadding, 397 textPadding: options.textPadding, 398 localizedTextPadding: options.localizedTextPadding, 399 localizedButtonPadding: options.localizedButtonPadding, 400 backgroundBlurStyle: options.backgroundBlurStyle, 401 direction: options.direction, 402 }); 403 } 404}); 405SegmentButtonOptions = SegmentButtonOptions_1 = __decorate([Observed], SegmentButtonOptions); 406export { SegmentButtonOptions }; 407class MultiSelectBackground extends ViewPU { 408 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 409 super(parent, __localStorage, elmtId, extraInfo); 410 if (typeof paramsLambda === 'function') { 411 this.paramsGenerator_ = paramsLambda; 412 } 413 this.__optionsArray = new SynchedPropertyNesedObjectPU(params.optionsArray, this, 'optionsArray'); 414 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 415 this.__buttonBorderRadius = this.initializeConsume('buttonBorderRadius', 'buttonBorderRadius'); 416 this.__buttonItemsSize = this.initializeConsume('buttonItemsSize', 'buttonItemsSize'); 417 this.setInitiallyProvidedValue(params); 418 this.finalizeConstruction(); 419 } 420 setInitiallyProvidedValue(params) { 421 this.__optionsArray.set(params.optionsArray); 422 this.__options.set(params.options); 423 } 424 updateStateVars(params) { 425 this.__optionsArray.set(params.optionsArray); 426 this.__options.set(params.options); 427 } 428 purgeVariableDependenciesOnElmtId(rmElmtId) { 429 this.__optionsArray.purgeDependencyOnElmtId(rmElmtId); 430 this.__options.purgeDependencyOnElmtId(rmElmtId); 431 this.__buttonBorderRadius.purgeDependencyOnElmtId(rmElmtId); 432 this.__buttonItemsSize.purgeDependencyOnElmtId(rmElmtId); 433 } 434 aboutToBeDeleted() { 435 this.__optionsArray.aboutToBeDeleted(); 436 this.__options.aboutToBeDeleted(); 437 this.__buttonBorderRadius.aboutToBeDeleted(); 438 this.__buttonItemsSize.aboutToBeDeleted(); 439 SubscriberManager.Get().delete(this.id__()); 440 this.aboutToBeDeletedInternal(); 441 } 442 get optionsArray() { 443 return this.__optionsArray.get(); 444 } 445 get options() { 446 return this.__options.get(); 447 } 448 get buttonBorderRadius() { 449 return this.__buttonBorderRadius.get(); 450 } 451 set buttonBorderRadius(newValue) { 452 this.__buttonBorderRadius.set(newValue); 453 } 454 get buttonItemsSize() { 455 return this.__buttonItemsSize.get(); 456 } 457 set buttonItemsSize(newValue) { 458 this.__buttonItemsSize.set(newValue); 459 } 460 initialRender() { 461 this.observeComponentCreation2((elmtId, isInitialRender) => { 462 Row.create({ space: 1 }); 463 Row.direction(this.options.direction); 464 Row.padding(this.options.componentPadding); 465 }, Row); 466 this.observeComponentCreation2((elmtId, isInitialRender) => { 467 ForEach.create(); 468 const forEachItemGenFunction = (_item, index) => { 469 const _ = _item; 470 this.observeComponentCreation2((elmtId, isInitialRender) => { 471 If.create(); 472 if (index < MAX_ITEM_COUNT) { 473 this.ifElseBranchUpdateFunction(0, () => { 474 this.observeComponentCreation2((elmtId, isInitialRender) => { 475 Stack.create(); 476 Stack.direction(this.options.direction); 477 Stack.layoutWeight(1); 478 Stack.height(this.buttonItemsSize[index].height); 479 Stack.backgroundColor(this.options.backgroundColor ?? segmentButtonTheme.BACKGROUND_COLOR); 480 Stack.borderRadius(this.buttonBorderRadius[index]); 481 Stack.backgroundBlurStyle(this.options.backgroundBlurStyle); 482 }, Stack); 483 Stack.pop(); 484 }); 485 } else { 486 this.ifElseBranchUpdateFunction(1, () => {}); 487 } 488 }, If); 489 If.pop(); 490 }; 491 this.forEachUpdateFunction(elmtId, this.optionsArray, forEachItemGenFunction, undefined, true, false); 492 }, ForEach); 493 ForEach.pop(); 494 Row.pop(); 495 } 496 rerender() { 497 this.updateDirtyElements(); 498 } 499} 500class SelectItem extends ViewPU { 501 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 502 super(parent, __localStorage, elmtId, extraInfo); 503 if (typeof paramsLambda === 'function') { 504 this.paramsGenerator_ = paramsLambda; 505 } 506 this.__optionsArray = new SynchedPropertyNesedObjectPU(params.optionsArray, this, 'optionsArray'); 507 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 508 this.__selectedIndexes = new SynchedPropertyObjectTwoWayPU(params.selectedIndexes, this, 'selectedIndexes'); 509 this.__buttonItemsSize = this.initializeConsume('buttonItemsSize', 'buttonItemsSize'); 510 this.__selectedItemPosition = this.initializeConsume('selectedItemPosition', 'selectedItemPosition'); 511 this.__zoomScaleArray = this.initializeConsume('zoomScaleArray', 'zoomScaleArray'); 512 this.__buttonBorderRadius = this.initializeConsume('buttonBorderRadius', 'buttonBorderRadius'); 513 this.setInitiallyProvidedValue(params); 514 this.finalizeConstruction(); 515 } 516 setInitiallyProvidedValue(params) { 517 this.__optionsArray.set(params.optionsArray); 518 this.__options.set(params.options); 519 } 520 updateStateVars(params) { 521 this.__optionsArray.set(params.optionsArray); 522 this.__options.set(params.options); 523 } 524 purgeVariableDependenciesOnElmtId(rmElmtId) { 525 this.__optionsArray.purgeDependencyOnElmtId(rmElmtId); 526 this.__options.purgeDependencyOnElmtId(rmElmtId); 527 this.__selectedIndexes.purgeDependencyOnElmtId(rmElmtId); 528 this.__buttonItemsSize.purgeDependencyOnElmtId(rmElmtId); 529 this.__selectedItemPosition.purgeDependencyOnElmtId(rmElmtId); 530 this.__zoomScaleArray.purgeDependencyOnElmtId(rmElmtId); 531 this.__buttonBorderRadius.purgeDependencyOnElmtId(rmElmtId); 532 } 533 aboutToBeDeleted() { 534 this.__optionsArray.aboutToBeDeleted(); 535 this.__options.aboutToBeDeleted(); 536 this.__selectedIndexes.aboutToBeDeleted(); 537 this.__buttonItemsSize.aboutToBeDeleted(); 538 this.__selectedItemPosition.aboutToBeDeleted(); 539 this.__zoomScaleArray.aboutToBeDeleted(); 540 this.__buttonBorderRadius.aboutToBeDeleted(); 541 SubscriberManager.Get().delete(this.id__()); 542 this.aboutToBeDeletedInternal(); 543 } 544 get optionsArray() { 545 return this.__optionsArray.get(); 546 } 547 get options() { 548 return this.__options.get(); 549 } 550 get selectedIndexes() { 551 return this.__selectedIndexes.get(); 552 } 553 set selectedIndexes(newValue) { 554 this.__selectedIndexes.set(newValue); 555 } 556 get buttonItemsSize() { 557 return this.__buttonItemsSize.get(); 558 } 559 set buttonItemsSize(newValue) { 560 this.__buttonItemsSize.set(newValue); 561 } 562 get selectedItemPosition() { 563 return this.__selectedItemPosition.get(); 564 } 565 set selectedItemPosition(newValue) { 566 this.__selectedItemPosition.set(newValue); 567 } 568 get zoomScaleArray() { 569 return this.__zoomScaleArray.get(); 570 } 571 set zoomScaleArray(newValue) { 572 this.__zoomScaleArray.set(newValue); 573 } 574 get buttonBorderRadius() { 575 return this.__buttonBorderRadius.get(); 576 } 577 set buttonBorderRadius(newValue) { 578 this.__buttonBorderRadius.set(newValue); 579 } 580 initialRender() { 581 this.observeComponentCreation2((elmtId, isInitialRender) => { 582 If.create(); 583 if (this.selectedIndexes !== void 0 && this.selectedIndexes.length !== 0) { 584 this.ifElseBranchUpdateFunction(0, () => { 585 this.observeComponentCreation2((elmtId, isInitialRender) => { 586 Stack.create(); 587 Stack.direction(this.options.direction); 588 Stack.borderRadius(this.buttonBorderRadius[this.selectedIndexes[0]]); 589 Stack.size(this.buttonItemsSize[this.selectedIndexes[0]]); 590 Stack.backgroundColor( 591 this.options.selectedBackgroundColor ?? 592 (this.options.type === 'tab' 593 ? segmentButtonTheme.TAB_SELECTED_BACKGROUND_COLOR 594 : segmentButtonTheme.CAPSULE_SELECTED_BACKGROUND_COLOR) 595 ); 596 Stack.position(ObservedObject.GetRawObject(this.selectedItemPosition)); 597 Stack.scale({ 598 x: this.zoomScaleArray[this.selectedIndexes[0]], 599 y: this.zoomScaleArray[this.selectedIndexes[0]], 600 }); 601 Stack.shadow( 602 resourceToNumber(this.getUIContext()?.getHostContext(), segmentButtonTheme.SEGMENT_BUTTON_SHADOW, 0) 603 ); 604 }, Stack); 605 Stack.pop(); 606 }); 607 } else { 608 this.ifElseBranchUpdateFunction(1, () => {}); 609 } 610 }, If); 611 If.pop(); 612 } 613 rerender() { 614 this.updateDirtyElements(); 615 } 616} 617class MultiSelectItemArray extends ViewPU { 618 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 619 super(parent, __localStorage, elmtId, extraInfo); 620 if (typeof paramsLambda === 'function') { 621 this.paramsGenerator_ = paramsLambda; 622 } 623 this.__optionsArray = new SynchedPropertyNesedObjectPU(params.optionsArray, this, 'optionsArray'); 624 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 625 this.__selectedIndexes = new SynchedPropertyObjectTwoWayPU(params.selectedIndexes, this, 'selectedIndexes'); 626 this.__buttonItemsSize = this.initializeConsume('buttonItemsSize', 'buttonItemsSize'); 627 this.__zoomScaleArray = this.initializeConsume('zoomScaleArray', 'zoomScaleArray'); 628 this.__buttonBorderRadius = this.initializeConsume('buttonBorderRadius', 'buttonBorderRadius'); 629 this.__multiColor = new ObservedPropertyObjectPU( 630 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => Color.Transparent), 631 this, 632 'multiColor' 633 ); 634 this.setInitiallyProvidedValue(params); 635 this.declareWatch('options', this.onOptionsChange); 636 this.declareWatch('selectedIndexes', this.onSelectedChange); 637 this.finalizeConstruction(); 638 } 639 setInitiallyProvidedValue(params) { 640 this.__optionsArray.set(params.optionsArray); 641 this.__options.set(params.options); 642 if (params.multiColor !== undefined) { 643 this.multiColor = params.multiColor; 644 } 645 } 646 updateStateVars(params) { 647 this.__optionsArray.set(params.optionsArray); 648 this.__options.set(params.options); 649 } 650 purgeVariableDependenciesOnElmtId(rmElmtId) { 651 this.__optionsArray.purgeDependencyOnElmtId(rmElmtId); 652 this.__options.purgeDependencyOnElmtId(rmElmtId); 653 this.__selectedIndexes.purgeDependencyOnElmtId(rmElmtId); 654 this.__buttonItemsSize.purgeDependencyOnElmtId(rmElmtId); 655 this.__zoomScaleArray.purgeDependencyOnElmtId(rmElmtId); 656 this.__buttonBorderRadius.purgeDependencyOnElmtId(rmElmtId); 657 this.__multiColor.purgeDependencyOnElmtId(rmElmtId); 658 } 659 aboutToBeDeleted() { 660 this.__optionsArray.aboutToBeDeleted(); 661 this.__options.aboutToBeDeleted(); 662 this.__selectedIndexes.aboutToBeDeleted(); 663 this.__buttonItemsSize.aboutToBeDeleted(); 664 this.__zoomScaleArray.aboutToBeDeleted(); 665 this.__buttonBorderRadius.aboutToBeDeleted(); 666 this.__multiColor.aboutToBeDeleted(); 667 SubscriberManager.Get().delete(this.id__()); 668 this.aboutToBeDeletedInternal(); 669 } 670 get optionsArray() { 671 return this.__optionsArray.get(); 672 } 673 get options() { 674 return this.__options.get(); 675 } 676 get selectedIndexes() { 677 return this.__selectedIndexes.get(); 678 } 679 set selectedIndexes(newValue) { 680 this.__selectedIndexes.set(newValue); 681 } 682 get buttonItemsSize() { 683 return this.__buttonItemsSize.get(); 684 } 685 set buttonItemsSize(newValue) { 686 this.__buttonItemsSize.set(newValue); 687 } 688 get zoomScaleArray() { 689 return this.__zoomScaleArray.get(); 690 } 691 set zoomScaleArray(newValue) { 692 this.__zoomScaleArray.set(newValue); 693 } 694 get buttonBorderRadius() { 695 return this.__buttonBorderRadius.get(); 696 } 697 set buttonBorderRadius(newValue) { 698 this.__buttonBorderRadius.set(newValue); 699 } 700 get multiColor() { 701 return this.__multiColor.get(); 702 } 703 set multiColor(newValue) { 704 this.__multiColor.set(newValue); 705 } 706 onOptionsChange() { 707 for (let i = 0; i < this.selectedIndexes.length; i++) { 708 this.multiColor[this.selectedIndexes[i]] = 709 this.options.selectedBackgroundColor ?? segmentButtonTheme.CAPSULE_SELECTED_BACKGROUND_COLOR; 710 } 711 } 712 onSelectedChange() { 713 for (let i = 0; i < MAX_ITEM_COUNT; i++) { 714 this.multiColor[i] = Color.Transparent; 715 } 716 for (let i = 0; i < this.selectedIndexes.length; i++) { 717 this.multiColor[this.selectedIndexes[i]] = 718 this.options.selectedBackgroundColor ?? segmentButtonTheme.CAPSULE_SELECTED_BACKGROUND_COLOR; 719 } 720 } 721 aboutToAppear() { 722 for (let i = 0; i < this.selectedIndexes.length; i++) { 723 this.multiColor[this.selectedIndexes[i]] = 724 this.options.selectedBackgroundColor ?? segmentButtonTheme.CAPSULE_SELECTED_BACKGROUND_COLOR; 725 } 726 } 727 initialRender() { 728 this.observeComponentCreation2((elmtId, isInitialRender) => { 729 Row.create({ space: 1 }); 730 Row.direction(this.options.direction); 731 Row.padding(this.options.componentPadding); 732 }, Row); 733 this.observeComponentCreation2((elmtId, isInitialRender) => { 734 ForEach.create(); 735 const forEachItemGenFunction = (_item, index) => { 736 const _ = _item; 737 this.observeComponentCreation2((elmtId, isInitialRender) => { 738 If.create(); 739 if (index < MAX_ITEM_COUNT) { 740 this.ifElseBranchUpdateFunction(0, () => { 741 this.observeComponentCreation2((elmtId, isInitialRender) => { 742 Stack.create(); 743 Stack.direction(this.options.direction); 744 Stack.width(this.buttonItemsSize[index].width); 745 Stack.height(this.buttonItemsSize[index].height); 746 Stack.backgroundColor(this.multiColor[index]); 747 Stack.borderRadius(this.buttonBorderRadius[index]); 748 }, Stack); 749 Stack.pop(); 750 }); 751 } else { 752 this.ifElseBranchUpdateFunction(1, () => {}); 753 } 754 }, If); 755 If.pop(); 756 }; 757 this.forEachUpdateFunction(elmtId, this.optionsArray, forEachItemGenFunction, undefined, true, false); 758 }, ForEach); 759 ForEach.pop(); 760 Row.pop(); 761 } 762 rerender() { 763 this.updateDirtyElements(); 764 } 765} 766class SegmentButtonItem extends ViewPU { 767 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 768 super(parent, __localStorage, elmtId, extraInfo); 769 if (typeof paramsLambda === 'function') { 770 this.paramsGenerator_ = paramsLambda; 771 } 772 this.__selectedIndexes = new SynchedPropertyObjectTwoWayPU(params.selectedIndexes, this, 'selectedIndexes'); 773 this.__focusIndex = new SynchedPropertySimpleTwoWayPU(params.focusIndex, this, 'focusIndex'); 774 this.__maxFontScale = new SynchedPropertyObjectOneWayPU(params.maxFontScale, this, 'maxFontScale'); 775 this.__itemOptions = new SynchedPropertyNesedObjectPU(params.itemOptions, this, 'itemOptions'); 776 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 777 this.__property = new SynchedPropertyNesedObjectPU(params.property, this, 'property'); 778 this.__index = new SynchedPropertySimpleOneWayPU(params.index, this, 'index'); 779 this.__isTextSupportMarquee = new ObservedPropertySimplePU( 780 resourceToNumber(this.getUIContext()?.getHostContext(), segmentButtonTheme.SEGMENT_ITEM_TEXT_OVERFLOW, 1.0) === 781 0.0, 782 this, 783 'isTextSupportMarquee' 784 ); 785 this.__isMarqueeAndFadeout = new SynchedPropertySimpleOneWayPU( 786 params.isMarqueeAndFadeout, 787 this, 788 'isMarqueeAndFadeout' 789 ); 790 this.__isSegmentFocusStyleCustomized = new SynchedPropertySimpleOneWayPU( 791 params.isSegmentFocusStyleCustomized, 792 this, 793 'isSegmentFocusStyleCustomized' 794 ); 795 this.__isTextInMarqueeCondition = new ObservedPropertySimplePU(false, this, 'isTextInMarqueeCondition'); 796 this.__isButtonTextFadeout = new ObservedPropertySimplePU(false, this, 'isButtonTextFadeout'); 797 this.groupId = ''; 798 this.__hover = new SynchedPropertySimpleOneWayPU(params.hover, this, 'hover'); 799 this.setInitiallyProvidedValue(params); 800 this.declareWatch('focusIndex', this.onFocusIndex); 801 this.declareWatch('hover', this.onFocusIndex); 802 this.finalizeConstruction(); 803 } 804 setInitiallyProvidedValue(params) { 805 this.__itemOptions.set(params.itemOptions); 806 this.__options.set(params.options); 807 this.__property.set(params.property); 808 if (params.isTextSupportMarquee !== undefined) { 809 this.isTextSupportMarquee = params.isTextSupportMarquee; 810 } 811 if (params.isTextInMarqueeCondition !== undefined) { 812 this.isTextInMarqueeCondition = params.isTextInMarqueeCondition; 813 } 814 if (params.isButtonTextFadeout !== undefined) { 815 this.isButtonTextFadeout = params.isButtonTextFadeout; 816 } 817 if (params.groupId !== undefined) { 818 this.groupId = params.groupId; 819 } 820 } 821 updateStateVars(params) { 822 this.__maxFontScale.reset(params.maxFontScale); 823 this.__itemOptions.set(params.itemOptions); 824 this.__options.set(params.options); 825 this.__property.set(params.property); 826 this.__index.reset(params.index); 827 this.__isMarqueeAndFadeout.reset(params.isMarqueeAndFadeout); 828 this.__isSegmentFocusStyleCustomized.reset(params.isSegmentFocusStyleCustomized); 829 this.__hover.reset(params.hover); 830 } 831 purgeVariableDependenciesOnElmtId(rmElmtId) { 832 this.__selectedIndexes.purgeDependencyOnElmtId(rmElmtId); 833 this.__focusIndex.purgeDependencyOnElmtId(rmElmtId); 834 this.__maxFontScale.purgeDependencyOnElmtId(rmElmtId); 835 this.__itemOptions.purgeDependencyOnElmtId(rmElmtId); 836 this.__options.purgeDependencyOnElmtId(rmElmtId); 837 this.__property.purgeDependencyOnElmtId(rmElmtId); 838 this.__index.purgeDependencyOnElmtId(rmElmtId); 839 this.__isTextSupportMarquee.purgeDependencyOnElmtId(rmElmtId); 840 this.__isMarqueeAndFadeout.purgeDependencyOnElmtId(rmElmtId); 841 this.__isSegmentFocusStyleCustomized.purgeDependencyOnElmtId(rmElmtId); 842 this.__isTextInMarqueeCondition.purgeDependencyOnElmtId(rmElmtId); 843 this.__isButtonTextFadeout.purgeDependencyOnElmtId(rmElmtId); 844 this.__hover.purgeDependencyOnElmtId(rmElmtId); 845 } 846 aboutToBeDeleted() { 847 this.__selectedIndexes.aboutToBeDeleted(); 848 this.__focusIndex.aboutToBeDeleted(); 849 this.__maxFontScale.aboutToBeDeleted(); 850 this.__itemOptions.aboutToBeDeleted(); 851 this.__options.aboutToBeDeleted(); 852 this.__property.aboutToBeDeleted(); 853 this.__index.aboutToBeDeleted(); 854 this.__isTextSupportMarquee.aboutToBeDeleted(); 855 this.__isMarqueeAndFadeout.aboutToBeDeleted(); 856 this.__isSegmentFocusStyleCustomized.aboutToBeDeleted(); 857 this.__isTextInMarqueeCondition.aboutToBeDeleted(); 858 this.__isButtonTextFadeout.aboutToBeDeleted(); 859 this.__hover.aboutToBeDeleted(); 860 SubscriberManager.Get().delete(this.id__()); 861 this.aboutToBeDeletedInternal(); 862 } 863 get selectedIndexes() { 864 return this.__selectedIndexes.get(); 865 } 866 set selectedIndexes(newValue) { 867 this.__selectedIndexes.set(newValue); 868 } 869 get focusIndex() { 870 return this.__focusIndex.get(); 871 } 872 set focusIndex(newValue) { 873 this.__focusIndex.set(newValue); 874 } 875 get maxFontScale() { 876 return this.__maxFontScale.get(); 877 } 878 set maxFontScale(newValue) { 879 this.__maxFontScale.set(newValue); 880 } 881 get itemOptions() { 882 return this.__itemOptions.get(); 883 } 884 get options() { 885 return this.__options.get(); 886 } 887 get property() { 888 return this.__property.get(); 889 } 890 get index() { 891 return this.__index.get(); 892 } 893 set index(newValue) { 894 this.__index.set(newValue); 895 } 896 get isTextSupportMarquee() { 897 return this.__isTextSupportMarquee.get(); 898 } 899 set isTextSupportMarquee(newValue) { 900 this.__isTextSupportMarquee.set(newValue); 901 } 902 get isMarqueeAndFadeout() { 903 return this.__isMarqueeAndFadeout.get(); 904 } 905 set isMarqueeAndFadeout(newValue) { 906 this.__isMarqueeAndFadeout.set(newValue); 907 } 908 get isSegmentFocusStyleCustomized() { 909 return this.__isSegmentFocusStyleCustomized.get(); 910 } 911 set isSegmentFocusStyleCustomized(newValue) { 912 this.__isSegmentFocusStyleCustomized.set(newValue); 913 } 914 get isTextInMarqueeCondition() { 915 return this.__isTextInMarqueeCondition.get(); 916 } 917 set isTextInMarqueeCondition(newValue) { 918 this.__isTextInMarqueeCondition.set(newValue); 919 } 920 get isButtonTextFadeout() { 921 return this.__isButtonTextFadeout.get(); 922 } 923 set isButtonTextFadeout(newValue) { 924 this.__isButtonTextFadeout.set(newValue); 925 } 926 get hover() { 927 return this.__hover.get(); 928 } 929 set hover(newValue) { 930 this.__hover.set(newValue); 931 } 932 getTextPadding() { 933 if (this.options.localizedTextPadding) { 934 return this.options.localizedTextPadding; 935 } 936 if (this.options.textPadding !== void 0) { 937 return this.options.textPadding; 938 } 939 return 0; 940 } 941 getButtonPadding() { 942 if (this.options.localizedButtonPadding) { 943 return this.options.localizedButtonPadding; 944 } 945 if (this.options.buttonPadding !== void 0) { 946 return this.options.buttonPadding; 947 } 948 if (this.options.type === 'capsule' && this.options.showText && this.options.showIcon) { 949 return { 950 top: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_CAPSULE_VERTICAL_PADDING), 951 bottom: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_CAPSULE_VERTICAL_PADDING), 952 start: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_HORIZONTAL_PADDING), 953 end: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_HORIZONTAL_PADDING), 954 }; 955 } 956 return { 957 top: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_VERTICAL_PADDING), 958 bottom: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_VERTICAL_PADDING), 959 start: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_HORIZONTAL_PADDING), 960 end: LengthMetrics.resource(segmentButtonTheme.SEGMENT_TEXT_HORIZONTAL_PADDING), 961 }; 962 } 963 onFocusIndex() { 964 this.isTextInMarqueeCondition = 965 this.isSegmentFocusStyleCustomized && (this.focusIndex === this.index || this.hover); 966 } 967 aboutToAppear() { 968 this.isButtonTextFadeout = this.isSegmentFocusStyleCustomized; 969 } 970 isDefaultSelectedFontColor() { 971 if (this.options.type === 'tab') { 972 return this.options.selectedFontColor === segmentButtonTheme.TAB_SELECTED_FONT_COLOR; 973 } else if (this.options.type === 'capsule') { 974 return this.options.selectedFontColor === segmentButtonTheme.CAPSULE_SELECTED_FONT_COLOR; 975 } 976 return false; 977 } 978 getFontColor() { 979 if (this.property.isSelected) { 980 if (this.isDefaultSelectedFontColor() && this.isSegmentFocusStyleCustomized && this.focusIndex === this.index) { 981 return segmentButtonTheme.SEGMENT_BUTTON_FOCUS_TEXT_COLOR; 982 } 983 return this.options.selectedFontColor ?? segmentButtonTheme.CAPSULE_SELECTED_FONT_COLOR; 984 } else { 985 if ( 986 this.options.fontColor === segmentButtonTheme.FONT_COLOR && 987 this.isSegmentFocusStyleCustomized && 988 this.focusIndex === this.index 989 ) { 990 return segmentButtonTheme.SEGMENT_BUTTON_FOCUS_TEXT_COLOR; 991 } 992 return this.options.fontColor ?? segmentButtonTheme.FONT_COLOR; 993 } 994 } 995 getAccessibilityText() { 996 if ( 997 this.selectedIndexes.includes(this.index) && 998 typeof this.itemOptions.selectedIconAccessibilityText !== undefined 999 ) { 1000 return this.itemOptions.selectedIconAccessibilityText; 1001 } else if ( 1002 !this.selectedIndexes.includes(this.index) && 1003 typeof this.itemOptions.iconAccessibilityText !== undefined 1004 ) { 1005 return this.itemOptions.iconAccessibilityText; 1006 } 1007 return undefined; 1008 } 1009 initialRender() { 1010 this.observeComponentCreation2((elmtId, isInitialRender) => { 1011 Column.create({ space: 2 }); 1012 Column.direction(this.options.direction); 1013 Column.focusScopePriority( 1014 this.groupId, 1015 Math.min(...this.selectedIndexes) === this.index ? FocusPriority.PREVIOUS : FocusPriority.AUTO 1016 ); 1017 Column.justifyContent(FlexAlign.Center); 1018 Column.padding(this.getButtonPadding()); 1019 Column.constraintSize({ minHeight: segmentButtonTheme.CONSTRAINT_SIZE_MIN_HEIGHT }); 1020 }, Column); 1021 this.observeComponentCreation2((elmtId, isInitialRender) => { 1022 If.create(); 1023 if (this.options.showIcon) { 1024 this.ifElseBranchUpdateFunction(0, () => { 1025 this.observeComponentCreation2((elmtId, isInitialRender) => { 1026 Image.create(this.property.isSelected ? this.itemOptions.selectedIcon : this.itemOptions.icon); 1027 Image.direction(this.options.direction); 1028 Image.size(this.options.imageSize ?? { width: 24, height: 24 }); 1029 Image.draggable(false); 1030 Image.fillColor(this.getFontColor()); 1031 Image.accessibilityText(this.getAccessibilityText()); 1032 }, Image); 1033 }); 1034 } else { 1035 this.ifElseBranchUpdateFunction(1, () => {}); 1036 } 1037 }, If); 1038 If.pop(); 1039 this.observeComponentCreation2((elmtId, isInitialRender) => { 1040 If.create(); 1041 if (this.options.showText) { 1042 this.ifElseBranchUpdateFunction(0, () => { 1043 this.observeComponentCreation2((elmtId, isInitialRender) => { 1044 Text.create(this.itemOptions.text); 1045 Text.direction(this.options.direction); 1046 Text.fontColor(this.getFontColor()); 1047 Text.fontWeight(this.property.fontWeight); 1048 Text.fontSize(this.property.fontSize); 1049 Text.minFontSize(this.isSegmentFocusStyleCustomized ? this.property.fontSize : 9); 1050 Text.maxFontSize(this.property.fontSize); 1051 Text.maxFontScale(ObservedObject.GetRawObject(this.maxFontScale)); 1052 Text.textOverflow({ 1053 overflow: this.isTextSupportMarquee ? TextOverflow.MARQUEE : TextOverflow.Ellipsis, 1054 }); 1055 Text.marqueeOptions({ 1056 start: this.isTextInMarqueeCondition, 1057 fadeout: this.isButtonTextFadeout, 1058 marqueeStartPolicy: MarqueeStartPolicy.DEFAULT, 1059 }); 1060 Text.maxLines(1); 1061 Text.textAlign(TextAlign.Center); 1062 Text.padding(this.getTextPadding()); 1063 }, Text); 1064 Text.pop(); 1065 }); 1066 } else { 1067 this.ifElseBranchUpdateFunction(1, () => {}); 1068 } 1069 }, If); 1070 If.pop(); 1071 Column.pop(); 1072 } 1073 rerender() { 1074 this.updateDirtyElements(); 1075 } 1076} 1077let HoverColorProperty = class HoverColorProperty { 1078 constructor() { 1079 this.hoverColor = Color.Transparent; 1080 } 1081}; 1082HoverColorProperty = __decorate([Observed], HoverColorProperty); 1083class PressAndHoverEffect extends ViewPU { 1084 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 1085 super(parent, __localStorage, elmtId, extraInfo); 1086 if (typeof paramsLambda === 'function') { 1087 this.paramsGenerator_ = paramsLambda; 1088 } 1089 this.__buttonItemsSize = this.initializeConsume('buttonItemsSize', 'buttonItemsSize'); 1090 this.__press = new SynchedPropertySimpleOneWayPU(params.press, this, 'press'); 1091 this.__hover = new SynchedPropertySimpleOneWayPU(params.hover, this, 'hover'); 1092 this.__colorProperty = new SynchedPropertyNesedObjectPU(params.colorProperty, this, 'colorProperty'); 1093 this.__buttonBorderRadius = this.initializeConsume('buttonBorderRadius', 'buttonBorderRadius'); 1094 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 1095 this.pressIndex = 0; 1096 this.pressColor = segmentButtonTheme.PRESS_COLOR; 1097 this.setInitiallyProvidedValue(params); 1098 this.finalizeConstruction(); 1099 } 1100 setInitiallyProvidedValue(params) { 1101 this.__colorProperty.set(params.colorProperty); 1102 this.__options.set(params.options); 1103 if (params.pressIndex !== undefined) { 1104 this.pressIndex = params.pressIndex; 1105 } 1106 if (params.pressColor !== undefined) { 1107 this.pressColor = params.pressColor; 1108 } 1109 } 1110 updateStateVars(params) { 1111 this.__press.reset(params.press); 1112 this.__hover.reset(params.hover); 1113 this.__colorProperty.set(params.colorProperty); 1114 this.__options.set(params.options); 1115 } 1116 purgeVariableDependenciesOnElmtId(rmElmtId) { 1117 this.__buttonItemsSize.purgeDependencyOnElmtId(rmElmtId); 1118 this.__press.purgeDependencyOnElmtId(rmElmtId); 1119 this.__hover.purgeDependencyOnElmtId(rmElmtId); 1120 this.__colorProperty.purgeDependencyOnElmtId(rmElmtId); 1121 this.__buttonBorderRadius.purgeDependencyOnElmtId(rmElmtId); 1122 this.__options.purgeDependencyOnElmtId(rmElmtId); 1123 } 1124 aboutToBeDeleted() { 1125 this.__buttonItemsSize.aboutToBeDeleted(); 1126 this.__press.aboutToBeDeleted(); 1127 this.__hover.aboutToBeDeleted(); 1128 this.__colorProperty.aboutToBeDeleted(); 1129 this.__buttonBorderRadius.aboutToBeDeleted(); 1130 this.__options.aboutToBeDeleted(); 1131 SubscriberManager.Get().delete(this.id__()); 1132 this.aboutToBeDeletedInternal(); 1133 } 1134 get buttonItemsSize() { 1135 return this.__buttonItemsSize.get(); 1136 } 1137 set buttonItemsSize(newValue) { 1138 this.__buttonItemsSize.set(newValue); 1139 } 1140 get press() { 1141 return this.__press.get(); 1142 } 1143 set press(newValue) { 1144 this.__press.set(newValue); 1145 } 1146 get hover() { 1147 return this.__hover.get(); 1148 } 1149 set hover(newValue) { 1150 this.__hover.set(newValue); 1151 } 1152 get colorProperty() { 1153 return this.__colorProperty.get(); 1154 } 1155 get buttonBorderRadius() { 1156 return this.__buttonBorderRadius.get(); 1157 } 1158 set buttonBorderRadius(newValue) { 1159 this.__buttonBorderRadius.set(newValue); 1160 } 1161 get options() { 1162 return this.__options.get(); 1163 } 1164 initialRender() { 1165 this.observeComponentCreation2((elmtId, isInitialRender) => { 1166 Stack.create(); 1167 Stack.direction(this.options.direction); 1168 Stack.size(this.buttonItemsSize[this.pressIndex]); 1169 Stack.backgroundColor(this.press && this.hover ? this.pressColor : this.colorProperty.hoverColor); 1170 Stack.borderRadius(this.buttonBorderRadius[this.pressIndex]); 1171 }, Stack); 1172 Stack.pop(); 1173 } 1174 rerender() { 1175 this.updateDirtyElements(); 1176 } 1177} 1178class PressAndHoverEffectArray extends ViewPU { 1179 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 1180 super(parent, __localStorage, elmtId, extraInfo); 1181 if (typeof paramsLambda === 'function') { 1182 this.paramsGenerator_ = paramsLambda; 1183 } 1184 this.__buttons = new SynchedPropertyNesedObjectPU(params.buttons, this, 'buttons'); 1185 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 1186 this.__pressArray = new SynchedPropertyObjectTwoWayPU(params.pressArray, this, 'pressArray'); 1187 this.__hoverArray = new SynchedPropertyObjectTwoWayPU(params.hoverArray, this, 'hoverArray'); 1188 this.__hoverColorArray = new SynchedPropertyObjectTwoWayPU(params.hoverColorArray, this, 'hoverColorArray'); 1189 this.__zoomScaleArray = this.initializeConsume('zoomScaleArray', 'zoomScaleArray'); 1190 this.setInitiallyProvidedValue(params); 1191 this.finalizeConstruction(); 1192 } 1193 setInitiallyProvidedValue(params) { 1194 this.__buttons.set(params.buttons); 1195 this.__options.set(params.options); 1196 } 1197 updateStateVars(params) { 1198 this.__buttons.set(params.buttons); 1199 this.__options.set(params.options); 1200 } 1201 purgeVariableDependenciesOnElmtId(rmElmtId) { 1202 this.__buttons.purgeDependencyOnElmtId(rmElmtId); 1203 this.__options.purgeDependencyOnElmtId(rmElmtId); 1204 this.__pressArray.purgeDependencyOnElmtId(rmElmtId); 1205 this.__hoverArray.purgeDependencyOnElmtId(rmElmtId); 1206 this.__hoverColorArray.purgeDependencyOnElmtId(rmElmtId); 1207 this.__zoomScaleArray.purgeDependencyOnElmtId(rmElmtId); 1208 } 1209 aboutToBeDeleted() { 1210 this.__buttons.aboutToBeDeleted(); 1211 this.__options.aboutToBeDeleted(); 1212 this.__pressArray.aboutToBeDeleted(); 1213 this.__hoverArray.aboutToBeDeleted(); 1214 this.__hoverColorArray.aboutToBeDeleted(); 1215 this.__zoomScaleArray.aboutToBeDeleted(); 1216 SubscriberManager.Get().delete(this.id__()); 1217 this.aboutToBeDeletedInternal(); 1218 } 1219 get buttons() { 1220 return this.__buttons.get(); 1221 } 1222 get options() { 1223 return this.__options.get(); 1224 } 1225 get pressArray() { 1226 return this.__pressArray.get(); 1227 } 1228 set pressArray(newValue) { 1229 this.__pressArray.set(newValue); 1230 } 1231 get hoverArray() { 1232 return this.__hoverArray.get(); 1233 } 1234 set hoverArray(newValue) { 1235 this.__hoverArray.set(newValue); 1236 } 1237 get hoverColorArray() { 1238 return this.__hoverColorArray.get(); 1239 } 1240 set hoverColorArray(newValue) { 1241 this.__hoverColorArray.set(newValue); 1242 } 1243 get zoomScaleArray() { 1244 return this.__zoomScaleArray.get(); 1245 } 1246 set zoomScaleArray(newValue) { 1247 this.__zoomScaleArray.set(newValue); 1248 } 1249 initialRender() { 1250 this.observeComponentCreation2((elmtId, isInitialRender) => { 1251 Row.create({ space: 1 }); 1252 Row.direction(this.options.direction); 1253 }, Row); 1254 this.observeComponentCreation2((elmtId, isInitialRender) => { 1255 ForEach.create(); 1256 const forEachItemGenFunction = (_item, index) => { 1257 const item = _item; 1258 this.observeComponentCreation2((elmtId, isInitialRender) => { 1259 If.create(); 1260 if (index < MAX_ITEM_COUNT) { 1261 this.ifElseBranchUpdateFunction(0, () => { 1262 this.observeComponentCreation2((elmtId, isInitialRender) => { 1263 Stack.create(); 1264 Stack.direction(this.options.direction); 1265 Stack.scale({ 1266 x: 1267 this.options.type === 'capsule' && (this.options.multiply ?? false) 1268 ? 1 1269 : this.zoomScaleArray[index], 1270 y: 1271 this.options.type === 'capsule' && (this.options.multiply ?? false) 1272 ? 1 1273 : this.zoomScaleArray[index], 1274 }); 1275 }, Stack); 1276 { 1277 this.observeComponentCreation2( 1278 (elmtId, isInitialRender) => { 1279 if (isInitialRender) { 1280 let componentCall = new PressAndHoverEffect( 1281 this, 1282 { 1283 pressIndex: index, 1284 colorProperty: this.hoverColorArray[index], 1285 press: this.pressArray[index], 1286 hover: this.hoverArray[index], 1287 options: this.options, 1288 }, 1289 undefined, 1290 elmtId, 1291 () => {}, 1292 { page: 'library/src/main/ets/components/MainPage.ets', line: 688, col: 13 } 1293 ); 1294 ViewPU.create(componentCall); 1295 let paramsLambda = () => { 1296 return { 1297 pressIndex: index, 1298 colorProperty: this.hoverColorArray[index], 1299 press: this.pressArray[index], 1300 hover: this.hoverArray[index], 1301 options: this.options, 1302 }; 1303 }; 1304 componentCall.paramsGenerator_ = paramsLambda; 1305 } else { 1306 this.updateStateVarsOfChildByElmtId(elmtId, { 1307 colorProperty: this.hoverColorArray[index], 1308 press: this.pressArray[index], 1309 hover: this.hoverArray[index], 1310 options: this.options, 1311 }); 1312 } 1313 }, 1314 { name: 'PressAndHoverEffect' } 1315 ); 1316 } 1317 Stack.pop(); 1318 }); 1319 } else { 1320 this.ifElseBranchUpdateFunction(1, () => {}); 1321 } 1322 }, If); 1323 If.pop(); 1324 }; 1325 this.forEachUpdateFunction(elmtId, this.buttons, forEachItemGenFunction, undefined, true, false); 1326 }, ForEach); 1327 ForEach.pop(); 1328 Row.pop(); 1329 } 1330 rerender() { 1331 this.updateDirtyElements(); 1332 } 1333} 1334class SegmentButtonItemArrayComponent extends ViewPU { 1335 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 1336 super(parent, __localStorage, elmtId, extraInfo); 1337 if (typeof paramsLambda === 'function') { 1338 this.paramsGenerator_ = paramsLambda; 1339 } 1340 this.__optionsArray = new SynchedPropertyNesedObjectPU(params.optionsArray, this, 'optionsArray'); 1341 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 1342 this.__selectedIndexes = new SynchedPropertyObjectTwoWayPU(params.selectedIndexes, this, 'selectedIndexes'); 1343 this.__componentSize = this.initializeConsume('componentSize', 'componentSize'); 1344 this.__buttonBorderRadius = this.initializeConsume('buttonBorderRadius', 'buttonBorderRadius'); 1345 this.__buttonItemsSize = this.initializeConsume('buttonItemsSize', 'buttonItemsSize'); 1346 this.__buttonItemsPosition = this.initializeConsume('buttonItemsPosition', 'buttonItemsPosition'); 1347 this.__focusIndex = this.initializeConsume('focusIndex', 'focusIndex'); 1348 this.__zoomScaleArray = this.initializeConsume('zoomScaleArray', 'zoomScaleArray'); 1349 this.__buttonItemProperty = this.initializeConsume('buttonItemProperty', 'buttonItemProperty'); 1350 this.__buttonItemsSelected = this.initializeConsume('buttonItemsSelected', 'buttonItemsSelected'); 1351 this.__pressArray = new SynchedPropertyObjectTwoWayPU(params.pressArray, this, 'pressArray'); 1352 this.__hoverArray = new SynchedPropertyObjectTwoWayPU(params.hoverArray, this, 'hoverArray'); 1353 this.__hoverColorArray = new SynchedPropertyObjectTwoWayPU(params.hoverColorArray, this, 'hoverColorArray'); 1354 this.__maxFontScale = new SynchedPropertyObjectOneWayPU(params.maxFontScale, this, 'maxFontScale'); 1355 this.__buttonWidth = new ObservedPropertyObjectPU( 1356 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => 0), 1357 this, 1358 'buttonWidth' 1359 ); 1360 this.__buttonHeight = new ObservedPropertyObjectPU( 1361 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => 0), 1362 this, 1363 'buttonHeight' 1364 ); 1365 this.__isMarqueeAndFadeout = new ObservedPropertySimplePU(false, this, 'isMarqueeAndFadeout'); 1366 this.buttonItemsRealHeight = Array.from({ length: MAX_ITEM_COUNT }, (_, index) => 0); 1367 this.groupId = util.generateRandomUUID(true); 1368 this.onItemClicked = undefined; 1369 this.__isSegmentFocusStyleCustomized = new SynchedPropertySimpleOneWayPU( 1370 params.isSegmentFocusStyleCustomized, 1371 this, 1372 'isSegmentFocusStyleCustomized' 1373 ); 1374 this.setInitiallyProvidedValue(params); 1375 this.declareWatch('optionsArray', this.onOptionsArrayChange); 1376 this.declareWatch('options', this.onOptionsChange); 1377 this.declareWatch('buttonItemsSize', this.onButtonItemsSizeChange); 1378 this.declareWatch('focusIndex', this.onFocusIndex); 1379 this.finalizeConstruction(); 1380 } 1381 setInitiallyProvidedValue(params) { 1382 this.__optionsArray.set(params.optionsArray); 1383 this.__options.set(params.options); 1384 if (params.buttonWidth !== undefined) { 1385 this.buttonWidth = params.buttonWidth; 1386 } 1387 if (params.buttonHeight !== undefined) { 1388 this.buttonHeight = params.buttonHeight; 1389 } 1390 if (params.isMarqueeAndFadeout !== undefined) { 1391 this.isMarqueeAndFadeout = params.isMarqueeAndFadeout; 1392 } 1393 if (params.buttonItemsRealHeight !== undefined) { 1394 this.buttonItemsRealHeight = params.buttonItemsRealHeight; 1395 } 1396 if (params.groupId !== undefined) { 1397 this.groupId = params.groupId; 1398 } 1399 if (params.onItemClicked !== undefined) { 1400 this.onItemClicked = params.onItemClicked; 1401 } 1402 } 1403 updateStateVars(params) { 1404 this.__optionsArray.set(params.optionsArray); 1405 this.__options.set(params.options); 1406 this.__maxFontScale.reset(params.maxFontScale); 1407 this.__isSegmentFocusStyleCustomized.reset(params.isSegmentFocusStyleCustomized); 1408 } 1409 purgeVariableDependenciesOnElmtId(rmElmtId) { 1410 this.__optionsArray.purgeDependencyOnElmtId(rmElmtId); 1411 this.__options.purgeDependencyOnElmtId(rmElmtId); 1412 this.__selectedIndexes.purgeDependencyOnElmtId(rmElmtId); 1413 this.__componentSize.purgeDependencyOnElmtId(rmElmtId); 1414 this.__buttonBorderRadius.purgeDependencyOnElmtId(rmElmtId); 1415 this.__buttonItemsSize.purgeDependencyOnElmtId(rmElmtId); 1416 this.__buttonItemsPosition.purgeDependencyOnElmtId(rmElmtId); 1417 this.__focusIndex.purgeDependencyOnElmtId(rmElmtId); 1418 this.__zoomScaleArray.purgeDependencyOnElmtId(rmElmtId); 1419 this.__buttonItemProperty.purgeDependencyOnElmtId(rmElmtId); 1420 this.__buttonItemsSelected.purgeDependencyOnElmtId(rmElmtId); 1421 this.__pressArray.purgeDependencyOnElmtId(rmElmtId); 1422 this.__hoverArray.purgeDependencyOnElmtId(rmElmtId); 1423 this.__hoverColorArray.purgeDependencyOnElmtId(rmElmtId); 1424 this.__maxFontScale.purgeDependencyOnElmtId(rmElmtId); 1425 this.__buttonWidth.purgeDependencyOnElmtId(rmElmtId); 1426 this.__buttonHeight.purgeDependencyOnElmtId(rmElmtId); 1427 this.__isMarqueeAndFadeout.purgeDependencyOnElmtId(rmElmtId); 1428 this.__isSegmentFocusStyleCustomized.purgeDependencyOnElmtId(rmElmtId); 1429 } 1430 aboutToBeDeleted() { 1431 this.__optionsArray.aboutToBeDeleted(); 1432 this.__options.aboutToBeDeleted(); 1433 this.__selectedIndexes.aboutToBeDeleted(); 1434 this.__componentSize.aboutToBeDeleted(); 1435 this.__buttonBorderRadius.aboutToBeDeleted(); 1436 this.__buttonItemsSize.aboutToBeDeleted(); 1437 this.__buttonItemsPosition.aboutToBeDeleted(); 1438 this.__focusIndex.aboutToBeDeleted(); 1439 this.__zoomScaleArray.aboutToBeDeleted(); 1440 this.__buttonItemProperty.aboutToBeDeleted(); 1441 this.__buttonItemsSelected.aboutToBeDeleted(); 1442 this.__pressArray.aboutToBeDeleted(); 1443 this.__hoverArray.aboutToBeDeleted(); 1444 this.__hoverColorArray.aboutToBeDeleted(); 1445 this.__maxFontScale.aboutToBeDeleted(); 1446 this.__buttonWidth.aboutToBeDeleted(); 1447 this.__buttonHeight.aboutToBeDeleted(); 1448 this.__isMarqueeAndFadeout.aboutToBeDeleted(); 1449 this.__isSegmentFocusStyleCustomized.aboutToBeDeleted(); 1450 SubscriberManager.Get().delete(this.id__()); 1451 this.aboutToBeDeletedInternal(); 1452 } 1453 get optionsArray() { 1454 return this.__optionsArray.get(); 1455 } 1456 get options() { 1457 return this.__options.get(); 1458 } 1459 get selectedIndexes() { 1460 return this.__selectedIndexes.get(); 1461 } 1462 set selectedIndexes(newValue) { 1463 this.__selectedIndexes.set(newValue); 1464 } 1465 get componentSize() { 1466 return this.__componentSize.get(); 1467 } 1468 set componentSize(newValue) { 1469 this.__componentSize.set(newValue); 1470 } 1471 get buttonBorderRadius() { 1472 return this.__buttonBorderRadius.get(); 1473 } 1474 set buttonBorderRadius(newValue) { 1475 this.__buttonBorderRadius.set(newValue); 1476 } 1477 get buttonItemsSize() { 1478 return this.__buttonItemsSize.get(); 1479 } 1480 set buttonItemsSize(newValue) { 1481 this.__buttonItemsSize.set(newValue); 1482 } 1483 get buttonItemsPosition() { 1484 return this.__buttonItemsPosition.get(); 1485 } 1486 set buttonItemsPosition(newValue) { 1487 this.__buttonItemsPosition.set(newValue); 1488 } 1489 get focusIndex() { 1490 return this.__focusIndex.get(); 1491 } 1492 set focusIndex(newValue) { 1493 this.__focusIndex.set(newValue); 1494 } 1495 get zoomScaleArray() { 1496 return this.__zoomScaleArray.get(); 1497 } 1498 set zoomScaleArray(newValue) { 1499 this.__zoomScaleArray.set(newValue); 1500 } 1501 get buttonItemProperty() { 1502 return this.__buttonItemProperty.get(); 1503 } 1504 set buttonItemProperty(newValue) { 1505 this.__buttonItemProperty.set(newValue); 1506 } 1507 get buttonItemsSelected() { 1508 return this.__buttonItemsSelected.get(); 1509 } 1510 set buttonItemsSelected(newValue) { 1511 this.__buttonItemsSelected.set(newValue); 1512 } 1513 get pressArray() { 1514 return this.__pressArray.get(); 1515 } 1516 set pressArray(newValue) { 1517 this.__pressArray.set(newValue); 1518 } 1519 get hoverArray() { 1520 return this.__hoverArray.get(); 1521 } 1522 set hoverArray(newValue) { 1523 this.__hoverArray.set(newValue); 1524 } 1525 get hoverColorArray() { 1526 return this.__hoverColorArray.get(); 1527 } 1528 set hoverColorArray(newValue) { 1529 this.__hoverColorArray.set(newValue); 1530 } 1531 get maxFontScale() { 1532 return this.__maxFontScale.get(); 1533 } 1534 set maxFontScale(newValue) { 1535 this.__maxFontScale.set(newValue); 1536 } 1537 get buttonWidth() { 1538 return this.__buttonWidth.get(); 1539 } 1540 set buttonWidth(newValue) { 1541 this.__buttonWidth.set(newValue); 1542 } 1543 get buttonHeight() { 1544 return this.__buttonHeight.get(); 1545 } 1546 set buttonHeight(newValue) { 1547 this.__buttonHeight.set(newValue); 1548 } 1549 get isMarqueeAndFadeout() { 1550 return this.__isMarqueeAndFadeout.get(); 1551 } 1552 set isMarqueeAndFadeout(newValue) { 1553 this.__isMarqueeAndFadeout.set(newValue); 1554 } 1555 get isSegmentFocusStyleCustomized() { 1556 return this.__isSegmentFocusStyleCustomized.get(); 1557 } 1558 set isSegmentFocusStyleCustomized(newValue) { 1559 this.__isSegmentFocusStyleCustomized.set(newValue); 1560 } 1561 onButtonItemsSizeChange() { 1562 this.buttonItemsSize.forEach((value, index) => { 1563 this.buttonWidth[index] = value.width; 1564 this.buttonHeight[index] = value.height; 1565 }); 1566 } 1567 changeSelectedIndexes(buttonsLength) { 1568 if ( 1569 this.optionsArray.changeStartIndex === void 0 || 1570 this.optionsArray.deleteCount === void 0 || 1571 this.optionsArray.addLength === void 0 1572 ) { 1573 return; 1574 } 1575 if (!(this.options.multiply ?? false)) { 1576 // Single-select 1577 if (this.selectedIndexes[0] === void 0) { 1578 return; 1579 } 1580 if (this.selectedIndexes[0] < this.optionsArray.changeStartIndex) { 1581 return; 1582 } 1583 if (this.optionsArray.changeStartIndex + this.optionsArray.deleteCount > this.selectedIndexes[0]) { 1584 if (this.options.type === 'tab') { 1585 this.selectedIndexes[0] = 0; 1586 } else if (this.options.type === 'capsule') { 1587 this.selectedIndexes = []; 1588 } 1589 } else { 1590 this.selectedIndexes[0] = this.selectedIndexes[0] - this.optionsArray.deleteCount + this.optionsArray.addLength; 1591 } 1592 } else { 1593 // Multi-select 1594 let saveIndexes = this.selectedIndexes; 1595 for (let i = 0; i < this.optionsArray.deleteCount; i++) { 1596 let deleteIndex = saveIndexes.indexOf(this.optionsArray.changeStartIndex); 1597 let indexes = saveIndexes.map((value) => 1598 this.optionsArray.changeStartIndex && value > this.optionsArray.changeStartIndex ? value - 1 : value 1599 ); 1600 if (deleteIndex !== -1) { 1601 indexes.splice(deleteIndex, 1); 1602 } 1603 saveIndexes = indexes; 1604 } 1605 for (let i = 0; i < this.optionsArray.addLength; i++) { 1606 let indexes = saveIndexes.map((value) => 1607 this.optionsArray.changeStartIndex && value >= this.optionsArray.changeStartIndex ? value + 1 : value 1608 ); 1609 saveIndexes = indexes; 1610 } 1611 this.selectedIndexes = saveIndexes; 1612 } 1613 } 1614 changeFocusIndex(buttonsLength) { 1615 if ( 1616 this.optionsArray.changeStartIndex === void 0 || 1617 this.optionsArray.deleteCount === void 0 || 1618 this.optionsArray.addLength === void 0 1619 ) { 1620 return; 1621 } 1622 if (this.focusIndex === -1) { 1623 return; 1624 } 1625 if (this.focusIndex < this.optionsArray.changeStartIndex) { 1626 return; 1627 } 1628 if (this.optionsArray.changeStartIndex + this.optionsArray.deleteCount > this.focusIndex) { 1629 this.focusIndex = 0; 1630 } else { 1631 this.focusIndex = this.focusIndex - this.optionsArray.deleteCount + this.optionsArray.addLength; 1632 } 1633 } 1634 onOptionsArrayChange() { 1635 if (this.options === void 0 || this.options.buttons === void 0) { 1636 return; 1637 } 1638 let buttonsLength = Math.min(this.options.buttons.length, this.buttonItemsSize.length); 1639 if ( 1640 this.optionsArray.changeStartIndex !== void 0 && 1641 this.optionsArray.deleteCount !== void 0 && 1642 this.optionsArray.addLength !== void 0 1643 ) { 1644 this.changeSelectedIndexes(buttonsLength); 1645 this.changeFocusIndex(buttonsLength); 1646 this.optionsArray.changeStartIndex = void 0; 1647 this.optionsArray.deleteCount = void 0; 1648 this.optionsArray.addLength = void 0; 1649 } 1650 } 1651 onOptionsChange() { 1652 if (this.options === void 0 || this.options.buttons === void 0) { 1653 return; 1654 } 1655 this.calculateBorderRadius(); 1656 } 1657 onFocusIndex() { 1658 this.isMarqueeAndFadeout = this.isSegmentFocusStyleCustomized && !this.isMarqueeAndFadeout; 1659 } 1660 aboutToAppear() { 1661 for (let index = 0; index < this.buttonItemsRealHeight.length; index++) { 1662 this.buttonItemsRealHeight[index] = 0; 1663 } 1664 } 1665 getBorderRadius(index) { 1666 let borderRadius = this.buttonBorderRadius[index]; 1667 if (this.options.type === 'capsule' && this.buttonItemsSelected[this.focusIndex]) { 1668 return { 1669 topStart: LengthMetrics.vp((borderRadius.topStart?.value ?? 0) + 4), 1670 topEnd: LengthMetrics.vp((borderRadius.topEnd?.value ?? 0) + 4), 1671 bottomStart: LengthMetrics.vp((borderRadius.bottomStart?.value ?? 0) + 4), 1672 bottomEnd: LengthMetrics.vp((borderRadius.bottomEnd?.value ?? 0) + 4), 1673 }; 1674 } 1675 return borderRadius; 1676 } 1677 focusStack(index, parent = null) { 1678 this.observeComponentCreation2((elmtId, isInitialRender) => { 1679 Stack.create(); 1680 Stack.direction(this.options.direction); 1681 Stack.size({ width: 1, height: 1 }); 1682 Stack.align(Alignment.Center); 1683 }, Stack); 1684 this.observeComponentCreation2((elmtId, isInitialRender) => { 1685 Stack.create(); 1686 Stack.direction(this.options.direction); 1687 Stack.borderRadius(this.getBorderRadius(index)); 1688 Stack.size({ 1689 width: 1690 this.options.type === 'capsule' && this.buttonItemsSelected[this.focusIndex] 1691 ? this.buttonWidth[index] + 8 1692 : this.buttonWidth[index], 1693 height: 1694 this.options.type === 'capsule' && this.buttonItemsSelected[this.focusIndex] 1695 ? this.buttonHeight[index] + 8 1696 : this.buttonHeight[index], 1697 }); 1698 Stack.borderColor(segmentButtonTheme.FOCUS_BORDER_COLOR); 1699 Stack.borderWidth(2); 1700 }, Stack); 1701 Stack.pop(); 1702 Stack.pop(); 1703 } 1704 calculateBorderRadius() { 1705 let borderRadiusArray = Array.from( 1706 { 1707 length: MAX_ITEM_COUNT, 1708 }, 1709 (_, index) => { 1710 return { 1711 topStart: LengthMetrics.vp(0), 1712 topEnd: LengthMetrics.vp(0), 1713 bottomStart: LengthMetrics.vp(0), 1714 bottomEnd: LengthMetrics.vp(0), 1715 }; 1716 } 1717 ); 1718 for (let index = 0; index < this.buttonBorderRadius.length; index++) { 1719 let halfButtonItemsSizeHeight = this.buttonItemsSize[index].height / 2; 1720 if (this.options.type === 'tab' || !(this.options.multiply ?? false)) { 1721 borderRadiusArray[index].topStart = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight); 1722 borderRadiusArray[index].topEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight); 1723 borderRadiusArray[index].bottomStart = LengthMetrics.vp( 1724 this.options.iconTextRadius ?? halfButtonItemsSizeHeight 1725 ); 1726 borderRadiusArray[index].bottomEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight); 1727 } else { 1728 if (index === 0) { 1729 borderRadiusArray[index].topStart = LengthMetrics.vp( 1730 this.options.iconTextRadius ?? halfButtonItemsSizeHeight 1731 ); 1732 borderRadiusArray[index].topEnd = LengthMetrics.vp(0); 1733 borderRadiusArray[index].bottomStart = LengthMetrics.vp( 1734 this.options.iconTextRadius ?? halfButtonItemsSizeHeight 1735 ); 1736 borderRadiusArray[index].bottomEnd = LengthMetrics.vp(0); 1737 } else if ( 1738 this.options.buttons && 1739 index === Math.min(this.options.buttons.length, this.buttonItemsSize.length) - 1 1740 ) { 1741 borderRadiusArray[index].topStart = LengthMetrics.vp(0); 1742 borderRadiusArray[index].topEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight); 1743 borderRadiusArray[index].bottomStart = LengthMetrics.vp(0); 1744 borderRadiusArray[index].bottomEnd = LengthMetrics.vp( 1745 this.options.iconTextRadius ?? halfButtonItemsSizeHeight 1746 ); 1747 } else { 1748 borderRadiusArray[index].topStart = LengthMetrics.vp(0); 1749 borderRadiusArray[index].topEnd = LengthMetrics.vp(0); 1750 borderRadiusArray[index].bottomStart = LengthMetrics.vp(0); 1751 borderRadiusArray[index].bottomEnd = LengthMetrics.vp(0); 1752 } 1753 } 1754 } 1755 this.buttonBorderRadius = borderRadiusArray; 1756 } 1757 getAccessibilityDescription(value) { 1758 return typeof value !== undefined ? value : undefined; 1759 } 1760 isDefaultSelectedBgColor() { 1761 if (this.options.type === 'tab') { 1762 return this.options.selectedBackgroundColor === segmentButtonTheme.TAB_SELECTED_BACKGROUND_COLOR; 1763 } else if (this.options.type === 'capsule') { 1764 return this.options.selectedBackgroundColor === segmentButtonTheme.CAPSULE_SELECTED_BACKGROUND_COLOR; 1765 } 1766 return true; 1767 } 1768 initialRender() { 1769 this.observeComponentCreation2((elmtId, isInitialRender) => { 1770 If.create(); 1771 if (this.optionsArray !== void 0 && this.optionsArray.length > 1) { 1772 this.ifElseBranchUpdateFunction(0, () => { 1773 this.observeComponentCreation2((elmtId, isInitialRender) => { 1774 Row.create({ space: 1 }); 1775 Row.direction(this.options.direction); 1776 Row.focusScopeId(this.groupId, true); 1777 Row.padding(this.options.componentPadding); 1778 Row.onSizeChange((_, newValue) => { 1779 this.componentSize = { width: newValue.width, height: newValue.height }; 1780 }); 1781 }, Row); 1782 this.observeComponentCreation2((elmtId, isInitialRender) => { 1783 ForEach.create(); 1784 const forEachItemGenFunction = (_item, index) => { 1785 const item = _item; 1786 this.observeComponentCreation2((elmtId, isInitialRender) => { 1787 If.create(); 1788 if (index < MAX_ITEM_COUNT) { 1789 this.ifElseBranchUpdateFunction(0, () => { 1790 this.observeComponentCreation2((elmtId, isInitialRender) => { 1791 Button.createWithChild(); 1792 Button.type(ButtonType.Normal); 1793 Button.stateEffect(false); 1794 Button.hoverEffect(HoverEffect.None); 1795 Button.backgroundColor(Color.Transparent); 1796 Button.accessibilityLevel(item.accessibilityLevel); 1797 Button.accessibilitySelected( 1798 this.options.multiply ? undefined : this.selectedIndexes.includes(index) 1799 ); 1800 Button.accessibilityChecked( 1801 this.options.multiply ? this.selectedIndexes.includes(index) : undefined 1802 ); 1803 Button.accessibilityDescription(this.getAccessibilityDescription(item.accessibilityDescription)); 1804 Button.direction(this.options.direction); 1805 Button.borderRadius(this.buttonBorderRadius[index]); 1806 Button.scale({ 1807 x: 1808 this.options.type === 'capsule' && (this.options.multiply ?? false) 1809 ? 1 1810 : this.zoomScaleArray[index], 1811 y: 1812 this.options.type === 'capsule' && (this.options.multiply ?? false) 1813 ? 1 1814 : this.zoomScaleArray[index], 1815 }); 1816 Button.layoutWeight(1); 1817 Button.padding(0); 1818 Button.onSizeChange((_, newValue) => { 1819 this.buttonItemsSize[index] = { 1820 width: newValue.width, 1821 height: this.buttonItemsSize[index].height, 1822 }; 1823 //measure position 1824 if (newValue.width) { 1825 this.buttonItemsPosition[index] = { 1826 start: LengthMetrics.vp( 1827 Number.parseFloat(this.options.componentPadding.toString()) + 1828 (Number.parseFloat(newValue.width.toString()) + 1) * index 1829 ), 1830 top: LengthMetrics.px( 1831 Math.floor( 1832 this.getUIContext().vp2px(Number.parseFloat(this.options.componentPadding.toString())) 1833 ) 1834 ), 1835 }; 1836 } 1837 }); 1838 ViewStackProcessor.visualState('normal'); 1839 Button.overlay(undefined); 1840 ViewStackProcessor.visualState('focused'); 1841 Button.overlay( 1842 { 1843 builder: () => { 1844 this.focusStack.call(this, index); 1845 }, 1846 }, 1847 { 1848 align: Alignment.Center, 1849 } 1850 ); 1851 ViewStackProcessor.visualState(); 1852 Button.onFocus(() => { 1853 this.focusIndex = index; 1854 if (this.isSegmentFocusStyleCustomized) { 1855 this.customizeSegmentFocusStyle(index); 1856 } 1857 }); 1858 Button.onBlur(() => { 1859 this.focusIndex = -1; 1860 this.hoverColorArray[index].hoverColor = Color.Transparent; 1861 }); 1862 Gesture.create(GesturePriority.Low); 1863 TapGesture.create(); 1864 TapGesture.onAction(() => { 1865 if (this.onItemClicked) { 1866 this.onItemClicked(index); 1867 } 1868 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 1869 if (this.selectedIndexes.indexOf(index) === -1) { 1870 this.selectedIndexes.push(index); 1871 } else { 1872 this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1); 1873 } 1874 } else { 1875 this.selectedIndexes[0] = index; 1876 } 1877 }); 1878 TapGesture.pop(); 1879 Gesture.pop(); 1880 Button.onTouch((event) => { 1881 if (this.isSegmentFocusStyleCustomized) { 1882 this.getUIContext().getFocusController().clearFocus(); 1883 } 1884 if (event.source !== SourceType.TouchScreen) { 1885 return; 1886 } 1887 if (event.type === TouchType.Down) { 1888 Context.animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 1889 this.zoomScaleArray[index] = 0.95; 1890 }); 1891 } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) { 1892 Context.animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 1893 this.zoomScaleArray[index] = 1; 1894 }); 1895 } 1896 }); 1897 Button.onHover((isHover) => { 1898 this.hoverArray[index] = isHover; 1899 if (isHover) { 1900 Context.animateTo({ duration: 250, curve: Curve.Friction }, () => { 1901 this.hoverColorArray[index].hoverColor = 1902 this.isSegmentFocusStyleCustomized && this.focusIndex === index 1903 ? segmentButtonTheme.SEGMENT_BUTTON_FOCUS_CUSTOMIZED_BG_COLOR 1904 : segmentButtonTheme.HOVER_COLOR; 1905 }); 1906 } else { 1907 Context.animateTo({ duration: 250, curve: Curve.Friction }, () => { 1908 this.hoverColorArray[index].hoverColor = 1909 this.isSegmentFocusStyleCustomized && this.focusIndex === index 1910 ? segmentButtonTheme.SEGMENT_BUTTON_FOCUS_CUSTOMIZED_BG_COLOR 1911 : Color.Transparent; 1912 }); 1913 } 1914 }); 1915 Button.onMouse((event) => { 1916 switch (event.action) { 1917 case MouseAction.Press: 1918 Context.animateTo({ curve: curves.springMotion(0.347, 0.99) }, () => { 1919 this.zoomScaleArray[index] = 0.95; 1920 }); 1921 Context.animateTo({ duration: 100, curve: Curve.Sharp }, () => { 1922 this.pressArray[index] = true; 1923 }); 1924 break; 1925 case MouseAction.Release: 1926 Context.animateTo({ curve: curves.springMotion(0.347, 0.99) }, () => { 1927 this.zoomScaleArray[index] = 1; 1928 }); 1929 Context.animateTo({ duration: 100, curve: Curve.Sharp }, () => { 1930 this.pressArray[index] = false; 1931 }); 1932 break; 1933 } 1934 }); 1935 }, Button); 1936 this.observeComponentCreation2((elmtId, isInitialRender) => { 1937 __Common__.create(); 1938 __Common__.onSizeChange((_, newValue) => { 1939 // Calculate height of items 1940 this.buttonItemsRealHeight[index] = newValue.height; 1941 let maxHeight = Math.max( 1942 ...this.buttonItemsRealHeight.slice(0, this.options.buttons ? this.options.buttons.length : 0) 1943 ); 1944 for (let index = 0; index < this.buttonItemsSize.length; index++) { 1945 this.buttonItemsSize[index] = { width: this.buttonItemsSize[index].width, height: maxHeight }; 1946 } 1947 this.calculateBorderRadius(); 1948 }); 1949 }, __Common__); 1950 { 1951 this.observeComponentCreation2( 1952 (elmtId, isInitialRender) => { 1953 if (isInitialRender) { 1954 let componentCall = new SegmentButtonItem( 1955 this, 1956 { 1957 isMarqueeAndFadeout: this.isMarqueeAndFadeout, 1958 isSegmentFocusStyleCustomized: this.isSegmentFocusStyleCustomized, 1959 selectedIndexes: this.__selectedIndexes, 1960 focusIndex: this.__focusIndex, 1961 index: index, 1962 itemOptions: item, 1963 options: this.options, 1964 property: this.buttonItemProperty[index], 1965 groupId: this.groupId, 1966 maxFontScale: this.maxFontScale, 1967 hover: this.hoverArray[index], 1968 }, 1969 undefined, 1970 elmtId, 1971 () => {}, 1972 { page: 'library/src/main/ets/components/MainPage.ets', line: 925, col: 15 } 1973 ); 1974 ViewPU.create(componentCall); 1975 let paramsLambda = () => { 1976 return { 1977 isMarqueeAndFadeout: this.isMarqueeAndFadeout, 1978 isSegmentFocusStyleCustomized: this.isSegmentFocusStyleCustomized, 1979 selectedIndexes: this.selectedIndexes, 1980 focusIndex: this.focusIndex, 1981 index: index, 1982 itemOptions: item, 1983 options: this.options, 1984 property: this.buttonItemProperty[index], 1985 groupId: this.groupId, 1986 maxFontScale: this.maxFontScale, 1987 hover: this.hoverArray[index], 1988 }; 1989 }; 1990 componentCall.paramsGenerator_ = paramsLambda; 1991 } else { 1992 this.updateStateVarsOfChildByElmtId(elmtId, { 1993 isMarqueeAndFadeout: this.isMarqueeAndFadeout, 1994 isSegmentFocusStyleCustomized: this.isSegmentFocusStyleCustomized, 1995 index: index, 1996 itemOptions: item, 1997 options: this.options, 1998 property: this.buttonItemProperty[index], 1999 maxFontScale: this.maxFontScale, 2000 hover: this.hoverArray[index], 2001 }); 2002 } 2003 }, 2004 { name: 'SegmentButtonItem' } 2005 ); 2006 } 2007 __Common__.pop(); 2008 Button.pop(); 2009 }); 2010 } else { 2011 this.ifElseBranchUpdateFunction(1, () => {}); 2012 } 2013 }, If); 2014 If.pop(); 2015 }; 2016 this.forEachUpdateFunction(elmtId, this.optionsArray, forEachItemGenFunction, undefined, true, false); 2017 }, ForEach); 2018 ForEach.pop(); 2019 Row.pop(); 2020 }); 2021 } else { 2022 this.ifElseBranchUpdateFunction(1, () => {}); 2023 } 2024 }, If); 2025 If.pop(); 2026 } 2027 /** 2028 * 设置segmentbutton获焦时的样式 2029 * @param index 2030 */ 2031 customizeSegmentFocusStyle(index) { 2032 if (this.selectedIndexes !== void 0 && this.selectedIndexes.length !== 0 && this.selectedIndexes[0] === index) { 2033 // 选中态 2034 this.hoverColorArray[index].hoverColor = this.isDefaultSelectedBgColor() 2035 ? segmentButtonTheme.SEGMENT_BUTTON_FOCUS_CUSTOMIZED_BG_COLOR 2036 : this.options.selectedBackgroundColor; 2037 } else { 2038 // 未选中态 2039 this.hoverColorArray[index].hoverColor = 2040 this.options.backgroundColor === segmentButtonTheme.BACKGROUND_COLOR 2041 ? segmentButtonTheme.SEGMENT_BUTTON_FOCUS_CUSTOMIZED_BG_COLOR 2042 : this.options.backgroundColor; 2043 } 2044 } 2045 rerender() { 2046 this.updateDirtyElements(); 2047 } 2048} 2049let ItemProperty = class ItemProperty { 2050 constructor() { 2051 this.fontColor = segmentButtonTheme.FONT_COLOR; 2052 this.fontSize = segmentButtonTheme.FONT_SIZE; 2053 this.fontWeight = FontWeight.Regular; 2054 this.isSelected = false; 2055 } 2056}; 2057ItemProperty = __decorate([Observed], ItemProperty); 2058export class SegmentButton extends ViewPU { 2059 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 2060 super(parent, __localStorage, elmtId, extraInfo); 2061 if (typeof paramsLambda === 'function') { 2062 this.paramsGenerator_ = paramsLambda; 2063 } 2064 this.__options = new SynchedPropertyNesedObjectPU(params.options, this, 'options'); 2065 this.__selectedIndexes = new SynchedPropertyObjectTwoWayPU(params.selectedIndexes, this, 'selectedIndexes'); 2066 this.onItemClicked = undefined; 2067 this.__maxFontScale = new SynchedPropertyObjectOneWayPU(params.maxFontScale, this, 'maxFontScale'); 2068 this.__componentSize = new ObservedPropertyObjectPU({ width: 0, height: 0 }, this, 'componentSize'); 2069 this.addProvidedVar('componentSize', this.__componentSize, false); 2070 this.__buttonBorderRadius = new ObservedPropertyObjectPU( 2071 Array.from( 2072 { 2073 length: MAX_ITEM_COUNT, 2074 }, 2075 (_, index) => { 2076 return { 2077 topStart: LengthMetrics.vp(0), 2078 topEnd: LengthMetrics.vp(0), 2079 bottomStart: LengthMetrics.vp(0), 2080 bottomEnd: LengthMetrics.vp(0), 2081 }; 2082 } 2083 ), 2084 this, 2085 'buttonBorderRadius' 2086 ); 2087 this.addProvidedVar('buttonBorderRadius', this.__buttonBorderRadius, false); 2088 this.__buttonItemsSize = new ObservedPropertyObjectPU( 2089 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => { 2090 return {}; 2091 }), 2092 this, 2093 'buttonItemsSize' 2094 ); 2095 this.addProvidedVar('buttonItemsSize', this.__buttonItemsSize, false); 2096 this.__buttonItemsPosition = new ObservedPropertyObjectPU( 2097 Array.from( 2098 { 2099 length: MAX_ITEM_COUNT, 2100 }, 2101 (_, index) => { 2102 return {}; 2103 } 2104 ), 2105 this, 2106 'buttonItemsPosition' 2107 ); 2108 this.addProvidedVar('buttonItemsPosition', this.__buttonItemsPosition, false); 2109 this.__buttonItemsSelected = new ObservedPropertyObjectPU( 2110 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => false), 2111 this, 2112 'buttonItemsSelected' 2113 ); 2114 this.addProvidedVar('buttonItemsSelected', this.__buttonItemsSelected, false); 2115 this.__buttonItemProperty = new ObservedPropertyObjectPU( 2116 Array.from( 2117 { 2118 length: MAX_ITEM_COUNT, 2119 }, 2120 (_, index) => new ItemProperty() 2121 ), 2122 this, 2123 'buttonItemProperty' 2124 ); 2125 this.addProvidedVar('buttonItemProperty', this.__buttonItemProperty, false); 2126 this.__focusIndex = new ObservedPropertySimplePU(-1, this, 'focusIndex'); 2127 this.addProvidedVar('focusIndex', this.__focusIndex, false); 2128 this.__selectedItemPosition = new ObservedPropertyObjectPU({}, this, 'selectedItemPosition'); 2129 this.addProvidedVar('selectedItemPosition', this.__selectedItemPosition, false); 2130 this.__zoomScaleArray = new ObservedPropertyObjectPU( 2131 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => 1.0), 2132 this, 2133 'zoomScaleArray' 2134 ); 2135 this.addProvidedVar('zoomScaleArray', this.__zoomScaleArray, false); 2136 this.__pressArray = new ObservedPropertyObjectPU( 2137 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => false), 2138 this, 2139 'pressArray' 2140 ); 2141 this.__hoverArray = new ObservedPropertyObjectPU( 2142 Array.from({ length: MAX_ITEM_COUNT }, (_, index) => false), 2143 this, 2144 'hoverArray' 2145 ); 2146 this.__hoverColorArray = new ObservedPropertyObjectPU( 2147 Array.from( 2148 { 2149 length: MAX_ITEM_COUNT, 2150 }, 2151 (_, index) => new HoverColorProperty() 2152 ), 2153 this, 2154 'hoverColorArray' 2155 ); 2156 this.doSelectedChangeAnimate = false; 2157 this.isCurrentPositionSelected = false; 2158 this.panGestureStartPoint = { x: 0, y: 0 }; 2159 this.isPanGestureMoved = false; 2160 this.__shouldMirror = new ObservedPropertySimplePU(false, this, 'shouldMirror'); 2161 this.isSegmentFocusStyleCustomized = 2162 resourceToNumber( 2163 this.getUIContext()?.getHostContext(), 2164 segmentButtonTheme.SEGMENT_FOCUS_STYLE_CUSTOMIZED, 2165 1.0 2166 ) === 0.0; 2167 this.isGestureInProgress = false; 2168 this.setInitiallyProvidedValue(params); 2169 this.declareWatch('options', this.onOptionsChange); 2170 this.declareWatch('selectedIndexes', this.onSelectedChange); 2171 this.declareWatch('buttonItemsPosition', this.onItemsPositionChange); 2172 this.finalizeConstruction(); 2173 } 2174 setInitiallyProvidedValue(params) { 2175 this.__options.set(params.options); 2176 if (params.onItemClicked !== undefined) { 2177 this.onItemClicked = params.onItemClicked; 2178 } 2179 if (params.maxFontScale === undefined) { 2180 this.__maxFontScale.set(DEFAULT_MAX_FONT_SCALE); 2181 } 2182 if (params.componentSize !== undefined) { 2183 this.componentSize = params.componentSize; 2184 } 2185 if (params.buttonBorderRadius !== undefined) { 2186 this.buttonBorderRadius = params.buttonBorderRadius; 2187 } 2188 if (params.buttonItemsSize !== undefined) { 2189 this.buttonItemsSize = params.buttonItemsSize; 2190 } 2191 if (params.buttonItemsPosition !== undefined) { 2192 this.buttonItemsPosition = params.buttonItemsPosition; 2193 } 2194 if (params.buttonItemsSelected !== undefined) { 2195 this.buttonItemsSelected = params.buttonItemsSelected; 2196 } 2197 if (params.buttonItemProperty !== undefined) { 2198 this.buttonItemProperty = params.buttonItemProperty; 2199 } 2200 if (params.focusIndex !== undefined) { 2201 this.focusIndex = params.focusIndex; 2202 } 2203 if (params.selectedItemPosition !== undefined) { 2204 this.selectedItemPosition = params.selectedItemPosition; 2205 } 2206 if (params.zoomScaleArray !== undefined) { 2207 this.zoomScaleArray = params.zoomScaleArray; 2208 } 2209 if (params.pressArray !== undefined) { 2210 this.pressArray = params.pressArray; 2211 } 2212 if (params.hoverArray !== undefined) { 2213 this.hoverArray = params.hoverArray; 2214 } 2215 if (params.hoverColorArray !== undefined) { 2216 this.hoverColorArray = params.hoverColorArray; 2217 } 2218 if (params.doSelectedChangeAnimate !== undefined) { 2219 this.doSelectedChangeAnimate = params.doSelectedChangeAnimate; 2220 } 2221 if (params.isCurrentPositionSelected !== undefined) { 2222 this.isCurrentPositionSelected = params.isCurrentPositionSelected; 2223 } 2224 if (params.panGestureStartPoint !== undefined) { 2225 this.panGestureStartPoint = params.panGestureStartPoint; 2226 } 2227 if (params.isPanGestureMoved !== undefined) { 2228 this.isPanGestureMoved = params.isPanGestureMoved; 2229 } 2230 if (params.shouldMirror !== undefined) { 2231 this.shouldMirror = params.shouldMirror; 2232 } 2233 if (params.isSegmentFocusStyleCustomized !== undefined) { 2234 this.isSegmentFocusStyleCustomized = params.isSegmentFocusStyleCustomized; 2235 } 2236 if (params.isGestureInProgress !== undefined) { 2237 this.isGestureInProgress = params.isGestureInProgress; 2238 } 2239 } 2240 updateStateVars(params) { 2241 this.__options.set(params.options); 2242 this.__maxFontScale.reset(params.maxFontScale); 2243 } 2244 purgeVariableDependenciesOnElmtId(rmElmtId) { 2245 this.__options.purgeDependencyOnElmtId(rmElmtId); 2246 this.__selectedIndexes.purgeDependencyOnElmtId(rmElmtId); 2247 this.__maxFontScale.purgeDependencyOnElmtId(rmElmtId); 2248 this.__componentSize.purgeDependencyOnElmtId(rmElmtId); 2249 this.__buttonBorderRadius.purgeDependencyOnElmtId(rmElmtId); 2250 this.__buttonItemsSize.purgeDependencyOnElmtId(rmElmtId); 2251 this.__buttonItemsPosition.purgeDependencyOnElmtId(rmElmtId); 2252 this.__buttonItemsSelected.purgeDependencyOnElmtId(rmElmtId); 2253 this.__buttonItemProperty.purgeDependencyOnElmtId(rmElmtId); 2254 this.__focusIndex.purgeDependencyOnElmtId(rmElmtId); 2255 this.__selectedItemPosition.purgeDependencyOnElmtId(rmElmtId); 2256 this.__zoomScaleArray.purgeDependencyOnElmtId(rmElmtId); 2257 this.__pressArray.purgeDependencyOnElmtId(rmElmtId); 2258 this.__hoverArray.purgeDependencyOnElmtId(rmElmtId); 2259 this.__hoverColorArray.purgeDependencyOnElmtId(rmElmtId); 2260 this.__shouldMirror.purgeDependencyOnElmtId(rmElmtId); 2261 } 2262 aboutToBeDeleted() { 2263 this.__options.aboutToBeDeleted(); 2264 this.__selectedIndexes.aboutToBeDeleted(); 2265 this.__maxFontScale.aboutToBeDeleted(); 2266 this.__componentSize.aboutToBeDeleted(); 2267 this.__buttonBorderRadius.aboutToBeDeleted(); 2268 this.__buttonItemsSize.aboutToBeDeleted(); 2269 this.__buttonItemsPosition.aboutToBeDeleted(); 2270 this.__buttonItemsSelected.aboutToBeDeleted(); 2271 this.__buttonItemProperty.aboutToBeDeleted(); 2272 this.__focusIndex.aboutToBeDeleted(); 2273 this.__selectedItemPosition.aboutToBeDeleted(); 2274 this.__zoomScaleArray.aboutToBeDeleted(); 2275 this.__pressArray.aboutToBeDeleted(); 2276 this.__hoverArray.aboutToBeDeleted(); 2277 this.__hoverColorArray.aboutToBeDeleted(); 2278 this.__shouldMirror.aboutToBeDeleted(); 2279 SubscriberManager.Get().delete(this.id__()); 2280 this.aboutToBeDeletedInternal(); 2281 } 2282 get options() { 2283 return this.__options.get(); 2284 } 2285 get selectedIndexes() { 2286 return this.__selectedIndexes.get(); 2287 } 2288 set selectedIndexes(newValue) { 2289 this.__selectedIndexes.set(newValue); 2290 } 2291 get maxFontScale() { 2292 return this.__maxFontScale.get(); 2293 } 2294 set maxFontScale(newValue) { 2295 this.__maxFontScale.set(newValue); 2296 } 2297 get componentSize() { 2298 return this.__componentSize.get(); 2299 } 2300 set componentSize(newValue) { 2301 this.__componentSize.set(newValue); 2302 } 2303 get buttonBorderRadius() { 2304 return this.__buttonBorderRadius.get(); 2305 } 2306 set buttonBorderRadius(newValue) { 2307 this.__buttonBorderRadius.set(newValue); 2308 } 2309 get buttonItemsSize() { 2310 return this.__buttonItemsSize.get(); 2311 } 2312 set buttonItemsSize(newValue) { 2313 this.__buttonItemsSize.set(newValue); 2314 } 2315 get buttonItemsPosition() { 2316 return this.__buttonItemsPosition.get(); 2317 } 2318 set buttonItemsPosition(newValue) { 2319 this.__buttonItemsPosition.set(newValue); 2320 } 2321 get buttonItemsSelected() { 2322 return this.__buttonItemsSelected.get(); 2323 } 2324 set buttonItemsSelected(newValue) { 2325 this.__buttonItemsSelected.set(newValue); 2326 } 2327 get buttonItemProperty() { 2328 return this.__buttonItemProperty.get(); 2329 } 2330 set buttonItemProperty(newValue) { 2331 this.__buttonItemProperty.set(newValue); 2332 } 2333 get focusIndex() { 2334 return this.__focusIndex.get(); 2335 } 2336 set focusIndex(newValue) { 2337 this.__focusIndex.set(newValue); 2338 } 2339 get selectedItemPosition() { 2340 return this.__selectedItemPosition.get(); 2341 } 2342 set selectedItemPosition(newValue) { 2343 this.__selectedItemPosition.set(newValue); 2344 } 2345 get zoomScaleArray() { 2346 return this.__zoomScaleArray.get(); 2347 } 2348 set zoomScaleArray(newValue) { 2349 this.__zoomScaleArray.set(newValue); 2350 } 2351 get pressArray() { 2352 return this.__pressArray.get(); 2353 } 2354 set pressArray(newValue) { 2355 this.__pressArray.set(newValue); 2356 } 2357 get hoverArray() { 2358 return this.__hoverArray.get(); 2359 } 2360 set hoverArray(newValue) { 2361 this.__hoverArray.set(newValue); 2362 } 2363 get hoverColorArray() { 2364 return this.__hoverColorArray.get(); 2365 } 2366 set hoverColorArray(newValue) { 2367 this.__hoverColorArray.set(newValue); 2368 } 2369 get shouldMirror() { 2370 return this.__shouldMirror.get(); 2371 } 2372 set shouldMirror(newValue) { 2373 this.__shouldMirror.set(newValue); 2374 } 2375 onItemsPositionChange() { 2376 if (this.options === void 0 || this.options.buttons === void 0) { 2377 return; 2378 } 2379 if (this.options.type === 'capsule') { 2380 this.options.onButtonsUpdated(); 2381 } 2382 if (this.doSelectedChangeAnimate) { 2383 this.updateAnimatedProperty(this.getSelectedChangeCurve()); 2384 } else { 2385 this.updateAnimatedProperty(null); 2386 } 2387 } 2388 setItemsSelected() { 2389 this.buttonItemsSelected.forEach((_, index) => { 2390 this.buttonItemsSelected[index] = false; 2391 }); 2392 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2393 this.selectedIndexes.forEach((index) => (this.buttonItemsSelected[index] = true)); 2394 } else { 2395 this.buttonItemsSelected[this.selectedIndexes[0]] = true; 2396 } 2397 } 2398 updateSelectedIndexes() { 2399 if (this.selectedIndexes === void 0) { 2400 this.selectedIndexes = []; 2401 } 2402 if (this.options.type === 'tab' && this.selectedIndexes.length === 0) { 2403 this.selectedIndexes[0] = 0; 2404 } 2405 if (this.selectedIndexes.length > 1) { 2406 if (this.options.type === 'tab') { 2407 this.selectedIndexes = [0]; 2408 } 2409 if (this.options.type === 'capsule' && !(this.options.multiply ?? false)) { 2410 this.selectedIndexes = []; 2411 } 2412 } 2413 let invalid = this.selectedIndexes.some((index) => { 2414 return index === void 0 || index < 0 || (this.options.buttons && index >= this.options.buttons.length); 2415 }); 2416 if (invalid) { 2417 if (this.options.type === 'tab') { 2418 this.selectedIndexes = [0]; 2419 } else { 2420 this.selectedIndexes = []; 2421 } 2422 } 2423 } 2424 onOptionsChange() { 2425 if (this.options === void 0 || this.options.buttons === void 0) { 2426 return; 2427 } 2428 this.shouldMirror = this.isShouldMirror(); 2429 this.updateSelectedIndexes(); 2430 this.setItemsSelected(); 2431 this.updateAnimatedProperty(null); 2432 } 2433 onSelectedChange() { 2434 if (this.options === void 0 || this.options.buttons === void 0) { 2435 return; 2436 } 2437 this.updateSelectedIndexes(); 2438 this.setItemsSelected(); 2439 if (this.doSelectedChangeAnimate) { 2440 this.updateAnimatedProperty(this.getSelectedChangeCurve()); 2441 } else { 2442 this.updateAnimatedProperty(null); 2443 } 2444 } 2445 aboutToAppear() { 2446 if (this.options === void 0 || this.options.buttons === void 0) { 2447 return; 2448 } 2449 this.options.onButtonsChange = () => { 2450 if (this.options.type === 'tab') { 2451 this.selectedIndexes = [0]; 2452 } else { 2453 this.selectedIndexes = []; 2454 } 2455 }; 2456 this.shouldMirror = this.isShouldMirror(); 2457 this.updateSelectedIndexes(); 2458 this.setItemsSelected(); 2459 this.updateAnimatedProperty(null); 2460 } 2461 isMouseWheelScroll(event) { 2462 return event.source === SourceType.Mouse && !this.isPanGestureMoved; 2463 } 2464 isMovedFromPanGestureStartPoint(x, y) { 2465 return !nearEqual(x, this.panGestureStartPoint.x) || !nearEqual(y, this.panGestureStartPoint.y); 2466 } 2467 isShouldMirror() { 2468 if (this.options.direction == Direction.Rtl) { 2469 return true; 2470 } 2471 // 获取系统语言 2472 try { 2473 let systemLanguage = I18n.System.getSystemLanguage(); 2474 if (I18n.isRTL(systemLanguage) && this.options.direction != Direction.Ltr) { 2475 return true; 2476 } 2477 } catch (error) { 2478 console.error(`Ace SegmentButton getSystemLanguage, error: ${error.toString()}`); 2479 } 2480 return false; 2481 } 2482 initialRender() { 2483 this.observeComponentCreation2((elmtId, isInitialRender) => { 2484 Stack.create(); 2485 Stack.direction(this.options ? this.options.direction : undefined); 2486 Stack.onBlur(() => { 2487 this.focusIndex = -1; 2488 }); 2489 Stack.onKeyEvent((event) => { 2490 if (this.options === void 0 || this.options.buttons === void 0) { 2491 return; 2492 } 2493 if (event.type === KeyType.Down) { 2494 if ( 2495 event.keyCode === KeyCode.KEYCODE_SPACE || 2496 event.keyCode === KeyCode.KEYCODE_ENTER || 2497 event.keyCode === KeyCode.KEYCODE_NUMPAD_ENTER 2498 ) { 2499 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2500 if (this.selectedIndexes.indexOf(this.focusIndex) === -1) { 2501 // Select 2502 this.selectedIndexes.push(this.focusIndex); 2503 } else { 2504 // Unselect 2505 this.selectedIndexes.splice(this.selectedIndexes.indexOf(this.focusIndex), 1); 2506 } 2507 } else { 2508 // Pressed 2509 this.selectedIndexes[0] = this.focusIndex; 2510 } 2511 } 2512 } 2513 }); 2514 Stack.accessibilityLevel('no'); 2515 Gesture.create(GesturePriority.High); 2516 GestureGroup.create(GestureMode.Parallel); 2517 TapGesture.create(); 2518 TapGesture.onAction((event) => { 2519 if (this.isGestureInProgress) { 2520 return; 2521 } 2522 let fingerInfo = event.fingerList.find(Boolean); 2523 if (fingerInfo === void 0) { 2524 return; 2525 } 2526 if (this.options === void 0 || this.options.buttons === void 0) { 2527 return; 2528 } 2529 let selectedInfo = fingerInfo.localX; 2530 let buttonLength = Math.min(this.options.buttons.length, this.buttonItemsSize.length); 2531 for (let i = 0; i < buttonLength; i++) { 2532 selectedInfo = selectedInfo - this.buttonItemsSize[i].width; 2533 if (selectedInfo >= 0) { 2534 continue; 2535 } 2536 this.doSelectedChangeAnimate = 2537 this.selectedIndexes[0] > Math.min(this.options.buttons.length, this.buttonItemsSize.length) ? false : true; 2538 let realClickIndex = this.isShouldMirror() ? buttonLength - 1 - i : i; 2539 if (this.onItemClicked) { 2540 this.onItemClicked(realClickIndex); 2541 } 2542 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2543 let selectedIndex = this.selectedIndexes.indexOf(realClickIndex); 2544 if (selectedIndex === -1) { 2545 this.selectedIndexes.push(realClickIndex); 2546 } else { 2547 this.selectedIndexes.splice(selectedIndex, 1); 2548 } 2549 } else { 2550 this.selectedIndexes[0] = realClickIndex; 2551 } 2552 this.doSelectedChangeAnimate = false; 2553 break; 2554 } 2555 }); 2556 TapGesture.pop(); 2557 SwipeGesture.create(); 2558 SwipeGesture.onAction((event) => { 2559 if (this.options === void 0 || this.options.buttons === void 0 || event.sourceTool === SourceTool.TOUCHPAD) { 2560 return; 2561 } 2562 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2563 // Non swipe gesture in multi-select mode 2564 return; 2565 } 2566 if (this.isCurrentPositionSelected) { 2567 return; 2568 } 2569 if ( 2570 Math.abs(event.angle) < 90 && 2571 this.selectedIndexes[0] !== Math.min(this.options.buttons.length, this.buttonItemsSize.length) - 1 2572 ) { 2573 // Move to next 2574 this.doSelectedChangeAnimate = true; 2575 this.selectedIndexes[0] = this.selectedIndexes[0] + 1; 2576 this.doSelectedChangeAnimate = false; 2577 } else if (Math.abs(event.angle) > 90 && this.selectedIndexes[0] !== 0) { 2578 // Move to previous 2579 this.doSelectedChangeAnimate = true; 2580 this.selectedIndexes[0] = this.selectedIndexes[0] - 1; 2581 this.doSelectedChangeAnimate = false; 2582 } 2583 }); 2584 SwipeGesture.pop(); 2585 PanGesture.create(); 2586 PanGesture.onActionStart((event) => { 2587 this.isGestureInProgress = true; 2588 if (this.options === void 0 || this.options.buttons === void 0) { 2589 return; 2590 } 2591 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2592 // Non drag gesture in multi-select mode 2593 return; 2594 } 2595 let fingerInfo = event.fingerList.find(Boolean); 2596 if (fingerInfo === void 0) { 2597 return; 2598 } 2599 let selectedInfo = fingerInfo.localX; 2600 this.panGestureStartPoint = { x: fingerInfo.globalX, y: fingerInfo.globalY }; 2601 this.isPanGestureMoved = false; 2602 for (let i = 0; i < Math.min(this.options.buttons.length, this.buttonItemsSize.length); i++) { 2603 selectedInfo = selectedInfo - this.buttonItemsSize[i].width; 2604 if (selectedInfo < 0) { 2605 this.isCurrentPositionSelected = i === this.selectedIndexes[0] ? true : false; 2606 break; 2607 } 2608 } 2609 }); 2610 PanGesture.onActionUpdate((event) => { 2611 if (this.options === void 0 || this.options.buttons === void 0) { 2612 return; 2613 } 2614 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2615 // Non drag gesture in multi-select mode 2616 return; 2617 } 2618 if (!this.isCurrentPositionSelected) { 2619 return; 2620 } 2621 let fingerInfo = event.fingerList.find(Boolean); 2622 if (fingerInfo === void 0) { 2623 return; 2624 } 2625 let selectedInfo = fingerInfo.localX; 2626 if (!this.isPanGestureMoved && this.isMovedFromPanGestureStartPoint(fingerInfo.globalX, fingerInfo.globalY)) { 2627 this.isPanGestureMoved = true; 2628 } 2629 for (let i = 0; i < Math.min(this.options.buttons.length, this.buttonItemsSize.length); i++) { 2630 selectedInfo = selectedInfo - this.buttonItemsSize[i].width; 2631 if (selectedInfo < 0) { 2632 this.doSelectedChangeAnimate = true; 2633 this.selectedIndexes[0] = i; 2634 this.doSelectedChangeAnimate = false; 2635 break; 2636 } 2637 } 2638 this.zoomScaleArray.forEach((_, index) => { 2639 if (index === this.selectedIndexes[0]) { 2640 Context.animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 2641 this.zoomScaleArray[index] = 0.95; 2642 }); 2643 } else { 2644 Context.animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 2645 this.zoomScaleArray[index] = 1; 2646 }); 2647 } 2648 }); 2649 }); 2650 PanGesture.onActionEnd((event) => { 2651 this.isGestureInProgress = false; 2652 if (this.options === void 0 || this.options.buttons === void 0) { 2653 return; 2654 } 2655 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2656 // Non drag gesture in multi-select mode 2657 return; 2658 } 2659 let fingerInfo = event.fingerList.find(Boolean); 2660 if (fingerInfo === void 0) { 2661 return; 2662 } 2663 if (!this.isPanGestureMoved && this.isMovedFromPanGestureStartPoint(fingerInfo.globalX, fingerInfo.globalY)) { 2664 this.isPanGestureMoved = true; 2665 } 2666 if (this.isMouseWheelScroll(event)) { 2667 let offset = event.offsetX !== 0 ? event.offsetX : event.offsetY; 2668 this.doSelectedChangeAnimate = true; 2669 if (offset > 0 && this.selectedIndexes[0] > 0) { 2670 this.selectedIndexes[0] -= 1; 2671 } else if ( 2672 offset < 0 && 2673 this.selectedIndexes[0] < Math.min(this.options.buttons.length, this.buttonItemsSize.length) - 1 2674 ) { 2675 this.selectedIndexes[0] += 1; 2676 } 2677 this.doSelectedChangeAnimate = false; 2678 } 2679 Context.animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 2680 this.zoomScaleArray[this.selectedIndexes[0]] = 1; 2681 }); 2682 this.isCurrentPositionSelected = false; 2683 }); 2684 PanGesture.onActionCancel(() => { 2685 this.isGestureInProgress = false; 2686 if (this.options === void 0 || this.options.buttons === void 0) { 2687 return; 2688 } 2689 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2690 return; 2691 } 2692 Context.animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => { 2693 this.zoomScaleArray[this.selectedIndexes[0]] = 1; 2694 }); 2695 this.isCurrentPositionSelected = false; 2696 }); 2697 PanGesture.pop(); 2698 GestureGroup.pop(); 2699 Gesture.pop(); 2700 }, Stack); 2701 this.observeComponentCreation2((elmtId, isInitialRender) => { 2702 If.create(); 2703 if (this.options !== void 0 && this.options.buttons != void 0) { 2704 this.ifElseBranchUpdateFunction(0, () => { 2705 this.observeComponentCreation2((elmtId, isInitialRender) => { 2706 If.create(); 2707 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2708 this.ifElseBranchUpdateFunction(0, () => { 2709 { 2710 this.observeComponentCreation2( 2711 (elmtId, isInitialRender) => { 2712 if (isInitialRender) { 2713 let componentCall = new MultiSelectBackground( 2714 this, 2715 { 2716 optionsArray: this.options.buttons, 2717 options: this.options, 2718 }, 2719 undefined, 2720 elmtId, 2721 () => {}, 2722 { page: 'library/src/main/ets/components/MainPage.ets', line: 1267, col: 11 } 2723 ); 2724 ViewPU.create(componentCall); 2725 let paramsLambda = () => { 2726 return { 2727 optionsArray: this.options.buttons, 2728 options: this.options, 2729 }; 2730 }; 2731 componentCall.paramsGenerator_ = paramsLambda; 2732 } else { 2733 this.updateStateVarsOfChildByElmtId(elmtId, { 2734 optionsArray: this.options.buttons, 2735 options: this.options, 2736 }); 2737 } 2738 }, 2739 { name: 'MultiSelectBackground' } 2740 ); 2741 } 2742 }); 2743 } else { 2744 this.ifElseBranchUpdateFunction(1, () => { 2745 this.observeComponentCreation2((elmtId, isInitialRender) => { 2746 Stack.create(); 2747 Stack.direction(this.options.direction); 2748 Stack.size(ObservedObject.GetRawObject(this.componentSize)); 2749 Stack.backgroundColor(this.options.backgroundColor ?? segmentButtonTheme.BACKGROUND_COLOR); 2750 Stack.borderRadius(this.options.iconTextBackgroundRadius ?? this.componentSize.height / 2); 2751 Stack.backgroundBlurStyle(this.options.backgroundBlurStyle); 2752 }, Stack); 2753 this.observeComponentCreation2((elmtId, isInitialRender) => { 2754 If.create(); 2755 if (this.options.buttons !== void 0 && this.options.buttons.length > 1) { 2756 this.ifElseBranchUpdateFunction(0, () => { 2757 { 2758 this.observeComponentCreation2( 2759 (elmtId, isInitialRender) => { 2760 if (isInitialRender) { 2761 let componentCall = new PressAndHoverEffectArray( 2762 this, 2763 { 2764 options: this.options, 2765 buttons: this.options.buttons, 2766 pressArray: this.__pressArray, 2767 hoverArray: this.__hoverArray, 2768 hoverColorArray: this.__hoverColorArray, 2769 }, 2770 undefined, 2771 elmtId, 2772 () => {}, 2773 { page: 'library/src/main/ets/components/MainPage.ets', line: 1274, col: 15 } 2774 ); 2775 ViewPU.create(componentCall); 2776 let paramsLambda = () => { 2777 return { 2778 options: this.options, 2779 buttons: this.options.buttons, 2780 pressArray: this.pressArray, 2781 hoverArray: this.hoverArray, 2782 hoverColorArray: this.hoverColorArray, 2783 }; 2784 }; 2785 componentCall.paramsGenerator_ = paramsLambda; 2786 } else { 2787 this.updateStateVarsOfChildByElmtId(elmtId, { 2788 options: this.options, 2789 buttons: this.options.buttons, 2790 }); 2791 } 2792 }, 2793 { name: 'PressAndHoverEffectArray' } 2794 ); 2795 } 2796 }); 2797 } else { 2798 this.ifElseBranchUpdateFunction(1, () => {}); 2799 } 2800 }, If); 2801 If.pop(); 2802 Stack.pop(); 2803 }); 2804 } 2805 }, If); 2806 If.pop(); 2807 this.observeComponentCreation2((elmtId, isInitialRender) => { 2808 Stack.create(); 2809 Context.animation({ duration: 0 }); 2810 Stack.direction(this.options.direction); 2811 Stack.size(ObservedObject.GetRawObject(this.componentSize)); 2812 Context.animation(null); 2813 Stack.borderRadius( 2814 (this.options.type === 'capsule' && (this.options.multiply ?? false) 2815 ? this.options.iconTextRadius 2816 : this.options.iconTextBackgroundRadius) ?? this.componentSize.height / 2 2817 ); 2818 Stack.clip(true); 2819 }, Stack); 2820 this.observeComponentCreation2((elmtId, isInitialRender) => { 2821 If.create(); 2822 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2823 this.ifElseBranchUpdateFunction(0, () => { 2824 { 2825 this.observeComponentCreation2( 2826 (elmtId, isInitialRender) => { 2827 if (isInitialRender) { 2828 let componentCall = new MultiSelectItemArray( 2829 this, 2830 { 2831 optionsArray: this.options.buttons, 2832 options: this.options, 2833 selectedIndexes: this.__selectedIndexes, 2834 }, 2835 undefined, 2836 elmtId, 2837 () => {}, 2838 { page: 'library/src/main/ets/components/MainPage.ets', line: 1291, col: 13 } 2839 ); 2840 ViewPU.create(componentCall); 2841 let paramsLambda = () => { 2842 return { 2843 optionsArray: this.options.buttons, 2844 options: this.options, 2845 selectedIndexes: this.selectedIndexes, 2846 }; 2847 }; 2848 componentCall.paramsGenerator_ = paramsLambda; 2849 } else { 2850 this.updateStateVarsOfChildByElmtId(elmtId, { 2851 optionsArray: this.options.buttons, 2852 options: this.options, 2853 }); 2854 } 2855 }, 2856 { name: 'MultiSelectItemArray' } 2857 ); 2858 } 2859 }); 2860 } else { 2861 this.ifElseBranchUpdateFunction(1, () => { 2862 { 2863 this.observeComponentCreation2( 2864 (elmtId, isInitialRender) => { 2865 if (isInitialRender) { 2866 let componentCall = new SelectItem( 2867 this, 2868 { 2869 optionsArray: this.options.buttons, 2870 options: this.options, 2871 selectedIndexes: this.__selectedIndexes, 2872 }, 2873 undefined, 2874 elmtId, 2875 () => {}, 2876 { page: 'library/src/main/ets/components/MainPage.ets', line: 1297, col: 13 } 2877 ); 2878 ViewPU.create(componentCall); 2879 let paramsLambda = () => { 2880 return { 2881 optionsArray: this.options.buttons, 2882 options: this.options, 2883 selectedIndexes: this.selectedIndexes, 2884 }; 2885 }; 2886 componentCall.paramsGenerator_ = paramsLambda; 2887 } else { 2888 this.updateStateVarsOfChildByElmtId(elmtId, { 2889 optionsArray: this.options.buttons, 2890 options: this.options, 2891 }); 2892 } 2893 }, 2894 { name: 'SelectItem' } 2895 ); 2896 } 2897 }); 2898 } 2899 }, If); 2900 If.pop(); 2901 Stack.pop(); 2902 { 2903 this.observeComponentCreation2( 2904 (elmtId, isInitialRender) => { 2905 if (isInitialRender) { 2906 let componentCall = new SegmentButtonItemArrayComponent( 2907 this, 2908 { 2909 pressArray: this.__pressArray, 2910 hoverArray: this.__hoverArray, 2911 hoverColorArray: this.__hoverColorArray, 2912 optionsArray: this.options.buttons, 2913 options: this.options, 2914 selectedIndexes: this.__selectedIndexes, 2915 maxFontScale: this.getMaxFontSize(), 2916 onItemClicked: this.onItemClicked, 2917 isSegmentFocusStyleCustomized: this.isSegmentFocusStyleCustomized, 2918 }, 2919 undefined, 2920 elmtId, 2921 () => {}, 2922 { page: 'library/src/main/ets/components/MainPage.ets', line: 1312, col: 9 } 2923 ); 2924 ViewPU.create(componentCall); 2925 let paramsLambda = () => { 2926 return { 2927 pressArray: this.pressArray, 2928 hoverArray: this.hoverArray, 2929 hoverColorArray: this.hoverColorArray, 2930 optionsArray: this.options.buttons, 2931 options: this.options, 2932 selectedIndexes: this.selectedIndexes, 2933 maxFontScale: this.getMaxFontSize(), 2934 onItemClicked: this.onItemClicked, 2935 isSegmentFocusStyleCustomized: this.isSegmentFocusStyleCustomized, 2936 }; 2937 }; 2938 componentCall.paramsGenerator_ = paramsLambda; 2939 } else { 2940 this.updateStateVarsOfChildByElmtId(elmtId, { 2941 optionsArray: this.options.buttons, 2942 options: this.options, 2943 maxFontScale: this.getMaxFontSize(), 2944 isSegmentFocusStyleCustomized: this.isSegmentFocusStyleCustomized, 2945 }); 2946 } 2947 }, 2948 { name: 'SegmentButtonItemArrayComponent' } 2949 ); 2950 } 2951 }); 2952 } else { 2953 this.ifElseBranchUpdateFunction(1, () => {}); 2954 } 2955 }, If); 2956 If.pop(); 2957 Stack.pop(); 2958 } 2959 getMaxFontSize() { 2960 if (typeof this.maxFontScale === void 0) { 2961 return DEFAULT_MAX_FONT_SCALE; 2962 } 2963 if (typeof this.maxFontScale === 'number') { 2964 return Math.max(Math.min(this.maxFontScale, MAX_MAX_FONT_SCALE), MIN_MAX_FONT_SCALE); 2965 } 2966 const resourceManager = this.getUIContext().getHostContext()?.resourceManager; 2967 if (!resourceManager) { 2968 return DEFAULT_MAX_FONT_SCALE; 2969 } 2970 try { 2971 return resourceManager.getNumber(this.maxFontScale.id); 2972 } catch (error) { 2973 console.error(`Ace SegmentButton getMaxFontSize, error: ${error.toString()}`); 2974 return DEFAULT_MAX_FONT_SCALE; 2975 } 2976 } 2977 getSelectedChangeCurve() { 2978 if (this.options.type === 'capsule' && (this.options.multiply ?? false)) { 2979 return null; 2980 } 2981 return curves.springMotion(0.347, 0.99); 2982 } 2983 updateAnimatedProperty(curve) { 2984 let setAnimatedPropertyFunc = () => { 2985 this.selectedItemPosition = 2986 this.selectedIndexes.length === 0 ? {} : this.buttonItemsPosition[this.selectedIndexes[0]]; 2987 this.buttonItemsSelected.forEach((selected, index) => { 2988 this.buttonItemProperty[index].fontColor = selected 2989 ? this.options.selectedFontColor ?? 2990 (this.options.type === 'tab' 2991 ? segmentButtonTheme.TAB_SELECTED_FONT_COLOR 2992 : segmentButtonTheme.CAPSULE_SELECTED_FONT_COLOR) 2993 : this.options.fontColor ?? segmentButtonTheme.FONT_COLOR; 2994 }); 2995 }; 2996 if (curve) { 2997 Context.animateTo({ curve: curve }, setAnimatedPropertyFunc); 2998 } else { 2999 setAnimatedPropertyFunc(); 3000 } 3001 this.buttonItemsSelected.forEach((selected, index) => { 3002 this.buttonItemProperty[index].fontSize = selected 3003 ? this.options.selectedFontSize ?? segmentButtonTheme.SELECTED_FONT_SIZE 3004 : this.options.fontSize ?? segmentButtonTheme.FONT_SIZE; 3005 this.buttonItemProperty[index].fontWeight = selected 3006 ? this.options.selectedFontWeight ?? FontWeight.Medium 3007 : this.options.fontWeight ?? FontWeight.Regular; 3008 this.buttonItemProperty[index].isSelected = selected; 3009 }); 3010 } 3011 rerender() { 3012 this.updateDirtyElements(); 3013 } 3014} 3015function resourceToNumber(context, resource, defaultValue) { 3016 if (!resource || !resource.type || !context) { 3017 console.error('[SegmentButton] failed: resource get fail.'); 3018 return defaultValue; 3019 } 3020 let resourceManager = context?.resourceManager; 3021 if (!resourceManager) { 3022 console.error('[SegmentButton] failed to get resourceManager.'); 3023 return defaultValue; 3024 } 3025 switch (resource.type) { 3026 case RESOURCE_TYPE_FLOAT: 3027 case RESOURCE_TYPE_INTEGER: 3028 try { 3029 if (resource.id !== -1) { 3030 return resourceManager.getNumber(resource); 3031 } 3032 return resourceManager.getNumberByName(resource.params[0].split('.')[2]); 3033 } catch (error) { 3034 console.error(`[SegmentButton] get resource error, return defaultValue`); 3035 return defaultValue; 3036 } 3037 default: 3038 return defaultValue; 3039 } 3040} 3041 3042export default { 3043 SegmentButton, 3044 SegmentButtonOptions, 3045 SegmentButtonItemOptionsArray, 3046 SegmentButtonItemOptions, 3047}; 3048