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