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 16var __decorate = this && this.__decorate || function(e, t, o, i) { 17 var s, r = arguments.length, 18 n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; 19 if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i); 20 else 21 for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n); 22 return r > 3 && n && Object.defineProperty(t, o, n), n 23}; 24const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; 25const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuAxhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BICydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdYjJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5HnhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rmj79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKFpD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fNQ1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnXfo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jpyaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jvjACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13uh8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtUtTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXvO9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC"; 26export class TabTitleBar extends ViewPU { 27 constructor(e, t, o, i = -1) { 28 super(e, o, i); 29 this.tabItems = void 0; 30 this.menuItems = void 0; 31 this.swiperContent = void 0; 32 this.__tabWidth = new ObservedPropertySimplePU(0, this, "tabWidth"); 33 this.__currentIndex = new ObservedPropertySimplePU(0, this, "currentIndex"); 34 this.menuSectionWidth = 0; 35 this.scroller = new Scroller; 36 this.swiperController = new SwiperController; 37 this.settings = new RenderingContextSettings(!0); 38 this.leftContext2D = new CanvasRenderingContext2D(this.settings); 39 this.rightContext2D = new CanvasRenderingContext2D(this.settings); 40 this.setInitiallyProvidedValue(t) 41 } 42 setInitiallyProvidedValue(e) { 43 void 0 !== e.tabItems && (this.tabItems = e.tabItems); 44 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 45 void 0 !== e.swiperContent && (this.swiperContent = e.swiperContent); 46 void 0 !== e.tabWidth && (this.tabWidth = e.tabWidth); 47 void 0 !== e.currentIndex && (this.currentIndex = e.currentIndex); 48 void 0 !== e.menuSectionWidth && (this.menuSectionWidth = e.menuSectionWidth); 49 void 0 !== e.scroller && (this.scroller = e.scroller); 50 void 0 !== e.swiperController && (this.swiperController = e.swiperController); 51 void 0 !== e.settings && (this.settings = e.settings); 52 void 0 !== e.leftContext2D && (this.leftContext2D = e.leftContext2D); 53 void 0 !== e.rightContext2D && (this.rightContext2D = e.rightContext2D) 54 } 55 updateStateVars(e) {} 56 purgeVariableDependenciesOnElmtId(e) { 57 this.__tabWidth.purgeDependencyOnElmtId(e); 58 this.__currentIndex.purgeDependencyOnElmtId(e) 59 } 60 aboutToBeDeleted() { 61 this.__tabWidth.aboutToBeDeleted(); 62 this.__currentIndex.aboutToBeDeleted(); 63 SubscriberManager.Get().delete(this.id__()); 64 this.aboutToBeDeletedInternal() 65 } 66 get tabWidth() { 67 return this.__tabWidth.get() 68 } 69 set tabWidth(e) { 70 this.__tabWidth.set(e) 71 } 72 get currentIndex() { 73 return this.__currentIndex.get() 74 } 75 set currentIndex(e) { 76 this.__currentIndex.set(e) 77 } 78 GradientMask(e, t, o, i, s, r = null) { 79 this.observeComponentCreation(((e, t) => { 80 ViewStackProcessor.StartGetAccessRecordingFor(e); 81 Column.create(); 82 Column.width(TabTitleBar.gradientMaskWidth); 83 Column.height(TabTitleBar.totalHeight); 84 t || Column.pop(); 85 ViewStackProcessor.StopGetAccessRecording() 86 })); 87 this.observeComponentCreation(((r, n) => { 88 ViewStackProcessor.StartGetAccessRecordingFor(r); 89 Canvas.create(e); 90 Canvas.width(TabTitleBar.gradientMaskWidth); 91 Canvas.height(TabTitleBar.totalHeight); 92 Canvas.onReady((() => { 93 var r = e.createLinearGradient(t, o, i, s); 94 r.addColorStop(0, "#ffffffff"); 95 r.addColorStop(1, "#00ffffff"); 96 e.fillStyle = r; 97 e.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight) 98 })); 99 n || Canvas.pop(); 100 ViewStackProcessor.StopGetAccessRecording() 101 })); 102 Canvas.pop(); 103 Column.pop() 104 } 105 initialRender() { 106 this.observeComponentCreation(((e, t) => { 107 ViewStackProcessor.StartGetAccessRecordingFor(e); 108 Column.create(); 109 t || Column.pop(); 110 ViewStackProcessor.StopGetAccessRecording() 111 })); 112 this.observeComponentCreation(((e, t) => { 113 ViewStackProcessor.StartGetAccessRecordingFor(e); 114 Flex.create({ 115 justifyContent: FlexAlign.SpaceBetween, 116 alignItems: ItemAlign.Stretch 117 }); 118 Flex.backgroundColor({ 119 id: -1, 120 type: 10001, 121 params: ["sys.color.ohos_id_color_background"], 122 bundleName: "", 123 moduleName: "" 124 }); 125 Flex.margin({ 126 right: { 127 id: -1, 128 type: 10002, 129 params: ["sys.float.ohos_id_max_padding_end"], 130 bundleName: "", 131 moduleName: "" 132 } 133 }); 134 Flex.onAreaChange(((e, t) => { 135 this.tabWidth = Number(t.width) - this.menuSectionWidth 136 })); 137 t || Flex.pop(); 138 ViewStackProcessor.StopGetAccessRecording() 139 })); 140 this.observeComponentCreation(((e, t) => { 141 ViewStackProcessor.StartGetAccessRecordingFor(e); 142 Stack.create({ 143 alignContent: Alignment.End 144 }); 145 t || Stack.pop(); 146 ViewStackProcessor.StopGetAccessRecording() 147 })); 148 this.observeComponentCreation(((e, t) => { 149 ViewStackProcessor.StartGetAccessRecordingFor(e); 150 Stack.create({ 151 alignContent: Alignment.Start 152 }); 153 t || Stack.pop(); 154 ViewStackProcessor.StopGetAccessRecording() 155 })); 156 this.observeComponentCreation(((e, t) => { 157 ViewStackProcessor.StartGetAccessRecordingFor(e); 158 Column.create(); 159 t || Column.pop(); 160 ViewStackProcessor.StopGetAccessRecording() 161 })); 162 this.observeComponentCreation(((e, t) => { 163 ViewStackProcessor.StartGetAccessRecordingFor(e); 164 List.create({ 165 initialIndex: 0, 166 scroller: this.scroller, 167 space: 0 168 }); 169 List.width("100%"); 170 List.height(TabTitleBar.totalHeight); 171 List.constraintSize({ 172 maxWidth: this.tabWidth 173 }); 174 List.edgeEffect(EdgeEffect.Spring); 175 List.listDirection(Axis.Horizontal); 176 List.scrollBar(BarState.Off); 177 t || List.pop(); 178 ViewStackProcessor.StopGetAccessRecording() 179 })); 180 this.observeComponentCreation(((e, t) => { 181 ViewStackProcessor.StartGetAccessRecordingFor(e); 182 ForEach.create(); 183 this.forEachUpdateFunction(e, this.tabItems, ((e, t) => { 184 const o = e; 185 { 186 const e = !0; 187 const i = (t, o) => { 188 ViewStackProcessor.StartGetAccessRecordingFor(t); 189 ListItem.create(r, e); 190 o || ListItem.pop(); 191 ViewStackProcessor.StopGetAccessRecording() 192 }; 193 const s = () => { 194 this.observeComponentCreation(i); 195 this.observeComponentCreation(((e, i) => { 196 ViewStackProcessor.StartGetAccessRecordingFor(e); 197 i ? ViewPU.create(new TabContentItem(this, { 198 item: o, 199 index: t, 200 maxIndex: this.tabItems.length - 1, 201 currentIndex: this.currentIndex, 202 onCustomClick: () => this.currentIndex = t 203 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { 204 currentIndex: this.currentIndex 205 }); 206 ViewStackProcessor.StopGetAccessRecording() 207 })); 208 ListItem.pop() 209 }; 210 const r = (e, s) => { 211 i(e, s); 212 this.updateFuncByElmtId.set(e, i); 213 this.observeComponentCreation(((e, i) => { 214 ViewStackProcessor.StartGetAccessRecordingFor(e); 215 i ? ViewPU.create(new TabContentItem(this, { 216 item: o, 217 index: t, 218 maxIndex: this.tabItems.length - 1, 219 currentIndex: this.currentIndex, 220 onCustomClick: () => this.currentIndex = t 221 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { 222 currentIndex: this.currentIndex 223 }); 224 ViewStackProcessor.StopGetAccessRecording() 225 })); 226 ListItem.pop() 227 }; 228 e ? (() => { 229 this.observeComponentCreation(i); 230 ListItem.pop() 231 })() : s() 232 } 233 }), void 0, !0, !1); 234 t || ForEach.pop(); 235 ViewStackProcessor.StopGetAccessRecording() 236 })); 237 ForEach.pop(); 238 List.pop(); 239 Column.pop(); 240 this.GradientMask.bind(this)(this.leftContext2D, 0, TabTitleBar.totalHeight / 2, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2); 241 Stack.pop(); 242 this.GradientMask.bind(this)(this.rightContext2D, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2, 0, TabTitleBar.totalHeight / 2); 243 Stack.pop(); 244 this.observeComponentCreation(((e, t) => { 245 ViewStackProcessor.StartGetAccessRecordingFor(e); 246 If.create(); 247 void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { 248 this.observeComponentCreation(((e, t) => { 249 ViewStackProcessor.StartGetAccessRecordingFor(e); 250 __Common__.create(); 251 __Common__.height(TabTitleBar.totalHeight); 252 __Common__.onAreaChange(((e, t) => { 253 this.menuSectionWidth = Number(t.width) 254 })); 255 t || __Common__.pop(); 256 ViewStackProcessor.StopGetAccessRecording() 257 })); 258 this.observeComponentCreation(((e, t) => { 259 ViewStackProcessor.StartGetAccessRecordingFor(e); 260 t ? ViewPU.create(new CollapsibleMenuSection(this, { 261 menuItems: this.menuItems 262 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 263 ViewStackProcessor.StopGetAccessRecording() 264 })); 265 __Common__.pop() 266 })) : If.branchId(1); 267 t || If.pop(); 268 ViewStackProcessor.StopGetAccessRecording() 269 })); 270 If.pop(); 271 Flex.pop(); 272 this.observeComponentCreation(((e, t) => { 273 ViewStackProcessor.StartGetAccessRecordingFor(e); 274 Column.create(); 275 t || Column.pop(); 276 ViewStackProcessor.StopGetAccessRecording() 277 })); 278 this.observeComponentCreation(((e, t) => { 279 ViewStackProcessor.StartGetAccessRecordingFor(e); 280 Swiper.create(this.swiperController); 281 Swiper.index(this.currentIndex); 282 Swiper.itemSpace(0); 283 Swiper.indicator(!1); 284 Swiper.width("100%"); 285 Swiper.height("100%"); 286 Swiper.curve(Curve.Friction); 287 Swiper.onChange((e => { 288 this.currentIndex = e; 289 this.scroller.scrollToIndex(this.currentIndex); 290 this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) 291 })); 292 Swiper.onAppear((() => { 293 this.scroller.scrollToIndex(this.currentIndex); 294 this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) 295 })); 296 t || Swiper.pop(); 297 ViewStackProcessor.StopGetAccessRecording() 298 })); 299 this.swiperContent.bind(this)(); 300 Swiper.pop(); 301 Column.pop(); 302 Column.pop() 303 } 304 rerender() { 305 this.updateDirtyElements() 306 } 307} 308TabTitleBar.totalHeight = 56; 309TabTitleBar.correctionOffset = -40; 310TabTitleBar.gradientMaskWidth = 24; 311__decorate([], TabTitleBar.prototype, "GradientMask", null); 312class CollapsibleMenuSection extends ViewPU { 313 constructor(e, t, o, i = -1) { 314 super(e, o, i); 315 this.menuItems = void 0; 316 this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); 317 this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); 318 this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); 319 this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); 320 this.setInitiallyProvidedValue(t) 321 } 322 setInitiallyProvidedValue(e) { 323 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 324 void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); 325 void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); 326 void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); 327 void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) 328 } 329 updateStateVars(e) {} 330 purgeVariableDependenciesOnElmtId(e) { 331 this.__isPopupShown.purgeDependencyOnElmtId(e); 332 this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); 333 this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); 334 this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) 335 } 336 aboutToBeDeleted() { 337 this.__isPopupShown.aboutToBeDeleted(); 338 this.__isMoreIconOnFocus.aboutToBeDeleted(); 339 this.__isMoreIconOnHover.aboutToBeDeleted(); 340 this.__isMoreIconOnClick.aboutToBeDeleted(); 341 SubscriberManager.Get().delete(this.id__()); 342 this.aboutToBeDeletedInternal() 343 } 344 get isPopupShown() { 345 return this.__isPopupShown.get() 346 } 347 set isPopupShown(e) { 348 this.__isPopupShown.set(e) 349 } 350 get isMoreIconOnFocus() { 351 return this.__isMoreIconOnFocus.get() 352 } 353 set isMoreIconOnFocus(e) { 354 this.__isMoreIconOnFocus.set(e) 355 } 356 get isMoreIconOnHover() { 357 return this.__isMoreIconOnHover.get() 358 } 359 set isMoreIconOnHover(e) { 360 this.__isMoreIconOnHover.set(e) 361 } 362 get isMoreIconOnClick() { 363 return this.__isMoreIconOnClick.get() 364 } 365 set isMoreIconOnClick(e) { 366 this.__isMoreIconOnClick.set(e) 367 } 368 getMoreIconFgColor() { 369 return this.isMoreIconOnClick ? { 370 id: -1, 371 type: 10001, 372 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 373 bundleName: "", 374 moduleName: "" 375 } : { 376 id: -1, 377 type: 10001, 378 params: ["sys.color.ohos_id_color_titlebar_icon"], 379 bundleName: "", 380 moduleName: "" 381 } 382 } 383 getMoreIconBgColor() { 384 return this.isMoreIconOnClick ? { 385 id: -1, 386 type: 10001, 387 params: ["sys.color.ohos_id_color_click_effect"], 388 bundleName: "", 389 moduleName: "" 390 } : this.isMoreIconOnHover ? { 391 id: -1, 392 type: 10001, 393 params: ["sys.color.ohos_id_color_hover"], 394 bundleName: "", 395 moduleName: "" 396 } : Color.Transparent 397 } 398 initialRender() { 399 this.observeComponentCreation(((e, t) => { 400 ViewStackProcessor.StartGetAccessRecordingFor(e); 401 Column.create(); 402 Column.height("100%"); 403 Column.justifyContent(FlexAlign.Center); 404 t || Column.pop(); 405 ViewStackProcessor.StopGetAccessRecording() 406 })); 407 this.observeComponentCreation(((e, t) => { 408 ViewStackProcessor.StartGetAccessRecordingFor(e); 409 Row.create(); 410 t || Row.pop(); 411 ViewStackProcessor.StopGetAccessRecording() 412 })); 413 this.observeComponentCreation(((e, t) => { 414 ViewStackProcessor.StartGetAccessRecordingFor(e); 415 If.create(); 416 this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { 417 this.observeComponentCreation(((e, t) => { 418 ViewStackProcessor.StartGetAccessRecordingFor(e); 419 ForEach.create(); 420 this.forEachUpdateFunction(e, this.menuItems, (e => { 421 const t = e; 422 this.observeComponentCreation(((e, o) => { 423 ViewStackProcessor.StartGetAccessRecordingFor(e); 424 o ? ViewPU.create(new ImageMenuItem(this, { 425 item: t 426 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 427 ViewStackProcessor.StopGetAccessRecording() 428 })) 429 })); 430 t || ForEach.pop(); 431 ViewStackProcessor.StopGetAccessRecording() 432 })); 433 ForEach.pop() 434 })) : this.ifElseBranchUpdateFunction(1, (() => { 435 this.observeComponentCreation(((e, t) => { 436 ViewStackProcessor.StartGetAccessRecordingFor(e); 437 ForEach.create(); 438 this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => { 439 const t = e; 440 this.observeComponentCreation(((e, o) => { 441 ViewStackProcessor.StartGetAccessRecordingFor(e); 442 o ? ViewPU.create(new ImageMenuItem(this, { 443 item: t 444 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 445 ViewStackProcessor.StopGetAccessRecording() 446 })) 447 })); 448 t || ForEach.pop(); 449 ViewStackProcessor.StopGetAccessRecording() 450 })); 451 ForEach.pop(); 452 this.observeComponentCreation(((e, t) => { 453 ViewStackProcessor.StartGetAccessRecordingFor(e); 454 Row.create(); 455 Row.width(ImageMenuItem.imageHotZoneWidth); 456 Row.height(ImageMenuItem.imageHotZoneWidth); 457 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 458 Row.foregroundColor(this.getMoreIconFgColor()); 459 Row.backgroundColor(this.getMoreIconBgColor()); 460 Row.justifyContent(FlexAlign.Center); 461 Row.border(this.isMoreIconOnFocus ? { 462 width: ImageMenuItem.focusBorderWidth, 463 color: { 464 id: -1, 465 type: 10001, 466 params: ["sys.color.ohos_id_color_emphasize"], 467 bundleName: "", 468 moduleName: "" 469 }, 470 style: BorderStyle.Solid 471 } : { 472 width: 0 473 }); 474 Row.onFocus((() => this.isMoreIconOnFocus = !0)); 475 Row.onBlur((() => this.isMoreIconOnFocus = !1)); 476 Row.onHover((e => this.isMoreIconOnHover = e)); 477 Row.onKeyEvent((e => { 478 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 479 e.type === KeyType.Down && (this.isMoreIconOnClick = !0); 480 e.type === KeyType.Up && (this.isMoreIconOnClick = !1) 481 } 482 })); 483 Row.onTouch((e => { 484 e.type === TouchType.Down && (this.isMoreIconOnClick = !0); 485 e.type === TouchType.Up && (this.isMoreIconOnClick = !1) 486 })); 487 Row.onClick((() => this.isPopupShown = !0)); 488 Row.bindPopup(this.isPopupShown, { 489 builder: { 490 builder: this.popupBuilder.bind(this) 491 }, 492 placement: Placement.Bottom, 493 popupColor: Color.White, 494 enableArrow: !1, 495 onStateChange: e => this.isPopupShown = e.isVisible 496 }); 497 t || Row.pop(); 498 ViewStackProcessor.StopGetAccessRecording() 499 })); 500 this.observeComponentCreation(((e, t) => { 501 ViewStackProcessor.StartGetAccessRecordingFor(e); 502 Image.create(PUBLIC_MORE); 503 Image.width(ImageMenuItem.imageSize); 504 Image.height(ImageMenuItem.imageSize); 505 Image.focusable(!0); 506 t || Image.pop(); 507 ViewStackProcessor.StopGetAccessRecording() 508 })); 509 Row.pop() 510 })); 511 t || If.pop(); 512 ViewStackProcessor.StopGetAccessRecording() 513 })); 514 If.pop(); 515 Row.pop(); 516 Column.pop() 517 } 518 popupBuilder(e = null) { 519 this.observeComponentCreation(((e, t) => { 520 ViewStackProcessor.StartGetAccessRecordingFor(e); 521 Column.create(); 522 Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); 523 Column.margin({ 524 top: CollapsibleMenuSection.focusPadding, 525 bottom: CollapsibleMenuSection.focusPadding 526 }); 527 t || Column.pop(); 528 ViewStackProcessor.StopGetAccessRecording() 529 })); 530 this.observeComponentCreation(((e, t) => { 531 ViewStackProcessor.StartGetAccessRecordingFor(e); 532 ForEach.create(); 533 this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { 534 const o = e; 535 this.observeComponentCreation(((e, t) => { 536 ViewStackProcessor.StartGetAccessRecordingFor(e); 537 t ? ViewPU.create(new ImageMenuItem(this, { 538 item: o 539 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 540 ViewStackProcessor.StopGetAccessRecording() 541 })) 542 }), void 0, !0, !1); 543 t || ForEach.pop(); 544 ViewStackProcessor.StopGetAccessRecording() 545 })); 546 ForEach.pop(); 547 Column.pop() 548 } 549 rerender() { 550 this.updateDirtyElements() 551 } 552} 553CollapsibleMenuSection.maxCountOfVisibleItems = 1; 554CollapsibleMenuSection.focusPadding = 4; 555CollapsibleMenuSection.marginsNum = 2; 556__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); 557class TabContentItem extends ViewPU { 558 constructor(e, t, o, i = -1) { 559 super(e, o, i); 560 this.item = void 0; 561 this.index = void 0; 562 this.maxIndex = void 0; 563 this.onCustomClick = void 0; 564 this.__currentIndex = new SynchedPropertySimpleOneWayPU(t.currentIndex, this, "currentIndex"); 565 this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); 566 this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); 567 this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); 568 this.setInitiallyProvidedValue(t) 569 } 570 setInitiallyProvidedValue(e) { 571 void 0 !== e.item && (this.item = e.item); 572 void 0 !== e.index && (this.index = e.index); 573 void 0 !== e.maxIndex && (this.maxIndex = e.maxIndex); 574 void 0 !== e.onCustomClick && (this.onCustomClick = e.onCustomClick); 575 void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); 576 void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); 577 void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) 578 } 579 updateStateVars(e) { 580 this.__currentIndex.reset(e.currentIndex) 581 } 582 purgeVariableDependenciesOnElmtId(e) { 583 this.__currentIndex.purgeDependencyOnElmtId(e); 584 this.__isOnFocus.purgeDependencyOnElmtId(e); 585 this.__isOnHover.purgeDependencyOnElmtId(e); 586 this.__isOnClick.purgeDependencyOnElmtId(e) 587 } 588 aboutToBeDeleted() { 589 this.__currentIndex.aboutToBeDeleted(); 590 this.__isOnFocus.aboutToBeDeleted(); 591 this.__isOnHover.aboutToBeDeleted(); 592 this.__isOnClick.aboutToBeDeleted(); 593 SubscriberManager.Get().delete(this.id__()); 594 this.aboutToBeDeletedInternal() 595 } 596 get currentIndex() { 597 return this.__currentIndex.get() 598 } 599 set currentIndex(e) { 600 this.__currentIndex.set(e) 601 } 602 get isOnFocus() { 603 return this.__isOnFocus.get() 604 } 605 set isOnFocus(e) { 606 this.__isOnFocus.set(e) 607 } 608 get isOnHover() { 609 return this.__isOnHover.get() 610 } 611 set isOnHover(e) { 612 this.__isOnHover.set(e) 613 } 614 get isOnClick() { 615 return this.__isOnClick.get() 616 } 617 set isOnClick(e) { 618 this.__isOnClick.set(e) 619 } 620 getBgColor() { 621 return this.isOnClick ? { 622 id: -1, 623 type: 10001, 624 params: ["sys.color.ohos_id_color_click_effect"], 625 bundleName: "", 626 moduleName: "" 627 } : this.isOnHover ? { 628 id: -1, 629 type: 10001, 630 params: ["sys.color.ohos_id_color_hover"], 631 bundleName: "", 632 moduleName: "" 633 } : Color.Transparent 634 } 635 initialRender() { 636 this.observeComponentCreation(((e, t) => { 637 ViewStackProcessor.StartGetAccessRecordingFor(e); 638 Row.create(); 639 Row.height(TabTitleBar.totalHeight); 640 Row.alignItems(VerticalAlign.Center); 641 Row.justifyContent(FlexAlign.Center); 642 Row.margin({ 643 left: 0 === this.index ? 16 : 0, 644 right: this.index === this.maxIndex ? 12 : 0 645 }); 646 Row.borderRadius(TabContentItem.buttonBorderRadius); 647 Row.backgroundColor(this.getBgColor()); 648 Row.border(this.isOnFocus ? { 649 width: TabContentItem.focusBorderWidth, 650 color: { 651 id: -1, 652 type: 10001, 653 params: ["sys.color.ohos_id_color_emphasize"], 654 bundleName: "", 655 moduleName: "" 656 }, 657 style: BorderStyle.Solid 658 } : { 659 width: 0 660 }); 661 t || Row.pop(); 662 ViewStackProcessor.StopGetAccessRecording() 663 })); 664 this.observeComponentCreation(((e, t) => { 665 ViewStackProcessor.StartGetAccessRecordingFor(e); 666 Column.create(); 667 Column.justifyContent(FlexAlign.Center); 668 t || Column.pop(); 669 ViewStackProcessor.StopGetAccessRecording() 670 })); 671 this.observeComponentCreation(((e, t) => { 672 ViewStackProcessor.StartGetAccessRecordingFor(e); 673 If.create(); 674 void 0 === this.item.icon ? this.ifElseBranchUpdateFunction(0, (() => { 675 this.observeComponentCreation(((e, t) => { 676 ViewStackProcessor.StartGetAccessRecordingFor(e); 677 Text.create(this.item.title); 678 Text.fontSize(this.index === this.currentIndex ? { 679 id: -1, 680 type: 10002, 681 params: ["sys.float.ohos_id_text_size_headline7"], 682 bundleName: "", 683 moduleName: "" 684 } : { 685 id: -1, 686 type: 10002, 687 params: ["sys.float.ohos_id_text_size_headline9"], 688 bundleName: "", 689 moduleName: "" 690 }); 691 Text.fontColor(this.index === this.currentIndex ? { 692 id: -1, 693 type: 10001, 694 params: ["sys.color.ohos_id_color_titlebar_text"], 695 bundleName: "", 696 moduleName: "" 697 } : { 698 id: -1, 699 type: 10001, 700 params: ["sys.color.ohos_id_color_titlebar_text_off"], 701 bundleName: "", 702 moduleName: "" 703 }); 704 Text.fontWeight(FontWeight.Medium); 705 Text.focusable(!0); 706 Text.padding({ 707 top: this.index === this.currentIndex ? 6 : 10, 708 left: 8, 709 bottom: 2, 710 right: 8 711 }); 712 Text.onFocus((() => this.isOnFocus = !0)); 713 Text.onBlur((() => this.isOnFocus = !1)); 714 Text.onHover((e => this.isOnHover = e)); 715 Text.onKeyEvent((e => { 716 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 717 e.type === KeyType.Down && (this.isOnClick = !0); 718 e.type === KeyType.Up && (this.isOnClick = !1) 719 } 720 })); 721 Text.onTouch((e => { 722 e.type === TouchType.Down && (this.isOnClick = !0); 723 e.type === TouchType.Up && (this.isOnClick = !1) 724 })); 725 Text.onClick((() => this.onCustomClick && this.onCustomClick())); 726 t || Text.pop(); 727 ViewStackProcessor.StopGetAccessRecording() 728 })); 729 Text.pop() 730 })) : this.ifElseBranchUpdateFunction(1, (() => { 731 this.observeComponentCreation(((e, t) => { 732 ViewStackProcessor.StartGetAccessRecordingFor(e); 733 Row.create(); 734 Row.width(TabContentItem.imageHotZoneWidth); 735 Row.height(TabContentItem.imageHotZoneWidth); 736 Row.justifyContent(FlexAlign.Center); 737 Row.onFocus((() => this.isOnFocus = !0)); 738 Row.onBlur((() => this.isOnFocus = !1)); 739 Row.onHover((e => this.isOnHover = e)); 740 Row.onKeyEvent((e => { 741 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 742 e.type === KeyType.Down && (this.isOnClick = !0); 743 e.type === KeyType.Up && (this.isOnClick = !1) 744 } 745 })); 746 Row.onTouch((e => { 747 e.type === TouchType.Down && (this.isOnClick = !0); 748 e.type === TouchType.Up && (this.isOnClick = !1) 749 })); 750 Row.onClick((() => this.onCustomClick && this.onCustomClick())); 751 t || Row.pop(); 752 ViewStackProcessor.StopGetAccessRecording() 753 })); 754 this.observeComponentCreation(((e, t) => { 755 ViewStackProcessor.StartGetAccessRecordingFor(e); 756 Image.create(this.item.icon); 757 Image.alt(this.item.title); 758 Image.height(TabContentItem.imageSize); 759 Image.focusable(!0); 760 Image.scale({ 761 x: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1, 762 y: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1 763 }); 764 t || Image.pop(); 765 ViewStackProcessor.StopGetAccessRecording() 766 })); 767 Row.pop() 768 })); 769 t || If.pop(); 770 ViewStackProcessor.StopGetAccessRecording() 771 })); 772 If.pop(); 773 Column.pop(); 774 Row.pop() 775 } 776 rerender() { 777 this.updateDirtyElements() 778 } 779} 780TabContentItem.imageSize = 24; 781TabContentItem.imageHotZoneWidth = 48; 782TabContentItem.imageMagnificationFactor = 1.4; 783TabContentItem.buttonBorderRadius = 8; 784TabContentItem.focusBorderWidth = 2; 785class ImageMenuItem extends ViewPU { 786 constructor(e, t, o, i = -1) { 787 super(e, o, i); 788 this.item = void 0; 789 this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); 790 this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); 791 this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); 792 this.setInitiallyProvidedValue(t) 793 } 794 setInitiallyProvidedValue(e) { 795 void 0 !== e.item && (this.item = e.item); 796 void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); 797 void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); 798 void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) 799 } 800 updateStateVars(e) {} 801 purgeVariableDependenciesOnElmtId(e) { 802 this.__isOnFocus.purgeDependencyOnElmtId(e); 803 this.__isOnHover.purgeDependencyOnElmtId(e); 804 this.__isOnClick.purgeDependencyOnElmtId(e) 805 } 806 aboutToBeDeleted() { 807 this.__isOnFocus.aboutToBeDeleted(); 808 this.__isOnHover.aboutToBeDeleted(); 809 this.__isOnClick.aboutToBeDeleted(); 810 SubscriberManager.Get().delete(this.id__()); 811 this.aboutToBeDeletedInternal() 812 } 813 get isOnFocus() { 814 return this.__isOnFocus.get() 815 } 816 set isOnFocus(e) { 817 this.__isOnFocus.set(e) 818 } 819 get isOnHover() { 820 return this.__isOnHover.get() 821 } 822 set isOnHover(e) { 823 this.__isOnHover.set(e) 824 } 825 get isOnClick() { 826 return this.__isOnClick.get() 827 } 828 set isOnClick(e) { 829 this.__isOnClick.set(e) 830 } 831 getFgColor() { 832 return this.isOnClick ? { 833 id: -1, 834 type: 10001, 835 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 836 bundleName: "", 837 moduleName: "" 838 } : { 839 id: -1, 840 type: 10001, 841 params: ["sys.color.ohos_id_color_titlebar_icon"], 842 bundleName: "", 843 moduleName: "" 844 } 845 } 846 getBgColor() { 847 return this.isOnClick ? { 848 id: -1, 849 type: 10001, 850 params: ["sys.color.ohos_id_color_click_effect"], 851 bundleName: "", 852 moduleName: "" 853 } : this.isOnHover ? { 854 id: -1, 855 type: 10001, 856 params: ["sys.color.ohos_id_color_hover"], 857 bundleName: "", 858 moduleName: "" 859 } : Color.Transparent 860 } 861 initialRender() { 862 this.observeComponentCreation(((e, t) => { 863 ViewStackProcessor.StartGetAccessRecordingFor(e); 864 Row.create(); 865 Row.width(ImageMenuItem.imageHotZoneWidth); 866 Row.height(ImageMenuItem.imageHotZoneWidth); 867 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 868 Row.foregroundColor(this.getFgColor()); 869 Row.backgroundColor(this.getBgColor()); 870 Row.justifyContent(FlexAlign.Center); 871 Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); 872 Row.border(this.isOnFocus ? { 873 width: ImageMenuItem.focusBorderWidth, 874 color: { 875 id: -1, 876 type: 10001, 877 params: ["sys.color.ohos_id_color_emphasize"], 878 bundleName: "", 879 moduleName: "" 880 }, 881 style: BorderStyle.Solid 882 } : { 883 width: 0 884 }); 885 Row.onFocus((() => { 886 this.item.isEnabled && (this.isOnFocus = !0) 887 })); 888 Row.onBlur((() => this.isOnFocus = !1)); 889 Row.onHover((e => { 890 this.item.isEnabled && (this.isOnHover = e) 891 })); 892 Row.onKeyEvent((e => { 893 if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { 894 e.type === KeyType.Down && (this.isOnClick = !0); 895 e.type === KeyType.Up && (this.isOnClick = !1) 896 } 897 })); 898 Row.onTouch((e => { 899 if (this.item.isEnabled) { 900 e.type === TouchType.Down && (this.isOnClick = !0); 901 e.type === TouchType.Up && (this.isOnClick = !1) 902 } 903 })); 904 Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); 905 t || Row.pop(); 906 ViewStackProcessor.StopGetAccessRecording() 907 })); 908 this.observeComponentCreation(((e, t) => { 909 ViewStackProcessor.StartGetAccessRecordingFor(e); 910 Image.create(this.item.value); 911 Image.width(ImageMenuItem.imageSize); 912 Image.height(ImageMenuItem.imageSize); 913 Image.focusable(this.item.isEnabled); 914 t || Image.pop(); 915 ViewStackProcessor.StopGetAccessRecording() 916 })); 917 Row.pop() 918 } 919 rerender() { 920 this.updateDirtyElements() 921 } 922} 923ImageMenuItem.imageSize = 24; 924ImageMenuItem.imageHotZoneWidth = 48; 925ImageMenuItem.buttonBorderRadius = 8; 926ImageMenuItem.focusBorderWidth = 2; 927ImageMenuItem.disabledImageOpacity = .4; 928export default { 929 TabTitleBar: TabTitleBar 930};