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, n = arguments.length, 18 r = n < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; 19 if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(e, t, o, i); 20 else 21 for (var a = e.length - 1; a >= 0; a--)(s = e[a]) && (r = (n < 3 ? s(r) : n > 3 ? s(t, o, r) : s(t, o)) || r); 22 return n > 3 && r && Object.defineProperty(t, o, r), r 23}; 24const KeyCode = requireNapi("multimodalInput.keyCode").KeyCode; 25const MeasureText = requireNapi("measure"); 26const 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"; 27export class TabTitleBar extends ViewPU { 28 constructor(e, t, o, i = -1) { 29 super(e, o, i); 30 this.tabItems = void 0; 31 this.menuItems = void 0; 32 this.swiperContent = void 0; 33 this.__tabWidth = new ObservedPropertySimplePU(0, this, "tabWidth"); 34 this.__currentIndex = new ObservedPropertySimplePU(0, this, "currentIndex"); 35 this.menuSectionWidth = 0; 36 this.tabOffsets = Array(); 37 this.imageWidths = Array(); 38 this.scroller = new Scroller; 39 this.swiperController = new SwiperController; 40 this.settings = new RenderingContextSettings(!0); 41 this.leftContext2D = new CanvasRenderingContext2D(this.settings); 42 this.rightContext2D = new CanvasRenderingContext2D(this.settings); 43 this.setInitiallyProvidedValue(t) 44 } 45 setInitiallyProvidedValue(e) { 46 void 0 !== e.tabItems && (this.tabItems = e.tabItems); 47 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 48 void 0 !== e.swiperContent && (this.swiperContent = e.swiperContent); 49 void 0 !== e.tabWidth && (this.tabWidth = e.tabWidth); 50 void 0 !== e.currentIndex && (this.currentIndex = e.currentIndex); 51 void 0 !== e.menuSectionWidth && (this.menuSectionWidth = e.menuSectionWidth); 52 void 0 !== e.tabOffsets && (this.tabOffsets = e.tabOffsets); 53 void 0 !== e.imageWidths && (this.imageWidths = e.imageWidths); 54 void 0 !== e.scroller && (this.scroller = e.scroller); 55 void 0 !== e.swiperController && (this.swiperController = e.swiperController); 56 void 0 !== e.settings && (this.settings = e.settings); 57 void 0 !== e.leftContext2D && (this.leftContext2D = e.leftContext2D); 58 void 0 !== e.rightContext2D && (this.rightContext2D = e.rightContext2D) 59 } 60 updateStateVars(e) {} 61 purgeVariableDependenciesOnElmtId(e) { 62 this.__tabWidth.purgeDependencyOnElmtId(e); 63 this.__currentIndex.purgeDependencyOnElmtId(e) 64 } 65 aboutToBeDeleted() { 66 this.__tabWidth.aboutToBeDeleted(); 67 this.__currentIndex.aboutToBeDeleted(); 68 SubscriberManager.Get().delete(this.id__()); 69 this.aboutToBeDeletedInternal() 70 } 71 get tabWidth() { 72 return this.__tabWidth.get() 73 } 74 set tabWidth(e) { 75 this.__tabWidth.set(e) 76 } 77 get currentIndex() { 78 return this.__currentIndex.get() 79 } 80 set currentIndex(e) { 81 this.__currentIndex.set(e) 82 } 83 GradientMask(e, t, o, i, s, n = null) { 84 this.observeComponentCreation(((e, t) => { 85 ViewStackProcessor.StartGetAccessRecordingFor(e); 86 Column.create(); 87 Column.width(TabTitleBar.gradientMaskWidth); 88 Column.height(TabTitleBar.totalHeight); 89 t || Column.pop(); 90 ViewStackProcessor.StopGetAccessRecording() 91 })); 92 this.observeComponentCreation(((n, r) => { 93 ViewStackProcessor.StartGetAccessRecordingFor(n); 94 Canvas.create(e); 95 Canvas.width(TabTitleBar.gradientMaskWidth); 96 Canvas.height(TabTitleBar.totalHeight); 97 Canvas.onReady((() => { 98 var n = e.createLinearGradient(t, o, i, s); 99 n.addColorStop(0, "#ffffffff"); 100 n.addColorStop(1, "#00ffffff"); 101 e.fillStyle = n; 102 e.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight) 103 })); 104 r || Canvas.pop(); 105 ViewStackProcessor.StopGetAccessRecording() 106 })); 107 Canvas.pop(); 108 Column.pop() 109 } 110 aboutToAppear() { 111 this.tabItems.forEach((e => { 112 this.imageWidths.push(0) 113 })); 114 this.loadOffsets() 115 } 116 loadOffsets() { 117 this.tabOffsets.length = 0; 118 let e = 0; 119 this.tabOffsets.push(e); 120 e += TabContentItem.marginFirst; 121 this.tabItems.forEach(((t, o) => { 122 if (void 0 !== t.icon) Math.abs(this.imageWidths[o]) > TabContentItem.imageHotZoneWidth ? e += this.imageWidths[o] : e += TabContentItem.imageHotZoneWidth; 123 else { 124 e += TabContentItem.paddingLeft; 125 e += px2vp(MeasureText.measureText({ 126 textContent: t.title.toString(), 127 fontSize: 18, 128 fontWeight: FontWeight.Medium 129 })); 130 e += TabContentItem.paddingRight 131 } 132 this.tabOffsets.push(e) 133 })) 134 } 135 initialRender() { 136 this.observeComponentCreation(((e, t) => { 137 ViewStackProcessor.StartGetAccessRecordingFor(e); 138 Column.create(); 139 t || Column.pop(); 140 ViewStackProcessor.StopGetAccessRecording() 141 })); 142 this.observeComponentCreation(((e, t) => { 143 ViewStackProcessor.StartGetAccessRecordingFor(e); 144 Flex.create({ 145 justifyContent: FlexAlign.SpaceBetween, 146 alignItems: ItemAlign.Stretch 147 }); 148 Flex.backgroundColor({ 149 id: -1, 150 type: 10001, 151 params: ["sys.color.ohos_id_color_background"], 152 bundleName: "", 153 moduleName: "" 154 }); 155 Flex.margin({ 156 right: { 157 id: -1, 158 type: 10002, 159 params: ["sys.float.ohos_id_max_padding_end"], 160 bundleName: "", 161 moduleName: "" 162 } 163 }); 164 Flex.onAreaChange(((e, t) => { 165 this.tabWidth = Number(t.width) - this.menuSectionWidth 166 })); 167 t || Flex.pop(); 168 ViewStackProcessor.StopGetAccessRecording() 169 })); 170 this.observeComponentCreation(((e, t) => { 171 ViewStackProcessor.StartGetAccessRecordingFor(e); 172 Stack.create({ 173 alignContent: Alignment.End 174 }); 175 t || Stack.pop(); 176 ViewStackProcessor.StopGetAccessRecording() 177 })); 178 this.observeComponentCreation(((e, t) => { 179 ViewStackProcessor.StartGetAccessRecordingFor(e); 180 Stack.create({ 181 alignContent: Alignment.Start 182 }); 183 t || Stack.pop(); 184 ViewStackProcessor.StopGetAccessRecording() 185 })); 186 this.observeComponentCreation(((e, t) => { 187 ViewStackProcessor.StartGetAccessRecordingFor(e); 188 Column.create(); 189 t || Column.pop(); 190 ViewStackProcessor.StopGetAccessRecording() 191 })); 192 this.observeComponentCreation(((e, t) => { 193 ViewStackProcessor.StartGetAccessRecordingFor(e); 194 List.create({ 195 initialIndex: 0, 196 scroller: this.scroller, 197 space: 0 198 }); 199 List.width("100%"); 200 List.height(TabTitleBar.totalHeight); 201 List.constraintSize({ 202 maxWidth: this.tabWidth 203 }); 204 List.edgeEffect(EdgeEffect.Spring); 205 List.listDirection(Axis.Horizontal); 206 List.scrollBar(BarState.Off); 207 t || List.pop(); 208 ViewStackProcessor.StopGetAccessRecording() 209 })); 210 this.observeComponentCreation(((e, t) => { 211 ViewStackProcessor.StartGetAccessRecordingFor(e); 212 ForEach.create(); 213 this.forEachUpdateFunction(e, this.tabItems, ((e, t) => { 214 const o = e; 215 { 216 const e = !0; 217 const i = (t, o) => { 218 ViewStackProcessor.StartGetAccessRecordingFor(t); 219 ListItem.create(n, e); 220 o || ListItem.pop(); 221 ViewStackProcessor.StopGetAccessRecording() 222 }; 223 const s = () => { 224 this.observeComponentCreation(i); 225 this.observeComponentCreation(((e, i) => { 226 ViewStackProcessor.StartGetAccessRecordingFor(e); 227 i ? ViewPU.create(new TabContentItem(this, { 228 item: o, 229 index: t, 230 maxIndex: this.tabItems.length - 1, 231 currentIndex: this.currentIndex, 232 onCustomClick: e => this.currentIndex = e, 233 onImageComplete: e => { 234 this.imageWidths[t] = e; 235 this.loadOffsets() 236 } 237 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { 238 currentIndex: this.currentIndex 239 }); 240 ViewStackProcessor.StopGetAccessRecording() 241 })); 242 ListItem.pop() 243 }; 244 const n = (e, s) => { 245 i(e, s); 246 this.updateFuncByElmtId.set(e, i); 247 this.observeComponentCreation(((e, i) => { 248 ViewStackProcessor.StartGetAccessRecordingFor(e); 249 i ? ViewPU.create(new TabContentItem(this, { 250 item: o, 251 index: t, 252 maxIndex: this.tabItems.length - 1, 253 currentIndex: this.currentIndex, 254 onCustomClick: e => this.currentIndex = e, 255 onImageComplete: e => { 256 this.imageWidths[t] = e; 257 this.loadOffsets() 258 } 259 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { 260 currentIndex: this.currentIndex 261 }); 262 ViewStackProcessor.StopGetAccessRecording() 263 })); 264 ListItem.pop() 265 }; 266 e ? (() => { 267 this.observeComponentCreation(i); 268 ListItem.pop() 269 })() : s() 270 } 271 }), void 0, !0, !1); 272 t || ForEach.pop(); 273 ViewStackProcessor.StopGetAccessRecording() 274 })); 275 ForEach.pop(); 276 List.pop(); 277 Column.pop(); 278 this.GradientMask.bind(this)(this.leftContext2D, 0, TabTitleBar.totalHeight / 2, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2); 279 Stack.pop(); 280 this.GradientMask.bind(this)(this.rightContext2D, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2, 0, TabTitleBar.totalHeight / 2); 281 Stack.pop(); 282 this.observeComponentCreation(((e, t) => { 283 ViewStackProcessor.StartGetAccessRecordingFor(e); 284 If.create(); 285 void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { 286 this.observeComponentCreation(((e, t) => { 287 ViewStackProcessor.StartGetAccessRecordingFor(e); 288 __Common__.create(); 289 __Common__.height(TabTitleBar.totalHeight); 290 __Common__.onAreaChange(((e, t) => { 291 this.menuSectionWidth = Number(t.width) 292 })); 293 t || __Common__.pop(); 294 ViewStackProcessor.StopGetAccessRecording() 295 })); 296 this.observeComponentCreation(((e, t) => { 297 ViewStackProcessor.StartGetAccessRecordingFor(e); 298 t ? ViewPU.create(new CollapsibleMenuSection(this, { 299 menuItems: this.menuItems, 300 index: 1 + TabTitleBar.instanceCount++ 301 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 302 ViewStackProcessor.StopGetAccessRecording() 303 })); 304 __Common__.pop() 305 })) : If.branchId(1); 306 t || If.pop(); 307 ViewStackProcessor.StopGetAccessRecording() 308 })); 309 If.pop(); 310 Flex.pop(); 311 this.observeComponentCreation(((e, t) => { 312 ViewStackProcessor.StartGetAccessRecordingFor(e); 313 Column.create(); 314 t || Column.pop(); 315 ViewStackProcessor.StopGetAccessRecording() 316 })); 317 this.observeComponentCreation(((e, t) => { 318 ViewStackProcessor.StartGetAccessRecordingFor(e); 319 Swiper.create(this.swiperController); 320 Swiper.index(this.currentIndex); 321 Swiper.itemSpace(0); 322 Swiper.indicator(!1); 323 Swiper.width("100%"); 324 Swiper.height("100%"); 325 Swiper.curve(Curve.Friction); 326 Swiper.onChange((e => { 327 const t = this.tabOffsets[e] + TabTitleBar.correctionOffset; 328 this.currentIndex = e; 329 this.scroller.scrollTo({ 330 xOffset: t > 0 ? t : 0, 331 yOffset: 0, 332 animation: { 333 duration: 300, 334 curve: Curve.EaseInOut 335 } 336 }) 337 })); 338 Swiper.onAppear((() => { 339 this.scroller.scrollToIndex(this.currentIndex); 340 this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) 341 })); 342 t || Swiper.pop(); 343 ViewStackProcessor.StopGetAccessRecording() 344 })); 345 this.swiperContent.bind(this)(); 346 Swiper.pop(); 347 Column.pop(); 348 Column.pop() 349 } 350 rerender() { 351 this.updateDirtyElements() 352 } 353} 354TabTitleBar.totalHeight = 56; 355TabTitleBar.correctionOffset = -40; 356TabTitleBar.gradientMaskWidth = 24; 357TabTitleBar.instanceCount = 0; 358__decorate([], TabTitleBar.prototype, "GradientMask", null); 359class CollapsibleMenuSection extends ViewPU { 360 constructor(e, t, o, i = -1) { 361 super(e, o, i); 362 this.menuItems = void 0; 363 this.index = void 0; 364 this.firstFocusableIndex = -1; 365 this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); 366 this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); 367 this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); 368 this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); 369 this.setInitiallyProvidedValue(t) 370 } 371 setInitiallyProvidedValue(e) { 372 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 373 void 0 !== e.index && (this.index = e.index); 374 void 0 !== e.firstFocusableIndex && (this.firstFocusableIndex = e.firstFocusableIndex); 375 void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); 376 void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); 377 void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); 378 void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) 379 } 380 updateStateVars(e) {} 381 purgeVariableDependenciesOnElmtId(e) { 382 this.__isPopupShown.purgeDependencyOnElmtId(e); 383 this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); 384 this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); 385 this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) 386 } 387 aboutToBeDeleted() { 388 this.__isPopupShown.aboutToBeDeleted(); 389 this.__isMoreIconOnFocus.aboutToBeDeleted(); 390 this.__isMoreIconOnHover.aboutToBeDeleted(); 391 this.__isMoreIconOnClick.aboutToBeDeleted(); 392 SubscriberManager.Get().delete(this.id__()); 393 this.aboutToBeDeletedInternal() 394 } 395 get isPopupShown() { 396 return this.__isPopupShown.get() 397 } 398 set isPopupShown(e) { 399 this.__isPopupShown.set(e) 400 } 401 get isMoreIconOnFocus() { 402 return this.__isMoreIconOnFocus.get() 403 } 404 set isMoreIconOnFocus(e) { 405 this.__isMoreIconOnFocus.set(e) 406 } 407 get isMoreIconOnHover() { 408 return this.__isMoreIconOnHover.get() 409 } 410 set isMoreIconOnHover(e) { 411 this.__isMoreIconOnHover.set(e) 412 } 413 get isMoreIconOnClick() { 414 return this.__isMoreIconOnClick.get() 415 } 416 set isMoreIconOnClick(e) { 417 this.__isMoreIconOnClick.set(e) 418 } 419 getMoreIconFgColor() { 420 return this.isMoreIconOnClick ? { 421 id: -1, 422 type: 10001, 423 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 424 bundleName: "", 425 moduleName: "" 426 } : { 427 id: -1, 428 type: 10001, 429 params: ["sys.color.ohos_id_color_titlebar_icon"], 430 bundleName: "", 431 moduleName: "" 432 } 433 } 434 getMoreIconBgColor() { 435 return this.isMoreIconOnClick ? { 436 id: -1, 437 type: 10001, 438 params: ["sys.color.ohos_id_color_click_effect"], 439 bundleName: "", 440 moduleName: "" 441 } : this.isMoreIconOnHover ? { 442 id: -1, 443 type: 10001, 444 params: ["sys.color.ohos_id_color_hover"], 445 bundleName: "", 446 moduleName: "" 447 } : Color.Transparent 448 } 449 aboutToAppear() { 450 this.menuItems.forEach(((e, t) => { 451 e.isEnabled && -1 == this.firstFocusableIndex && t > CollapsibleMenuSection.maxCountOfVisibleItems - 2 && (this.firstFocusableIndex = 1e3 * this.index + t + 1) 452 })) 453 } 454 initialRender() { 455 this.observeComponentCreation(((e, t) => { 456 ViewStackProcessor.StartGetAccessRecordingFor(e); 457 Column.create(); 458 Column.height("100%"); 459 Column.justifyContent(FlexAlign.Center); 460 t || Column.pop(); 461 ViewStackProcessor.StopGetAccessRecording() 462 })); 463 this.observeComponentCreation(((e, t) => { 464 ViewStackProcessor.StartGetAccessRecordingFor(e); 465 Row.create(); 466 t || Row.pop(); 467 ViewStackProcessor.StopGetAccessRecording() 468 })); 469 this.observeComponentCreation(((e, t) => { 470 ViewStackProcessor.StartGetAccessRecordingFor(e); 471 If.create(); 472 this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { 473 this.observeComponentCreation(((e, t) => { 474 ViewStackProcessor.StartGetAccessRecordingFor(e); 475 ForEach.create(); 476 this.forEachUpdateFunction(e, this.menuItems, ((e, t) => { 477 const o = e; 478 this.observeComponentCreation(((e, i) => { 479 ViewStackProcessor.StartGetAccessRecordingFor(e); 480 i ? ViewPU.create(new ImageMenuItem(this, { 481 item: o, 482 index: 1e3 * this.index + t + 1 483 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 484 ViewStackProcessor.StopGetAccessRecording() 485 })) 486 }), void 0, !0, !1); 487 t || ForEach.pop(); 488 ViewStackProcessor.StopGetAccessRecording() 489 })); 490 ForEach.pop() 491 })) : this.ifElseBranchUpdateFunction(1, (() => { 492 this.observeComponentCreation(((e, t) => { 493 ViewStackProcessor.StartGetAccessRecordingFor(e); 494 ForEach.create(); 495 this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), ((e, t) => { 496 const o = e; 497 this.observeComponentCreation(((e, i) => { 498 ViewStackProcessor.StartGetAccessRecordingFor(e); 499 i ? ViewPU.create(new ImageMenuItem(this, { 500 item: o, 501 index: 1e3 * this.index + t + 1 502 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 503 ViewStackProcessor.StopGetAccessRecording() 504 })) 505 }), void 0, !0, !1); 506 t || ForEach.pop(); 507 ViewStackProcessor.StopGetAccessRecording() 508 })); 509 ForEach.pop(); 510 this.observeComponentCreation(((e, t) => { 511 ViewStackProcessor.StartGetAccessRecordingFor(e); 512 Row.create(); 513 Row.width(ImageMenuItem.imageHotZoneWidth); 514 Row.height(ImageMenuItem.imageHotZoneWidth); 515 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 516 Row.foregroundColor(this.getMoreIconFgColor()); 517 Row.backgroundColor(this.getMoreIconBgColor()); 518 Row.justifyContent(FlexAlign.Center); 519 ViewStackProcessor.visualState("focused"); 520 Row.border({ 521 radius: { 522 id: -1, 523 type: 10002, 524 params: ["sys.float.ohos_id_corner_radius_clicked"], 525 bundleName: "", 526 moduleName: "" 527 }, 528 width: ImageMenuItem.focusBorderWidth, 529 color: { 530 id: -1, 531 type: 10001, 532 params: ["sys.color.ohos_id_color_focused_outline"], 533 bundleName: "", 534 moduleName: "" 535 }, 536 style: BorderStyle.Solid 537 }); 538 ViewStackProcessor.visualState("normal"); 539 Row.border({ 540 radius: { 541 id: -1, 542 type: 10002, 543 params: ["sys.float.ohos_id_corner_radius_clicked"], 544 bundleName: "", 545 moduleName: "" 546 }, 547 width: 0 548 }); 549 ViewStackProcessor.visualState(); 550 Row.onFocus((() => this.isMoreIconOnFocus = !0)); 551 Row.onBlur((() => this.isMoreIconOnFocus = !1)); 552 Row.onHover((e => this.isMoreIconOnHover = e)); 553 Row.onKeyEvent((e => { 554 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 555 e.type === KeyType.Down && (this.isMoreIconOnClick = !0); 556 e.type === KeyType.Up && (this.isMoreIconOnClick = !1) 557 } 558 })); 559 Row.onTouch((e => { 560 e.type === TouchType.Down && (this.isMoreIconOnClick = !0); 561 e.type === TouchType.Up && (this.isMoreIconOnClick = !1) 562 })); 563 Row.onClick((() => this.isPopupShown = !0)); 564 Row.bindPopup(this.isPopupShown, { 565 builder: { 566 builder: this.popupBuilder.bind(this) 567 }, 568 placement: Placement.Bottom, 569 popupColor: Color.White, 570 enableArrow: !1, 571 onStateChange: e => { 572 this.isPopupShown = e.isVisible; 573 e.isVisible || (this.isMoreIconOnClick = !1) 574 } 575 }); 576 t || Row.pop(); 577 ViewStackProcessor.StopGetAccessRecording() 578 })); 579 this.observeComponentCreation(((e, t) => { 580 ViewStackProcessor.StartGetAccessRecordingFor(e); 581 Image.create(PUBLIC_MORE); 582 Image.width(ImageMenuItem.imageSize); 583 Image.height(ImageMenuItem.imageSize); 584 Image.focusable(!0); 585 t || Image.pop(); 586 ViewStackProcessor.StopGetAccessRecording() 587 })); 588 Row.pop() 589 })); 590 t || If.pop(); 591 ViewStackProcessor.StopGetAccessRecording() 592 })); 593 If.pop(); 594 Row.pop(); 595 Column.pop() 596 } 597 popupBuilder(e = null) { 598 this.observeComponentCreation(((e, t) => { 599 ViewStackProcessor.StartGetAccessRecordingFor(e); 600 Column.create(); 601 Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); 602 Column.margin({ 603 top: CollapsibleMenuSection.focusPadding, 604 bottom: CollapsibleMenuSection.focusPadding 605 }); 606 Column.onAppear((() => { 607 focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) 608 })); 609 t || Column.pop(); 610 ViewStackProcessor.StopGetAccessRecording() 611 })); 612 this.observeComponentCreation(((e, t) => { 613 ViewStackProcessor.StartGetAccessRecordingFor(e); 614 ForEach.create(); 615 this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { 616 const o = e; 617 this.observeComponentCreation(((e, i) => { 618 ViewStackProcessor.StartGetAccessRecordingFor(e); 619 i ? ViewPU.create(new ImageMenuItem(this, { 620 item: o, 621 index: 1e3 * this.index + CollapsibleMenuSection.maxCountOfVisibleItems + t 622 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 623 ViewStackProcessor.StopGetAccessRecording() 624 })) 625 }), void 0, !0, !1); 626 t || ForEach.pop(); 627 ViewStackProcessor.StopGetAccessRecording() 628 })); 629 ForEach.pop(); 630 Column.pop() 631 } 632 rerender() { 633 this.updateDirtyElements() 634 } 635} 636CollapsibleMenuSection.maxCountOfVisibleItems = 1; 637CollapsibleMenuSection.focusPadding = 4; 638CollapsibleMenuSection.marginsNum = 2; 639__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); 640class TabContentItem extends ViewPU { 641 constructor(e, t, o, i = -1) { 642 super(e, o, i); 643 this.item = void 0; 644 this.index = void 0; 645 this.maxIndex = void 0; 646 this.onCustomClick = void 0; 647 this.onImageComplete = void 0; 648 this.__currentIndex = new SynchedPropertySimpleOneWayPU(t.currentIndex, this, "currentIndex"); 649 this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); 650 this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); 651 this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); 652 this.__tabWidth = new ObservedPropertySimplePU(0, this, "tabWidth"); 653 this.__imageWidth = new ObservedPropertySimplePU(24, this, "imageWidth"); 654 this.__imageHeight = new ObservedPropertySimplePU(24, this, "imageHeight"); 655 this.setInitiallyProvidedValue(t) 656 } 657 setInitiallyProvidedValue(e) { 658 void 0 !== e.item && (this.item = e.item); 659 void 0 !== e.index && (this.index = e.index); 660 void 0 !== e.maxIndex && (this.maxIndex = e.maxIndex); 661 void 0 !== e.onCustomClick && (this.onCustomClick = e.onCustomClick); 662 void 0 !== e.onImageComplete && (this.onImageComplete = e.onImageComplete); 663 void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); 664 void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); 665 void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick); 666 void 0 !== e.tabWidth && (this.tabWidth = e.tabWidth); 667 void 0 !== e.imageWidth && (this.imageWidth = e.imageWidth); 668 void 0 !== e.imageHeight && (this.imageHeight = e.imageHeight) 669 } 670 updateStateVars(e) { 671 this.__currentIndex.reset(e.currentIndex) 672 } 673 purgeVariableDependenciesOnElmtId(e) { 674 this.__currentIndex.purgeDependencyOnElmtId(e); 675 this.__isOnFocus.purgeDependencyOnElmtId(e); 676 this.__isOnHover.purgeDependencyOnElmtId(e); 677 this.__isOnClick.purgeDependencyOnElmtId(e); 678 this.__tabWidth.purgeDependencyOnElmtId(e); 679 this.__imageWidth.purgeDependencyOnElmtId(e); 680 this.__imageHeight.purgeDependencyOnElmtId(e) 681 } 682 aboutToBeDeleted() { 683 this.__currentIndex.aboutToBeDeleted(); 684 this.__isOnFocus.aboutToBeDeleted(); 685 this.__isOnHover.aboutToBeDeleted(); 686 this.__isOnClick.aboutToBeDeleted(); 687 this.__tabWidth.aboutToBeDeleted(); 688 this.__imageWidth.aboutToBeDeleted(); 689 this.__imageHeight.aboutToBeDeleted(); 690 SubscriberManager.Get().delete(this.id__()); 691 this.aboutToBeDeletedInternal() 692 } 693 get currentIndex() { 694 return this.__currentIndex.get() 695 } 696 set currentIndex(e) { 697 this.__currentIndex.set(e) 698 } 699 get isOnFocus() { 700 return this.__isOnFocus.get() 701 } 702 set isOnFocus(e) { 703 this.__isOnFocus.set(e) 704 } 705 get isOnHover() { 706 return this.__isOnHover.get() 707 } 708 set isOnHover(e) { 709 this.__isOnHover.set(e) 710 } 711 get isOnClick() { 712 return this.__isOnClick.get() 713 } 714 set isOnClick(e) { 715 this.__isOnClick.set(e) 716 } 717 get tabWidth() { 718 return this.__tabWidth.get() 719 } 720 set tabWidth(e) { 721 this.__tabWidth.set(e) 722 } 723 get imageWidth() { 724 return this.__imageWidth.get() 725 } 726 set imageWidth(e) { 727 this.__imageWidth.set(e) 728 } 729 get imageHeight() { 730 return this.__imageHeight.get() 731 } 732 set imageHeight(e) { 733 this.__imageHeight.set(e) 734 } 735 getBgColor() { 736 return this.isOnClick ? { 737 id: -1, 738 type: 10001, 739 params: ["sys.color.ohos_id_color_click_effect"], 740 bundleName: "", 741 moduleName: "" 742 } : this.isOnHover ? { 743 id: -1, 744 type: 10001, 745 params: ["sys.color.ohos_id_color_hover"], 746 bundleName: "", 747 moduleName: "" 748 } : Color.Transparent 749 } 750 getBorderAttr() { 751 return this.isOnFocus ? { 752 radius: { 753 id: -1, 754 type: 10002, 755 params: ["sys.float.ohos_id_corner_radius_clicked"], 756 bundleName: "", 757 moduleName: "" 758 }, 759 width: TabContentItem.focusBorderWidth, 760 color: { 761 id: -1, 762 type: 10001, 763 params: ["sys.color.ohos_id_color_focused_outline"], 764 bundleName: "", 765 moduleName: "" 766 }, 767 style: BorderStyle.Solid 768 } : { 769 width: 0 770 } 771 } 772 getImageScaleFactor() { 773 return this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1 774 } 775 getImageLayoutWidth() { 776 return TabContentItem.imageSize / Math.max(this.imageHeight, 1) * this.imageWidth 777 } 778 initialRender() { 779 this.observeComponentCreation(((e, t) => { 780 ViewStackProcessor.StartGetAccessRecordingFor(e); 781 Stack.create(); 782 Stack.margin({ 783 left: 0 === this.index ? TabContentItem.marginFirst : 0, 784 right: this.index === this.maxIndex ? 12 : 0 785 }); 786 t || Stack.pop(); 787 ViewStackProcessor.StopGetAccessRecording() 788 })); 789 this.observeComponentCreation(((e, t) => { 790 ViewStackProcessor.StartGetAccessRecordingFor(e); 791 Row.create(); 792 Row.height(TabTitleBar.totalHeight); 793 Row.alignItems(VerticalAlign.Center); 794 Row.justifyContent(FlexAlign.Center); 795 Row.borderRadius(TabContentItem.buttonBorderRadius); 796 Row.backgroundColor(this.getBgColor()); 797 Row.onAreaChange(((e, t) => { 798 this.tabWidth = Number(t.width) 799 })); 800 t || Row.pop(); 801 ViewStackProcessor.StopGetAccessRecording() 802 })); 803 this.observeComponentCreation(((e, t) => { 804 ViewStackProcessor.StartGetAccessRecordingFor(e); 805 Column.create(); 806 Column.justifyContent(FlexAlign.Center); 807 t || Column.pop(); 808 ViewStackProcessor.StopGetAccessRecording() 809 })); 810 this.observeComponentCreation(((e, t) => { 811 ViewStackProcessor.StartGetAccessRecordingFor(e); 812 If.create(); 813 void 0 === this.item.icon ? this.ifElseBranchUpdateFunction(0, (() => { 814 this.observeComponentCreation(((e, t) => { 815 ViewStackProcessor.StartGetAccessRecordingFor(e); 816 Text.create(this.item.title); 817 Context.animation({ 818 duration: 300 819 }); 820 Text.fontSize(this.index === this.currentIndex ? { 821 id: -1, 822 type: 10002, 823 params: ["sys.float.ohos_id_text_size_headline7"], 824 bundleName: "", 825 moduleName: "" 826 } : { 827 id: -1, 828 type: 10002, 829 params: ["sys.float.ohos_id_text_size_headline9"], 830 bundleName: "", 831 moduleName: "" 832 }); 833 Text.fontColor(this.index === this.currentIndex ? { 834 id: -1, 835 type: 10001, 836 params: ["sys.color.ohos_id_color_titlebar_text"], 837 bundleName: "", 838 moduleName: "" 839 } : { 840 id: -1, 841 type: 10001, 842 params: ["sys.color.ohos_id_color_titlebar_text_off"], 843 bundleName: "", 844 moduleName: "" 845 }); 846 Text.fontWeight(FontWeight.Medium); 847 Text.focusable(!0); 848 Context.animation(null); 849 Text.padding({ 850 top: this.index === this.currentIndex ? 6 : 10, 851 left: TabContentItem.paddingLeft, 852 bottom: 2, 853 right: TabContentItem.paddingRight 854 }); 855 Text.onFocus((() => this.isOnFocus = !0)); 856 Text.onBlur((() => this.isOnFocus = !1)); 857 Text.onHover((e => this.isOnHover = e)); 858 Text.onKeyEvent((e => { 859 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 860 e.type === KeyType.Down && (this.isOnClick = !0); 861 e.type === KeyType.Up && (this.isOnClick = !1) 862 } 863 })); 864 Text.onTouch((e => { 865 e.type === TouchType.Down && (this.isOnClick = !0); 866 e.type === TouchType.Up && (this.isOnClick = !1) 867 })); 868 Text.onClick((() => this.onCustomClick && this.onCustomClick(this.index))); 869 t || Text.pop(); 870 ViewStackProcessor.StopGetAccessRecording() 871 })); 872 Text.pop() 873 })) : this.ifElseBranchUpdateFunction(1, (() => { 874 this.observeComponentCreation(((e, t) => { 875 ViewStackProcessor.StartGetAccessRecordingFor(e); 876 Row.create(); 877 Context.animation({ 878 duration: 300 879 }); 880 Row.width(this.getImageLayoutWidth() * this.getImageScaleFactor() + TabContentItem.paddingLeft + TabContentItem.paddingRight); 881 Row.constraintSize({ 882 minWidth: TabContentItem.imageHotZoneWidth, 883 minHeight: TabContentItem.imageHotZoneWidth 884 }); 885 Context.animation(null); 886 Row.justifyContent(FlexAlign.Center); 887 Row.onFocus((() => this.isOnFocus = !0)); 888 Row.onBlur((() => this.isOnFocus = !1)); 889 Row.onHover((e => this.isOnHover = e)); 890 Row.onKeyEvent((e => { 891 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 892 e.type === KeyType.Down && (this.isOnClick = !0); 893 e.type === KeyType.Up && (this.isOnClick = !1) 894 } 895 })); 896 Row.onTouch((e => { 897 e.type === TouchType.Down && (this.isOnClick = !0); 898 e.type === TouchType.Up && (this.isOnClick = !1) 899 })); 900 Row.onClick((() => this.onCustomClick && this.onCustomClick(this.index))); 901 t || Row.pop(); 902 ViewStackProcessor.StopGetAccessRecording() 903 })); 904 this.observeComponentCreation(((e, t) => { 905 ViewStackProcessor.StartGetAccessRecordingFor(e); 906 Image.create(this.item.icon); 907 Context.animation({ 908 duration: 300 909 }); 910 Image.alt(this.item.title); 911 Image.width(this.getImageLayoutWidth()); 912 Image.height(TabContentItem.imageSize); 913 Image.objectFit(ImageFit.Fill); 914 Image.scale({ 915 x: this.getImageScaleFactor(), 916 y: this.getImageScaleFactor() 917 }); 918 Context.animation(null); 919 Image.hitTestBehavior(HitTestMode.None); 920 Image.focusable(!0); 921 Image.onComplete((e => { 922 if (this.onImageComplete) { 923 this.imageWidth = px2vp(e.width); 924 this.imageHeight = px2vp(e.height); 925 this.onImageComplete(px2vp(e.componentWidth) + TabContentItem.paddingLeft + TabContentItem.paddingRight) 926 } 927 })); 928 Image.onError((e => { 929 this.onImageComplete && this.onImageComplete(px2vp(e.componentWidth) + TabContentItem.paddingLeft + TabContentItem.paddingRight) 930 })); 931 t || Image.pop(); 932 ViewStackProcessor.StopGetAccessRecording() 933 })); 934 Row.pop() 935 })); 936 t || If.pop(); 937 ViewStackProcessor.StopGetAccessRecording() 938 })); 939 If.pop(); 940 Column.pop(); 941 Row.pop(); 942 this.observeComponentCreation(((e, t) => { 943 ViewStackProcessor.StartGetAccessRecordingFor(e); 944 If.create(); 945 this.isOnFocus && this.tabWidth > 0 ? this.ifElseBranchUpdateFunction(0, (() => { 946 this.observeComponentCreation(((e, t) => { 947 ViewStackProcessor.StartGetAccessRecordingFor(e); 948 Row.create(); 949 Row.width(this.tabWidth); 950 Row.height(TabTitleBar.totalHeight); 951 Row.hitTestBehavior(HitTestMode.None); 952 Row.borderRadius(TabContentItem.buttonBorderRadius); 953 ViewStackProcessor.visualState("focused"); 954 Row.border(this.getBorderAttr()); 955 ViewStackProcessor.visualState("normal"); 956 Row.border({ 957 radius: { 958 id: -1, 959 type: 10002, 960 params: ["sys.float.ohos_id_corner_radius_clicked"], 961 bundleName: "", 962 moduleName: "" 963 }, 964 width: 0 965 }); 966 ViewStackProcessor.visualState(); 967 t || Row.pop(); 968 ViewStackProcessor.StopGetAccessRecording() 969 })); 970 Row.pop() 971 })) : If.branchId(1); 972 t || If.pop(); 973 ViewStackProcessor.StopGetAccessRecording() 974 })); 975 If.pop(); 976 Stack.pop() 977 } 978 rerender() { 979 this.updateDirtyElements() 980 } 981} 982TabContentItem.imageSize = 24; 983TabContentItem.imageHotZoneWidth = 48; 984TabContentItem.imageMagnificationFactor = 1.4; 985TabContentItem.buttonBorderRadius = 8; 986TabContentItem.focusBorderWidth = 2; 987TabContentItem.paddingLeft = 8; 988TabContentItem.paddingRight = 8; 989TabContentItem.marginFirst = 16; 990class ImageMenuItem extends ViewPU { 991 constructor(e, t, o, i = -1) { 992 super(e, o, i); 993 this.item = void 0; 994 this.index = void 0; 995 this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); 996 this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); 997 this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); 998 this.setInitiallyProvidedValue(t) 999 } 1000 setInitiallyProvidedValue(e) { 1001 void 0 !== e.item && (this.item = e.item); 1002 void 0 !== e.index && (this.index = e.index); 1003 void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); 1004 void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); 1005 void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) 1006 } 1007 updateStateVars(e) {} 1008 purgeVariableDependenciesOnElmtId(e) { 1009 this.__isOnFocus.purgeDependencyOnElmtId(e); 1010 this.__isOnHover.purgeDependencyOnElmtId(e); 1011 this.__isOnClick.purgeDependencyOnElmtId(e) 1012 } 1013 aboutToBeDeleted() { 1014 this.__isOnFocus.aboutToBeDeleted(); 1015 this.__isOnHover.aboutToBeDeleted(); 1016 this.__isOnClick.aboutToBeDeleted(); 1017 SubscriberManager.Get().delete(this.id__()); 1018 this.aboutToBeDeletedInternal() 1019 } 1020 get isOnFocus() { 1021 return this.__isOnFocus.get() 1022 } 1023 set isOnFocus(e) { 1024 this.__isOnFocus.set(e) 1025 } 1026 get isOnHover() { 1027 return this.__isOnHover.get() 1028 } 1029 set isOnHover(e) { 1030 this.__isOnHover.set(e) 1031 } 1032 get isOnClick() { 1033 return this.__isOnClick.get() 1034 } 1035 set isOnClick(e) { 1036 this.__isOnClick.set(e) 1037 } 1038 getFgColor() { 1039 return this.isOnClick ? { 1040 id: -1, 1041 type: 10001, 1042 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 1043 bundleName: "", 1044 moduleName: "" 1045 } : { 1046 id: -1, 1047 type: 10001, 1048 params: ["sys.color.ohos_id_color_titlebar_icon"], 1049 bundleName: "", 1050 moduleName: "" 1051 } 1052 } 1053 getBgColor() { 1054 return this.isOnClick ? { 1055 id: -1, 1056 type: 10001, 1057 params: ["sys.color.ohos_id_color_click_effect"], 1058 bundleName: "", 1059 moduleName: "" 1060 } : this.isOnHover ? { 1061 id: -1, 1062 type: 10001, 1063 params: ["sys.color.ohos_id_color_hover"], 1064 bundleName: "", 1065 moduleName: "" 1066 } : Color.Transparent 1067 } 1068 initialRender() { 1069 this.observeComponentCreation(((e, t) => { 1070 ViewStackProcessor.StartGetAccessRecordingFor(e); 1071 Row.create(); 1072 Row.width(ImageMenuItem.imageHotZoneWidth); 1073 Row.height(ImageMenuItem.imageHotZoneWidth); 1074 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 1075 Row.foregroundColor(this.getFgColor()); 1076 Row.backgroundColor(this.getBgColor()); 1077 Row.justifyContent(FlexAlign.Center); 1078 Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); 1079 ViewStackProcessor.visualState("focused"); 1080 Row.border({ 1081 radius: { 1082 id: -1, 1083 type: 10002, 1084 params: ["sys.float.ohos_id_corner_radius_clicked"], 1085 bundleName: "", 1086 moduleName: "" 1087 }, 1088 width: ImageMenuItem.focusBorderWidth, 1089 color: { 1090 id: -1, 1091 type: 10001, 1092 params: ["sys.color.ohos_id_color_focused_outline"], 1093 bundleName: "", 1094 moduleName: "" 1095 }, 1096 style: BorderStyle.Solid 1097 }); 1098 ViewStackProcessor.visualState("normal"); 1099 Row.border({ 1100 radius: { 1101 id: -1, 1102 type: 10002, 1103 params: ["sys.float.ohos_id_corner_radius_clicked"], 1104 bundleName: "", 1105 moduleName: "" 1106 }, 1107 width: 0 1108 }); 1109 ViewStackProcessor.visualState(); 1110 Row.onFocus((() => { 1111 this.item.isEnabled && (this.isOnFocus = !0) 1112 })); 1113 Row.onBlur((() => this.isOnFocus = !1)); 1114 Row.onHover((e => { 1115 this.item.isEnabled && (this.isOnHover = e) 1116 })); 1117 Row.onKeyEvent((e => { 1118 if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { 1119 e.type === KeyType.Down && (this.isOnClick = !0); 1120 e.type === KeyType.Up && (this.isOnClick = !1) 1121 } 1122 })); 1123 Row.onTouch((e => { 1124 if (this.item.isEnabled) { 1125 e.type === TouchType.Down && (this.isOnClick = !0); 1126 e.type === TouchType.Up && (this.isOnClick = !1) 1127 } 1128 })); 1129 Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); 1130 t || Row.pop(); 1131 ViewStackProcessor.StopGetAccessRecording() 1132 })); 1133 this.observeComponentCreation(((e, t) => { 1134 ViewStackProcessor.StartGetAccessRecordingFor(e); 1135 Image.create(this.item.value); 1136 Image.width(ImageMenuItem.imageSize); 1137 Image.height(ImageMenuItem.imageSize); 1138 Image.focusable(this.item.isEnabled); 1139 Image.key(ImageMenuItem.focusablePrefix + this.index); 1140 t || Image.pop(); 1141 ViewStackProcessor.StopGetAccessRecording() 1142 })); 1143 Row.pop() 1144 } 1145 rerender() { 1146 this.updateDirtyElements() 1147 } 1148} 1149ImageMenuItem.imageSize = 24; 1150ImageMenuItem.imageHotZoneWidth = 48; 1151ImageMenuItem.buttonBorderRadius = 8; 1152ImageMenuItem.focusBorderWidth = 2; 1153ImageMenuItem.disabledImageOpacity = .4; 1154ImageMenuItem.focusablePrefix = "Id-TabTitleBar-ImageMenuItem-"; 1155export default { 1156 TabTitleBar: TabTitleBar 1157};