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