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 a = e.length - 1; a >= 0; a--)(s = e[a]) && (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"; 26const PUBLIC_BACK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0GiIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpgIzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLnHedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+sPy9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6zELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC"; 27export class ComposeTitleBar extends ViewPU { 28 constructor(e, t, o, i = -1) { 29 super(e, o, i); 30 this.item = void 0; 31 this.title = void 0; 32 this.subtitle = void 0; 33 this.menuItems = void 0; 34 this.__titleMaxWidth = new ObservedPropertySimplePU(0, this, "titleMaxWidth"); 35 this.__backActive = new ObservedPropertySimplePU(!1, this, "backActive"); 36 this.setInitiallyProvidedValue(t) 37 } 38 setInitiallyProvidedValue(e) { 39 void 0 !== e.item && (this.item = e.item); 40 void 0 !== e.title && (this.title = e.title); 41 void 0 !== e.subtitle && (this.subtitle = e.subtitle); 42 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 43 void 0 !== e.titleMaxWidth && (this.titleMaxWidth = e.titleMaxWidth); 44 void 0 !== e.backActive && (this.backActive = e.backActive) 45 } 46 updateStateVars(e) {} 47 purgeVariableDependenciesOnElmtId(e) { 48 this.__titleMaxWidth.purgeDependencyOnElmtId(e); 49 this.__backActive.purgeDependencyOnElmtId(e) 50 } 51 aboutToBeDeleted() { 52 this.__titleMaxWidth.aboutToBeDeleted(); 53 this.__backActive.aboutToBeDeleted(); 54 SubscriberManager.Get().delete(this.id__()); 55 this.aboutToBeDeletedInternal() 56 } 57 get titleMaxWidth() { 58 return this.__titleMaxWidth.get() 59 } 60 set titleMaxWidth(e) { 61 this.__titleMaxWidth.set(e) 62 } 63 get backActive() { 64 return this.__backActive.get() 65 } 66 set backActive(e) { 67 this.__backActive.set(e) 68 } 69 initialRender() { 70 this.observeComponentCreation(((e, t) => { 71 ViewStackProcessor.StartGetAccessRecordingFor(e); 72 Flex.create({ 73 justifyContent: FlexAlign.SpaceBetween, 74 alignItems: ItemAlign.Stretch 75 }); 76 Flex.width("100%"); 77 Flex.height(ComposeTitleBar.totalHeight); 78 Flex.backgroundColor({ 79 id: -1, 80 type: 10001, 81 params: ["sys.color.ohos_id_color_background"], 82 bundleName: "", 83 moduleName: "" 84 }); 85 Flex.onAreaChange(((e, t) => { 86 let o = Number(t.width); 87 if (void 0 !== this.menuItems) { 88 let e = this.menuItems.length; 89 e >= CollapsibleMenuSection.maxCountOfVisibleItems ? o -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems : e > 0 && (o -= ImageMenuItem.imageHotZoneWidth * e) 90 } 91 this.titleMaxWidth = o; 92 this.titleMaxWidth -= ComposeTitleBar.leftPadding; 93 this.titleMaxWidth -= ImageMenuItem.imageHotZoneWidth; 94 void 0 !== this.item && (this.titleMaxWidth -= ComposeTitleBar.portraitImageLeftPadding + ComposeTitleBar.portraitImageSize + ComposeTitleBar.portraitImageRightPadding); 95 this.titleMaxWidth -= ComposeTitleBar.rightPadding 96 })); 97 t || Flex.pop(); 98 ViewStackProcessor.StopGetAccessRecording() 99 })); 100 this.observeComponentCreation(((e, t) => { 101 ViewStackProcessor.StartGetAccessRecordingFor(e); 102 Row.create(); 103 Row.margin({ 104 left: { 105 id: -1, 106 type: 10002, 107 params: ["sys.float.ohos_id_default_padding_start"], 108 bundleName: "", 109 moduleName: "" 110 } 111 }); 112 t || Row.pop(); 113 ViewStackProcessor.StopGetAccessRecording() 114 })); 115 this.observeComponentCreation(((e, t) => { 116 ViewStackProcessor.StartGetAccessRecordingFor(e); 117 Navigator.create(); 118 Navigator.active(this.backActive); 119 t || Navigator.pop(); 120 ViewStackProcessor.StopGetAccessRecording() 121 })); 122 Navigator.pop(); 123 this.observeComponentCreation(((e, t) => { 124 ViewStackProcessor.StartGetAccessRecordingFor(e); 125 t ? ViewPU.create(new ImageMenuItem(this, { 126 item: { 127 value: PUBLIC_BACK, 128 isEnabled: !0, 129 action: () => this.backActive = !0 130 }, 131 index: -1 132 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 133 ViewStackProcessor.StopGetAccessRecording() 134 })); 135 this.observeComponentCreation(((e, t) => { 136 ViewStackProcessor.StartGetAccessRecordingFor(e); 137 If.create(); 138 void 0 !== this.item ? this.ifElseBranchUpdateFunction(0, (() => { 139 this.observeComponentCreation(((e, t) => { 140 ViewStackProcessor.StartGetAccessRecordingFor(e); 141 Image.create(this.item.value); 142 Image.width(ComposeTitleBar.portraitImageSize); 143 Image.height(ComposeTitleBar.portraitImageSize); 144 Image.margin({ 145 left: { 146 id: -1, 147 type: 10002, 148 params: ["sys.float.ohos_id_text_paragraph_margin_xs"], 149 bundleName: "", 150 moduleName: "" 151 }, 152 right: { 153 id: -1, 154 type: 10002, 155 params: ["sys.float.ohos_id_text_paragraph_margin_m"], 156 bundleName: "", 157 moduleName: "" 158 } 159 }); 160 Image.focusable(!1); 161 Image.borderRadius(ImageMenuItem.buttonBorderRadius); 162 t || Image.pop(); 163 ViewStackProcessor.StopGetAccessRecording() 164 })) 165 })) : If.branchId(1); 166 t || If.pop(); 167 ViewStackProcessor.StopGetAccessRecording() 168 })); 169 If.pop(); 170 this.observeComponentCreation(((e, t) => { 171 ViewStackProcessor.StartGetAccessRecordingFor(e); 172 Column.create(); 173 Column.justifyContent(FlexAlign.Start); 174 Column.alignItems(HorizontalAlign.Start); 175 Column.constraintSize({ 176 maxWidth: this.titleMaxWidth 177 }); 178 t || Column.pop(); 179 ViewStackProcessor.StopGetAccessRecording() 180 })); 181 this.observeComponentCreation(((e, t) => { 182 ViewStackProcessor.StartGetAccessRecordingFor(e); 183 If.create(); 184 void 0 !== this.title ? this.ifElseBranchUpdateFunction(0, (() => { 185 this.observeComponentCreation(((e, t) => { 186 ViewStackProcessor.StartGetAccessRecordingFor(e); 187 Row.create(); 188 Row.justifyContent(FlexAlign.Start); 189 t || Row.pop(); 190 ViewStackProcessor.StopGetAccessRecording() 191 })); 192 this.observeComponentCreation(((e, t) => { 193 ViewStackProcessor.StartGetAccessRecordingFor(e); 194 Text.create(this.title); 195 Text.fontWeight(FontWeight.Medium); 196 Text.fontSize({ 197 id: -1, 198 type: 10002, 199 params: ["sys.float.ohos_id_text_size_headline8"], 200 bundleName: "", 201 moduleName: "" 202 }); 203 Text.fontColor({ 204 id: -1, 205 type: 10001, 206 params: ["sys.color.ohos_id_color_titlebar_text"], 207 bundleName: "", 208 moduleName: "" 209 }); 210 Text.maxLines(void 0 !== this.subtitle ? 1 : 2); 211 Text.textOverflow({ 212 overflow: TextOverflow.Ellipsis 213 }); 214 Text.constraintSize({ 215 maxWidth: this.titleMaxWidth 216 }); 217 t || Text.pop(); 218 ViewStackProcessor.StopGetAccessRecording() 219 })); 220 Text.pop(); 221 Row.pop() 222 })) : If.branchId(1); 223 t || If.pop(); 224 ViewStackProcessor.StopGetAccessRecording() 225 })); 226 If.pop(); 227 this.observeComponentCreation(((e, t) => { 228 ViewStackProcessor.StartGetAccessRecordingFor(e); 229 If.create(); 230 void 0 !== this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => { 231 this.observeComponentCreation(((e, t) => { 232 ViewStackProcessor.StartGetAccessRecordingFor(e); 233 Row.create(); 234 Row.justifyContent(FlexAlign.Start); 235 t || Row.pop(); 236 ViewStackProcessor.StopGetAccessRecording() 237 })); 238 this.observeComponentCreation(((e, t) => { 239 ViewStackProcessor.StartGetAccessRecordingFor(e); 240 Text.create(this.subtitle); 241 Text.fontSize({ 242 id: -1, 243 type: 10002, 244 params: ["sys.float.ohos_id_text_size_over_line"], 245 bundleName: "", 246 moduleName: "" 247 }); 248 Text.fontColor({ 249 id: -1, 250 type: 10001, 251 params: ["sys.color.ohos_id_color_titlebar_subtitle_text"], 252 bundleName: "", 253 moduleName: "" 254 }); 255 Text.maxLines(1); 256 Text.textOverflow({ 257 overflow: TextOverflow.Ellipsis 258 }); 259 Text.constraintSize({ 260 maxWidth: this.titleMaxWidth 261 }); 262 t || Text.pop(); 263 ViewStackProcessor.StopGetAccessRecording() 264 })); 265 Text.pop(); 266 Row.pop() 267 })) : If.branchId(1); 268 t || If.pop(); 269 ViewStackProcessor.StopGetAccessRecording() 270 })); 271 If.pop(); 272 Column.pop(); 273 Row.pop(); 274 this.observeComponentCreation(((e, t) => { 275 ViewStackProcessor.StartGetAccessRecordingFor(e); 276 If.create(); 277 void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { 278 this.observeComponentCreation(((e, t) => { 279 ViewStackProcessor.StartGetAccessRecordingFor(e); 280 t ? ViewPU.create(new CollapsibleMenuSection(this, { 281 menuItems: this.menuItems, 282 index: 1 + ComposeTitleBar.instanceCount++ 283 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 284 ViewStackProcessor.StopGetAccessRecording() 285 })) 286 })) : If.branchId(1); 287 t || If.pop(); 288 ViewStackProcessor.StopGetAccessRecording() 289 })); 290 If.pop(); 291 Flex.pop() 292 } 293 rerender() { 294 this.updateDirtyElements() 295 } 296} 297ComposeTitleBar.totalHeight = 56; 298ComposeTitleBar.leftPadding = 12; 299ComposeTitleBar.rightPadding = 12; 300ComposeTitleBar.portraitImageSize = 40; 301ComposeTitleBar.portraitImageLeftPadding = 4; 302ComposeTitleBar.portraitImageRightPadding = 16; 303ComposeTitleBar.instanceCount = 0; 304class CollapsibleMenuSection extends ViewPU { 305 constructor(e, t, o, i = -1) { 306 super(e, o, i); 307 this.menuItems = void 0; 308 this.index = void 0; 309 this.firstFocusableIndex = -1; 310 this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); 311 this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); 312 this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); 313 this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); 314 this.setInitiallyProvidedValue(t) 315 } 316 setInitiallyProvidedValue(e) { 317 void 0 !== e.menuItems && (this.menuItems = e.menuItems); 318 void 0 !== e.index && (this.index = e.index); 319 void 0 !== e.firstFocusableIndex && (this.firstFocusableIndex = e.firstFocusableIndex); 320 void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); 321 void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); 322 void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); 323 void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) 324 } 325 updateStateVars(e) {} 326 purgeVariableDependenciesOnElmtId(e) { 327 this.__isPopupShown.purgeDependencyOnElmtId(e); 328 this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); 329 this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); 330 this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) 331 } 332 aboutToBeDeleted() { 333 this.__isPopupShown.aboutToBeDeleted(); 334 this.__isMoreIconOnFocus.aboutToBeDeleted(); 335 this.__isMoreIconOnHover.aboutToBeDeleted(); 336 this.__isMoreIconOnClick.aboutToBeDeleted(); 337 SubscriberManager.Get().delete(this.id__()); 338 this.aboutToBeDeletedInternal() 339 } 340 get isPopupShown() { 341 return this.__isPopupShown.get() 342 } 343 set isPopupShown(e) { 344 this.__isPopupShown.set(e) 345 } 346 get isMoreIconOnFocus() { 347 return this.__isMoreIconOnFocus.get() 348 } 349 set isMoreIconOnFocus(e) { 350 this.__isMoreIconOnFocus.set(e) 351 } 352 get isMoreIconOnHover() { 353 return this.__isMoreIconOnHover.get() 354 } 355 set isMoreIconOnHover(e) { 356 this.__isMoreIconOnHover.set(e) 357 } 358 get isMoreIconOnClick() { 359 return this.__isMoreIconOnClick.get() 360 } 361 set isMoreIconOnClick(e) { 362 this.__isMoreIconOnClick.set(e) 363 } 364 getMoreIconFgColor() { 365 return this.isMoreIconOnClick ? { 366 id: -1, 367 type: 10001, 368 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 369 bundleName: "", 370 moduleName: "" 371 } : { 372 id: -1, 373 type: 10001, 374 params: ["sys.color.ohos_id_color_titlebar_icon"], 375 bundleName: "", 376 moduleName: "" 377 } 378 } 379 getMoreIconBgColor() { 380 return this.isMoreIconOnClick ? { 381 id: -1, 382 type: 10001, 383 params: ["sys.color.ohos_id_color_click_effect"], 384 bundleName: "", 385 moduleName: "" 386 } : this.isMoreIconOnHover ? { 387 id: -1, 388 type: 10001, 389 params: ["sys.color.ohos_id_color_hover"], 390 bundleName: "", 391 moduleName: "" 392 } : Color.Transparent 393 } 394 aboutToAppear() { 395 this.menuItems.forEach(((e, t) => { 396 e.isEnabled && -1 == this.firstFocusableIndex && t > CollapsibleMenuSection.maxCountOfVisibleItems - 2 && (this.firstFocusableIndex = 1e3 * this.index + t + 1) 397 })) 398 } 399 initialRender() { 400 this.observeComponentCreation(((e, t) => { 401 ViewStackProcessor.StartGetAccessRecordingFor(e); 402 Column.create(); 403 Column.height("100%"); 404 Column.margin({ 405 right: { 406 id: -1, 407 type: 10002, 408 params: ["sys.float.ohos_id_default_padding_end"], 409 bundleName: "", 410 moduleName: "" 411 } 412 }); 413 Column.justifyContent(FlexAlign.Center); 414 t || Column.pop(); 415 ViewStackProcessor.StopGetAccessRecording() 416 })); 417 this.observeComponentCreation(((e, t) => { 418 ViewStackProcessor.StartGetAccessRecordingFor(e); 419 Row.create(); 420 t || Row.pop(); 421 ViewStackProcessor.StopGetAccessRecording() 422 })); 423 this.observeComponentCreation(((e, t) => { 424 ViewStackProcessor.StartGetAccessRecordingFor(e); 425 If.create(); 426 this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { 427 this.observeComponentCreation(((e, t) => { 428 ViewStackProcessor.StartGetAccessRecordingFor(e); 429 ForEach.create(); 430 this.forEachUpdateFunction(e, this.menuItems, ((e, t) => { 431 const o = e; 432 this.observeComponentCreation(((e, i) => { 433 ViewStackProcessor.StartGetAccessRecordingFor(e); 434 i ? ViewPU.create(new ImageMenuItem(this, { 435 item: o, 436 index: 1e3 * this.index + t + 1 437 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 438 ViewStackProcessor.StopGetAccessRecording() 439 })) 440 }), void 0, !0, !1); 441 t || ForEach.pop(); 442 ViewStackProcessor.StopGetAccessRecording() 443 })); 444 ForEach.pop() 445 })) : this.ifElseBranchUpdateFunction(1, (() => { 446 this.observeComponentCreation(((e, t) => { 447 ViewStackProcessor.StartGetAccessRecordingFor(e); 448 ForEach.create(); 449 this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), ((e, t) => { 450 const o = e; 451 this.observeComponentCreation(((e, i) => { 452 ViewStackProcessor.StartGetAccessRecordingFor(e); 453 i ? ViewPU.create(new ImageMenuItem(this, { 454 item: o, 455 index: 1e3 * this.index + t + 1 456 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 457 ViewStackProcessor.StopGetAccessRecording() 458 })) 459 }), void 0, !0, !1); 460 t || ForEach.pop(); 461 ViewStackProcessor.StopGetAccessRecording() 462 })); 463 ForEach.pop(); 464 this.observeComponentCreation(((e, t) => { 465 ViewStackProcessor.StartGetAccessRecordingFor(e); 466 Row.create(); 467 Row.width(ImageMenuItem.imageHotZoneWidth); 468 Row.height(ImageMenuItem.imageHotZoneWidth); 469 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 470 Row.foregroundColor(this.getMoreIconFgColor()); 471 Row.backgroundColor(this.getMoreIconBgColor()); 472 Row.justifyContent(FlexAlign.Center); 473 ViewStackProcessor.visualState("focused"); 474 Row.border({ 475 radius: { 476 id: -1, 477 type: 10002, 478 params: ["sys.float.ohos_id_corner_radius_clicked"], 479 bundleName: "", 480 moduleName: "" 481 }, 482 width: ImageMenuItem.focusBorderWidth, 483 color: { 484 id: -1, 485 type: 10001, 486 params: ["sys.color.ohos_id_color_focused_outline"], 487 bundleName: "", 488 moduleName: "" 489 }, 490 style: BorderStyle.Solid 491 }); 492 ViewStackProcessor.visualState("normal"); 493 Row.border({ 494 radius: { 495 id: -1, 496 type: 10002, 497 params: ["sys.float.ohos_id_corner_radius_clicked"], 498 bundleName: "", 499 moduleName: "" 500 }, 501 width: 0 502 }); 503 ViewStackProcessor.visualState(); 504 Row.onFocus((() => this.isMoreIconOnFocus = !0)); 505 Row.onBlur((() => this.isMoreIconOnFocus = !1)); 506 Row.onHover((e => this.isMoreIconOnHover = e)); 507 Row.onKeyEvent((e => { 508 if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { 509 e.type === KeyType.Down && (this.isMoreIconOnClick = !0); 510 e.type === KeyType.Up && (this.isMoreIconOnClick = !1) 511 } 512 })); 513 Row.onTouch((e => { 514 e.type === TouchType.Down && (this.isMoreIconOnClick = !0); 515 e.type === TouchType.Up && (this.isMoreIconOnClick = !1) 516 })); 517 Row.onClick((() => this.isPopupShown = !0)); 518 Row.bindPopup(this.isPopupShown, { 519 builder: { 520 builder: this.popupBuilder.bind(this) 521 }, 522 placement: Placement.Bottom, 523 popupColor: Color.White, 524 enableArrow: !1, 525 onStateChange: e => { 526 this.isPopupShown = e.isVisible; 527 e.isVisible || (this.isMoreIconOnClick = !1) 528 } 529 }); 530 t || Row.pop(); 531 ViewStackProcessor.StopGetAccessRecording() 532 })); 533 this.observeComponentCreation(((e, t) => { 534 ViewStackProcessor.StartGetAccessRecordingFor(e); 535 Image.create(PUBLIC_MORE); 536 Image.width(ImageMenuItem.imageSize); 537 Image.height(ImageMenuItem.imageSize); 538 Image.focusable(!0); 539 t || Image.pop(); 540 ViewStackProcessor.StopGetAccessRecording() 541 })); 542 Row.pop() 543 })); 544 t || If.pop(); 545 ViewStackProcessor.StopGetAccessRecording() 546 })); 547 If.pop(); 548 Row.pop(); 549 Column.pop() 550 } 551 popupBuilder(e = null) { 552 this.observeComponentCreation(((e, t) => { 553 ViewStackProcessor.StartGetAccessRecordingFor(e); 554 Column.create(); 555 Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); 556 Column.margin({ 557 top: CollapsibleMenuSection.focusPadding, 558 bottom: CollapsibleMenuSection.focusPadding 559 }); 560 Column.onAppear((() => { 561 focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) 562 })); 563 t || Column.pop(); 564 ViewStackProcessor.StopGetAccessRecording() 565 })); 566 this.observeComponentCreation(((e, t) => { 567 ViewStackProcessor.StartGetAccessRecordingFor(e); 568 ForEach.create(); 569 this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { 570 const o = e; 571 this.observeComponentCreation(((e, i) => { 572 ViewStackProcessor.StartGetAccessRecordingFor(e); 573 i ? ViewPU.create(new ImageMenuItem(this, { 574 item: o, 575 index: 1e3 * this.index + CollapsibleMenuSection.maxCountOfVisibleItems + t 576 }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); 577 ViewStackProcessor.StopGetAccessRecording() 578 })) 579 }), void 0, !0, !1); 580 t || ForEach.pop(); 581 ViewStackProcessor.StopGetAccessRecording() 582 })); 583 ForEach.pop(); 584 Column.pop() 585 } 586 rerender() { 587 this.updateDirtyElements() 588 } 589} 590CollapsibleMenuSection.maxCountOfVisibleItems = 3; 591CollapsibleMenuSection.focusPadding = 4; 592CollapsibleMenuSection.marginsNum = 2; 593__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); 594class ImageMenuItem extends ViewPU { 595 constructor(e, t, o, i = -1) { 596 super(e, o, i); 597 this.item = void 0; 598 this.index = void 0; 599 this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); 600 this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); 601 this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); 602 this.setInitiallyProvidedValue(t) 603 } 604 setInitiallyProvidedValue(e) { 605 void 0 !== e.item && (this.item = e.item); 606 void 0 !== e.index && (this.index = e.index); 607 void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); 608 void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); 609 void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) 610 } 611 updateStateVars(e) {} 612 purgeVariableDependenciesOnElmtId(e) { 613 this.__isOnFocus.purgeDependencyOnElmtId(e); 614 this.__isOnHover.purgeDependencyOnElmtId(e); 615 this.__isOnClick.purgeDependencyOnElmtId(e) 616 } 617 aboutToBeDeleted() { 618 this.__isOnFocus.aboutToBeDeleted(); 619 this.__isOnHover.aboutToBeDeleted(); 620 this.__isOnClick.aboutToBeDeleted(); 621 SubscriberManager.Get().delete(this.id__()); 622 this.aboutToBeDeletedInternal() 623 } 624 get isOnFocus() { 625 return this.__isOnFocus.get() 626 } 627 set isOnFocus(e) { 628 this.__isOnFocus.set(e) 629 } 630 get isOnHover() { 631 return this.__isOnHover.get() 632 } 633 set isOnHover(e) { 634 this.__isOnHover.set(e) 635 } 636 get isOnClick() { 637 return this.__isOnClick.get() 638 } 639 set isOnClick(e) { 640 this.__isOnClick.set(e) 641 } 642 getFgColor() { 643 return this.isOnClick ? { 644 id: -1, 645 type: 10001, 646 params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], 647 bundleName: "", 648 moduleName: "" 649 } : { 650 id: -1, 651 type: 10001, 652 params: ["sys.color.ohos_id_color_titlebar_icon"], 653 bundleName: "", 654 moduleName: "" 655 } 656 } 657 getBgColor() { 658 return this.isOnClick ? { 659 id: -1, 660 type: 10001, 661 params: ["sys.color.ohos_id_color_click_effect"], 662 bundleName: "", 663 moduleName: "" 664 } : this.isOnHover ? { 665 id: -1, 666 type: 10001, 667 params: ["sys.color.ohos_id_color_hover"], 668 bundleName: "", 669 moduleName: "" 670 } : Color.Transparent 671 } 672 initialRender() { 673 this.observeComponentCreation(((e, t) => { 674 ViewStackProcessor.StartGetAccessRecordingFor(e); 675 Row.create(); 676 Row.width(ImageMenuItem.imageHotZoneWidth); 677 Row.height(ImageMenuItem.imageHotZoneWidth); 678 Row.borderRadius(ImageMenuItem.buttonBorderRadius); 679 Row.foregroundColor(this.getFgColor()); 680 Row.backgroundColor(this.getBgColor()); 681 Row.justifyContent(FlexAlign.Center); 682 Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); 683 ViewStackProcessor.visualState("focused"); 684 Row.border({ 685 radius: { 686 id: -1, 687 type: 10002, 688 params: ["sys.float.ohos_id_corner_radius_clicked"], 689 bundleName: "", 690 moduleName: "" 691 }, 692 width: ImageMenuItem.focusBorderWidth, 693 color: { 694 id: -1, 695 type: 10001, 696 params: ["sys.color.ohos_id_color_focused_outline"], 697 bundleName: "", 698 moduleName: "" 699 }, 700 style: BorderStyle.Solid 701 }); 702 ViewStackProcessor.visualState("normal"); 703 Row.border({ 704 radius: { 705 id: -1, 706 type: 10002, 707 params: ["sys.float.ohos_id_corner_radius_clicked"], 708 bundleName: "", 709 moduleName: "" 710 }, 711 width: 0 712 }); 713 ViewStackProcessor.visualState(); 714 Row.onFocus((() => { 715 this.item.isEnabled && (this.isOnFocus = !0) 716 })); 717 Row.onBlur((() => this.isOnFocus = !1)); 718 Row.onHover((e => { 719 this.item.isEnabled && (this.isOnHover = e) 720 })); 721 Row.onKeyEvent((e => { 722 if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { 723 e.type === KeyType.Down && (this.isOnClick = !0); 724 e.type === KeyType.Up && (this.isOnClick = !1) 725 } 726 })); 727 Row.onTouch((e => { 728 if (this.item.isEnabled) { 729 e.type === TouchType.Down && (this.isOnClick = !0); 730 e.type === TouchType.Up && (this.isOnClick = !1) 731 } 732 })); 733 Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); 734 t || Row.pop(); 735 ViewStackProcessor.StopGetAccessRecording() 736 })); 737 this.observeComponentCreation(((e, t) => { 738 ViewStackProcessor.StartGetAccessRecordingFor(e); 739 Image.create(this.item.value); 740 Image.width(ImageMenuItem.imageSize); 741 Image.height(ImageMenuItem.imageSize); 742 Image.focusable(this.item.isEnabled); 743 Image.key(ImageMenuItem.focusablePrefix + this.index); 744 t || Image.pop(); 745 ViewStackProcessor.StopGetAccessRecording() 746 })); 747 Row.pop() 748 } 749 rerender() { 750 this.updateDirtyElements() 751 } 752} 753ImageMenuItem.imageSize = 24; 754ImageMenuItem.imageHotZoneWidth = 48; 755ImageMenuItem.buttonBorderRadius = 8; 756ImageMenuItem.focusBorderWidth = 2; 757ImageMenuItem.disabledImageOpacity = .4; 758ImageMenuItem.focusablePrefix = "Id-ComposeTitleBar-ImageMenuItem-"; 759export default { 760 ComposeTitleBar: ComposeTitleBar 761};