1/* 2 * Copyright (c) 2023-2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16const REFLECT_MAX_COUNT = 3; 17const IMAGE_SIZE_WIDTH_HEIGHT = 24; 18const TEXT_MIN_SIZE = 9; 19const DISABLE_OPACITY = 0.4; 20const TEXT_MAX_LINES = 2; 21const TOOLBAR_LIST_LENGTH = 5; 22const TOOLBAR_LIST_NORMORL = 4; 23const ITEM_DISABLE_STATE = 2; 24const ITEM_DISABLE_ACTIVATE = 3; 25 26let __decorate = this && this.__decorate || function (e, t, o, r) { 27 let s; 28 let i = arguments.length; 29 let a = i < REFLECT_MAX_COUNT ? t : null === r ? r = Object.getOwnPropertyDescriptor(t, o) : r; 30 if ('object' === typeof Reflect && 'function' === typeof Reflect.decorate) { 31 a = Reflect.decorate(e, t, o, r); 32 } else { 33 for (let n = e.length - 1; n >= 0; n--) { 34 (s = e[n]) && (a = (i < REFLECT_MAX_COUNT ? s(a) : i > REFLECT_MAX_COUNT ? s(t, o, a) : s(t, o)) || a); 35 } 36 } 37 return i > REFLECT_MAX_COUNT && a && Object.defineProperty(t, o, a), a; 38}; 39export let ItemState; 40!function(e) { 41 e[e.ENABLE = 1] = 'ENABLE'; 42 e[e.DISABLE = 2] = 'DISABLE'; 43 e[e.ACTIVATE = 3] = 'ACTIVATE'; 44}(ItemState || (ItemState = {})); 45const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAA' + 46 'IGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IAr' + 47 's4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8' + 48 'G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxa' + 49 'm9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIYeQ+8lrJyU+re7Hg' + 50 'JtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpY' + 51 'KTmVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2r' + 52 'e1oP43rNDc6wh1qDS/6t0n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdu' + 53 'sCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF8EUcdfbsAAAAASUVORK5CYII='; 54let ToolBarOption = class { 55 constructor() { 56 this.state = 1; 57 } 58}; 59ToolBarOption = __decorate([Observed], ToolBarOption); 60 61export { ToolBarOption }; 62let ToolBarOptions = class extends Array { 63}; 64ToolBarOptions = __decorate([Observed], ToolBarOptions); 65 66export { ToolBarOptions }; 67 68export class ToolBar extends ViewPU { 69 constructor(e, t, o, r = -1) { 70 super(e, o, r); 71 this.__toolBarList = new SynchedPropertyNesedObjectPU(t.toolBarList, this, 'toolBarList'); 72 this.controller = void 0; 73 this.__activateIndex = new SynchedPropertySimpleOneWayPU(t.activateIndex, this, 'activateIndex'); 74 this.__menuContent = new ObservedPropertyObjectPU([], this, 'menuContent'); 75 this.toolBarItemBackground = []; 76 this.__itemBackground = new ObservedPropertyObjectPU({ 77 id: -1, 78 type: 10001, 79 params: ['sys.color.ohos_id_color_toolbar_bg'], 80 bundleName: '', 81 moduleName: '' 82 }, this, 'itemBackground'); 83 this.setInitiallyProvidedValue(t); 84 } 85 86 setInitiallyProvidedValue(e) { 87 this.__toolBarList.set(e.toolBarList); 88 void 0 !== e.controller && (this.controller = e.controller); 89 void 0 !== e.activateIndex ? this.__activateIndex.set(e.activateIndex) : this.__activateIndex.set(-1); 90 void 0 !== e.menuContent && (this.menuContent = e.menuContent); 91 void 0 !== e.toolBarItemBackground && (this.toolBarItemBackground = e.toolBarItemBackground); 92 void 0 !== e.itemBackground && (this.itemBackground = e.itemBackground); 93 } 94 95 updateStateVars(e) { 96 this.__toolBarList.set(e.toolBarList); 97 this.__activateIndex.reset(e.activateIndex); 98 } 99 100 purgeVariableDependenciesOnElmtId(e) { 101 this.__toolBarList.purgeDependencyOnElmtId(e); 102 this.__activateIndex.purgeDependencyOnElmtId(e); 103 this.__menuContent.purgeDependencyOnElmtId(e); 104 this.__itemBackground.purgeDependencyOnElmtId(e); 105 } 106 107 aboutToBeDeleted() { 108 this.__toolBarList.aboutToBeDeleted(); 109 this.__activateIndex.aboutToBeDeleted(); 110 this.__menuContent.aboutToBeDeleted(); 111 this.__itemBackground.aboutToBeDeleted(); 112 SubscriberManager.Get().delete(this.id__()); 113 this.aboutToBeDeletedInternal(); 114 } 115 116 get toolBarList() { 117 return this.__toolBarList.get(); 118 } 119 120 get activateIndex() { 121 return this.__activateIndex.get(); 122 } 123 124 set activateIndex(e) { 125 this.__activateIndex.set(e); 126 } 127 128 get menuContent() { 129 return this.__menuContent.get(); 130 } 131 132 set menuContent(e) { 133 this.__menuContent.set(e); 134 } 135 136 get itemBackground() { 137 return this.__itemBackground.get(); 138 } 139 140 set itemBackground(e) { 141 this.__itemBackground.set(e); 142 } 143 144 MoreTabBuilder(e, t = null) { 145 this.observeComponentCreation(((e, t) => { 146 ViewStackProcessor.StartGetAccessRecordingFor(e); 147 Column.create(); 148 Column.width('100%'); 149 Column.height('100%'); 150 Column.bindMenu(ObservedObject.GetRawObject(this.menuContent), { offset: { x: 5, y: -10 } }); 151 Column.padding({ left: 4, right: 4 }); 152 Column.borderRadius({ 153 id: -1, 154 type: 10002, 155 params: ['sys.float.ohos_id_corner_radius_clicked'], 156 bundleName: '', 157 moduleName: '' 158 }); 159 t || Column.pop(); 160 ViewStackProcessor.StopGetAccessRecording(); 161 })); 162 this.observeComponentCreation(((e, t) => { 163 ViewStackProcessor.StartGetAccessRecordingFor(e); 164 Image.create(PUBLIC_MORE); 165 Image.width(IMAGE_SIZE_WIDTH_HEIGHT); 166 Image.height(IMAGE_SIZE_WIDTH_HEIGHT); 167 Image.fillColor({ 168 id: -1, 169 type: 10001, 170 params: ['sys.color.ohos_id_color_toolbar_icon'], 171 bundleName: '', 172 moduleName: '' 173 }); 174 Image.margin({ top: 8, bottom: 2 }); 175 Image.objectFit(ImageFit.Contain); 176 t || Image.pop(); 177 ViewStackProcessor.StopGetAccessRecording(); 178 })); 179 this.observeComponentCreation(((e, t) => { 180 ViewStackProcessor.StartGetAccessRecordingFor(e); 181 Text.create({ 182 id: -1, 183 type: 10003, 184 params: ['app.string.id_string_more'], 185 bundleName: '', 186 moduleName: '' 187 }); 188 Text.fontColor({ 189 id: -1, 190 type: 10001, 191 params: ['sys.color.ohos_id_color_toolbar_text'], 192 bundleName: '', 193 moduleName: '' 194 }); 195 Text.fontSize({ 196 id: -1, 197 type: 10002, 198 params: ['sys.float.ohos_id_text_size_caption'], 199 bundleName: '', 200 moduleName: '' 201 }); 202 Text.fontWeight(FontWeight.Medium); 203 t || Text.pop(); 204 ViewStackProcessor.StopGetAccessRecording(); 205 })); 206 Text.pop(); 207 Column.pop(); 208 } 209 210 TabBuilder(e, t = null) { 211 this.observeComponentCreation(((t, o) => { 212 ViewStackProcessor.StartGetAccessRecordingFor(t); 213 Column.create(); 214 Column.width('100%'); 215 Column.height('100%'); 216 Column.focusable(!(ITEM_DISABLE_STATE === this.toolBarList[e].state)); 217 Column.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[e].state)); 218 Column.padding({ left: 4, right: 4 }); 219 Column.borderRadius({ 220 id: -1, 221 type: 10002, 222 params: ['sys.float.ohos_id_corner_radius_clicked'], 223 bundleName: '', 224 moduleName: '' 225 }); 226 Column.backgroundColor(ObservedObject.GetRawObject(this.itemBackground)); 227 Column.onClick((() => { 228 ITEM_DISABLE_ACTIVATE === this.toolBarList[e].state && (this.activateIndex === e ? this.activateIndex = -1 : this.activateIndex = e); 229 ITEM_DISABLE_STATE !== this.toolBarList[e].state && this.toolBarList[e].action && this.toolBarList[e].action(); 230 })); 231 Column.onHover((t => { 232 this.toolBarItemBackground[e] = t ? ITEM_DISABLE_STATE === this.toolBarList[e].state ? { 233 id: -1, 234 type: 10001, 235 params: ['sys.color.ohos_id_color_toolbar_bg'], 236 bundleName: '', 237 moduleName: '' 238 } : { 239 id: -1, 240 type: 10001, 241 params: ['sys.color.ohos_id_color_hover'], 242 bundleName: '', 243 moduleName: '' 244 } : { 245 id: -1, 246 type: 10001, 247 params: ['sys.color.ohos_id_color_toolbar_bg'], 248 bundleName: '', 249 moduleName: '' 250 }; 251 this.itemBackground = this.toolBarItemBackground[e]; 252 })); 253 ViewStackProcessor.visualState('pressed'); 254 Column.backgroundColor(ITEM_DISABLE_STATE === this.toolBarList[e].state ? this.toolBarItemBackground[e] : { 255 id: -1, 256 type: 10001, 257 params: ['sys.color.ohos_id_color_click_effect'], 258 bundleName: '', 259 moduleName: '' 260 }); 261 ViewStackProcessor.visualState('normal'); 262 Column.backgroundColor(this.toolBarItemBackground[e]); 263 ViewStackProcessor.visualState(); 264 o || Column.pop(); 265 ViewStackProcessor.StopGetAccessRecording(); 266 })); 267 this.observeComponentCreation(((t, o) => { 268 ViewStackProcessor.StartGetAccessRecordingFor(t); 269 Image.create(this.toolBarList[e].icon); 270 Image.width(IMAGE_SIZE_WIDTH_HEIGHT); 271 Image.height(IMAGE_SIZE_WIDTH_HEIGHT); 272 Image.fillColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? { 273 id: -1, 274 type: 10001, 275 params: ['sys.color.ohos_id_color_text_primary_activated'], 276 bundleName: '', 277 moduleName: '' 278 } : { 279 id: -1, 280 type: 10001, 281 params: ['sys.color.ohos_id_color_primary'], 282 bundleName: '', 283 moduleName: '' 284 }); 285 Image.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1); 286 Image.margin({ top: 8, bottom: 2 }); 287 Image.objectFit(ImageFit.Contain); 288 o || Image.pop(); 289 ViewStackProcessor.StopGetAccessRecording(); 290 })); 291 this.observeComponentCreation(((t, o) => { 292 ViewStackProcessor.StartGetAccessRecordingFor(t); 293 Text.create(this.toolBarList[e].content); 294 Text.fontColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? { 295 id: -1, 296 type: 10001, 297 params: ['sys.color.ohos_id_color_toolbar_text_actived'], 298 bundleName: '', 299 moduleName: '' 300 } : { 301 id: -1, 302 type: 10001, 303 params: ['sys.color.ohos_id_color_toolbar_text'], 304 bundleName: '', 305 moduleName: '' 306 }); 307 Text.fontSize({ 308 id: -1, 309 type: 10002, 310 params: ['sys.float.ohos_id_text_size_caption'], 311 bundleName: '', 312 moduleName: '' 313 }); 314 Text.maxFontSize({ 315 id: -1, 316 type: 10002, 317 params: ['sys.float.ohos_id_text_size_caption'], 318 bundleName: '', 319 moduleName: '' 320 }); 321 Text.minFontSize(TEXT_MIN_SIZE); 322 Text.fontWeight(FontWeight.Medium); 323 Text.maxLines(TEXT_MAX_LINES); 324 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 325 Text.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1); 326 o || Text.pop(); 327 ViewStackProcessor.StopGetAccessRecording(); 328 })); 329 Text.pop(); 330 Column.pop(); 331 } 332 333 refreshData() { 334 this.menuContent = []; 335 for (let e = 0; e < this.toolBarList.length; e++) { 336 if (e >= TOOLBAR_LIST_NORMORL && this.toolBarList.length > TOOLBAR_LIST_LENGTH) { 337 this.menuContent[e - TOOLBAR_LIST_NORMORL] = { 338 value: this.toolBarList[e].content, 339 action: this.toolBarList[e].action 340 }; 341 } else { 342 this.toolBarItemBackground[e] = { 343 id: -1, 344 type: 10001, 345 params: ['sys.color.ohos_id_color_toolbar_bg'], 346 bundleName: '', 347 moduleName: '' 348 }; 349 this.menuContent = []; 350 } 351 } 352 return !0; 353 } 354 355 aboutToAppear() { 356 this.refreshData(); 357 } 358 359 initialRender() { 360 this.observeComponentCreation(((e, t) => { 361 ViewStackProcessor.StartGetAccessRecordingFor(e); 362 Column.create(); 363 t || Column.pop(); 364 ViewStackProcessor.StopGetAccessRecording(); 365 })); 366 this.observeComponentCreation(((e, t) => { 367 ViewStackProcessor.StartGetAccessRecordingFor(e); 368 Divider.create(); 369 Divider.width('100%'); 370 Divider.height(1); 371 t || Divider.pop(); 372 ViewStackProcessor.StopGetAccessRecording(); 373 })); 374 this.observeComponentCreation(((e, t) => { 375 ViewStackProcessor.StartGetAccessRecordingFor(e); 376 Column.create(); 377 Column.width('100%'); 378 t || Column.pop(); 379 ViewStackProcessor.StopGetAccessRecording(); 380 })); 381 this.observeComponentCreation(((e, t) => { 382 ViewStackProcessor.StartGetAccessRecordingFor(e); 383 Tabs.create({ barPosition: BarPosition.End, controller: this.controller }); 384 Tabs.vertical(!1); 385 Tabs.constraintSize({ minHeight: 56, maxHeight: 56 }); 386 Tabs.barMode(BarMode.Fixed); 387 Tabs.onChange((e => { 388 })); 389 Tabs.width('100%'); 390 Tabs.backgroundColor({ 391 id: -1, 392 type: 10001, 393 params: ['sys.color.ohos_id_color_toolbar_bg'], 394 bundleName: '', 395 moduleName: '' 396 }); 397 t || Tabs.pop(); 398 ViewStackProcessor.StopGetAccessRecording(); 399 })); 400 this.observeComponentCreation(((e, t) => { 401 ViewStackProcessor.StartGetAccessRecordingFor(e); 402 ForEach.create(); 403 this.forEachUpdateFunction(e, this.toolBarList, ((e, t) => { 404 this.observeComponentCreation(((e, o) => { 405 ViewStackProcessor.StartGetAccessRecordingFor(e); 406 If.create(); 407 this.toolBarList.length <= TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => { 408 this.observeComponentCreation(((e, r) => { 409 ViewStackProcessor.StartGetAccessRecordingFor(e); 410 TabContent.create(); 411 TabContent.tabBar({ 412 builder: () => { 413 this.TabBuilder.call(this, t); 414 } 415 }); 416 TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); 417 TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); 418 r || TabContent.pop(); 419 ViewStackProcessor.StopGetAccessRecording(); 420 })); 421 TabContent.pop(); 422 })) : t < TOOLBAR_LIST_NORMORL && this.ifElseBranchUpdateFunction(1, (() => { 423 this.observeComponentCreation(((e, r) => { 424 ViewStackProcessor.StartGetAccessRecordingFor(e); 425 TabContent.create(); 426 TabContent.tabBar({ 427 builder: () => { 428 this.TabBuilder.call(this, t); 429 } 430 }); 431 TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); 432 TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); 433 r || TabContent.pop(); 434 ViewStackProcessor.StopGetAccessRecording(); 435 })); 436 TabContent.pop(); 437 })); 438 r || If.pop(); 439 ViewStackProcessor.StopGetAccessRecording(); 440 })); 441 If.pop(); 442 }), void 0, !0, !1); 443 t || ForEach.pop(); 444 ViewStackProcessor.StopGetAccessRecording(); 445 })); 446 ForEach.pop(); 447 this.observeComponentCreation(((e, t) => { 448 ViewStackProcessor.StartGetAccessRecordingFor(e); 449 If.create(); 450 this.refreshData() && this.toolBarList.length > TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => { 451 this.observeComponentCreation(((e, t) => { 452 ViewStackProcessor.StartGetAccessRecordingFor(e); 453 TabContent.create(); 454 TabContent.tabBar({ 455 builder: () => { 456 this.MoreTabBuilder.call(this, TOOLBAR_LIST_NORMORL); 457 } 458 }); 459 t || TabContent.pop(); 460 ViewStackProcessor.StopGetAccessRecording(); 461 })); 462 TabContent.pop(); 463 })) : If.branchId(1); 464 t || If.pop(); 465 ViewStackProcessor.StopGetAccessRecording(); 466 })); 467 If.pop(); 468 Tabs.pop(); 469 Column.pop(); 470 Column.pop(); 471 } 472 473 rerender() { 474 this.updateDirtyElements(); 475 } 476} 477export default { ToolBarOptions, ToolBar };