From 22beb46bd63b92873646702543fa24b35a9f3757 Mon Sep 17 00:00:00 2001 From: "wuzheng (G)" Date: Wed, 2 Aug 2023 09:23:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=87=E9=A2=98=E6=A0=8F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wuzheng (G) --- interface/composetitlebar/BUILD.gn | 46 + interface/composetitlebar/composetitlebar.cpp | 49 + interface/composetitlebar/composetitlebar.js | 714 ++++++++++++++ interface/editabletitlebar/BUILD.gn | 46 + .../editabletitlebar/editabletitlebar.cpp | 49 + .../editabletitlebar/editabletitlebar.js | 435 ++++++++ interface/selecttitlebar/BUILD.gn | 46 + interface/selecttitlebar/selecttitlebar.cpp | 49 + interface/selecttitlebar/selecttitlebar.js | 785 +++++++++++++++ interface/tabtitlebar/BUILD.gn | 46 + interface/tabtitlebar/tabtitlebar.cpp | 49 + interface/tabtitlebar/tabtitlebar.js | 930 ++++++++++++++++++ source/ComposeTitleBar/ComposeTitleBar.ets | 369 +++++++ source/EditableTitleBar/EditableTitleBar.ets | 282 ++++++ source/SelectTitleBar/SelectTitleBar.ets | 383 ++++++++ source/TabTitleBar/TabTitleBar.ets | 478 +++++++++ 16 files changed, 4756 insertions(+) create mode 100755 interface/composetitlebar/BUILD.gn create mode 100644 interface/composetitlebar/composetitlebar.cpp create mode 100644 interface/composetitlebar/composetitlebar.js create mode 100755 interface/editabletitlebar/BUILD.gn create mode 100644 interface/editabletitlebar/editabletitlebar.cpp create mode 100644 interface/editabletitlebar/editabletitlebar.js create mode 100755 interface/selecttitlebar/BUILD.gn create mode 100644 interface/selecttitlebar/selecttitlebar.cpp create mode 100644 interface/selecttitlebar/selecttitlebar.js create mode 100755 interface/tabtitlebar/BUILD.gn create mode 100644 interface/tabtitlebar/tabtitlebar.cpp create mode 100644 interface/tabtitlebar/tabtitlebar.js create mode 100755 source/ComposeTitleBar/ComposeTitleBar.ets create mode 100755 source/EditableTitleBar/EditableTitleBar.ets create mode 100755 source/SelectTitleBar/SelectTitleBar.ets create mode 100755 source/TabTitleBar/TabTitleBar.ets diff --git a/interface/composetitlebar/BUILD.gn b/interface/composetitlebar/BUILD.gn new file mode 100755 index 0000000..1738942 --- /dev/null +++ b/interface/composetitlebar/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_composetitlebar_abc") { + src_js = rebase_path("composetitlebar.js") + dst_file = rebase_path(target_out_dir + "/composetitlebar.abc") + in_puts = [ "composetitlebar.js" ] + out_puts = [ target_out_dir + "/composetitlebar.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("composetitlebar_abc") { + input = get_label_info(":gen_composetitlebar_abc", "target_out_dir") + "/composetitlebar.abc" + output = target_out_dir + "/composetitlebar_abc.o" + dep = ":gen_composetitlebar_abc" +} + +ohos_shared_library("composetitlebar") { + sources = [ "composetitlebar.cpp" ] + + deps = [ ":composetitlebar_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + subsystem_name = "hmos_ext" + part_name = "ui_advanced" + + relative_install_dir = "module/arkui/advanced" +} diff --git a/interface/composetitlebar/composetitlebar.cpp b/interface/composetitlebar/composetitlebar.cpp new file mode 100644 index 0000000..efe49d9 --- /dev/null +++ b/interface/composetitlebar/composetitlebar.cpp @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_composetitlebar_abc_start[]; +extern const char _binary_composetitlebar_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_ComposeTitleBar_GetABCCode(const char **buf, int *buflen) + { + if (buf != nullptr) { + *buf = _binary_composetitlebar_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_composetitlebar_abc_end - _binary_composetitlebar_abc_start; + } + } + + +static napi_module composetitlebarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.ComposeTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void composetitlebarRegisterModule(void) +{ + napi_module_register(&composetitlebarModule); +} \ No newline at end of file diff --git a/interface/composetitlebar/composetitlebar.js b/interface/composetitlebar/composetitlebar.js new file mode 100644 index 0000000..cff24b9 --- /dev/null +++ b/interface/composetitlebar/composetitlebar.js @@ -0,0 +1,714 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var __decorate = this && this.__decorate || function(e, t, o, i) { + var s, r = arguments.length, + n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; + if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i); + else + for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n); + return r > 3 && n && Object.defineProperty(t, o, n), n +}; +const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; +const 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"; +const 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"; +export class ComposeTitleBar extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.item = void 0; + this.title = void 0; + this.subtitle = void 0; + this.menuItems = void 0; + this.__titleMaxWidth = new ObservedPropertySimplePU(0, this, "titleMaxWidth"); + this.__isItemOnFocus = new ObservedPropertySimplePU(!1, this, "isItemOnFocus"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.item && (this.item = e.item); + void 0 !== e.title && (this.title = e.title); + void 0 !== e.subtitle && (this.subtitle = e.subtitle); + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.titleMaxWidth && (this.titleMaxWidth = e.titleMaxWidth); + void 0 !== e.isItemOnFocus && (this.isItemOnFocus = e.isItemOnFocus) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__titleMaxWidth.purgeDependencyOnElmtId(e); + this.__isItemOnFocus.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__titleMaxWidth.aboutToBeDeleted(); + this.__isItemOnFocus.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get titleMaxWidth() { + return this.__titleMaxWidth.get() + } + set titleMaxWidth(e) { + this.__titleMaxWidth.set(e) + } + get isItemOnFocus() { + return this.__isItemOnFocus.get() + } + set isItemOnFocus(e) { + this.__isItemOnFocus.set(e) + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }); + Flex.width("100%"); + Flex.height(ComposeTitleBar.totalHeight); + Flex.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + Flex.onAreaChange(((e, t) => { + let o = Number(t.width); + if (void 0 !== this.menuItems) { + let e = this.menuItems.length; + e >= CollapsibleMenuSection.maxCountOfVisibleItems ? o -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems : e > 0 && (o -= ImageMenuItem.imageHotZoneWidth * e) + } + this.titleMaxWidth = o; + this.titleMaxWidth -= ComposeTitleBar.leftPadding; + this.titleMaxWidth -= ImageMenuItem.imageHotZoneWidth; + void 0 !== this.item && (this.titleMaxWidth -= ComposeTitleBar.portraitImageLeftPadding + ComposeTitleBar.portraitImageSize + ComposeTitleBar.portraitImageRightPadding); + this.titleMaxWidth -= ComposeTitleBar.rightPadding + })); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_start"], + bundleName: "", + moduleName: "" + } + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Navigator.create(); + t || Navigator.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_BACK, + isEnabled: !0 + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + Navigator.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.item ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.value); + Image.width(ComposeTitleBar.portraitImageSize); + Image.height(ComposeTitleBar.portraitImageSize); + Image.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_xs"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_m"], + bundleName: "", + moduleName: "" + } + }); + Image.focusable(this.item.isEnabled); + Image.borderRadius(ImageMenuItem.buttonBorderRadius); + Image.onFocus((() => this.isItemOnFocus = !0)); + Image.onBlur((() => this.isItemOnFocus = !1)); + Image.border(this.isItemOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Image.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.justifyContent(FlexAlign.Start); + Column.alignItems(HorizontalAlign.Start); + Column.constraintSize({ + maxWidth: this.titleMaxWidth + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.title ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.justifyContent(FlexAlign.Start); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.title); + Text.fontWeight(FontWeight.Medium); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline8"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_text"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(void 0 !== this.subtitle ? 1 : 2); + Text.textOverflow({ + overflow: TextOverflow.Ellipsis + }); + Text.constraintSize({ + maxWidth: this.titleMaxWidth + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.justifyContent(FlexAlign.Start); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.subtitle); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_over_line"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_subtitle_text"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(1); + Text.textOverflow({ + overflow: TextOverflow.Ellipsis + }); + Text.constraintSize({ + maxWidth: this.titleMaxWidth + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new CollapsibleMenuSection(this, { + menuItems: this.menuItems + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Flex.pop() + } + rerender() { + this.updateDirtyElements() + } +} +ComposeTitleBar.totalHeight = 56; +ComposeTitleBar.leftPadding = 12; +ComposeTitleBar.rightPadding = 12; +ComposeTitleBar.portraitImageSize = 40; +ComposeTitleBar.portraitImageLeftPadding = 4; +ComposeTitleBar.portraitImageRightPadding = 16; +class CollapsibleMenuSection extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.menuItems = void 0; + this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); + this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); + this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); + this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); + void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); + void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); + void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isPopupShown.purgeDependencyOnElmtId(e); + this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); + this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); + this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isPopupShown.aboutToBeDeleted(); + this.__isMoreIconOnFocus.aboutToBeDeleted(); + this.__isMoreIconOnHover.aboutToBeDeleted(); + this.__isMoreIconOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isPopupShown() { + return this.__isPopupShown.get() + } + set isPopupShown(e) { + this.__isPopupShown.set(e) + } + get isMoreIconOnFocus() { + return this.__isMoreIconOnFocus.get() + } + set isMoreIconOnFocus(e) { + this.__isMoreIconOnFocus.set(e) + } + get isMoreIconOnHover() { + return this.__isMoreIconOnHover.get() + } + set isMoreIconOnHover(e) { + this.__isMoreIconOnHover.set(e) + } + get isMoreIconOnClick() { + return this.__isMoreIconOnClick.get() + } + set isMoreIconOnClick(e) { + this.__isMoreIconOnClick.set(e) + } + getMoreIconFgColor() { + return this.isMoreIconOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getMoreIconBgColor() { + return this.isMoreIconOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isMoreIconOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("100%"); + Column.margin({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_end"], + bundleName: "", + moduleName: "" + } + }); + Column.justifyContent(FlexAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems, (e => { + const t = e; + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + o ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => { + const t = e; + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + o ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getMoreIconFgColor()); + Row.backgroundColor(this.getMoreIconBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.border(this.isMoreIconOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => this.isMoreIconOnFocus = !0)); + Row.onBlur((() => this.isMoreIconOnFocus = !1)); + Row.onHover((e => this.isMoreIconOnHover = e)); + Row.onKeyEvent((e => { + if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { + e.type === KeyType.Down && (this.isMoreIconOnClick = !0); + e.type === KeyType.Up && (this.isMoreIconOnClick = !1) + } + })); + Row.onTouch((e => { + e.type === TouchType.Down && (this.isMoreIconOnClick = !0); + e.type === TouchType.Up && (this.isMoreIconOnClick = !1) + })); + Row.onClick((() => this.isPopupShown = !0)); + Row.bindPopup(this.isPopupShown, { + builder: { + builder: this.popupBuilder.bind(this) + }, + placement: Placement.Bottom, + popupColor: Color.White, + enableArrow: !1, + onStateChange: e => this.isPopupShown = e.isVisible + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(PUBLIC_MORE); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(!0); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + Column.pop() + } + popupBuilder(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); + Column.margin({ + top: CollapsibleMenuSection.focusPadding, + bottom: CollapsibleMenuSection.focusPadding + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { + const o = e; + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: o + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + Column.pop() + } + rerender() { + this.updateDirtyElements() + } +} +CollapsibleMenuSection.maxCountOfVisibleItems = 3; +CollapsibleMenuSection.focusPadding = 4; +CollapsibleMenuSection.marginsNum = 2; +__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); +class ImageMenuItem extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.item = void 0; + this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); + this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); + this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.item && (this.item = e.item); + void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); + void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); + void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isOnFocus.purgeDependencyOnElmtId(e); + this.__isOnHover.purgeDependencyOnElmtId(e); + this.__isOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isOnFocus.aboutToBeDeleted(); + this.__isOnHover.aboutToBeDeleted(); + this.__isOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isOnFocus() { + return this.__isOnFocus.get() + } + set isOnFocus(e) { + this.__isOnFocus.set(e) + } + get isOnHover() { + return this.__isOnHover.get() + } + set isOnHover(e) { + this.__isOnHover.set(e) + } + get isOnClick() { + return this.__isOnClick.get() + } + set isOnClick(e) { + this.__isOnClick.set(e) + } + getFgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getBgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getFgColor()); + Row.backgroundColor(this.getBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); + Row.border(this.isOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => { + this.item.isEnabled && (this.isOnFocus = !0) + })); + Row.onBlur((() => this.isOnFocus = !1)); + Row.onHover((e => { + this.item.isEnabled && (this.isOnHover = e) + })); + Row.onKeyEvent((e => { + if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { + e.type === KeyType.Down && (this.isOnClick = !0); + e.type === KeyType.Up && (this.isOnClick = !1) + } + })); + Row.onTouch((e => { + if (this.item.isEnabled) { + e.type === TouchType.Down && (this.isOnClick = !0); + e.type === TouchType.Up && (this.isOnClick = !1) + } + })); + Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.value); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(this.item.isEnabled); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + } + rerender() { + this.updateDirtyElements() + } +} +ImageMenuItem.imageSize = 24; +ImageMenuItem.imageHotZoneWidth = 48; +ImageMenuItem.buttonBorderRadius = 8; +ImageMenuItem.focusBorderWidth = 2; +ImageMenuItem.disabledImageOpacity = .4; +export default { + ComposeTitleBar: ComposeTitleBar +}; \ No newline at end of file diff --git a/interface/editabletitlebar/BUILD.gn b/interface/editabletitlebar/BUILD.gn new file mode 100755 index 0000000..4b2eb1f --- /dev/null +++ b/interface/editabletitlebar/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_editabletitlebar_abc") { + src_js = rebase_path("editabletitlebar.js") + dst_file = rebase_path(target_out_dir + "/editabletitlebar.abc") + in_puts = [ "editabletitlebar.js" ] + out_puts = [ target_out_dir + "/editabletitlebar.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("editabletitlebar_abc") { + input = get_label_info(":gen_editabletitlebar_abc", "target_out_dir") + "/editabletitlebar.abc" + output = target_out_dir + "/editabletitlebar_abc.o" + dep = ":gen_editabletitlebar_abc" +} + +ohos_shared_library("editabletitlebar") { + sources = [ "editabletitlebar.cpp" ] + + deps = [ ":editabletitlebar_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + subsystem_name = "hmos_ext" + part_name = "ui_advanced" + + relative_install_dir = "module/arkui/advanced" +} diff --git a/interface/editabletitlebar/editabletitlebar.cpp b/interface/editabletitlebar/editabletitlebar.cpp new file mode 100644 index 0000000..2630a0d --- /dev/null +++ b/interface/editabletitlebar/editabletitlebar.cpp @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_editabletitlebar_abc_start[]; +extern const char _binary_editabletitlebar_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_EditableTitleBar_GetABCCode(const char **buf, int *buflen) + { + if (buf != nullptr) { + *buf = _binary_editabletitlebar_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_editabletitlebar_abc_end - _binary_editabletitlebar_abc_start; + } + } + + +static napi_module editabletitlebarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.EditableTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void editabletitlebarRegisterModule(void) +{ + napi_module_register(&editabletitlebarModule); +} \ No newline at end of file diff --git a/interface/editabletitlebar/editabletitlebar.js b/interface/editabletitlebar/editabletitlebar.js new file mode 100644 index 0000000..d3e9b68 --- /dev/null +++ b/interface/editabletitlebar/editabletitlebar.js @@ -0,0 +1,435 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; +export var EditableLeftIconType; +! function(e) { + e[e.Back = 0] = "Back"; + e[e.Cancel = 1] = "Cancel" +}(EditableLeftIconType || (EditableLeftIconType = {})); +const PUBLIC_CANCEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABKpJREFUeNrt3bFrlHccx/Ff4o2dgkOQ4JzR4SYJgksnbYcGOrTQsUPtpE4d/RNcFBeFlg7NUlTSTrXQQgsKGV0KHTs4ODiJSL8PdxaUGJK7pPc893m94TvleZLnnt/7fcc9z5FrDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnDQrPTuej2u2a87VvKp5XLNT87OlGiSf1lx6Zz2/q3kkgLdZr7k5lX8/7tZ8XfOCU4OgW887U/n341bN9T6s56menLAfaj464OfdM8iF6XYv+dV7+X+pOX/ANuOatZqHAmjti5prh9jurAgGI//mIbbtIvi15u9FHvBqD07a50fYdqtmt+YDrg1a/jd8tuiD7kMA4yNuL4LlkH+WtV/KAEYz7COC4cs/69ovXQB7M+4ngmHLP8/aL1UAD+bYVwTDlX/etT8W+nAV6M82uQS6PuP+rg4NV/5vBNDa6za5HLY9xzO5CIYl/9OaT5obYf/xrE1uioggQ/6LNf/04QGd6tHJFQH5owMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDSI6A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI1gjfyLY8UpmJnNqbjrc/yO32pOk98rQPIrwWnyCyA5AvILQATkF4AIyC8AEZBfACIgvwBEQH4BiID8J8qqU3BiPJ8O+XuMO8Eng8/2CID85BcA+ckvAPKT35tg8h+n/KP2/3/2SADojfzf1+yKYH7cBxim/N39hWX8RnsBkP9Q8r9BBAKIlV8EAoiXXwQCiJdfBAKIl18EAoiXXwQz4D5A/+Tv2KjZmuPvdfu6T+AVYJDyd3Qfo17Gb7QXAPkPzTMRCCBVfhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIwD+qFUFuAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBdAD3a8bkj4rgTM2PAmjty5or5I+L4FzNHzV/LfKB9OGb4rfJP0iO49xvL/pB9CGAMfljIxgLoLUR+WMjGAmgtT3yx0awJ4DWdsgfG8HOog+6D1eBntR8WLNB/sFzlKtDnfw3BNDa65rfp2+I3hfBo5rL5B9UBFttcoNzP35qk8vfLxZ9sCs9OnHdG6Kvps8e3TXiVzWPp88Ut3k1OLr1vFpz6Z31/LbmntMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAO/wLvsR65mx80NAAAAABJRU5ErkJggg=="; +const PUBLIC_OK = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA+lJREFUeNrt3bFrFgccx+GLlSDi4JDBITiJZHBwEBGRIoqKoIu6iVMd3OosCg6W0sm/wEFUDDgpCDoIDoqOKqIoHUrp4CDFoUMRB39HLotoeXMpMXff54EfFE0ivv1+kpQGrmkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBJTHkJGIhddT/V7ajbUPey7l7dlbpPAmCs1tb9Wne2++cvPa07Vfd7nw/+g9eXVT7+m3Wn69Z8421m6w7WXa37KADGNv4TE7ztTN36uvtL/UPWeJ0Z+PgXnejzBwmAMYx/8VuhTQIgcfy9CYCxjP9D3TsBkPqZf95XAFLH3372vyAAEsf/T93Ruvd93tn/CWbo4z9c96jvBxAAseMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eP/HgG0z3f9uVl45uu2ZuGBBu3zXn9rej7mEuMfSgDtA46v1c195ff+rbtU94stGv9KWqnHpLaPsXxSt/k//iXsq9vY9HjUJca/2gNoH2e/c4K32yUC4x9bAOvqrjeTP41GBMY/qgC2151Z4vuIwPhXxEo8I2xdz/c7W3fZXo1/6F8B/q471/N9fSUw/sEH8LEb8hYRGH9iAK3HdafrpkVg/IkBtA8yflt3bBn/3SEC4x9sAK3Xda9EYPypAYjA+OMDEIHxxwcgAuOPD0AExh8fgAiMPz4AERh/fAAiMP74AERg/PEBiMD44wMQgfHHByAC448PQATGHx+ACIw/PgARGH98AMkRGL8AYiMwfgHERmD8AoiNwPgFEBuB8QsgNgLjF0BsBMYvgNgIjF8AsREYvwBiIzB+AcRGYPwCiI3A+AUQG4HxCyA2AuMXQGwExi+A2AiMXwCxERi/AGIjMH4BjDaCTXUP6j59423aJ2PeMH4BjDWCHd24n9f9+cXvHa+7U7fb+Fe/qeC/ezvU+e5bleX40A11pm6u+xapMX5fARK+Eix+u7O1brbp/1Bw4xfAoCP4Pxi/AGIjMH4BxEZg/AKIjcD4BRAbgfELIDYC4xdAbATGL4DYCIxfAIOL4EXdkbrpZX6sd3WH6p56WQUwJG/qbtX92Cz8EFwfD+sO1L31cq4uU16CibU/M3Sy7nzdlgnf51ndxbrbXj4BjCmEPXX76/Y2Cz8DNNP9+l91f3Sf8e92AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzKZwK1uX4kZ6mnAAAAAElFTkSuQmCC"; +const 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"; +export class EditableTitleBar extends ViewPU { + constructor(e, t, A, i = -1) { + super(e, A, i); + this.leftIconStyle = void 0; + this.title = void 0; + this.menuItems = void 0; + this.onSave = void 0; + this.onCancel = void 0; + this.__titleMaxWidth = new ObservedPropertySimplePU(0, this, "titleMaxWidth"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.leftIconStyle && (this.leftIconStyle = e.leftIconStyle); + void 0 !== e.title && (this.title = e.title); + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.onSave && (this.onSave = e.onSave); + void 0 !== e.onCancel && (this.onCancel = e.onCancel); + void 0 !== e.titleMaxWidth && (this.titleMaxWidth = e.titleMaxWidth) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__titleMaxWidth.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__titleMaxWidth.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get titleMaxWidth() { + return this.__titleMaxWidth.get() + } + set titleMaxWidth(e) { + this.__titleMaxWidth.set(e) + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }); + Flex.width("100%"); + Flex.height(EditableTitleBar.totalHeight); + Flex.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + Flex.onAreaChange(((e, t) => { + let A = Number(t.width); + A = A - EditableTitleBar.leftPadding - EditableTitleBar.rightPadding - EditableTitleBar.titlePadding; + A = A - ImageMenuItem.imageHotZoneWidth - ImageMenuItem.imageHotZoneWidth; + void 0 !== this.menuItems ? this.menuItems.length > EditableTitleBar.maxCountOfExtraItems ? this.titleMaxWidth = A - ImageMenuItem.imageHotZoneWidth * EditableTitleBar.maxCountOfExtraItems : this.titleMaxWidth = A - ImageMenuItem.imageHotZoneWidth * this.menuItems.length : this.titleMaxWidth = A + })); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_start"], + bundleName: "", + moduleName: "" + } + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.leftIconStyle == EditableLeftIconType.Back ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Navigator.create(); + t || Navigator.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_BACK, + isEnabled: !0 + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + Navigator.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_CANCEL, + isEnabled: !0, + action: () => this.onCancel && this.onCancel() + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.justifyContent(FlexAlign.Start); + Column.alignItems(HorizontalAlign.Start); + Column.constraintSize({ + maxWidth: this.titleMaxWidth + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.title); + Text.fontWeight(FontWeight.Medium); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline8"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_text"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(1); + Text.textOverflow({ + overflow: TextOverflow.Ellipsis + }); + Text.constraintSize({ + maxWidth: this.titleMaxWidth + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new EditableTitleBarMenuSection(this, { + menuItems: this.menuItems, + onSave: this.onSave + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + Flex.pop() + } + rerender() { + this.updateDirtyElements() + } +} +EditableTitleBar.maxCountOfExtraItems = 2; +EditableTitleBar.totalHeight = 56; +EditableTitleBar.leftPadding = 12; +EditableTitleBar.rightPadding = 12; +EditableTitleBar.titlePadding = 16; +class EditableTitleBarMenuSection extends ViewPU { + constructor(e, t, A, i = -1) { + super(e, A, i); + this.menuItems = void 0; + this.onSave = void 0; + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.onSave && (this.onSave = e.onSave) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) {} + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_vertical_l"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_end"], + bundleName: "", + moduleName: "" + } + }); + Column.justifyContent(FlexAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(0, EditableTitleBar.maxCountOfExtraItems), (e => { + const t = e; + this.observeComponentCreation(((e, A) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + A ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_OK, + isEnabled: !0, + action: () => this.onSave && this.onSave() + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop(); + Column.pop() + } + rerender() { + this.updateDirtyElements() + } +} +class ImageMenuItem extends ViewPU { + constructor(e, t, A, i = -1) { + super(e, A, i); + this.item = void 0; + this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); + this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); + this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.item && (this.item = e.item); + void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); + void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); + void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isOnFocus.purgeDependencyOnElmtId(e); + this.__isOnHover.purgeDependencyOnElmtId(e); + this.__isOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isOnFocus.aboutToBeDeleted(); + this.__isOnHover.aboutToBeDeleted(); + this.__isOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isOnFocus() { + return this.__isOnFocus.get() + } + set isOnFocus(e) { + this.__isOnFocus.set(e) + } + get isOnHover() { + return this.__isOnHover.get() + } + set isOnHover(e) { + this.__isOnHover.set(e) + } + get isOnClick() { + return this.__isOnClick.get() + } + set isOnClick(e) { + this.__isOnClick.set(e) + } + getFgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getBgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getFgColor()); + Row.backgroundColor(this.getBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); + Row.border(this.isOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => { + this.item.isEnabled && (this.isOnFocus = !0) + })); + Row.onBlur((() => this.isOnFocus = !1)); + Row.onHover((e => { + this.item.isEnabled && (this.isOnHover = e) + })); + Row.onKeyEvent((e => { + if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { + e.type === KeyType.Down && (this.isOnClick = !0); + e.type === KeyType.Up && (this.isOnClick = !1) + } + })); + Row.onTouch((e => { + if (this.item.isEnabled) { + e.type === TouchType.Down && (this.isOnClick = !0); + e.type === TouchType.Up && (this.isOnClick = !1) + } + })); + Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.value); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(this.item.isEnabled); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + } + rerender() { + this.updateDirtyElements() + } +} +ImageMenuItem.imageSize = 24; +ImageMenuItem.imageHotZoneWidth = 48; +ImageMenuItem.buttonBorderRadius = 8; +ImageMenuItem.focusBorderWidth = 2; +ImageMenuItem.disabledImageOpacity = .4; +export default { + EditableLeftIconType: EditableLeftIconType, + EditableTitleBar: EditableTitleBar +}; \ No newline at end of file diff --git a/interface/selecttitlebar/BUILD.gn b/interface/selecttitlebar/BUILD.gn new file mode 100755 index 0000000..c8dc27a --- /dev/null +++ b/interface/selecttitlebar/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_selecttitlebar_abc") { + src_js = rebase_path("selecttitlebar.js") + dst_file = rebase_path(target_out_dir + "/selecttitlebar.abc") + in_puts = [ "selecttitlebar.js" ] + out_puts = [ target_out_dir + "/selecttitlebar.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("selecttitlebar_abc") { + input = get_label_info(":gen_selecttitlebar_abc", "target_out_dir") + "/selecttitlebar.abc" + output = target_out_dir + "/selecttitlebar_abc.o" + dep = ":gen_selecttitlebar_abc" +} + +ohos_shared_library("selecttitlebar") { + sources = [ "selecttitlebar.cpp" ] + + deps = [ ":selecttitlebar_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + subsystem_name = "hmos_ext" + part_name = "ui_advanced" + + relative_install_dir = "module/arkui/advanced" +} diff --git a/interface/selecttitlebar/selecttitlebar.cpp b/interface/selecttitlebar/selecttitlebar.cpp new file mode 100644 index 0000000..9d11696 --- /dev/null +++ b/interface/selecttitlebar/selecttitlebar.cpp @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_selecttitlebar_abc_start[]; +extern const char _binary_selecttitlebar_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_SelectTitleBar_GetABCCode(const char **buf, int *buflen) + { + if (buf != nullptr) { + *buf = _binary_selecttitlebar_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_selecttitlebar_abc_end - _binary_selecttitlebar_abc_start; + } + } + + +static napi_module selecttitlebarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.SelectTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void selecttitlebarRegisterModule(void) +{ + napi_module_register(&selecttitlebarModule); +} \ No newline at end of file diff --git a/interface/selecttitlebar/selecttitlebar.js b/interface/selecttitlebar/selecttitlebar.js new file mode 100644 index 0000000..08d5151 --- /dev/null +++ b/interface/selecttitlebar/selecttitlebar.js @@ -0,0 +1,785 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var __decorate = this && this.__decorate || function(e, t, o, i) { + var s, r = arguments.length, + n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; + if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i); + else + for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n); + return r > 3 && n && Object.defineProperty(t, o, n), n +}; +const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; +const 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"; +const 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"; +export class SelectTitleBar extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.__selected = new ObservedPropertySimplePU(0, this, "selected"); + this.options = void 0; + this.menuItems = void 0; + this.subtitle = void 0; + this.badgeValue = void 0; + this.hidesBackButton = void 0; + this.onSelected = void 0; + this.__selectMaxWidth = new ObservedPropertySimplePU(0, this, "selectMaxWidth"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.selected && (this.selected = e.selected); + void 0 !== e.options && (this.options = e.options); + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.subtitle && (this.subtitle = e.subtitle); + void 0 !== e.badgeValue && (this.badgeValue = e.badgeValue); + void 0 !== e.hidesBackButton && (this.hidesBackButton = e.hidesBackButton); + void 0 !== e.onSelected && (this.onSelected = e.onSelected); + void 0 !== e.selectMaxWidth && (this.selectMaxWidth = e.selectMaxWidth) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__selected.purgeDependencyOnElmtId(e); + this.__selectMaxWidth.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__selected.aboutToBeDeleted(); + this.__selectMaxWidth.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get selected() { + return this.__selected.get() + } + set selected(e) { + this.__selected.set(e) + } + get selectMaxWidth() { + return this.__selectMaxWidth.get() + } + set selectMaxWidth(e) { + this.__selectMaxWidth.set(e) + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }); + Flex.width("100%"); + Flex.height(SelectTitleBar.totalHeight); + Flex.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + Flex.onAreaChange(((e, t) => { + let o = Number(t.width); + if (!this.hidesBackButton) { + o -= ImageMenuItem.imageHotZoneWidth; + o += SelectTitleBar.leftPadding; + o -= SelectTitleBar.leftPaddingWithBack + } + if (void 0 !== this.menuItems) { + let e = this.menuItems.length; + e >= CollapsibleMenuSection.maxCountOfVisibleItems ? o -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems : e > 0 && (o -= ImageMenuItem.imageHotZoneWidth * e) + } + void 0 !== this.badgeValue ? this.selectMaxWidth = o - SelectTitleBar.badgeSize - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding - SelectTitleBar.badgePadding : this.selectMaxWidth = o - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding + })); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ + left: this.hidesBackButton ? { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_start"], + bundleName: "", + moduleName: "" + } + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.hidesBackButton ? If.branchId(1) : this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Navigator.create(); + t || Navigator.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_BACK, + isEnabled: !0 + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + Navigator.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.justifyContent(FlexAlign.Start); + Column.alignItems(HorizontalAlign.Start); + Column.constraintSize({ + maxWidth: this.selectMaxWidth + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.badgeValue ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Badge.create({ + count: this.badgeValue, + position: BadgePosition.Right, + style: { + badgeSize: SelectTitleBar.badgeSize, + badgeColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + borderColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + borderWidth: 0 + } + }); + t || Badge.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.justifyContent(FlexAlign.Start); + Row.margin({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + } + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Select.create(this.options); + Select.selected(this.selected); + Select.value(this.selected < this.options.length ? this.options[this.selected].value.toString() : ""); + Select.font({ + size: this.hidesBackButton && void 0 === this.subtitle ? { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline8"], + bundleName: "", + moduleName: "" + } + }); + Select.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_text"], + bundleName: "", + moduleName: "" + }); + Select.backgroundColor(Color.Transparent); + Select.onSelect(this.onSelected); + Select.constraintSize({ + maxWidth: this.selectMaxWidth + }); + Select.offset({ + x: -4 + }); + t || Select.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Select.pop(); + Row.pop(); + Badge.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.justifyContent(FlexAlign.Start); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Select.create(this.options); + Select.selected(this.selected); + Select.value(this.selected < this.options.length ? this.options[this.selected].value.toString() : ""); + Select.font({ + size: this.hidesBackButton && void 0 === this.subtitle ? { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline8"], + bundleName: "", + moduleName: "" + } + }); + Select.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_text"], + bundleName: "", + moduleName: "" + }); + Select.backgroundColor(Color.Transparent); + Select.onSelect(this.onSelected); + Select.constraintSize({ + maxWidth: this.selectMaxWidth + }); + Select.offset({ + x: -4 + }); + t || Select.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Select.pop(); + Row.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.justifyContent(FlexAlign.Start); + Row.margin({ + left: SelectTitleBar.subtitleLeftPadding + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.subtitle); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_over_line"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_subtitle_text"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(1); + Text.textOverflow({ + overflow: TextOverflow.Ellipsis + }); + Text.constraintSize({ + maxWidth: this.selectMaxWidth + }); + Text.offset({ + y: -4 + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new CollapsibleMenuSection(this, { + menuItems: this.menuItems + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Flex.pop() + } + rerender() { + this.updateDirtyElements() + } +} +SelectTitleBar.badgeSize = 16; +SelectTitleBar.totalHeight = 56; +SelectTitleBar.leftPadding = 24; +SelectTitleBar.leftPaddingWithBack = 12; +SelectTitleBar.rightPadding = 24; +SelectTitleBar.badgePadding = 16; +SelectTitleBar.subtitleLeftPadding = 4; +class CollapsibleMenuSection extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.menuItems = void 0; + this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); + this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); + this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); + this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); + void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); + void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); + void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isPopupShown.purgeDependencyOnElmtId(e); + this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); + this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); + this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isPopupShown.aboutToBeDeleted(); + this.__isMoreIconOnFocus.aboutToBeDeleted(); + this.__isMoreIconOnHover.aboutToBeDeleted(); + this.__isMoreIconOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isPopupShown() { + return this.__isPopupShown.get() + } + set isPopupShown(e) { + this.__isPopupShown.set(e) + } + get isMoreIconOnFocus() { + return this.__isMoreIconOnFocus.get() + } + set isMoreIconOnFocus(e) { + this.__isMoreIconOnFocus.set(e) + } + get isMoreIconOnHover() { + return this.__isMoreIconOnHover.get() + } + set isMoreIconOnHover(e) { + this.__isMoreIconOnHover.set(e) + } + get isMoreIconOnClick() { + return this.__isMoreIconOnClick.get() + } + set isMoreIconOnClick(e) { + this.__isMoreIconOnClick.set(e) + } + getMoreIconFgColor() { + return this.isMoreIconOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getMoreIconBgColor() { + return this.isMoreIconOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isMoreIconOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("100%"); + Column.margin({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_end"], + bundleName: "", + moduleName: "" + } + }); + Column.justifyContent(FlexAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems, (e => { + const t = e; + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + o ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => { + const t = e; + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + o ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getMoreIconFgColor()); + Row.backgroundColor(this.getMoreIconBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.border(this.isMoreIconOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => this.isMoreIconOnFocus = !0)); + Row.onBlur((() => this.isMoreIconOnFocus = !1)); + Row.onHover((e => this.isMoreIconOnHover = e)); + Row.onKeyEvent((e => { + if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { + e.type === KeyType.Down && (this.isMoreIconOnClick = !0); + e.type === KeyType.Up && (this.isMoreIconOnClick = !1) + } + })); + Row.onTouch((e => { + e.type === TouchType.Down && (this.isMoreIconOnClick = !0); + e.type === TouchType.Up && (this.isMoreIconOnClick = !1) + })); + Row.onClick((() => this.isPopupShown = !0)); + Row.bindPopup(this.isPopupShown, { + builder: { + builder: this.popupBuilder.bind(this) + }, + placement: Placement.Bottom, + popupColor: Color.White, + enableArrow: !1, + onStateChange: e => this.isPopupShown = e.isVisible + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(PUBLIC_MORE); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(!0); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + Column.pop() + } + popupBuilder(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); + Column.margin({ + top: CollapsibleMenuSection.focusPadding, + bottom: CollapsibleMenuSection.focusPadding + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { + const o = e; + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: o + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + Column.pop() + } + rerender() { + this.updateDirtyElements() + } +} +CollapsibleMenuSection.maxCountOfVisibleItems = 3; +CollapsibleMenuSection.focusPadding = 4; +CollapsibleMenuSection.marginsNum = 2; +__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); +class ImageMenuItem extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.item = void 0; + this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); + this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); + this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.item && (this.item = e.item); + void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); + void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); + void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isOnFocus.purgeDependencyOnElmtId(e); + this.__isOnHover.purgeDependencyOnElmtId(e); + this.__isOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isOnFocus.aboutToBeDeleted(); + this.__isOnHover.aboutToBeDeleted(); + this.__isOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isOnFocus() { + return this.__isOnFocus.get() + } + set isOnFocus(e) { + this.__isOnFocus.set(e) + } + get isOnHover() { + return this.__isOnHover.get() + } + set isOnHover(e) { + this.__isOnHover.set(e) + } + get isOnClick() { + return this.__isOnClick.get() + } + set isOnClick(e) { + this.__isOnClick.set(e) + } + getFgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getBgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getFgColor()); + Row.backgroundColor(this.getBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); + Row.border(this.isOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => { + this.item.isEnabled && (this.isOnFocus = !0) + })); + Row.onBlur((() => this.isOnFocus = !1)); + Row.onHover((e => { + this.item.isEnabled && (this.isOnHover = e) + })); + Row.onKeyEvent((e => { + if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { + e.type === KeyType.Down && (this.isOnClick = !0); + e.type === KeyType.Up && (this.isOnClick = !1) + } + })); + Row.onTouch((e => { + if (this.item.isEnabled) { + e.type === TouchType.Down && (this.isOnClick = !0); + e.type === TouchType.Up && (this.isOnClick = !1) + } + })); + Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.value); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(this.item.isEnabled); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + } + rerender() { + this.updateDirtyElements() + } +} +ImageMenuItem.imageSize = 24; +ImageMenuItem.imageHotZoneWidth = 48; +ImageMenuItem.buttonBorderRadius = 8; +ImageMenuItem.focusBorderWidth = 2; +ImageMenuItem.disabledImageOpacity = .4; +export default { + SelectTitleBar: SelectTitleBar +}; \ No newline at end of file diff --git a/interface/tabtitlebar/BUILD.gn b/interface/tabtitlebar/BUILD.gn new file mode 100755 index 0000000..bb11566 --- /dev/null +++ b/interface/tabtitlebar/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_tabtitlebar_abc") { + src_js = rebase_path("tabtitlebar.js") + dst_file = rebase_path(target_out_dir + "/tabtitlebar.abc") + in_puts = [ "tabtitlebar.js" ] + out_puts = [ target_out_dir + "/tabtitlebar.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("tabtitlebar_abc") { + input = get_label_info(":gen_tabtitlebar_abc", "target_out_dir") + "/tabtitlebar.abc" + output = target_out_dir + "/tabtitlebar_abc.o" + dep = ":gen_tabtitlebar_abc" +} + +ohos_shared_library("tabtitlebar") { + sources = [ "tabtitlebar.cpp" ] + + deps = [ ":tabtitlebar_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + subsystem_name = "hmos_ext" + part_name = "ui_advanced" + + relative_install_dir = "module/arkui/advanced" +} diff --git a/interface/tabtitlebar/tabtitlebar.cpp b/interface/tabtitlebar/tabtitlebar.cpp new file mode 100644 index 0000000..8cc4eb3 --- /dev/null +++ b/interface/tabtitlebar/tabtitlebar.cpp @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_tabtitlebar_abc_start[]; +extern const char _binary_tabtitlebar_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_TabTitleBar_GetABCCode(const char **buf, int *buflen) + { + if (buf != nullptr) { + *buf = _binary_tabtitlebar_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_tabtitlebar_abc_end - _binary_tabtitlebar_abc_start; + } + } + + +static napi_module tabtitlebarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.TabTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void tabtitlebarRegisterModule(void) +{ + napi_module_register(&tabtitlebarModule); +} \ No newline at end of file diff --git a/interface/tabtitlebar/tabtitlebar.js b/interface/tabtitlebar/tabtitlebar.js new file mode 100644 index 0000000..f2b8bc1 --- /dev/null +++ b/interface/tabtitlebar/tabtitlebar.js @@ -0,0 +1,930 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var __decorate = this && this.__decorate || function(e, t, o, i) { + var s, r = arguments.length, + n = r < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; + if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(e, t, o, i); + else + for (var c = e.length - 1; c >= 0; c--)(s = e[c]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n); + return r > 3 && n && Object.defineProperty(t, o, n), n +}; +const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; +const 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"; +export class TabTitleBar extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.tabItems = void 0; + this.menuItems = void 0; + this.swiperContent = void 0; + this.__tabWidth = new ObservedPropertySimplePU(0, this, "tabWidth"); + this.__currentIndex = new ObservedPropertySimplePU(0, this, "currentIndex"); + this.menuSectionWidth = 0; + this.scroller = new Scroller; + this.swiperController = new SwiperController; + this.settings = new RenderingContextSettings(!0); + this.leftContext2D = new CanvasRenderingContext2D(this.settings); + this.rightContext2D = new CanvasRenderingContext2D(this.settings); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.tabItems && (this.tabItems = e.tabItems); + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.swiperContent && (this.swiperContent = e.swiperContent); + void 0 !== e.tabWidth && (this.tabWidth = e.tabWidth); + void 0 !== e.currentIndex && (this.currentIndex = e.currentIndex); + void 0 !== e.menuSectionWidth && (this.menuSectionWidth = e.menuSectionWidth); + void 0 !== e.scroller && (this.scroller = e.scroller); + void 0 !== e.swiperController && (this.swiperController = e.swiperController); + void 0 !== e.settings && (this.settings = e.settings); + void 0 !== e.leftContext2D && (this.leftContext2D = e.leftContext2D); + void 0 !== e.rightContext2D && (this.rightContext2D = e.rightContext2D) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__tabWidth.purgeDependencyOnElmtId(e); + this.__currentIndex.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__tabWidth.aboutToBeDeleted(); + this.__currentIndex.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get tabWidth() { + return this.__tabWidth.get() + } + set tabWidth(e) { + this.__tabWidth.set(e) + } + get currentIndex() { + return this.__currentIndex.get() + } + set currentIndex(e) { + this.__currentIndex.set(e) + } + GradientMask(e, t, o, i, s, r = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(TabTitleBar.gradientMaskWidth); + Column.height(TabTitleBar.totalHeight); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((r, n) => { + ViewStackProcessor.StartGetAccessRecordingFor(r); + Canvas.create(e); + Canvas.width(TabTitleBar.gradientMaskWidth); + Canvas.height(TabTitleBar.totalHeight); + Canvas.onReady((() => { + var r = e.createLinearGradient(t, o, i, s); + r.addColorStop(0, "#ffffffff"); + r.addColorStop(1, "#00ffffff"); + e.fillStyle = r; + e.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight) + })); + n || Canvas.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Canvas.pop(); + Column.pop() + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }); + Flex.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + Flex.margin({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + } + }); + Flex.onAreaChange(((e, t) => { + this.tabWidth = Number(t.width) - this.menuSectionWidth + })); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create({ + alignContent: Alignment.End + }); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create({ + alignContent: Alignment.Start + }); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + List.create({ + initialIndex: 0, + scroller: this.scroller, + space: 0 + }); + List.width("100%"); + List.height(TabTitleBar.totalHeight); + List.constraintSize({ + maxWidth: this.tabWidth + }); + List.edgeEffect(EdgeEffect.Spring); + List.listDirection(Axis.Horizontal); + List.scrollBar(BarState.Off); + t || List.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.tabItems, ((e, t) => { + const o = e; + { + const e = !0; + const i = (t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + ListItem.create(r, e); + o || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const s = () => { + this.observeComponentCreation(i); + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new TabContentItem(this, { + item: o, + index: t, + maxIndex: this.tabItems.length - 1, + currentIndex: this.currentIndex, + onCustomClick: () => this.currentIndex = t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { + currentIndex: this.currentIndex + }); + ViewStackProcessor.StopGetAccessRecording() + })); + ListItem.pop() + }; + const r = (e, s) => { + i(e, s); + this.updateFuncByElmtId.set(e, i); + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new TabContentItem(this, { + item: o, + index: t, + maxIndex: this.tabItems.length - 1, + currentIndex: this.currentIndex, + onCustomClick: () => this.currentIndex = t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { + currentIndex: this.currentIndex + }); + ViewStackProcessor.StopGetAccessRecording() + })); + ListItem.pop() + }; + e ? (() => { + this.observeComponentCreation(i); + ListItem.pop() + })() : s() + } + }), void 0, !0, !1); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + List.pop(); + Column.pop(); + this.GradientMask.bind(this)(this.leftContext2D, 0, TabTitleBar.totalHeight / 2, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2); + Stack.pop(); + this.GradientMask.bind(this)(this.rightContext2D, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2, 0, TabTitleBar.totalHeight / 2); + Stack.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 !== this.menuItems && this.menuItems.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + __Common__.create(); + __Common__.height(TabTitleBar.totalHeight); + __Common__.onAreaChange(((e, t) => { + this.menuSectionWidth = Number(t.width) + })); + t || __Common__.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new CollapsibleMenuSection(this, { + menuItems: this.menuItems + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + __Common__.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Flex.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Swiper.create(this.swiperController); + Swiper.index(this.currentIndex); + Swiper.itemSpace(0); + Swiper.indicator(!1); + Swiper.width("100%"); + Swiper.height("100%"); + Swiper.curve(Curve.Friction); + Swiper.onChange((e => { + this.currentIndex = e; + this.scroller.scrollToIndex(this.currentIndex); + this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) + })); + Swiper.onAppear((() => { + this.scroller.scrollToIndex(this.currentIndex); + this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) + })); + t || Swiper.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.swiperContent.bind(this)(); + Swiper.pop(); + Column.pop(); + Column.pop() + } + rerender() { + this.updateDirtyElements() + } +} +TabTitleBar.totalHeight = 56; +TabTitleBar.correctionOffset = -40; +TabTitleBar.gradientMaskWidth = 24; +__decorate([], TabTitleBar.prototype, "GradientMask", null); +class CollapsibleMenuSection extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.menuItems = void 0; + this.__isPopupShown = new ObservedPropertySimplePU(!1, this, "isPopupShown"); + this.__isMoreIconOnFocus = new ObservedPropertySimplePU(!1, this, "isMoreIconOnFocus"); + this.__isMoreIconOnHover = new ObservedPropertySimplePU(!1, this, "isMoreIconOnHover"); + this.__isMoreIconOnClick = new ObservedPropertySimplePU(!1, this, "isMoreIconOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.menuItems && (this.menuItems = e.menuItems); + void 0 !== e.isPopupShown && (this.isPopupShown = e.isPopupShown); + void 0 !== e.isMoreIconOnFocus && (this.isMoreIconOnFocus = e.isMoreIconOnFocus); + void 0 !== e.isMoreIconOnHover && (this.isMoreIconOnHover = e.isMoreIconOnHover); + void 0 !== e.isMoreIconOnClick && (this.isMoreIconOnClick = e.isMoreIconOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isPopupShown.purgeDependencyOnElmtId(e); + this.__isMoreIconOnFocus.purgeDependencyOnElmtId(e); + this.__isMoreIconOnHover.purgeDependencyOnElmtId(e); + this.__isMoreIconOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isPopupShown.aboutToBeDeleted(); + this.__isMoreIconOnFocus.aboutToBeDeleted(); + this.__isMoreIconOnHover.aboutToBeDeleted(); + this.__isMoreIconOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isPopupShown() { + return this.__isPopupShown.get() + } + set isPopupShown(e) { + this.__isPopupShown.set(e) + } + get isMoreIconOnFocus() { + return this.__isMoreIconOnFocus.get() + } + set isMoreIconOnFocus(e) { + this.__isMoreIconOnFocus.set(e) + } + get isMoreIconOnHover() { + return this.__isMoreIconOnHover.get() + } + set isMoreIconOnHover(e) { + this.__isMoreIconOnHover.set(e) + } + get isMoreIconOnClick() { + return this.__isMoreIconOnClick.get() + } + set isMoreIconOnClick(e) { + this.__isMoreIconOnClick.set(e) + } + getMoreIconFgColor() { + return this.isMoreIconOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getMoreIconBgColor() { + return this.isMoreIconOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isMoreIconOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("100%"); + Column.justifyContent(FlexAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems, (e => { + const t = e; + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + o ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (e => { + const t = e; + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + o ? ViewPU.create(new ImageMenuItem(this, { + item: t + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getMoreIconFgColor()); + Row.backgroundColor(this.getMoreIconBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.border(this.isMoreIconOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => this.isMoreIconOnFocus = !0)); + Row.onBlur((() => this.isMoreIconOnFocus = !1)); + Row.onHover((e => this.isMoreIconOnHover = e)); + Row.onKeyEvent((e => { + if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { + e.type === KeyType.Down && (this.isMoreIconOnClick = !0); + e.type === KeyType.Up && (this.isMoreIconOnClick = !1) + } + })); + Row.onTouch((e => { + e.type === TouchType.Down && (this.isMoreIconOnClick = !0); + e.type === TouchType.Up && (this.isMoreIconOnClick = !1) + })); + Row.onClick((() => this.isPopupShown = !0)); + Row.bindPopup(this.isPopupShown, { + builder: { + builder: this.popupBuilder.bind(this) + }, + placement: Placement.Bottom, + popupColor: Color.White, + enableArrow: !1, + onStateChange: e => this.isPopupShown = e.isVisible + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(PUBLIC_MORE); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(!0); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + Column.pop() + } + popupBuilder(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum); + Column.margin({ + top: CollapsibleMenuSection.focusPadding, + bottom: CollapsibleMenuSection.focusPadding + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), ((e, t) => { + const o = e; + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: o + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + Column.pop() + } + rerender() { + this.updateDirtyElements() + } +} +CollapsibleMenuSection.maxCountOfVisibleItems = 1; +CollapsibleMenuSection.focusPadding = 4; +CollapsibleMenuSection.marginsNum = 2; +__decorate([], CollapsibleMenuSection.prototype, "popupBuilder", null); +class TabContentItem extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.item = void 0; + this.index = void 0; + this.maxIndex = void 0; + this.onCustomClick = void 0; + this.__currentIndex = new SynchedPropertySimpleOneWayPU(t.currentIndex, this, "currentIndex"); + this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); + this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); + this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.item && (this.item = e.item); + void 0 !== e.index && (this.index = e.index); + void 0 !== e.maxIndex && (this.maxIndex = e.maxIndex); + void 0 !== e.onCustomClick && (this.onCustomClick = e.onCustomClick); + void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); + void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); + void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) + } + updateStateVars(e) { + this.__currentIndex.reset(e.currentIndex) + } + purgeVariableDependenciesOnElmtId(e) { + this.__currentIndex.purgeDependencyOnElmtId(e); + this.__isOnFocus.purgeDependencyOnElmtId(e); + this.__isOnHover.purgeDependencyOnElmtId(e); + this.__isOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__currentIndex.aboutToBeDeleted(); + this.__isOnFocus.aboutToBeDeleted(); + this.__isOnHover.aboutToBeDeleted(); + this.__isOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get currentIndex() { + return this.__currentIndex.get() + } + set currentIndex(e) { + this.__currentIndex.set(e) + } + get isOnFocus() { + return this.__isOnFocus.get() + } + set isOnFocus(e) { + this.__isOnFocus.set(e) + } + get isOnHover() { + return this.__isOnHover.get() + } + set isOnHover(e) { + this.__isOnHover.set(e) + } + get isOnClick() { + return this.__isOnClick.get() + } + set isOnClick(e) { + this.__isOnClick.set(e) + } + getBgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(TabTitleBar.totalHeight); + Row.alignItems(VerticalAlign.Center); + Row.justifyContent(FlexAlign.Center); + Row.margin({ + left: 0 === this.index ? 16 : 0, + right: this.index === this.maxIndex ? 12 : 0 + }); + Row.borderRadius(TabContentItem.buttonBorderRadius); + Row.backgroundColor(this.getBgColor()); + Row.border(this.isOnFocus ? { + width: TabContentItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.justifyContent(FlexAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + void 0 === this.item.icon ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.item.title); + Text.fontSize(this.index === this.currentIndex ? { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline9"], + bundleName: "", + moduleName: "" + }); + Text.fontColor(this.index === this.currentIndex ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_text"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_text_off"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.focusable(!0); + Text.padding({ + top: this.index === this.currentIndex ? 6 : 10, + left: 8, + bottom: 2, + right: 8 + }); + Text.onFocus((() => this.isOnFocus = !0)); + Text.onBlur((() => this.isOnFocus = !1)); + Text.onHover((e => this.isOnHover = e)); + Text.onKeyEvent((e => { + if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { + e.type === KeyType.Down && (this.isOnClick = !0); + e.type === KeyType.Up && (this.isOnClick = !1) + } + })); + Text.onTouch((e => { + e.type === TouchType.Down && (this.isOnClick = !0); + e.type === TouchType.Up && (this.isOnClick = !1) + })); + Text.onClick((() => this.onCustomClick && this.onCustomClick())); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(TabContentItem.imageHotZoneWidth); + Row.height(TabContentItem.imageHotZoneWidth); + Row.justifyContent(FlexAlign.Center); + Row.onFocus((() => this.isOnFocus = !0)); + Row.onBlur((() => this.isOnFocus = !1)); + Row.onHover((e => this.isOnHover = e)); + Row.onKeyEvent((e => { + if (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE) { + e.type === KeyType.Down && (this.isOnClick = !0); + e.type === KeyType.Up && (this.isOnClick = !1) + } + })); + Row.onTouch((e => { + e.type === TouchType.Down && (this.isOnClick = !0); + e.type === TouchType.Up && (this.isOnClick = !1) + })); + Row.onClick((() => this.onCustomClick && this.onCustomClick())); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.icon); + Image.alt(this.item.title); + Image.height(TabContentItem.imageSize); + Image.focusable(!0); + Image.scale({ + x: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1, + y: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1 + }); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop(); + Row.pop() + } + rerender() { + this.updateDirtyElements() + } +} +TabContentItem.imageSize = 24; +TabContentItem.imageHotZoneWidth = 48; +TabContentItem.imageMagnificationFactor = 1.4; +TabContentItem.buttonBorderRadius = 8; +TabContentItem.focusBorderWidth = 2; +class ImageMenuItem extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.item = void 0; + this.__isOnFocus = new ObservedPropertySimplePU(!1, this, "isOnFocus"); + this.__isOnHover = new ObservedPropertySimplePU(!1, this, "isOnHover"); + this.__isOnClick = new ObservedPropertySimplePU(!1, this, "isOnClick"); + this.setInitiallyProvidedValue(t) + } + setInitiallyProvidedValue(e) { + void 0 !== e.item && (this.item = e.item); + void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); + void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); + void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__isOnFocus.purgeDependencyOnElmtId(e); + this.__isOnHover.purgeDependencyOnElmtId(e); + this.__isOnClick.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__isOnFocus.aboutToBeDeleted(); + this.__isOnHover.aboutToBeDeleted(); + this.__isOnClick.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get isOnFocus() { + return this.__isOnFocus.get() + } + set isOnFocus(e) { + this.__isOnFocus.set(e) + } + get isOnHover() { + return this.__isOnHover.get() + } + set isOnHover(e) { + this.__isOnHover.set(e) + } + get isOnClick() { + return this.__isOnClick.get() + } + set isOnClick(e) { + this.__isOnClick.set(e) + } + getFgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon_pressed"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_titlebar_icon"], + bundleName: "", + moduleName: "" + } + } + getBgColor() { + return this.isOnClick ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } : this.isOnHover ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : Color.Transparent + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(ImageMenuItem.imageHotZoneWidth); + Row.height(ImageMenuItem.imageHotZoneWidth); + Row.borderRadius(ImageMenuItem.buttonBorderRadius); + Row.foregroundColor(this.getFgColor()); + Row.backgroundColor(this.getBgColor()); + Row.justifyContent(FlexAlign.Center); + Row.opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity); + Row.border(this.isOnFocus ? { + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + }); + Row.onFocus((() => { + this.item.isEnabled && (this.isOnFocus = !0) + })); + Row.onBlur((() => this.isOnFocus = !1)); + Row.onHover((e => { + this.item.isEnabled && (this.isOnHover = e) + })); + Row.onKeyEvent((e => { + if (this.item.isEnabled && (e.keyCode === KeyCode.KEYCODE_ENTER || e.keyCode === KeyCode.KEYCODE_SPACE)) { + e.type === KeyType.Down && (this.isOnClick = !0); + e.type === KeyType.Up && (this.isOnClick = !1) + } + })); + Row.onTouch((e => { + if (this.item.isEnabled) { + e.type === TouchType.Down && (this.isOnClick = !0); + e.type === TouchType.Up && (this.isOnClick = !1) + } + })); + Row.onClick((() => this.item.isEnabled && this.item.action && this.item.action())); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.value); + Image.width(ImageMenuItem.imageSize); + Image.height(ImageMenuItem.imageSize); + Image.focusable(this.item.isEnabled); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + } + rerender() { + this.updateDirtyElements() + } +} +ImageMenuItem.imageSize = 24; +ImageMenuItem.imageHotZoneWidth = 48; +ImageMenuItem.buttonBorderRadius = 8; +ImageMenuItem.focusBorderWidth = 2; +ImageMenuItem.disabledImageOpacity = .4; +export default { + TabTitleBar: TabTitleBar +}; \ No newline at end of file diff --git a/source/ComposeTitleBar/ComposeTitleBar.ets b/source/ComposeTitleBar/ComposeTitleBar.ets new file mode 100755 index 0000000..4e26592 --- /dev/null +++ b/source/ComposeTitleBar/ComposeTitleBar.ets @@ -0,0 +1,369 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { KeyCode } from '@ohos.multimodalInput.keyCode' + +export declare type ComposeTitleBarMenuItem = { + value: ResourceStr + isEnabled: boolean + action?: () => void +} + +const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' + + 'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAA' + + 'AAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuA' + + 'xhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BI' + + 'Cydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdY' + + 'jJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5H' + + 'nhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rm' + + 'j79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70' + + 'zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln' + + '/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKF' + + 'pD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fN' + + 'Q1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnX' + + 'fo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jp' + + 'yaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jv' + + 'jACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13u' + + 'h8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T' + + '+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtU' + + 'tTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXv' + + 'O9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC' + +const PUBLIC_BACK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' + + 'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAA' + + 'XNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0G' + + 'iIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr' + + '+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07' + + 'vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpg' + + 'IzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPw' + + 'IwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2A' + + 'MtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/' + + 'aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLn' + + 'HedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm' + + '8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+s' + + 'Py9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE' + + 'IAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAI' + + 'EIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6z' + + 'ELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1' + + 'ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC' + +@Component +export struct ComposeTitleBar { + item: ComposeTitleBarMenuItem + title: ResourceStr + subtitle: ResourceStr + menuItems: Array + + @State titleMaxWidth: number = 0 + @State isItemOnFocus: boolean = false + + private static readonly totalHeight = 56 + private static readonly leftPadding = 12 + private static readonly rightPadding = 12 + private static readonly portraitImageSize = 40 + private static readonly portraitImageLeftPadding = 4 + private static readonly portraitImageRightPadding = 16 + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }) { + Row() { + Navigator() { + ImageMenuItem({ item: { + value: PUBLIC_BACK, + isEnabled: true + } }) + } + if (this.item !== undefined) { + Image(this.item.value) + .width(ComposeTitleBar.portraitImageSize) + .height(ComposeTitleBar.portraitImageSize) + .margin({ + left: $r('sys.float.ohos_id_text_paragraph_margin_xs'), + right: $r('sys.float.ohos_id_text_paragraph_margin_m') + }) + .focusable(this.item.isEnabled) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .onFocus(() => this.isItemOnFocus = true) + .onBlur(() => this.isItemOnFocus = false) + .border(this.isItemOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onClick(() => this.item.isEnabled && this.item.action && this.item.action()) + } + Column() { + if (this.title !== undefined) { + Row() { + Text(this.title) + .fontWeight(FontWeight.Medium) + .fontSize($r('sys.float.ohos_id_text_size_headline8')) + .fontColor($r('sys.color.ohos_id_color_titlebar_text')) + .maxLines(this.subtitle !== undefined ? 1 : 2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: this.titleMaxWidth }) + } + .justifyContent(FlexAlign.Start) + } + if (this.subtitle !== undefined) { + Row() { + Text(this.subtitle) + .fontSize($r('sys.float.ohos_id_text_size_over_line')) + .fontColor($r('sys.color.ohos_id_color_titlebar_subtitle_text')) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: this.titleMaxWidth }) + } + .justifyContent(FlexAlign.Start) + } + } + .justifyContent(FlexAlign.Start) + .alignItems(HorizontalAlign.Start) + .constraintSize({ maxWidth: this.titleMaxWidth }) + } + .margin({ left: $r('sys.float.ohos_id_default_padding_start') }) + if (this.menuItems !== undefined && this.menuItems.length > 0) { + CollapsibleMenuSection({ menuItems: this.menuItems }) + } + } + .width('100%') + .height(ComposeTitleBar.totalHeight) + .backgroundColor($r('sys.color.ohos_id_color_background')) + .onAreaChange((_oldValue: Area, newValue: Area) => { + let newWidth = Number(newValue.width) + if (this.menuItems !== undefined) { + let menusLength = this.menuItems.length + if (menusLength >= CollapsibleMenuSection.maxCountOfVisibleItems) { + newWidth = newWidth - ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems + } else if (menusLength > 0) { + newWidth = newWidth - ImageMenuItem.imageHotZoneWidth * menusLength + } + } + this.titleMaxWidth = newWidth + this.titleMaxWidth -= ComposeTitleBar.leftPadding + this.titleMaxWidth -= ImageMenuItem.imageHotZoneWidth + if (this.item !== undefined) { + this.titleMaxWidth -= ComposeTitleBar.portraitImageLeftPadding + + ComposeTitleBar.portraitImageSize + + ComposeTitleBar.portraitImageRightPadding + } + this.titleMaxWidth -= ComposeTitleBar.rightPadding + }) + } +} + +@Component +struct CollapsibleMenuSection { + menuItems: Array + + static readonly maxCountOfVisibleItems = 3 + private static readonly focusPadding = 4 + private static readonly marginsNum = 2 + + @State isPopupShown: boolean = false + + @State isMoreIconOnFocus: boolean = false + @State isMoreIconOnHover: boolean = false + @State isMoreIconOnClick: boolean = false + + getMoreIconFgColor() { + return this.isMoreIconOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getMoreIconBgColor() { + if (this.isMoreIconOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isMoreIconOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Column() { + Row() { + if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { + ForEach(this.menuItems, (item) => { + ImageMenuItem({ item: item }) + }) + } else { + ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item) => { + ImageMenuItem({ item: item }) + }) + + Row() { + Image(PUBLIC_MORE) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(true) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getMoreIconFgColor()) + .backgroundColor(this.getMoreIconBgColor()) + .justifyContent(FlexAlign.Center) + .border(this.isMoreIconOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => this.isMoreIconOnFocus = true) + .onBlur(() => this.isMoreIconOnFocus = false) + .onHover((isOn) => this.isMoreIconOnHover = isOn) + .onKeyEvent((event) => { + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isMoreIconOnClick = true + } + if (event.type === KeyType.Up) { + this.isMoreIconOnClick = false + } + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + this.isMoreIconOnClick = true + } + if (event.type === TouchType.Up) { + this.isMoreIconOnClick = false + } + }) + .onClick(() => this.isPopupShown = true) + .bindPopup(this.isPopupShown, { + builder: this.popupBuilder, + placement: Placement.Bottom, + popupColor: Color.White, + enableArrow: false, + onStateChange: (e) => this.isPopupShown = e.isVisible + }) + } + } + } + .height('100%') + .margin({ right: $r('sys.float.ohos_id_default_padding_end') }) + .justifyContent(FlexAlign.Center) + } + + @Builder popupBuilder() { + Column() { + ForEach(this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), (item, _index?) => { + ImageMenuItem({ item: item }) + }) + } + .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum) + .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }) + } +} + +@Component +struct ImageMenuItem { + item: ComposeTitleBarMenuItem + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + + @State isOnFocus: boolean = false + @State isOnHover: boolean = false + @State isOnClick: boolean = false + + getFgColor() { + return this.isOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getBgColor() { + if (this.isOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Row() { + Image(this.item.value) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(this.item.isEnabled) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getFgColor()) + .backgroundColor(this.getBgColor()) + .justifyContent(FlexAlign.Center) + .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity) + .border(this.isOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => { + if (!this.item.isEnabled) { + return + } + this.isOnFocus = true + }) + .onBlur(() => this.isOnFocus = false) + .onHover((isOn) => { + if (!this.item.isEnabled) { + return + } + this.isOnHover = isOn + }) + .onKeyEvent((event) => { + if (!this.item.isEnabled) { + return + } + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isOnClick = true + } + if (event.type === KeyType.Up) { + this.isOnClick = false + } + }) + .onTouch((event) => { + if (!this.item.isEnabled) { + return + } + if (event.type === TouchType.Down) { + this.isOnClick = true + } + if (event.type === TouchType.Up) { + this.isOnClick = false + } + }) + .onClick(() => this.item.isEnabled && this.item.action && this.item.action()) + } +} + +export default {ComposeTitleBar} \ No newline at end of file diff --git a/source/EditableTitleBar/EditableTitleBar.ets b/source/EditableTitleBar/EditableTitleBar.ets new file mode 100755 index 0000000..fffa70e --- /dev/null +++ b/source/EditableTitleBar/EditableTitleBar.ets @@ -0,0 +1,282 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { KeyCode } from '@ohos.multimodalInput.keyCode' + +export enum EditableLeftIconType { + Back, + Cancel +} + +export declare type EditableTitleBarMenuItem = { + value: ResourceStr + isEnabled: boolean + action?: () => void +} + +const PUBLIC_CANCEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3Gw' + + 'HAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IA' + + 'rs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABKpJREFUeNrt3bFrlHccx/Ff4o2dgkOQ4' + + 'JzR4SYJgksnbYcGOrTQsUPtpE4d/RNcFBeFlg7NUlTSTrXQQgsKGV0KHTs4ODiJSL8PdxaUGJK7pPc893m94TvleZLnnt' + + '/7fcc9z5FrDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnDQrPTuej2u2a87VvKp5XLNT87OlGiSf1lx' + + '6Zz2/q3kkgLdZr7k5lX8/7tZ8XfOCU4OgW887U/n341bN9T6s56menLAfaj464OfdM8iF6XYv+dV7+X+pOX/ANuOatZqH' + + 'Amjti5prh9jurAgGI//mIbbtIvi15u9FHvBqD07a50fYdqtmt+YDrg1a/jd8tuiD7kMA4yNuL4LlkH+WtV/KAEYz7COC4' + + 'cs/69ovXQB7M+4ngmHLP8/aL1UAD+bYVwTDlX/etT8W+nAV6M82uQS6PuP+rg4NV/5vBNDa6za5HLY9xzO5CIYl/9OaT5' + + 'obYf/xrE1uioggQ/6LNf/04QGd6tHJFQH5owMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH' + + '54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDSI6A/AKIjYD8AoiN' + + 'gPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIj' + + 'YD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI1gjfyLY8UpmJnNqbjrc/yO32pOk98rQPIrwWnyCyA5AvILQATkF4AIyC8AEZ' + + 'BfACIgvwBEQH4BiID8J8qqU3BiPJ8O+XuMO8Eng8/2CID85BcA+ckvAPKT35tg8h+n/KP2/3/2SADojfzf1+yKYH7cBxi' + + 'm/N39hWX8RnsBkP9Q8r9BBAKIlV8EAoiXXwQCiJdfBAKIl18EAoiXXwQz4D5A/+Tv2KjZmuPvdfu6T+AVYJDyd3Qfo17G' + + 'b7QXAPkPzTMRCCBVfhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RC' + + 'CBefhEIIF5+EQggXn4RCCBefhEIwD+qFUFuAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0' + + 'FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBdAD3a8bkj4rgTM2PAmj' + + 'ty5or5I+L4FzNHzV/LfKB9OGb4rfJP0iO49xvL/pB9CGAMfljIxgLoLUR+WMjGAmgtT3yx0awJ4DWdsgfG8HOog+6D1eB' + + 'ntR8WLNB/sFzlKtDnfw3BNDa65rfp2+I3hfBo5rL5B9UBFttcoNzP35qk8vfLxZ9sCs9OnHdG6Kvps8e3TXiVzWPp88Ut' + + '3k1OLr1vFpz6Z31/LbmntMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAO/wLvsR65mx80NAAAAABJRU' + + '5ErkJggg==' + +const PUBLIC_OK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3' + + 'GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZ' + + 'iS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA+lJREFUeNrt3bFrFgccx+GLlSDi4JDBITiJZHBwEBGRIoqKoIu6iVMd3' + + 'OosCg6W0sm/wEFUDDgpCDoIDoqOKqIoHUrp4CDFoUMRB39HLotoeXMpMXff54EfFE0ivv1+kpQGrmkAAAAAAAAAAAAAAAAAAAAAAAAAAAA' + + 'AAAAAAAAAAAAAAIBJTHkJGIhddT/V7ajbUPey7l7dlbpPAmCs1tb9Wne2++cvPa07Vfd7nw/+g9eXVT7+m3Wn69Z8421m6w7WXa37KADGN' + + 'v4TE7ztTN36uvtL/UPWeJ0Z+PgXnejzBwmAMYx/8VuhTQIgcfy9CYCxjP9D3TsBkPqZf95XAFLH3372vyAAEsf/T93Ruvd93tn/CWbo4z9' + + 'c96jvBxAAseMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0' + + 'eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eP/HgG0z3f9uVl45uu2ZuGBBu3zXn9rej7mEuMfSgDtA46v1c195ff+rbt' + + 'U94stGv9KWqnHpLaPsXxSt/k//iXsq9vY9HjUJca/2gNoH2e/c4K32yUC4x9bAOvqrjeTP41GBMY/qgC2151Z4vuIwPhXxEo8I2xdz/c7W' + + '3fZXo1/6F8B/q471/N9fSUw/sEH8LEb8hYRGH9iAK3HdafrpkVg/IkBtA8yflt3bBn/3SEC4x9sAK3Xda9EYPypAYjA+OMDEIHxxwcgAuO' + + 'PD0AExh8fgAiMPz4AERh/fAAiMP74AERg/PEBiMD44wMQgfHHByAC448PQATGHx+ACIw/PgARGH98AMkRGL8AYiMwfgHERmD8AoiNwPgFE' + + 'BuB8QsgNgLjF0BsBMYvgNgIjF8AsREYvwBiIzB+AcRGYPwCiI3A+AUQG4HxCyA2AuMXQGwExi+A2AiMXwCxERi/AGIjMH4BjDaCTXUP6j5' + + '9423aJ2PeMH4BjDWCHd24n9f9+cXvHa+7U7fb+Fe/qeC/ezvU+e5bleX40A11pm6u+xapMX5fARK+Eix+u7O1brbp/1Bw4xfAoCP4Pxi/A' + + 'GIjMH4BxEZg/AKIjcD4BRAbgfELIDYC4xdAbATGL4DYCIxfAIOL4EXdkbrpZX6sd3WH6p56WQUwJG/qbtX92Cz8EFwfD+sO1L31cq4uU16' + + 'CibU/M3Sy7nzdlgnf51ndxbrbXj4BjCmEPXX76/Y2Cz8DNNP9+l91f3Sf8e92AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' + + 'AAAAAzKZwK1uX4kZ6mnAAAAAElFTkSuQmCC' + +const PUBLIC_BACK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' + + 'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAA' + + 'XNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0G' + + 'iIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr' + + '+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07' + + 'vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpg' + + 'IzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPw' + + 'IwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2A' + + 'MtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/' + + 'aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLn' + + 'HedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm' + + '8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+s' + + 'Py9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE' + + 'IAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAI' + + 'EIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6z' + + 'ELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1' + + 'ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC' + +@Component +export struct EditableTitleBar { + leftIconStyle: EditableLeftIconType + title: ResourceStr + menuItems: Array + onSave?: () => void + onCancel?: () => void + + @State titleMaxWidth: number = 0 + + static readonly maxCountOfExtraItems = 2 + private static readonly totalHeight = 56 + private static readonly leftPadding = 12 + private static readonly rightPadding = 12 + private static readonly titlePadding = 16 + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }) { + Row() { + if (this.leftIconStyle == EditableLeftIconType.Back) { + Navigator() { + ImageMenuItem({ item: { + value: PUBLIC_BACK, + isEnabled: true + } }) + } + } else { + ImageMenuItem({ item: { + value: PUBLIC_CANCEL, + isEnabled: true, + action: () => this.onCancel && this.onCancel() + } }) + } + + Column() { + Text(this.title) + .fontWeight(FontWeight.Medium) + .fontSize($r('sys.float.ohos_id_text_size_headline8')) + .fontColor($r('sys.color.ohos_id_color_titlebar_text')) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: this.titleMaxWidth }) + } + .justifyContent(FlexAlign.Start) + .alignItems(HorizontalAlign.Start) + .constraintSize({ maxWidth: this.titleMaxWidth }) + } + .margin({ left: $r('sys.float.ohos_id_default_padding_start') }) + + EditableTitleBarMenuSection({ + menuItems: this.menuItems, + onSave: this.onSave + }) + } + .width('100%') + .height(EditableTitleBar.totalHeight) + .backgroundColor($r('sys.color.ohos_id_color_background')) + .onAreaChange((_oldValue: Area, newValue: Area) => { + let nValue = Number(newValue.width) + nValue = nValue - EditableTitleBar.leftPadding - EditableTitleBar.rightPadding - EditableTitleBar.titlePadding + nValue = nValue - ImageMenuItem.imageHotZoneWidth - ImageMenuItem.imageHotZoneWidth + if (this.menuItems === undefined) { + this.titleMaxWidth = nValue + return + } + if (this.menuItems.length > EditableTitleBar.maxCountOfExtraItems) { + this.titleMaxWidth = nValue - ImageMenuItem.imageHotZoneWidth * EditableTitleBar.maxCountOfExtraItems + } else { + this.titleMaxWidth = nValue - ImageMenuItem.imageHotZoneWidth * this.menuItems.length + } + }) + } +} + +@Component +struct EditableTitleBarMenuSection { + menuItems: Array + onSave?: () => void + + build() { + Column() { + Row() { + if (this.menuItems !== undefined && this.menuItems.length > 0) { + ForEach(this.menuItems.slice(0, EditableTitleBar.maxCountOfExtraItems), (item: EditableTitleBarMenuItem) => { + ImageMenuItem({ item: item }) + }) + } + ImageMenuItem({ item: { + value: PUBLIC_OK, + isEnabled: true, + action: () => this.onSave && this.onSave() + } }) + } + } + .margin({ + left: $r('sys.float.ohos_id_elements_margin_vertical_l'), + right: $r('sys.float.ohos_id_default_padding_end') + }) + .justifyContent(FlexAlign.Center) + } +} + +@Component +struct ImageMenuItem { + item: EditableTitleBarMenuItem + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + + @State isOnFocus: boolean = false + @State isOnHover: boolean = false + @State isOnClick: boolean = false + + getFgColor() { + return this.isOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getBgColor() { + if (this.isOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Row() { + Image(this.item.value) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(this.item.isEnabled) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getFgColor()) + .backgroundColor(this.getBgColor()) + .justifyContent(FlexAlign.Center) + .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity) + .border(this.isOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => { + if (!this.item.isEnabled) { + return + } + this.isOnFocus = true + }) + .onBlur(() => this.isOnFocus = false) + .onHover((isOn) => { + if (!this.item.isEnabled) { + return + } + this.isOnHover = isOn + }) + .onKeyEvent((event) => { + if (!this.item.isEnabled) { + return + } + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isOnClick = true + } + if (event.type === KeyType.Up) { + this.isOnClick = false + } + }) + .onTouch((event) => { + if (!this.item.isEnabled) { + return + } + if (event.type === TouchType.Down) { + this.isOnClick = true + } + if (event.type === TouchType.Up) { + this.isOnClick = false + } + }) + .onClick(() => this.item.isEnabled && this.item.action && this.item.action()) + } +} + +export default { EditableLeftIconType, EditableTitleBar } \ No newline at end of file diff --git a/source/SelectTitleBar/SelectTitleBar.ets b/source/SelectTitleBar/SelectTitleBar.ets new file mode 100755 index 0000000..15d82bb --- /dev/null +++ b/source/SelectTitleBar/SelectTitleBar.ets @@ -0,0 +1,383 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { KeyCode } from '@ohos.multimodalInput.keyCode' + +export declare type SelectTitleBarMenuItem = { + value: ResourceStr + isEnabled: boolean + action?: () => void +} + +const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' + + 'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAA' + + 'AAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuA' + + 'xhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhYWnstMINgYsh+cmfs88BI' + + 'Cydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRdY' + + 'jJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5H' + + 'nhkC9+zAA5YXXy8jBKV5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rm' + + 'j79U74wCszuih+F/ljrSi/+uud8YBGA10rayqrnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70' + + 'zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hkH4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln' + + '/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ/N5Vjd0oTXKp9QcKF' + + 'pD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fN' + + 'Q1BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnX' + + 'fo96DGYBRZD1ycpc/XzbmbvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jp' + + 'yaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jv' + + 'jACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrpVV1fXOOADLA10rq6rrnXEAVga6VlZV13u' + + 'h8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5LP+r7veGQfgd+T' + + '+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtU' + + 'tTXit8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXv' + + 'O9H8f1bfVPQ9FvQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC' + +const PUBLIC_BACK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' + + 'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAA' + + 'XNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0G' + + 'iIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr' + + '+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07' + + 'vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpg' + + 'IzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPw' + + 'IwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2A' + + 'MtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/' + + 'aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLn' + + 'HedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm' + + '8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+s' + + 'Py9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE' + + 'IAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAI' + + 'EIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6z' + + 'ELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1' + + 'ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC' + +@Component +export struct SelectTitleBar { + @State selected: number = 0 + + options: Array + menuItems: Array + + subtitle: ResourceStr + badgeValue: number + hidesBackButton: boolean + + onSelected: ((index: number) => void) + + private static readonly badgeSize = 16 + private static readonly totalHeight = 56 + private static readonly leftPadding = 24 + private static readonly leftPaddingWithBack = 12 + private static readonly rightPadding = 24 + private static readonly badgePadding = 16 + private static readonly subtitleLeftPadding = 8 + + @State selectMaxWidth: number = 0 + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }) { + Row() { + if (!this.hidesBackButton) { + Navigator() { + ImageMenuItem({ item: { + value: PUBLIC_BACK, + isEnabled: true + } }) + } + } + Column() { + if (this.badgeValue !== undefined) { + Badge({ + count: this.badgeValue, + position: BadgePosition.Right, + style: { + badgeSize: SelectTitleBar.badgeSize, + badgeColor: $r('sys.color.ohos_id_color_emphasize'), + borderColor: $r('sys.color.ohos_id_color_emphasize'), + borderWidth: 0 + } + }) { + Row() { + Select(this.options) + .selected(this.selected) + .value(this.selected < this.options.length ? this.options[this.selected].value.toString() : "") + .font({ size: $r('sys.float.ohos_id_text_size_headline8') }) + .fontColor($r('sys.color.ohos_id_color_titlebar_text')) + .onSelect(this.onSelected) + .constraintSize({ maxWidth: this.selectMaxWidth }) + } + .justifyContent(FlexAlign.Start) + .margin({ right: $r('sys.float.ohos_id_elements_margin_horizontal_l') }) + } + } else { + Row() { + Select(this.options) + .selected(this.selected) + .value(this.selected < this.options.length ? this.options[this.selected].value.toString() : "") + .font({ size: $r('sys.float.ohos_id_text_size_headline8') }) + .fontColor($r('sys.color.ohos_id_color_titlebar_text')) + .onSelect(this.onSelected) + .constraintSize({ maxWidth: this.selectMaxWidth }) + } + .justifyContent(FlexAlign.Start) + } + if (this.subtitle !== undefined) { + Row() { + Text(this.subtitle) + .fontSize($r('sys.float.ohos_id_text_size_over_line')) + .fontColor($r('sys.color.ohos_id_color_titlebar_subtitle_text')) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: this.selectMaxWidth }) + } + .justifyContent(FlexAlign.Start) + .margin({ left: SelectTitleBar.subtitleLeftPadding }) + } + } + .justifyContent(FlexAlign.Start) + .alignItems(HorizontalAlign.Start) + .constraintSize({ maxWidth: this.selectMaxWidth }) + } + .margin({ left: this.hidesBackButton ? $r('sys.float.ohos_id_max_padding_start') : $r('sys.float.ohos_id_default_padding_start') }) + if (this.menuItems !== undefined && this.menuItems.length > 0) { + CollapsibleMenuSection({ menuItems: this.menuItems }) + } + } + .width('100%') + .height(SelectTitleBar.totalHeight) + .backgroundColor($r('sys.color.ohos_id_color_background')) + .onAreaChange((_oldValue: Area, newValue: Area) => { + let newWidth = Number(newValue.width) + if (!this.hidesBackButton) { + newWidth -= ImageMenuItem.imageHotZoneWidth + newWidth += SelectTitleBar.leftPadding + newWidth -= SelectTitleBar.leftPaddingWithBack + } + if (this.menuItems !== undefined) { + let menusLength = this.menuItems.length + if (menusLength >= CollapsibleMenuSection.maxCountOfVisibleItems) { + newWidth -= ImageMenuItem.imageHotZoneWidth * CollapsibleMenuSection.maxCountOfVisibleItems + } else if (menusLength > 0) { + newWidth -= ImageMenuItem.imageHotZoneWidth * menusLength + } + } + if (this.badgeValue !== undefined) { + this.selectMaxWidth = newWidth - SelectTitleBar.badgeSize - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding - SelectTitleBar.badgePadding + } else { + this.selectMaxWidth = newWidth - SelectTitleBar.leftPadding - SelectTitleBar.rightPadding + } + }) + } +} + +@Component +struct CollapsibleMenuSection { + menuItems: Array + + static readonly maxCountOfVisibleItems = 3 + private static readonly focusPadding = 4 + private static readonly marginsNum = 2 + + @State isPopupShown: boolean = false + + @State isMoreIconOnFocus: boolean = false + @State isMoreIconOnHover: boolean = false + @State isMoreIconOnClick: boolean = false + + getMoreIconFgColor() { + return this.isMoreIconOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getMoreIconBgColor() { + if (this.isMoreIconOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isMoreIconOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Column() { + Row() { + if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { + ForEach(this.menuItems, (item) => { + ImageMenuItem({ item: item }) + }) + } else { + ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item) => { + ImageMenuItem({ item: item }) + }) + + Row() { + Image(PUBLIC_MORE) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(true) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getMoreIconFgColor()) + .backgroundColor(this.getMoreIconBgColor()) + .justifyContent(FlexAlign.Center) + .border(this.isMoreIconOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => this.isMoreIconOnFocus = true) + .onBlur(() => this.isMoreIconOnFocus = false) + .onHover((isOn) => this.isMoreIconOnHover = isOn) + .onKeyEvent((event) => { + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isMoreIconOnClick = true + } + if (event.type === KeyType.Up) { + this.isMoreIconOnClick = false + } + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + this.isMoreIconOnClick = true + } + if (event.type === TouchType.Up) { + this.isMoreIconOnClick = false + } + }) + .onClick(() => this.isPopupShown = true) + .bindPopup(this.isPopupShown, { + builder: this.popupBuilder, + placement: Placement.Bottom, + popupColor: Color.White, + enableArrow: false, + onStateChange: (e) => this.isPopupShown = e.isVisible + }) + } + } + } + .height('100%') + .margin({ right: $r('sys.float.ohos_id_default_padding_end') }) + .justifyContent(FlexAlign.Center) + } + + @Builder popupBuilder() { + Column() { + ForEach(this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), (item, _index?) => { + ImageMenuItem({ item: item }) + }) + } + .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum) + .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }) + } +} + +@Component +struct ImageMenuItem { + item: SelectTitleBarMenuItem + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + + @State isOnFocus: boolean = false + @State isOnHover: boolean = false + @State isOnClick: boolean = false + + getFgColor() { + return this.isOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getBgColor() { + if (this.isOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Row() { + Image(this.item.value) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(this.item.isEnabled) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getFgColor()) + .backgroundColor(this.getBgColor()) + .justifyContent(FlexAlign.Center) + .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity) + .border(this.isOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => { + if (!this.item.isEnabled) { + return + } + this.isOnFocus = true + }) + .onBlur(() => this.isOnFocus = false) + .onHover((isOn) => { + if (!this.item.isEnabled) { + return + } + this.isOnHover = isOn + }) + .onKeyEvent((event) => { + if (!this.item.isEnabled) { + return + } + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isOnClick = true + } + if (event.type === KeyType.Up) { + this.isOnClick = false + } + }) + .onTouch((event) => { + if (!this.item.isEnabled) { + return + } + if (event.type === TouchType.Down) { + this.isOnClick = true + } + if (event.type === TouchType.Up) { + this.isOnClick = false + } + }) + .onClick(() => this.item.isEnabled && this.item.action && this.item.action()) + } +} + +export default { SelectTitleBar } \ No newline at end of file diff --git a/source/TabTitleBar/TabTitleBar.ets b/source/TabTitleBar/TabTitleBar.ets new file mode 100755 index 0000000..ae5217b --- /dev/null +++ b/source/TabTitleBar/TabTitleBar.ets @@ -0,0 +1,478 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { KeyCode } from '@ohos.multimodalInput.keyCode' + +export declare type TabTitleBarMenuItem = { + value: ResourceStr + isEnabled: boolean + action?: () => void +} + +export declare type TabTitleBarTabItem = { + title: ResourceStr + icon?: ResourceStr +} + +const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+' + + 'gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAO' + + 'xAAADsQBlSsOGwAABEZJREFUeNrt3D1rFFEUBuAxhmAhFlYpUohYiYWFRcAmKAhWK2pjo1iKf8BCMIKFf8BarCyMhVj4VZhGSKEg2FqJyCKWIhY' + + 'WnstMINgYsh+cmfs88BICydxw7jmzu2HvNg0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBN+3r6dx+LXIqsRpa7FF8j48hm5Fn3Peo9mAEYRd' + + 'YjJ3f582Vj7nZfUe/eDsCRyMPI2h5/fyNyI/JDT6v3Tvt7sBllE15ETkxwjeORi5G3ke/6W737MgBnI68jh6ZwrcORq5HnhkC9+zAA5YXXy8jBK' + + 'V5zKXIu8jjyS7+rd+YBeNVtyrSVO9PRyBM9r94LSTfjWuTUDK9/eYIXeENUbb0zDsBi5PYc1rmj79U74wCszuih+F/ljrSi/+uud8YBGA10rayq' + + 'rnfGAVgb6FpZVV3vjAOwPNC1sqq63hkHYGWga2VVdb0XKt/8Rf1fd70zDsB4jmt5u3Tl9a59AMb6v+56ZxyArYGulVXV9c44ABtzXOup/q+73hk' + + 'H4N2cHio/Rj7r/7rrnXEAfkfuz2Gddb2v3ln/DfpgxneLzaY9xE3l9c46AH8iVyI/Z3Dt8nB/Xc+rd5H5QMy3yJemPVs6zY0edc9HUe/0Z4I/dQ' + + '/N5Vjd0oTXKp9QcKFpD2qj3r0YgO1NeRM507TH6/bifeR85IMeV++d+vTBWOV9JDcjt5rdv6uw3M3uRR7pa/Xu+wBsOxA53bTnTP/3UX1b3fNQ1' + + 'BsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqyr6d/97HIpchqZLlL8TUyjmxGnnXfo96DGYBRZD1ycpc/Xzbm' + + 'bvcV9e7tAByJPIys7fH3NyI3Ij/0tHrvtL8Hm1E24UXkxATXOB65GHkb+a6/1bsvA3A28jpyaArXOhy5GnluCNS7DwNQXni9jByc4jWXIucijyO' + + '/9Lt6Zx6AV92mTFu5Mx2NPNHz6r2QdDOuRU7N8PqXJ3iBN0TV1jvjACxGbs9hnTv6Xr0zDsDqjB6K/1XuSCv6v+56ZxyA0UDXyqrqemccgLWBrp' + + 'VV1fXOOADLA10rq6rrnXEAVga6VlZV13uh8s1f1P911zvjAIznuJa3S1de79oHYKz/6653xgHYGuhaWVVd74wDsDHHtZ7q/7rrnXEA3s3pofJj5' + + 'LP+r7veGQfgd+T+HNZZ1/vqnfXfoA9mfLfYbNpD3FRe76wD8CdyJfJzBtcuD/fX9bx6F5kPxHyLfGnas6XT3OhR93wU9U5/JvhT99BcjtUtTXit' + + '8gkFF5r2oDbq3YsB2N6UN5EzTXu8bi/eR85HPuhx9d6pTx+MVd5HcjNyq9n9uwrL3exe5JG+Vu++D8C2A5HTTXvO9H8f1bfVPQ9FvQEAAAAAAAA' + + 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCn7C9HjBtwWfXpKAAAAAElFTkSuQmCC' + +@Component +export struct TabTitleBar { + tabItems: Array + menuItems: Array + @BuilderParam swiperContent: () => void + + @State tabWidth: number = 0 + @State currentIndex: number = 0 + + static readonly totalHeight = 56 + static readonly correctionOffset = -40.0 + static readonly gradientMaskWidth = 24 + private menuSectionWidth = 0 + + private scroller: Scroller = new Scroller() + private swiperController: SwiperController = new SwiperController() + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private leftContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private rightContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + @Builder GradientMask(context2D: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) { + Column() { + Canvas(context2D) + .width(TabTitleBar.gradientMaskWidth) + .height(TabTitleBar.totalHeight) + .onReady(() => { + var grad = context2D.createLinearGradient(x0, y0, x1, y1) + grad.addColorStop(0.0, '#ffffffff') + grad.addColorStop(1, '#00ffffff') + context2D.fillStyle = grad + context2D.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight) + }) + } + .width(TabTitleBar.gradientMaskWidth) + .height(TabTitleBar.totalHeight) + } + + build() { + Column() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }) { + Stack({ alignContent: Alignment.End }) { + Stack({ alignContent: Alignment.Start }) { + Column() { + List({ initialIndex: 0, scroller: this.scroller, space: 0 }) { + ForEach(this.tabItems, (tabItem, index?: number) => { + ListItem() { + TabContentItem({ + item: tabItem, + index: index, + maxIndex: this.tabItems.length - 1, + currentIndex: this.currentIndex, + onCustomClick: () => this.currentIndex = index + }) + } + }) + } + .width('100%') + .height(TabTitleBar.totalHeight) + .constraintSize({ maxWidth: this.tabWidth }) + .edgeEffect(EdgeEffect.Spring) + .listDirection(Axis.Horizontal) + .scrollBar(BarState.Off) + } + this.GradientMask(this.leftContext2D, 0, TabTitleBar.totalHeight / 2, + TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight / 2) + } + this.GradientMask(this.rightContext2D, TabTitleBar.gradientMaskWidth, + TabTitleBar.totalHeight / 2, 0, TabTitleBar.totalHeight / 2) + } + + if (this.menuItems !== undefined && this.menuItems.length > 0) { + CollapsibleMenuSection({ menuItems: this.menuItems }) + .height(TabTitleBar.totalHeight) + .onAreaChange((_oldValue: Area, newValue: Area) => { + this.menuSectionWidth = Number(newValue.width) + }) + } + } + .backgroundColor($r('sys.color.ohos_id_color_background')) + .margin({ right: $r('sys.float.ohos_id_max_padding_end') }) + .onAreaChange((_oldValue: Area, newValue: Area) => { + this.tabWidth = Number(newValue.width) - this.menuSectionWidth + }) + + Column() { + Swiper(this.swiperController) { this.swiperContent() } + .index(this.currentIndex) + .itemSpace(0) + .indicator(false) + .width('100%') + .height('100%') + .curve(Curve.Friction) + .onChange((index) => { + this.currentIndex = index + this.scroller.scrollToIndex(this.currentIndex) + this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) + }) + .onAppear(() => { + this.scroller.scrollToIndex(this.currentIndex) + this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) + }) + } + } + } +} + +@Component +struct CollapsibleMenuSection { + menuItems: Array + + static readonly maxCountOfVisibleItems = 1 + private static readonly focusPadding = 4 + private static readonly marginsNum = 2 + + @State isPopupShown: boolean = false + + @State isMoreIconOnFocus: boolean = false + @State isMoreIconOnHover: boolean = false + @State isMoreIconOnClick: boolean = false + + getMoreIconFgColor() { + return this.isMoreIconOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getMoreIconBgColor() { + if (this.isMoreIconOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isMoreIconOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Column() { + Row() { + if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { + ForEach(this.menuItems, (item) => { + ImageMenuItem({ item: item }) + }) + } else { + ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item) => { + ImageMenuItem({ item: item }) + }) + + Row() { + Image(PUBLIC_MORE) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(true) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getMoreIconFgColor()) + .backgroundColor(this.getMoreIconBgColor()) + .justifyContent(FlexAlign.Center) + .border(this.isMoreIconOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => this.isMoreIconOnFocus = true) + .onBlur(() => this.isMoreIconOnFocus = false) + .onHover((isOn) => this.isMoreIconOnHover = isOn) + .onKeyEvent((event) => { + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isMoreIconOnClick = true + } + if (event.type === KeyType.Up) { + this.isMoreIconOnClick = false + } + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + this.isMoreIconOnClick = true + } + if (event.type === TouchType.Up) { + this.isMoreIconOnClick = false + } + }) + .onClick(() => this.isPopupShown = true) + .bindPopup(this.isPopupShown, { + builder: this.popupBuilder, + placement: Placement.Bottom, + popupColor: Color.White, + enableArrow: false, + onStateChange: (e) => this.isPopupShown = e.isVisible + }) + } + } + } + .height('100%') + // .margin({ right: $r('sys.float.ohos_id_default_padding_end') }) + .justifyContent(FlexAlign.Center) + } + + @Builder popupBuilder() { + Column() { + ForEach(this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), (item, _index?) => { + ImageMenuItem({ item: item }) + }) + } + .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum) + .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }) + } +} + +@Component +struct TabContentItem { + item: TabTitleBarTabItem + index: number + maxIndex: number + onCustomClick?: () => void + + @Prop currentIndex: number + + @State isOnFocus: boolean = false + @State isOnHover: boolean = false + @State isOnClick: boolean = false + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly imageMagnificationFactor = 1.4 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + + getBgColor() { + if (this.isOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Row() { + Column() { + if (this.item.icon === undefined) { + Text(this.item.title) + .fontSize(this.index === this.currentIndex + ? $r('sys.float.ohos_id_text_size_headline7') + : $r('sys.float.ohos_id_text_size_headline9')) + .fontColor(this.index === this.currentIndex + ? $r('sys.color.ohos_id_color_titlebar_text') + : $r('sys.color.ohos_id_color_titlebar_text_off')) + .fontWeight(FontWeight.Medium) + .focusable(true) + .padding({ top: this.index === this.currentIndex ? 6 : 10, left: 8, bottom: 2, right: 8 }) + .onFocus(() => this.isOnFocus = true) + .onBlur(() => this.isOnFocus = false) + .onHover((isOn) => this.isOnHover = isOn) + .onKeyEvent((event) => { + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isOnClick = true + } + if (event.type === KeyType.Up) { + this.isOnClick = false + } + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + this.isOnClick = true + } + if (event.type === TouchType.Up) { + this.isOnClick = false + } + }) + .onClick(() => this.onCustomClick && this.onCustomClick()) + } else { + Row() { + Image(this.item.icon) + .alt(this.item.title) + .height(TabContentItem.imageSize) + .focusable(true) + .scale({ + x: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1, + y: this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1 + }) + } + .width(TabContentItem.imageHotZoneWidth) + .height(TabContentItem.imageHotZoneWidth) + .justifyContent(FlexAlign.Center) + .onFocus(() => this.isOnFocus = true) + .onBlur(() => this.isOnFocus = false) + .onHover((isOn) => this.isOnHover = isOn) + .onKeyEvent((event) => { + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isOnClick = true + } + if (event.type === KeyType.Up) { + this.isOnClick = false + } + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + this.isOnClick = true + } + if (event.type === TouchType.Up) { + this.isOnClick = false + } + }) + .onClick(() => this.onCustomClick && this.onCustomClick()) + } + } + .justifyContent(FlexAlign.Center) + } + .height(TabTitleBar.totalHeight) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .margin({ + left: this.index === 0 ? 16 : 0, + right: this.index === this.maxIndex ? 12 : 0 + }) // sys.float.ohos_id_max_padding_start - 8 + .borderRadius(TabContentItem.buttonBorderRadius) + .backgroundColor(this.getBgColor()) + .border(this.isOnFocus ? + { width: TabContentItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + } +} + +@Component +struct ImageMenuItem { + item: TabTitleBarMenuItem + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + + @State isOnFocus: boolean = false + @State isOnHover: boolean = false + @State isOnClick: boolean = false + + getFgColor() { + return this.isOnClick + ? $r('sys.color.ohos_id_color_titlebar_icon_pressed') + : $r('sys.color.ohos_id_color_titlebar_icon') + } + + getBgColor() { + if (this.isOnClick) { + return $r('sys.color.ohos_id_color_click_effect') + } else if (this.isOnHover) { + return $r('sys.color.ohos_id_color_hover') + } else { + return Color.Transparent + } + } + + build() { + Row() { + Image(this.item.value) + .width(ImageMenuItem.imageSize) + .height(ImageMenuItem.imageSize) + .focusable(this.item.isEnabled) + } + .width(ImageMenuItem.imageHotZoneWidth) + .height(ImageMenuItem.imageHotZoneWidth) + .borderRadius(ImageMenuItem.buttonBorderRadius) + .foregroundColor(this.getFgColor()) + .backgroundColor(this.getBgColor()) + .justifyContent(FlexAlign.Center) + .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity) + .border(this.isOnFocus ? + { width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_emphasize'), + style: BorderStyle.Solid + } : { width: 0 }) + .onFocus(() => { + if (!this.item.isEnabled) { + return + } + this.isOnFocus = true + }) + .onBlur(() => this.isOnFocus = false) + .onHover((isOn) => { + if (!this.item.isEnabled) { + return + } + this.isOnHover = isOn + }) + .onKeyEvent((event) => { + if (!this.item.isEnabled) { + return + } + if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) { + return + } + if (event.type === KeyType.Down) { + this.isOnClick = true + } + if (event.type === KeyType.Up) { + this.isOnClick = false + } + }) + .onTouch((event) => { + if (!this.item.isEnabled) { + return + } + if (event.type === TouchType.Down) { + this.isOnClick = true + } + if (event.type === TouchType.Up) { + this.isOnClick = false + } + }) + .onClick(() => this.item.isEnabled && this.item.action && this.item.action()) + } +} + +export default { TabTitleBar } \ No newline at end of file -- Gitee