diff --git a/adapter/ohos/build/BUILD.gn b/adapter/ohos/build/BUILD.gn index 47a12dd766557c2c37b39a3b9e496d245aeabb5e..ef99d701d780240171d9dd77a7141cdd61db48bc 100644 --- a/adapter/ohos/build/BUILD.gn +++ b/adapter/ohos/build/BUILD.gn @@ -18,6 +18,7 @@ import("//foundation/arkui/ace_engine/ace_config.gni") group("ace_packages") { # core library for Ability Cross-platform Environment(ACE) JS deps = [ + "$ace_root/advanced_ui_component:advanced_ui_component", "$ace_root/build:libace", "$ace_root/build:libace_engine_pa_ark", "$ace_root/frameworks/core/common/register:hdc_register", diff --git a/advanced_ui_component/BUILD.gn b/advanced_ui_component/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..3ae7cad5ca6c104e049992ee3434a20aa22050d2 --- /dev/null +++ b/advanced_ui_component/BUILD.gn @@ -0,0 +1,30 @@ +# 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. + +group("advanced_ui_component") { + deps = [ + "composelistitem/interfaces:composelistitem", + "composetitlebar/interfaces:composetitlebar", + "dialog/interfaces:dialog", + "editabletitlebar/interfaces:editabletitlebar", + "filter/interfaces:filter", + "progressbutton/interfaces:progressbutton", + "selecttitlebar/interfaces:selecttitlebar", + "splitlayout/interfaces:splitlayout", + "subheader/interfaces:subheader", + "swiperefresher/interfaces:swiperefresher", + "tabtitlebar/interfaces:tabtitlebar", + "toolbar/interfaces:toolbar", + "treeview/interfaces:treeview", + ] +} diff --git a/advanced_ui_component/composelistitem/interfaces/BUILD.gn b/advanced_ui_component/composelistitem/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..c5dec1e2b89f85c2e31be1c33d3c9b1c16dfa2d8 --- /dev/null +++ b/advanced_ui_component/composelistitem/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_composelistitem_abc") { + src_js = rebase_path("composelistitem.js") + dst_file = rebase_path(target_out_dir + "/composelistitem.abc") + in_puts = [ "composelistitem.js" ] + out_puts = [ target_out_dir + "/composelistitem.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("composelistitem_abc") { + input = get_label_info(":gen_composelistitem_abc", "target_out_dir") + + "/composelistitem.abc" + output = target_out_dir + "/composelistitem_abc.o" + dep = ":gen_composelistitem_abc" +} + +gen_obj("composelistitem_abc_preview") { + input = get_label_info(":gen_composelistitem_abc", "target_out_dir") + + "/composelistitem.abc" + output = target_out_dir + "/composelistitem_abc.c" + snapshot_dep = [ ":gen_composelistitem_abc" ] +} + +ohos_shared_library("composelistitem") { + sources = [ "composelistitem.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_composelistitem_abc_preview" ] + } else { + deps = [ ":composelistitem_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/composelistitem/interfaces/composelistitem.cpp b/advanced_ui_component/composelistitem/interfaces/composelistitem.cpp new file mode 100644 index 0000000000000000000000000000000000000000..0e083094a64d79e65eb639bcf06122f11021d344 --- /dev/null +++ b/advanced_ui_component/composelistitem/interfaces/composelistitem.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_composelistitem_abc_start[]; +extern const char _binary_composelistitem_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_ComposeListItem_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_composelistitem_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_composelistitem_abc_end - _binary_composelistitem_abc_start; + } +} + +/* + * Module define + */ +static napi_module ComposeListItemModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.ComposeListItem", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void ComposeListItemRegisterModule(void) +{ + napi_module_register(&ComposeListItemModule); +} diff --git a/advanced_ui_component/composelistitem/interfaces/composelistitem.js b/advanced_ui_component/composelistitem/interfaces/composelistitem.js new file mode 100644 index 0000000000000000000000000000000000000000..f0255d45635e8f7d443b1b89e1c3074f86ee882e --- /dev/null +++ b/advanced_ui_component/composelistitem/interfaces/composelistitem.js @@ -0,0 +1,1203 @@ +/* + * 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. + */ + +export var IconType; +!function(e){ + e[e.BADGE=1] = "BADGE"; + e[e.NORMAL_ICON=2] = "NORMAL_ICON"; + e[e.SYSTEM_ICON=3] = "SYSTEM_ICON"; + e[e.HEAD_SCULPTURE=4] = "HEAD_SCULPTURE"; + e[e.APP_ICON=5] = "APP_ICON"; + e[e.PREVIEW=6] = "PREVIEW"; + e[e.LONGITUDINAL=7] = "LONGITUDINAL"; + e[e.VERTICAL=8] = "VERTICAL" +}(IconType || (IconType = {})); +var ItemHeight; +!function(e){ + e[e.FIRST_HEIGHT=48] = "FIRST_HEIGHT"; + e[e.SECOND_HEIGHT=56] = "SECOND_HEIGHT"; + e[e.THIRD_HEIGHT=64] = "THIRD_HEIGHT"; + e[e.FOURTH_HEIGHT=72] = "FOURTH_HEIGHT"; + e[e.FIFTH_HEIGHT=96] = "FIFTH_HEIGHT" +}(ItemHeight || (ItemHeight = {})); +const TEXT_MAX_LINE = 1; +const ITEM_BORDER_SHOWN = 2; +const TEXT_COLUMN_SPACE = 4; +const TEXT_SAFE_MARGIN = 8; +const BADGE_SIZE = 8; +const SMALL_ICON_SIZE = 16; +const SYSTEM_ICON_SIZE = 24; +const TEXT_ARROW_HEIGHT = 32; +const SAFE_LIST_PADDING = 32; +const HEADSCULPTURE_SIZE = 40; +const BUTTON_SIZE = 28; +const APP_ICON_SIZE = 64; +const PREVIEW_SIZE = 96; +const LONGITUDINAL_SIZE = 96; +const VERTICAL_SIZE = 96; +const NORMAL_ITEM_ROW_SPACE = 16; +const SPECIAL_ITEM_ROW_SPACE = 0; +const SPECIAL_ICON_SIZE = 0; +const DEFAULT_ROW_SPACE = 0; +const SPECICAL_ROW_SPACE = 4; +const OPERATEITEM_ICONLIKE_SIZE = 24; +const OPERATEITEM_ARROW_WIDTH = 12; +const OPERATEITEM_ICON_CLICKABLE_SIZE = 48; +const OPERATEITEM_IMAGE_SIZE = 48; +const HOVERING_COLOR = "#0d000000"; +const TOUCH_DOWN_COLOR = "#1a000000"; +const ACTIVED_COLOR = "#1a0a59f7"; +const ICON_SIZE_MAP = new Map([[IconType.BADGE, 8], [IconType.NORMAL_ICON, 16], [IconType.SYSTEM_ICON, 24], [IconType.HEAD_SCULPTURE, 40], [IconType.APP_ICON, 64], [IconType.PREVIEW, 96], [IconType.LONGITUDINAL, 96], [IconType.VERTICAL, 96]]); + +class ContentItemStruct extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.iconStyle = null; + this.icon = null; + this.primaryText = null; + this.secondaryText = null; + this.description = null; + this.itemRowSpace = 16; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.iconStyle && (this.iconStyle = e.iconStyle); + void 0 !== e.icon && (this.icon = e.icon); + void 0 !== e.primaryText && (this.primaryText = e.primaryText); + void 0 !== e.secondaryText && (this.secondaryText = e.secondaryText); + void 0 !== e.description && (this.description = e.description); + void 0 !== e.itemRowSpace && (this.itemRowSpace = e.itemRowSpace) + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + } + + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + aboutToAppear() { + null == this.icon && null == this.iconStyle && (this.itemRowSpace = 0) + } + + createIcon(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.icon && null != this.iconStyle ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.iconStyle <= IconType.PREVIEW ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.icon); + Image.objectFit(ImageFit.Contain); + Image.width(ICON_SIZE_MAP.get(this.iconStyle)); + Image.height(ICON_SIZE_MAP.get(this.iconStyle)); + Image.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0); + Image.draggable(!1); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.icon); + Image.objectFit(ImageFit.Contain); + Image.constraintSize({ + minWidth: 0, + maxWidth: ICON_SIZE_MAP.get(this.iconStyle), + minHeight: 0, + maxHeight: ICON_SIZE_MAP.get(this.iconStyle) + }); + Image.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0); + Image.draggable(!1); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop() + } + + createText(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create({ space: 4 }); + Column.margin({ top: 8, bottom: 8 }); + Column.alignItems(HorizontalAlign.Start); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(1); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.fontWeight(FontWeight.Medium); + Text.focusable(!0); + Text.draggable(!1); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.secondaryText ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(1); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.focusable(!0); + Text.draggable(!1); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.description ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.description); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.maxLines(1); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.focusable(!0); + Text.draggable(!1); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop() + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create({ space: this.itemRowSpace }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.createIcon.bind(this)(); + this.createText.bind(this)(); + Row.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +class OperateItemStruct extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.arrow = null; + this.icon = null; + this.subIcon = null; + this.button = null; + this.switch = null; + this.checkBox = null; + this.radio = null; + this.image = null; + this.text = null; + this.__switchState = new ObservedPropertySimplePU(!1, this, "switchState"); + this.__radioState = new ObservedPropertySimplePU(!1, this, "radioState"); + this.__checkBoxState = new ObservedPropertySimplePU(!1, this, "checkBoxState"); + this.__parentCanFocus = new SynchedPropertySimpleTwoWayPU(t.parentCanFocus, this, "parentCanFocus"); + this.__parentCanTouch = new SynchedPropertySimpleTwoWayPU(t.parentCanTouch, this, "parentCanTouch"); + this.__parentIsHover = new SynchedPropertySimpleTwoWayPU(t.parentIsHover, this, "parentIsHover"); + this.__parentCanHover = new SynchedPropertySimpleTwoWayPU(t.parentCanHover, this, "parentCanHover"); + this.__parentIsActive = new SynchedPropertySimpleTwoWayPU(t.parentIsActive, this, "parentIsActive"); + this.__parentFrontColor = new SynchedPropertySimpleTwoWayPU(t.parentFrontColor, this, "parentFrontColor"); + this.rowSpace = 0; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.arrow && (this.arrow = e.arrow); + void 0 !== e.icon && (this.icon = e.icon); + void 0 !== e.subIcon && (this.subIcon = e.subIcon); + void 0 !== e.button && (this.button = e.button); + void 0 !== e.switch && (this.switch = e.switch); + void 0 !== e.checkBox && (this.checkBox = e.checkBox); + void 0 !== e.radio && (this.radio = e.radio); + void 0 !== e.image && (this.image = e.image); + void 0 !== e.text && (this.text = e.text); + void 0 !== e.switchState && (this.switchState = e.switchState); + void 0 !== e.radioState && (this.radioState = e.radioState); + void 0 !== e.checkBoxState && (this.checkBoxState = e.checkBoxState); + void 0 !== e.rowSpace && (this.rowSpace = e.rowSpace) + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + this.__switchState.purgeDependencyOnElmtId(e); + this.__radioState.purgeDependencyOnElmtId(e); + this.__checkBoxState.purgeDependencyOnElmtId(e); + this.__parentCanFocus.purgeDependencyOnElmtId(e); + this.__parentCanTouch.purgeDependencyOnElmtId(e); + this.__parentIsHover.purgeDependencyOnElmtId(e); + this.__parentCanHover.purgeDependencyOnElmtId(e); + this.__parentIsActive.purgeDependencyOnElmtId(e); + this.__parentFrontColor.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__switchState.aboutToBeDeleted(); + this.__radioState.aboutToBeDeleted(); + this.__checkBoxState.aboutToBeDeleted(); + this.__parentCanFocus.aboutToBeDeleted(); + this.__parentCanTouch.aboutToBeDeleted(); + this.__parentIsHover.aboutToBeDeleted(); + this.__parentCanHover.aboutToBeDeleted(); + this.__parentIsActive.aboutToBeDeleted(); + this.__parentFrontColor.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get switchState() { + return this.__switchState.get() + } + + set switchState(e) { + this.__switchState.set(e) + } + + get radioState() { + return this.__radioState.get() + } + + set radioState(e) { + this.__radioState.set(e) + } + + get checkBoxState() { + return this.__checkBoxState.get() + } + + set checkBoxState(e) { + this.__checkBoxState.set(e) + } + + get parentCanFocus() { + return this.__parentCanFocus.get() + } + + set parentCanFocus(e) { + this.__parentCanFocus.set(e) + } + + get parentCanTouch() { + return this.__parentCanTouch.get() + } + + set parentCanTouch(e) { + this.__parentCanTouch.set(e) + } + + get parentIsHover() { + return this.__parentIsHover.get() + } + + set parentIsHover(e) { + this.__parentIsHover.set(e) + } + + get parentCanHover() { + return this.__parentCanHover.get() + } + + set parentCanHover(e) { + this.__parentCanHover.set(e) + } + + get parentIsActive() { + return this.__parentIsActive.get() + } + + set parentIsActive(e) { + this.__parentIsActive.set(e) + } + + get parentFrontColor() { + return this.__parentFrontColor.get() + } + + set parentFrontColor(e) { + this.__parentFrontColor.set(e) + } + + aboutToAppear() { + null != this.switch && (this.switchState = this.switch.isCheck); + null != this.radio && (this.radioState = this.radio.isCheck); + null != this.checkBox && (this.checkBoxState = this.checkBox.isCheck); + (null == this.button && null == this.image && null != this.icon && null != this.text || null == this.button && null == this.image && null == this.icon && null != this.arrow && null != this.text) && (this.rowSpace = 4) + } + + createButton(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithChild(); + Button.hitTestBehavior(HitTestMode.Block); + Button.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_button3"], + bundleName: "", + moduleName: "" + }); + Button.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated_transparent"], + bundleName: "", + moduleName: "" + }); + Button.height(28); + Button.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_button_normal"], + bundleName: "", + moduleName: "" + }); + Button.labelStyle({ maxLines: 1 }); + Button.onFocus((() => { + this.parentCanFocus = !1 + })); + Button.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Button.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + t || Button.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 8, right: 8 }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e); + Text.focusable(!0); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop(); + Button.pop() + } + + createIcon(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Button.createWithChild({ type: ButtonType.Normal }); + Button.hitTestBehavior(HitTestMode.Block); + Button.backgroundColor(Color.Transparent); + Button.height(48); + Button.width(48); + Button.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }); + Button.onFocus((() => { + this.parentCanFocus = !1 + })); + Button.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Button.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + Button.onClick(e.action); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Image.create(e.value); + Image.height(24); + Image.width(24); + Image.focusable(!0); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }); + Image.draggable(!1); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Button.pop() + } + + createImage(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Image.create(e); + Image.height(48); + Image.width(48); + Image.draggable(!1); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + } + + createText(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.focusable(!0); + Text.draggable(!1); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + } + + createArrow(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Button.createWithChild({ type: ButtonType.Normal }); + Button.hitTestBehavior(HitTestMode.Block); + Button.backgroundColor(Color.Transparent); + Button.height(24); + Button.width(12); + Button.onFocus((() => { + this.parentCanFocus = !1 + })); + Button.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Button.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + Button.onClick(e.action); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Image.create(e.value); + Image.height(24); + Image.width(12); + Image.focusable(!0); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_fourth"], + bundleName: "", + moduleName: "" + }); + Image.draggable(!1); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Button.pop() + } + + createRadio(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Radio.create({ value: null, group: null }); + Radio.checked(this.radioState); + Radio.onChange(e.onChange); + Radio.height(24); + Radio.width(24); + Radio.onFocus((() => { + this.parentCanFocus = !1 + })); + Radio.hitTestBehavior(HitTestMode.Block); + Radio.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Radio.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + o || Radio.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + } + + createCheckBox(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Checkbox.create(); + Checkbox.select(this.checkBoxState); + Checkbox.onChange(e.onChange); + Checkbox.height(24); + Checkbox.height(24); + Checkbox.onFocus((() => { + this.parentCanFocus = !1 + })); + Checkbox.hitTestBehavior(HitTestMode.Block); + Checkbox.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Checkbox.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + o || Checkbox.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Checkbox.pop() + } + + createSwitch(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(48); + Row.width(48); + Row.justifyContent(FlexAlign.Center); + Row.onFocus((() => { + this.parentCanFocus = !1 + })); + Row.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Row.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Toggle.create({ type: ToggleType.Switch, isOn: this.switchState }); + Toggle.onChange(e.onChange); + Toggle.onClick((() => { + this.switchState = !this.switchState + })); + Toggle.hitTestBehavior(HitTestMode.Block); + o || Toggle.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Toggle.pop(); + Row.pop() + } + + createTextArrow(e, t, o = null) { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithChild({ type: ButtonType.Normal }); + Button.hitTestBehavior(HitTestMode.Block); + Button.labelStyle({ maxLines: 1 }); + Button.backgroundColor(Color.Transparent); + Button.height(32); + Button.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }); + Button.onFocus((() => { + this.parentCanFocus = !1 + })); + Button.onTouch((e => { + e.type == TouchType.Down && (this.parentCanTouch = !1); + e.type == TouchType.Up && (this.parentCanTouch = !0) + })); + Button.onHover((e => { + this.parentCanHover = !1; + e && "#0d000000" == this.parentFrontColor && (this.parentFrontColor = this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()); + if (!e) { + this.parentCanHover = !0; + this.parentIsHover && (this.parentFrontColor = this.parentIsHover ? "#0d000000" : this.parentIsActive ? "#1a0a59f7" : Color.Transparent.toString()) + } + })); + Button.onClick(t.action); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create({ space: 4 }); + Row.padding({ left: 8, right: 8 }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.focusable(!0); + Text.draggable(!1); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(t.value); + Image.height(24); + Image.width(12); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_fourth"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0); + Image.draggable(!1); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop(); + Button.pop() + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create({ space: this.rowSpace }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.button ? this.ifElseBranchUpdateFunction(0, (() => { + this.createButton.bind(this)(this.button.text) + })) : null != this.image ? this.ifElseBranchUpdateFunction(1, (() => { + this.createImage.bind(this)(this.image) + })) : null != this.icon && null != this.text ? this.ifElseBranchUpdateFunction(2, (() => { + this.createText.bind(this)(this.text); + this.createIcon.bind(this)(this.icon) + })) : null != this.arrow && null == this.text ? this.ifElseBranchUpdateFunction(3, (() => { + this.createArrow.bind(this)(this.arrow) + })) : null != this.arrow && null != this.text ? this.ifElseBranchUpdateFunction(4, (() => { + this.createTextArrow.bind(this)(this.text, this.arrow) + })) : null != this.text ? this.ifElseBranchUpdateFunction(5, (() => { + this.createText.bind(this)(this.text) + })) : null != this.radio ? this.ifElseBranchUpdateFunction(6, (() => { + this.createRadio.bind(this)(this.radio) + })) : null != this.checkBox ? this.ifElseBranchUpdateFunction(7, (() => { + this.createCheckBox.bind(this)(this.checkBox) + })) : null != this.switch ? this.ifElseBranchUpdateFunction(8, (() => { + this.createSwitch.bind(this)(this.switch) + })) : null != this.icon && this.ifElseBranchUpdateFunction(9, (() => { + this.createIcon.bind(this)(this.icon); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.subIcon ? this.ifElseBranchUpdateFunction(0, (() => { + this.createIcon.bind(this)(this.subIcon) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export class ComposeListItem extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.__contentItem = new SynchedPropertyObjectOneWayPU(t.contentItem, this, "contentItem"); + this.__operateItem = new SynchedPropertyObjectOneWayPU(t.operateItem, this, "operateItem"); + this.__frontColor = new ObservedPropertySimplePU(Color.Transparent.toString(), this, "frontColor"); + this.__borderSize = new ObservedPropertySimplePU(0, this, "borderSize"); + this.__canFocus = new ObservedPropertySimplePU(!1, this, "canFocus"); + this.__canTouch = new ObservedPropertySimplePU(!0, this, "canTouch"); + this.__canHover = new ObservedPropertySimplePU(!0, this, "canHover"); + this.__isHover = new ObservedPropertySimplePU(!0, this, "isHover"); + this.__itemHeight = new ObservedPropertySimplePU(ItemHeight.FIRST_HEIGHT, this, "itemHeight"); + this.__isActive = new ObservedPropertySimplePU(!1, this, "isActive"); + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.contentItem ? this.__contentItem.set(e.contentItem) : this.__contentItem.set(null); + void 0 !== e.operateItem ? this.__operateItem.set(e.operateItem) : this.__operateItem.set(null); + void 0 !== e.frontColor && (this.frontColor = e.frontColor); + void 0 !== e.borderSize && (this.borderSize = e.borderSize); + void 0 !== e.canFocus && (this.canFocus = e.canFocus); + void 0 !== e.canTouch && (this.canTouch = e.canTouch); + void 0 !== e.canHover && (this.canHover = e.canHover); + void 0 !== e.isHover && (this.isHover = e.isHover); + void 0 !== e.itemHeight && (this.itemHeight = e.itemHeight); + void 0 !== e.isActive && (this.isActive = e.isActive) + } + + updateStateVars(e) { + this.__contentItem.reset(e.contentItem); + this.__operateItem.reset(e.operateItem) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__contentItem.purgeDependencyOnElmtId(e); + this.__operateItem.purgeDependencyOnElmtId(e); + this.__frontColor.purgeDependencyOnElmtId(e); + this.__borderSize.purgeDependencyOnElmtId(e); + this.__canFocus.purgeDependencyOnElmtId(e); + this.__canTouch.purgeDependencyOnElmtId(e); + this.__canHover.purgeDependencyOnElmtId(e); + this.__isHover.purgeDependencyOnElmtId(e); + this.__itemHeight.purgeDependencyOnElmtId(e); + this.__isActive.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__contentItem.aboutToBeDeleted(); + this.__operateItem.aboutToBeDeleted(); + this.__frontColor.aboutToBeDeleted(); + this.__borderSize.aboutToBeDeleted(); + this.__canFocus.aboutToBeDeleted(); + this.__canTouch.aboutToBeDeleted(); + this.__canHover.aboutToBeDeleted(); + this.__isHover.aboutToBeDeleted(); + this.__itemHeight.aboutToBeDeleted(); + this.__isActive.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get contentItem() { + return this.__contentItem.get() + } + + set contentItem(e) { + this.__contentItem.set(e) + } + + get operateItem() { + return this.__operateItem.get() + } + + set operateItem(e) { + this.__operateItem.set(e) + } + + get frontColor() { + return this.__frontColor.get() + } + + set frontColor(e) { + this.__frontColor.set(e) + } + + get borderSize() { + return this.__borderSize.get() + } + + set borderSize(e) { + this.__borderSize.set(e) + } + + get canFocus() { + return this.__canFocus.get() + } + + set canFocus(e) { + this.__canFocus.set(e) + } + + get canTouch() { + return this.__canTouch.get() + } + + set canTouch(e) { + this.__canTouch.set(e) + } + + get canHover() { + return this.__canHover.get() + } + + set canHover(e) { + this.__canHover.set(e) + } + + get isHover() { + return this.__isHover.get() + } + + set isHover(e) { + this.__isHover.set(e) + } + + get itemHeight() { + return this.__itemHeight.get() + } + + set itemHeight(e) { + this.__itemHeight.set(e) + } + + get isActive() { + return this.__isActive.get() + } + + set isActive(e) { + this.__isActive.set(e) + } + + aboutToAppear() { + if (null !== this.contentItem) { + null === this.contentItem.secondaryText && null === this.contentItem.description ? null === this.contentItem.icon ? this.itemHeight = ItemHeight.FIRST_HEIGHT : this.itemHeight = this.contentItem.iconStyle <= IconType.HEAD_SCULPTURE ? ItemHeight.SECOND_HEIGHT : ItemHeight.THIRD_HEIGHT : null === this.contentItem.description ? null === this.contentItem.icon || null !== this.contentItem.icon && this.contentItem.iconStyle <= IconType.SYSTEM_ICON ? this.itemHeight = ItemHeight.THIRD_HEIGHT : this.itemHeight = ItemHeight.FOURTH_HEIGHT : this.itemHeight = ItemHeight.FIFTH_HEIGHT; + ICON_SIZE_MAP.get(this.contentItem.iconStyle) >= this.itemHeight && (this.itemHeight = ICON_SIZE_MAP.get(this.contentItem.iconStyle) + 32) + } else null === this.operateItem.image && null === this.operateItem.icon && null === this.operateItem.subIcon || (this.itemHeight = 80) + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create(); + Stack.padding({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_start"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_end"], + bundleName: "", + moduleName: "" + } + }); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }); + Flex.height(this.itemHeight); + Flex.focusable(!0); + Flex.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + Flex.backgroundColor(this.frontColor); + Flex.onFocus((() => { + this.canFocus = !0 + })); + Flex.onBlur((() => { + this.canFocus = !1 + })); + Flex.onHover((e => { + this.isHover = e; + this.canHover && (this.frontColor = e ? "#0d000000" : this.isActive ? "#1a0a59f7" : Color.Transparent.toString()) + })); + Flex.onTouch((e => { + e.type == TouchType.Down && this.canTouch && (this.frontColor = "#1a000000"); + if (e.type == TouchType.Up) { + this.isActive = !this.isActive; + this.frontColor = this.isActive ? "#1a0a59f7" : Color.Transparent.toString() + } + })); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null === this.contentItem ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ContentItemStruct(this, {}, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null !== this.contentItem ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ContentItemStruct(this, { + icon: "string" == typeof this.contentItem.icon ? null : this.contentItem.icon, + iconStyle: this.contentItem.iconStyle, + primaryText: "string" == typeof this.contentItem.primaryText ? this.contentItem.primaryText : null, + secondaryText: "string" == typeof this.contentItem.secondaryText ? this.contentItem.secondaryText : null, + description: "string" == typeof this.contentItem.description ? this.contentItem.description : null + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null !== this.operateItem ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + __Common__.create(); + __Common__.onFocus((() => { + this.canFocus = !1 + })); + __Common__.onBlur((() => { + this.canFocus = !0 + })); + t || __Common__.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new OperateItemStruct(this, { + icon: this.operateItem.icon, + subIcon: this.operateItem.subIcon, + button: this.operateItem.button, + switch: this.operateItem.switch, + checkBox: this.operateItem.checkbox, + radio: this.operateItem.radio, + image: "string" == typeof this.operateItem.image ? null : this.operateItem.image, + text: "string" == typeof this.operateItem.text ? this.operateItem.text : null, + arrow: "string" == typeof this.operateItem.arrow ? null : this.operateItem.arrow, + parentCanFocus: this.__canFocus, + parentCanTouch: this.__canTouch, + parentIsHover: this.__isHover, + parentFrontColor: this.__frontColor, + parentIsActive: this.__isActive, + parentCanHover: this.__canHover + }, 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); + If.create(); + this.canFocus ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(this.itemHeight); + Row.width("100%"); + Row.hitTestBehavior(HitTestMode.None); + Row.border({ + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + } + }); + Row.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Stack.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export default { IconType, ComposeListItem }; \ No newline at end of file diff --git a/advanced_ui_component/composelistitem/source/composelistitem.ets b/advanced_ui_component/composelistitem/source/composelistitem.ets new file mode 100644 index 0000000000000000000000000000000000000000..f2ea00cb19496815cc4927ff3a9e1494b0e9e0bd --- /dev/null +++ b/advanced_ui_component/composelistitem/source/composelistitem.ets @@ -0,0 +1,708 @@ +/* + * 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. + */ + +export enum IconType { + BADGE = 1, + NORMAL_ICON, + SYSTEM_ICON, + HEAD_SCULPTURE, + APP_ICON, + PREVIEW, + LONGITUDINAL, + VERTICAL +} + +enum ItemHeight { + FIRST_HEIGHT = 48, + SECOND_HEIGHT = 56, + THIRD_HEIGHT = 64, + FOURTH_HEIGHT = 72, + FIFTH_HEIGHT = 96 +} + +export type OperateItem = { + icon?: OperateIcon, + subIcon ?: OperateIcon, + button?: OperateButton; + switch?: OperateCheck; + checkbox?: OperateCheck; + radio?: OperateCheck; + image?: ResourceStr; + text?: ResourceStr; + arrow?: OperateIcon; +} + +export type ContentItem = { + iconStyle?: IconType; + icon?: ResourceStr; + primaryText?: ResourceStr; + secondaryText?: ResourceStr; + description?: ResourceStr; +} + +export declare type OperateIcon = { + value: ResourceStr, + action?: () => void +} + +export type OperateButton = { + text?: string +} + +export declare type OperateCheck = { + isCheck?: boolean, + onChange?: (value: boolean) => void +} + +const TEXT_MAX_LINE = 1; +const ITEM_BORDER_SHOWN = 2; +const TEXT_COLUMN_SPACE = 4; +const TEXT_SAFE_MARGIN = 8; +const BADGE_SIZE = 8; +const SMALL_ICON_SIZE = 16; +const SYSTEM_ICON_SIZE = 24; +const TEXT_ARROW_HEIGHT = 32; +const SAFE_LIST_PADDING = 32; +const HEADSCULPTURE_SIZE = 40; +const BUTTON_SIZE = 28; +const APP_ICON_SIZE = 64; +const PREVIEW_SIZE = 96; +const LONGITUDINAL_SIZE = 96; +const VERTICAL_SIZE = 96; +const NORMAL_ITEM_ROW_SPACE = 16; +const SPECIAL_ITEM_ROW_SPACE = 0; +const SPECIAL_ICON_SIZE = 0; +const DEFAULT_ROW_SPACE = 0; +const SPECICAL_ROW_SPACE = 4; +const OPERATEITEM_ICONLIKE_SIZE = 24; +const OPERATEITEM_ARROW_WIDTH = 12 +const OPERATEITEM_ICON_CLICKABLE_SIZE = 48; +const OPERATEITEM_IMAGE_SIZE = 48; +const HOVERING_COLOR = '#0d000000'; +const TOUCH_DOWN_COLOR = '#1a000000'; +const ACTIVED_COLOR = '#1a0a59f7'; +const ICON_SIZE_MAP: Map = new Map([ + [IconType.BADGE, BADGE_SIZE], + [IconType.NORMAL_ICON, SMALL_ICON_SIZE], + [IconType.SYSTEM_ICON, SYSTEM_ICON_SIZE], + [IconType.HEAD_SCULPTURE, HEADSCULPTURE_SIZE], + [IconType.APP_ICON, APP_ICON_SIZE], + [IconType.PREVIEW, PREVIEW_SIZE], + [IconType.LONGITUDINAL, LONGITUDINAL_SIZE], + [IconType.VERTICAL, VERTICAL_SIZE] +]) + +@Component +struct ContentItemStruct { + iconStyle: IconType = null + icon: Resource = null + primaryText: string = null + secondaryText: string = null + description: string = null + private itemRowSpace: number = NORMAL_ITEM_ROW_SPACE + + aboutToAppear() { + if (this.icon == null && this.iconStyle == null) { + this.itemRowSpace = SPECIAL_ITEM_ROW_SPACE + } + } + + @Builder + createIcon() { + if (this.icon != null && this.iconStyle != null) { + if (this.iconStyle <= IconType.PREVIEW) { + Image(this.icon) + .objectFit(ImageFit.Contain) + .width(ICON_SIZE_MAP.get(this.iconStyle)) + .height(ICON_SIZE_MAP.get(this.iconStyle)) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + .focusable(true) + .draggable(false) + } + else { + Image(this.icon) + .objectFit(ImageFit.Contain) + .constraintSize({ + minWidth: SPECIAL_ICON_SIZE, + maxWidth: ICON_SIZE_MAP.get(this.iconStyle), + minHeight: SPECIAL_ICON_SIZE, + maxHeight: ICON_SIZE_MAP.get(this.iconStyle) + }) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + .focusable(true) + .draggable(false) + } + } + } + + @Builder + createText() { + Column({ space: TEXT_COLUMN_SPACE }) { + Text(this.primaryText) + .fontSize($r('sys.float.ohos_id_text_size_body1')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .maxLines(TEXT_MAX_LINE) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontWeight(FontWeight.Medium) + .focusable(true) + .draggable(false) + if (this.secondaryText != null) { + Text(this.secondaryText) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .maxLines(TEXT_MAX_LINE) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .focusable(true) + .draggable(false) + } + if (this.description != null) { + Text(this.description) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .maxLines(TEXT_MAX_LINE) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .focusable(true) + .draggable(false) + } + } + .margin({ + top: TEXT_SAFE_MARGIN, + bottom: TEXT_SAFE_MARGIN + }) + .alignItems(HorizontalAlign.Start) + } + + build() { + Row({ space: this.itemRowSpace }) { + this.createIcon() + this.createText() + } + } +} + +@Component +struct OperateItemStruct { + arrow: OperateIcon = null + icon: OperateIcon = null + subIcon: OperateIcon = null + button: OperateButton = null + switch: OperateCheck = null + checkBox: OperateCheck = null + radio: OperateCheck = null + image: Resource = null + text: string = null + @State switchState: boolean = false + @State radioState: boolean = false + @State checkBoxState: boolean = false + @Link parentCanFocus: boolean + @Link parentCanTouch: boolean + @Link parentIsHover: boolean + @Link parentCanHover: boolean + @Link parentIsActive: boolean + @Link parentFrontColor: string + private rowSpace: number = DEFAULT_ROW_SPACE + + aboutToAppear() { + if (this.switch != null) { + this.switchState = this.switch.isCheck + } + if (this.radio != null) { + this.radioState = this.radio.isCheck + } + if (this.checkBox != null) { + this.checkBoxState = this.checkBox.isCheck + } + + if ((this.button == null && this.image == null && this.icon != null && this.text != null) || + (this.button == null && this.image == null && this.icon == null && this.arrow != null && this.text != null)) { + this.rowSpace = SPECICAL_ROW_SPACE + } + } + + @Builder + createButton(text: string) { + Button() { + Row() { + Text(text) + .focusable(true) + } + .padding({ + left: TEXT_SAFE_MARGIN, + right: TEXT_SAFE_MARGIN + }) + } + .hitTestBehavior(HitTestMode.Block) + .fontSize($r('sys.float.ohos_id_text_size_button3')) + .fontColor($r('sys.color.ohos_id_color_text_primary_activated_transparent')) + .height(BUTTON_SIZE) + .backgroundColor($r('sys.color.ohos_id_color_button_normal')) + .labelStyle({ + maxLines: TEXT_MAX_LINE + }) + .onFocus(() => { + this.parentCanFocus = false + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + } + + @Builder + createIcon(icon: OperateIcon) { + Button({ type: ButtonType.Normal }) { + Image(icon.value) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ICONLIKE_SIZE) + .focusable(true) + .fillColor($r('sys.color.ohos_id_color_primary')) + .draggable(false) + } + .hitTestBehavior(HitTestMode.Block) + .backgroundColor(Color.Transparent) + .height(OPERATEITEM_ICON_CLICKABLE_SIZE) + .width(OPERATEITEM_ICON_CLICKABLE_SIZE) + .borderRadius($r('sys.float.ohos_id_corner_radius_clicked')) + .onFocus(() => { + this.parentCanFocus = false + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + .onClick((icon.action)) + } + + @Builder + createImage(image: Resource) { + Image(image) + .height(OPERATEITEM_IMAGE_SIZE) + .width(OPERATEITEM_IMAGE_SIZE) + .draggable(false) + } + + @Builder + createText(text: string) { + Text(text) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .focusable(true) + .draggable(false) + } + + @Builder + createArrow(icon: OperateIcon) { + Button({ type: ButtonType.Normal }) { + Image(icon.value) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ARROW_WIDTH) + .focusable(true) + .fillColor($r('sys.color.ohos_id_color_fourth')) + .draggable(false) + } + .hitTestBehavior(HitTestMode.Block) + .backgroundColor(Color.Transparent) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ARROW_WIDTH) + .onFocus(() => { + this.parentCanFocus = false + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + .onClick(icon.action) + } + + @Builder + createRadio(radio: OperateCheck) { + Radio({ value: null, group: null }) + .checked(this.radioState) + .onChange(radio.onChange) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ICONLIKE_SIZE) + .onFocus(() => { + this.parentCanFocus = false + }) + .hitTestBehavior(HitTestMode.Block) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + } + + @Builder + createCheckBox(checkBox: OperateCheck) { + Checkbox() + .select(this.checkBoxState) + .onChange(checkBox.onChange) + .height(OPERATEITEM_ICONLIKE_SIZE) + .height(OPERATEITEM_ICONLIKE_SIZE) + .onFocus(() => { + this.parentCanFocus = false + }) + .hitTestBehavior(HitTestMode.Block) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + } + + @Builder + createSwitch(toggleParams: OperateCheck) { + Row() { + Toggle({ type: ToggleType.Switch, isOn: this.switchState }) + .onChange(toggleParams.onChange) + .onClick(() => { + this.switchState = !this.switchState + }) + .hitTestBehavior(HitTestMode.Block) + } + .height(OPERATEITEM_ICON_CLICKABLE_SIZE) + .width(OPERATEITEM_ICON_CLICKABLE_SIZE) + .justifyContent(FlexAlign.Center) + .onFocus(() => { + this.parentCanFocus = false + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + } + + @Builder + createTextArrow(text: string, icon: OperateIcon) { + Button({ type: ButtonType.Normal }) { + Row({ space: SPECICAL_ROW_SPACE }) { + Text(text) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .focusable(true) + .draggable(false) + Image(icon.value) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ARROW_WIDTH) + .fillColor($r('sys.color.ohos_id_color_fourth')) + .focusable(true) + .draggable(false) + } + .padding({ + left: TEXT_SAFE_MARGIN, + right: TEXT_SAFE_MARGIN + }) + } + .hitTestBehavior(HitTestMode.Block) + .labelStyle({ + maxLines: TEXT_MAX_LINE + }) + .backgroundColor(Color.Transparent) + .height(TEXT_ARROW_HEIGHT) + .borderRadius($r('sys.float.ohos_id_corner_radius_clicked')) + .onFocus(() => { + this.parentCanFocus = false + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.parentCanTouch = false + } + if (event.type == TouchType.Up) { + this.parentCanTouch = true + } + }) + .onHover((isHover: boolean) => { + this.parentCanHover = false + if (isHover && this.parentFrontColor == HOVERING_COLOR) { + this.parentFrontColor = this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + if (!isHover) { + this.parentCanHover = true + if (this.parentIsHover) { + this.parentFrontColor = this.parentIsHover ? HOVERING_COLOR : (this.parentIsActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + } + }) + .onClick(icon.action) + } + + build() { + Row({ + space: this.rowSpace + }) { + if (this.button != null) { + this.createButton(this.button.text) + } + + else if (this.image != null) { + this.createImage(this.image) + } + else if (this.icon != null && this.text != null) { + this.createText(this.text) + this.createIcon(this.icon) + } + else if (this.arrow != null && this.text == null) { + this.createArrow(this.arrow) + } + else if (this.arrow != null && this.text != null) { + this.createTextArrow(this.text, this.arrow) + } + else if (this.text != null) { + this.createText(this.text) + } + else if (this.radio != null) { + this.createRadio(this.radio) + } + else if (this.checkBox != null) { + this.createCheckBox(this.checkBox) + } + else if (this.switch != null) { + this.createSwitch(this.switch) + } + else if (this.icon != null) { + this.createIcon(this.icon) + if (this.subIcon != null) { + this.createIcon(this.subIcon) + } + } + } + } +} + +@Component +export struct ComposeListItem { + @Prop contentItem: ContentItem = null; + @Prop operateItem: OperateItem = null; + @State frontColor: string = Color.Transparent.toString() + @State borderSize: number = 0; + @State canFocus: boolean = false + @State canTouch: boolean = true + @State canHover: boolean = true + @State isHover: boolean = true + @State itemHeight: number = ItemHeight.FIRST_HEIGHT; + @State isActive: boolean = false + + aboutToAppear() { + if (this.contentItem === null) { + if (this.operateItem.image !== null || this.operateItem.icon !== null || this.operateItem.subIcon !== null) { + this.itemHeight = OPERATEITEM_IMAGE_SIZE + SAFE_LIST_PADDING + } + return + } + + if (this.contentItem.secondaryText === null && this.contentItem.description === null) { + if (this.contentItem.icon === null) { + this.itemHeight = ItemHeight.FIRST_HEIGHT + } + else { + this.itemHeight = this.contentItem.iconStyle <= IconType.HEAD_SCULPTURE ? ItemHeight.SECOND_HEIGHT : ItemHeight.THIRD_HEIGHT + } + } + else if (this.contentItem.description === null) { + if (this.contentItem.icon === null || (this.contentItem.icon !== null && this.contentItem.iconStyle <= IconType.SYSTEM_ICON)) { + this.itemHeight = ItemHeight.THIRD_HEIGHT + } + else { + this.itemHeight = ItemHeight.FOURTH_HEIGHT + } + } + else { + this.itemHeight = ItemHeight.FIFTH_HEIGHT + } + + if (ICON_SIZE_MAP.get(this.contentItem.iconStyle) >= this.itemHeight) { + this.itemHeight = ICON_SIZE_MAP.get(this.contentItem.iconStyle) + SAFE_LIST_PADDING; + } + } + + build() { + Stack() { + Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + if (this.contentItem === null) { + ContentItemStruct({}) + } + if (this.contentItem !== null) { + ContentItemStruct({ + icon: typeof this.contentItem.icon === 'string' ? null : this.contentItem.icon, + iconStyle: this.contentItem.iconStyle, + primaryText: typeof this.contentItem.primaryText === 'string' ? this.contentItem.primaryText : null, + secondaryText: typeof this.contentItem.secondaryText === 'string' ? this.contentItem.secondaryText : null, + description: typeof this.contentItem.description === 'string' ? this.contentItem.description : null + }) + } + if (this.operateItem !== null) { + OperateItemStruct({ + icon: this.operateItem.icon, + subIcon: this.operateItem.subIcon, + button: this.operateItem.button, + switch: this.operateItem.switch, + checkBox: this.operateItem.checkbox, + radio: this.operateItem.radio, + image: typeof this.operateItem.image === 'string' ? null : this.operateItem.image, + text: typeof this.operateItem.text === 'string' ? this.operateItem.text : null, + arrow: typeof this.operateItem.arrow === 'string' ? null : this.operateItem.arrow, + parentCanFocus: this.canFocus, + parentCanTouch: this.canTouch, + parentIsHover: this.isHover, + parentFrontColor: this.frontColor, + parentIsActive: this.isActive, + parentCanHover: this.canHover + }) + .onFocus(() => { + this.canFocus = false + }) + .onBlur(() => { + this.canFocus = true + }) + } + } + .height(this.itemHeight) + .focusable(true) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + .backgroundColor(this.frontColor) + .onFocus(() => { + this.canFocus = true + }) + .onBlur(() => { + this.canFocus = false + }) + .onHover((isHover: boolean) => { + this.isHover = isHover + if (this.canHover) { + this.frontColor = isHover ? HOVERING_COLOR : (this.isActive ? ACTIVED_COLOR : Color.Transparent.toString()) + } + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down && this.canTouch) { + this.frontColor = TOUCH_DOWN_COLOR + } + if (event.type == TouchType.Up) { + this.isActive = !this.isActive + this.frontColor = this.isActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + }) + + if (this.canFocus) { + Row() + .height(this.itemHeight) + .width('100%') + .hitTestBehavior(HitTestMode.None) + .border({ + width: ITEM_BORDER_SHOWN, + color: $r('sys.color.ohos_id_color_focused_outline') + }) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + } + } + .padding({ + left: $r('sys.float.ohos_id_default_padding_start'), + right: $r('sys.float.ohos_id_default_padding_end') + }) + } +} \ No newline at end of file diff --git a/advanced_ui_component/composetitlebar/interfaces/BUILD.gn b/advanced_ui_component/composetitlebar/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..dc9c91bf64a734dc1ac58ee0666d992c893f6d35 --- /dev/null +++ b/advanced_ui_component/composetitlebar/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.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" +} + +gen_obj("composetitlebar_abc_preview") { + input = get_label_info(":gen_composetitlebar_abc", "target_out_dir") + + "/composetitlebar.abc" + output = target_out_dir + "/composetitlebar_abc.c" + snapshot_dep = [ ":gen_composetitlebar_abc" ] +} + +ohos_shared_library("composetitlebar") { + sources = [ "composetitlebar.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_composetitlebar_abc_preview" ] + } else { + deps = [ ":composetitlebar_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/composetitlebar/interfaces/composetitlebar.cpp b/advanced_ui_component/composetitlebar/interfaces/composetitlebar.cpp new file mode 100644 index 0000000000000000000000000000000000000000..b6e5f186ebbe03b74f9778c875104f80f835248e --- /dev/null +++ b/advanced_ui_component/composetitlebar/interfaces/composetitlebar.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#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; + } +} + +/* + * Module define + */ +static napi_module ComposeTitleBarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.ComposeTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void ComposeTitleBarRegisterModule(void) +{ + napi_module_register(&ComposeTitleBarModule); +} diff --git a/advanced_ui_component/composetitlebar/interfaces/composetitlebar.js b/advanced_ui_component/composetitlebar/interfaces/composetitlebar.js new file mode 100644 index 0000000000000000000000000000000000000000..903d3cbb9bb64dea93b141c20c3514e68c53a3d4 --- /dev/null +++ b/advanced_ui_component/composetitlebar/interfaces/composetitlebar.js @@ -0,0 +1,761 @@ +/* + * 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 a = e.length - 1; a >= 0; a--)(s = e[a]) && (n = (r < 3 ? s(n) : r > 3 ? s(t, o, n) : s(t, o)) || n); + 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.__backActive = new ObservedPropertySimplePU(!1, this, "backActive"); + 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.backActive && (this.backActive = e.backActive) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__titleMaxWidth.purgeDependencyOnElmtId(e); + this.__backActive.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__titleMaxWidth.aboutToBeDeleted(); + this.__backActive.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get titleMaxWidth() { + return this.__titleMaxWidth.get() + } + set titleMaxWidth(e) { + this.__titleMaxWidth.set(e) + } + get backActive() { + return this.__backActive.get() + } + set backActive(e) { + this.__backActive.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(); + Navigator.active(this.backActive); + t || Navigator.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Navigator.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_BACK, + isEnabled: !0, + action: () => this.backActive = !0 + }, + index: -1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })); + 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(!1); + Image.borderRadius(ImageMenuItem.buttonBorderRadius); + 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, + index: 1 + ComposeTitleBar.instanceCount++ + }, 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; +ComposeTitleBar.instanceCount = 0; +class CollapsibleMenuSection extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.menuItems = void 0; + this.index = void 0; + this.firstFocusableIndex = -1; + 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.index && (this.index = e.index); + void 0 !== e.firstFocusableIndex && (this.firstFocusableIndex = e.firstFocusableIndex); + 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 + } + aboutToAppear() { + this.menuItems.forEach(((e, t) => { + e.isEnabled && -1 == this.firstFocusableIndex && t > CollapsibleMenuSection.maxCountOfVisibleItems - 2 && (this.firstFocusableIndex = 1e3 * this.index + t + 1) + })) + } + 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, t) => { + const o = e; + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + t + 1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + 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, t) => { + const o = e; + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + t + 1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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; + e.isVisible || (this.isMoreIconOnClick = !1) + } + }); + 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 + }); + Column.onAppear((() => { + focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) + })); + 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, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + CollapsibleMenuSection.maxCountOfVisibleItems + t + }, 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.index = 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.index && (this.index = e.index); + 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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); + Image.key(ImageMenuItem.focusablePrefix + this.index); + 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; +ImageMenuItem.focusablePrefix = "Id-ComposeTitleBar-ImageMenuItem-"; +export default { + ComposeTitleBar: ComposeTitleBar +}; \ No newline at end of file diff --git a/advanced_ui_component/composetitlebar/source/composetitlebar.ets b/advanced_ui_component/composetitlebar/source/composetitlebar.ets new file mode 100644 index 0000000000000000000000000000000000000000..ca4f02f82bd85dbb8eeb8ac89eb5fbbfe9c7849a --- /dev/null +++ b/advanced_ui_component/composetitlebar/source/composetitlebar.ets @@ -0,0 +1,411 @@ +/* + * 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 backActive: 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 + private static instanceCount = 0 + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }) { + Row() { + Navigator() + .active(this.backActive) + + ImageMenuItem({ item: { + value: PUBLIC_BACK, + isEnabled: true, + action: () => this.backActive = true + }, index: -1 }) + + 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(false) + .borderRadius(ImageMenuItem.buttonBorderRadius) + } + + 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, index: 1 + ComposeTitleBar.instanceCount++ }) + } + } + .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 + index: number + + static readonly maxCountOfVisibleItems = 3 + private static readonly focusPadding = 4 + private static readonly marginsNum = 2 + private firstFocusableIndex = -1 + + @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 + } + } + + aboutToAppear() { + this.menuItems.forEach((item, index) => { + if (item.isEnabled && this.firstFocusableIndex == -1 && index > CollapsibleMenuSection.maxCountOfVisibleItems - 2) { + this.firstFocusableIndex = this.index * 1000 + index + 1 + } + }) + } + + build() { + Column() { + Row() { + if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { + ForEach(this.menuItems, (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + index + 1 }) + }) + } else { + ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + index + 1 }) + }) + + 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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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 + if (!e.isVisible) { + this.isMoreIconOnClick = false + } + } + }) + } + } + } + .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, index: this.index * 1000 + CollapsibleMenuSection.maxCountOfVisibleItems + index }) + }) + } + .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum) + .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }) + .onAppear(() => { + focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) + }) + } +} + +@Component +struct ImageMenuItem { + item: ComposeTitleBarMenuItem + index: number + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + static readonly focusablePrefix = "Id-ComposeTitleBar-ImageMenuItem-" + + @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) + .key(ImageMenuItem.focusablePrefix + this.index) + } + .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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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/advanced_ui_component/dialog/interfaces/BUILD.gn b/advanced_ui_component/dialog/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..bf931ea783d05ea473353d557c0e3fcd57913ea9 --- /dev/null +++ b/advanced_ui_component/dialog/interfaces/BUILD.gn @@ -0,0 +1,57 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_dialog_abc") { + src_js = rebase_path("dialog.js") + dst_file = rebase_path(target_out_dir + "/dialog.abc") + in_puts = [ "dialog.js" ] + out_puts = [ target_out_dir + "/dialog.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("dialog_abc") { + input = get_label_info(":gen_dialog_abc", "target_out_dir") + "/dialog.abc" + output = target_out_dir + "/dialog_abc.o" + dep = ":gen_dialog_abc" +} + +gen_obj("dialog_abc_preview") { + input = get_label_info(":gen_dialog_abc", "target_out_dir") + "/dialog.abc" + output = target_out_dir + "/dialog_abc.c" + snapshot_dep = [ ":gen_dialog_abc" ] +} + +ohos_shared_library("dialog") { + sources = [ "dialog.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_dialog_abc_preview" ] + } else { + deps = [ ":dialog_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/dialog/interfaces/dialog.cpp b/advanced_ui_component/dialog/interfaces/dialog.cpp new file mode 100644 index 0000000000000000000000000000000000000000..f1fcc5ae6b62cd5a3fdd73d773bb1587d4047e5f --- /dev/null +++ b/advanced_ui_component/dialog/interfaces/dialog.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_dialog_abc_start[]; +extern const char _binary_dialog_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_Dialog_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_dialog_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_dialog_abc_end - _binary_dialog_abc_start; + } +} + +/* + * Module define + */ +static napi_module DialogModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.Dialog", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void DialogRegisterModule(void) +{ + napi_module_register(&DialogModule); +} diff --git a/advanced_ui_component/dialog/interfaces/dialog.js b/advanced_ui_component/dialog/interfaces/dialog.js new file mode 100644 index 0000000000000000000000000000000000000000..2faf66900a84c7900a9553d6c4b619216e8b4c54 --- /dev/null +++ b/advanced_ui_component/dialog/interfaces/dialog.js @@ -0,0 +1,1599 @@ +/* + * 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 CHECKBOX_CONTAINER_HEIGHT = 48; +const CONTENT_MAX_LINES = 2; +const DIVIDER_CONTAINER_WIDTH = 16; +const DIVIDER_HEIGHT = 24; +const DIVIDER_WIDTH = 2; +const LOADING_PROGRESS_WIDTH = 40; +const LOADING_PROGRESS_HEIGHT = 48; +const ITEM_TEXT_SIZE = 14; + +export class TipsDialog extends ViewPU { + constructor(e, o, t, r = -1) { + super(e, t, r); + this.controller = void 0; + this.imageRes = void 0; + this.imageSize = { width: '100%', height: 180 }; + this.title = ''; + this.content = ''; + this.checkTips = ''; + this.__isChecked = new ObservedPropertySimplePU(!1, this, 'isChecked'); + this.primaryButton = { value: '' }; + this.secondaryButton = { value: '' }; + this.setInitiallyProvidedValue(o); + } + + setInitiallyProvidedValue(e) { + void 0 !== e.controller && (this.controller = e.controller); + void 0 !== e.imageRes && (this.imageRes = e.imageRes); + void 0 !== e.imageSize && (this.imageSize = e.imageSize); + void 0 !== e.title && (this.title = e.title); + void 0 !== e.content && (this.content = e.content); + void 0 !== e.checkTips && (this.checkTips = e.checkTips); + void 0 !== e.isChecked && (this.isChecked = e.isChecked); + void 0 !== e.primaryButton && (this.primaryButton = e.primaryButton); + void 0 !== e.secondaryButton && (this.secondaryButton = e.secondaryButton); + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + this.__isChecked.purgeDependencyOnElmtId(e); + } + + aboutToBeDeleted() { + this.__isChecked.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + setController(e) { + this.controller = e; + } + + get isChecked() { + return this.__isChecked.get(); + } + + set isChecked(e) { + this.__isChecked.set(e); + } + + initialRender() { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.backgroundBlurStyle(BlurStyle.Thick); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_dialog'], + bundleName: '', + moduleName: '' + }); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_start'], + bundleName: '', + moduleName: '' + }, + right: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_end'], + bundleName: '', + moduleName: '' + }, + bottom: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_bottom'], + bundleName: '', + moduleName: '' + } + }); + Column.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_dialog_bg'], + bundleName: '', + moduleName: '' + }); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width('100%'); + Row.padding({ left: 24, right: 24 }); + Row.margin({ top: 24 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.layoutWeight(1); + Column.clip(!0); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.imageRes); + Image.size(this.imageSize); + Image.objectFit(ImageFit.Fill); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24 }); + Row.margin({ top: 16 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.title); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_headline8'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.textAlign(TextAlign.Center); + Text.maxLines(2); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.minFontSize(15); + Text.maxFontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline8"], + bundleName: "", + moduleName: "" + }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.content ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24, top: 8, bottom: 8 }); + Row.width('100%'); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.content); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body1'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Regular); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.textAlign(TextAlign.Center); + Text.minFontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body3'], + bundleName: '', + moduleName: '' + }); + Text.maxLines(2); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(CHECKBOX_CONTAINER_HEIGHT); + Row.width('100%'); + Row.padding({ left: 24, right: 24, top: 8, bottom: 8 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Checkbox.create({ name: 'checkbox', group: 'checkboxGroup' }); + Checkbox.select(this.isChecked); + Checkbox.onChange((e => { + this.isChecked = e; + })); + Checkbox.margin({ left: 0, right: 8 }); + o || Checkbox.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Checkbox.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.checkTips); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body2'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.maxLines(CONTENT_MAX_LINES); + Text.layoutWeight(1); + Text.focusOnTouch(!0); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.onClick((() => { + this.isChecked = !this.isChecked; + })); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width('100%'); + Row.padding({ left: 16, right: 16, top: 16, bottom: 16 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.primaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.primaryButton.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.primaryButton.background ? this.primaryButton.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.primaryButton.action && this.primaryButton.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.value && this.primaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(DIVIDER_CONTAINER_WIDTH); + Column.alignItems(HorizontalAlign.Center); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.background ? If.branchId(1) : this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.width(DIVIDER_WIDTH); + Divider.height(DIVIDER_HEIGHT); + Divider.color({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_list_separator'], + bundleName: '', + moduleName: '' + }); + Divider.vertical(!0); + o || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + })); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Column.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.secondaryButton.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.secondaryButton.background ? this.secondaryButton.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.secondaryButton.action && this.secondaryButton.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Row.pop(); + Column.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} + +export class SelectDialog extends ViewPU { + constructor(e, o, t, r = -1) { + super(e, t, r); + this.controller = void 0; + this.title = ''; + this.content = ''; + this.selectedIndex = -1; + this.confirm = { value: '' }; + this.radioContent = []; + this.setInitiallyProvidedValue(o); + } + + setInitiallyProvidedValue(e) { + void 0 !== e.controller && (this.controller = e.controller); + void 0 !== e.title && (this.title = e.title); + void 0 !== e.content && (this.content = e.content); + void 0 !== e.selectedIndex && (this.selectedIndex = e.selectedIndex); + void 0 !== e.confirm && (this.confirm = e.confirm); + void 0 !== e.radioContent && (this.radioContent = e.radioContent); + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + } + + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + setController(e) { + this.controller = e; + } + + initialRender() { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.backgroundBlurStyle(BlurStyle.Thick); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_dialog'], + bundleName: '', + moduleName: '' + }); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_start'], + bundleName: '', + moduleName: '' + }, + right: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_end'], + bundleName: '', + moduleName: '' + }, + bottom: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_bottom'], + bundleName: '', + moduleName: '' + } + }); + Column.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_dialog_bg'], + bundleName: '', + moduleName: '' + }); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24, top: 24 }); + Row.constraintSize({ minHeight: 56 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.title); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_dialog_tittle'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(CONTENT_MAX_LINES); + Text.minFontSize(15); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.textAlign(TextAlign.Start); + Text.width('100%'); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.content ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24, top: 8, bottom: 8 }); + Row.width('100%'); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.content); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body2'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.maxLines(CONTENT_MAX_LINES); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.minFontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body3'], + bundleName: '', + moduleName: '' + }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + List.create({ space: 1 }); + List.width('100%'); + List.padding({ left: 24, right: 24, top: 8, bottom: 8 }); + List.clip(!1); + o || List.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.radioContent, ((e, o) => { + const t = e; + { + const e = !0; + const r = (o, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(o); + ListItem.create(i, e); + t || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording(); + }; + const s = () => { + this.observeComponentCreation(r); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.constraintSize({ minHeight: 48 }); + Row.clip(!1); + Row.onClick((() => { + t.action && t.action(); + this.controller.close(); + })); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(t.title); + Text.fontSize(ITEM_TEXT_SIZE); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(CONTENT_MAX_LINES); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.layoutWeight(1); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + this.observeComponentCreation(((e, r) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Radio.create({ value: 'item.title', group: 'radioGroup' }); + Radio.size({ width: 20, height:20}); + Radio.checked(this.selectedIndex === o); + Radio.onClick((() => { + t.action && t.action(); + this.controller.close(); + })); + r || Radio.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + o < this.radioContent.length - 1 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.color({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_list_separator'], + bundleName: '', + moduleName: '' + }); + o || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Column.pop(); + ListItem.pop(); + }; + const i = (e, s) => { + r(e, s); + this.updateFuncByElmtId.set(e, r); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.constraintSize({ minHeight: 48 }); + Row.clip(!1); + Row.onClick((() => { + t.action && t.action(); + this.controller.close(); + })); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(t.title); + Text.fontSize(ITEM_TEXT_SIZE); + Text.fontWeight(FontWeight.Regular); + Text.maxLines(CONTENT_MAX_LINES); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.layoutWeight(1); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + this.observeComponentCreation(((e, r) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Radio.create({ value: 'item.title', group: 'radioGroup' }); + Radio.size({ width: 20, height: 20 }); + Radio.checked(this.selectedIndex === o); + Radio.onClick((() => { + t.action && t.action(); + this.controller.close(); + })); + r || Radio.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + o < this.radioContent.length - 1 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.color({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_list_separator'], + bundleName: '', + moduleName: '' + }); + o || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Column.pop(); + ListItem.pop(); + }; + e ? (() => { + this.observeComponentCreation(r); + ListItem.pop(); + })() : s(); + } + }), void 0, !0, !1); + o || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + ForEach.pop(); + List.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width('100%'); + Row.padding({ left: 16, right: 16, top: 16, bottom: 16 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.confirm.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.confirm.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.confirm.background ? this.confirm.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.confirm.fontColor ? this.confirm.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.confirm.action && this.confirm.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Row.pop(); + Column.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} + +export class ConfirmDialog extends ViewPU { + constructor(e, o, t, r = -1) { + super(e, t, r); + this.controller = void 0; + this.title = ''; + this.content = ''; + this.checkTips = ''; + this.__isChecked = new ObservedPropertySimplePU(!1, this, 'isChecked'); + this.primaryButton = { value: '' }; + this.secondaryButton = { value: '' }; + this.setInitiallyProvidedValue(o); + } + + setInitiallyProvidedValue(e) { + void 0 !== e.controller && (this.controller = e.controller); + void 0 !== e.title && (this.title = e.title); + void 0 !== e.content && (this.content = e.content); + void 0 !== e.checkTips && (this.checkTips = e.checkTips); + void 0 !== e.isChecked && (this.isChecked = e.isChecked); + void 0 !== e.primaryButton && (this.primaryButton = e.primaryButton); + void 0 !== e.secondaryButton && (this.secondaryButton = e.secondaryButton); + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + this.__isChecked.purgeDependencyOnElmtId(e); + } + + aboutToBeDeleted() { + this.__isChecked.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + setController(e) { + this.controller = e; + } + + get isChecked() { + return this.__isChecked.get(); + } + + set isChecked(e) { + this.__isChecked.set(e); + } + + initialRender() { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.backgroundBlurStyle(BlurStyle.Thick); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_dialog'], + bundleName: '', + moduleName: '' + }); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_start'], + bundleName: '', + moduleName: '' + }, + right: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_end'], + bundleName: '', + moduleName: '' + }, + bottom: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_bottom'], + bundleName: '', + moduleName: '' + } + }); + Column.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_dialog_bg'], + bundleName: '', + moduleName: '' + }); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24, top: 24 }); + Row.constraintSize({ minHeight: 56 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.title); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_dialog_tittle'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(CONTENT_MAX_LINES); + Text.minFontSize(15); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.textAlign(TextAlign.Start); + Text.width('100%'); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.content ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24, top: 8, bottom: 8 }); + Row.width('100%'); + Row.constraintSize({ minHeight: 36 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.content); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body1'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.maxLines(CONTENT_MAX_LINES); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.minFontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body3'], + bundleName: '', + moduleName: '' + }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(CHECKBOX_CONTAINER_HEIGHT); + Row.width('100%'); + Row.padding({ left: 24, right: 24, top: 8, bottom: 8 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Checkbox.create({ name: 'checkbox', group: 'checkboxGroup' }); + Checkbox.select(this.isChecked); + Checkbox.onChange((e => { + this.isChecked = e; + })); + Checkbox.margin({ left: 0, right: 8 }); + o || Checkbox.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Checkbox.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.checkTips); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body2'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.maxLines(CONTENT_MAX_LINES); + Text.layoutWeight(1); + Text.focusOnTouch(!0); + Text.onClick((() => { + this.isChecked = !this.isChecked; + })); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width('100%'); + Row.padding({ left: 16, right: 16, top: 16, bottom: 16 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.primaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.primaryButton.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.primaryButton.background ? this.primaryButton.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.primaryButton.action && this.primaryButton.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.value && this.primaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(DIVIDER_CONTAINER_WIDTH); + Column.alignItems(HorizontalAlign.Center); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.background ? If.branchId(1) : this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.width(DIVIDER_WIDTH); + Divider.height(DIVIDER_HEIGHT); + Divider.color({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_list_separator'], + bundleName: '', + moduleName: '' + }); + Divider.vertical(!0); + o || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + })); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Column.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.secondaryButton.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.secondaryButton.background ? this.secondaryButton.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.secondaryButton.action && this.secondaryButton.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Row.pop(); + Column.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} + +export class AlertDialog extends ViewPU { + constructor(e, o, t, r = -1) { + super(e, t, r); + this.controller = void 0; + this.content = ''; + this.primaryButton = { value: '' }; + this.secondaryButton = { value: '' }; + this.setInitiallyProvidedValue(o); + } + + setInitiallyProvidedValue(e) { + void 0 !== e.controller && (this.controller = e.controller); + void 0 !== e.content && (this.content = e.content); + void 0 !== e.primaryButton && (this.primaryButton = e.primaryButton); + void 0 !== e.secondaryButton && (this.secondaryButton = e.secondaryButton); + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + } + + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + setController(e) { + this.controller = e; + } + + initialRender() { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.backgroundBlurStyle(BlurStyle.Thick); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_dialog'], + bundleName: '', + moduleName: '' + }); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_start'], + bundleName: '', + moduleName: '' + }, + right: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_end'], + bundleName: '', + moduleName: '' + }, + bottom: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_bottom'], + bundleName: '', + moduleName: '' + } + }); + Column.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_dialog_bg'], + bundleName: '', + moduleName: '' + }); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.padding({ left: 24, right: 24, top: 24 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.content); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body1'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width('100%'); + Row.padding({ left: 16, right: 16, top: 16, bottom: 16 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.primaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.primaryButton.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.primaryButton.background ? this.primaryButton.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.primaryButton.action && this.primaryButton.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.value && this.primaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width(DIVIDER_CONTAINER_WIDTH); + Column.alignItems(HorizontalAlign.Center); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.background ? If.branchId(1) : this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.width(DIVIDER_WIDTH); + Divider.height(DIVIDER_HEIGHT); + Divider.color({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_list_separator'], + bundleName: '', + moduleName: '' + }); + Divider.vertical(!0); + o || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + })); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Column.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.secondaryButton.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithLabel(this.secondaryButton.value); + Button.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button1'], + bundleName: '', + moduleName: '' + }); + Button.fontWeight(FontWeight.Medium); + Button.layoutWeight(1); + Button.backgroundColor(this.secondaryButton.background ? this.secondaryButton.background : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_background_transparent'], + bundleName: '', + moduleName: '' + }); + Button.fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + }); + Button.onClick((() => { + this.secondaryButton.action && this.secondaryButton.action(); + this.controller.close(); + })); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Button.pop(); + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Row.pop(); + Column.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} + +export class LoadingDialog extends ViewPU { + constructor(e, o, t, r = -1) { + super(e, t, r); + this.controller = void 0; + this.content = ''; + this.setInitiallyProvidedValue(o); + } + + setInitiallyProvidedValue(e) { + void 0 !== e.controller && (this.controller = e.controller); + void 0 !== e.content && (this.content = e.content); + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + } + + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + setController(e) { + this.controller = e; + } + + initialRender() { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.backgroundBlurStyle(BlurStyle.Thick); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_dialog'], + bundleName: '', + moduleName: '' + }); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_start'], + bundleName: '', + moduleName: '' + }, + right: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_end'], + bundleName: '', + moduleName: '' + }, + bottom: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_dialog_margin_bottom'], + bundleName: '', + moduleName: '' + } + }); + Column.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_dialog_bg'], + bundleName: '', + moduleName: '' + }); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ left: 24, right: 24, top: 24, bottom: 24 }); + Row.constraintSize({ minHeight: 48 }); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.content); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_body1'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.layoutWeight(1); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + LoadingProgress.create(); + LoadingProgress.width(LOADING_PROGRESS_WIDTH); + LoadingProgress.height(LOADING_PROGRESS_HEIGHT); + LoadingProgress.margin({ left: 16 }); + o || LoadingProgress.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Row.pop(); + Column.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} +export default { TipsDialog, ConfirmDialog, SelectDialog, AlertDialog, LoadingDialog }; \ No newline at end of file diff --git a/advanced_ui_component/dialog/source/dialog.ets b/advanced_ui_component/dialog/source/dialog.ets new file mode 100644 index 0000000000000000000000000000000000000000..5c24316b3b669436295c1881875bdf5e2db6b503 --- /dev/null +++ b/advanced_ui_component/dialog/source/dialog.ets @@ -0,0 +1,423 @@ +/* + * 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 CHECKBOX_CONTAINER_HEIGHT: number = 48 +const CONTENT_MAX_LINES: number = 2 +const DIVIDER_CONTAINER_WIDTH: number = 16 +const DIVIDER_HEIGHT: number = 24 +const DIVIDER_WIDTH: number = 2 +const LOADING_PROGRESS_WIDTH: number = 40 +const LOADING_PROGRESS_HEIGHT: number = 48 +const ITEM_TEXT_SIZE: number = 14 +export declare type ButtonOptions = { + value: ResourceStr; + action?: () => void; + background?: ResourceColor; + fontColor?: ResourceColor; +} + +@CustomDialog +export struct TipsDialog{ + controller: CustomDialogController + imageRes: Resource + imageSize: SizeOptions = {width: '100%', height: 180} + title: ResourceStr = '' + content?: ResourceStr = '' + checkTips?: ResourceStr = '' + @State isChecked?: boolean = false + primaryButton?: ButtonOptions = {value: ""} + secondaryButton?: ButtonOptions = {value: ""} + + build() { + Column() { + Row() { + Column() { + Image(this.imageRes) + .size(this.imageSize) + .objectFit(ImageFit.Fill) + }.layoutWeight(1) + .clip(true) + }.width('100%') + .padding({ left: 24, right: 24}) + .margin({top: 24}) + Row() { + Text(this.title) + .fontSize($r('sys.float.ohos_id_text_size_headline8')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .textAlign(TextAlign.Center) + .maxLines(CONTENT_MAX_LINES) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .minFontSize(15) + .maxFontSize($r('sys.float.ohos_id_text_size_headline8')) + }.padding({ left: 24, right: 24 }) + .margin({top: 16}) + if (this.content) { + Row() { + Text(this.content) + .fontSize($r('sys.float.ohos_id_text_size_body1')) + .fontWeight(FontWeight.Regular) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .textAlign(TextAlign.Center) + .minFontSize($r('sys.float.ohos_id_text_size_body3')) + .maxLines(CONTENT_MAX_LINES) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + }.padding({ left: 24, right: 24, top: 8, bottom: 8 }) + .width('100%') + } + Row() { + Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked) + .onChange((checked: boolean) => { + this.isChecked = checked + }) + .margin({ left: 0, right: 8}) + Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .maxLines(CONTENT_MAX_LINES) + .layoutWeight(1) + .focusOnTouch(true) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .onClick(() => { + this.isChecked = !this.isChecked + }) + }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 }) + + Row() { + if (this.primaryButton.value) { + Button(this.primaryButton.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + if (this.primaryButton.action) this.primaryButton.action() + this.controller.close() + }) + } + if (this.secondaryButton.value && this.primaryButton.value) { + Column() { + if (!this.secondaryButton.background) { + Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true) + } + }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center) + } + if (this.secondaryButton.value) { + Button(this.secondaryButton.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + if (this.secondaryButton.action) this.secondaryButton.action() + this.controller.close() + }) + } + }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) + } + .backgroundBlurStyle(BlurStyle.Thick) + .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) + .margin({ + left: $r('sys.float.ohos_id_dialog_margin_start'), + right: $r('sys.float.ohos_id_dialog_margin_end'), + bottom: $r('sys.float.ohos_id_dialog_margin_bottom') + }) + // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found + .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) + } +} + +@CustomDialog +export struct SelectDialog{ + controller: CustomDialogController + title: ResourceStr = '' + content?: ResourceStr = '' + selectedIndex?: number = -1 + confirm?: ButtonOptions = {value: ""} + radioContent: Array = [] + + build() { + Column() { + Row() { + Text(this.title) + .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle')) + .fontWeight(FontWeight.Medium) + .maxLines(CONTENT_MAX_LINES) + .minFontSize(15) + .textOverflow({ overflow: TextOverflow.Ellipsis}) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .textAlign(TextAlign.Start) + .width('100%') + }.padding({ left: 24, right: 24, top: 24 }) + .constraintSize({minHeight: 56}) + if (this.content) { + Row() { + Text(this.content) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .maxLines(CONTENT_MAX_LINES) + .textOverflow({ overflow: TextOverflow.Ellipsis}) + .minFontSize($r('sys.float.ohos_id_text_size_body3')) + }.padding({ left: 24, right: 24, top: 8, bottom: 8 }) + .width('100%') + } + List({space: 1}) { + ForEach(this.radioContent, (item: SheetInfo, index?: number) => { + ListItem() { + Column() { + Row() { + Text(item.title) + .fontSize(ITEM_TEXT_SIZE) + .fontWeight(FontWeight.Medium) + .maxLines(CONTENT_MAX_LINES) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .layoutWeight(1) + Radio({ value: 'item.title', group: 'radioGroup'}) + .size({ width : 20, height : 20}) + .checked(this.selectedIndex == index) + .onClick(() => { + item.action && item.action() + this.controller.close() + }) + }.constraintSize({minHeight: 48}).clip(false) + .onClick(() => { + item.action && item.action() + this.controller.close() + }) + if (index < this.radioContent.length - 1) { + Divider().color($r('sys.color.ohos_id_color_list_separator')) + } + } + } + }) + }.width('100%').padding({ left: 24, right: 24, top: 8, bottom: 8 }).clip(false) + Row() { + if (this.confirm.value) { + Button(this.confirm.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.confirm.background? this.confirm.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.confirm.fontColor ? this.confirm.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + this.confirm.action && this.confirm.action() + this.controller.close() + }) + } + }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) + } + .backgroundBlurStyle(BlurStyle.Thick) + .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) + .margin({ + left: $r('sys.float.ohos_id_dialog_margin_start'), + right: $r('sys.float.ohos_id_dialog_margin_end'), + bottom: $r('sys.float.ohos_id_dialog_margin_bottom') + }) + // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found + .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) + } +} + +@CustomDialog +export struct ConfirmDialog{ + controller: CustomDialogController + title: ResourceStr = '' + content?: ResourceStr = '' + checkTips?: ResourceStr = '' + @State isChecked?: boolean = false + primaryButton?: ButtonOptions = {value: ""} + secondaryButton?: ButtonOptions = {value: ""} + + build() { + Column() { + Row() { + Text(this.title) + .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle')) + .fontWeight(FontWeight.Medium) + .maxLines(CONTENT_MAX_LINES) + .minFontSize(15) + .textOverflow({ overflow: TextOverflow.Ellipsis}) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .textAlign(TextAlign.Start) + .width('100%') + }.padding({ left: 24, right: 24, top: 24 }) + .constraintSize({minHeight: 56}) + if (this.content) { + Row() { + Text(this.content) + .fontSize($r('sys.float.ohos_id_text_size_body1')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .maxLines(CONTENT_MAX_LINES) + .textOverflow({ overflow: TextOverflow.Ellipsis}) + .minFontSize($r('sys.float.ohos_id_text_size_body3')) + }.padding({ left: 24, right: 24, top: 8, bottom: 8 }) + .width('100%') + .constraintSize({minHeight: 36}) + } + Row() { + Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked) + .onChange((checked: boolean) => { + this.isChecked = checked + }) + .margin({ left: 0, right: 8}) + Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .maxLines(CONTENT_MAX_LINES) + .layoutWeight(1) + .focusOnTouch(true) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .onClick(() => { + this.isChecked = !this.isChecked + }) + }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 }) + + Row() { + if (this.primaryButton.value) { + Button(this.primaryButton.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + if (this.primaryButton.action) this.primaryButton.action() + this.controller.close() + }) + } + if (this.secondaryButton.value && this.primaryButton.value) { + Column() { + if (!this.secondaryButton.background) { + Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true) + } + }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center) + } + if (this.secondaryButton.value) { + Button(this.secondaryButton.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + if (this.secondaryButton.action) this.secondaryButton.action() + this.controller.close() + }) + } + }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) + } + .backgroundBlurStyle(BlurStyle.Thick) + .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) + .margin({ + left: $r('sys.float.ohos_id_dialog_margin_start'), + right: $r('sys.float.ohos_id_dialog_margin_end'), + bottom: $r('sys.float.ohos_id_dialog_margin_bottom') + }) + // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found + .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) + } +} + +@CustomDialog +export struct AlertDialog{ + controller: CustomDialogController + content: ResourceStr = '' + primaryButton?: ButtonOptions = {value: ""} + secondaryButton?: ButtonOptions = {value: ""} + build() { + Column() { + Row() { + Text(this.content) + .fontSize($r('sys.float.ohos_id_text_size_body1')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + }.padding({ left: 24, right: 24, top: 24 }) + Row() { + if (this.primaryButton.value) { + Button(this.primaryButton.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + if (this.primaryButton.action) this.primaryButton.action() + this.controller.close() + }) + } + if (this.secondaryButton.value && this.primaryButton.value) { + Column() { + if (!this.secondaryButton.background) { + Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true) + } + }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center) + } + if (this.secondaryButton.value) { + Button(this.secondaryButton.value) + .fontSize($r('sys.float.ohos_id_text_size_button1')) + .fontWeight(FontWeight.Medium) + .layoutWeight(1) + .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent')) + .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated')) + .onClick(() => { + if (this.secondaryButton.action) this.secondaryButton.action() + this.controller.close() + }) + } + }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }) + } + .backgroundBlurStyle(BlurStyle.Thick) + .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) + .margin({ + left: $r('sys.float.ohos_id_dialog_margin_start'), + right: $r('sys.float.ohos_id_dialog_margin_end'), + bottom: $r('sys.float.ohos_id_dialog_margin_bottom') + }) + // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found + .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) + } +} + +@CustomDialog +export struct LoadingDialog{ + controller: CustomDialogController + content?: ResourceStr = '' + build() { + Column() { + Row() { + Text(this.content) + .fontSize($r('sys.float.ohos_id_text_size_body1')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .layoutWeight(1) + LoadingProgress().width(LOADING_PROGRESS_WIDTH).height(LOADING_PROGRESS_HEIGHT).margin({ left: 16 }) + }.margin({ left: 24, right: 24, top: 24, bottom: 24 }) + .constraintSize({minHeight: 48}) + } + .backgroundBlurStyle(BlurStyle.Thick) + .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) + .margin({ + left: $r('sys.float.ohos_id_dialog_margin_start'), + right: $r('sys.float.ohos_id_dialog_margin_end'), + bottom: $r('sys.float.ohos_id_dialog_margin_bottom') + }) + // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found + .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) + } +} \ No newline at end of file diff --git a/advanced_ui_component/editabletitlebar/interfaces/BUILD.gn b/advanced_ui_component/editabletitlebar/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..d62d30c5b503b209335c9d2ca848c613a30a59d3 --- /dev/null +++ b/advanced_ui_component/editabletitlebar/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.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" +} + +gen_obj("editabletitlebar_abc_preview") { + input = get_label_info(":gen_editabletitlebar_abc", "target_out_dir") + + "/editabletitlebar.abc" + output = target_out_dir + "/editabletitlebar_abc.c" + snapshot_dep = [ ":gen_editabletitlebar_abc" ] +} + +ohos_shared_library("editabletitlebar") { + sources = [ "editabletitlebar.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_editabletitlebar_abc_preview" ] + } else { + deps = [ ":editabletitlebar_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/editabletitlebar/interfaces/editabletitlebar.cpp b/advanced_ui_component/editabletitlebar/interfaces/editabletitlebar.cpp new file mode 100644 index 0000000000000000000000000000000000000000..740e2da809d1a3bf7daabb0f6979281b4f4c0fec --- /dev/null +++ b/advanced_ui_component/editabletitlebar/interfaces/editabletitlebar.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#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; + } +} + +/* + * Module define + */ +static napi_module EditableTitleBarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.EditableTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void EditableTitleBarRegisterModule(void) +{ + napi_module_register(&EditableTitleBarModule); +} diff --git a/advanced_ui_component/editabletitlebar/interfaces/editabletitlebar.js b/advanced_ui_component/editabletitlebar/interfaces/editabletitlebar.js new file mode 100644 index 0000000000000000000000000000000000000000..e3d2635612a4cd8f19b45dd37cb87342e81838b0 --- /dev/null +++ b/advanced_ui_component/editabletitlebar/interfaces/editabletitlebar.js @@ -0,0 +1,465 @@ +/* + * 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.__backActive = new ObservedPropertySimplePU(!1, this, "backActive"); + 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); + void 0 !== e.backActive && (this.backActive = e.backActive) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__titleMaxWidth.purgeDependencyOnElmtId(e); + this.__backActive.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__titleMaxWidth.aboutToBeDeleted(); + this.__backActive.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + get titleMaxWidth() { + return this.__titleMaxWidth.get() + } + set titleMaxWidth(e) { + this.__titleMaxWidth.set(e) + } + get backActive() { + return this.__backActive.get() + } + set backActive(e) { + this.__backActive.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(); + Navigator.active(this.backActive); + t || Navigator.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Navigator.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_BACK, + isEnabled: !0, + action: () => this.backActive = !0 + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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/advanced_ui_component/editabletitlebar/source/editabletitlebar.ets b/advanced_ui_component/editabletitlebar/source/editabletitlebar.ets new file mode 100644 index 0000000000000000000000000000000000000000..066233622827fc79f25587593628bd761fd10489 --- /dev/null +++ b/advanced_ui_component/editabletitlebar/source/editabletitlebar.ets @@ -0,0 +1,296 @@ +/* + * 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 + @State backActive: boolean = false + + 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() + .active(this.backActive) + + ImageMenuItem({ item: { + value: PUBLIC_BACK, + isEnabled: true, + action: () => this.backActive = 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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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/advanced_ui_component/filter/interfaces/BUILD.gn b/advanced_ui_component/filter/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..0884a737c57fc3f12b74a1dea95fdf51c985a0be --- /dev/null +++ b/advanced_ui_component/filter/interfaces/BUILD.gn @@ -0,0 +1,57 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_filter_abc") { + src_js = rebase_path("filter.js") + dst_file = rebase_path(target_out_dir + "/filter.abc") + in_puts = [ "filter.js" ] + out_puts = [ target_out_dir + "/filter.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("filter_abc") { + input = get_label_info(":gen_filter_abc", "target_out_dir") + "/filter.abc" + output = target_out_dir + "/filter_abc.o" + dep = ":gen_filter_abc" +} + +gen_obj("filter_abc_preview") { + input = get_label_info(":gen_filter_abc", "target_out_dir") + "/filter.abc" + output = target_out_dir + "/filter_abc.c" + snapshot_dep = [ ":gen_filter_abc" ] +} + +ohos_shared_library("filter") { + sources = [ "filter.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_filter_abc_preview" ] + } else { + deps = [ ":filter_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/filter/interfaces/filter.cpp b/advanced_ui_component/filter/interfaces/filter.cpp new file mode 100644 index 0000000000000000000000000000000000000000..95ad7ea3637b021bfad89b6f4b07d8f217d45988 --- /dev/null +++ b/advanced_ui_component/filter/interfaces/filter.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_filter_abc_start[]; +extern const char _binary_filter_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_Filter_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_filter_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_filter_abc_end - _binary_filter_abc_start; + } +} + +/* + * Module define + */ +static napi_module FilterModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.Filter", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void FilterRegisterModule(void) +{ + napi_module_register(&FilterModule); +} diff --git a/advanced_ui_component/filter/interfaces/filter.js b/advanced_ui_component/filter/interfaces/filter.js new file mode 100644 index 0000000000000000000000000000000000000000..52427b0db36a890c96629de7bb24fb4e10759c76 --- /dev/null +++ b/advanced_ui_component/filter/interfaces/filter.js @@ -0,0 +1,2073 @@ +/* + * 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 curves = requireNativeModule('ohos.curves'); +const measure = requireNapi('measure'); + +var __decorate = this && this.__decorate || function (t, e, o, i) { + var r, s = arguments.length, n = s < 3 ? e : null === i ? i = Object.getOwnPropertyDescriptor(e, o) : i; + if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) n = Reflect.decorate(t, e, o, i); else for (var a = t.length - 1;a >= 0; a--) (r = t[a]) && (n = (s < 3 ? r(n) : s > 3 ? r(e, o, n) : r(e, o)) || n); + return s > 3 && n && Object.defineProperty(e, o, n), n +}; + +const TEXT_HOT_AREA_WIDTH = 8; +const LIST_ROW_HEIGHT = 40; +const ARROW_IMG_SIZE = 24; +const MULTI_LINE_PADDING = 24; +const BAR_ANIMATION_DURATION = 150; +const ARROW_ANIMATION_DURATION = 200; +const ANIMATION_DURATION_250 = 250; +const ANIMATION_DURATION_100 = 100; +const FILTER_TOP_PADDING = 8; +const SEPARATOR_HEIGHT = 16; +const SEPARATOR_WIDTH = 1; +const FLOAT_OPACITY = .95; +const FILTER_FONT_SIZE = 12; +const FOCUS_BORDER_WIDTH = 2; +const ARROW_SHOW_DELAY = 300; +const PERCENT_100 = "100%"; +const SHARP_CUBIC_BEZIER = curves.cubicBezierCurve(.33, 0, .67, 1); +const INTER_POLATING_SPRING = curves.interpolatingSpring(0, 1, 328, 34); +const FRICTION_CUBIC_BEZIER = curves.cubicBezierCurve(.2, 0, .2, 1); +const TRANS_COLOR = "#00FFFFFF"; +const GRADIENT_WIDTH = 16; +const ARROW_DOWN = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8JJREFUeNrt3bFro3Ucx/E+eQK94SoiDjcEB3G4IcNtOhzSyQhtB+E2hyM0loMOHvgHmFEHRcFy1qclkyg4heR6iBwiODjcH6DQwSGFGxxEHFopjd9wPbjBSi9NQ578Xi8ISe7SwJN83mlDS7uwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsyubp4PZ2dm5nWXZalysD4fDw7i8H+dftlqth57qySmKohaP7ftx8Y041eIx3o/rv+R5/kmz2fxTAFPW6XSunZycFPFErJ5xk2+Pjo7e29zc/Nt8L2Z3d/fdeJy/iIsv/sd/D+J5aG1sbHxfluPJy/6EtNvt6tLSUjcuvvU/N6tXq9U3G43Gd3t7e/+Y8difYUev+l/F6coZN3khPhPcWl1dvd/r9R6X4ZgqZX9SarXaZpwtn+OmNxcXFx9sbW1dNeWxx//ZOW56pVKpdMpyXKUPIF5x7jzHzUVwueN/6kZ8zGsCmIL4evT6c36ICC53/E9fmF4XwOwSwSWO//SF6aoApuORCGZr/KcB/CaA6bwH6PtMMFvjD/sHBwc/C2AaB1CpfBwR/CqCmRn/yJ12u31chuMt/fcBut3u8crKysMI4VZcHXfEr/g+wcTGf7fVan1TlmPO5+GJ6/f7f0QE90UwE+P/vEzHnc/LEygC4086ABEYf/IBiMD4kw9ABMaffAAiMP7kAxCB8ScfgAiMP/kARGD8yQeQegTGL4BkIzB+ASQbgfELINkIjF8AyUZg/AJINgLjF0CyERi/AJKNwPgFkGwExi+AZCMwfgEkG4HxCyDZCIxfAMlGYPwCSDYC4xdAshEYvwCSjcD4BZBsBMYvgGQjMH4BzG0Ea2trP/R6vb/OulFRFB9kWfap8V+ezEMwnu3t7et5nv8YF69d4G5Gf1L07mAw+PrZ36Ycr/r1OLsXp5vGL4B5j2DkcOHJH/oY/RnXGxO4P+MXQOkimCTj9x6gVO8JjF8AIjB+AYjA+AUgAuMXgAiMXwAiMH4BiMD4BSAC4xdAuSN4O66+dMG7O86ybCPGf88jK4BSRdBoNDrVavXVuFof8272Y/zvrK+vdz2ik+NHIaasKIrlGPKHcXH5nB/yOE4f5Xm+3Ww2Dz2CApgLo5/4HA6HjfjSaDnO66fvEV6O0+9xGsS/PYpQ+oPB4Kdnf1IUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ74F12fuBmTNpsqAAAAAElFTkSuQmCC"; +const ARROW_UP = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA7ZJREFUeNrt3TFonHUcx+Hem0sQ6SBSJEMomUSoFBEHhyAKYigpcSlo6fQOdxkyHTgIIkTqKi4uyWt4RxErmBDjVJpBUDcpHYp0CCSDQ5EMQfoG787fDdkMSnM5783/eeDl3qPXI33z/YQ7EpoLFwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADqquESjEZRFDNZls33+/25uDsbx0wch3EcxPGo0WjsxJ/fzfP8d1dLAOdp+G/GzUcx8Lf/41/5rtfrfdJut3919QRQW2VZTseQi/iKf/0pn+LLqqo6y8vLh67m2ZlwCYZvbW3tlbi5F8drp3iaV5vN5uLCwsK9ra2tx66qAGphfX19Ll7u3I3TS0N4uhfifcGNiOB7EQigFuOPlzw/xOnFIT7tRREIINXxi0AAyY9fBAJIfvwiEEDy4xeBAJIfvwgEkPz4RSCA5McvAgHUfvy7cQxG+7wI/j9+Fmi04x/8pOeHVVV9e/wzPqurq5cmJiZuxemnp33ubrf71tLS0kOfLQGM3fgbjcad+ErdyvP84J/+vCzL2RjwV3H6ugi8BDp349/b27vZ6XT+POkxGxsbB/Pz8183m8034u5lL4cEcK7Gv7Ky8te/PXZ7e/soIvhGBAJIbvwiEEDy4xeBAJIfvwgEkPz4RSCA5McvAgEkP34RCCD58YtAAMmPXwQCSH78IhBA8uMXgQCSH78IBJD8+EUggOTHLwIBJD9+EQgg+fGLQADJj18EAkh+/CIQQPLjF4EAkh+/CBIOwPhFkGwAxi+CZAMwfhEkG4DxiyDZAIxfBMkGYPwiSDYA4xdBsgEURTETNz8Z/9hEcD2eZ33wfHW8DlntPuAs+9z4h2PwX7RXVXUtTn88xdPMTk1N3a7rNahVAGVZTsdLnxvGP14RxHV9XwAj0O12rxj/WEYwPfj9BgIYU8Z/9hEcHR09I4AzFp+gX4x/LCN4Eu8DdgUwgk9Q3OwY/9hFcCfP8ycCGI1WHIfGPzYR7Md7s05d/621+z7A5ubmH4uLi/fj9J04nj3hYV/s7++3jP/pHX+fYHJy8mrcffGEh+32+/332u32b7V9f1jXD3zw60WzLLsdX+nn4u7LcTyO8597vd5nrVZrx4SHpyiKd+PafhCnL8XxXBwPYvg78cb34+Nf9woAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzf37i54rxOGvUjAAAAAElFTkSuQmCC"; + +export var FilterType; +!function(t){ + t[t.MULTI_LINE_FILTER=0] = "MULTI_LINE_FILTER"; + t[t.LIST_FILTER=1] = "LIST_FILTER" +}(FilterType || (FilterType = {})); +let FontWeightArray = class extends Array { +}; +FontWeightArray = __decorate([Observed], FontWeightArray); +let ResourceArray = class extends Array { +}; +ResourceArray = __decorate([Observed], ResourceArray); +let BooleanArray = class extends Array { +}; +BooleanArray = __decorate([Observed], BooleanArray); +let ObservedBoolean = class { + constructor(t) { + this.value = t + } +}; +ObservedBoolean = __decorate([Observed], ObservedBoolean); + +export { ObservedBoolean }; +let ObservedNumber = class { + constructor(t) { + this.value = t + } +}; +ObservedNumber = __decorate([Observed], ObservedNumber); + +class GradientMask extends ViewPU { + constructor(t, e, o, i = -1) { + super(t, o, i); + this.x0 = void 0; + this.y0 = void 0; + this.x1 = void 0; + this.y1 = void 0; + this.settings = new RenderingContextSettings(!0); + this.context2D = new CanvasRenderingContext2D(this.settings); + this.setInitiallyProvidedValue(e) + } + + setInitiallyProvidedValue(t) { + void 0 !== t.x0 && (this.x0 = t.x0); + void 0 !== t.y0 && (this.y0 = t.y0); + void 0 !== t.x1 && (this.x1 = t.x1); + void 0 !== t.y1 && (this.y1 = t.y1); + void 0 !== t.settings && (this.settings = t.settings); + void 0 !== t.context2D && (this.context2D = t.context2D) + } + + updateStateVars(t) { + } + + purgeVariableDependenciesOnElmtId(t) { + } + + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + initialRender() { + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.width(16); + Column.height(40) + }), Column); + this.observeComponentCreation2(((t, e) => { + Canvas.create(this.context2D); + Canvas.width(16); + Canvas.height(40); + Canvas.onReady((() => { + var t = this.context2D.createLinearGradient(this.x0, this.y0, this.x1, this.y1); + t.addColorStop(0, "#ffffffff"); + t.addColorStop(1, "#00ffffff"); + this.context2D.fillStyle = t; + this.context2D.fillRect(0, 0, 16, 40) + })) + }), Canvas); + Canvas.pop(); + Column.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +class ListFilterRow extends ViewPU { + constructor(t, e, o, i = -1) { + super(t, o, i); + this.__colorRow = new SynchedPropertyNesedObjectPU(e.colorRow, this, "colorRow"); + this.__fontWeightRow = new SynchedPropertyNesedObjectPU(e.fontWeightRow, this, "fontWeightRow"); + this.__backgroundColorRow = new SynchedPropertyNesedObjectPU(e.backgroundColorRow, this, "backgroundColorRow"); + this.__isBackgroundHoverRow = new SynchedPropertyNesedObjectPU(e.isBackgroundHoverRow, this, "isBackgroundHoverRow"); + this.filterRow = void 0; + this.onItemClick = void 0; + this.rowIndex = void 0; + this.setInitiallyProvidedValue(e) + } + + setInitiallyProvidedValue(t) { + this.__colorRow.set(t.colorRow); + this.__fontWeightRow.set(t.fontWeightRow); + this.__backgroundColorRow.set(t.backgroundColorRow); + this.__isBackgroundHoverRow.set(t.isBackgroundHoverRow); + void 0 !== t.filterRow && (this.filterRow = t.filterRow); + void 0 !== t.onItemClick && (this.onItemClick = t.onItemClick); + void 0 !== t.rowIndex && (this.rowIndex = t.rowIndex) + } + + updateStateVars(t) { + this.__colorRow.set(t.colorRow); + this.__fontWeightRow.set(t.fontWeightRow); + this.__backgroundColorRow.set(t.backgroundColorRow); + this.__isBackgroundHoverRow.set(t.isBackgroundHoverRow) + } + + purgeVariableDependenciesOnElmtId(t) { + this.__colorRow.purgeDependencyOnElmtId(t); + this.__fontWeightRow.purgeDependencyOnElmtId(t); + this.__backgroundColorRow.purgeDependencyOnElmtId(t); + this.__isBackgroundHoverRow.purgeDependencyOnElmtId(t) + } + + aboutToBeDeleted() { + this.__colorRow.aboutToBeDeleted(); + this.__fontWeightRow.aboutToBeDeleted(); + this.__backgroundColorRow.aboutToBeDeleted(); + this.__isBackgroundHoverRow.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get colorRow() { + return this.__colorRow.get() + } + + get fontWeightRow() { + return this.__fontWeightRow.get() + } + + get backgroundColorRow() { + return this.__backgroundColorRow.get() + } + + get isBackgroundHoverRow() { + return this.__isBackgroundHoverRow.get() + } + + initialRender() { + this.observeComponentCreation2(((t, e) => { + Stack.create({ alignContent: Alignment.End }) + }), Stack); + this.observeComponentCreation2(((t, e) => { + Stack.create({ alignContent: Alignment.Start }) + }), Stack); + this.observeComponentCreation2(((t, e) => { + List.create(); + List.listDirection(Axis.Horizontal); + List.scrollBar(BarState.Off); + List.width("100%"); + List.height(40); + List.align(Alignment.Start) + }), List); + this.observeComponentCreation2(((t, e) => { + ForEach.create(); + this.forEachUpdateFunction(t, this.filterRow.options, ((t, e) => { + const o = t; + this.observeComponentCreation2(((t, o) => { + If.create(); + 0 == e ? this.ifElseBranchUpdateFunction(0, (() => { + { + const t = !0; + const e = (e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ListItem.create(o, t); + ListItem.width({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + }); + ListItem.height(40); + i || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const o = (t, o) => { + e(t, o); + this.updateFuncByElmtId.set(t, e); + ListItem.pop() + }; + this.observeComponentCreation(e); + ListItem.pop() + } + })) : If.branchId(1) + }), If); + If.pop(); + { + const t = !0; + const i = (o, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(o); + ListItem.create(r, t); + ListItem.height("100%"); + ListItem.onClick((() => { + this.onItemClick(e) + })); + ListItem.focusable(!0); + ViewStackProcessor.visualState("focused"); + ListItem.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ListItem.padding({ left: 6, right: 6 }); + ViewStackProcessor.visualState("normal"); + ListItem.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ListItem.padding({ left: 8, right: 8 }); + ViewStackProcessor.visualState(); + ListItem.backgroundColor(this.isBackgroundHoverRow[e] ? this.backgroundColorRow[e] : "#00FFFFFF"); + ListItem.onHover((t => { + Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + if (t) { + this.backgroundColorRow[e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }; + this.isBackgroundHoverRow[e] = !0 + } else this.isBackgroundHoverRow[e] = !1 + })) + })); + ListItem.onTouch((t => { + t.type === TouchType.Down ? Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.backgroundColorRow[e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }; + this.isBackgroundHoverRow[e] = !0 + })) : t.type === TouchType.Up && Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.isBackgroundHoverRow[e] = !1 + })) + })); + ListItem.margin({ left: 0 == e ? -8 : 0 }); + ListItem.tabIndex(0 == e ? this.rowIndex : -1); + i || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const r = (t, r) => { + i(t, r); + this.updateFuncByElmtId.set(t, i); + this.observeComponentCreation2(((t, i) => { + Text.create(o.toString()); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body3"], + bundleName: "", + moduleName: "" + }); + Text.fontColor(this.colorRow[e]); + Text.fontWeight(this.fontWeightRow[e]); + Text.focusable(!0) + }), Text); + Text.pop(); + ListItem.pop() + }; + this.observeComponentCreation(i); + ListItem.pop() + } + }), void 0,!0,!1) + }), ForEach); + ForEach.pop(); + List.pop(); + this.observeComponentCreation2(((t, e) => { + e ? ViewPU.create(new GradientMask(this, { + x0: 0, + y0: 20, + x1: 16, + y1: 20 + }, void 0, t)) : this.updateStateVarsOfChildByElmtId(t, {}) + }), null); + Stack.pop(); + this.observeComponentCreation2(((t, e) => { + e ? ViewPU.create(new GradientMask(this, { + x0: 16, + y0: 20, + x1: 0, + y1: 20 + }, void 0, t)) : this.updateStateVarsOfChildByElmtId(t, {}) + }), null); + Stack.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +class MultiFilterRow extends ViewPU { + constructor(t, e, o, i = -1) { + super(t, o, i); + this.__colorRow = new SynchedPropertyNesedObjectPU(e.colorRow, this, "colorRow"); + this.__fontWeightRow = new SynchedPropertyNesedObjectPU(e.fontWeightRow, this, "fontWeightRow"); + this.__backgroundColorRow = new SynchedPropertyNesedObjectPU(e.backgroundColorRow, this, "backgroundColorRow"); + this.__isBackgroundHoverRow = new SynchedPropertyNesedObjectPU(e.isBackgroundHoverRow, this, "isBackgroundHoverRow"); + this.__twoLineModeItemNumRow = new SynchedPropertyNesedObjectPU(e.twoLineModeItemNumRow, this, "twoLineModeItemNumRow"); + this.__twoLineModeItemNumRecordRow = new SynchedPropertyNesedObjectPU(e.twoLineModeItemNumRecordRow, this, "twoLineModeItemNumRecordRow"); + this.__arrowShowStateRow = new SynchedPropertyNesedObjectPU(e.arrowShowStateRow, this, "arrowShowStateRow"); + this.__isArrowIconDown = new SynchedPropertyNesedObjectPU(e.isArrowIconDown, this, "isArrowIconDown"); + this.filterRow = null; + this.onItemClick = void 0; + this.__arrowBgColorRow = new ObservedPropertyObjectPU({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }, this, "arrowBgColorRow"); + this.__isArrowBgHoverRow = new ObservedPropertySimplePU(!1, this, "isArrowBgHoverRow"); + this.filterColumnWidth = 0; + this.lastFilterColumnWidth = 0; + this.rowIndex = 0; + this.setInitiallyProvidedValue(e) + } + + setInitiallyProvidedValue(t) { + this.__colorRow.set(t.colorRow); + this.__fontWeightRow.set(t.fontWeightRow); + this.__backgroundColorRow.set(t.backgroundColorRow); + this.__isBackgroundHoverRow.set(t.isBackgroundHoverRow); + this.__twoLineModeItemNumRow.set(t.twoLineModeItemNumRow); + this.__twoLineModeItemNumRecordRow.set(t.twoLineModeItemNumRecordRow); + this.__arrowShowStateRow.set(t.arrowShowStateRow); + this.__isArrowIconDown.set(t.isArrowIconDown); + void 0 !== t.filterRow && (this.filterRow = t.filterRow); + void 0 !== t.onItemClick && (this.onItemClick = t.onItemClick); + void 0 !== t.arrowBgColorRow && (this.arrowBgColorRow = t.arrowBgColorRow); + void 0 !== t.isArrowBgHoverRow && (this.isArrowBgHoverRow = t.isArrowBgHoverRow); + void 0 !== t.filterColumnWidth && (this.filterColumnWidth = t.filterColumnWidth); + void 0 !== t.lastFilterColumnWidth && (this.lastFilterColumnWidth = t.lastFilterColumnWidth); + void 0 !== t.rowIndex && (this.rowIndex = t.rowIndex) + } + + updateStateVars(t) { + this.__colorRow.set(t.colorRow); + this.__fontWeightRow.set(t.fontWeightRow); + this.__backgroundColorRow.set(t.backgroundColorRow); + this.__isBackgroundHoverRow.set(t.isBackgroundHoverRow); + this.__twoLineModeItemNumRow.set(t.twoLineModeItemNumRow); + this.__twoLineModeItemNumRecordRow.set(t.twoLineModeItemNumRecordRow); + this.__arrowShowStateRow.set(t.arrowShowStateRow); + this.__isArrowIconDown.set(t.isArrowIconDown) + } + + purgeVariableDependenciesOnElmtId(t) { + this.__colorRow.purgeDependencyOnElmtId(t); + this.__fontWeightRow.purgeDependencyOnElmtId(t); + this.__backgroundColorRow.purgeDependencyOnElmtId(t); + this.__isBackgroundHoverRow.purgeDependencyOnElmtId(t); + this.__twoLineModeItemNumRow.purgeDependencyOnElmtId(t); + this.__twoLineModeItemNumRecordRow.purgeDependencyOnElmtId(t); + this.__arrowShowStateRow.purgeDependencyOnElmtId(t); + this.__isArrowIconDown.purgeDependencyOnElmtId(t); + this.__arrowBgColorRow.purgeDependencyOnElmtId(t); + this.__isArrowBgHoverRow.purgeDependencyOnElmtId(t) + } + + aboutToBeDeleted() { + this.__colorRow.aboutToBeDeleted(); + this.__fontWeightRow.aboutToBeDeleted(); + this.__backgroundColorRow.aboutToBeDeleted(); + this.__isBackgroundHoverRow.aboutToBeDeleted(); + this.__twoLineModeItemNumRow.aboutToBeDeleted(); + this.__twoLineModeItemNumRecordRow.aboutToBeDeleted(); + this.__arrowShowStateRow.aboutToBeDeleted(); + this.__isArrowIconDown.aboutToBeDeleted(); + this.__arrowBgColorRow.aboutToBeDeleted(); + this.__isArrowBgHoverRow.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get colorRow() { + return this.__colorRow.get() + } + + get fontWeightRow() { + return this.__fontWeightRow.get() + } + + get backgroundColorRow() { + return this.__backgroundColorRow.get() + } + + get isBackgroundHoverRow() { + return this.__isBackgroundHoverRow.get() + } + + get twoLineModeItemNumRow() { + return this.__twoLineModeItemNumRow.get() + } + + get twoLineModeItemNumRecordRow() { + return this.__twoLineModeItemNumRecordRow.get() + } + + get arrowShowStateRow() { + return this.__arrowShowStateRow.get() + } + + get isArrowIconDown() { + return this.__isArrowIconDown.get() + } + + get arrowBgColorRow() { + return this.__arrowBgColorRow.get() + } + + set arrowBgColorRow(t) { + this.__arrowBgColorRow.set(t) + } + + get isArrowBgHoverRow() { + return this.__isArrowBgHoverRow.get() + } + + set isArrowBgHoverRow(t) { + this.__isArrowBgHoverRow.set(t) + } + + calcMultiFilterRowItemNum() { + var t = this.filterColumnWidth - vp2px(24); + var e = 0; + var o = 1; + for (var i = 0;i < this.filterRow.options.length; i++) { + let r = this.filterRow.options[i]; + let s = measure.measureText({ textContent: r, fontSize: 12 }); + if (0 !== i) { + s += vp2px(16); + if (t - s >= 0) { + t -= s; + e += 1 + } else { + if (0 === e) { + e++; + t = 0 + } + if (1 !== o) break; + o += 1; + t = this.filterColumnWidth - vp2px(24) - vp2px(24); + i-- + } + } + } + return e + } + + DownAndUpArrow(t = null) { + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + } + }); + Row.height(40); + Row.width(24); + Row.backgroundColor(this.isArrowBgHoverRow ? this.arrowBgColorRow : "#00FFFFFF"); + Row.focusable(!0); + Row.visibility(this.arrowShowStateRow.value ? Visibility.Visible : Visibility.Hidden); + Row.onHover((t => { + Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + if (t) { + this.arrowBgColorRow = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }; + this.isArrowBgHoverRow = !0 + } else this.isArrowBgHoverRow = !1 + })) + })); + Row.onTouch((t => { + t.type === TouchType.Down ? Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.arrowBgColorRow = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }; + this.isArrowBgHoverRow = !0 + })) : t.type === TouchType.Up && Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.isArrowBgHoverRow = !1 + })) + })); + Row.onClick((() => { + if (this.isArrowIconDown.value) { + this.isArrowIconDown.value = !1; + this.arrowShowStateRow.value = !1; + Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => { + this.twoLineModeItemNumRow.value = this.filterRow.options.length + })); + Context.animateTo({ delay: 300, duration: 200, curve: SHARP_CUBIC_BEZIER }, (() => { + this.arrowShowStateRow.value = !0 + })) + } else { + this.isArrowIconDown.value = !0; + this.arrowShowStateRow.value = !1; + Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => { + this.twoLineModeItemNumRow.value = this.twoLineModeItemNumRecordRow.value + })); + Context.animateTo({ delay: 300, duration: 200, curve: SHARP_CUBIC_BEZIER }, (() => { + this.arrowShowStateRow.value = !0 + })) + } + })) + }), Row); + this.observeComponentCreation2(((t, e) => { + Image.create(this.isArrowIconDown.value ? ARROW_DOWN : ARROW_UP); + Image.width(24); + Image.height(24); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_tertiary"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0); + ViewStackProcessor.visualState("focused"); + Image.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + Image.width(28); + Image.offset({ x: -2 }); + ViewStackProcessor.visualState("normal"); + Image.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + Image.width(24); + Image.offset({ x: 0 }); + ViewStackProcessor.visualState(); + Image.tabIndex(-1) + }), Image); + Row.pop() + } + + initialRender() { + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.width("100%"); + Row.alignItems(VerticalAlign.Top); + Row.padding({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + } + }) + }), Row); + this.observeComponentCreation2(((t, e) => { + If.create(); + this.filterRow.options && this.filterRow.options.length > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation2(((t, e) => { + Text.create(this.filterRow.options[0].toString()); + Text.height(40); + Text.width(px2vp(measure.measureText({ + textContent: this.filterRow.options[0].toString(), + fontSize: 12 + })) + 16); + Text.margin({ left: -8 }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body3"], + bundleName: "", + moduleName: "" + }); + Text.fontColor(this.colorRow[0]); + Text.fontWeight(this.fontWeightRow[0]); + Text.backgroundColor(this.isBackgroundHoverRow[0] ? this.backgroundColorRow[0] : "#00FFFFFF"); + Text.onClick((() => { + this.onItemClick(0) + })); + Text.focusable(!0); + Text.onHover((t => { + Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + if (t) { + this.backgroundColorRow[0] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }; + this.isBackgroundHoverRow[0] = !0 + } else this.isBackgroundHoverRow[0] = !1 + })) + })); + Text.onTouch((t => { + t.type === TouchType.Down ? Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.backgroundColorRow[0] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }; + this.isBackgroundHoverRow[0] = !0 + })) : t.type === TouchType.Up && Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.isBackgroundHoverRow[0] = !1 + })) + })); + ViewStackProcessor.visualState("focused"); + Text.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + Text.padding({ left: 6, right: 6 }); + ViewStackProcessor.visualState("normal"); + Text.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + Text.padding({ left: 8, right: 8 }); + ViewStackProcessor.visualState(); + Text.tabIndex(this.rowIndex) + }), Text); + Text.pop() + })) : If.branchId(1) + }), If); + If.pop(); + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.width("100%"); + Row.padding({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + } + }); + Row.onAreaChange(((t, e) => { + this.filterColumnWidth = vp2px(parseInt(e.width.toString(), 0)); + if (0 === this.twoLineModeItemNumRow.value) { + var o = this.calcMultiFilterRowItemNum(); + this.twoLineModeItemNumRow.value = o; + this.twoLineModeItemNumRecordRow.value = o; + o < this.filterRow.options.length - 1 ? this.arrowShowStateRow.value = !0 : this.arrowShowStateRow.value = !1 + } else if (this.filterColumnWidth !== this.lastFilterColumnWidth) { + if ((o = this.calcMultiFilterRowItemNum()) < this.filterRow.options.length - 1) { + if (!this.arrowShowStateRow.value || this.isArrowIconDown.value) { + this.arrowShowStateRow.value = !0; + this.isArrowIconDown.value = !0; + this.twoLineModeItemNumRow.value = o + } + } else { + this.arrowShowStateRow.value = !1; + this.isArrowIconDown.value = !1; + this.twoLineModeItemNumRow.value = o + } + this.twoLineModeItemNumRecordRow.value = o + } + this.lastFilterColumnWidth = this.filterColumnWidth + })) + }), Row); + this.observeComponentCreation2(((t, e) => { + Flex.create({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }); + Flex.alignSelf(ItemAlign.Stretch) + }), Flex); + this.observeComponentCreation2(((t, e) => { + ForEach.create(); + this.forEachUpdateFunction(t, this.filterRow.options.slice(0, this.twoLineModeItemNumRow.value + 1), ((t, e) => { + const o = t; + this.observeComponentCreation2(((t, i) => { + If.create(); + e > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation2(((t, i) => { + Text.create(o.toString()); + Text.transition(TransitionEffect.OPACITY); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body3"], + bundleName: "", + moduleName: "" + }); + Text.height(40); + Text.fontColor(this.colorRow[e]); + Text.fontWeight(this.fontWeightRow[e]); + Text.backgroundColor(this.isBackgroundHoverRow[e] ? this.backgroundColorRow[e] : "#00FFFFFF"); + Text.onClick((() => { + this.onItemClick(e) + })); + Text.onHover((t => { + Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + if (t) { + this.backgroundColorRow[e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }; + this.isBackgroundHoverRow[e] = !0 + } else this.isBackgroundHoverRow[e] = !1 + })) + })); + Text.onTouch((t => { + t.type === TouchType.Down ? Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.backgroundColorRow[e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }; + this.isBackgroundHoverRow[e] = !0 + })) : t.type === TouchType.Up && Context.animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: 100 + }, (() => { + this.isBackgroundHoverRow[e] = !1 + })) + })); + Text.focusable(!0); + ViewStackProcessor.visualState("focused"); + Text.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + Text.padding({ left: 6, right: 6 }); + ViewStackProcessor.visualState("normal"); + Text.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + Text.padding({ left: 8, right: 8 }); + ViewStackProcessor.visualState(); + Text.tabIndex(-1) + }), Text); + Text.pop() + })) : If.branchId(1) + }), If); + If.pop() + }), void 0,!0,!1) + }), ForEach); + ForEach.pop(); + this.observeComponentCreation2(((t, e) => { + If.create(); + this.arrowShowStateRow.value ? this.ifElseBranchUpdateFunction(0, (() => { + this.DownAndUpArrow.bind(this)() + })) : If.branchId(1) + }), If); + If.pop(); + Flex.pop(); + Row.pop(); + Row.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export class Filter extends ViewPU { + constructor(t, e, o, i = -1) { + super(t, o, i); + this.container = void 0; + this.__multiFilters = new SynchedPropertyObjectOneWayPU(e.multiFilters, this, "multiFilters"); + this.__additionFilters = new SynchedPropertyObjectOneWayPU(e.additionFilters, this, "additionFilters"); + this.onFilterChanged = null; + this.__filterType = new SynchedPropertySimpleOneWayPU(e.filterType, this, "filterType"); + this.selectedFilters = null; + this.__colorArr = new ObservedPropertyObjectPU(null, this, "colorArr"); + this.__fontWeightArr = new ObservedPropertyObjectPU(null, this, "fontWeightArr"); + this.__backgroundColorArr = new ObservedPropertyObjectPU(null, this, "backgroundColorArr"); + this.__isBackgroundHover = new ObservedPropertyObjectPU(null, this, "isBackgroundHover"); + this.__floatArrowBgColor = new ObservedPropertyObjectPU(null, this, "floatArrowBgColor"); + this.__isFloatArrowBgHover = new ObservedPropertySimplePU(!1, this, "isFloatArrowBgHover"); + this.__isArrowIconDownArr = new ObservedPropertyObjectPU(null, this, "isArrowIconDownArr"); + this.__additionColorArr = new ObservedPropertyObjectPU(null, this, "additionColorArr"); + this.__additionFontWeightArr = new ObservedPropertyObjectPU(null, this, "additionFontWeightArr"); + this.__additionBackgroundColorArr = new ObservedPropertyObjectPU(null, this, "additionBackgroundColorArr"); + this.__isAdditionBackgroundHover = new ObservedPropertyObjectPU(null, this, "isAdditionBackgroundHover"); + this.__colorRefresh = new ObservedPropertySimplePU(!1, this, "colorRefresh"); + this.__isFloatBarShow = new ObservedPropertySimplePU(!1, this, "isFloatBarShow"); + this.isFloatBarShowWithoutAnimation = !1; + this.__isFloatShowAllFilter = new ObservedPropertySimplePU(!1, this, "isFloatShowAllFilter"); + this.isFloatShowAllFilterWithoutAnimation = !1; + this.__floatFilterPosition = new ObservedPropertySimplePU(0, this, "floatFilterPosition"); + this.__floatFilterBarHeight = new ObservedPropertySimplePU(0, this, "floatFilterBarHeight"); + this.__floatFilterBarPosition = new ObservedPropertySimplePU(0, this, "floatFilterBarPosition"); + this.filterDynamicHeight = 0; + this.filterStackHeight = 0; + this.__twoLineModeItemNum = new ObservedPropertyObjectPU(null, this, "twoLineModeItemNum"); + this.__twoLineModeItemNumRecord = new ObservedPropertyObjectPU(null, this, "twoLineModeItemNumRecord"); + this.__downArrowShowState = new ObservedPropertyObjectPU(null, this, "downArrowShowState"); + this.__floatFilterBarText = new ObservedPropertySimplePU("", this, "floatFilterBarText"); + this.setInitiallyProvidedValue(e) + } + + setInitiallyProvidedValue(t) { + void 0 !== t.container && (this.container = t.container); + void 0 === t.multiFilters && this.__multiFilters.set([]); + void 0 === t.additionFilters && this.__additionFilters.set(null); + void 0 !== t.onFilterChanged && (this.onFilterChanged = t.onFilterChanged); + void 0 === t.filterType && this.__filterType.set(FilterType.LIST_FILTER); + void 0 !== t.selectedFilters && (this.selectedFilters = t.selectedFilters); + void 0 !== t.colorArr && (this.colorArr = t.colorArr); + void 0 !== t.fontWeightArr && (this.fontWeightArr = t.fontWeightArr); + void 0 !== t.backgroundColorArr && (this.backgroundColorArr = t.backgroundColorArr); + void 0 !== t.isBackgroundHover && (this.isBackgroundHover = t.isBackgroundHover); + void 0 !== t.floatArrowBgColor && (this.floatArrowBgColor = t.floatArrowBgColor); + void 0 !== t.isFloatArrowBgHover && (this.isFloatArrowBgHover = t.isFloatArrowBgHover); + void 0 !== t.isArrowIconDownArr && (this.isArrowIconDownArr = t.isArrowIconDownArr); + void 0 !== t.additionColorArr && (this.additionColorArr = t.additionColorArr); + void 0 !== t.additionFontWeightArr && (this.additionFontWeightArr = t.additionFontWeightArr); + void 0 !== t.additionBackgroundColorArr && (this.additionBackgroundColorArr = t.additionBackgroundColorArr); + void 0 !== t.isAdditionBackgroundHover && (this.isAdditionBackgroundHover = t.isAdditionBackgroundHover); + void 0 !== t.colorRefresh && (this.colorRefresh = t.colorRefresh); + void 0 !== t.isFloatBarShow && (this.isFloatBarShow = t.isFloatBarShow); + void 0 !== t.isFloatBarShowWithoutAnimation && (this.isFloatBarShowWithoutAnimation = t.isFloatBarShowWithoutAnimation); + void 0 !== t.isFloatShowAllFilter && (this.isFloatShowAllFilter = t.isFloatShowAllFilter); + void 0 !== t.isFloatShowAllFilterWithoutAnimation && (this.isFloatShowAllFilterWithoutAnimation = t.isFloatShowAllFilterWithoutAnimation); + void 0 !== t.floatFilterPosition && (this.floatFilterPosition = t.floatFilterPosition); + void 0 !== t.floatFilterBarHeight && (this.floatFilterBarHeight = t.floatFilterBarHeight); + void 0 !== t.floatFilterBarPosition && (this.floatFilterBarPosition = t.floatFilterBarPosition); + void 0 !== t.filterDynamicHeight && (this.filterDynamicHeight = t.filterDynamicHeight); + void 0 !== t.filterStackHeight && (this.filterStackHeight = t.filterStackHeight); + void 0 !== t.twoLineModeItemNum && (this.twoLineModeItemNum = t.twoLineModeItemNum); + void 0 !== t.twoLineModeItemNumRecord && (this.twoLineModeItemNumRecord = t.twoLineModeItemNumRecord); + void 0 !== t.downArrowShowState && (this.downArrowShowState = t.downArrowShowState); + void 0 !== t.floatFilterBarText && (this.floatFilterBarText = t.floatFilterBarText) + } + + updateStateVars(t) { + this.__multiFilters.reset(t.multiFilters); + this.__additionFilters.reset(t.additionFilters); + this.__filterType.reset(t.filterType) + } + + purgeVariableDependenciesOnElmtId(t) { + this.__multiFilters.purgeDependencyOnElmtId(t); + this.__additionFilters.purgeDependencyOnElmtId(t); + this.__filterType.purgeDependencyOnElmtId(t); + this.__colorArr.purgeDependencyOnElmtId(t); + this.__fontWeightArr.purgeDependencyOnElmtId(t); + this.__backgroundColorArr.purgeDependencyOnElmtId(t); + this.__isBackgroundHover.purgeDependencyOnElmtId(t); + this.__floatArrowBgColor.purgeDependencyOnElmtId(t); + this.__isFloatArrowBgHover.purgeDependencyOnElmtId(t); + this.__isArrowIconDownArr.purgeDependencyOnElmtId(t); + this.__additionColorArr.purgeDependencyOnElmtId(t); + this.__additionFontWeightArr.purgeDependencyOnElmtId(t); + this.__additionBackgroundColorArr.purgeDependencyOnElmtId(t); + this.__isAdditionBackgroundHover.purgeDependencyOnElmtId(t); + this.__colorRefresh.purgeDependencyOnElmtId(t); + this.__isFloatBarShow.purgeDependencyOnElmtId(t); + this.__isFloatShowAllFilter.purgeDependencyOnElmtId(t); + this.__floatFilterPosition.purgeDependencyOnElmtId(t); + this.__floatFilterBarHeight.purgeDependencyOnElmtId(t); + this.__floatFilterBarPosition.purgeDependencyOnElmtId(t); + this.__twoLineModeItemNum.purgeDependencyOnElmtId(t); + this.__twoLineModeItemNumRecord.purgeDependencyOnElmtId(t); + this.__downArrowShowState.purgeDependencyOnElmtId(t); + this.__floatFilterBarText.purgeDependencyOnElmtId(t) + } + + aboutToBeDeleted() { + this.__multiFilters.aboutToBeDeleted(); + this.__additionFilters.aboutToBeDeleted(); + this.__filterType.aboutToBeDeleted(); + this.__colorArr.aboutToBeDeleted(); + this.__fontWeightArr.aboutToBeDeleted(); + this.__backgroundColorArr.aboutToBeDeleted(); + this.__isBackgroundHover.aboutToBeDeleted(); + this.__floatArrowBgColor.aboutToBeDeleted(); + this.__isFloatArrowBgHover.aboutToBeDeleted(); + this.__isArrowIconDownArr.aboutToBeDeleted(); + this.__additionColorArr.aboutToBeDeleted(); + this.__additionFontWeightArr.aboutToBeDeleted(); + this.__additionBackgroundColorArr.aboutToBeDeleted(); + this.__isAdditionBackgroundHover.aboutToBeDeleted(); + this.__colorRefresh.aboutToBeDeleted(); + this.__isFloatBarShow.aboutToBeDeleted(); + this.__isFloatShowAllFilter.aboutToBeDeleted(); + this.__floatFilterPosition.aboutToBeDeleted(); + this.__floatFilterBarHeight.aboutToBeDeleted(); + this.__floatFilterBarPosition.aboutToBeDeleted(); + this.__twoLineModeItemNum.aboutToBeDeleted(); + this.__twoLineModeItemNumRecord.aboutToBeDeleted(); + this.__downArrowShowState.aboutToBeDeleted(); + this.__floatFilterBarText.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get multiFilters() { + return this.__multiFilters.get() + } + + set multiFilters(t) { + this.__multiFilters.set(t) + } + + get additionFilters() { + return this.__additionFilters.get() + } + + set additionFilters(t) { + this.__additionFilters.set(t) + } + + get filterType() { + return this.__filterType.get() + } + + set filterType(t) { + this.__filterType.set(t) + } + + get colorArr() { + return this.__colorArr.get() + } + + set colorArr(t) { + this.__colorArr.set(t) + } + + get fontWeightArr() { + return this.__fontWeightArr.get() + } + + set fontWeightArr(t) { + this.__fontWeightArr.set(t) + } + + get backgroundColorArr() { + return this.__backgroundColorArr.get() + } + + set backgroundColorArr(t) { + this.__backgroundColorArr.set(t) + } + + get isBackgroundHover() { + return this.__isBackgroundHover.get() + } + + set isBackgroundHover(t) { + this.__isBackgroundHover.set(t) + } + + get floatArrowBgColor() { + return this.__floatArrowBgColor.get() + } + + set floatArrowBgColor(t) { + this.__floatArrowBgColor.set(t) + } + + get isFloatArrowBgHover() { + return this.__isFloatArrowBgHover.get() + } + + set isFloatArrowBgHover(t) { + this.__isFloatArrowBgHover.set(t) + } + + get isArrowIconDownArr() { + return this.__isArrowIconDownArr.get() + } + + set isArrowIconDownArr(t) { + this.__isArrowIconDownArr.set(t) + } + + get additionColorArr() { + return this.__additionColorArr.get() + } + + set additionColorArr(t) { + this.__additionColorArr.set(t) + } + + get additionFontWeightArr() { + return this.__additionFontWeightArr.get() + } + + set additionFontWeightArr(t) { + this.__additionFontWeightArr.set(t) + } + + get additionBackgroundColorArr() { + return this.__additionBackgroundColorArr.get() + } + + set additionBackgroundColorArr(t) { + this.__additionBackgroundColorArr.set(t) + } + + get isAdditionBackgroundHover() { + return this.__isAdditionBackgroundHover.get() + } + + set isAdditionBackgroundHover(t) { + this.__isAdditionBackgroundHover.set(t) + } + + get colorRefresh() { + return this.__colorRefresh.get() + } + + set colorRefresh(t) { + this.__colorRefresh.set(t) + } + + get isFloatBarShow() { + return this.__isFloatBarShow.get() + } + + set isFloatBarShow(t) { + this.__isFloatBarShow.set(t) + } + + get isFloatShowAllFilter() { + return this.__isFloatShowAllFilter.get() + } + + set isFloatShowAllFilter(t) { + this.__isFloatShowAllFilter.set(t) + } + + get floatFilterPosition() { + return this.__floatFilterPosition.get() + } + + set floatFilterPosition(t) { + this.__floatFilterPosition.set(t) + } + + get floatFilterBarHeight() { + return this.__floatFilterBarHeight.get() + } + + set floatFilterBarHeight(t) { + this.__floatFilterBarHeight.set(t) + } + + get floatFilterBarPosition() { + return this.__floatFilterBarPosition.get() + } + + set floatFilterBarPosition(t) { + this.__floatFilterBarPosition.set(t) + } + + get twoLineModeItemNum() { + return this.__twoLineModeItemNum.get() + } + + set twoLineModeItemNum(t) { + this.__twoLineModeItemNum.set(t) + } + + get twoLineModeItemNumRecord() { + return this.__twoLineModeItemNumRecord.get() + } + + set twoLineModeItemNumRecord(t) { + this.__twoLineModeItemNumRecord.set(t) + } + + get downArrowShowState() { + return this.__downArrowShowState.get() + } + + set downArrowShowState(t) { + this.__downArrowShowState.set(t) + } + + get floatFilterBarText() { + return this.__floatFilterBarText.get() + } + + set floatFilterBarText(t) { + this.__floatFilterBarText.set(t) + } + + textColor(t, e) { + return this.selectedFilters.length > t && this.selectedFilters[t].index === e ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + } + } + + aboutToAppear() { + this.initParams() + } + + filterItemClick(t, e) { + let o = this.multiFilters[t].options[e]; + if (e != this.selectedFilters[t].index) { + this.colorArr[t][e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }; + this.colorArr[t][this.selectedFilters[t].index] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }; + this.fontWeightArr[t][e] = FontWeight.Medium; + this.fontWeightArr[t][this.selectedFilters[t].index] = FontWeight.Regular; + this.colorRefresh = !this.colorRefresh; + this.selectedFilters[t].value = o; + this.selectedFilters[t].index = e; + this.onFilterChanged && this.onFilterChanged(this.selectedFilters) + } + this.refreshFloatFilterBarText() + } + + refreshFloatFilterBarText() { + this.floatFilterBarText = ""; + for (let t = 0;t < this.selectedFilters.length; t++) null !== this.selectedFilters[t].value && (this.floatFilterBarText += 0 === t ? this.selectedFilters[t].value : "/" + this.selectedFilters[t].value) + } + + initParams() { + if (!this.selectedFilters) { + this.selectedFilters = []; + for (let e of this.multiFilters) { + var t = { name: e.name, index: -1, value: null }; + if (e.options.length > 0) { + t.index = 0; + t.value = e.options[0] + } + this.selectedFilters.push(t) + } + if (this.additionFilters && this.additionFilters.name) { + t = { name: this.additionFilters.name, index: -1, value: null }; + this.selectedFilters.push(t) + } + this.refreshFloatFilterBarText() + } + if (!this.colorArr) { + this.colorArr = []; + this.backgroundColorArr = []; + this.isBackgroundHover = []; + this.fontWeightArr = []; + this.isArrowIconDownArr = []; + this.floatArrowBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }; + for (let t of this.multiFilters) { + var e = new ResourceArray; + var o = new FontWeightArray; + var i = new ResourceArray; + var r = new BooleanArray; + for (let r of t.options.keys()) { + if (0 === r) { + e.push({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }); + o.push(FontWeight.Medium) + } else { + e.push({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + o.push(FontWeight.Regular) + } + i.push({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }) + } + this.colorArr.push(e); + this.fontWeightArr.push(o); + this.backgroundColorArr.push(i); + this.isBackgroundHover.push(r); + this.isArrowIconDownArr.push(new ObservedBoolean(!0)) + } + } + if (this.additionFilters && this.additionFilters.options) { + this.additionColorArr = []; + this.additionFontWeightArr = []; + this.additionBackgroundColorArr = []; + this.isAdditionBackgroundHover = []; + for (let t = 0;t < this.additionFilters.options.length; t++) { + this.additionColorArr.push({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + this.additionFontWeightArr.push(FontWeight.Regular); + this.additionBackgroundColorArr.push({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }); + this.isAdditionBackgroundHover.push(!1) + } + } + if (!this.twoLineModeItemNum) { + this.twoLineModeItemNum = []; + this.twoLineModeItemNumRecord = []; + this.downArrowShowState = []; + for (let t = 0;t < this.multiFilters.length; t++) { + this.twoLineModeItemNum.push(new ObservedNumber(0)); + this.twoLineModeItemNumRecord.push(new ObservedNumber(0)); + this.downArrowShowState.push(new ObservedBoolean(!1)) + } + } + } + + ListFilter(t = null) { + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.width("100%"); + Column.align(Alignment.Start); + Column.onAreaChange(((t, e) => { + if (!this.isFloatShowAllFilterWithoutAnimation && !this.isFloatBarShowWithoutAnimation) { + null != this.additionFilters ? this.filterDynamicHeight = parseInt(e.height.toString(), 0) + 40 + 8 : this.filterDynamicHeight = parseInt(e.height.toString(), 0) + 8; + this.filterDynamicHeight > .8 * this.filterStackHeight && (this.filterDynamicHeight = .8 * this.filterStackHeight); + this.floatFilterPosition = -this.filterDynamicHeight + } + })) + }), Column); + this.observeComponentCreation2(((t, e) => { + ForEach.create(); + this.forEachUpdateFunction(t, this.multiFilters, ((t, e) => { + const o = t; + this.observeComponentCreation2(((t, i) => { + i ? ViewPU.create(new ListFilterRow(this, { + colorRow: this.colorArr[e], + fontWeightRow: this.fontWeightArr[e], + backgroundColorRow: this.backgroundColorArr[e], + isBackgroundHoverRow: this.isBackgroundHover[e], + filterRow: o, + onItemClick: t => { + this.filterItemClick(e, t) + }, + rowIndex: e + }, void 0, t)) : this.updateStateVarsOfChildByElmtId(t, { + colorRow: this.colorArr[e], + fontWeightRow: this.fontWeightArr[e], + backgroundColorRow: this.backgroundColorArr[e], + isBackgroundHoverRow: this.isBackgroundHover[e] + }) + }), null) + }), void 0,!0,!1) + }), ForEach); + ForEach.pop(); + Column.pop() + } + + MultiLineFilter(t = null) { + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.width("100%"); + Column.onAreaChange(((t, e) => { + console.log("filter height:" + parseInt(e.height.toString(), 0)); + null != this.additionFilters ? this.filterDynamicHeight = parseInt(e.height.toString(), 0) + 40 + 8 : this.filterDynamicHeight = parseInt(e.height.toString(), 0) + 8; + this.filterDynamicHeight > .8 * this.filterStackHeight && (this.filterDynamicHeight = .8 * this.filterStackHeight); + this.isFloatBarShowWithoutAnimation || this.isFloatShowAllFilterWithoutAnimation || (this.floatFilterPosition = -this.filterDynamicHeight) + })) + }), Column); + this.observeComponentCreation2(((t, e) => { + ForEach.create(); + this.forEachUpdateFunction(t, this.multiFilters, ((t, e) => { + const o = t; + this.observeComponentCreation2(((t, i) => { + i ? ViewPU.create(new MultiFilterRow(this, { + colorRow: this.colorArr[e], + fontWeightRow: this.fontWeightArr[e], + backgroundColorRow: this.backgroundColorArr[e], + isBackgroundHoverRow: this.isBackgroundHover[e], + arrowShowStateRow: this.downArrowShowState[e], + twoLineModeItemNumRow: this.twoLineModeItemNum[e], + twoLineModeItemNumRecordRow: this.twoLineModeItemNumRecord[e], + isArrowIconDown: this.isArrowIconDownArr[e], + filterRow: o, + onItemClick: t => { + this.filterItemClick(e, t) + }, + rowIndex: e + }, void 0, t)) : this.updateStateVarsOfChildByElmtId(t, { + colorRow: this.colorArr[e], + fontWeightRow: this.fontWeightArr[e], + backgroundColorRow: this.backgroundColorArr[e], + isBackgroundHoverRow: this.isBackgroundHover[e], + arrowShowStateRow: this.downArrowShowState[e], + twoLineModeItemNumRow: this.twoLineModeItemNum[e], + twoLineModeItemNumRecordRow: this.twoLineModeItemNumRecord[e], + isArrowIconDown: this.isArrowIconDownArr[e] + }) + }), null) + }), void 0,!0,!1) + }), ForEach); + ForEach.pop(); + Column.pop() + } + + additionItemClick(t) { + let e = this.multiFilters.length; + if (this.selectedFilters[e].index != t) if (-1 === this.selectedFilters[e].index) { + this.additionColorArr[t] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }; + this.additionFontWeightArr[t] = FontWeight.Medium; + this.selectedFilters[e].value = this.additionFilters.options[t]; + this.selectedFilters[e].index = t + } else { + let o = this.selectedFilters[e].index; + this.additionColorArr[o] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }; + this.additionColorArr[t] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }; + this.additionFontWeightArr[o] = FontWeight.Regular; + this.additionFontWeightArr[t] = FontWeight.Medium; + this.selectedFilters[e].value = this.additionFilters.options[t]; + this.selectedFilters[e].index = t + } else { + this.additionColorArr[t] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }; + this.additionFontWeightArr[t] = FontWeight.Regular; + this.selectedFilters[e].value = null; + this.selectedFilters[e].index = -1 + } + this.onFilterChanged && this.onFilterChanged(this.selectedFilters); + this.colorRefresh = !this.colorRefresh; + this.refreshFloatFilterBarText() + } + + AdditionFilterList(t = null) { + this.observeComponentCreation2(((t, e) => { + If.create(); + this.additionFilters && this.additionFilters.name && this.additionFilters.options && 0 != this.additionFilters.options.length ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation2(((t, e) => { + Stack.create({ alignContent: Alignment.End }) + }), Stack); + this.observeComponentCreation2(((t, e) => { + Stack.create({ alignContent: Alignment.Start }) + }), Stack); + this.observeComponentCreation2(((t, e) => { + List.create(); + List.listDirection(Axis.Horizontal); + List.scrollBar(BarState.Off); + List.width("100%"); + List.height(40) + }), List); + { + const t = !0; + const e = (e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ListItem.create(o, t); + ListItem.height("100%"); + ListItem.margin({ left: -8 }); + i || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const o = (t, o) => { + e(t, o); + this.updateFuncByElmtId.set(t, e); + this.observeComponentCreation2(((t, e) => { + Row.create() + }), Row); + this.observeComponentCreation2(((t, e) => { + Text.create(this.additionFilters.name.toString()); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body3"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ left: 8, right: 8 }); + Text.padding({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + } + }) + }), Text); + Text.pop(); + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.width(1); + Row.height(16); + Row.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_list_separator"], + bundleName: "", + moduleName: "" + }) + }), Row); + Row.pop(); + Row.pop(); + ListItem.pop() + }; + this.observeComponentCreation(e); + ListItem.pop() + } + this.observeComponentCreation2(((t, e) => { + ForEach.create(); + this.forEachUpdateFunction(t, this.additionFilters.options, ((t, e) => { + const o = t; + { + const t = !0; + const i = (o, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(o); + ListItem.create(r, t); + ListItem.height("100%"); + ListItem.backgroundColor(this.isAdditionBackgroundHover[e] ? this.additionBackgroundColorArr[e] : "#00FFFFFF"); + ListItem.onHover((t => { + Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + if (t) { + this.additionBackgroundColorArr[e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }; + this.isAdditionBackgroundHover[e] = !0 + } else this.isAdditionBackgroundHover[e] = !1 + })) + })); + ListItem.onTouch((t => { + t.type === TouchType.Down ? Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.additionBackgroundColorArr[e] = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }; + this.isAdditionBackgroundHover[e] = !0 + })) : t.type === TouchType.Up && Context.animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: 100 + }, (() => { + this.isAdditionBackgroundHover[e] = !1 + })) + })); + ListItem.focusable(!0); + ViewStackProcessor.visualState("focused"); + ListItem.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ListItem.padding({ left: 6, right: 6 }); + ViewStackProcessor.visualState("normal"); + ListItem.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ListItem.padding({ left: 8, right: 8 }); + ViewStackProcessor.visualState(); + ListItem.onClick((() => { + this.additionItemClick(e) + })); + ListItem.tabIndex(0 == e ? this.multiFilters.length : -1); + i || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const r = (t, r) => { + i(t, r); + this.updateFuncByElmtId.set(t, i); + this.observeComponentCreation2(((t, i) => { + Text.create(o.toString()); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body3"], + bundleName: "", + moduleName: "" + }); + Text.fontColor(this.additionColorArr[e]); + Text.fontWeight(this.additionFontWeightArr[e]); + Text.focusable(!0) + }), Text); + Text.pop(); + ListItem.pop() + }; + this.observeComponentCreation(i); + ListItem.pop() + } + }), void 0,!0,!1) + }), ForEach); + ForEach.pop(); + List.pop(); + this.observeComponentCreation2(((t, e) => { + e ? ViewPU.create(new GradientMask(this, { + x0: 0, + y0: 20, + x1: 16, + y1: 20 + }, void 0, t)) : this.updateStateVarsOfChildByElmtId(t, {}) + }), null); + Stack.pop(); + this.observeComponentCreation2(((t, e) => { + e ? ViewPU.create(new GradientMask(this, { + x0: 16, + y0: 20, + x1: 0, + y1: 20 + }, void 0, t)) : this.updateStateVarsOfChildByElmtId(t, {}) + }), null); + Stack.pop() + })) : If.branchId(1) + }), If); + If.pop() + } + + FilterHeader(t = null) { + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.padding({ top: 8 }); + Column.onVisibleAreaChange([0, 1], ((t, e) => { + if (e > 0) { + this.isFloatShowAllFilter = !1; + this.isFloatShowAllFilterWithoutAnimation = !1; + this.isFloatBarShowWithoutAnimation = !1; + Context.animateTo({ curve: INTER_POLATING_SPRING, onFinish: () => { + this.isFloatBarShowWithoutAnimation || (this.isFloatBarShow = !1) + } }, (() => { + this.floatFilterBarHeight = 0 + })) + } else { + this.isFloatBarShow = !0; + this.isFloatBarShowWithoutAnimation = !0; + Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => { + this.floatFilterBarPosition = 0; + this.floatFilterBarHeight = 48 + })) + } + })) + }), Column); + this.observeComponentCreation2(((t, e) => { + If.create(); + this.filterType === FilterType.LIST_FILTER ? this.ifElseBranchUpdateFunction(0, (() => { + this.ListFilter.bind(this)() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.MultiLineFilter.bind(this)() + })) + }), If); + If.pop(); + this.AdditionFilterList.bind(this)(); + Column.pop() + } + + FloatFilterHeader(t = null) { + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.padding({ top: 8 }); + Column.width("100%"); + Column.constraintSize({ maxHeight: "80%" }); + Column.clip(!0); + Column.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + Column.opacity(.95); + Column.backgroundBlurStyle(BlurStyle.Thin); + Column.visibility(this.isFloatShowAllFilter ? Visibility.Visible : Visibility.Hidden); + Column.position({ x: 0, y: this.floatFilterPosition }); + Column.zIndex(2) + }), Column); + this.observeComponentCreation2(((t, e) => { + Scroll.create() + }), Scroll); + this.observeComponentCreation2(((t, e) => { + Column.create() + }), Column); + this.observeComponentCreation2(((t, e) => { + If.create(); + this.filterType === FilterType.LIST_FILTER ? this.ifElseBranchUpdateFunction(0, (() => { + this.ListFilter.bind(this)() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.MultiLineFilter.bind(this)() + })) + }), If); + If.pop(); + this.AdditionFilterList.bind(this)(); + Column.pop(); + Scroll.pop(); + Column.pop() + } + + FloatFilterBar(t = null) { + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.width("100%"); + Row.height(this.floatFilterBarHeight); + Row.padding({ left: 2, right: 2 }); + Row.backgroundColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + Row.opacity(.95); + Row.clip(!0); + Row.backgroundBlurStyle(BlurStyle.Thin); + Row.visibility(this.isFloatBarShow ? Visibility.Visible : Visibility.Hidden); + Row.alignItems(VerticalAlign.Bottom); + Row.position({ x: 0, y: this.floatFilterBarPosition }); + Row.zIndex(1) + }), Row); + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.backgroundColor(this.isFloatArrowBgHover ? this.floatArrowBgColor : "#00FFFFFF"); + ViewStackProcessor.visualState("focused"); + Column.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + Column.width(28); + ViewStackProcessor.visualState("normal"); + Column.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + Column.width(24); + ViewStackProcessor.visualState(); + Column.alignItems(HorizontalAlign.Center); + Column.width("100%"); + Column.height(40); + Column.onTouch((t => { + t.type === TouchType.Down ? Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.floatArrowBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }; + this.isFloatArrowBgHover = !0 + })) : t.type === TouchType.Up && Context.animateTo({ curve: SHARP_CUBIC_BEZIER, duration: 100 }, (() => { + this.isFloatArrowBgHover = !1 + })) + })); + Column.onClick((() => { + Context.animateTo({ duration: 150, curve: SHARP_CUBIC_BEZIER }, (() => { + this.isFloatBarShow = !1; + this.isFloatBarShowWithoutAnimation = !1 + })); + this.isFloatShowAllFilter = !0; + this.isFloatShowAllFilterWithoutAnimation = !0; + Context.animateTo({ curve: INTER_POLATING_SPRING, onFinish: () => { + this.floatFilterBarPosition = 0 + } }, (() => { + this.floatFilterPosition = 0; + this.floatFilterBarPosition = this.filterDynamicHeight + })) + })); + Column.onHover((t => { + t ? Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + this.floatArrowBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }; + this.isFloatArrowBgHover = !0 + })) : Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => { + this.isFloatArrowBgHover = !1 + })) + })) + }), Column); + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.height("100%"); + Row.alignItems(VerticalAlign.Center) + }), Row); + this.observeComponentCreation2(((t, e) => { + Row.create(); + Row.height(40); + Row.margin({ left: 8 }); + Row.focusable(!0) + }), Row); + this.observeComponentCreation2(((t, e) => { + Text.create(this.floatFilterBarText); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body3"], + bundleName: "", + moduleName: "" + }); + Text.constraintSize({ maxWidth: "85%" }); + Text.maxLines(1) + }), Text); + Text.pop(); + this.observeComponentCreation2(((t, e) => { + Image.create(ARROW_DOWN); + Image.width(24); + Image.height(24); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0) + }), Image); + Row.pop(); + Row.pop(); + Column.pop(); + Row.pop() + } + + initialRender() { + this.observeComponentCreation2(((t, e) => { + Stack.create({ alignContent: Alignment.Top }); + Stack.clip(!0); + Stack.onAreaChange(((t, e) => { + console.log("stack height:" + parseInt(e.height.toString(), 0)); + this.filterStackHeight = parseInt(e.height.toString(), 0) + })) + }), Stack); + this.FloatFilterBar.bind(this)(); + this.FloatFilterHeader.bind(this)(); + this.observeComponentCreation2(((t, e) => { + Column.create(); + Column.zIndex(0) + }), Column); + this.observeComponentCreation2(((t, e) => { + List.create({ initialIndex: 0 }); + List.listDirection(Axis.Vertical); + List.width("100%"); + List.height("100%"); + List.edgeEffect(EdgeEffect.Spring); + List.onScroll(((t, e) => { + if (this.isFloatShowAllFilterWithoutAnimation && e == ScrollState.Scroll) { + this.isFloatBarShowWithoutAnimation = !0; + this.isFloatShowAllFilterWithoutAnimation = !1; + Context.animateTo({ duration: 150, curve: SHARP_CUBIC_BEZIER }, (() => { + this.isFloatBarShow = !0 + })); + Context.animateTo({ curve: INTER_POLATING_SPRING, onFinish: () => { + this.isFloatShowAllFilterWithoutAnimation || (this.isFloatShowAllFilter = !1) + } }, (() => { + this.floatFilterPosition = -this.filterDynamicHeight; + this.floatFilterBarPosition = 0 + })) + } + })) + }), List); + { + const t = !0; + const e = (e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ListItem.create(o, t); + ListItem.focusable(!0); + i || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const o = (t, o) => { + e(t, o); + this.updateFuncByElmtId.set(t, e); + this.FilterHeader.bind(this)(); + ListItem.pop() + }; + this.observeComponentCreation(e); + ListItem.pop() + } + { + const t = !0; + const e = (e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ListItem.create(o, t); + ListItem.focusable(!0); + i || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const o = (t, o) => { + e(t, o); + this.updateFuncByElmtId.set(t, e); + this.container.bind(this)(); + ListItem.pop() + }; + this.observeComponentCreation(e); + ListItem.pop() + } + List.pop(); + Column.pop(); + Stack.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export default { + Filter, FilterType +}; \ No newline at end of file diff --git a/advanced_ui_component/filter/source/filter.ets b/advanced_ui_component/filter/source/filter.ets new file mode 100644 index 0000000000000000000000000000000000000000..e1edc361951e14d8d72ec921fd820fe0f11059cb --- /dev/null +++ b/advanced_ui_component/filter/source/filter.ets @@ -0,0 +1,1132 @@ +/* + * 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 measure from '@ohos.measure' +import curves from '@ohos.curves' + +const TEXT_HOT_AREA_WIDTH: number = 8 +const LIST_ROW_HEIGHT: number = 40 +const ARROW_IMG_SIZE: number = 24 +const MULTI_LINE_PADDING: number = 24 +const BAR_ANIMATION_DURATION: number = 150 +const ARROW_ANIMATION_DURATION: number = 200 +const ANIMATION_DURATION_250: number = 250 +const ANIMATION_DURATION_100: number = 100 +const FILTER_TOP_PADDING: number = 8 +const SEPARATOR_HEIGHT: number = 16 +const SEPARATOR_WIDTH: number = 1 +const FLOAT_OPACITY: number = 0.95 +const FILTER_FONT_SIZE = 12 +const FOCUS_BORDER_WIDTH = 2 +const ARROW_SHOW_DELAY = 300 +const PERCENT_100: Length = '100%' +const SHARP_CUBIC_BEZIER = curves.cubicBezierCurve(0.33, 0, 0.67, 1) +const INTER_POLATING_SPRING = curves.interpolatingSpring(0, 1, 328, 34) +const FRICTION_CUBIC_BEZIER = curves.cubicBezierCurve(0.2, 0, 0.2, 1) +const TRANS_COLOR: string = '#00FFFFFF' +const GRADIENT_WIDTH: number = 16 + + +export enum FilterType { + MULTI_LINE_FILTER, + LIST_FILTER +} + +export declare type FilterParams = { + name: ResourceStr, + options: Array +} + +export declare type FilterResult = { + name: ResourceStr, + index: number, + value: ResourceStr +} + +@Observed +class FontWeightArray extends Array { +} + +@Observed +class ResourceArray extends Array { +} + +@Observed +class BooleanArray extends Array { +} + +@Observed +export class ObservedBoolean { + public value: boolean + + constructor(value: boolean) { + this.value = value + } +} + +@Observed +class ObservedNumber { + public value: number + + constructor(value: number) { + this.value = value + } +} + +@Component +struct GradientMask { + x0: number + y0: number + x1: number + y1: number + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Column() { + Canvas(this.context2D) + .width(GRADIENT_WIDTH) + .height(LIST_ROW_HEIGHT) + .onReady(() => { + var grad = this.context2D.createLinearGradient(this.x0, this.y0, this.x1, this.y1) + grad.addColorStop(0.0, '#ffffffff') + grad.addColorStop(1, '#00ffffff') + this.context2D.fillStyle = grad + this.context2D.fillRect(0, 0, GRADIENT_WIDTH, LIST_ROW_HEIGHT) + }) + } + .width(GRADIENT_WIDTH) + .height(LIST_ROW_HEIGHT) + } +} + +@Component +struct ListFilterRow { + @ObjectLink colorRow: ResourceArray + @ObjectLink fontWeightRow: FontWeightArray + @ObjectLink backgroundColorRow: ResourceArray + @ObjectLink isBackgroundHoverRow: BooleanArray + filterRow: FilterParams + onItemClick: (colIndex: number) => void + rowIndex: number + + build() { + Stack({ alignContent: Alignment.End }) { + Stack({ alignContent: Alignment.Start }) { + List() { + ForEach(this.filterRow.options, (option, colIndex?: number) => { + if (colIndex == 0) { + ListItem() + .width($r('sys.float.ohos_id_max_padding_start')) + .height(LIST_ROW_HEIGHT) + } + ListItem() { + Text(option.toString()) + .fontSize($r('sys.float.ohos_id_text_size_body3')) + .fontColor(this.colorRow[colIndex]) + .fontWeight(this.fontWeightRow[colIndex]) + .focusable(true) + } + .height(PERCENT_100) + .onClick(() => { + this.onItemClick(colIndex) + }) + .focusable(true) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FOCUS_BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + .padding({ + left: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH, + right: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + .padding({ left: TEXT_HOT_AREA_WIDTH, right: TEXT_HOT_AREA_WIDTH }) + } + }) + .backgroundColor(this.isBackgroundHoverRow[colIndex] ? this.backgroundColorRow[colIndex] : TRANS_COLOR) + .onHover((isHover: boolean) => { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + if (isHover) { + this.backgroundColorRow[colIndex] = $r('sys.color.ohos_id_color_hover') + this.isBackgroundHoverRow[colIndex] = true + } else { + this.isBackgroundHoverRow[colIndex] = false + } + }) + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.backgroundColorRow[colIndex] = $r('sys.color.ohos_id_color_click_effect') + this.isBackgroundHoverRow[colIndex] = true + }) + } else if (event.type === TouchType.Up) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.isBackgroundHoverRow[colIndex] = false + }) + } + }) + .margin({ left: colIndex == 0 ? -TEXT_HOT_AREA_WIDTH : 0 }) + .tabIndex(colIndex == 0 ? this.rowIndex : -1) + }) + } + .listDirection(Axis.Horizontal) + .scrollBar(BarState.Off) + .width(PERCENT_100) + .height(LIST_ROW_HEIGHT) + .align(Alignment.Start) + + GradientMask({ + x0: 0, + y0: LIST_ROW_HEIGHT / 2, + x1: GRADIENT_WIDTH, + y1: LIST_ROW_HEIGHT / 2 + }) + } + GradientMask({ + x0: GRADIENT_WIDTH, + y0: LIST_ROW_HEIGHT / 2, + x1: 0, + y1: LIST_ROW_HEIGHT / 2 + }) + } + } +} + +@Component +struct MultiFilterRow { + @ObjectLink colorRow: ResourceArray + @ObjectLink fontWeightRow: FontWeightArray + @ObjectLink backgroundColorRow: ResourceArray + @ObjectLink isBackgroundHoverRow: BooleanArray + @ObjectLink twoLineModeItemNumRow: ObservedNumber + @ObjectLink twoLineModeItemNumRecordRow: ObservedNumber + @ObjectLink arrowShowStateRow: ObservedBoolean + @ObjectLink isArrowIconDown: ObservedBoolean + filterRow: FilterParams = null + onItemClick: (colIndex: number) => void + @State arrowBgColorRow: Resource = $r('sys.color.ohos_id_color_hover') + @State isArrowBgHoverRow: boolean = false + private filterColumnWidth: number = 0 + private lastFilterColumnWidth: number = 0 + private rowIndex: number = 0 + + private calcMultiFilterRowItemNum() { + var curLineRetainWidth = this.filterColumnWidth - vp2px(MULTI_LINE_PADDING) + var curLineSum = 0 + var curLine = 1 + for (var i = 0; i < this.filterRow.options.length; i++) { + let option = this.filterRow.options[i] + let itemWidth = measure.measureText({ + textContent: option, + fontSize: FILTER_FONT_SIZE + }) + if (i === 0) { + continue + } else { + itemWidth += vp2px(TEXT_HOT_AREA_WIDTH * 2) + } + if (curLineRetainWidth - itemWidth >= 0) { + curLineRetainWidth -= itemWidth + curLineSum += 1 + } else { + if (curLineSum === 0) { + curLineSum++ + curLineRetainWidth = 0 + } + if (curLine === 1) { + curLine += 1 + curLineRetainWidth = this.filterColumnWidth - vp2px(ARROW_IMG_SIZE) - vp2px(MULTI_LINE_PADDING) + i-- + } else { + break + } + } + } + return curLineSum + } + + @Builder DownAndUpArrow() { + Row() { + Image(this.isArrowIconDown.value ? $r('sys.media.ohos_ic_public_arrow_down') : $r('sys.media.ohos_ic_public_arrow_up')) + .width(ARROW_IMG_SIZE) + .height(LIST_ROW_HEIGHT) + .fillColor($r('sys.color.ohos_id_color_tertiary')) + .focusable(true) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FOCUS_BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + .width(ARROW_IMG_SIZE + FOCUS_BORDER_WIDTH * 2) + .offset({ x: -FOCUS_BORDER_WIDTH }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + .width(ARROW_IMG_SIZE) + .offset({ x: 0 }) + } + }) + .tabIndex(-1) + } + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked') + }) + .height(LIST_ROW_HEIGHT) + .width(ARROW_IMG_SIZE) + .backgroundColor(this.isArrowBgHoverRow ? this.arrowBgColorRow : TRANS_COLOR) + .focusable(true) + .visibility(this.arrowShowStateRow.value ? Visibility.Visible : Visibility.Hidden) + .onHover((isHover: boolean) => { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + if (isHover) { + this.arrowBgColorRow = $r('sys.color.ohos_id_color_hover') + this.isArrowBgHoverRow = true + } else { + this.isArrowBgHoverRow = false + } + }) + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.arrowBgColorRow = $r('sys.color.ohos_id_color_click_effect') + this.isArrowBgHoverRow = true + }) + } else if (event.type === TouchType.Up) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.isArrowBgHoverRow = false + }) + } + }) + .onClick(() => { + if (this.isArrowIconDown.value) { + this.isArrowIconDown.value = false + this.arrowShowStateRow.value = false + animateTo({ + curve: INTER_POLATING_SPRING, + }, () => { + this.twoLineModeItemNumRow.value = this.filterRow.options.length + }) + + animateTo({ + delay: 300, + duration: ARROW_ANIMATION_DURATION, + curve: SHARP_CUBIC_BEZIER + }, () => { + this.arrowShowStateRow.value = true + }) + } else { + this.isArrowIconDown.value = true + this.arrowShowStateRow.value = false + + animateTo({ + curve: INTER_POLATING_SPRING, + }, () => { + this.twoLineModeItemNumRow.value = this.twoLineModeItemNumRecordRow.value + }) + animateTo({ + delay: ARROW_SHOW_DELAY, + duration: ARROW_ANIMATION_DURATION, + curve: SHARP_CUBIC_BEZIER + }, () => { + this.arrowShowStateRow.value = true + }) + } + + }) + + } + + build() { + Row() { + if (this.filterRow.options && this.filterRow.options.length > 0) { + Text(this.filterRow.options[0].toString()) + .height(LIST_ROW_HEIGHT) + .width(px2vp(measure.measureText({ + textContent: this.filterRow.options[0].toString(), + fontSize: FILTER_FONT_SIZE + })) + (TEXT_HOT_AREA_WIDTH * 2)) + .margin({ left: -TEXT_HOT_AREA_WIDTH }) + .fontSize($r('sys.float.ohos_id_text_size_body3')) + .fontColor(this.colorRow[0]) + .fontWeight(this.fontWeightRow[0]) + .backgroundColor(this.isBackgroundHoverRow[0] ? this.backgroundColorRow[0] : TRANS_COLOR) + .onClick(() => { + this.onItemClick(0) + }) + .focusable(true) + .onHover((isHover: boolean) => { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + if (isHover) { + this.backgroundColorRow[0] = $r('sys.color.ohos_id_color_hover') + this.isBackgroundHoverRow[0] = true + } else { + this.isBackgroundHoverRow[0] = false + } + }) + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.backgroundColorRow[0] = $r('sys.color.ohos_id_color_click_effect') + this.isBackgroundHoverRow[0] = true + }) + } else if (event.type === TouchType.Up) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.isBackgroundHoverRow[0] = false + }) + } + }) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FOCUS_BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + .padding({ + left: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH, + right: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + .padding({ left: TEXT_HOT_AREA_WIDTH, right: TEXT_HOT_AREA_WIDTH }) + } + }) + .tabIndex(this.rowIndex) + } + Row() { + Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) { + ForEach(this.filterRow.options.slice(0, this.twoLineModeItemNumRow.value + 1), (option, colIndex?: number) => { + if (colIndex > 0) { + Text(option.toString()) + .transition(TransitionEffect.OPACITY) + .fontSize($r('sys.float.ohos_id_text_size_body3')) + .height(LIST_ROW_HEIGHT) + .fontColor(this.colorRow[colIndex]) + .fontWeight(this.fontWeightRow[colIndex]) + .backgroundColor(this.isBackgroundHoverRow[colIndex] ? this.backgroundColorRow[colIndex] : TRANS_COLOR) + .onClick(() => { + this.onItemClick(colIndex) + }) + .onHover((isHover: boolean) => { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + if (isHover) { + this.backgroundColorRow[colIndex] = $r('sys.color.ohos_id_color_hover') + this.isBackgroundHoverRow[colIndex] = true + } else { + this.isBackgroundHoverRow[colIndex] = false + } + }) + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.backgroundColorRow[colIndex] = $r('sys.color.ohos_id_color_click_effect') + this.isBackgroundHoverRow[colIndex] = true + }) + } else if (event.type === TouchType.Up) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.isBackgroundHoverRow[colIndex] = false + }) + } + }) + .focusable(true) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FOCUS_BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + .padding({ + left: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH, + right: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + .padding({ left: TEXT_HOT_AREA_WIDTH, right: TEXT_HOT_AREA_WIDTH }) + } + }) + .tabIndex(-1) + } + }) + if (this.arrowShowStateRow.value) { + this.DownAndUpArrow() + } + }.alignSelf(ItemAlign.Stretch) + }.width(PERCENT_100) + .padding({ right: $r('sys.float.ohos_id_max_padding_end') }) + .onAreaChange((_oldValue: Area, newValue: Area) => { + this.filterColumnWidth = vp2px(parseInt(newValue.width.toString(), 0)) + if (this.twoLineModeItemNumRow.value === 0) { + var curLineSum = this.calcMultiFilterRowItemNum() + this.twoLineModeItemNumRow.value = curLineSum + this.twoLineModeItemNumRecordRow.value = curLineSum + if (curLineSum < this.filterRow.options.length - 1) { + this.arrowShowStateRow.value = true + } else { + this.arrowShowStateRow.value = false + } + }else if (this.filterColumnWidth !== this.lastFilterColumnWidth){ + var curLineSum = this.calcMultiFilterRowItemNum() + if (curLineSum < this.filterRow.options.length - 1) { + if (!this.arrowShowStateRow.value || this.isArrowIconDown.value) { + this.arrowShowStateRow.value = true + this.isArrowIconDown.value = true + this.twoLineModeItemNumRow.value = curLineSum + } + } else { + this.arrowShowStateRow.value = false + this.isArrowIconDown.value = false + this.twoLineModeItemNumRow.value = curLineSum + } + this.twoLineModeItemNumRecordRow.value = curLineSum + } + this.lastFilterColumnWidth = this.filterColumnWidth + }) + + }.width(PERCENT_100) + .alignItems(VerticalAlign.Top) + .padding({ left: $r('sys.float.ohos_id_max_padding_start'), right: $r('sys.float.ohos_id_max_padding_end') }) + } +} + + +@Component +export struct Filter { + @BuilderParam container: () => void + @Prop multiFilters: Array = [] + @Prop additionFilters: FilterParams = null + onFilterChanged: (filterResults: Array) => void = null + @Prop filterType: FilterType = FilterType.LIST_FILTER + private selectedFilters: Array = null + @State private colorArr: Array = null + @State private fontWeightArr: Array = null + @State private backgroundColorArr: Array = null + @State private isBackgroundHover: Array = null + @State private floatArrowBgColor: Resource = null + @State private isFloatArrowBgHover: boolean = false + @State private isArrowIconDownArr: Array = null + @State private additionColorArr: Array = null + @State private additionFontWeightArr: Array = null + @State private additionBackgroundColorArr: Array = null + @State private isAdditionBackgroundHover: Array = null + @State colorRefresh: boolean = false + @State isFloatBarShow: boolean = false + isFloatBarShowWithoutAnimation: boolean = false + @State isFloatShowAllFilter: boolean = false + isFloatShowAllFilterWithoutAnimation: boolean = false + @State floatFilterPosition: number = 0 + @State floatFilterBarHeight: number = 0 + @State floatFilterBarPosition: number = 0 + filterDynamicHeight: number = 0 + @State twoLineModeItemNum: Array = null + @State twoLineModeItemNumRecord: Array = null + @State downArrowShowState: Array = null + @State floatFilterBarText: string = '' + + textColor(rowIndex: number, colIndex: number) { + if (this.selectedFilters.length > rowIndex && this.selectedFilters[rowIndex].index === colIndex) { + return $r('sys.color.ohos_id_color_text_primary_activated') + } + return $r('sys.color.ohos_id_color_text_primary') + } + + aboutToAppear() { + this.initParams() + } + + private filterItemClick(rowIndex: number, colIndex: number) { + let selectedFilterValue = this.multiFilters[rowIndex].options[colIndex] + if (colIndex != this.selectedFilters[rowIndex].index) { + this.colorArr[rowIndex][colIndex] = $r('sys.color.ohos_id_color_text_primary_activated') + this.colorArr[rowIndex][this.selectedFilters[rowIndex].index] = $r('sys.color.ohos_id_color_text_primary') + this.fontWeightArr[rowIndex][colIndex] = FontWeight.Medium + this.fontWeightArr[rowIndex][this.selectedFilters[rowIndex].index] = FontWeight.Regular + this.colorRefresh = !this.colorRefresh + this.selectedFilters[rowIndex].value = selectedFilterValue + this.selectedFilters[rowIndex].index = colIndex + this.onFilterChanged && this.onFilterChanged(this.selectedFilters) + } + this.refreshFloatFilterBarText() + } + + private refreshFloatFilterBarText() { + this.floatFilterBarText = '' + for (let i = 0; i < this.selectedFilters.length; i++) { + if (this.selectedFilters[i].value !== null) { + if (i === 0) { + this.floatFilterBarText += this.selectedFilters[i].value + }else { + this.floatFilterBarText += '/' + this.selectedFilters[i].value + } + } + } + } + + private initParams() { + if (!this.selectedFilters) { + this.selectedFilters = [] + for (let filter of this.multiFilters) { + var result: FilterResult = { name: filter.name, index: -1, value: null } + if (filter.options.length > 0) { + result.index = 0 + result.value = filter.options[0] + } + this.selectedFilters.push(result) + } + if (this.additionFilters && this.additionFilters.name) { + var result: FilterResult = { name: this.additionFilters.name, index: -1, value: null } + this.selectedFilters.push(result) + } + this.refreshFloatFilterBarText(); + } + if (!this.colorArr) { + this.colorArr = [] + this.backgroundColorArr = [] + this.isBackgroundHover = [] + this.fontWeightArr = [] + this.isArrowIconDownArr = [] + this.floatArrowBgColor = $r('sys.color.ohos_id_color_background') + for (let filter of this.multiFilters) { + var colorRow = new ResourceArray() + var fontWeightRow = new FontWeightArray() + var backgroundColorRow = new ResourceArray() + var isBackgroundHoverRow = new BooleanArray() + for (let index of filter.options.keys()) { + if (index === 0) { + colorRow.push($r('sys.color.ohos_id_color_text_primary_activated')) + fontWeightRow.push(FontWeight.Medium) + } else { + colorRow.push($r('sys.color.ohos_id_color_text_primary')) + fontWeightRow.push(FontWeight.Regular) + } + backgroundColorRow.push($r('sys.color.ohos_id_color_hover')) + } + this.colorArr.push(colorRow) + this.fontWeightArr.push(fontWeightRow) + this.backgroundColorArr.push(backgroundColorRow) + this.isBackgroundHover.push(isBackgroundHoverRow) + this.isArrowIconDownArr.push(new ObservedBoolean(true)) + } + } + if (this.additionFilters && this.additionFilters.options) { + this.additionColorArr = [] + this.additionFontWeightArr = [] + this.additionBackgroundColorArr = [] + this.isAdditionBackgroundHover = [] + for (let i = 0; i < this.additionFilters.options.length; i++) { + this.additionColorArr.push($r('sys.color.ohos_id_color_text_primary')) + this.additionFontWeightArr.push(FontWeight.Regular) + this.additionBackgroundColorArr.push($r('sys.color.ohos_id_color_hover')) + this.isAdditionBackgroundHover.push(false) + } + } + if (!this.twoLineModeItemNum) { + this.twoLineModeItemNum = [] + this.twoLineModeItemNumRecord = [] + this.downArrowShowState = [] + for (let i = 0; i < this.multiFilters.length; i++) { + this.twoLineModeItemNum.push(new ObservedNumber(0)) + this.twoLineModeItemNumRecord.push(new ObservedNumber(0)) + this.downArrowShowState.push(new ObservedBoolean(false)) + } + } + } + + @Builder ListFilter() { + Column() { + ForEach(this.multiFilters, (filter: FilterParams, rowIndex?: number) => { + ListFilterRow({ + colorRow: this.colorArr[rowIndex], + fontWeightRow: this.fontWeightArr[rowIndex], + backgroundColorRow: this.backgroundColorArr[rowIndex], + isBackgroundHoverRow: this.isBackgroundHover[rowIndex], + filterRow: filter, + onItemClick: (colIndex: number) => { + this.filterItemClick(rowIndex, colIndex); + }, + rowIndex: rowIndex + }) + }) + }.width(PERCENT_100) + .align(Alignment.Start) + .onAreaChange((_oldValue: Area, newValue: Area) => { + if (!this.isFloatShowAllFilterWithoutAnimation && !this.isFloatBarShowWithoutAnimation) { + if (this.additionFilters != null) { + this.filterDynamicHeight = parseInt(newValue.height.toString(), 0) + LIST_ROW_HEIGHT + FILTER_TOP_PADDING + } else { + this.filterDynamicHeight = parseInt(newValue.height.toString(), 0) + FILTER_TOP_PADDING + } + this.floatFilterPosition = -this.filterDynamicHeight + } + }) + } + + @Builder MultiLineFilter() { + Column() { + ForEach(this.multiFilters, (filterItem: FilterParams, rowIndex?: number) => { + MultiFilterRow({ + colorRow: this.colorArr[rowIndex], + fontWeightRow: this.fontWeightArr[rowIndex], + backgroundColorRow: this.backgroundColorArr[rowIndex], + isBackgroundHoverRow: this.isBackgroundHover[rowIndex], + arrowShowStateRow: this.downArrowShowState[rowIndex], + twoLineModeItemNumRow: this.twoLineModeItemNum[rowIndex], + twoLineModeItemNumRecordRow: this.twoLineModeItemNumRecord[rowIndex], + isArrowIconDown: this.isArrowIconDownArr[rowIndex], + filterRow: filterItem, + onItemClick: (colIndex: number) => { + this.filterItemClick(rowIndex, colIndex); + }, + rowIndex: rowIndex + }) + }) + }.width(PERCENT_100) + .onAreaChange((_oldValue: Area, newValue: Area) => { + if (this.additionFilters != null) { + this.filterDynamicHeight = parseInt(newValue.height.toString(), 0) + LIST_ROW_HEIGHT + FILTER_TOP_PADDING + } else { + this.filterDynamicHeight = parseInt(newValue.height.toString(), 0) + FILTER_TOP_PADDING + } + if (!this.isFloatBarShowWithoutAnimation && !this.isFloatShowAllFilterWithoutAnimation) { + this.floatFilterPosition = -this.filterDynamicHeight + } + }) + } + + private additionItemClick(index: number) { + let additionRowIndex = this.multiFilters.length + if (this.selectedFilters[additionRowIndex].index != index) { + if (this.selectedFilters[additionRowIndex].index === -1) { + this.additionColorArr[index] = $r('sys.color.ohos_id_color_text_primary_activated') + this.additionFontWeightArr[index] = FontWeight.Medium + this.selectedFilters[additionRowIndex].value = this.additionFilters.options[index] + this.selectedFilters[additionRowIndex].index = index + } else { + let lastIndex = this.selectedFilters[additionRowIndex].index + this.additionColorArr[lastIndex] = $r('sys.color.ohos_id_color_text_primary') + this.additionColorArr[index] = $r('sys.color.ohos_id_color_text_primary_activated') + this.additionFontWeightArr[lastIndex] = FontWeight.Regular + this.additionFontWeightArr[index] = FontWeight.Medium + this.selectedFilters[additionRowIndex].value = this.additionFilters.options[index] + this.selectedFilters[additionRowIndex].index = index + } + } else { + this.additionColorArr[index] = $r('sys.color.ohos_id_color_text_primary') + this.additionFontWeightArr[index] = FontWeight.Regular + this.selectedFilters[additionRowIndex].value = null + this.selectedFilters[additionRowIndex].index = -1 + } + this.onFilterChanged && this.onFilterChanged(this.selectedFilters) + this.colorRefresh = !this.colorRefresh + this.refreshFloatFilterBarText() + } + + @Builder AdditionFilterList() { + if (this.additionFilters && this.additionFilters.name && this.additionFilters.options && this.additionFilters.options.length != 0) { + Stack({ alignContent: Alignment.End }) { + Stack({ alignContent: Alignment.Start }) { + List() { + ListItem() { + Row() { + Text(this.additionFilters.name.toString()) + .fontSize($r('sys.float.ohos_id_text_size_body3')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .margin({ left: TEXT_HOT_AREA_WIDTH, right: TEXT_HOT_AREA_WIDTH }) + .padding({ left: $r('sys.float.ohos_id_max_padding_start')}) + Row() + .width(SEPARATOR_WIDTH) + .height(SEPARATOR_HEIGHT) + .backgroundColor($r('sys.color.ohos_id_color_list_separator')) + } + }.height(PERCENT_100) + .margin({ left: -TEXT_HOT_AREA_WIDTH }) + + ForEach(this.additionFilters.options, (option, index?: number) => { + ListItem() { + Text(option.toString()) + .fontSize($r('sys.float.ohos_id_text_size_body3')) + .fontColor(this.additionColorArr[index]) + .fontWeight(this.additionFontWeightArr[index]) + .focusable(true) + } + .height(PERCENT_100) + .backgroundColor(this.isAdditionBackgroundHover[index] ? this.additionBackgroundColorArr[index] : TRANS_COLOR) + .onHover((isHover: boolean) => { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + if (isHover) { + this.additionBackgroundColorArr[index] = $r('sys.color.ohos_id_color_hover') + this.isAdditionBackgroundHover[index] = true + } else { + this.isAdditionBackgroundHover[index] = false + } + }) + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.additionBackgroundColorArr[index] = $r('sys.color.ohos_id_color_click_effect') + this.isAdditionBackgroundHover[index] = true + }) + } else if (event.type === TouchType.Up) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.isAdditionBackgroundHover[index] = false + }) + } + }) + .focusable(true) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FOCUS_BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + .padding({ + left: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH, + right: TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + .padding({ left: TEXT_HOT_AREA_WIDTH, right: TEXT_HOT_AREA_WIDTH }) + } + }) + .onClick(() => { + this.additionItemClick(index) + }) + .tabIndex(index == 0 ? this.multiFilters.length : -1) + }) + } + .listDirection(Axis.Horizontal) + .scrollBar(BarState.Off) + .width(PERCENT_100) + .height(LIST_ROW_HEIGHT) + + GradientMask({ + x0: 0, + y0: LIST_ROW_HEIGHT / 2, + x1: GRADIENT_WIDTH, + y1: LIST_ROW_HEIGHT / 2 + }) + } + GradientMask({ + x0: GRADIENT_WIDTH, + y0: LIST_ROW_HEIGHT / 2, + x1: 0, + y1: LIST_ROW_HEIGHT / 2 + }) + } + } + + } + + @Builder FilterHeader() { + Column() { + if (this.filterType === FilterType.LIST_FILTER) { + this.ListFilter() + } else { + this.MultiLineFilter() + } + this.AdditionFilterList() + }.padding({ top: FILTER_TOP_PADDING }) + .onVisibleAreaChange([0.0, 1.0], (_isVisible: boolean, currentRatio: number) => { + if (currentRatio > 0) { + this.isFloatShowAllFilter = false + this.isFloatShowAllFilterWithoutAnimation = false + this.isFloatBarShowWithoutAnimation = false + animateTo({ + curve: INTER_POLATING_SPRING, + onFinish: () => { + if (!this.isFloatBarShowWithoutAnimation) { + this.isFloatBarShow = false + } + } + }, () => { + this.floatFilterBarHeight = 0 + }) + } else { + this.isFloatBarShow = true + this.isFloatBarShowWithoutAnimation = true + animateTo({ + curve: INTER_POLATING_SPRING + }, () => { + this.floatFilterBarPosition = 0 + this.floatFilterBarHeight = LIST_ROW_HEIGHT + FILTER_TOP_PADDING + }) + } + }) + } + + @Builder FloatFilterHeader() { + Column() { + Scroll() { + Column() { + if (this.filterType === FilterType.LIST_FILTER) { + this.ListFilter() + } else { + this.MultiLineFilter() + } + this.AdditionFilterList() + } + } + } + .padding({ top: FILTER_TOP_PADDING }) + .width(PERCENT_100) + .constraintSize({ maxHeight: '80%' }) + .clip(true) + .backgroundColor($r('sys.color.ohos_id_color_background')) + .opacity(FLOAT_OPACITY) + .backgroundBlurStyle(BlurStyle.Thin) + .visibility(this.isFloatShowAllFilter ? Visibility.Visible : Visibility.Hidden) + .position({ x: 0, y: this.floatFilterPosition }) + .zIndex(2) + } + + @Builder FloatFilterBar() { + + Row() { + Column() { + Row() { + Row() { + Text(this.floatFilterBarText) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) + .fontSize($r('sys.float.ohos_id_text_size_body3')) + .constraintSize({ maxWidth: '85%' }) + .maxLines(1) + + Image($r('sys.media.ohos_ic_public_arrow_down')) + .width(ARROW_IMG_SIZE) + .height(ARROW_IMG_SIZE) + .fillColor($r('sys.color.ohos_id_color_text_primary_activated')) + .focusable(true) + } + .height(LIST_ROW_HEIGHT) + .margin({ left: 8 }) + .focusable(true) + }.height(PERCENT_100) + .alignItems(VerticalAlign.Center) + } + .backgroundColor(this.isFloatArrowBgHover ? this.floatArrowBgColor : TRANS_COLOR) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FOCUS_BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + .width(ARROW_IMG_SIZE + FOCUS_BORDER_WIDTH * 2) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + .width(ARROW_IMG_SIZE) + } + }) + .alignItems(HorizontalAlign.Center) + .width(PERCENT_100) + .height(LIST_ROW_HEIGHT) + .onTouch((event) => { + if (event.type === TouchType.Down) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.floatArrowBgColor = $r('sys.color.ohos_id_color_click_effect') + this.isFloatArrowBgHover = true + }) + } else if (event.type === TouchType.Up) { + animateTo({ + curve: SHARP_CUBIC_BEZIER, + duration: ANIMATION_DURATION_100 + }, () => { + this.isFloatArrowBgHover = false + }) + } + }) + .onClick(() => { + animateTo({ + duration: BAR_ANIMATION_DURATION, + curve: SHARP_CUBIC_BEZIER + }, () => { + this.isFloatBarShow = false + this.isFloatBarShowWithoutAnimation = false + }) + this.isFloatShowAllFilter = true + this.isFloatShowAllFilterWithoutAnimation = true + animateTo({ + curve: INTER_POLATING_SPRING, + onFinish: () => { + this.floatFilterBarPosition = 0 + } + }, () => { + this.floatFilterPosition = 0 + this.floatFilterBarPosition = this.filterDynamicHeight + }) + }) + .onHover((isHover: boolean) => { + if (isHover) { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + this.floatArrowBgColor = $r('sys.color.ohos_id_color_hover') + this.isFloatArrowBgHover = true + }) + } else { + animateTo({ + curve: FRICTION_CUBIC_BEZIER, + duration: ANIMATION_DURATION_250 + }, () => { + this.isFloatArrowBgHover = false + }) + } + }) + } + .width(PERCENT_100) + .height(this.floatFilterBarHeight) + .padding({ left: FOCUS_BORDER_WIDTH, right: FOCUS_BORDER_WIDTH}) + .backgroundColor($r('sys.color.ohos_id_color_background')) + .opacity(FLOAT_OPACITY) + .clip(true) + .backgroundBlurStyle(BlurStyle.Thin) + .visibility(this.isFloatBarShow ? Visibility.Visible : Visibility.Hidden) + .alignItems(VerticalAlign.Bottom) + .position({ x: 0, y: this.floatFilterBarPosition }) + .zIndex(1) + } + + build() { + Stack({ alignContent: Alignment.Top }) { + this.FloatFilterBar(); + this.FloatFilterHeader(); + Column() { + List({ initialIndex: 0 }) { + ListItem() { + this.FilterHeader() + }.focusable(true) + + ListItem() { + this.container() + }.focusable(true) + } + .listDirection(Axis.Vertical) + .width(PERCENT_100) + .height(PERCENT_100) + .edgeEffect(EdgeEffect.Spring) + .onScroll((_scrollOffset: number, scrollState: ScrollState) => { + if (this.isFloatShowAllFilterWithoutAnimation && scrollState == ScrollState.Scroll) { + this.isFloatBarShowWithoutAnimation = true + this.isFloatShowAllFilterWithoutAnimation = false + animateTo({ + duration: BAR_ANIMATION_DURATION, + curve: SHARP_CUBIC_BEZIER + }, () => { + this.isFloatBarShow = true + }) + + animateTo({ + curve: INTER_POLATING_SPRING, + onFinish: () => { + if (!this.isFloatShowAllFilterWithoutAnimation) { + this.isFloatShowAllFilter = false + } + } + }, () => { + this.floatFilterPosition = -this.filterDynamicHeight + this.floatFilterBarPosition = 0 + }) + } + }) + }.zIndex(0) + }.clip(true) + } +} \ No newline at end of file diff --git a/advanced_ui_component/progressbutton/interfaces/BUILD.gn b/advanced_ui_component/progressbutton/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..f51519afb6a986a2ac0b242abd34c90d41acf2d7 --- /dev/null +++ b/advanced_ui_component/progressbutton/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_progressbutton_abc") { + src_js = rebase_path("progressbutton.js") + dst_file = rebase_path(target_out_dir + "/progressbutton.abc") + in_puts = [ "progressbutton.js" ] + out_puts = [ target_out_dir + "/progressbutton.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("progressbutton_abc") { + input = get_label_info(":gen_progressbutton_abc", "target_out_dir") + + "/progressbutton.abc" + output = target_out_dir + "/progressbutton_abc.o" + dep = ":gen_progressbutton_abc" +} + +gen_obj("progressbutton_abc_preview") { + input = get_label_info(":gen_progressbutton_abc", "target_out_dir") + + "/progressbutton.abc" + output = target_out_dir + "/progressbutton_abc.c" + snapshot_dep = [ ":gen_progressbutton_abc" ] +} + +ohos_shared_library("progressbutton") { + sources = [ "progressbutton.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_progressbutton_abc_preview" ] + } else { + deps = [ ":progressbutton_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/progressbutton/interfaces/progressbutton.cpp b/advanced_ui_component/progressbutton/interfaces/progressbutton.cpp new file mode 100644 index 0000000000000000000000000000000000000000..87d778bbd04ac0b421e0cb78963e729bc44d5635 --- /dev/null +++ b/advanced_ui_component/progressbutton/interfaces/progressbutton.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_progressbutton_abc_start[]; +extern const char _binary_progressbutton_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_ProgressButton_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_progressbutton_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_progressbutton_abc_end - _binary_progressbutton_abc_start; + } +} + +/* + * Module define + */ +static napi_module ProgressButtonModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.ProgressButton", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void ProgressButtonRegisterModule(void) +{ + napi_module_register(&ProgressButtonModule); +} diff --git a/advanced_ui_component/progressbutton/interfaces/progressbutton.js b/advanced_ui_component/progressbutton/interfaces/progressbutton.js new file mode 100644 index 0000000000000000000000000000000000000000..5b6565ca56609a922021f39d27e3eadb065740e3 --- /dev/null +++ b/advanced_ui_component/progressbutton/interfaces/progressbutton.js @@ -0,0 +1,228 @@ +/* + * 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 EMPTY_STRING = ''; +const MAX_PROGRESS = 100; +const MAX_PERCENTAGE = '100%'; +const MIN_PERCENTAGE = '0%'; +const TEXT_OPACITY = 0.4; +const BUTTON_NORMARL_WIDTH = 44; +const BUTTON_NORMARL_HEIGHT = 28; +const BUTTON_BORDER_RADIUS = 14; +const BUTTON_BORDER_WIDTH = 0.5; + +export class ProgressButton extends ViewPU { + constructor(e, t, s, r = -1) { + super(e, s, r); + this.__progress = new SynchedPropertySimpleOneWayPU(t.progress, this, 'progress'); + this.__textProgress = new ObservedPropertySimplePU('', this, 'textProgress'); + this.__content = new SynchedPropertySimpleOneWayPU(t.content, this, 'content'); + this.__isLoading = new ObservedPropertySimplePU(!1, this, 'isLoading'); + this.__enable = new SynchedPropertySimpleOneWayPU(t.enable, this, 'enable'); + this.progressButtonWidth = 44; + this.clickCallback = null; + this.setInitiallyProvidedValue(t); + this.declareWatch('progress', this.getProgressContext); + } + + setInitiallyProvidedValue(e) { + void 0 !== e.textProgress && (this.textProgress = e.textProgress); + void 0 !== e.content ? this.__content.set(e.content) : this.__content.set(''); + void 0 !== e.isLoading && (this.isLoading = e.isLoading); + void 0 !== e.enable ? this.__enable.set(e.enable) : this.__enable.set(!0); + void 0 !== e.progressButtonWidth && (this.progressButtonWidth = e.progressButtonWidth); + void 0 !== e.clickCallback && (this.clickCallback = e.clickCallback); + } + + updateStateVars(e) { + this.__progress.reset(e.progress); + this.__content.reset(e.content); + this.__enable.reset(e.enable); + } + + purgeVariableDependenciesOnElmtId(e) { + this.__progress.purgeDependencyOnElmtId(e); + this.__textProgress.purgeDependencyOnElmtId(e); + this.__content.purgeDependencyOnElmtId(e); + this.__isLoading.purgeDependencyOnElmtId(e); + this.__enable.purgeDependencyOnElmtId(e); + } + + aboutToBeDeleted() { + this.__progress.aboutToBeDeleted(); + this.__textProgress.aboutToBeDeleted(); + this.__content.aboutToBeDeleted(); + this.__isLoading.aboutToBeDeleted(); + this.__enable.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + get progress() { + return this.__progress.get(); + } + + set progress(e) { + this.__progress.set(e); + } + + get textProgress() { + return this.__textProgress.get(); + } + + set textProgress(e) { + this.__textProgress.set(e); + } + + get content() { + return this.__content.get(); + } + + set content(e) { + this.__content.set(e); + } + + get isLoading() { + return this.__isLoading.get(); + } + + set isLoading(e) { + this.__isLoading.set(e); + } + + get enable() { + return this.__enable.get(); + } + + set enable(e) { + this.__enable.set(e); + } + + getButtonProgress() { + return this.progress < 0 ? 0 : this.progress > MAX_PROGRESS ? MAX_PROGRESS : this.progress; + } + + getProgressContext() { + if (this.progress < 0) { + this.isLoading = !1; + this.textProgress = '0%'; + } else if (this.progress >= MAX_PROGRESS) { + this.isLoading = !1; + this.textProgress = '100%'; + } else { + this.isLoading = !0; + this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%'; + } + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Button.createWithChild(); + Button.borderRadius(BUTTON_BORDER_RADIUS); + Button.clip(!1); + Button.hoverEffect(HoverEffect.None); + Button.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_foreground_contrary'], + bundleName: '', + moduleName: '' + }); + Button.constraintSize({ minWidth: 44 }); + Button.width(this.progressButtonWidth < BUTTON_NORMARL_WIDTH ? BUTTON_NORMARL_WIDTH : this.progressButtonWidth); + Button.stateEffect(this.enable); + Button.onClick((() => { + if (this.enable) { + this.progress < MAX_PROGRESS && (this.isLoading = !this.isLoading); + this.clickCallback && this.clickCallback(); + } + })); + t || Button.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create(); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS, style: ProgressStyle.Capsule }); + Progress.height(BUTTON_NORMARL_HEIGHT); + Progress.borderRadius(BUTTON_BORDER_RADIUS); + Progress.width('100%'); + Progress.hoverEffect(HoverEffect.None); + Progress.clip(!1); + Progress.enabled(this.enable); + Progress.color('#330A59F7'); + t || Progress.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.isLoading ? this.textProgress : this.content); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button3'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '', + moduleName: '' + }); + Text.maxLines(1); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.padding({ left: 8, right: 8 }); + Text.opacity(this.enable ? 1 : TEXT_OPACITY); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.backgroundColor(Color.Transparent); + Row.border({ width: 1, color: '#330A59F7'}); + Row.height(28); + Row.borderRadius(14); + Row.width('100%'); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Row.pop(); + Stack.pop(); + Button.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} +export default { ProgressButton }; \ No newline at end of file diff --git a/advanced_ui_component/progressbutton/source/progressbutton.ets b/advanced_ui_component/progressbutton/source/progressbutton.ets new file mode 100644 index 0000000000000000000000000000000000000000..18e1849ee62a1a5a25f384af8007626f70819fc9 --- /dev/null +++ b/advanced_ui_component/progressbutton/source/progressbutton.ets @@ -0,0 +1,99 @@ +/* + * 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 EMPTY_STRING: string = '' +const MAX_PROGRESS: number = 100 +const MAX_PERCENTAGE: string = '100%' +const MIN_PERCENTAGE: string = '0%' + +@Component +export struct ProgressButton { + @Prop @Watch('getProgressContext') progress: number + @State textProgress: string = EMPTY_STRING + @Prop content: string = EMPTY_STRING + @State isLoading: boolean = false + progressButtonWidth?: Length = 44 + clickCallback: () => void = null + @Prop enable: boolean = true + + private getButtonProgress(): number { + if (this.progress < 0) { + return 0 + } else if (this.progress > MAX_PROGRESS) { + return MAX_PROGRESS + } + return this.progress + } + + private getProgressContext() { + if (this.progress < 0) { + this.isLoading = false + this.textProgress = MIN_PERCENTAGE + } else if (this.progress >= MAX_PROGRESS) { + this.isLoading = false + this.textProgress = MAX_PERCENTAGE + } else { + this.isLoading = true + this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + "%" + } + } + + build() { + Button() { + Stack(){ + Progress({ value: this.getButtonProgress(), total: MAX_PROGRESS, + style: ProgressStyle.Capsule }) + .height(28) + .borderRadius(14) + .width('100%') + .hoverEffect(HoverEffect.None) + .clip(false) + .enabled(this.enable) + .color('#330A59F7') + Row() { + Text(this.isLoading? this.textProgress: this.content) + .fontSize($r('sys.float.ohos_id_text_size_button3')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .padding({left: 8, right: 8}) + .opacity(this.enable? 1.0: 0.4) + } + Row().backgroundColor(Color.Transparent) + .border({ width: 1, color: '#330A59F7'}) + .height(28) + .borderRadius(14) + .width('100%') + } + } + .borderRadius(14) + .clip(false) + .hoverEffect(HoverEffect.None) + .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary")) + .constraintSize({minWidth: 44}) + .width(this.progressButtonWidth < 44? 44: this.progressButtonWidth) + .stateEffect(this.enable) + .onClick(() => { + if(!this.enable){ + return + } + if (this.progress < MAX_PROGRESS) { + this.isLoading = !this.isLoading + } + this.clickCallback && this.clickCallback() + }) + } +} \ No newline at end of file diff --git a/advanced_ui_component/selecttitlebar/interfaces/BUILD.gn b/advanced_ui_component/selecttitlebar/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..33f154e0e43deceb89a8743e24665b472f016351 --- /dev/null +++ b/advanced_ui_component/selecttitlebar/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.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" +} + +gen_obj("selecttitlebar_abc_preview") { + input = get_label_info(":gen_selecttitlebar_abc", "target_out_dir") + + "/selecttitlebar.abc" + output = target_out_dir + "/selecttitlebar_abc.c" + snapshot_dep = [ ":gen_selecttitlebar_abc" ] +} + +ohos_shared_library("selecttitlebar") { + sources = [ "selecttitlebar.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_selecttitlebar_abc_preview" ] + } else { + deps = [ ":selecttitlebar_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/selecttitlebar/interfaces/selecttitlebar.cpp b/advanced_ui_component/selecttitlebar/interfaces/selecttitlebar.cpp new file mode 100644 index 0000000000000000000000000000000000000000..f81892bf5e30ebcc6734cf8a0d11fba268219842 --- /dev/null +++ b/advanced_ui_component/selecttitlebar/interfaces/selecttitlebar.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#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; + } +} + +/* + * Module define + */ +static napi_module SelectTitleBarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.SelectTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void SelectTitleBarRegisterModule(void) +{ + napi_module_register(&SelectTitleBarModule); +} diff --git a/advanced_ui_component/selecttitlebar/interfaces/selecttitlebar.js b/advanced_ui_component/selecttitlebar/interfaces/selecttitlebar.js new file mode 100644 index 0000000000000000000000000000000000000000..47cd4af9b2a86fd291184b4795422f5802fb8108 --- /dev/null +++ b/advanced_ui_component/selecttitlebar/interfaces/selecttitlebar.js @@ -0,0 +1,858 @@ +/* + * 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.__backActive = new ObservedPropertySimplePU(!1, this, "backActive"); + 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); + void 0 !== e.backActive && (this.backActive = e.backActive) + } + updateStateVars(e) {} + purgeVariableDependenciesOnElmtId(e) { + this.__selected.purgeDependencyOnElmtId(e); + this.__selectMaxWidth.purgeDependencyOnElmtId(e); + this.__backActive.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__selected.aboutToBeDeleted(); + this.__selectMaxWidth.aboutToBeDeleted(); + this.__backActive.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) + } + get backActive() { + return this.__backActive.get() + } + set backActive(e) { + this.__backActive.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(); + Navigator.active(this.backActive); + t || Navigator.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Navigator.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new ImageMenuItem(this, { + item: { + value: PUBLIC_BACK, + isEnabled: !0, + action: () => this.backActive = !0 + }, + index: -1 + }, 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.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, + index: 1 + SelectTitleBar.instanceCount++ + }, 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; +SelectTitleBar.instanceCount = 0; +class CollapsibleMenuSection extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.menuItems = void 0; + this.index = void 0; + this.firstFocusableIndex = -1; + 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.index && (this.index = e.index); + void 0 !== e.firstFocusableIndex && (this.firstFocusableIndex = e.firstFocusableIndex); + 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 + } + aboutToAppear() { + this.menuItems.forEach(((e, t) => { + e.isEnabled && -1 == this.firstFocusableIndex && t > CollapsibleMenuSection.maxCountOfVisibleItems - 2 && (this.firstFocusableIndex = 1e3 * this.index + t + 1) + })) + } + 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, t) => { + const o = e; + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + t + 1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + 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, t) => { + const o = e; + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + t + 1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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; + e.isVisible || (this.isMoreIconOnClick = !1) + } + }); + 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 + }); + Column.onAppear((() => { + focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) + })); + 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, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + CollapsibleMenuSection.maxCountOfVisibleItems + t + }, 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.index = 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.index && (this.index = e.index); + 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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); + Image.key(ImageMenuItem.focusablePrefix + this.index); + 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; +ImageMenuItem.focusablePrefix = "Id-SelectTitleBar-ImageMenuItem-"; +export default { + SelectTitleBar: SelectTitleBar +}; \ No newline at end of file diff --git a/advanced_ui_component/selecttitlebar/source/selecttitlebar.ets b/advanced_ui_component/selecttitlebar/source/selecttitlebar.ets new file mode 100644 index 0000000000000000000000000000000000000000..366dbcfb9996b0ca740942dac8d8761eb0768f75 --- /dev/null +++ b/advanced_ui_component/selecttitlebar/source/selecttitlebar.ets @@ -0,0 +1,442 @@ +/* + * 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 = 4 + private static instanceCount = 0 + + @State selectMaxWidth: number = 0 + @State backActive: boolean = false + + build() { + Flex({ + justifyContent: FlexAlign.SpaceBetween, + alignItems: ItemAlign.Stretch + }) { + Row() { + if (!this.hidesBackButton) { + Navigator() + .active(this.backActive) + + ImageMenuItem({ item: { + value: PUBLIC_BACK, + isEnabled: true, + action: () => this.backActive = true + }, index: -1 }) + } + + 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: this.hidesBackButton && this.subtitle === undefined + ? $r('sys.float.ohos_id_text_size_headline7') + : $r('sys.float.ohos_id_text_size_headline8') }) + .fontColor($r('sys.color.ohos_id_color_titlebar_text')) + .backgroundColor(Color.Transparent) + .onSelect(this.onSelected) + .constraintSize({ maxWidth: this.selectMaxWidth }) + .offset({ x: -4 }) + } + .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: this.hidesBackButton && this.subtitle === undefined + ? $r('sys.float.ohos_id_text_size_headline7') + : $r('sys.float.ohos_id_text_size_headline8') }) + .fontColor($r('sys.color.ohos_id_color_titlebar_text')) + .backgroundColor(Color.Transparent) + .onSelect(this.onSelected) + .constraintSize({ maxWidth: this.selectMaxWidth }) + .offset({ x: -4 }) + } + .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 }) + .offset({ y: -4 }) + } + .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, index: 1 + SelectTitleBar.instanceCount++ }) + } + } + .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 + index: number + + static readonly maxCountOfVisibleItems = 3 + private static readonly focusPadding = 4 + private static readonly marginsNum = 2 + private firstFocusableIndex = -1 + + @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 + } + } + + aboutToAppear() { + this.menuItems.forEach((item, index) => { + if (item.isEnabled && this.firstFocusableIndex == -1 && index > CollapsibleMenuSection.maxCountOfVisibleItems - 2) { + this.firstFocusableIndex = this.index * 1000 + index + 1 + } + }) + } + + build() { + Column() { + Row() { + if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { + ForEach(this.menuItems, (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + index + 1 }) + }) + } else { + ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + index + 1 }) + }) + + 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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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 + if (!e.isVisible) { + this.isMoreIconOnClick = false + } + } + }) + } + } + } + .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, index: this.index * 1000 + CollapsibleMenuSection.maxCountOfVisibleItems + index }) + }) + } + .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum) + .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }) + .onAppear(() => { + focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) + }) + } +} + +@Component +struct ImageMenuItem { + item: SelectTitleBarMenuItem + index: number + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + static readonly focusablePrefix = "Id-SelectTitleBar-ImageMenuItem-" + + @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) + .key(ImageMenuItem.focusablePrefix + this.index) + } + .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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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/advanced_ui_component/splitlayout/interfaces/BUILD.gn b/advanced_ui_component/splitlayout/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..266e5e60bda45f171d3d30588912a8b842e6714b --- /dev/null +++ b/advanced_ui_component/splitlayout/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_splitlayout_abc") { + src_js = rebase_path("splitlayout.js") + dst_file = rebase_path(target_out_dir + "/splitlayout.abc") + in_puts = [ "splitlayout.js" ] + out_puts = [ target_out_dir + "/splitlayout.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("splitlayout_abc") { + input = get_label_info(":gen_splitlayout_abc", "target_out_dir") + + "/splitlayout.abc" + output = target_out_dir + "/splitlayout_abc.o" + dep = ":gen_splitlayout_abc" +} + +gen_obj("splitlayout_abc_preview") { + input = get_label_info(":gen_splitlayout_abc", "target_out_dir") + + "/splitlayout.abc" + output = target_out_dir + "/splitlayout_abc.c" + snapshot_dep = [ ":gen_splitlayout_abc" ] +} + +ohos_shared_library("splitlayout") { + sources = [ "splitlayout.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_splitlayout_abc_preview" ] + } else { + deps = [ ":splitlayout_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/splitlayout/interfaces/splitlayout.cpp b/advanced_ui_component/splitlayout/interfaces/splitlayout.cpp new file mode 100644 index 0000000000000000000000000000000000000000..018899dc700675bcd0af8ef5925e0f680d551d2e --- /dev/null +++ b/advanced_ui_component/splitlayout/interfaces/splitlayout.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_splitlayout_abc_start[]; +extern const char _binary_splitlayout_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_SplitLayout_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_splitlayout_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_splitlayout_abc_end - _binary_splitlayout_abc_start; + } +} + +/* + * Module define + */ +static napi_module SplitLayoutModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.SplitLayout", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void SplitLayoutRegisterModule(void) +{ + napi_module_register(&SplitLayoutModule); +} diff --git a/advanced_ui_component/splitlayout/interfaces/splitlayout.js b/advanced_ui_component/splitlayout/interfaces/splitlayout.js new file mode 100644 index 0000000000000000000000000000000000000000..752e34eb2b2919762cc495c9a43c33cd34be3fa3 --- /dev/null +++ b/advanced_ui_component/splitlayout/interfaces/splitlayout.js @@ -0,0 +1,526 @@ +/* + * 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. + */ + +export class SplitLayout extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.container = void 0; + this.__sizeValue = new ObservedPropertySimplePU("", this, "sizeValue"); + this.__areaWidth = new ObservedPropertySimplePU(0, this, "areaWidth"); + this.__imageBackgroundColor = new ObservedPropertySimplePU("#19000000", this, "imageBackgroundColor"); + this.__mainImage = new SynchedPropertyObjectOneWayPU(t.mainImage, this, "mainImage"); + this.__primaryText = new SynchedPropertySimpleOneWayPU(t.primaryText, this, "primaryText"); + this.secondaryText = ""; + this.tertiaryText = ""; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.container && (this.container = e.container); + void 0 !== e.sizeValue && (this.sizeValue = e.sizeValue); + void 0 !== e.areaWidth && (this.areaWidth = e.areaWidth); + void 0 !== e.imageBackgroundColor && (this.imageBackgroundColor = e.imageBackgroundColor); + void 0 === e.primaryText && this.__primaryText.set(""); + void 0 !== e.secondaryText && (this.secondaryText = e.secondaryText); + void 0 !== e.tertiaryText && (this.tertiaryText = e.tertiaryText) + } + + updateStateVars(e) { + this.__mainImage.reset(e.mainImage); + this.__primaryText.reset(e.primaryText) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__sizeValue.purgeDependencyOnElmtId(e); + this.__areaWidth.purgeDependencyOnElmtId(e); + this.__imageBackgroundColor.purgeDependencyOnElmtId(e); + this.__mainImage.purgeDependencyOnElmtId(e); + this.__primaryText.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__sizeValue.aboutToBeDeleted(); + this.__areaWidth.aboutToBeDeleted(); + this.__imageBackgroundColor.aboutToBeDeleted(); + this.__mainImage.aboutToBeDeleted(); + this.__primaryText.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get sizeValue() { + return this.__sizeValue.get() + } + + set sizeValue(e) { + this.__sizeValue.set(e) + } + + get areaWidth() { + return this.__areaWidth.get() + } + + set areaWidth(e) { + this.__areaWidth.set(e) + } + + get imageBackgroundColor() { + return this.__imageBackgroundColor.get() + } + + set imageBackgroundColor(e) { + this.__imageBackgroundColor.set(e) + } + + get mainImage() { + return this.__mainImage.get() + } + + set mainImage(e) { + this.__mainImage.set(e) + } + + get primaryText() { + return this.__primaryText.get() + } + + set primaryText(e) { + this.__primaryText.set(e) + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.onAreaChange(((e, t) => { + console.info(`Ace: on area change, oldValue is ${JSON.stringify(e)} value is ${JSON.stringify(t)}`); + this.sizeValue = JSON.stringify(t); + this.areaWidth = parseInt(t.width.toString(), 0); + console.info("pingAce: on area change, oldValue is" + this.areaWidth); + console.info("pingAce: on area change, oldValue is" + parseInt(t.height.toString(), 0)) + })); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.areaWidth < 600 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridRow.create({ + columns: 4, + breakpoints: { reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }); + t || GridRow.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create({ alignContent: Alignment.Bottom }); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.mainImage); + Image.height("34%"); + Image.width("100%"); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.alignItems(HorizontalAlign.Center); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + } + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.fontWeight(FontWeight.Medium); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ top: 4, bottom: 8 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.tertiaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_caption"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ bottom: 24 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + Stack.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("66%"); + Column.width("100%"); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.container.bind(this)(); + Column.pop(); + Column.pop(); + GridCol.pop(); + GridRow.pop() + })) : 600 < this.areaWidth && this.areaWidth < 840 ? this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridRow.create({ + columns: 8, + breakpoints: { reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }); + t || GridRow.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.backgroundColor(this.imageBackgroundColor); + Row.height("34%"); + Row.width("100%"); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.mainImage); + Image.margin({ left: 96, right: 36 }); + Image.height("60%"); + Image.width("20%"); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width("42%"); + Column.alignItems(HorizontalAlign.Start); + Column.margin({ right: 96 }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.fontWeight(FontWeight.Medium); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ top: 4, bottom: 8 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.tertiaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_caption"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width("100%"); + Column.height("66%"); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.container.bind(this)(); + Column.pop(); + Column.pop(); + GridCol.pop(); + GridRow.pop() + })) : this.areaWidth > 840 && this.ifElseBranchUpdateFunction(2, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridRow.create({ + columns: 12, + breakpoints: { reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }); + GridRow.width("100%"); + t || GridRow.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); + GridCol.height("100%"); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width("100%"); + Column.height("100%"); + Column.backgroundColor(this.imageBackgroundColor); + Column.justifyContent(FlexAlign.Center); + Column.alignItems(HorizontalAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.mainImage); + Image.height("17%"); + Image.width("34%"); + Image.margin({ bottom: 36 }); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.textAlign(TextAlign.Center); + Text.fontWeight(FontWeight.Medium); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ left: 48, right: 48 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ top: 4, bottom: 8, left: 48, right: 48 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.tertiaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_caption"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ left: 48, right: 48 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + GridCol.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.container.bind(this)(); + GridCol.pop(); + GridRow.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop() + } + + rerender() { + this.updateDirtyElements() + } +} +export default { SplitLayout }; \ No newline at end of file diff --git a/advanced_ui_component/splitlayout/source/splitlayout.ets b/advanced_ui_component/splitlayout/source/splitlayout.ets new file mode 100644 index 0000000000000000000000000000000000000000..15b1d4404b76525ecbbc3bd569ed65a382f01308 --- /dev/null +++ b/advanced_ui_component/splitlayout/source/splitlayout.ets @@ -0,0 +1,174 @@ +/* + * 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. + */ + +@Component +export struct SplitLayout { + @BuilderParam container: () => void + @State sizeValue: string = '' + @State areaWidth: number = 0 + @State imageBackgroundColor: string = "#19000000" + @Prop mainImage: Resource + @Prop primaryText: string = "" + secondaryText?: string = "" + tertiaryText?: string = "" + + build() { + Column() { + if (this.areaWidth < 600) { + GridRow({ + columns: 4, + breakpoints: { + reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) { + Column() { + Stack({ alignContent: Alignment.Bottom }) { + Image(this.mainImage) + .height('34%') + .width('100%') + Column() { + Text(this.primaryText) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + Text(this.secondaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ top: 4, bottom: 8 }) + Text(this.tertiaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .margin({ bottom: 24 }) + } + .alignItems(HorizontalAlign.Center) + .margin({ + left: $r('sys.float.ohos_id_max_padding_start'), + right: $r('sys.float.ohos_id_max_padding_end'), }) + } + .height('34%') + .width('100%') + + Column() { + this.container() + } + .height('66%') + .width('100%') + } + } + } + } else if (600 < this.areaWidth && this.areaWidth < 840) { + GridRow({ + columns: 8, + breakpoints: { + reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) { + Column() { + Row() { + Image(this.mainImage) + .margin({ left: 96, right: 36 }) + .height('60%') + .width('20%') + Column() { + Text(this.primaryText) + .fontWeight(FontWeight.Medium) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + Text(this.secondaryText) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ top: 4, bottom: 8 }) + Text(this.tertiaryText) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + } + .width('42%') + .alignItems(HorizontalAlign.Start) + .margin({ right: 96 }) + } + .backgroundColor(this.imageBackgroundColor) + .height('34%') + .width('100%') + + Column() { + this.container() + } + .width('100%') + .height('66%') + } + + } + } + + } else if (this.areaWidth > 840) { + GridRow({ + columns: 12, + breakpoints: { + reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) + { + GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) { + Column() { + Image(this.mainImage) + .height('17%') + .width('34%') + .margin({ bottom: 36 }) + Text(this.primaryText) + .textAlign(TextAlign.Center) + .fontWeight(FontWeight.Medium) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ left: 48, right: 48 }) + Text(this.secondaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ top: 4, bottom: 8, left: 48, right: 48 }) + Text(this.tertiaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .margin({ left: 48, right: 48 }) + } + .width('100%') + .height('100%') + .backgroundColor(this.imageBackgroundColor) + .justifyContent(FlexAlign.Center) + .alignItems(HorizontalAlign.Center) + } + .height('100%') + + GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) { + this.container() + } + + }.width('100%') + } + } + .onAreaChange((oldValue: Area, newValue: Area) => { + console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) + this.sizeValue = JSON.stringify(newValue) + this.areaWidth = parseInt(newValue.width.toString(), 0); + console.info(`pingAce: on area change, oldValue is` + this.areaWidth) + console.info(`pingAce: on area change, oldValue is` + parseInt(newValue.height.toString(), 0)) + }) + } +} diff --git a/advanced_ui_component/subheader/interfaces/BUILD.gn b/advanced_ui_component/subheader/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..2958616df7333aa699e7c135d53d9ddf3fdeac89 --- /dev/null +++ b/advanced_ui_component/subheader/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_subheader_abc") { + src_js = rebase_path("subheader.js") + dst_file = rebase_path(target_out_dir + "/subheader.abc") + in_puts = [ "subheader.js" ] + out_puts = [ target_out_dir + "/subheader.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("subheader_abc") { + input = + get_label_info(":gen_subheader_abc", "target_out_dir") + "/subheader.abc" + output = target_out_dir + "/subheader_abc.o" + dep = ":gen_subheader_abc" +} + +gen_obj("subheader_abc_preview") { + input = + get_label_info(":gen_subheader_abc", "target_out_dir") + "/subheader.abc" + output = target_out_dir + "/subheader_abc.c" + snapshot_dep = [ ":gen_subheader_abc" ] +} + +ohos_shared_library("subheader") { + sources = [ "subheader.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_subheader_abc_preview" ] + } else { + deps = [ ":subheader_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/subheader/interfaces/subheader.cpp b/advanced_ui_component/subheader/interfaces/subheader.cpp new file mode 100644 index 0000000000000000000000000000000000000000..05e139aeff840170e82c82edd16ca269e065e425 --- /dev/null +++ b/advanced_ui_component/subheader/interfaces/subheader.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_subheader_abc_start[]; +extern const char _binary_subheader_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_SubHeader_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_subheader_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_subheader_abc_end - _binary_subheader_abc_start; + } +} + +/* + * Module define + */ +static napi_module SubHeaderModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.SubHeader", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void SubHeaderRegisterModule(void) +{ + napi_module_register(&SubHeaderModule); +} diff --git a/advanced_ui_component/subheader/interfaces/subheader.js b/advanced_ui_component/subheader/interfaces/subheader.js new file mode 100644 index 0000000000000000000000000000000000000000..b351e84eb44f8c8ea1c3c81aec725dd3de541cf5 --- /dev/null +++ b/advanced_ui_component/subheader/interfaces/subheader.js @@ -0,0 +1,1194 @@ +/* + * 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; +const SPACE_MARGIN = 8; +const MARGIN_NUM = 4; +const IMAGE_WIDTH_NUM = 16; +const IMAGE_HEIGHT_NUM = 24; +const BUTTON_SIZE = 32; +const SINGLE_LINE_HEIGHT = 48; +const DOUBLE_LINE_HEIGHT = 64; +const BUTTON_HEIGHT = 28; +const IMAGE_WIDTH = 12; +const BORDER_WIDTH = 2; +const DIVIDEND_WIDTH = 3; +const SINGLE_LINE_NUM = 1; +const DOUBLE_LINE_NUM = 2; +const MIN_FONT_SIZE = 14; +const MAIN_TEXT_SIZE = 10; +const CONSTRAINT_NUM = 44; +const CONTENT_NUM = 40; + +export var OperationType; +!function(e){ + e[e.TEXT_ARROW=0] = "TEXT_ARROW"; + e[e.BUTTON=1] = "BUTTON"; + e[e.ICON_GROUP=2] = "ICON_GROUP"; + e[e.LOADING=3] = "LOADING" +}(OperationType || (OperationType = {})); + +class IconGroup extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.__bgColor = new ObservedPropertyObjectPU({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + }, this, "bgColor"); + this.__isFocus = new ObservedPropertySimplePU(!1, this, "isFocus"); + this.item = void 0; + this.focusBorderWidth = 2; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.bgColor && (this.bgColor = e.bgColor); + void 0 !== e.isFocus && (this.isFocus = e.isFocus); + void 0 !== e.item && (this.item = e.item); + void 0 !== e.focusBorderWidth && (this.focusBorderWidth = e.focusBorderWidth) + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + this.__bgColor.purgeDependencyOnElmtId(e); + this.__isFocus.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__bgColor.aboutToBeDeleted(); + this.__isFocus.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get bgColor() { + return this.__bgColor.get() + } + + set bgColor(e) { + this.__bgColor.set(e) + } + + get isFocus() { + return this.__isFocus.get() + } + + set isFocus(e) { + this.__isFocus.set(e) + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.focusable(!0); + Row.width(32); + Row.height(32); + Row.margin({ right: 8, bottom: 4 }); + Row.justifyContent(FlexAlign.Center); + Row.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }); + Row.backgroundColor(ObservedObject.GetRawObject(this.bgColor)); + Row.onTouch((e => { + if (e.type === TouchType.Down) { + this.item.action && this.item.action(); + this.bgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } + } + e.type === TouchType.Up && (this.bgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + }) + })); + Row.onHover((e => { + this.bgColor = e ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + } + })); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: this.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + Row.onKeyEvent((e => { + e.keyCode !== KeyCode.KEYCODE_ENTER && e.keyCode !== KeyCode.KEYCODE_SPACE || this.item.action && this.item.action() + })); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.value); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }); + Image.width(24); + Image.height(24); + Image.focusable(!0); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export class SubHeader extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.__icon = new SynchedPropertyObjectOneWayPU(t.icon, this, "icon"); + this.__primaryTitle = new SynchedPropertySimpleOneWayPU(t.primaryTitle, this, "primaryTitle"); + this.__secondaryTitle = new SynchedPropertySimpleOneWayPU(t.secondaryTitle, this, "secondaryTitle"); + this.__select = new SynchedPropertyObjectOneWayPU(t.select, this, "select"); + this.__operationType = new SynchedPropertySimpleOneWayPU(t.operationType, this, "operationType"); + this.operationItem = void 0; + this.__isDuplicateLine = new ObservedPropertySimplePU(!1, this, "isDuplicateLine"); + this.__textArrowBgColor = new ObservedPropertyObjectPU({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + }, this, "textArrowBgColor"); + this.__buttonBgColor = new ObservedPropertyObjectPU({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + }, this, "buttonBgColor"); + this.__flexWidth = new ObservedPropertySimplePU(0, this, "flexWidth"); + this.__textArrowWidth = new ObservedPropertySimplePU(0, this, "textArrowWidth"); + this.__textArrowFocus = new ObservedPropertySimplePU(!1, this, "textArrowFocus"); + this.__buttonFocus = new ObservedPropertySimplePU(!1, this, "buttonFocus"); + this.__arrowWidth = new ObservedPropertySimplePU(0, this, "arrowWidth"); + this.__buttonWidth = new ObservedPropertySimplePU(0, this, "buttonWidth"); + this.focusBorderWidth = 2; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.operationType ? this.__operationType.set(e.operationType) : this.__operationType.set(OperationType.BUTTON); + void 0 !== e.operationItem && (this.operationItem = e.operationItem); + void 0 !== e.isDuplicateLine && (this.isDuplicateLine = e.isDuplicateLine); + void 0 !== e.textArrowBgColor && (this.textArrowBgColor = e.textArrowBgColor); + void 0 !== e.buttonBgColor && (this.buttonBgColor = e.buttonBgColor); + void 0 !== e.flexWidth && (this.flexWidth = e.flexWidth); + void 0 !== e.textArrowWidth && (this.textArrowWidth = e.textArrowWidth); + void 0 !== e.textArrowFocus && (this.textArrowFocus = e.textArrowFocus); + void 0 !== e.buttonFocus && (this.buttonFocus = e.buttonFocus); + void 0 !== e.arrowWidth && (this.arrowWidth = e.arrowWidth); + void 0 !== e.buttonWidth && (this.buttonWidth = e.buttonWidth); + void 0 !== e.focusBorderWidth && (this.focusBorderWidth = e.focusBorderWidth) + } + + updateStateVars(e) { + this.__icon.reset(e.icon); + this.__primaryTitle.reset(e.primaryTitle); + this.__secondaryTitle.reset(e.secondaryTitle); + this.__select.reset(e.select); + this.__operationType.reset(e.operationType) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__icon.purgeDependencyOnElmtId(e); + this.__primaryTitle.purgeDependencyOnElmtId(e); + this.__secondaryTitle.purgeDependencyOnElmtId(e); + this.__select.purgeDependencyOnElmtId(e); + this.__operationType.purgeDependencyOnElmtId(e); + this.__isDuplicateLine.purgeDependencyOnElmtId(e); + this.__textArrowBgColor.purgeDependencyOnElmtId(e); + this.__buttonBgColor.purgeDependencyOnElmtId(e); + this.__flexWidth.purgeDependencyOnElmtId(e); + this.__textArrowWidth.purgeDependencyOnElmtId(e); + this.__textArrowFocus.purgeDependencyOnElmtId(e); + this.__buttonFocus.purgeDependencyOnElmtId(e); + this.__arrowWidth.purgeDependencyOnElmtId(e); + this.__buttonWidth.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__icon.aboutToBeDeleted(); + this.__primaryTitle.aboutToBeDeleted(); + this.__secondaryTitle.aboutToBeDeleted(); + this.__select.aboutToBeDeleted(); + this.__operationType.aboutToBeDeleted(); + this.__isDuplicateLine.aboutToBeDeleted(); + this.__textArrowBgColor.aboutToBeDeleted(); + this.__buttonBgColor.aboutToBeDeleted(); + this.__flexWidth.aboutToBeDeleted(); + this.__textArrowWidth.aboutToBeDeleted(); + this.__textArrowFocus.aboutToBeDeleted(); + this.__buttonFocus.aboutToBeDeleted(); + this.__arrowWidth.aboutToBeDeleted(); + this.__buttonWidth.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get icon() { + return this.__icon.get() + } + + set icon(e) { + this.__icon.set(e) + } + + get primaryTitle() { + return this.__primaryTitle.get() + } + + set primaryTitle(e) { + this.__primaryTitle.set(e) + } + + get secondaryTitle() { + return this.__secondaryTitle.get() + } + + set secondaryTitle(e) { + this.__secondaryTitle.set(e) + } + + get select() { + return this.__select.get() + } + + set select(e) { + this.__select.set(e) + } + + get operationType() { + return this.__operationType.get() + } + + set operationType(e) { + this.__operationType.set(e) + } + + get isDuplicateLine() { + return this.__isDuplicateLine.get() + } + + set isDuplicateLine(e) { + this.__isDuplicateLine.set(e) + } + + get textArrowBgColor() { + return this.__textArrowBgColor.get() + } + + set textArrowBgColor(e) { + this.__textArrowBgColor.set(e) + } + + get buttonBgColor() { + return this.__buttonBgColor.get() + } + + set buttonBgColor(e) { + this.__buttonBgColor.set(e) + } + + get flexWidth() { + return this.__flexWidth.get() + } + + set flexWidth(e) { + this.__flexWidth.set(e) + } + + get textArrowWidth() { + return this.__textArrowWidth.get() + } + + set textArrowWidth(e) { + this.__textArrowWidth.set(e) + } + + get textArrowFocus() { + return this.__textArrowFocus.get() + } + + set textArrowFocus(e) { + this.__textArrowFocus.set(e) + } + + get buttonFocus() { + return this.__buttonFocus.get() + } + + set buttonFocus(e) { + this.__buttonFocus.set(e) + } + + get arrowWidth() { + return this.__arrowWidth.get() + } + + set arrowWidth(e) { + this.__arrowWidth.set(e) + } + + get buttonWidth() { + return this.__buttonWidth.get() + } + + set buttonWidth(e) { + this.__buttonWidth.set(e) + } + + ListTextStyle(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.content); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title3"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(2); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + }, + bottom: 8, + right: 4 + }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + } + + ListIconStyle(e, t, o = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + }, + bottom: 8, + right: 4 + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(t); + Image.width(16); + Image.height(16); + Image.margin({ right: 8 }); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.content); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title3"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(2); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop() + } + + ContentTextStyle(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.content); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title1"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(2); + Text.maxFontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title1"], + bundleName: "", + moduleName: "" + }); + Text.minFontSize(14); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + }, + right: 4, + bottom: 8 + }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + } + + SubTextStyle(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.alignItems(HorizontalAlign.Start); + Column.onAppear((() => { + this.isDuplicateLine = !0 + })); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + }, + right: 4, + bottom: 8 + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.content); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title1"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(1); + Text.maxFontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title1"], + bundleName: "", + moduleName: "" + }); + Text.minFontSize(14); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.subContent); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title3"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(1); + Text.maxFontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title3"], + bundleName: "", + moduleName: "" + }); + Text.minFontSize(10); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop() + } + + SelectStyle(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Select.create(e.options); + Select.selected(e.selected); + Select.value(e.value); + Select.onSelect(((t, o) => { + e.onSelect && e.onSelect(t, o) + })); + Select.font({ + size: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_sub_title1"], + bundleName: "", + moduleName: "" + }, + weight: FontWeight.Medium + }); + Select.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_start"], + bundleName: "", + moduleName: "" + }, + right: 4 + }); + o || Select.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Select.pop() + } + + LoadingProcessStyle(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + LoadingProgress.create(); + LoadingProgress.width(24); + LoadingProgress.height(24); + LoadingProgress.focusable(!0); + LoadingProgress.margin({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_end"], + bundleName: "", + moduleName: "" + }, + bottom: 4 + }); + t || LoadingProgress.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + } + + TextArrowStyle(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.onAreaChange(((e, t) => { + this.textArrowWidth = Number(parseInt(t.width.toString(), 0)) + })); + Row.constraintSize({ minWidth: this.flexWidth / 3 }); + Row.justifyContent(FlexAlign.End); + Row.margin({ left: 8 }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create(); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Row.create(); + Row.height(32); + Row.justifyContent(FlexAlign.End); + Row.onFocus((() => { + this.textArrowFocus = !0 + })); + Row.onBlur((() => { + this.textArrowFocus = !1 + })); + Row.borderRadius(4); + Row.focusable(!0); + Row.margin({ left: 4, right: 4 }); + Row.backgroundColor(ObservedObject.GetRawObject(this.textArrowBgColor)); + Row.onTouch((t => { + if (t.type === TouchType.Down) { + e.action && e.action(); + this.textArrowBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } + } + t.type === TouchType.Up && (this.textArrowBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + }) + })); + Row.onHover((e => { + this.textArrowBgColor = e ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + } + })); + Row.onKeyEvent((t => { + t.keyCode !== KeyCode.KEYCODE_ENTER && t.keyCode !== KeyCode.KEYCODE_SPACE || e.action && e.action() + })); + Row.onAreaChange(((e, t) => { + this.arrowWidth = Number(parseInt(t.width.toString(), 0)) + })); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ left: 8, right: 8 }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + If.create(); + null != e ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.value); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.margin({ right: 4 }); + Text.focusable(!0); + Text.maxLines(1); + Text.constraintSize({ maxWidth: this.textArrowWidth - 40 }); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create({ + id: -1, + type: 2e4, + params: ["sys.media.ohos_ic_public_arrow_right"], + bundleName: "", + moduleName: "" + }); + Image.fillColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_tertiary"], + bundleName: "", + moduleName: "" + }); + Image.width(12); + Image.height(24); + Image.focusable(!0); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.textArrowFocus ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(32); + Row.width(this.arrowWidth); + Row.hitTestBehavior(HitTestMode.None); + Row.border({ + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + } + }); + Row.borderRadius(4); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Stack.pop(); + Row.pop() + } + + ButtonStyle(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.constraintSize({ minWidth: this.flexWidth / 3 }); + Row.justifyContent(FlexAlign.End); + Row.focusable(!0); + Row.margin({ left: 8 }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create(); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Row.create(); + Row.justifyContent(FlexAlign.End); + Row.alignItems(VerticalAlign.Center); + Row.focusable(!0); + Row.height(28); + Row.margin({ left: 8, right: 8 }); + Row.borderRadius(16); + Row.backgroundColor(ObservedObject.GetRawObject(this.buttonBgColor)); + Row.onFocus((() => { + this.buttonFocus = !0 + })); + Row.onBlur((() => { + this.buttonFocus = !1 + })); + Row.onTouch((t => { + if (t.type === TouchType.Down) { + e.action && e.action(); + this.buttonBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + } + } + t.type === TouchType.Up && (this.buttonBgColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + }) + })); + Row.onHover((e => { + this.buttonBgColor = e ? { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + } : { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_sub_background_transparent"], + bundleName: "", + moduleName: "" + } + })); + Row.onKeyEvent((t => { + t.keyCode !== KeyCode.KEYCODE_ENTER && t.keyCode !== KeyCode.KEYCODE_SPACE || e.action && e.action() + })); + Row.onAreaChange(((e, t) => { + let o = Number(parseInt(t.width.toString(), 0)); + this.buttonWidth = o + })); + o || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + If.create(); + null != e ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.value); + Text.maxLines(1); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_button2"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight(FontWeight.Medium); + Text.margin({ left: 8, right: 8 }); + Text.focusable(!0); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : If.branchId(1); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.buttonFocus ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(28); + Row.width(this.buttonWidth); + Row.hitTestBehavior(HitTestMode.None); + Row.border({ + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + } + }); + Row.borderRadius(16); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Stack.pop(); + Row.pop() + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.End }); + Flex.focusable(!0); + Flex.onAreaChange(((e, t) => { + let o = Number(parseInt(t.width.toString(), 0)); + this.flexWidth = o - 44 + })); + Flex.padding({ + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_default_padding_end"], + bundleName: "", + moduleName: "" + } + }); + Flex.height(this.isDuplicateLine ? 64 : 48); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.secondaryTitle && null != this.icon ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.margin({ right: 8 }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.ListIconStyle.bind(this)({ content: this.secondaryTitle }, ObservedObject.GetRawObject(this.icon)); + Row.pop() + })) : null != this.secondaryTitle && null != this.primaryTitle ? this.ifElseBranchUpdateFunction(1, (() => { + this.SubTextStyle.bind(this)(makeBuilderParameterProxy("SubTextStyle", { + content: () => this.__primaryTitle ? this.__primaryTitle : this.primaryTitle, + subContent: () => this.__secondaryTitle ? this.__secondaryTitle : this.secondaryTitle + })) + })) : null != this.secondaryTitle ? this.ifElseBranchUpdateFunction(2, (() => { + this.ListTextStyle.bind(this)(makeBuilderParameterProxy("ListTextStyle", { + content: () => this.__secondaryTitle ? this.__secondaryTitle : this.secondaryTitle + })) + })) : null != this.select ? this.ifElseBranchUpdateFunction(3, (() => { + this.SelectStyle.bind(this)(ObservedObject.GetRawObject(this.select)) + })) : null != this.primaryTitle && this.ifElseBranchUpdateFunction(4, (() => { + this.ContentTextStyle.bind(this)(makeBuilderParameterProxy("ContentTextStyle", { + content: () => this.__primaryTitle ? this.__primaryTitle : this.primaryTitle + })) + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.operationType === OperationType.BUTTON && null != this.operationItem ? this.ifElseBranchUpdateFunction(0, (() => { + this.ButtonStyle.bind(this)(this.operationItem[0]) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.operationType === OperationType.ICON_GROUP && null != this.operationItem ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.operationItem, ((e, t) => { + const o = e; + this.observeComponentCreation(((e, r) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + 0 == t ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new IconGroup(this, { + item: o + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + r || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, r) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + 1 == t ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new IconGroup(this, { + item: o + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + r || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, r) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + 2 == t ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + t ? ViewPU.create(new IconGroup(this, { + item: o + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + r || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop() + }), void 0,!0,!1); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + ForEach.pop(); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.operationType === OperationType.TEXT_ARROW && null != this.operationItem ? this.ifElseBranchUpdateFunction(0, (() => { + this.TextArrowStyle.bind(this)(this.operationItem[0]) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.operationType === OperationType.LOADING ? this.ifElseBranchUpdateFunction(0, (() => { + this.LoadingProcessStyle.bind(this)() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + Flex.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export default { OperationType, SubHeader } \ No newline at end of file diff --git a/advanced_ui_component/subheader/source/subheader.ets b/advanced_ui_component/subheader/source/subheader.ets new file mode 100644 index 0000000000000000000000000000000000000000..f5821d6c4ac6f47c278965de0dbdac743d954f21 --- /dev/null +++ b/advanced_ui_component/subheader/source/subheader.ets @@ -0,0 +1,431 @@ +/* + * 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' + +const SPACE_MARGIN: number = 8 +const MARGIN_NUM: number = 4 +const IMAGE_WIDTH_NUM: number = 16 +const IMAGE_HEIGHT_NUM: number = 24 +const BUTTON_SIZE: number = 32 +const SINGLE_LINE_HEIGHT: number = 48 +const DOUBLE_LINE_HEIGHT: number = 64 +const BUTTON_HEIGHT: number = 28 +const IMAGE_WIDTH: number = 12 +const BORDER_WIDTH = 2 +const DIVIDEND_WIDTH = 3 +const SINGLE_LINE_NUM: number = 1 +const DOUBLE_LINE_NUM: number = 2 +const MIN_FONT_SIZE: number = 14 +const MAIN_TEXT_SIZE: number = 10 +const CONSTRAINT_NUM: number = 44 +const CONTENT_NUM: number = 40 + +export enum OperationType { + TEXT_ARROW = 0, + BUTTON = 1, + ICON_GROUP = 2, + LOADING = 3, +} + +export declare type OperationOption = { + value: ResourceStr; + action?: () => void; +} + +export declare type SelectOptions = { + options: Array; + selected?: number; + value?: string; + onSelect?: (index: number, value?: string) => void; +} + +@Component +struct IconGroup { + @State bgColor: Resource = $r('sys.color.ohos_id_color_sub_background_transparent') + @State isFocus: boolean = false + item: OperationOption + focusBorderWidth = BORDER_WIDTH + + build() { + Row() { + Image(this.item.value) + .fillColor($r('sys.color.ohos_id_color_primary')) + .width(IMAGE_HEIGHT_NUM) + .height(IMAGE_HEIGHT_NUM) + .focusable(true) + } + .focusable(true) + .width(BUTTON_SIZE) + .height(BUTTON_SIZE) + .margin({ right: SPACE_MARGIN, bottom: MARGIN_NUM }) + .justifyContent(FlexAlign.Center) + .borderRadius($r('sys.float.ohos_id_corner_radius_clicked')) + .backgroundColor(this.bgColor) + .onTouch((event) => { + if (event.type === TouchType.Down) { + this.item.action && this.item.action() + this.bgColor = $r('sys.color.ohos_id_color_click_effect') + } + if (event.type === TouchType.Up) { + this.bgColor = $r('sys.color.ohos_id_color_sub_background_transparent') + } + }) + .onHover((isHover: boolean) => { + if (isHover) { + this.bgColor = $r('sys.color.ohos_id_color_hover') + } else { + this.bgColor = $r('sys.color.ohos_id_color_sub_background_transparent') + } + }) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: this.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + } + }) + .onKeyEvent((event) => { + if (event.keyCode === KeyCode.KEYCODE_ENTER || event.keyCode === KeyCode.KEYCODE_SPACE) { + this.item.action && this.item.action() + } + }) + } +} + +@Component +export struct SubHeader { + @Prop icon: Resource + @Prop primaryTitle: string + @Prop secondaryTitle: string + @Prop select: SelectOptions + @Prop operationType: OperationType = OperationType.BUTTON + operationItem: Array + @State isDuplicateLine: boolean = false + @State textArrowBgColor: Resource = $r('sys.color.ohos_id_color_sub_background_transparent') + @State buttonBgColor: Resource = $r('sys.color.ohos_id_color_sub_background_transparent') + @State flexWidth: number = 0 + @State textArrowWidth: number = 0 + @State textArrowFocus: boolean = false + @State buttonFocus: boolean = false + @State arrowWidth: number = 0 + @State buttonWidth: number = 0 + focusBorderWidth = BORDER_WIDTH + + @Builder ListTextStyle($$: { content: ResourceStr }) { + Text($$.content) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .fontSize($r('sys.float.ohos_id_text_size_sub_title3')) + .fontWeight(FontWeight.Medium) + .maxLines(DOUBLE_LINE_NUM) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .margin({ left: $r('sys.float.ohos_id_max_padding_end'), bottom: SPACE_MARGIN, right: MARGIN_NUM }) + } + + @Builder ListIconStyle($$: { content: ResourceStr }, icon: ResourceStr) { + Row() { + Image(icon) + .width(IMAGE_WIDTH_NUM) + .height(IMAGE_WIDTH_NUM) + .margin({ right: SPACE_MARGIN }) + Text($$.content) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .fontSize($r('sys.float.ohos_id_text_size_sub_title3')) + .fontWeight(FontWeight.Medium) + .maxLines(DOUBLE_LINE_NUM) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + .margin({ left: $r('sys.float.ohos_id_max_padding_end'), bottom: SPACE_MARGIN, right: MARGIN_NUM }) + } + + @Builder ContentTextStyle($$: { content: ResourceStr }) { + Text($$.content) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .fontSize($r('sys.float.ohos_id_text_size_sub_title1')) + .fontWeight(FontWeight.Medium) + .maxLines(DOUBLE_LINE_NUM) + .maxFontSize($r('sys.float.ohos_id_text_size_sub_title1')) + .minFontSize(MIN_FONT_SIZE) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .margin({ left: $r('sys.float.ohos_id_max_padding_start'), + right: MARGIN_NUM, bottom: SPACE_MARGIN }) + } + + @Builder SubTextStyle($$: { content: ResourceStr, subContent: ResourceStr }) { + Column() { + Text($$.content) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .fontSize($r('sys.float.ohos_id_text_size_sub_title1')) + .fontWeight(FontWeight.Medium) + .maxLines(SINGLE_LINE_NUM) + .maxFontSize($r('sys.float.ohos_id_text_size_sub_title1')) + .minFontSize(MIN_FONT_SIZE) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Text($$.subContent) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .fontSize($r('sys.float.ohos_id_text_size_sub_title3')) + .fontWeight(FontWeight.Medium) + .maxLines(SINGLE_LINE_NUM) + .maxFontSize($r('sys.float.ohos_id_text_size_sub_title3')) + .minFontSize(MAIN_TEXT_SIZE) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + .alignItems(HorizontalAlign.Start) + .onAppear(() => { + this.isDuplicateLine = true + }) + .margin({ left: $r('sys.float.ohos_id_max_padding_start'), + right: MARGIN_NUM, bottom: SPACE_MARGIN }) + } + + @Builder SelectStyle(selectParam: SelectOptions) { + Select(selectParam.options) + .selected(selectParam.selected) + .value(selectParam.value) + .onSelect((index: number, value?: string) => { + if (selectParam.onSelect) { + selectParam.onSelect(index, value) + } + }) + .font({ + size: $r('sys.float.ohos_id_text_size_sub_title1'), + weight: FontWeight.Medium + }) + .margin({ left: $r('sys.float.ohos_id_default_padding_start'), right: MARGIN_NUM }) + } + + @Builder LoadingProcessStyle() { + LoadingProgress() + .width(IMAGE_HEIGHT_NUM) + .height(IMAGE_HEIGHT_NUM) + .focusable(true) + .margin({ right: $r('sys.float.ohos_id_default_padding_end'), bottom: MARGIN_NUM }) + } + + @Builder TextArrowStyle(textArrow: OperationOption) { + Row() { + Stack() { + Row() { + Row() { + if (textArrow != null) { + Text(textArrow.value) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .margin({ right: MARGIN_NUM }) + .focusable(true) + .maxLines(1) + .constraintSize({ maxWidth: this.textArrowWidth - CONTENT_NUM }) + } + Image($r('sys.media.ohos_ic_public_arrow_right')) + .fillColor($r('sys.color.ohos_id_color_tertiary')) + .width(IMAGE_WIDTH) + .height(IMAGE_HEIGHT_NUM) + .focusable(true) + }.margin({ left: SPACE_MARGIN, right: SPACE_MARGIN }) + } + .height(BUTTON_SIZE) + .justifyContent(FlexAlign.End) + .onFocus(() => { + this.textArrowFocus = true + }) + .onBlur(() => { + this.textArrowFocus = false + }) + .borderRadius(MARGIN_NUM) + .focusable(true) + .margin({ left: MARGIN_NUM, right: MARGIN_NUM }) + .backgroundColor(this.textArrowBgColor) + .onTouch((event) => { + if (event.type === TouchType.Down) { + if (textArrow.action) { + textArrow.action() + } + this.textArrowBgColor = $r('sys.color.ohos_id_color_click_effect') + } + if (event.type === TouchType.Up) { + this.textArrowBgColor = $r('sys.color.ohos_id_color_sub_background_transparent') + } + }) + .onHover((isHover: boolean) => { + if (isHover) { + this.textArrowBgColor = $r('sys.color.ohos_id_color_hover') + } else { + this.textArrowBgColor = $r('sys.color.ohos_id_color_sub_background_transparent') + } + }) + .onKeyEvent((event) => { + if (event.keyCode === KeyCode.KEYCODE_ENTER || event.keyCode === KeyCode.KEYCODE_SPACE) { + textArrow.action && textArrow.action() + } + }) + .onAreaChange((oldValue: Area, newValue: Area) => { + this.arrowWidth = Number(parseInt(newValue.width.toString(), 0)) + }) + + if (this.textArrowFocus) { + Row() + .height(BUTTON_SIZE) + .width(this.arrowWidth) + .hitTestBehavior(HitTestMode.None) + .border({ + width: BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline') + }) + .borderRadius(MARGIN_NUM) + } + } + } + .onAreaChange((oldValue: Area, newValue: Area) => { + this.textArrowWidth = Number(parseInt(newValue.width.toString(), 0)) + }) + .constraintSize({ minWidth: this.flexWidth / DIVIDEND_WIDTH }) + .justifyContent(FlexAlign.End) + .margin({ left: SPACE_MARGIN }) + } + + @Builder ButtonStyle(button: OperationOption) { + Row() { + Stack() { + Row() { + if (button != null) { + Text(button.value) + .maxLines(1) + .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) + .fontSize($r('sys.float.ohos_id_text_size_button2')) + .fontWeight(FontWeight.Medium) + .margin({ left: SPACE_MARGIN, right: SPACE_MARGIN }) + .focusable(true) + } + } + .justifyContent(FlexAlign.End) + .alignItems(VerticalAlign.Center) + .focusable(true) + .height(BUTTON_HEIGHT) + .margin({ left: SPACE_MARGIN, right: SPACE_MARGIN }) + .borderRadius(IMAGE_WIDTH_NUM) + .backgroundColor(this.buttonBgColor) + .onFocus(() => { + this.buttonFocus = true + }) + .onBlur(() => { + this.buttonFocus = false + }) + .onTouch((event) => { + if (event.type === TouchType.Down) { + if (button.action) { + button.action() + } + this.buttonBgColor = $r('sys.color.ohos_id_color_click_effect') + } + if (event.type === TouchType.Up) { + this.buttonBgColor = $r('sys.color.ohos_id_color_sub_background_transparent') + } + }) + .onHover((isHover: boolean) => { + if (isHover) { + this.buttonBgColor = $r('sys.color.ohos_id_color_hover') + } else { + this.buttonBgColor = $r('sys.color.ohos_id_color_sub_background_transparent') + } + }) + .onKeyEvent((event) => { + if (event.keyCode === KeyCode.KEYCODE_ENTER || event.keyCode === KeyCode.KEYCODE_SPACE) { + button.action && button.action() + } + }) + .onAreaChange((oldValue: Area, newValue: Area) => { + let flexWidth = Number(parseInt(newValue.width.toString(), 0)) + this.buttonWidth = flexWidth + }) + + if (this.buttonFocus) { + Row() + .height(BUTTON_HEIGHT) + .width(this.buttonWidth) + .hitTestBehavior(HitTestMode.None) + .border({ + width: BORDER_WIDTH, + color: $r('sys.color.ohos_id_color_focused_outline') + }) + .borderRadius(IMAGE_WIDTH_NUM) + } + } + } + .constraintSize({ minWidth: this.flexWidth / DIVIDEND_WIDTH }) + .justifyContent(FlexAlign.End) + .focusable(true) + .margin({ left: SPACE_MARGIN }) + } + + build() { + Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.End }) { + if (this.secondaryTitle != null && this.icon != null) { + Row() { + this.ListIconStyle({ content: this.secondaryTitle }, this.icon) + }.margin({ right: SPACE_MARGIN }) + } else if (this.secondaryTitle != null && this.primaryTitle != null) { + this.SubTextStyle({ content: this.primaryTitle, subContent: this.secondaryTitle }) + } else if (this.secondaryTitle != null) { + this.ListTextStyle({ content: this.secondaryTitle }) + } else if (this.select != null) { + this.SelectStyle(this.select) + } else if (this.primaryTitle != null) { + this.ContentTextStyle({ content: this.primaryTitle }) + } + + Row() { + if (this.operationType === OperationType.BUTTON && this.operationItem != null) { + this.ButtonStyle(this.operationItem[0]) + } + if (this.operationType === OperationType.ICON_GROUP && this.operationItem != null) { + Row() { + ForEach(this.operationItem, (item, index?: number) => { + if (index == 0) { + IconGroup({ item: item }) + } + if (index == 1) { + IconGroup({ item: item }) + } + if (index == 2) { // Image count + IconGroup({ item: item }) + } + }) + } + } + if (this.operationType === OperationType.TEXT_ARROW && this.operationItem != null) { + this.TextArrowStyle(this.operationItem[0]) + } + if (this.operationType === OperationType.LOADING) { + this.LoadingProcessStyle() + } + } + } + .focusable(true) + .onAreaChange((oldValue: Area, newValue: Area) => { + let flexWidth = Number(parseInt(newValue.width.toString(), 0)) + this.flexWidth = flexWidth - CONSTRAINT_NUM + }) + .padding({ right: $r('sys.float.ohos_id_default_padding_end') }) + .height(this.isDuplicateLine ? DOUBLE_LINE_HEIGHT : SINGLE_LINE_HEIGHT) + } +} \ No newline at end of file diff --git a/advanced_ui_component/swiperefresher/interfaces/BUILD.gn b/advanced_ui_component/swiperefresher/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..47e1db0f59b3cf1a864003ff92a22553ef51dcca --- /dev/null +++ b/advanced_ui_component/swiperefresher/interfaces/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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") + +es2abc_gen_abc("gen_swiperefresher_abc") { + src_js = rebase_path("swiperefresher.js") + dst_file = rebase_path(target_out_dir + "/swiperefresher.abc") + in_puts = [ "swiperefresher.js" ] + out_puts = [ target_out_dir + "/swiperefresher.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("swiperefresher_abc") { + input = get_label_info(":gen_swiperefresher_abc", "target_out_dir") + + "/swiperefresher.abc" + output = target_out_dir + "/swiperefresher_abc.o" + dep = ":gen_swiperefresher_abc" +} + +ohos_shared_library("swiperefresher") { + sources = [ "swiperefresher.cpp" ] + + deps = [ ":swiperefresher_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/swiperefresher/interfaces/swiperefresher.cpp b/advanced_ui_component/swiperefresher/interfaces/swiperefresher.cpp new file mode 100644 index 0000000000000000000000000000000000000000..87cb94fc44501e3f316fcc8379f210438d0c3e1c --- /dev/null +++ b/advanced_ui_component/swiperefresher/interfaces/swiperefresher.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_swiperefresher_abc_start[]; +extern const char _binary_swiperefresher_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_SwipeRefresher_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_swiperefresher_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_swiperefresher_abc_end - _binary_swiperefresher_abc_start; + } +} + +/* + * Module define + */ +static napi_module SwipeRefresherModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.SwipeRefresher", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void SwipeRefresherRegisterModule(void) +{ + napi_module_register(&SwipeRefresherModule); +} diff --git a/advanced_ui_component/swiperefresher/interfaces/swiperefresher.js b/advanced_ui_component/swiperefresher/interfaces/swiperefresher.js new file mode 100644 index 0000000000000000000000000000000000000000..7ed084e3f4c2fbda9f4a5fe517018718729cf4f2 --- /dev/null +++ b/advanced_ui_component/swiperefresher/interfaces/swiperefresher.js @@ -0,0 +1,121 @@ +/* + * 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 LOADINGPROGRESS_SIZE = 24; +const DEFAULT_MARGIN = 16; +const ITEM_SPACE = 4; + +export class SwipeRefresher extends ViewPU { + constructor(e, t, o, s = -1) { + super(e, o, s); + this.__content = new SynchedPropertySimpleOneWayPU(t.content, this, "content"); + this.__isLoading = new SynchedPropertySimpleOneWayPU(t.isLoading, this, "isLoading"); + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.content ? this.__content.set(e.content) : this.__content.set(null); + void 0 !== e.isLoading ? this.__isLoading.set(e.isLoading) : this.__isLoading.set(!1) + } + + updateStateVars(e) { + this.__content.reset(e.content); + this.__isLoading.reset(e.isLoading) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__content.purgeDependencyOnElmtId(e); + this.__isLoading.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__content.aboutToBeDeleted(); + this.__isLoading.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get content() { + return this.__content.get() + } + + set content(e) { + this.__content.set(e) + } + + get isLoading() { + return this.__isLoading.get() + } + + set isLoading(e) { + this.__isLoading.set(e) + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }); + t || Flex.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.isLoading ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + LoadingProgress.create(); + LoadingProgress.height(24); + LoadingProgress.width(24); + LoadingProgress.margin({ right: 4 }); + t || LoadingProgress.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.content); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.padding({ top: 16, bottom: 16 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Flex.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export default { SwipeRefresher }; \ No newline at end of file diff --git a/advanced_ui_component/swiperefresher/source/swiperefresher.ets b/advanced_ui_component/swiperefresher/source/swiperefresher.ets new file mode 100644 index 0000000000000000000000000000000000000000..bffb307a4ad66cbd338dcb01a5e9bef7d8f91a9b --- /dev/null +++ b/advanced_ui_component/swiperefresher/source/swiperefresher.ets @@ -0,0 +1,46 @@ +/* + * 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 LOADINGPROGRESS_SIZE = 24 +const DEFAULT_MARGIN = 16 +const ITEM_SPACE = 4 + +@Component +export struct SwipeRefresher { + @Prop + content: string = null + @Prop + isLoading: boolean = false; + + build() { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + if (this.isLoading) { + LoadingProgress() + .height(LOADINGPROGRESS_SIZE) + .width(LOADINGPROGRESS_SIZE) + .margin({ + right: ITEM_SPACE + }) + } + Text(this.content) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .padding({ + top: DEFAULT_MARGIN, + bottom: DEFAULT_MARGIN + }) + } + } +} \ No newline at end of file diff --git a/advanced_ui_component/tabtitlebar/interfaces/BUILD.gn b/advanced_ui_component/tabtitlebar/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..18a3062ac7f65cae33f765bd4c311f994a61f008 --- /dev/null +++ b/advanced_ui_component/tabtitlebar/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.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" +} + +gen_obj("tabtitlebar_abc_preview") { + input = get_label_info(":gen_tabtitlebar_abc", "target_out_dir") + + "/tabtitlebar.abc" + output = target_out_dir + "/tabtitlebar_abc.c" + snapshot_dep = [ ":gen_tabtitlebar_abc" ] +} + +ohos_shared_library("tabtitlebar") { + sources = [ "tabtitlebar.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_tabtitlebar_abc_preview" ] + } else { + deps = [ ":tabtitlebar_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/tabtitlebar/interfaces/tabtitlebar.cpp b/advanced_ui_component/tabtitlebar/interfaces/tabtitlebar.cpp new file mode 100644 index 0000000000000000000000000000000000000000..164e6d427da13fb0b7467f2a1d82c9cece74caca --- /dev/null +++ b/advanced_ui_component/tabtitlebar/interfaces/tabtitlebar.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#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; + } +} + +/* + * Module define + */ +static napi_module TabTitleBarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.TabTitleBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void TabTitleBarRegisterModule(void) +{ + napi_module_register(&TabTitleBarModule); +} diff --git a/advanced_ui_component/tabtitlebar/interfaces/tabtitlebar.js b/advanced_ui_component/tabtitlebar/interfaces/tabtitlebar.js new file mode 100644 index 0000000000000000000000000000000000000000..1215b3ff47126d97c994fc5bdf3567a75bcdd760 --- /dev/null +++ b/advanced_ui_component/tabtitlebar/interfaces/tabtitlebar.js @@ -0,0 +1,1157 @@ +/* + * 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, n = arguments.length, + r = n < 3 ? t : null === i ? i = Object.getOwnPropertyDescriptor(t, o) : i; + if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(e, t, o, i); + else + for (var a = e.length - 1; a >= 0; a--)(s = e[a]) && (r = (n < 3 ? s(r) : n > 3 ? s(t, o, r) : s(t, o)) || r); + return n > 3 && r && Object.defineProperty(t, o, r), r +}; +const KeyCode = requireNapi("multimodalInput.keyCode").KeyCode; +const MeasureText = requireNapi("measure"); +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.tabOffsets = Array(); + this.imageWidths = Array(); + 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.tabOffsets && (this.tabOffsets = e.tabOffsets); + void 0 !== e.imageWidths && (this.imageWidths = e.imageWidths); + 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, n = 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(((n, r) => { + ViewStackProcessor.StartGetAccessRecordingFor(n); + Canvas.create(e); + Canvas.width(TabTitleBar.gradientMaskWidth); + Canvas.height(TabTitleBar.totalHeight); + Canvas.onReady((() => { + var n = e.createLinearGradient(t, o, i, s); + n.addColorStop(0, "#ffffffff"); + n.addColorStop(1, "#00ffffff"); + e.fillStyle = n; + e.fillRect(0, 0, TabTitleBar.gradientMaskWidth, TabTitleBar.totalHeight) + })); + r || Canvas.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Canvas.pop(); + Column.pop() + } + aboutToAppear() { + this.tabItems.forEach((e => { + this.imageWidths.push(0) + })); + this.loadOffsets() + } + loadOffsets() { + this.tabOffsets.length = 0; + let e = 0; + this.tabOffsets.push(e); + e += TabContentItem.marginFirst; + this.tabItems.forEach(((t, o) => { + if (void 0 !== t.icon) Math.abs(this.imageWidths[o]) > TabContentItem.imageHotZoneWidth ? e += this.imageWidths[o] : e += TabContentItem.imageHotZoneWidth; + else { + e += TabContentItem.paddingLeft; + e += px2vp(MeasureText.measureText({ + textContent: t.title.toString(), + fontSize: 18, + fontWeight: FontWeight.Medium + })); + e += TabContentItem.paddingRight + } + this.tabOffsets.push(e) + })) + } + 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(n, 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: e => this.currentIndex = e, + onImageComplete: e => { + this.imageWidths[t] = e; + this.loadOffsets() + } + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { + currentIndex: this.currentIndex + }); + ViewStackProcessor.StopGetAccessRecording() + })); + ListItem.pop() + }; + const n = (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: e => this.currentIndex = e, + onImageComplete: e => { + this.imageWidths[t] = e; + this.loadOffsets() + } + }, 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, + index: 1 + TabTitleBar.instanceCount++ + }, 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 => { + const t = this.tabOffsets[e] + TabTitleBar.correctionOffset; + this.currentIndex = e; + this.scroller.scrollTo({ + xOffset: t > 0 ? t : 0, + yOffset: 0, + animation: { + duration: 300, + curve: Curve.EaseInOut + } + }) + })); + 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; +TabTitleBar.instanceCount = 0; +__decorate([], TabTitleBar.prototype, "GradientMask", null); +class CollapsibleMenuSection extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.menuItems = void 0; + this.index = void 0; + this.firstFocusableIndex = -1; + 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.index && (this.index = e.index); + void 0 !== e.firstFocusableIndex && (this.firstFocusableIndex = e.firstFocusableIndex); + 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 + } + aboutToAppear() { + this.menuItems.forEach(((e, t) => { + e.isEnabled && -1 == this.firstFocusableIndex && t > CollapsibleMenuSection.maxCountOfVisibleItems - 2 && (this.firstFocusableIndex = 1e3 * this.index + t + 1) + })) + } + 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, t) => { + const o = e; + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + t + 1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + 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, t) => { + const o = e; + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + t + 1 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + }), void 0, !0, !1); + 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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; + e.isVisible || (this.isMoreIconOnClick = !1) + } + }); + 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 + }); + Column.onAppear((() => { + focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) + })); + 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, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new ImageMenuItem(this, { + item: o, + index: 1e3 * this.index + CollapsibleMenuSection.maxCountOfVisibleItems + t + }, 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.onImageComplete = 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.__tabWidth = new ObservedPropertySimplePU(0, this, "tabWidth"); + this.__imageWidth = new ObservedPropertySimplePU(24, this, "imageWidth"); + this.__imageHeight = new ObservedPropertySimplePU(24, this, "imageHeight"); + 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.onImageComplete && (this.onImageComplete = e.onImageComplete); + void 0 !== e.isOnFocus && (this.isOnFocus = e.isOnFocus); + void 0 !== e.isOnHover && (this.isOnHover = e.isOnHover); + void 0 !== e.isOnClick && (this.isOnClick = e.isOnClick); + void 0 !== e.tabWidth && (this.tabWidth = e.tabWidth); + void 0 !== e.imageWidth && (this.imageWidth = e.imageWidth); + void 0 !== e.imageHeight && (this.imageHeight = e.imageHeight) + } + 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); + this.__tabWidth.purgeDependencyOnElmtId(e); + this.__imageWidth.purgeDependencyOnElmtId(e); + this.__imageHeight.purgeDependencyOnElmtId(e) + } + aboutToBeDeleted() { + this.__currentIndex.aboutToBeDeleted(); + this.__isOnFocus.aboutToBeDeleted(); + this.__isOnHover.aboutToBeDeleted(); + this.__isOnClick.aboutToBeDeleted(); + this.__tabWidth.aboutToBeDeleted(); + this.__imageWidth.aboutToBeDeleted(); + this.__imageHeight.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) + } + get tabWidth() { + return this.__tabWidth.get() + } + set tabWidth(e) { + this.__tabWidth.set(e) + } + get imageWidth() { + return this.__imageWidth.get() + } + set imageWidth(e) { + this.__imageWidth.set(e) + } + get imageHeight() { + return this.__imageHeight.get() + } + set imageHeight(e) { + this.__imageHeight.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 + } + getBorderAttr() { + return this.isOnFocus ? { + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: TabContentItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + } : { + width: 0 + } + } + getImageScaleFactor() { + return this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1 + } + getImageLayoutWidth() { + return TabContentItem.imageSize / Math.max(this.imageHeight, 1) * this.imageWidth + } + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create(); + Stack.margin({ + left: 0 === this.index ? TabContentItem.marginFirst : 0, + right: this.index === this.maxIndex ? 12 : 0 + }); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.height(TabTitleBar.totalHeight); + Row.alignItems(VerticalAlign.Center); + Row.justifyContent(FlexAlign.Center); + Row.borderRadius(TabContentItem.buttonBorderRadius); + Row.backgroundColor(this.getBgColor()); + Row.onAreaChange(((e, t) => { + this.tabWidth = Number(t.width) + })); + 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); + Context.animation({ + duration: 300 + }); + 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); + Context.animation(null); + Text.padding({ + top: this.index === this.currentIndex ? 6 : 10, + left: TabContentItem.paddingLeft, + bottom: 2, + right: TabContentItem.paddingRight + }); + 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(this.index))); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Context.animation({ + duration: 300 + }); + Row.width(this.getImageLayoutWidth() * this.getImageScaleFactor() + TabContentItem.paddingLeft + TabContentItem.paddingRight); + Row.constraintSize({ + minWidth: TabContentItem.imageHotZoneWidth, + minHeight: TabContentItem.imageHotZoneWidth + }); + Context.animation(null); + 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(this.index))); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.icon); + Context.animation({ + duration: 300 + }); + Image.alt(this.item.title); + Image.width(this.getImageLayoutWidth()); + Image.height(TabContentItem.imageSize); + Image.objectFit(ImageFit.Fill); + Image.scale({ + x: this.getImageScaleFactor(), + y: this.getImageScaleFactor() + }); + Context.animation(null); + Image.hitTestBehavior(HitTestMode.None); + Image.focusable(!0); + Image.onComplete((e => { + if (this.onImageComplete) { + this.imageWidth = px2vp(e.width); + this.imageHeight = px2vp(e.height); + this.onImageComplete(px2vp(e.componentWidth) + TabContentItem.paddingLeft + TabContentItem.paddingRight) + } + })); + Image.onError((e => { + this.onImageComplete && this.onImageComplete(px2vp(e.componentWidth) + TabContentItem.paddingLeft + TabContentItem.paddingRight) + })); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.isOnFocus && this.tabWidth > 0 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.width(this.tabWidth); + Row.height(TabTitleBar.totalHeight); + Row.hitTestBehavior(HitTestMode.None); + Row.borderRadius(TabContentItem.buttonBorderRadius); + ViewStackProcessor.visualState("focused"); + Row.border(this.getBorderAttr()); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Stack.pop() + } + rerender() { + this.updateDirtyElements() + } +} +TabContentItem.imageSize = 24; +TabContentItem.imageHotZoneWidth = 48; +TabContentItem.imageMagnificationFactor = 1.4; +TabContentItem.buttonBorderRadius = 8; +TabContentItem.focusBorderWidth = 2; +TabContentItem.paddingLeft = 8; +TabContentItem.paddingRight = 8; +TabContentItem.marginFirst = 16; +class ImageMenuItem extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.item = void 0; + this.index = 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.index && (this.index = e.index); + 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); + ViewStackProcessor.visualState("focused"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: ImageMenuItem.focusBorderWidth, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + 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); + Image.key(ImageMenuItem.focusablePrefix + this.index); + 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; +ImageMenuItem.focusablePrefix = "Id-TabTitleBar-ImageMenuItem-"; +export default { + TabTitleBar: TabTitleBar +}; \ No newline at end of file diff --git a/advanced_ui_component/tabtitlebar/source/tabtitlebar.ets b/advanced_ui_component/tabtitlebar/source/tabtitlebar.ets new file mode 100644 index 0000000000000000000000000000000000000000..a27ba788370bfa8541d21394d03e5c7ce9c9f355 --- /dev/null +++ b/advanced_ui_component/tabtitlebar/source/tabtitlebar.ets @@ -0,0 +1,650 @@ +/* + * 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' +import MeasureText from '@ohos.measure' + +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 static instanceCount = 0 + + private menuSectionWidth = 0 + private tabOffsets = Array() + private imageWidths = Array() + + 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) + } + + aboutToAppear() { + this.tabItems.forEach((_elem) => { + this.imageWidths.push(0) + }) + this.loadOffsets() + } + + loadOffsets() { + this.tabOffsets.length = 0 + + let tabOffset = 0 + this.tabOffsets.push(tabOffset) + tabOffset += TabContentItem.marginFirst + + this.tabItems.forEach((tabItem, index) => { + if (tabItem.icon !== undefined) { + if (Math.abs(this.imageWidths[index]) > TabContentItem.imageHotZoneWidth) { + tabOffset += this.imageWidths[index] + } else { + tabOffset += TabContentItem.imageHotZoneWidth + } + } else { + tabOffset += TabContentItem.paddingLeft + tabOffset += px2vp(MeasureText.measureText({ + textContent: tabItem.title.toString(), + fontSize: 18, + fontWeight: FontWeight.Medium, + })) + tabOffset += TabContentItem.paddingRight + } + this.tabOffsets.push(tabOffset) + }) + } + + 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) => { + ListItem() { + TabContentItem({ + item: tabItem, + index: index, + maxIndex: this.tabItems.length - 1, + currentIndex: this.currentIndex, + onCustomClick: (itemIndex) => this.currentIndex = itemIndex, + onImageComplete: (width) => { + this.imageWidths[index] = width + this.loadOffsets() + } + }) + } + }) + } + .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, index: 1 + TabTitleBar.instanceCount++ }) + .height(TabTitleBar.totalHeight) + .onAreaChange((_oldValue, newValue) => { + 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, newValue) => { + 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) => { + const offset = this.tabOffsets[index] + TabTitleBar.correctionOffset + this.currentIndex = index + this.scroller.scrollTo({ + xOffset: offset > 0 ? offset : 0, + yOffset: 0, + animation: { + duration: 300, + curve: Curve.EaseInOut + } + }) + }) + .onAppear(() => { + this.scroller.scrollToIndex(this.currentIndex) + this.scroller.scrollBy(TabTitleBar.correctionOffset, 0) + }) + } + } + } +} + +@Component +struct CollapsibleMenuSection { + menuItems: Array + index: number + + static readonly maxCountOfVisibleItems = 1 + private static readonly focusPadding = 4 + private static readonly marginsNum = 2 + private firstFocusableIndex = -1 + + @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 + } + } + + aboutToAppear() { + this.menuItems.forEach((item, index) => { + if (item.isEnabled && this.firstFocusableIndex == -1 && index > CollapsibleMenuSection.maxCountOfVisibleItems - 2) { + this.firstFocusableIndex = this.index * 1000 + index + 1 + } + }) + } + + build() { + Column() { + Row() { + if (this.menuItems.length <= CollapsibleMenuSection.maxCountOfVisibleItems) { + ForEach(this.menuItems, (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + index + 1 }) + }) + } else { + ForEach(this.menuItems.slice(0, CollapsibleMenuSection.maxCountOfVisibleItems - 1), (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + index + 1 }) + }) + + 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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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 + if (!e.isVisible) { + this.isMoreIconOnClick = false + } + } + }) + } + } + } + .height('100%') + .justifyContent(FlexAlign.Center) + } + + @Builder + popupBuilder() { + Column() { + ForEach(this.menuItems.slice(CollapsibleMenuSection.maxCountOfVisibleItems - 1, this.menuItems.length), (item, index) => { + ImageMenuItem({ item: item, index: this.index * 1000 + CollapsibleMenuSection.maxCountOfVisibleItems + index }) + }) + } + .width(ImageMenuItem.imageHotZoneWidth + CollapsibleMenuSection.focusPadding * CollapsibleMenuSection.marginsNum) + .margin({ top: CollapsibleMenuSection.focusPadding, bottom: CollapsibleMenuSection.focusPadding }) + .onAppear(() => { + focusControl.requestFocus(ImageMenuItem.focusablePrefix + this.firstFocusableIndex) + }) + } +} + +@Component +struct TabContentItem { + item: TabTitleBarTabItem + index: number + maxIndex: number + onCustomClick?: (index: number) => void + onImageComplete?: (width: number) => void + + @Prop currentIndex: number + + @State isOnFocus: boolean = false + @State isOnHover: boolean = false + @State isOnClick: boolean = false + @State tabWidth: number = 0 + + @State imageWidth: number = 24 + @State imageHeight: number = 24 + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly imageMagnificationFactor = 1.4 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly paddingLeft = 8 + static readonly paddingRight = 8 + static readonly marginFirst = 16 + + 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 + } + } + + getBorderAttr() { + if (this.isOnFocus) { + return { + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: TabContentItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + } + } + return { width: 0 } + } + + getImageScaleFactor(): number { + return this.index === this.currentIndex ? TabContentItem.imageMagnificationFactor : 1 + } + + getImageLayoutWidth(): number { + return TabContentItem.imageSize / Math.max(this.imageHeight, 1.0) * this.imageWidth + } + + build() { + Stack() { + 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) + .animation({ duration: 300 }) + .padding({ + top: this.index === this.currentIndex ? 6 : 10, + left: TabContentItem.paddingLeft, + bottom: 2, + right: TabContentItem.paddingRight + }) + .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(this.index)) + } else { + Row() { + Image(this.item.icon) + .alt(this.item.title) + .width(this.getImageLayoutWidth()) + .height(TabContentItem.imageSize) + .objectFit(ImageFit.Fill) + .scale({ + x: this.getImageScaleFactor(), + y: this.getImageScaleFactor() + }) + .animation({ duration: 300 }) + .hitTestBehavior(HitTestMode.None) + .focusable(true) + .onComplete((event) => { + if (!this.onImageComplete) { + return + } + this.imageWidth = px2vp(event.width) + this.imageHeight = px2vp(event.height) + this.onImageComplete(px2vp(event.componentWidth) + + TabContentItem.paddingLeft + TabContentItem.paddingRight) + }) + .onError((event) => { + if (!this.onImageComplete) { + return + } + this.onImageComplete(px2vp(event.componentWidth) + + TabContentItem.paddingLeft + TabContentItem.paddingRight) + }) + } + .width(this.getImageLayoutWidth() * this.getImageScaleFactor() + + TabContentItem.paddingLeft + TabContentItem.paddingRight) + .constraintSize({ + minWidth: TabContentItem.imageHotZoneWidth, + minHeight: TabContentItem.imageHotZoneWidth + }) + .animation({ duration: 300 }) + .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(this.index)) + } + } + .justifyContent(FlexAlign.Center) + } + .height(TabTitleBar.totalHeight) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .borderRadius(TabContentItem.buttonBorderRadius) + .backgroundColor(this.getBgColor()) + .onAreaChange((_oldValue, newValue) => { + this.tabWidth = Number(newValue.width) + }) + + if (this.isOnFocus && this.tabWidth > 0) { + Row() + .width(this.tabWidth) + .height(TabTitleBar.totalHeight) + .hitTestBehavior(HitTestMode.None) + .borderRadius(TabContentItem.buttonBorderRadius) + .stateStyles({ + focused: { + .border(this.getBorderAttr()) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 + }) + } + }) + } + } + .margin({ + left: this.index === 0 ? TabContentItem.marginFirst : 0, + right: this.index === this.maxIndex ? 12 : 0 + }) + } +} + +@Component +struct ImageMenuItem { + item: TabTitleBarMenuItem + index: number + + static readonly imageSize = 24 + static readonly imageHotZoneWidth = 48 + static readonly buttonBorderRadius = 8 + static readonly focusBorderWidth = 2 + static readonly disabledImageOpacity = 0.4 + static readonly focusablePrefix = "Id-TabTitleBar-ImageMenuItem-" + + @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) + .key(ImageMenuItem.focusablePrefix + this.index) + } + .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) + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: ImageMenuItem.focusBorderWidth, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + 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 diff --git a/advanced_ui_component/toolbar/interfaces/BUILD.gn b/advanced_ui_component/toolbar/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..73e7dd1f53199e3df567455194c4b19b96120c1d --- /dev/null +++ b/advanced_ui_component/toolbar/interfaces/BUILD.gn @@ -0,0 +1,57 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_toolbar_abc") { + src_js = rebase_path("toolbar.js") + dst_file = rebase_path(target_out_dir + "/toolbar.abc") + in_puts = [ "toolbar.js" ] + out_puts = [ target_out_dir + "/toolbar.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("toolbar_abc") { + input = get_label_info(":gen_toolbar_abc", "target_out_dir") + "/toolbar.abc" + output = target_out_dir + "/toolbar_abc.o" + dep = ":gen_toolbar_abc" +} + +gen_obj("toolbar_abc_preview") { + input = get_label_info(":gen_toolbar_abc", "target_out_dir") + "/toolbar.abc" + output = target_out_dir + "/toolbar_abc.c" + snapshot_dep = [ ":gen_toolbar_abc" ] +} + +ohos_shared_library("toolbar") { + sources = [ "toolbar.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_toolbar_abc_preview" ] + } else { + deps = [ ":toolbar_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/toolbar/interfaces/toolbar.cpp b/advanced_ui_component/toolbar/interfaces/toolbar.cpp new file mode 100644 index 0000000000000000000000000000000000000000..d261d3c9e1f0932f08926eea8afe4b81ae1740f6 --- /dev/null +++ b/advanced_ui_component/toolbar/interfaces/toolbar.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_toolbar_abc_start[]; +extern const char _binary_toolbar_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_ToolBar_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_toolbar_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_toolbar_abc_end - _binary_toolbar_abc_start; + } +} + +/* + * Module define + */ +static napi_module ToolBarModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.ToolBar", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void ToolBarRegisterModule(void) +{ + napi_module_register(&ToolBarModule); +} diff --git a/advanced_ui_component/toolbar/interfaces/toolbar.js b/advanced_ui_component/toolbar/interfaces/toolbar.js new file mode 100644 index 0000000000000000000000000000000000000000..d97773957b3a7b4c8010b4983a5fff018b442ef5 --- /dev/null +++ b/advanced_ui_component/toolbar/interfaces/toolbar.js @@ -0,0 +1,485 @@ +/* + * 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 REFLECT_MAX_COUNT = 3; +const IMAGE_SIZE_WIDTH_HEIGHT = 24; +const TEXT_MIN_SIZE = 9; +const DISABLE_OPACITY = 0.4; +const TEXT_MAX_LINES = 2; +const TOOLBAR_LIST_LENGTH = 5; +const TOOLBAR_LIST_NORMORL = 4; +const ITEM_DISABLE_STATE = 2; +const ITEM_DISABLE_ACTIVATE = 3; + +let __decorate = this && this.__decorate || function (e, t, o, r) { + let s; + let i = arguments.length; + let a = i < REFLECT_MAX_COUNT ? t : null === r ? r = Object.getOwnPropertyDescriptor(t, o) : r; + if ('object' === typeof Reflect && 'function' === typeof Reflect.decorate) { + a = Reflect.decorate(e, t, o, r); + } else { + for (let n = e.length - 1; n >= 0; n--) { + (s = e[n]) && (a = (i < REFLECT_MAX_COUNT ? s(a) : i > REFLECT_MAX_COUNT ? s(t, o, a) : s(t, o)) || a); + } + } + return i > REFLECT_MAX_COUNT && a && Object.defineProperty(t, o, a), a; +}; +export let ItemState; +!function(e) { + e[e.ENABLE = 1] = 'ENABLE'; + e[e.DISABLE = 2] = 'DISABLE'; + e[e.ACTIVATE = 3] = 'ACTIVATE'; +}(ItemState || (ItemState = {})); +const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAA' + + 'IGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IAr' + + 's4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8' + + 'G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxa' + + 'm9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIYeQ+8lrJyU+re7Hg' + + 'JtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpY' + + 'KTmVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2r' + + 'e1oP43rNDc6wh1qDS/6t0n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdu' + + 'sCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF8EUcdfbsAAAAASUVORK5CYII='; +let ToolBarOption = class { + constructor() { + this.state = 1; + } +}; +ToolBarOption = __decorate([Observed], ToolBarOption); + +export { ToolBarOption }; +let ToolBarOptions = class extends Array { +}; +ToolBarOptions = __decorate([Observed], ToolBarOptions); + +export { ToolBarOptions }; + +export class ToolBar extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.__toolBarList = new SynchedPropertyNesedObjectPU(t.toolBarList, this, 'toolBarList'); + this.controller = void 0; + this.__activateIndex = new SynchedPropertySimpleOneWayPU(t.activateIndex, this, "activateIndex"); + this.__moreText = new SynchedPropertySimpleOneWayPU(t.moreText, this, "moreText"); + this.__menuContent = new ObservedPropertyObjectPU([], this, "menuContent"); + this.toolBarItemBackground = []; + this.__itemBackground = new ObservedPropertyObjectPU({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_bg'], + bundleName: '', + moduleName: '' + }, this, 'itemBackground'); + this.setInitiallyProvidedValue(t); + } + + setInitiallyProvidedValue(e) { + this.__toolBarList.set(e.toolBarList); + void 0 !== e.controller && (this.controller = e.controller); + void 0 !== e.activateIndex ? this.__activateIndex.set(e.activateIndex) : this.__activateIndex.set(-1); + void 0 !== e.moreText ? this.__moreText.set(e.moreText) : this.__moreText.set("更多"); + void 0 !== e.menuContent && (this.menuContent = e.menuContent); + void 0 !== e.toolBarItemBackground && (this.toolBarItemBackground = e.toolBarItemBackground); + void 0 !== e.itemBackground && (this.itemBackground = e.itemBackground); + } + + updateStateVars(e) { + this.__toolBarList.set(e.toolBarList); + this.__activateIndex.reset(e.activateIndex); + this.__moreText.reset(e.moreText) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__toolBarList.purgeDependencyOnElmtId(e); + this.__activateIndex.purgeDependencyOnElmtId(e); + this.__moreText.purgeDependencyOnElmtId(e); + this.__menuContent.purgeDependencyOnElmtId(e); + this.__itemBackground.purgeDependencyOnElmtId(e); + } + + aboutToBeDeleted() { + this.__toolBarList.aboutToBeDeleted(); + this.__activateIndex.aboutToBeDeleted(); + this.__moreText.aboutToBeDeleted(); + this.__menuContent.aboutToBeDeleted(); + this.__itemBackground.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + get toolBarList() { + return this.__toolBarList.get(); + } + + get activateIndex() { + return this.__activateIndex.get(); + } + + set activateIndex(e) { + this.__activateIndex.set(e); + } + + get moreText() { + return this.__moreText.get() + } + + set moreText(e) { + this.__moreText.set(e) + } + + get menuContent() { + return this.__menuContent.get(); + } + + set menuContent(e) { + this.__menuContent.set(e); + } + + get itemBackground() { + return this.__itemBackground.get(); + } + + set itemBackground(e) { + this.__itemBackground.set(e); + } + + MoreTabBuilder(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width('100%'); + Column.height('100%'); + Column.bindMenu(ObservedObject.GetRawObject(this.menuContent), { offset: { x: 5, y: -10 } }); + Column.padding({ left: 4, right: 4 }); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_clicked'], + bundleName: '', + moduleName: '' + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(PUBLIC_MORE); + Image.width(IMAGE_SIZE_WIDTH_HEIGHT); + Image.height(IMAGE_SIZE_WIDTH_HEIGHT); + Image.fillColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_icon'], + bundleName: '', + moduleName: '' + }); + Image.margin({ top: 8, bottom: 2 }); + Image.objectFit(ImageFit.Contain); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.moreText); + Text.fontColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_text'], + bundleName: '', + moduleName: '' + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_caption'], + bundleName: '', + moduleName: '' + }); + Text.fontWeight(FontWeight.Medium); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Column.pop(); + } + + TabBuilder(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Column.create(); + Column.width('100%'); + Column.height('100%'); + Column.focusable(!(ITEM_DISABLE_STATE === this.toolBarList[e].state)); + Column.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[e].state)); + Column.padding({ left: 4, right: 4 }); + Column.borderRadius({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_corner_radius_clicked'], + bundleName: '', + moduleName: '' + }); + Column.backgroundColor(ObservedObject.GetRawObject(this.itemBackground)); + Column.onClick((() => { + ITEM_DISABLE_ACTIVATE === this.toolBarList[e].state && (this.activateIndex === e ? this.activateIndex = -1 : this.activateIndex = e); + ITEM_DISABLE_STATE !== this.toolBarList[e].state && this.toolBarList[e].action && this.toolBarList[e].action(); + })); + Column.onHover((t => { + this.toolBarItemBackground[e] = t ? ITEM_DISABLE_STATE === this.toolBarList[e].state ? { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_bg'], + bundleName: '', + moduleName: '' + } : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_hover'], + bundleName: '', + moduleName: '' + } : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_bg'], + bundleName: '', + moduleName: '' + }; + this.itemBackground = this.toolBarItemBackground[e]; + })); + ViewStackProcessor.visualState('pressed'); + Column.backgroundColor(ITEM_DISABLE_STATE === this.toolBarList[e].state ? this.toolBarItemBackground[e] : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_click_effect'], + bundleName: '', + moduleName: '' + }); + ViewStackProcessor.visualState('normal'); + Column.backgroundColor(this.toolBarItemBackground[e]); + ViewStackProcessor.visualState(); + o || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Image.create(this.toolBarList[e].icon); + Image.width(IMAGE_SIZE_WIDTH_HEIGHT); + Image.height(IMAGE_SIZE_WIDTH_HEIGHT); + Image.fillColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_activated'], + bundleName: '', + moduleName: '' + } : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_primary'], + bundleName: '', + moduleName: '' + }); + Image.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1); + Image.margin({ top: 8, bottom: 2 }); + Image.objectFit(ImageFit.Contain); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(this.toolBarList[e].content); + Text.fontColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_text_actived'], + bundleName: '', + moduleName: '' + } : { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_text'], + bundleName: '', + moduleName: '' + }); + Text.fontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_caption'], + bundleName: '', + moduleName: '' + }); + Text.maxFontSize({ + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_caption'], + bundleName: '', + moduleName: '' + }); + Text.minFontSize(TEXT_MIN_SIZE); + Text.fontWeight(FontWeight.Medium); + Text.maxLines(TEXT_MAX_LINES); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + Text.pop(); + Column.pop(); + } + + refreshData() { + this.menuContent = []; + for (let e = 0; e < this.toolBarList.length; e++) { + if (e >= TOOLBAR_LIST_NORMORL && this.toolBarList.length > TOOLBAR_LIST_LENGTH) { + this.menuContent[e - TOOLBAR_LIST_NORMORL] = { + value: this.toolBarList[e].content, + action: this.toolBarList[e].action + }; + } else { + this.toolBarItemBackground[e] = { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_bg'], + bundleName: '', + moduleName: '' + }; + this.menuContent = []; + } + } + return !0; + } + + aboutToAppear() { + this.refreshData(); + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.width('100%'); + Divider.height(1); + t || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.width('100%'); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Tabs.create({ barPosition: BarPosition.End, controller: this.controller }); + Tabs.vertical(!1); + Tabs.constraintSize({ minHeight: 56, maxHeight: 56 }); + Tabs.barMode(BarMode.Fixed); + Tabs.onChange((e => { + })); + Tabs.width('100%'); + Tabs.padding({ left: this.toolBarList.length < 5 ? 24: 0, right: this.toolBarList.length < 5 ? 24: 0}) + Tabs.backgroundColor({ + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_toolbar_bg'], + bundleName: '', + moduleName: '' + }); + t || Tabs.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + ForEach.create(); + this.forEachUpdateFunction(e, this.toolBarList, ((e, t) => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.toolBarList.length <= TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + TabContent.create(); + TabContent.tabBar({ + builder: () => { + this.TabBuilder.call(this, t); + } + }); + TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); + TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); + o || TabContent.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + TabContent.pop(); + })) : t < TOOLBAR_LIST_NORMORL && this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + TabContent.create(); + TabContent.tabBar({ + builder: () => { + this.TabBuilder.call(this, t); + } + }); + TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); + TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state)); + o || TabContent.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + TabContent.pop(); + })); + o || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + }), void 0, !0, !1); + t || ForEach.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + ForEach.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.refreshData() && this.toolBarList.length > TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + TabContent.create(); + TabContent.tabBar({ + builder: () => { + this.MoreTabBuilder.call(this, TOOLBAR_LIST_NORMORL); + } + }); + t || TabContent.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + TabContent.pop(); + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording(); + })); + If.pop(); + Tabs.pop(); + Column.pop(); + Column.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} +export default { ToolBarOptions, ToolBar }; \ No newline at end of file diff --git a/advanced_ui_component/toolbar/source/toolbar.ets b/advanced_ui_component/toolbar/source/toolbar.ets new file mode 100644 index 0000000000000000000000000000000000000000..9cb9f44b4341c5bf9bb2ec227b49e0b71e5949f1 --- /dev/null +++ b/advanced_ui_component/toolbar/source/toolbar.ets @@ -0,0 +1,180 @@ +/* + * 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. + */ + +export enum ItemState { + ENABLE = 1, + DISABLE = 2, + ACTIVATE = 3 +} + +const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA" + + "+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzA" + + "AAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I" + + "3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxam9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIY" + + "eQ+8lrJyU+re7HgJtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpYKT" + + "mVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2re1oP43rNDc6wh1qDS/6t0" + + "n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdusCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF" + + "8EUcdfbsAAAAASUVORK5CYII="; + +@Observed +export class ToolBarOption { + content: string; + action?: () => void; + icon?: Resource; + state?: ItemState = 1; +} + +@Observed +export class ToolBarOptions extends Array { +} + +@Component +export struct ToolBar { + @ObjectLink toolBarList: ToolBarOptions + controller: TabsController + @Prop activateIndex: number = -1 + @Prop moreText: string = "更多" + @State menuContent: { value: string, action: () => void }[] = [] + toolBarItemBackground: Resource[] = [] + @State itemBackground: Resource = $r('sys.color.ohos_id_color_toolbar_bg') + @Builder MoreTabBuilder(index: number) { + Column() { + Image(PUBLIC_MORE) + .width(24) + .height(24) + .fillColor($r('sys.color.ohos_id_color_toolbar_icon')) + .margin({ top: 8, bottom: 2 }) + .objectFit(ImageFit.Contain) + Text(this.moreText) + .fontColor($r('sys.color.ohos_id_color_toolbar_text')) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .fontWeight(FontWeight.Medium) + }.width('100%').height('100%').bindMenu(this.menuContent, { offset: { x: 5, y : -10}}) + .padding({left: 4, right: 4}) + .borderRadius($r('sys.float.ohos_id_corner_radius_clicked')) + } + + @Builder TabBuilder(index: number) { + Column() { + Image(this.toolBarList[index].icon) + .width(24) + .height(24) + .fillColor(this.activateIndex === index && !(this.toolBarList[index].state === 2) + ? $r('sys.color.ohos_id_color_text_primary_activated') : $r('sys.color.ohos_id_color_primary')) + .opacity((this.toolBarList[index].state === 2) ? 0.4 : 1) + .margin({ top: 8, bottom: 2 }) + .objectFit(ImageFit.Contain) + Text(this.toolBarList[index].content) + .fontColor(this.activateIndex === index && !(this.toolBarList[index].state === 2) + ? $r('sys.color.ohos_id_color_toolbar_text_actived') : $r('sys.color.ohos_id_color_toolbar_text')) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .maxFontSize($r('sys.float.ohos_id_text_size_caption')) + .minFontSize(9) + .fontWeight(FontWeight.Medium) + .maxLines(2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .opacity((this.toolBarList[index].state === 2) ? 0.4 : 1) + } + .width('100%').height('100%') + .focusable(!(this.toolBarList[index].state === 2)) + .focusOnTouch(!(this.toolBarList[index].state === 2)) + .padding({left: 4, right: 4}) + .borderRadius($r('sys.float.ohos_id_corner_radius_clicked')) + .backgroundColor(this.itemBackground) + .onClick(() => { + if (this.toolBarList[index].state === 3) { + if (this.activateIndex === index) + this.activateIndex = -1 + else { + this.activateIndex = index + } + } + if (!(this.toolBarList[index].state === 2)) { + this.toolBarList[index].action && this.toolBarList[index].action() + } + }) + .onHover((isHover: boolean) => { + if (isHover ) { + this.toolBarItemBackground[index] = (this.toolBarList[index].state === 2) + ? $r('sys.color.ohos_id_color_toolbar_bg'): $r('sys.color.ohos_id_color_hover') + } else { + this.toolBarItemBackground[index] = $r('sys.color.ohos_id_color_toolbar_bg') + } + this.itemBackground = this.toolBarItemBackground[index] + }) + .stateStyles({ + pressed: { + .backgroundColor((this.toolBarList[index].state === 2) ? this.toolBarItemBackground[index] : $r('sys.color.ohos_id_color_click_effect')) + }, + normal: { + .backgroundColor(this.toolBarItemBackground[index]) + } + }) + } + + refreshData() { + this.menuContent = [] + for (let i = 0; i < this.toolBarList.length; i++) { + if (i >= 4 && this.toolBarList.length > 5) { + this.menuContent[i - 4] = { + value: this.toolBarList[i].content, + action: this.toolBarList[i].action + } + } else { + this.toolBarItemBackground[i] = $r('sys.color.ohos_id_color_toolbar_bg') + this.menuContent = [] + } + } + return true + } + + aboutToAppear() { + this.refreshData() + } + build() { + Column() { + Divider().width('100%').height(1) + Column() { + Tabs({ barPosition: BarPosition.End, controller: this.controller}) { + ForEach(this.toolBarList, (item: ToolBarOption, index: number) => { + if (this.toolBarList.length <= 5) { + TabContent() { + }.tabBar(this.TabBuilder(index)) + .enabled(!(this.toolBarList[index].state === 2)) + .focusOnTouch(!(this.toolBarList[index].state === 2)) + } else if (index < 4){ + TabContent() { + }.tabBar(this.TabBuilder(index)) + .enabled(!(this.toolBarList[index].state === 2)) + .focusOnTouch(!(this.toolBarList[index].state === 2)) + } + }) + if (this.refreshData() && this.toolBarList.length > 5) { + TabContent() { + }.tabBar(this.MoreTabBuilder(4)) + } + } + .vertical(false) + .constraintSize({ minHeight: 56, maxHeight: 56}) + .barMode(BarMode.Fixed) + .onChange((index: number) => { + }) + .width('100%') + .padding({ left: this.toolBarList.length < 5? 24 : 0, right: this.toolBarList.length < 5? 24 : 0}) + .backgroundColor($r('sys.color.ohos_id_color_toolbar_bg')) + }.width('100%') + } + } +} \ No newline at end of file diff --git a/advanced_ui_component/treeview/interfaces/BUILD.gn b/advanced_ui_component/treeview/interfaces/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..db13a9e604c559c1ea528f72b0c254d6db79b545 --- /dev/null +++ b/advanced_ui_component/treeview/interfaces/BUILD.gn @@ -0,0 +1,59 @@ +# 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("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") +import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") + +es2abc_gen_abc("gen_treeview_abc") { + src_js = rebase_path("treeview.js") + dst_file = rebase_path(target_out_dir + "/treeview.abc") + in_puts = [ "treeview.js" ] + out_puts = [ target_out_dir + "/treeview.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("treeview_abc") { + input = + get_label_info(":gen_treeview_abc", "target_out_dir") + "/treeview.abc" + output = target_out_dir + "/treeview_abc.o" + dep = ":gen_treeview_abc" +} + +gen_obj("treeview_abc_preview") { + input = + get_label_info(":gen_treeview_abc", "target_out_dir") + "/treeview.abc" + output = target_out_dir + "/treeview_abc.c" + snapshot_dep = [ ":gen_treeview_abc" ] +} + +ohos_shared_library("treeview") { + sources = [ "treeview.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_treeview_abc_preview" ] + } else { + deps = [ ":treeview_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/arkui/advanced" + subsystem_name = ace_engine_subsystem + part_name = ace_engine_part +} diff --git a/advanced_ui_component/treeview/interfaces/treeview.cpp b/advanced_ui_component/treeview/interfaces/treeview.cpp new file mode 100644 index 0000000000000000000000000000000000000000..cbac968fb672c6e262459896695f2a1cffbcd957 --- /dev/null +++ b/advanced_ui_component/treeview/interfaces/treeview.cpp @@ -0,0 +1,54 @@ +/* + * 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_treeview_abc_start[]; +extern const char _binary_treeview_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_arkui_advanced_TreeView_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_treeview_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_treeview_abc_end - _binary_treeview_abc_start; + } +} + +/* + * Module define + */ +static napi_module TreeViewModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.TreeView", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void TreeViewRegisterModule(void) +{ + napi_module_register(&TreeViewModule); +} diff --git a/advanced_ui_component/treeview/interfaces/treeview.js b/advanced_ui_component/treeview/interfaces/treeview.js new file mode 100644 index 0000000000000000000000000000000000000000..550d33614d228b4ce5862eb8467e4abbbac24ac4 --- /dev/null +++ b/advanced_ui_component/treeview/interfaces/treeview.js @@ -0,0 +1,3777 @@ +/* + * 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, i, o) { + var s, a = arguments.length, d = a < 3 ? t : null === o ? o = Object.getOwnPropertyDescriptor(t, i) : o; + if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) d = Reflect.decorate(e, t, i, o); else for (var r = e.length - 1;r >= 0; r--) (s = e[r]) && (d = (a < 3 ? s(d) : a > 3 ? s(t, i, d) : s(t, i)) || d); + return a > 3 && d && Object.defineProperty(t, i, d), d +}; +const IMAGE_NODE_HEIGHT = 24; +const IMAGE_NODE_WIDTH = 24; +const ITEM_WIDTH = 0; +const ITEM_HEIGHT = 48; +const ITEM_HEIGHT_INPUT = 32; +const BORDER_WIDTH_HAS = 2; +const BORDER_WIDTH_NONE = 0; +const NODE_HEIGHT = 48; +const LIST_ITEM_HEIGHT_NONE = 0; +const LIST_ITEM_HEIGHT = 48; +const SHADOW_OFFSETY = 10; +const FLAG_NUMBER = 2; +const DRAG_OPACITY = .4; +const DRAG_OPACITY_NONE = 1; +const FLAG_LINE_HEIGHT = "1.0vp"; +const X_OFF_SET = "0vp"; +const Y_OFF_SET = "2.75vp"; +const Y_BOTTOM_OFF_SET = "-1.25vp"; +const Y_BASE_PLATE_OFF_SET = "1.5vp"; +const COLOR_SELECT = "#1A0A59F7"; +const COLOR_IMAGE_ROW = "#00000000"; +const COLOR_IMAGE_EDIT = "#FFFFFF"; +const SHADOW_COLOR = "#00001E"; +const GRAG_POP_UP_HEIGHT = "48"; +const LEFT_PADDING = "8vp"; +const RIGHT_PADDING = "8vp"; +const FLOOR_MIN_WIDTH = "128vp"; +const FLOOR_MAX_WIDTH = "208vp"; +const TEXT_MIN_WIDTH = "80vp"; +const TEXT_MAX_WIDTH = "160vp"; +const MIN_WIDTH = "112vp"; +const MAX_WIDTH = "192vp"; +const TRANS_COLOR = "#00FFFFFF"; + +const ARROW_DOWN = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA+' + + 'gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzA' + + 'AAOxAAADsQBlSsOGwAAAq9JREFUeNrt2j9rFEEYx/FJziIECwsLCwsJIVhYiISgaIhiioiIlpaCjZ1/qhNUIkHE0negpZggEnwHFgoWFiJic' + + 'VyRQsQXIHKIvyGzIJKbmTW7M7P6/cCvyR3c7fPsPLO7F2MAAAAAAAAAAAAAAAAAAAAAAAAAAF01keAz9ihrymVln/JEua18L7w2V5TrykHlt' + + 'XJTGTb9Ib0EB/JYueWKP6Ucd3mh/Ci0+Hfc9z6gTCuHlUvK06ZPnMkEB3Nth78tK89dQ0os/toOfz+kHG36w1I0YNwZs6JsFtaEccVvTYoGr' + + 'HteW3ajaKoDxbfz/10X94BXyoIyO+b1Wbcn2JE0ylT8VeW+5/UtZUn52sUG/FQ23PycG/OeGWXevW+U4cwPFf+MMmjjw3uJDnLkRo2vCTlWQ' + + 'l954Hn9i3Je+djWF+glPNNimlCthJcJLlH7buZPemb+ovKpzS/RS7zcqybMB/aEhZZXwmqg+NXMH7ZdkNQNqJrwLLAxz7Q4jkIzf5iq+LkaU' + + 'GdjbroJoUvNb674g1SFyNWAOntCU48tYq7zzyqfUxYhZwPqNOHYLi9RQ8XfylH8EhpQZ2P+23EUU/zFlGOntAbU2Zjr3qyF7nCrsTPIdeClN' + + 'CB2Y66zEvoRG26WsVNqA+rerPlWwg3lYeAmayl38UtsQBOPLezMfxRxkzUo4WBLbEDsxmxXwinlrRsn+5W7yr1SbrJiTJiy2d+T7Y82K4H32' + + 'QbsNf7fFeyDtRMlFb/kFVBnY7amXbN8l5oXTYtPNf/VBsTuCSZQfPs8/0OJB9eFBuymCXbsnCxlw+1yA2I35j+Lf860/Dz/f2rA73fMdhUc8' + + 'bzvjXKhxJnftasgH3sJelU5bbb/Z8ee8e/N9j9PrZt8P/ADAAAAAAAAAAAAAAAAAAAAAAAgpV9KuZwVm6MIDQAAAABJRU5ErkJggg==' + +const ARROW_DOWN_WITHE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIGNIUk0AAHomAAC' + + 'AhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAl' + + 'wSFlzAAAOxAAADsQBlSsOGwAAAKVJREFUeNpjYBgFo2AU0Bww4pL4////diC1hZGRcSo+A4DqWIDUZCB+AVTbiC7PhEfvByCeAjQgn4Dhy4E' + + '4BYgvYFODz4JYIF4DxBOwWYJkeAAQRwBdvxGbIcy4TG9sbPzX0NCwHsjUAuIiIPsDUOwkDsPXkhwHWFwaAsQlQAwyrJsYw4myAIslIPCHGMP' + + 'xBhGO4PoGxF+AOA9o+NbRTDgKRgFxAAAzj0Grm3RjyAAAAABJRU5ErkJggg==' + +const ARROW_RIGHT = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA' + + '+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlz' + + 'AAAOxAAADsQBlSsOGwAAAjVJREFUeNrtnCtvG1EQRq+9BlVUEBAYYFBgYGBYaBBoFUVVfkCtyqDAIL8jtI8EBruVIgU4UvMD0iKDPmirtlJg' + + 'lJZUyqzsSFXlxwZsPPPtOdJHbDKac+/cXXvtlAAAAAAAAAAAAAAAAAAAAAAUyZzW1bMMLbuWv5YvqgJqTps/sjT+eW1geckOuB+OLdtzpHy3' + + 'fFQTUHdY06MFr7+xPGMHlE93iYQnajvBo4APlj3LRhUkeBRwaRnProDkJXi9DP1ZFQmZ49oqISFzXl9RCb8sFwhYn4Sw9wlZkDplx1EWqFZJ' + + 'CVmwHSsnIZoAuYM5ogCpgzmqAJlxFFmAxDiKLiD8OFIQEHocqQgIK0FJwF0kfLZMELA+CTuWI8s1AtYj4YHlt+UcAeVK+JqmX2/OY9Pyat1F' + + '1pM2J2n6Fec8mh4KVBdwO27m8RAB5dNb0uhPCCiXTpo+zLWItwgoj/bsKmhrwft/PBzAOQ3RlT9a0vycF5ZvHoqtCTZ/vKL5fcuhl4KVRlA7' + + 'WvOVBOQP875f0fyBt+arnAH52DmNtvJVzoBwM19pBBVp/r7n5kceQa0CYyfE78pqoiu/733lRxUg1fxoZ0BbrfmRzoAiHy+Ea36UEdRRXPlR' + + 'RlCR5g+iNt/7CGoqr3zvAuRXvucR1CrQ/GES+fMOjzvgQH3seN8B3ao036uASVWan+Pxybgflqf/LY78wH2dBPF6I/bY8txyZXlnOUsAAAAA' + + 'AAAAAAAAAAAAAAAAEIgb8WKMjSFbuAQAAAAASUVORK5CYII=' + +const ARROW_RIGHT_WITHE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIGNIUk0AAHomAA' + + 'CAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA' + + 'lwSFlzAAAOxAAADsQBlSsOGwAAAKFJREFUeNpjYBgFowAE/v//bwHEPOToZSJS3XIg3k6OJcRaUALEFuRYwkyMosbGxusNDQ3XgMwCIHYAsl' + + 'cDxX5RzQJKLGEmxbvkWMJEaqQxMjKuBVI5QGwDxOnUimR08AFK81DdAmAqArl8DhDfAOKpVLUAavh2IH4CxI7A4HpDMEgpMPwFUXFGS8NJCa' + + 'L55BgOAixEqqsB4oOkGj4KRggAAN4STB9zyhGzAAAAAElFTkSuQmCC' + +var Event; +!function(e){ + e[e.TOUCH_DOWN=0] = "TOUCH_DOWN"; + e[e.TOUCH_UP=1] = "TOUCH_UP"; + e[e.HOVER=3] = "HOVER"; + e[e.HOVER_OVER=4] = "HOVER_OVER"; + e[e.FOCUS=5] = "FOCUS"; + e[e.BLUR=6] = "BLUR"; + e[e.MOUSE_BUTTON_RIGHT=7] = "MOUSE_BUTTON_RIGHT"; + e[e.DRAG=8] = "DRAG" +}(Event || (Event = {})); +var MenuOperation; +!function(e){ + e[e.ADD_NODE=0] = "ADD_NODE"; + e[e.REMOVE_NODE=1] = "REMOVE_NODE"; + e[e.MODIFY_NODE=2] = "MODIFY_NODE"; + e[e.COMMIT_NODE=3] = "COMMIT_NODE" +}(MenuOperation || (MenuOperation = {})); +var PopUpType; +!function(e){ + e[e.HINTS=0] = "HINTS"; + e[e.WARNINGS=1] = "WARNINGS" +}(PopUpType || (PopUpType = {})); +var InputError; +!function(e){ + e[e.INVALID_ERROR=0] = "INVALID_ERROR"; + e[e.LENGTH_ERROR=1] = "LENGTH_ERROR"; + e[e.NONE=2] = "NONE" +}(InputError || (InputError = {})); +var Flag; +!function(e){ + e[e.DOWN_FLAG=0] = "DOWN_FLAG"; + e[e.UP_FLAG=1] = "UP_FLAG"; + e[e.NONE=2] = "NONE" +}(Flag || (Flag = {})); + +export var NodeStatus; +!function(e){ + e[e.Expand=0] = "Expand"; + e[e.Collapse=1] = "Collapse" +}(NodeStatus || (NodeStatus = {})); + +export var InteractionStatus; +!function(e){ + e[e.Normal=0] = "Normal"; + e[e.Selected=1] = "Selected"; + e[e.Edit=2] = "Edit"; + e[e.FinishEdit=3] = "FinishEdit"; + e[e.DragInsert=4] = "DragInsert"; + e[e.FinishDragInsert=5] = "FinishDragInsert" +}(InteractionStatus || (InteractionStatus = {})); + +function findCurrentNodeIndex(e) { + let t = 0; + this.listNodeDataSource.ListNode.forEach((function (i, o) { + i.getNodeCurrentNodeId() == e && (t = o) + })); + return t +} + +let NodeInfo = class { + constructor(e) { + this.borderWidth = { has: 2, none: 0 }; + this.canShowFlagLine = !1; + this.isOverBorder = !1; + this.canShowBottomFlagLine = !1; + this.isHighLight = !1; + this.isModify = !1; + this.childNodeInfo = e.getChildNodeInfo(); + this.nodeItem = { imageNode: null, inputText: null, mainTitleNode: null, imageCollapse: null }; + this.popUpInfo = { + popUpIsShow: !1, + popUpEnableArrow: !1, + popUpColor: null, + popUpText: "", + popUpTextColor: null + }; + this.nodeItem.imageNode = e.getNodeItem().imageNode; + this.nodeItem.inputText = new TreeView.InputText; + this.nodeItem.mainTitleNode = e.getNodeItem().mainTitleNode; + this.nodeItem.imageCollapse = e.getNodeItem().imageCollapse; + this.container = e.container; + this.parentNodeId = e.parentNodeId; + this.currentNodeId = e.currentNodeId; + this.nodeHeight = 48; + this.nodeLevel = e.nodeLevel; + this.nodeLeftPadding = 12 * e.nodeLevel + 8; + this.nodeColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }; + this.nodeIsShow = !(this.nodeLevel > 0); + this.listItemHeight = this.nodeLevel > 0 ? 0 : 48; + this.isShowTitle = !0; + this.isShowInputText = !1; + this.isSelected = !1; + this.status = { + normal: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background_transparent"], + bundleName: "", + moduleName: "" + }, + hover: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }, + press: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }, + selected: "#1A0A59F7", + highLight: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_activated"], + bundleName: "", + moduleName: "" + } + }; + this.nodeBorder = { + borderWidth: 0, + borderColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + borderRadius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + } + }; + this.flagLineLeftMargin = 12 * e.nodeLevel + 8; + this.node = e; + this.nodeParam = e.data + } + + setFontColor(e) { + this.fontColor = e + } + + getFontColor() { + return this.fontColor + } + + getPopUpInfo() { + return this.popUpInfo + } + + setPopUpIsShow(e) { + this.popUpInfo.popUpIsShow = e + } + + setPopUpEnableArrow(e) { + this.popUpInfo.popUpEnableArrow = e + } + + setPopUpColor(e) { + this.popUpInfo.popUpColor = e + } + + setPopUpText(e) { + this.popUpInfo.popUpText = e + } + + setPopUpTextColor(e) { + this.popUpInfo.popUpTextColor = e + } + + getIsShowTitle() { + return this.isShowTitle + } + + getIsShowInputText() { + return this.isShowInputText + } + + setTitleAndInputTextStatus(e) { + if (e) { + this.isShowTitle = !1; + this.isShowInputText = !0 + } else { + this.isShowTitle = !0; + this.isShowInputText = !1 + } + } + + handleImageCollapseAfterAddNode(e) { + if (e) { + this.nodeItem.imageCollapse = new TreeView.ImageNode(ARROW_DOWN, null, null, { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_alpha_content_tertiary"], + bundleName: "", + moduleName: "" + }, 24, 24); + this.nodeItem.imageCollapse.itemRightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_xs"], + bundleName: "", + moduleName: "" + } + } else this.nodeItem.imageCollapse = null + } + + setNodeColor(e) { + this.nodeColor = e + } + + getNodeColor() { + return this.nodeColor + } + + setListItemHeight(e) { + this.listItemHeight = e + } + + getListItemHeight() { + return this.listItemHeight + } + + getNodeCurrentNodeId() { + return this.currentNodeId + } + + getNodeParentNodeId() { + return this.parentNodeId + } + + getNodeLeftPadding() { + return this.nodeLeftPadding + } + + getNodeHeight() { + return this.nodeHeight + } + + setNodeIsShow(e) { + this.nodeIsShow = e + } + + getNodeIsShow() { + return this.nodeIsShow + } + + getNodeItem() { + return this.nodeItem + } + + getNodeStatus() { + return this.status + } + + getNodeBorder() { + return this.nodeBorder + } + + setNodeBorder(e) { + this.nodeBorder.borderWidth = e ? this.borderWidth.has : this.borderWidth.none + } + + getChildNodeInfo() { + return this.childNodeInfo + } + + getCurrentNodeId() { + return this.currentNodeId + } + + getMenu() { + return this.container + } + + setIsSelected(e) { + this.isSelected = e + } + + getIsSelected() { + return this.isSelected + } + + getNodeInfoData() { + return this.nodeParam + } + + getNodeInfoNode() { + return this.node + } + + getIsFolder() { + return this.nodeParam.isFolder + } + + setCanShowFlagLine(e) { + this.canShowFlagLine = e + } + + getCanShowFlagLine() { + return this.canShowFlagLine + } + + setFlagLineLeftMargin(e) { + this.flagLineLeftMargin = 12 * e + 8 + } + + getFlagLineLeftMargin() { + return this.flagLineLeftMargin + } + + getNodeLevel() { + return this.nodeLevel + } + + setIsOverBorder(e) { + this.isOverBorder = e + } + + getIsOverBorder() { + return this.isOverBorder + } + + setCanShowBottomFlagLine(e) { + this.canShowBottomFlagLine = e + } + + getCanShowBottomFlagLine() { + return this.canShowBottomFlagLine + } + + setIsHighLight(e) { + this.isHighLight = e + } + + getIsHighLight() { + return this.isHighLight + } + + setIsModify(e) { + this.isModify = e + } + + getIsModify() { + return this.isModify + } +}; +NodeInfo = __decorate([Observed], NodeInfo); + +export { NodeInfo }; + +export var TreeView; +!function(e){ + let t; + !function(e){ + e.NODE_ADD = "NodeAdd"; + e.NODE_DELETE = "NodeDelete"; + e.NODE_MODIFY = "NodeModify"; + e.NODE_MOVE = "NodeMove"; + e.NODE_CLICK = "NodeClick" + }(t = e.TreeListenType || (e.TreeListenType = {})); + + class i { + constructor() { + this._events = [] + } + + on(e, t) { + if (Array.isArray(e)) for (let i = 0, + o = e.length;i < o; i++) this.on(e[i], t); else (this._events[e] || (this._events[e] = [])).push(t) + } + + once(e, t) { + let i = this; + + function o() { + i.off(e, o); + t.apply(null, [e, t]) + } + + o.callback = t; + this.on(e, o) + } + + off(e, t) { + null == e && (this._events = []); + if (Array.isArray(e)) for (let i = 0, o = e.length;i < o; i++) this.off(e[i], t); + const i = this._events[e]; + if (!i) return; + null == t && (this._events[e] = null); + let o, s = i.length; + for (; s--; ) { + o = i[s]; + if (o === t || o.callback === t) { + i.splice(s, 1); + break + } + } + } + + emit(e, t) { + let i = this; + if (!this._events[e]) return; + let o = [...this._events[e]]; + if (o) for (let e = 0, s = o.length;e < s; e++) try { + o[e].apply(i, t) + } catch (e) { + new Error(e) + } + } + } + + e.TreeListener = i; + + class o { + constructor() { + this.appEventBus = new i + } + + static getInstance() { + null == AppStorage.Get(this.APP_KEY_EVENT_BUS) && AppStorage.SetOrCreate(this.APP_KEY_EVENT_BUS, new o); + return AppStorage.Get(this.APP_KEY_EVENT_BUS) + } + + getTreeListener() { + return this.appEventBus + } + } + + o.APP_KEY_EVENT_BUS = "app_key_event_bus"; + e.TreeListenerManager = o; + + class s { + constructor(e) { + this.data = e; + this.nodeLevel = -1; + this.parentNodeId = -1; + this.nodeItem = { imageNode: null, mainTitleNode: null, imageCollapse: null }; + this.childNodeInfo = { isHasChildNode: !1, childNum: 0, allChildNum: 0 }; + this.container = e.container; + e.icon && (this.nodeItem.imageNode = new d(e.icon, e.selectedIcon, e.editIcon, { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_alpha_content_fourth"], + bundleName: "", + moduleName: "" + }, 24, 24)); + e.primaryTitle && (this.nodeItem.mainTitleNode = new r(e.primaryTitle)); + this.children = [] + } + + addImageCollapse(e) { + if (e) { + this.nodeItem.imageCollapse = new d(ARROW_RIGHT, null, null, { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_alpha_content_tertiary"], + bundleName: "", + moduleName: "" + }, 24, 24); + this.nodeItem.imageCollapse.itemRightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_xs"], + bundleName: "", + moduleName: "" + } + } else this.nodeItem.imageCollapse = null + } + + getNodeItem() { + return this.nodeItem + } + + getChildNodeInfo() { + return this.childNodeInfo + } + + getMenu() { + return this.container + } + + getCurrentNodeId() { + return this.currentNodeId + } + + getIsFolder() { + return this.data.isFolder + } + } + + e.NodeItem = s; + + class a { + constructor() { + } + + set itemWidth(e) { + this.width = e + } + + get itemWidth() { + return this.width + } + + set itemHeight(e) { + this.height = e + } + + get itemHeight() { + return this.height + } + + set itemRightMargin(e) { + this.rightMargin = e + } + + get itemRightMargin() { + return this.rightMargin + } + } + + class d extends a { + constructor(e, t, i, o, s, a) { + super(); + this.rightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_m"], + bundleName: "", + moduleName: "" + }; + this.imageSource = e; + this.imageNormalSource = e; + this.imageSelectedSource = null != t ? t : this.imageNormalSource; + this.imageEditSource = null != i ? i : this.imageNormalSource; + this.imageOpacity = o; + this.itemWidth = s; + this.itemHeight = a; + this.imageCollapseSource = e; + this.imageCollapseDownSource = ARROW_DOWN; + this.imageCollapseRightSource = ARROW_RIGHT; + this.isImageCollapse = !0 + } + + get source() { + return this.imageSource + } + + get normalSource() { + return this.imageNormalSource + } + + get selectedSource() { + return this.imageSelectedSource + } + + get editSource() { + return this.imageEditSource + } + + get opacity() { + return this.imageOpacity + } + + get noOpacity() { + return 1 + } + + get collapseSource() { + return this.imageCollapseSource + } + + get isCollapse() { + return this.isImageCollapse + } + + changeImageCollapseSource(e) { + e == NodeStatus.Expand ? this.imageCollapseSource = this.imageCollapseDownSource : e == NodeStatus.Collapse && (this.imageCollapseSource = this.imageCollapseRightSource) + } + + setImageCollapseSource(e, t) { + if (e === InteractionStatus.Edit || e === InteractionStatus.DragInsert) { + this.imageCollapseDownSource = ARROW_DOWN_WITHE; + this.imageCollapseRightSource = ARROW_RIGHT_WITHE; + this.isImageCollapse = !1 + } else if (e === InteractionStatus.FinishEdit || e === InteractionStatus.FinishDragInsert) { + this.imageCollapseDownSource = ARROW_DOWN; + this.imageCollapseRightSource = ARROW_RIGHT; + this.isImageCollapse = !0 + } + this.imageCollapseSource = t == NodeStatus.Collapse ? this.imageCollapseRightSource : this.imageCollapseDownSource + } + + setImageSource(e) { + switch (e) { + case InteractionStatus.Normal: + this.imageSource = this.imageNormalSource; + this.currentInteractionStatus = e; + break; + case InteractionStatus.Selected: + if (this.currentInteractionStatus !== InteractionStatus.Edit) { + this.imageSource = this.imageSelectedSource; + this.currentInteractionStatus = e + } + break; + case InteractionStatus.Edit: + this.imageSource = this.imageEditSource; + this.currentInteractionStatus = e; + break; + case InteractionStatus.FinishEdit: + this.imageSource = this.imageSelectedSource; + this.currentInteractionStatus = e; + break; + case InteractionStatus.DragInsert: + this.imageSource = this.imageEditSource; + this.currentInteractionStatus = e; + break; + case InteractionStatus.FinishDragInsert: + this.imageSource = this.imageNormalSource; + this.currentInteractionStatus = e + } + } + } + + e.ImageNode = d; + + class r extends a { + constructor(e) { + super(); + this.mainTitleName = e; + this.itemWidth = 0; + this.itemHeight = 48; + this.rightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_xs"], + bundleName: "", + moduleName: "" + }; + this.mainTitleSetting = { + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Normal + }; + this.showPopUpTimeout = 0 + } + + setMainTitleSelected(e) { + this.mainTitleSetting = e ? { + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Regular + } : { + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Normal + } + } + + set title(e) { + this.mainTitleName = e + } + + get title() { + return this.mainTitleName + } + + set popUpTimeout(e) { + this.showPopUpTimeout = e + } + + get popUpTimeout() { + return this.showPopUpTimeout + } + + get color() { + return this.mainTitleSetting.fontColor + } + + get size() { + return this.mainTitleSetting.fontSize + } + + get weight() { + return this.mainTitleSetting.fontWeight + } + + setMainTitleHighLight(e) { + this.mainTitleSetting = e ? { + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary_contrary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Regular + } : { + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Normal + } + } + } + + e.MainTitleNode = r; + e.InputText = class extends a { + constructor() { + super(); + this.statusColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }; + this.editItemColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }; + this.radius = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_xs"], + bundleName: "", + moduleName: "" + }; + this.itemWidth = 0; + this.itemHeight = 32; + this.rightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_xs"], + bundleName: "", + moduleName: "" + }; + this.inputTextSetting = { + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Normal + } + } + + get color() { + return this.inputTextSetting.fontColor + } + + get size() { + return this.inputTextSetting.fontSize + } + + get weight() { + return this.inputTextSetting.fontWeight + } + + get borderRadius() { + return this.radius + } + + get backgroundColor() { + return this.statusColor + } + + get editColor() { + return this.editItemColor + } + + get textInputStatusColor() { + return this.status + } + }; + + class n { + constructor() { + this.MaxNodeLevel = 50; + this.MAX_CN_LENGTH = 254; + this.MAX_EN_LENGTH = 255; + this.INITIAL_INVALID_VALUE = -1; + this._root = new s({}); + this._root.nodeLevel = -1; + this._root.parentNodeId = -1; + this._root.currentNodeId = -1 + } + + getNewNodeId() { + return this.addNewNodeId + } + + traverseNodeDF(e, t = this._root) { + let i = [], o = !1; + i.unshift(t); + let s = i.shift(); + for (;!o && s; ) { + o = !0 === e(s); + if (!o) { + i.unshift(...s.children); + s = i.shift() + } + } + } + + traverseNodeBF(e) { + let t = []; + let i = !1; + t.push(this._root); + let o = t.shift(); + for (;!i && o; ) { + try { + i = e(o) + } catch (e) { + e.name, e.message + } + if (!i) { + t.push(...o.children); + o = t.shift() + } + } + } + + contains(e, t) { + t.call(this, e,!0) + } + + updateParentChildNum(e, t, i) { + let o = e.parentNodeId; + for (; o >= 0; ) this.traverseNodeDF((e => { + if (e.currentNodeId == o) { + e.getChildNodeInfo().allChildNum = t ? e.getChildNodeInfo().allChildNum + i : e.getChildNodeInfo().allChildNum - i; + o = e.parentNodeId; + return !1 + } + return !1 + })) + } + + findParentNodeId(e) { + let t = null; + this.contains((function (i) { + if (i.currentNodeId == e) { + t = i; + return !0 + } + return !1 + }), this.traverseNodeBF); + return t.parentNodeId + } + + addNode(e, t, i) { + if (null === this._root) { + this._root = new s({}); + this._root.nodeLevel = -1; + this._root.parentNodeId = -1; + this._root.currentNodeId = -1 + } + let o = null; + this.contains((function (t) { + if (t.currentNodeId == e) { + o = t; + return !0 + } + return !1 + }), this.traverseNodeBF); + if (o) { + let a = new s(i); + if (o.nodeLevel > this.MaxNodeLevel) throw new Error("ListNodeUtils[addNode]: The level of the tree view cannot exceed 50."); + a.nodeLevel = o.nodeLevel + 1; + a.parentNodeId = e; + a.currentNodeId = t; + o.children.push(a); + o.getChildNodeInfo().isHasChildNode = !0; + o.getChildNodeInfo().childNum = o.children.length; + o.getChildNodeInfo().allChildNum += 1; + o.addImageCollapse(o.getChildNodeInfo().isHasChildNode); + this.updateParentChildNum(o,!0, 1); + return this + } + throw new Error("ListNodeUtils[addNode]: Parent node not found.") + } + + findNodeIndex(e, t) { + let i = this.INITIAL_INVALID_VALUE; + for (let o = 0, s = e.length;o < s; o++) if (e[o].currentNodeId === t) { + i = o; + break + } + return i + } + + freeNodeMemory(e, t) { + let i = []; + this.traverseNodeDF((function (e) { + i.push(e); + return !1 + }), e); + i.forEach((e => { + t.push(e.currentNodeId); + e = null + })) + } + + removeNode(e, t, i) { + let o = null; + this.contains((function (e) { + if (e.currentNodeId == t) { + o = e; + return !0 + } + return !1 + }), i); + if (o) { + let t = []; + let i = this.findNodeIndex(o.children, e); + if (i < 0) throw new Error("Node does not exist."); + { + var s = o.children[i].getChildNodeInfo().allChildNum + 1; + this.freeNodeMemory(o.children[i], t); + let e = o.children.splice(i, 1); + e = null; + 0 == o.children.length && o.addImageCollapse(!1) + } + o.getChildNodeInfo().childNum = o.children.length; + o.getChildNodeInfo().allChildNum -= s; + this.updateParentChildNum(o,!1, s); + return t + } + throw new Error("Parent does not exist.") + } + + getNewNodeInfo(e) { + let t = null; + this.contains((function (i) { + if (i.currentNodeId == e) { + t = i; + return !0 + } + return !1 + }), this.traverseNodeBF); + let i = { + isFolder: !0, + icon: null, + selectedIcon: null, + editIcon: null, + container: null, + secondaryTitle: "" + }; + if (t) if (0 === t.children.length) if (null != t.getNodeItem().imageNode) { + i.icon = t.getNodeItem().imageNode.normalSource; + i.selectedIcon = t.getNodeItem().imageNode.selectedSource; + i.editIcon = t.getNodeItem().imageNode.editSource; + i.container = t.getMenu() + } else { + i.icon = null; + i.selectedIcon = null; + i.editIcon = null; + i.container = t.getMenu() + } else if (t.children.length > 0) if (null != t.getNodeItem().imageNode) { + i.icon = null != t.children[0].getNodeItem().imageNode ? t.children[0].getNodeItem().imageNode.normalSource : null; + i.selectedIcon = null != t.children[0].getNodeItem().imageNode ? t.children[0].getNodeItem().imageNode.selectedSource : null; + i.editIcon = null != t.children[0].getNodeItem().imageNode ? t.children[0].getNodeItem().imageNode.editSource : null; + i.container = t.children[0].getMenu() + } else { + i.icon = null; + i.selectedIcon = null; + i.editIcon = null; + i.container = t.children[0].getMenu() + } + return i + } + + getClickChildId(e) { + let t = null; + this.contains((function (i) { + if (i.currentNodeId == e) { + t = i; + return !0 + } + return !1 + }), this.traverseNodeBF); + if (t) { + if (0 === t.children.length) return []; + if (t.children.length > 0) { + var i = new Array(t.children.length); + for (let e = 0;e < i.length; e++) i[e] = 0; + for (let e = 0;e < t.children.length && e < i.length; e++) i[e] = t.children[e].currentNodeId; + return i + } + } + return [] + } + + getClickNodeChildrenInfo(e) { + let t = null; + this.contains((function (i) { + if (i.currentNodeId == e) { + t = i; + return !0 + } + return !1 + }), this.traverseNodeBF); + if (t) { + if (0 === t.children.length) return []; + if (t.children.length > 0) { + var i = new Array(t.children.length); + for (let e = 0;e < i.length; e++) i[e] = { + itemId: null, + itemIcon: null, + itemTitle: null, + isFolder: null + }; + for (let e = 0;e < t.children.length && e < i.length; e++) { + i[e].itemId = t.children[e].currentNodeId; + t.children[e].getNodeItem().imageNode && (i[e].itemIcon = t.children[e].getNodeItem().imageNode.source); + t.children[e].getNodeItem().mainTitleNode && (i[e].itemTitle = t.children[e].getNodeItem().mainTitleNode.title); + i[e].isFolder = t.children[e].getIsFolder() + } + return i + } + } + return [] + } + + checkMainTitleIsValid(e) { + let t = /^[\u4e00-\u9fa5]+$/; + return!/[\\\/:*?"<>|]/.test(e) && !(t.test(e) && e.length > this.MAX_CN_LENGTH || !t.test(e) && e.length > this.MAX_EN_LENGTH) + } + + dragTraverseNodeDF(e, t = this._root, i) { + let o = [], s = !1; + o.unshift(t); + let a = o.shift(); + for (;!s && a; ) { + s = !0 === e(a, i); + if (!s) { + o.unshift(...a.children); + a = o.shift() + } + } + } + + addDragNode(e, t, i, o, a) { + if (null === this._root) { + this._root = new s({}); + this._root.nodeLevel = this.INITIAL_INVALID_VALUE; + this._root.parentNodeId = this.INITIAL_INVALID_VALUE; + this._root.currentNodeId = this.INITIAL_INVALID_VALUE + } + let d = null; + this.contains((function (t) { + if (t.currentNodeId == e) { + d = t; + return !0 + } + return !1 + }), this.traverseNodeBF); + if (d) { + let r = new s(a); + if (d.nodeLevel > this.MaxNodeLevel) throw new Error("ListNodeUtils[addNode]: The level of the tree view cannot exceed 50."); + r.nodeLevel = d.nodeLevel + 1; + r.parentNodeId = e; + r.currentNodeId = t; + let n = this.INITIAL_INVALID_VALUE; + if (d.children.length) { + for (let e = 0;e < d.children.length; e++) if (d.children[e].getCurrentNodeId() == i) { + n = e; + break + } + o ? d.children.splice(n + 1, 0, r) : d.children.splice(n, 0, r) + } else d.children.push(r); + d.getChildNodeInfo().isHasChildNode = !0; + d.getChildNodeInfo().childNum = d.children.length; + d.getChildNodeInfo().allChildNum += 1; + d.addImageCollapse(d.getChildNodeInfo().isHasChildNode); + this.updateParentChildNum(d,!0, 1); + return this + } + throw new Error("ListNodeUtils[addNode]: Parent node not found.") + } + } + + e.ListNodeUtils = n; + + class l extends class { + constructor() { + this.listeners = [] + } + + totalCount() { + return 0 + } + + getData(e) { + } + + registerDataChangeListener(e) { + this.listeners.indexOf(e) < 0 && this.listeners.push(e) + } + + unregisterDataChangeListener(e) { + const t = this.listeners.indexOf(e); + t >= 0 && this.listeners.splice(t, 1) + } + + notifyDataReload() { + this.listeners.forEach((e => { + e.onDataReloaded() + })) + } + + notifyDataAdd(e) { + this.listeners.forEach((t => { + t.onDataAdd(e) + })) + } + + notifyDataChange(e) { + this.listeners.forEach((t => { + t.onDataChange(e) + })) + } + + notifyDataDelete(e) { + this.listeners.forEach((t => { + t.onDataDelete(e) + })) + } + + notifyDataMove(e, t) { + this.listeners.forEach((i => { + i.onDataMove(e, t) + })) + } + } + + { + constructor() { + super(...arguments); + this.ROOT_NODE_ID = -1; + this.listNodeUtils = new n; + this.listNode = []; + this.INITIAL_INVALID_VALUE = -1; + this.lastIndex = -1; + this.thisIndex = -1; + this.modifyNodeIndex = -1; + this.modifyNodeId = -1; + this.expandAndCollapseInfo = new Map; + this.loadedNodeIdAndIndexMap = new Map; + this.isTouchDown = !1; + this.appEventBus = o.getInstance().getTreeListener(); + this.isInnerDrag = !1; + this.isDrag = !1; + this.draggingCurrentNodeId = this.INITIAL_INVALID_VALUE; + this.draggingParentNodeId = this.INITIAL_INVALID_VALUE; + this.currentNodeInfo = null; + this.listItemOpacity = 1; + this.lastPassIndex = this.INITIAL_INVALID_VALUE; + this.lastPassId = this.INITIAL_INVALID_VALUE; + this.thisPassIndex = this.INITIAL_INVALID_VALUE; + this.lastDelayExpandIndex = this.INITIAL_INVALID_VALUE; + this.timeoutExpandId = this.INITIAL_INVALID_VALUE; + this.lastTimeoutExpandId = this.INITIAL_INVALID_VALUE; + this.clearTimeoutExpandId = this.INITIAL_INVALID_VALUE; + this.timeoutHighLightId = this.INITIAL_INVALID_VALUE; + this.lastTimeoutHighLightId = this.INITIAL_INVALID_VALUE; + this.clearTimeoutHighLightId = this.INITIAL_INVALID_VALUE; + this.lastDelayHighLightIndex = this.INITIAL_INVALID_VALUE; + this.lastDelayHighLightId = this.INITIAL_INVALID_VALUE; + this.nodeIdAndSubtitleMap = new Map; + this.flag = Flag.NONE; + this.selectedParentNodeId = this.INITIAL_INVALID_VALUE; + this.selectedParentNodeSubtitle = ""; + this.insertNodeSubtitle = ""; + this.currentFocusNodeId = this.INITIAL_INVALID_VALUE; + this.lastFocusNodeId = this.INITIAL_INVALID_VALUE; + this.addFocusNodeId = this.INITIAL_INVALID_VALUE; + this.FLAG_LINE = { + flagLineHeight: "1.0vp", + flagLineColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_emphasize"], + bundleName: "", + moduleName: "" + }, + xOffset: "0vp", + yTopOffset: "2.75vp", + yBottomOffset: "-1.25vp", + yBasePlateOffset: "1.5vp" + }; + this.DRAG_POPUP = { + floorConstraintSize: { minWidth: "128vp", maxWidth: "208vp" }, + textConstraintSize: { minWidth1: "80vp", maxWidth1: "160vp", minWidth2: "112vp", maxWidth2: "192vp" }, + padding: { left: "8vp", right: "8vp" }, + backgroundColor: "#FFFFFF", + height: "48", + shadow: { + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }, + color: "#00001E", + offsetX: 0, + offsetY: 10 + }, + borderRadius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + fontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Regular, + imageOpacity: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_alpha_content_fourth"], + bundleName: "", + moduleName: "" + } + }; + this.subTitle = { + normalFontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_secondary"], + bundleName: "", + moduleName: "" + }, + highLightFontColor: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary_contrary"], + bundleName: "", + moduleName: "" + }, + fontSize: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }, + fontWeight: FontWeight.Regular, + margin: { left: "4vp", right: "24" } + } + } + + changeNodeColor(e, t) { + this.listNode[e].setNodeColor(t); + this.listNode[e].setNodeBorder(!1) + } + + getNodeColor(e) { + return this.listNode[e].getNodeColor() + } + + handleFocusEffect(e, t) { + this.listNode[e].getNodeIsShow() && this.listNode[e].setNodeBorder(t) + } + + setImageSource(e, t) { + let i = this.listNode[e]; + i.setIsSelected(t === InteractionStatus.Selected || t === InteractionStatus.Edit || t === InteractionStatus.FinishEdit); + null != i.getNodeItem().mainTitleNode && t != InteractionStatus.DragInsert && t != InteractionStatus.FinishDragInsert && i.getNodeItem().mainTitleNode.setMainTitleSelected(t === InteractionStatus.Selected || t === InteractionStatus.FinishEdit); + null != i.getNodeItem().imageNode && i.getNodeItem().imageNode.setImageSource(t) + } + + setImageCollapseSource(e, t) { + let i = this.listNode[e]; + null != i.getNodeItem().imageCollapse && i.getNodeItem().imageCollapse.setImageCollapseSource(t, this.expandAndCollapseInfo.get(i.getCurrentNodeId())) + } + + clearLastIndexStatus() { + if (!(-1 == this.lastIndex || this.lastIndex >= this.listNode.length)) { + this.setImageSource(this.lastIndex, InteractionStatus.Normal); + this.changeNodeColor(this.lastIndex, this.listNode[this.lastIndex].getNodeStatus().normal); + this.handleFocusEffect(this.lastIndex,!1); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.listNode[this.lastIndex].getCurrentNodeId())) + } + } + + changeNodeStatus(e) { + let t = e; + let i = this.ListNode; + let o = i[e].getCurrentNodeId(); + if (this.expandAndCollapseInfo.get(o) == NodeStatus.Expand) { + this.expandAndCollapseInfo.set(o, NodeStatus.Collapse); + i[t].getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Collapse) + } else if (this.expandAndCollapseInfo.get(o) == NodeStatus.Collapse) { + this.expandAndCollapseInfo.set(o, NodeStatus.Expand); + i[t].getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Expand) + } + } + + handleExpandAndCollapse(e) { + let t = e; + let i = this.ListNode; + let o = i[t].getCurrentNodeId(); + if (!this.expandAndCollapseInfo.has(o)) return; + let s = this.expandAndCollapseInfo.get(o); + if (i[t].getChildNodeInfo().isHasChildNode && s == NodeStatus.Collapse) { + for (var a = 0;a < i[t].getChildNodeInfo().allChildNum; a++) { + i[t + 1+a].setNodeIsShow(!1); + i[t + 1+a].setListItemHeight(0) + } + this.notifyDataChange(t); + return + } + let d = new Array(i[t].getChildNodeInfo().childNum); + d[0] = t + 1; + let r = 1; + for (; r < i[t].getChildNodeInfo().childNum; ) { + d[r] = d[r-1] + i[d[r-1]].getChildNodeInfo().allChildNum + 1; + r++ + } + if (s == NodeStatus.Expand) for (a = 0; a < d.length; a++) { + i[d[a]].setNodeIsShow(!0); + i[d[a]].setListItemHeight(48); + let e = i[d[a]].getCurrentNodeId(); + this.expandAndCollapseInfo.get(e) == NodeStatus.Expand && this.handleExpandAndCollapse(d[a]) + } + d = null; + this.notifyDataChange(t) + } + + init(e) { + let t = 0; + this.listNode = []; + this.listNodeUtils = e; + this.loadedNodeIdAndIndexMap.clear(); + this.listNodeUtils.traverseNodeDF((e => { + if (e.currentNodeId >= 0) { + var i = new NodeInfo(e); + this.listNode.push(i); + i.getChildNodeInfo().isHasChildNode && this.expandAndCollapseInfo.set(i.getCurrentNodeId(), NodeStatus.Collapse); + i.getNodeIsShow() && this.loadedNodeIdAndIndexMap.set(i.getCurrentNodeId(), t++); + i.getIsFolder() && this.nodeIdAndSubtitleMap.set(i.getCurrentNodeId(), i.getNodeInfoData().secondaryTitle || 0 == i.getNodeInfoData().secondaryTitle ? i.getNodeInfoData().secondaryTitle : "") + } + return !1 + })) + } + + refreshRemoveNodeData(e, i) { + let o = []; + for (let t = 0;t < e.length; t++) for (let i = 0;i < this.listNode.length; i++) if (this.listNode[i].getNodeCurrentNodeId() == e[t]) { + let s = this.listNode[i].getNodeCurrentNodeId(); + this.loadedNodeIdAndIndexMap.has(s) && o.push(this.loadedNodeIdAndIndexMap.get(s)); + let a = this.listNode.splice(i, 1); + a = null; + this.expandAndCollapseInfo.has(e[t]) && this.expandAndCollapseInfo.delete(e[t]); + break + } + o.forEach((e => { + this.notifyDataDelete(e); + this.notifyDataChange(e) + })); + for (let e = 0;e < this.listNode.length; e++) if (this.listNode[e].getNodeCurrentNodeId() == i.getNodeCurrentNodeId()) { + if (null == i.getNodeItem().imageCollapse) { + this.listNode[e].handleImageCollapseAfterAddNode(!1); + this.expandAndCollapseInfo.delete(i.getNodeCurrentNodeId()); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.listNode[e].getNodeCurrentNodeId())) + } + break + } + let s = { currentNodeId: i.getNodeCurrentNodeId(), parentNodeId: i.getNodeParentNodeId() }; + this.appEventBus.emit(t.NODE_DELETE, [s]) + } + + refreshAddNodeData(e) { + var t; + this.listNodeUtils.traverseNodeDF((i => { + if (i.currentNodeId === e[0]) { + t = new NodeInfo(i); + return !0 + } + return !1 + })); + t.setIsModify(!0); + let i = 0; + for (let e = 0;e < this.listNode.length; e++) if (this.listNode[e].getNodeCurrentNodeId() == t.getNodeParentNodeId()) { + i = e; + if (null == this.listNode[e].getNodeItem().imageCollapse) { + this.listNode[e].handleImageCollapseAfterAddNode(!0); + this.notifyDataChange(i) + } else this.expandAndCollapseInfo.get(this.listNode[e].getNodeCurrentNodeId()) == NodeStatus.Collapse && this.changeNodeStatus(i); + this.listNode.splice(e + 1, 0, t); + this.listNode[e+1].setTitleAndInputTextStatus(!0); + this.listNode[e+1].setNodeIsShow(!0); + this.listNode[e+1].setListItemHeight(48); + this.setImageSource(e + 1, InteractionStatus.Edit); + this.currentOperation = MenuOperation.ADD_NODE; + this.notifyDataAdd(e + 1); + this.notificationNodeInfo(e + 1, this.currentOperation); + break + } + this.modifyNodeIndex = i + 1; + this.expandAndCollapseInfo.set(t.getNodeParentNodeId(), NodeStatus.Expand); + this.handleExpandAndCollapse(i) + } + + refreshData(e, t, i, o) { + let s; + this.listNodeUtils = e; + this.listNodeUtils.traverseNodeDF((e => { + if (e.currentNodeId == i) { + s = new NodeInfo(e); + return !0 + } + return !1 + })); + if (t === MenuOperation.REMOVE_NODE) { + this.nodeIdAndSubtitleMap.set(i, this.selectedParentNodeSubtitle); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(i)); + this.refreshRemoveNodeData(o, s) + } + if (t === MenuOperation.ADD_NODE) { + this.addFocusNodeId = o[0]; + this.nodeIdAndSubtitleMap.set(this.getClickNodeId(), this.selectedParentNodeSubtitle); + this.nodeIdAndSubtitleMap.set(o[0], this.insertNodeSubtitle); + this.refreshAddNodeData(o) + } + } + + setClickIndex(e) { + this.thisIndex = e + } + + getClickNodeId() { + return this.thisIndex < 0 || this.thisIndex >= this.ListNode.length ? -1 : this.ListNode[this.thisIndex].getCurrentNodeId() + } + + expandAndCollapseNode(e) { + this.changeNodeStatus(e); + this.handleExpandAndCollapse(e) + } + + getIsTouchDown() { + return this.isTouchDown + } + + getLastIndex() { + return this.lastIndex + } + + handleEventDrag(e) { + this.setImageSource(e, InteractionStatus.Normal); + this.changeNodeColor(e, this.listNode[e].getNodeStatus().normal); + this.handleFocusEffect(e,!1); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.listNode[e].getCurrentNodeId())) + } + + handleEvent(e, t) { + if (this.isDrag) return; + e !== Event.TOUCH_DOWN && e !== Event.TOUCH_UP && e !== Event.MOUSE_BUTTON_RIGHT || t != this.lastIndex && this.clearLastIndexStatus(); + let i = this.loadedNodeIdAndIndexMap.get(this.listNode[t].getCurrentNodeId()); + switch (e) { + case Event.TOUCH_DOWN: + this.isTouchDown = !0; + this.changeNodeColor(t, this.listNode[t].getNodeStatus().press); + this.notifyDataChange(i); + break; + case Event.TOUCH_UP: { + this.isInnerDrag && (this.isInnerDrag = !1); + this.isTouchDown = !1; + let e = this.listNode[t]; + this.setImageSource(t, InteractionStatus.Selected); + e.setFontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }); + this.lastIndex = t; + this.changeNodeColor(t, e.getNodeStatus().selected); + this.notifyDataChange(i); + break + } + case Event.HOVER: + if (this.getNodeColor(t) != this.listNode[t].getNodeStatus().selected) { + this.changeNodeColor(t, this.listNode[t].getNodeStatus().hover); + this.notifyDataChange(i) + } + break; + case Event.HOVER_OVER: + if (this.getNodeColor(t) != this.listNode[t].getNodeStatus().selected) { + this.changeNodeColor(t, this.listNode[t].getNodeStatus().normal); + this.notifyDataChange(i) + } + break; + case Event.FOCUS: + this.handleFocusEffect(t,!0); + this.notifyDataChange(i); + break; + case Event.BLUR: + this.handleFocusEffect(t,!1); + this.notifyDataChange(i); + break; + case Event.MOUSE_BUTTON_RIGHT: + this.lastIndex = t; + this.finishEditing(); + break; + case Event.DRAG: + this.isTouchDown = !1; + let e = this.listNode[t]; + this.setImageSource(t, InteractionStatus.Selected); + this.lastIndex = t; + this.changeNodeColor(t, e.getNodeStatus().selected); + this.notifyDataChange(i) + } + } + + notificationNodeInfo(e, i) { + if (i === MenuOperation.MODIFY_NODE) { + let e = this.listNode[this.modifyNodeIndex]; + let i = { currentNodeId: e.getNodeCurrentNodeId(), parentNodeId: e.getNodeParentNodeId() }; + this.appEventBus.emit(t.NODE_MODIFY, [i]) + } else if (i === MenuOperation.ADD_NODE) { + let i = this.listNode[e]; + null != i.getNodeItem().imageNode && i.getNodeItem().imageNode.source; + null != i.getNodeItem().imageNode && i.getNodeItem().imageNode.selectedSource; + null != i.getNodeItem().imageNode && i.getNodeItem().imageNode.editSource; + let o = { currentNodeId: i.getNodeCurrentNodeId(), parentNodeId: i.getNodeParentNodeId() }; + this.appEventBus.emit(t.NODE_ADD, [o]) + } + } + + finishEditing() { + if (-1 != this.modifyNodeIndex) { + this.setImageSource(this.modifyNodeIndex, InteractionStatus.FinishEdit); + this.setImageCollapseSource(this.modifyNodeIndex, InteractionStatus.FinishEdit); + this.listNode[this.modifyNodeIndex].setIsModify(!1); + this.listNode[this.modifyNodeIndex].setTitleAndInputTextStatus(!1); + this.notificationNodeInfo(this.modifyNodeIndex, this.currentOperation); + this.notifyDataChange(this.modifyNodeIndex) + } + } + + setItemVisibilityOnEdit(e, t) { + let i = -1; + if (-1 != e) { + if (t === MenuOperation.MODIFY_NODE) { + for (let t = 0;t < this.listNode.length; t++) if (this.listNode[t].getCurrentNodeId() == e) { + i = t; + break + } + let t = this.listNode[i]; + t.setIsModify(!0); + if (null === t.getNodeItem().mainTitleNode) return; + this.currentOperation = MenuOperation.MODIFY_NODE; + t.setTitleAndInputTextStatus(!0); + this.setImageSource(i, InteractionStatus.Edit); + this.setImageCollapseSource(i, InteractionStatus.Edit); + this.modifyNodeIndex = i; + t.getNodeItem().inputText && (null != t.getNodeItem().imageCollapse ? t.getNodeItem().inputText.rightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_paragraph_margin_xs"], + bundleName: "", + moduleName: "" + } : t.getNodeItem().inputText.rightMargin = { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_m"], + bundleName: "", + moduleName: "" + }); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(e)) + } + i = e; + if (t === MenuOperation.COMMIT_NODE) { + let e = this.listNode[i]; + e.setTitleAndInputTextStatus(!1); + e.setIsModify(!1); + this.setImageSource(i, InteractionStatus.FinishEdit); + this.setImageCollapseSource(i, InteractionStatus.FinishEdit); + this.notificationNodeInfo(this.modifyNodeIndex, this.currentOperation); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(e.getCurrentNodeId())) + } + } + } + + setPopUpInfo(e, t, i, o) { + let s = this.listNode[o]; + s.setPopUpIsShow(i); + let a = this.loadedNodeIdAndIndexMap.get(s.getCurrentNodeId()); + if (i) { + if (e === PopUpType.HINTS) { + if (null != s.getNodeItem().mainTitleNode) s.setPopUpText(s.getNodeItem().mainTitleNode.title); else { + s.setPopUpText(""); + s.setPopUpIsShow(!1) + } + s.setPopUpEnableArrow(!1); + s.setPopUpColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background"], + bundleName: "", + moduleName: "" + }); + s.setPopUpTextColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }) + } else if (e === PopUpType.WARNINGS && null != s.getNodeItem().inputText) { + t === InputError.INVALID_ERROR ? s.setPopUpText("invalid error") : t === InputError.LENGTH_ERROR && s.setPopUpText("length error"); + s.setPopUpEnableArrow(!0); + s.setPopUpColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_help_tip_bg"], + bundleName: "", + moduleName: "" + }); + s.setPopUpTextColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_hint_contrary"], + bundleName: "", + moduleName: "" + }) + } + this.notifyDataChange(a) + } else this.notifyDataChange(a) + } + + setShowPopUpTimeout(e, t) { + null != this.listNode[t].getNodeItem().mainTitleNode && (this.listNode[t].getNodeItem().mainTitleNode.popUpTimeout = e); + let i = this.loadedNodeIdAndIndexMap.get(this.listNode[t].getCurrentNodeId()); + this.notifyDataChange(i) + } + + setMainTitleNameOnEdit(e, t) { + this.modifyNodeIndex = e; + null != this.listNode[e].getNodeItem().mainTitleNode && (this.listNode[e].getNodeItem().mainTitleNode.title = t) + } + + get ListNode() { + return this.listNode + } + + totalCount() { + let e = 0; + let t = 0; + this.loadedNodeIdAndIndexMap.clear(); + for (let i = 0;i < this.listNode.length; i++) if (this.listNode[i].getNodeIsShow()) { + this.loadedNodeIdAndIndexMap.set(this.listNode[i].getCurrentNodeId(), t++); + e++ + } + return e + } + + getData(e) { + let t = 0; + for (let i = 0;i < this.listNode.length; i++) if (this.listNode[i].getNodeIsShow()) { + if (e == t) return this.listNode[i]; + t++ + } + return null + } + + addData(e, t) { + this.listNode.splice(e, 0, t); + this.notifyDataAdd(e) + } + + pushData(e) { + this.listNode.push(e); + this.notifyDataAdd(this.listNode.length - 1) + } + + setIsInnerDrag(e) { + this.isInnerDrag = e + } + + getIsInnerDrag() { + return this.isInnerDrag + } + + setIsDrag(e) { + this.isDrag = e + } + + getIsDrag() { + return this.isDrag + } + + setCurrentNodeInfo(e) { + this.currentNodeInfo = e + } + + getCurrentNodeInfo() { + return this.currentNodeInfo + } + + setDraggingParentNodeId(e) { + this.draggingParentNodeId = e + } + + getDraggingParentNodeId() { + return this.draggingParentNodeId + } + + getDraggingCurrentNodeId() { + return this.draggingCurrentNodeId + } + + setDraggingCurrentNodeId(e) { + this.draggingCurrentNodeId = e + } + + setListItemOpacity(e) { + this.listItemOpacity = e + } + + getListItemOpacity(e) { + return e.getCurrentNodeId() == this.getDraggingCurrentNodeId() ? this.listItemOpacity : 1 + } + + getDragPopupPara() { + return this.DRAG_POPUP + } + + setLastPassIndex(e) { + this.lastPassIndex = e + } + + getLastPassIndex() { + return this.lastPassIndex + } + + getIsParentOfInsertNode(e) { + let t = this.currentNodeInfo.getNodeInfoNode(); + let i = !1; + this.listNodeUtils.traverseNodeDF((function (t) { + if (t.currentNodeId == e) { + i = !0; + return !0 + } + return !1 + }), t); + return i + } + + setPassIndex(e) { + this.thisPassIndex = e + } + + getPassIndex() { + return this.thisPassIndex + } + + clearTimeOutAboutDelayHighLightAndExpand(e) { + if (this.lastPassId != this.INITIAL_INVALID_VALUE && this.loadedNodeIdAndIndexMap.has(this.lastPassId)) { + let e = this.loadedNodeIdAndIndexMap.get(this.lastPassId); + let t = this; + this.ListNode.forEach((function (e) { + e.getNodeCurrentNodeId() == t.lastPassId && e.setCanShowFlagLine(!1) + })); + this.notifyDataChange(e) + } + if (this.lastTimeoutHighLightId != this.INITIAL_INVALID_VALUE && this.clearTimeoutHighLightId != this.lastTimeoutHighLightId) { + clearTimeout(this.lastTimeoutHighLightId); + if (this.lastDelayHighLightIndex != this.INITIAL_INVALID_VALUE) { + this.clearHighLight(this.lastDelayHighLightIndex); + let e = this.loadedNodeIdAndIndexMap.get(this.listNode[this.lastDelayHighLightIndex].getCurrentNodeId()); + this.notifyDataChange(e) + } + this.clearTimeoutHighLightId = this.lastTimeoutHighLightId + } + this.lastTimeoutHighLightId = this.timeoutHighLightId; + this.lastDelayHighLightIndex = e; + if (this.lastTimeoutExpandId != this.INITIAL_INVALID_VALUE && this.clearTimeoutExpandId != this.lastTimeoutExpandId) { + clearTimeout(this.lastTimeoutExpandId); + this.clearTimeoutExpandId = this.lastTimeoutExpandId + } + this.lastTimeoutExpandId = this.timeoutExpandId; + this.lastDelayExpandIndex = this.INITIAL_INVALID_VALUE + } + + clearHighLight(e) { + this.changeNodeColor(e, this.listNode[e].getNodeStatus().normal); + this.changeNodeHighLightColor(e,!1); + this.setImageSource(e, InteractionStatus.FinishDragInsert); + this.setImageCollapseSource(e, InteractionStatus.FinishDragInsert); + this.listNode[e].setIsHighLight(!1) + } + + changeNodeHighLightColor(e, t) { + this.listNode[e].getNodeItem().mainTitleNode && this.listNode[e].getIsShowTitle() && this.listNode[e].getNodeItem().mainTitleNode.setMainTitleHighLight(t) + } + + setVisibility(e, t, i) { + let o = this.thisPassIndex != t || this.flag != e; + this.thisPassIndex = t; + if ((o || i) && this.isInnerDrag) { + this.flag = e; + let i = this.getData(t).getCurrentNodeId(); + let o = this.expandAndCollapseInfo.get(i) == NodeStatus.Expand && this.flag == Flag.DOWN_FLAG ? this.getData(t).getNodeLevel() + 1 : this.getData(t).getNodeLevel(); + if (this.lastPassId != this.INITIAL_INVALID_VALUE && this.loadedNodeIdAndIndexMap.has(this.lastPassId)) { + let e = this.loadedNodeIdAndIndexMap.get(this.lastPassId); + let t = this; + this.ListNode.forEach((function (e) { + e.getNodeCurrentNodeId() == t.lastPassId && e.setCanShowFlagLine(!1) + })); + this.notifyDataChange(e) + } + if (this.flag == Flag.DOWN_FLAG && t < this.totalCount() - 1) { + this.getData(t).setCanShowFlagLine(!1); + this.getData(t + 1).setCanShowFlagLine(!0); + this.getData(t).setCanShowBottomFlagLine(!1); + this.getData(t + 1).setFlagLineLeftMargin(o); + this.notifyDataChange(t); + this.notifyDataChange(t + 1); + this.lastPassId = this.getData(t + 1).getNodeCurrentNodeId() + } else if (this.flag == Flag.UP_FLAG && t < this.totalCount() - 1) { + this.getData(t).setCanShowFlagLine(!0); + this.getData(t + 1).setCanShowFlagLine(!1); + this.getData(t).setCanShowBottomFlagLine(!1); + this.getData(t).setFlagLineLeftMargin(o); + this.notifyDataChange(t); + this.notifyDataChange(t + 1); + this.lastPassId = this.getData(t).getNodeCurrentNodeId() + } else if (t >= this.totalCount() - 1) { + if (this.flag == Flag.DOWN_FLAG) { + this.getData(t).setCanShowFlagLine(!1); + this.getData(t).setCanShowBottomFlagLine(!0) + } else { + this.getData(t).setCanShowFlagLine(!0); + this.getData(t).setCanShowBottomFlagLine(!1) + } + this.getData(t).setFlagLineLeftMargin(o); + this.notifyDataChange(t); + this.lastPassId = this.getData(t).getNodeCurrentNodeId() + } + } + } + + delayHighLightAndExpandNode(e, t, i) { + let o = e != this.lastDelayExpandIndex; + let s = this.getData(i).getIsOverBorder(); + this.lastDelayExpandIndex = s ? this.INITIAL_INVALID_VALUE : e; + if (s || o) { + let o = this; + if (!s && (!this.isInnerDrag || this.expandAndCollapseInfo.get(t) == NodeStatus.Collapse && this.isInnerDrag || !this.expandAndCollapseInfo.has(t) && this.listNode[e].getIsFolder())) { + this.changeNodeColor(e, this.listNode[e].getNodeStatus().hover); + this.notifyDataChange(i); + let t = this.isInnerDrag ? 1e3 : 0; + this.timeoutHighLightId = setTimeout((function () { + o.delayHighLight(e) + }), t) + } + if (s || this.lastTimeoutHighLightId != this.INITIAL_INVALID_VALUE && this.clearTimeoutHighLightId != this.lastTimeoutHighLightId) { + clearTimeout(this.lastTimeoutHighLightId); + if (this.lastDelayHighLightIndex != this.INITIAL_INVALID_VALUE) { + this.clearHighLight(this.lastDelayHighLightIndex); + this.notifyDataReload() + } + this.clearTimeoutHighLightId = this.lastTimeoutHighLightId + } + this.lastTimeoutHighLightId = this.timeoutHighLightId; + this.lastDelayHighLightIndex = e; + if (!s && this.expandAndCollapseInfo.get(t) == NodeStatus.Collapse) { + let t = this.getData(i).getNodeInfoNode().children[0].currentNodeId; + let s = 2e3; + this.timeoutExpandId = setTimeout((function () { + o.clearHighLight(o.lastDelayHighLightIndex); + o.alterFlagLineAndExpandNode(e, t) + }), s) + } + if (s || this.lastTimeoutExpandId != this.INITIAL_INVALID_VALUE && this.clearTimeoutExpandId != this.lastTimeoutExpandId) { + clearTimeout(this.lastTimeoutExpandId); + this.clearTimeoutExpandId = this.lastTimeoutExpandId + } + this.lastTimeoutExpandId = this.timeoutExpandId + } + } + + delayHighLight(e) { + let t = this; + this.ListNode.forEach((function (e) { + if (e.getNodeCurrentNodeId() == t.lastPassId) { + e.setCanShowFlagLine(!1); + e.setCanShowBottomFlagLine(!1) + } + })); + this.changeNodeColor(e, this.listNode[e].getNodeStatus().highLight); + this.listNode[e].setIsHighLight(!0); + this.changeNodeHighLightColor(e,!0); + this.setImageSource(e, InteractionStatus.DragInsert); + this.setImageCollapseSource(e, InteractionStatus.DragInsert); + this.notifyDataReload() + } + + alterFlagLineAndExpandNode(e, t) { + let i = this; + this.ListNode.forEach((function (e) { + if (e.getNodeCurrentNodeId() == i.lastPassId) { + e.setCanShowFlagLine(!1); + e.setCanShowBottomFlagLine(!1) + } + })); + this.ListNode.forEach((function (e) { + i.isInnerDrag && e.getNodeCurrentNodeId() == t && e.setCanShowFlagLine(!0) + })); + this.changeNodeStatus(e); + this.handleExpandAndCollapse(e); + this.lastPassId = t + } + + hideLastLine() { + if (this.lastPassId != this.INITIAL_INVALID_VALUE && this.loadedNodeIdAndIndexMap.has(this.lastPassId)) { + let e = this; + this.ListNode.forEach((function (t) { + if (t.getNodeCurrentNodeId() == e.lastPassId) { + t.setCanShowFlagLine(!1); + t.setCanShowBottomFlagLine(!1) + } + })); + let t = this.loadedNodeIdAndIndexMap.get(this.lastPassId); + this.notifyDataChange(t) + } + } + + clearLastTimeoutHighLight() { + if (this.lastTimeoutHighLightId != this.INITIAL_INVALID_VALUE && this.clearTimeoutHighLightId != this.lastTimeoutHighLightId) { + clearTimeout(this.lastTimeoutHighLightId); + this.lastDelayHighLightIndex != this.INITIAL_INVALID_VALUE && this.clearHighLight(this.lastDelayHighLightIndex) + } + } + + clearLastTimeoutExpand() { + this.lastTimeoutExpandId != this.INITIAL_INVALID_VALUE && this.clearTimeoutExpandId != this.lastTimeoutExpandId && clearTimeout(this.lastTimeoutExpandId) + } + + getSubtitle(e) { + return this.nodeIdAndSubtitleMap.has(e) ? "number" == typeof this.nodeIdAndSubtitleMap.get(e) ? this.nodeIdAndSubtitleMap.get(e).toString() : this.nodeIdAndSubtitleMap.get(e) : "" + } + + hasSubtitle(e) { + return this.nodeIdAndSubtitleMap.has(e) + } + + initialParameterAboutDelayHighLightAndExpandIndex() { + this.lastDelayHighLightIndex = this.INITIAL_INVALID_VALUE; + this.lastDelayExpandIndex = this.INITIAL_INVALID_VALUE; + this.lastPassIndex = this.INITIAL_INVALID_VALUE; + this.draggingCurrentNodeId = this.INITIAL_INVALID_VALUE; + this.flag = Flag.NONE + } + + refreshSubtitle(e) { + this.nodeIdAndSubtitleMap.set(this.selectedParentNodeId, this.selectedParentNodeSubtitle); + this.nodeIdAndSubtitleMap.set(e, this.insertNodeSubtitle); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.selectedParentNodeId)); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(e)) + } + + setNodeSubtitlePara(e, t, i) { + this.selectedParentNodeId = e; + this.selectedParentNodeSubtitle = t; + this.insertNodeSubtitle = i + } + + getInsertNodeSubtitle() { + return this.insertNodeSubtitle + } + + getExpandAndCollapseInfo(e) { + return this.expandAndCollapseInfo.get(e) + } + + getLastDelayHighLightId() { + return this.lastDelayHighLightId + } + + setLastDelayHighLightId() { + this.ListNode.forEach(((e, t) => { + t == this.lastDelayHighLightIndex && (this.lastDelayHighLightId = e.getCurrentNodeId()) + })) + } + + setLastPassId(e) { + this.lastPassId = e + } + + setLastDelayHighLightIndex(e) { + this.lastDelayHighLightIndex = e + } + + alterDragNode(e, i, o, s, a, d) { + let r = []; + let n = e; + let l = a; + let h = d.getNodeInfoData(); + let c = null; + let u = d.getNodeInfoNode(); + let N = !1; + let I = this.INITIAL_INVALID_VALUE; + let g = this.INITIAL_INVALID_VALUE; + let p = this.flag == Flag.DOWN_FLAG; + g = this.getChildIndex(s, a); + I = this.getChildIndex(e, i) + 1; + I = e != s ? p ? I + 1 : I : I > g ? p ? I : I - 1 : p ? I + 1 : I; + for (let e = 0;e < this.listNode.length; e++) if (this.listNode[e].getCurrentNodeId() == i) { + N = this.listNode[e].getIsHighLight(); + if (this.flag == Flag.DOWN_FLAG && this.expandAndCollapseInfo.get(i) == NodeStatus.Expand) { + n = i; + I = 0 + } else if (this.flag == Flag.UP_FLAG && this.expandAndCollapseInfo.get(i) == NodeStatus.Expand && 0 == this.listNode[e].getCanShowFlagLine()) { + n = i; + I = 0 + } else if (N) { + n = i; + I = 0 + } + break + } + let m = { currentNodeId: l, parentNodeId: n, childIndex: I }; + this.appEventBus.emit(t.NODE_MOVE, [m]); + r.push({ parentId: n, currentId: l, data: h }); + let A = null; + this.listNodeUtils.dragTraverseNodeDF((function (e, t) { + if (e) { + A = e; + n = A.parentNodeId; + l = A.currentNodeId; + for (let e = 0;e < t.length; e++) if (t[e].getNodeCurrentNodeId() == l) { + c = t[e]; + break + } + h = c.getNodeInfoData(); + n != s && r.push({ parentId: n, currentId: l, data: h }); + return !1 + } + return !1 + }), u, this.listNode); + this.listNodeUtils.removeNode(a, s, this.listNodeUtils.traverseNodeBF); + let S = i; + let _ = p; + if (this.expandAndCollapseInfo.get(i) == NodeStatus.Expand) { + _ = !1; + this.listNode.forEach((e => { + e.getCurrentNodeId() == i && 0 == e.getCanShowFlagLine() && (S = e.getNodeInfoNode().children.length ? e.getNodeInfoNode().children[0].currentNodeId : this.INITIAL_INVALID_VALUE) + })) + } else !this.expandAndCollapseInfo.get(i) && N && this.expandAndCollapseInfo.set(i, NodeStatus.Expand); + this.listNodeUtils.addDragNode(r[0].parentId, r[0].currentId, S, _, r[0].data); + for (let e = 1;e < r.length; e++) this.listNodeUtils.addNode(r[e].parentId, r[e].currentId, r[e].data); + for (let e = 0;e < this.listNode.length; e++) if (this.listNode[e].getCurrentNodeId() == s && null == this.listNode[e].getNodeInfoNode().getNodeItem().imageCollapse) { + this.listNode[e].handleImageCollapseAfterAddNode(!1); + this.expandAndCollapseInfo.delete(s); + break + } + let f = [...this.listNode]; + this.reloadListNode(this.listNodeUtils, f) + } + + reloadListNode(e, t) { + let i = 0; + this.listNode = []; + this.listNodeUtils = e; + this.loadedNodeIdAndIndexMap.clear(); + this.listNodeUtils.traverseNodeDF((e => { + if (e.currentNodeId >= 0) { + var o = new NodeInfo(e); + this.listNode.push(o); + this.expandAndCollapseInfo.get(e.currentNodeId) == NodeStatus.Expand ? o.getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Expand) : this.expandAndCollapseInfo.get(e.currentNodeId) == NodeStatus.Collapse && o.getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Collapse); + for (let e = 0;e < t.length; e++) if (t[e].getCurrentNodeId() == o.getCurrentNodeId()) { + o.setNodeIsShow(t[e].getNodeIsShow()); + o.setListItemHeight(t[e].getListItemHeight()); + o.getNodeItem().mainTitleNode && o.getIsShowTitle() && (o.getNodeItem().mainTitleNode.title = t[e].getNodeItem().mainTitleNode.title); + break + } + o.getNodeIsShow() && this.loadedNodeIdAndIndexMap.set(o.getCurrentNodeId(), i++) + } + return !1 + })) + } + + getFlagLine() { + return this.FLAG_LINE + } + + getVisibility(e) { + let t = this.loadedNodeIdAndIndexMap.get(e.getCurrentNodeId()) - 1; + if (t > this.INITIAL_INVALID_VALUE) { + let i = this.getData(t); + return 1 != e.getCanShowFlagLine() || e.getIsHighLight() || i.getIsHighLight() ? Visibility.Hidden : Visibility.Visible + } + return 1 != e.getCanShowFlagLine() || e.getIsHighLight() ? Visibility.Hidden : Visibility.Visible + } + + getSubTitlePara() { + return this.subTitle + } + + getIsFolder(e) { + return!!this.loadedNodeIdAndIndexMap.has(e) && this.getData(this.loadedNodeIdAndIndexMap.get(e)).getIsFolder() + } + + getSubTitleFontColor(e) { + return e ? this.subTitle.highLightFontColor : this.subTitle.normalFontColor + } + + getChildIndex(e, t) { + let i = this.INITIAL_INVALID_VALUE; + this.listNodeUtils.traverseNodeBF((function (o) { + if (o.getCurrentNodeId() == e) { + o.children.forEach(((e, o) => { + e.getCurrentNodeId() == t && (i = o) + })); + return !0 + } + return !1 + })); + return i + } + + setCurrentFocusNodeId(e) { + this.currentFocusNodeId = e + } + + getCurrentFocusNodeId() { + return this.currentFocusNodeId + } + + setLastFocusNodeId(e) { + this.lastFocusNodeId = e + } + + getLastFocusNodeId() { + return this.lastFocusNodeId + } + + getAddFocusNodeId() { + return this.addFocusNodeId + } + + setFlag(e) { + this.flag = e + } + } + + e.ListNodeDataSource = l; + + class h extends ViewPU { + constructor(e, t, i, s = -1) { + super(e, i, s); + this.__listFirstIndex = new ObservedPropertySimplePU(0, this, "listFirstIndex"); + this.__nodeList = new ObservedPropertyObjectPU([], this, "nodeList"); + this.listNodeDataSource = void 0; + this.__item = new ObservedPropertyObjectPU(null, this, "item"); + this.treeController = void 0; + this.__touchCount = new ObservedPropertySimplePU(0, this, "touchCount"); + this.__dropSelectedIndex = new ObservedPropertySimplePU(0, this, "dropSelectedIndex"); + this.__viewLastIndex = new ObservedPropertySimplePU(-1, this, "viewLastIndex"); + this.__listItemBgColor = new ObservedPropertyObjectPU({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background_transparent"], + bundleName: "", + moduleName: "" + }, this, "listItemBgColor"); + this.listTreeViewMenu = null; + this.MAX_CN_LENGTH = 254; + this.MAX_EN_LENGTH = 255; + this.INITIAL_INVALID_VALUE = -1; + this.MAX_TOUCH_DOWN_COUNT = 0; + this.isMultiPress = !1; + this.touchDownCount = this.INITIAL_INVALID_VALUE; + this.appEventBus = o.getInstance().getTreeListener(); + this.itemPadding = { + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_start"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_end"], + bundleName: "", + moduleName: "" + }, + top: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_margin_vertical"], + bundleName: "", + moduleName: "" + }, + bottom: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_margin_vertical"], + bundleName: "", + moduleName: "" + } + }; + this.textInputPadding = { left: "0vp", right: "0vp", top: "0vp", bottom: "0vp" }; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.listFirstIndex && (this.listFirstIndex = e.listFirstIndex); + void 0 !== e.nodeList && (this.nodeList = e.nodeList); + void 0 !== e.listNodeDataSource && (this.listNodeDataSource = e.listNodeDataSource); + void 0 !== e.item && (this.item = e.item); + void 0 !== e.treeController && (this.treeController = e.treeController); + void 0 !== e.touchCount && (this.touchCount = e.touchCount); + void 0 !== e.dropSelectedIndex && (this.dropSelectedIndex = e.dropSelectedIndex); + void 0 !== e.viewLastIndex && (this.viewLastIndex = e.viewLastIndex); + void 0 !== e.listItemBgColor && (this.listItemBgColor = e.listItemBgColor); + void 0 !== e.listTreeViewMenu && (this.listTreeViewMenu = e.listTreeViewMenu); + void 0 !== e.MAX_CN_LENGTH && (this.MAX_CN_LENGTH = e.MAX_CN_LENGTH); + void 0 !== e.MAX_EN_LENGTH && (this.MAX_EN_LENGTH = e.MAX_EN_LENGTH); + void 0 !== e.INITIAL_INVALID_VALUE && (this.INITIAL_INVALID_VALUE = e.INITIAL_INVALID_VALUE); + void 0 !== e.MAX_TOUCH_DOWN_COUNT && (this.MAX_TOUCH_DOWN_COUNT = e.MAX_TOUCH_DOWN_COUNT); + void 0 !== e.isMultiPress && (this.isMultiPress = e.isMultiPress); + void 0 !== e.touchDownCount && (this.touchDownCount = e.touchDownCount); + void 0 !== e.appEventBus && (this.appEventBus = e.appEventBus); + void 0 !== e.itemPadding && (this.itemPadding = e.itemPadding); + void 0 !== e.textInputPadding && (this.textInputPadding = e.textInputPadding) + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + this.__listFirstIndex.purgeDependencyOnElmtId(e); + this.__nodeList.purgeDependencyOnElmtId(e); + this.__item.purgeDependencyOnElmtId(e); + this.__touchCount.purgeDependencyOnElmtId(e); + this.__dropSelectedIndex.purgeDependencyOnElmtId(e); + this.__viewLastIndex.purgeDependencyOnElmtId(e); + this.__listItemBgColor.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__listFirstIndex.aboutToBeDeleted(); + this.__nodeList.aboutToBeDeleted(); + this.__item.aboutToBeDeleted(); + this.__touchCount.aboutToBeDeleted(); + this.__dropSelectedIndex.aboutToBeDeleted(); + this.__viewLastIndex.aboutToBeDeleted(); + this.__listItemBgColor.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get listFirstIndex() { + return this.__listFirstIndex.get() + } + + set listFirstIndex(e) { + this.__listFirstIndex.set(e) + } + + get nodeList() { + return this.__nodeList.get() + } + + set nodeList(e) { + this.__nodeList.set(e) + } + + get item() { + return this.__item.get() + } + + set item(e) { + this.__item.set(e) + } + + get touchCount() { + return this.__touchCount.get() + } + + set touchCount(e) { + this.__touchCount.set(e) + } + + get dropSelectedIndex() { + return this.__dropSelectedIndex.get() + } + + set dropSelectedIndex(e) { + this.__dropSelectedIndex.set(e) + } + + get viewLastIndex() { + return this.__viewLastIndex.get() + } + + set viewLastIndex(e) { + this.__viewLastIndex.set(e) + } + + get listItemBgColor() { + return this.__listItemBgColor.get() + } + + set listItemBgColor(e) { + this.__listItemBgColor.set(e) + } + + aboutToAppear() { + this.listNodeDataSource = this.treeController.getListNodeDataSource(); + this.nodeList = this.treeController.getListNodeDataSource().listNode; + this.item = this.treeController.getListNodeDataSource().listNode + } + + checkInvalidPattern(e) { + return /[\\\/:*?"<>|]/.test(e) + } + + checkIsAllCN(e) { + return /^[\u4e00-\u9fa5]+$/.test(e) + } + + popupForShowTitle(e, t, i, o = null) { + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.backgroundColor(t); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + } + }); + Row.padding({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + }, + top: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_middle"], + bundleName: "", + moduleName: "" + }, + bottom: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_middle"], + bundleName: "", + moduleName: "" + } + }); + i || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight("regular"); + Text.fontColor(i); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop() + } + + builder(e = null) { + this.listTreeViewMenu.bind(this)() + } + + draggingPopup(e, t = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.constraintSize({ + minWidth: this.listNodeDataSource.getDragPopupPara().floorConstraintSize.minWidth, + maxWidth: this.listNodeDataSource.getDragPopupPara().floorConstraintSize.maxWidth + }); + Row.height(this.listNodeDataSource.getDragPopupPara().height); + Row.backgroundColor(this.listNodeDataSource.getDragPopupPara().backgroundColor); + Row.padding({ + left: this.listNodeDataSource.getDragPopupPara().padding.left, + right: this.listNodeDataSource.getDragPopupPara().padding.right + }); + Row.shadow({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }, + color: "#00001E", + offsetY: 0 + }); + Row.borderRadius(this.listNodeDataSource.getDragPopupPara().borderRadius); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + If.create(); + e.getNodeItem().imageNode ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((t, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Row.create(); + Row.backgroundColor("#00000000"); + Row.margin({ right: e.getNodeItem().imageNode.itemRightMargin }); + Row.height(e.getNodeItem().imageNode.itemHeight); + Row.width(e.getNodeItem().imageNode.itemWidth); + i || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Image.create(e.getNodeItem().imageNode.normalSource); + Image.objectFit(ImageFit.Contain); + Image.height(e.getNodeItem().imageNode.itemHeight); + Image.width(e.getNodeItem().imageNode.itemWidth); + Image.opacity(this.listNodeDataSource.getDragPopupPara().imageOpacity); + i || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + i || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((t, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Row.create(); + Row.constraintSize({ + minWidth: e.getNodeItem().imageNode ? this.listNodeDataSource.getDragPopupPara().textConstraintSize.minWidth1 : this.listNodeDataSource.getDragPopupPara().textConstraintSize.minWidth2, + maxWidth: e.getNodeItem().imageNode ? this.listNodeDataSource.getDragPopupPara().textConstraintSize.maxWidth1 : this.listNodeDataSource.getDragPopupPara().textConstraintSize.maxWidth2 + }); + i || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + If.create(); + e.getNodeItem().mainTitleNode && e.getIsShowTitle() ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((t, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e.getNodeItem().mainTitleNode.title); + Text.maxLines(1); + Text.fontSize(e.getNodeItem().mainTitleNode.size); + Text.fontColor(this.listNodeDataSource.getDragPopupPara().fontColor); + Text.fontWeight(this.listNodeDataSource.getDragPopupPara().fontWeight); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + i || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : If.branchId(1); + i || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + Row.pop() + } + + clearLastIndexColor() { + if (!(-1 == this.viewLastIndex || this.viewLastIndex >= this.nodeList.length)) { + this.setImageSources(this.viewLastIndex, InteractionStatus.Normal); + this.nodeList[this.viewLastIndex].setNodeColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background_transparent"], + bundleName: "", + moduleName: "" + }); + this.nodeList[this.viewLastIndex].fontColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }; + this.listNodeDataSource.listNode[this.viewLastIndex].setNodeColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background_transparent"], + bundleName: "", + moduleName: "" + }); + this.listNodeDataSource.listNode[this.viewLastIndex].fontColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_primary"], + bundleName: "", + moduleName: "" + }; + this.listNodeDataSource.listNode[this.viewLastIndex].setIsSelected(!1); + this.listNodeDataSource.setImageSource(this.viewLastIndex, InteractionStatus.Normal) + } + } + + setImageSources(e, t) { + let i = this.nodeList[e]; + i.setIsSelected(t === InteractionStatus.Selected || t === InteractionStatus.Edit || t === InteractionStatus.FinishEdit); + null != i.getNodeItem().mainTitleNode && t != InteractionStatus.DragInsert && t != InteractionStatus.FinishDragInsert && i.getNodeItem().mainTitleNode.setMainTitleSelected(t === InteractionStatus.Selected || t === InteractionStatus.FinishEdit); + null != i.getNodeItem().imageNode && i.getNodeItem().imageNode.setImageSource(t) + } + + findIndex(e) { + let t = 0; + this.listNodeDataSource.ListNode.forEach((function (i, o) { + i.getNodeCurrentNodeId() == e && (t = o) + })); + return t + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + List.create({}); + List.onDragMove(((e, t) => { + if (this.isMultiPress) { + console.error("drag error, a item has been dragged"); + return + } + let i = Math.floor(e.getY() / 24) % 2 ? Flag.DOWN_FLAG : Flag.UP_FLAG; + let o = JSON.parse(t).insertIndex; + let s = !1; + if (o >= this.listNodeDataSource.totalCount()) { + i = Flag.DOWN_FLAG; + o = this.listNodeDataSource.totalCount() - 1; + this.listNodeDataSource.getData(o).setIsOverBorder(!0); + s = !0 + } else this.listNodeDataSource.getData(o).setIsOverBorder(!1); + let a = this.listNodeDataSource.getData(o).getCurrentNodeId(); + if (o != this.listNodeDataSource.getLastPassIndex() && this.listNodeDataSource.getIsInnerDrag()) { + if (this.listNodeDataSource.getIsParentOfInsertNode(a)) { + this.listNodeDataSource.setPassIndex(o); + let e = this; + this.listNodeDataSource.clearTimeOutAboutDelayHighLightAndExpand(findCurrentNodeIndex.call(e, a)); + this.listNodeDataSource.setFlag(Flag.NONE); + return + } + } + this.listNodeDataSource.setLastPassIndex(o); + this.listNodeDataSource.setVisibility(i, o - 1, s); + if (a != this.listNodeDataSource.getDraggingCurrentNodeId()) { + let e = this; + this.listNodeDataSource.delayHighLightAndExpandNode(findCurrentNodeIndex.call(e, a), a, o) + } + })); + List.onDragEnter(((e, t) => { + if (this.listNodeDataSource.getIsInnerDrag()) { + this.listNodeDataSource.setIsDrag(!0); + let e = .4; + this.listNodeDataSource.setListItemOpacity(e) + } + })); + List.onDragLeave(((e, t) => { + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.clearLastTimeoutExpand(); + this.listNodeDataSource.setListItemOpacity(1); + this.listNodeDataSource.setIsDrag(!1); + this.listNodeDataSource.notifyDataReload() + })); + List.onDrop(((e, t) => { + this.listNodeDataSource.clearLastTimeoutExpand(); + this.listNodeDataSource.setListItemOpacity(1); + let i = JSON.parse(t).insertIndex; + let o = this.dropSelectedIndex; + if (o - 1 > this.listNodeDataSource.totalCount() || null == o) { + console.error("drag error, currentNodeIndex is not found"); + this.listNodeDataSource.setIsDrag(!1); + return + } + if (i == this.listNodeDataSource.totalCount()) { + console.log("need to insert into the position of the last line, now insertNodeIndex = insertNodeIndex - 1"); + i -= 1 + } + let s = this.listNodeDataSource.getData(i); + if (null == s) return; + let a = s.getNodeCurrentNodeId(); + if (!this.listNodeDataSource.getIsDrag() || !this.listNodeDataSource.getIsInnerDrag()) { + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.setIsInnerDrag(!1); + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.initialParameterAboutDelayHighLightAndExpandIndex(); + this.listNodeDataSource.refreshSubtitle(a); + this.listNodeDataSource.notifyDataReload(); + return + } + let d = this.listNodeDataSource.getCurrentNodeInfo(); + let r = s.getNodeParentNodeId(); + let n = this.listNodeDataSource.getDraggingCurrentNodeId(); + let l = this.listNodeDataSource.getDraggingParentNodeId(); + if (this.listNodeDataSource.getIsParentOfInsertNode(a)) { + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.setIsInnerDrag(!1); + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.notifyDataChange(i); + this.listNodeDataSource.initialParameterAboutDelayHighLightAndExpandIndex(); + this.listNodeDataSource.setIsDrag(!1); + let e = this; + let t = findCurrentNodeIndex.call(e, n); + this.listNodeDataSource.setClickIndex(t); + this.listNodeDataSource.handleEvent(Event.DRAG, t); + return + } + if (this.listNodeDataSource.getExpandAndCollapseInfo(n) == NodeStatus.Expand) { + let e = this; + this.listNodeDataSource.expandAndCollapseNode(findCurrentNodeIndex.call(e, n)) + } + if (this.listNodeDataSource.getExpandAndCollapseInfo(a) == NodeStatus.Collapse) { + let e = this; + let t = findCurrentNodeIndex.call(e, a); + this.listNodeDataSource.ListNode[t].getIsHighLight() && this.listNodeDataSource.expandAndCollapseNode(t) + } + this.listNodeDataSource.setLastDelayHighLightId(); + if (n != a) { + this.listNodeDataSource.alterDragNode(r, a, s, l, n, d); + this.listNodeDataSource.hideLastLine() + } else { + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.setLastPassId(n); + this.listNodeDataSource.hideLastLine() + } + let h = findCurrentNodeIndex.call(this, this.listNodeDataSource.getLastDelayHighLightId()); + this.listNodeDataSource.setLastDelayHighLightIndex(h); + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.initialParameterAboutDelayHighLightAndExpandIndex(); + this.listNodeDataSource.setIsDrag(!1); + let c = findCurrentNodeIndex.call(this, n); + this.listNodeDataSource.setClickIndex(c); + this.listNodeDataSource.handleEvent(Event.DRAG, c); + this.listNodeDataSource.setIsInnerDrag(!1); + this.listNodeDataSource.notifyDataReload(); + this.listNodeDataSource.listNode[c].fontColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }; + if (-1 !== this.viewLastIndex && o != this.viewLastIndex) { + this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().mainTitleNode.setMainTitleSelected(!1); + this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().mainTitleNode.setMainTitleHighLight(!1) + } + null != this.listNodeDataSource.listNode[this.viewLastIndex] && (this.listNodeDataSource.listNode[this.viewLastIndex].fontColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + this.listNodeDataSource.setClickIndex(c); + this.listNodeDataSource.lastIndex = this.viewLastIndex; + if (this.listNodeDataSource.listNode[this.viewLastIndex] && null != this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().imageNode) { + this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().imageNode.setImageSource(InteractionStatus.Normal); + this.listNodeDataSource.listNode[this.viewLastIndex].imageSource = this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().imageNode.source + } + this.listNodeDataSource.listNode[this.viewLastIndex] && this.listNodeDataSource.listNode[this.viewLastIndex].setNodeColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background_transparent"], + bundleName: "", + moduleName: "" + }); + this.viewLastIndex = c + })); + t || List.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + { + const e = e => { + const t = e; + { + const e = void 0 !== globalThis.__lazyForEachItemGenFunction && !0; + const i = (i, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(i); + ListItem.create(a, e); + ListItem.width("100%"); + ListItem.height(t.getListItemHeight()); + ListItem.padding({ left: this.itemPadding.left, right: this.itemPadding.right }); + ListItem.align(Alignment.Start); + ListItem.onDragStart(((e, i) => { + if (this.listNodeDataSource.getIsDrag() || this.listNodeDataSource.getIsInnerDrag() || this.isMultiPress) { + console.error("drag error, a item has been dragged"); + return + } + this.dropSelectedIndex = JSON.parse(i).selectedIndex; + let o = JSON.parse(i).selectedIndex; + let s = this.listNodeDataSource.getData(o); + let a = t.getNodeCurrentNodeId(); + if (o >= this.listNodeDataSource.totalCount() || null == o) { + console.error("drag error, currentNodeIndex is not found in onDragStart"); + return + } + this.listNodeDataSource.setIsInnerDrag(!0); + this.listNodeDataSource.setIsDrag(!0); + this.listNodeDataSource.setCurrentNodeInfo(s); + this.listNodeDataSource.setDraggingCurrentNodeId(s.getNodeCurrentNodeId()); + this.listNodeDataSource.setDraggingParentNodeId(s.getNodeParentNodeId()); + this.listNodeDataSource.setListItemOpacity(.4); + this.listNodeDataSource.notifyDataChange(o); + if (a == s.getNodeCurrentNodeId()) return { builder: () => { + this.draggingPopup.call(this, s) + } }; + console.error("drag is too fast,it attribute a fault to OH"); + this.listNodeDataSource.setIsDrag(!1) + })); + o || ListItem.pop(); + ViewStackProcessor.StopGetAccessRecording() + }; + const o = () => { + this.observeComponentCreation(i); + ListItem.pop() + }; + const s = () => { + this.observeComponentCreation(i); + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.onTouch((e => { + this.viewLastIndex = this.listNodeDataSource.getLastIndex(); + let i = this.findIndex(t.getNodeCurrentNodeId()); + if (e.type == TouchType.Down && i != this.viewLastIndex) { + this.clearLastIndexColor(); + this.listNodeDataSource.lastIndex = i; + this.listNodeDataSource.setClickIndex(i) + } + if (e.type == TouchType.Up) { + this.listNodeDataSource.listNode[i].setIsSelected(!0); + this.listNodeDataSource.setImageSource(i, InteractionStatus.Selected); + null != this.listNodeDataSource.listNode[i].getNodeItem().imageNode && (this.listNodeDataSource.listNode[i].imageSource = this.listNodeDataSource.listNode[i].getNodeItem().imageNode.source); + if (i != this.viewLastIndex) { + this.clearLastIndexColor(); + this.listNodeDataSource.lastIndex = i; + this.listNodeDataSource.setClickIndex(i) + } + this.viewLastIndex = i + } + if (-1 !== this.listNodeDataSource.getLastIndex() && i !== this.listNodeDataSource.getLastIndex()) { + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE,!1, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE) + } + })); + i || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new TreeViewInner(this, { + item: t, + listNodeDataSource: this.listNodeDataSource, + index: this.findIndex(t.getNodeCurrentNodeId()) + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { item: t }); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop(); + ListItem.pop() + }; + const a = (e, o) => { + i(e, o); + this.updateFuncByElmtId.set(e, i); + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.onTouch((e => { + this.viewLastIndex = this.listNodeDataSource.getLastIndex(); + let i = this.findIndex(t.getNodeCurrentNodeId()); + if (e.type == TouchType.Down && i != this.viewLastIndex) { + this.clearLastIndexColor(); + this.listNodeDataSource.lastIndex = i; + this.listNodeDataSource.setClickIndex(i) + } + if (e.type == TouchType.Up) { + this.listNodeDataSource.listNode[i].setIsSelected(!0); + this.listNodeDataSource.setImageSource(i, InteractionStatus.Selected); + null != this.listNodeDataSource.listNode[i].getNodeItem().imageNode && (this.listNodeDataSource.listNode[i].imageSource = this.listNodeDataSource.listNode[i].getNodeItem().imageNode.source); + if (i != this.viewLastIndex) { + this.clearLastIndexColor(); + this.listNodeDataSource.lastIndex = i; + this.listNodeDataSource.setClickIndex(i) + } + this.viewLastIndex = i + } + if (-1 !== this.listNodeDataSource.getLastIndex() && i !== this.listNodeDataSource.getLastIndex()) { + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE,!1, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE) + } + })); + i || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + i ? ViewPU.create(new TreeViewInner(this, { + item: t, + listNodeDataSource: this.listNodeDataSource, + index: this.findIndex(t.getNodeCurrentNodeId()) + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, { item: t }); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop(); + ListItem.pop() + }; + e ? o() : s() + } + }; + const t = e => JSON.stringify(e); + LazyForEach.create("1", this, this.listNodeDataSource, e, t); + LazyForEach.pop() + } + List.pop() + } + + rerender() { + this.updateDirtyElements() + } + } + + __decorate([], h.prototype, "popupForShowTitle", null); + __decorate([], h.prototype, "builder", null); + __decorate([], h.prototype, "draggingPopup", null); + e.TreeView = h; + e.TreeController = class { + constructor() { + this.ROOT_NODE_ID = -1; + this.nodeIdList = []; + this.listNodeUtils = new n; + this.listNodeDataSource = new l + } + + getListNodeDataSource() { + return this.listNodeDataSource + } + + getClickNodeChildrenInfo() { + let e = this.listNodeDataSource.getClickNodeId(); + return this.listNodeUtils.getClickNodeChildrenInfo(e) + } + + getChildrenId() { + let e = this.listNodeDataSource.getClickNodeId(); + return this.listNodeUtils.getClickChildId(e) + } + + removeNode() { + let e = this.listNodeDataSource.getClickNodeId(); + if (e < 0) return; + let t = this.listNodeUtils.findParentNodeId(e); + let i = this.listNodeUtils.removeNode(e, t, this.listNodeUtils.traverseNodeBF); + this.listNodeDataSource.refreshData(this.listNodeUtils, MenuOperation.REMOVE_NODE, t, i); + this.nodeIdList.splice(this.nodeIdList.indexOf(e), 1) + } + + modifyNode() { + let e = this.listNodeDataSource.getClickNodeId(); + this.listNodeDataSource.setItemVisibilityOnEdit(e, MenuOperation.MODIFY_NODE) + } + + add() { + let e = this.listNodeDataSource.getClickNodeId(); + if (e == this.listNodeDataSource.ROOT_NODE_ID || !this.listNodeDataSource.getIsFolder(e)) return; + let t = { + isFolder: !0, + icon: null, + selectedIcon: null, + editIcon: null, + container: null, + secondaryTitle: "" + }; + t = this.listNodeUtils.getNewNodeInfo(e); + this.nodeIdList.push(this.nodeIdList[this.nodeIdList.length-1] + 1); + let i = this.nodeIdList[this.nodeIdList.length-1]; + this.listNodeUtils.addNewNodeId = i; + this.listNodeUtils.addNode(e, i, { + isFolder: t.isFolder, + icon: t.icon, + selectedIcon: t.selectedIcon, + editIcon: t.editIcon, + primaryTitle: "新建文件夹", + container: t.container, + secondaryTitle: t.secondaryTitle + }); + this.listNodeDataSource.refreshData(this.listNodeUtils, MenuOperation.ADD_NODE, e, [i]); + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE,!1, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE); + this.listNodeDataSource.listNode[this.listNodeDataSource.getLastIndex()].setFontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + let o = findCurrentNodeIndex.call(this, i); + this.listNodeDataSource.setClickIndex(o); + this.listNodeDataSource.handleEvent(Event.TOUCH_UP, o) + } + + addNodeParam(e) { + if (null != e.primaryTitle && !this.listNodeUtils.checkMainTitleIsValid(e.primaryTitle)) throw new Error('ListTreeNode[addNode]: The directory name cannot contain the following characters /: *? "< > | or exceeds the maximum length.'); + if (null == e.primaryTitle && null == e.icon) throw new Error("ListTreeNode[addNode]: The icon and directory name cannot be empty at the same time."); + if (e.currentNodeId === this.ROOT_NODE_ID || null === e.currentNodeId) throw new Error("ListTreeNode[addNode]: currentNodeId can not be -1 or null."); + this.nodeIdList.push(e.currentNodeId); + this.listNodeUtils.addNode(e.parentNodeId, e.currentNodeId, e); + return this + } + + addNode(e) { + if (null != e) { + if (null != e.primaryTitle && !this.listNodeUtils.checkMainTitleIsValid(e.primaryTitle)) throw new Error('ListTreeNode[addNode]: The directory name cannot contain the following characters /: *? "< > | or exceeds the maximum length.'); + if (null == e.primaryTitle && null == e.icon) throw new Error("ListTreeNode[addNode]: The icon and directory name cannot be empty at the same time."); + if (e.currentNodeId === this.ROOT_NODE_ID || null === e.currentNodeId) throw new Error("ListTreeNode[addNode]: currentNodeId can not be -1 or null."); + this.nodeIdList.push(e.currentNodeId); + this.listNodeUtils.addNode(e.parentNodeId, e.currentNodeId, e); + return this + } + this.add() + } + + buildDone() { + this.listNodeDataSource.init(this.listNodeUtils); + this.nodeIdList.sort(((e, t) => e - t)) + } + + refreshNode(e, t = "", i = "") { + this.listNodeDataSource.setNodeSubtitlePara(e, t, i) + } + } +}(TreeView || (TreeView = {})); + +export class TreeViewInner extends ViewPU { + constructor(e, t, i, o = -1) { + super(e, i, o); + this.__item = new SynchedPropertyNesedObjectPU(t.item, this, "item"); + this.listNodeDataSource = void 0; + this.__columnWidth = new ObservedPropertySimplePU(0, this, "columnWidth"); + this.__isFocused = new ObservedPropertySimplePU(!1, this, "isFocused"); + this.__index = new ObservedPropertySimplePU(-1, this, "index"); + this.__lastIndex = new ObservedPropertySimplePU(-1, this, "lastIndex"); + this.__count = new ObservedPropertySimplePU(0, this, "count"); + this.listTreeViewMenu = null; + this.MAX_CN_LENGTH = 254; + this.MAX_EN_LENGTH = 255; + this.INITIAL_INVALID_VALUE = -1; + this.MAX_TOUCH_DOWN_COUNT = 0; + this.isMultiPress = !1; + this.touchDownCount = this.INITIAL_INVALID_VALUE; + this.appEventBus = TreeView.TreeListenerManager.getInstance().getTreeListener(); + this.itemPadding = { + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_start"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_end"], + bundleName: "", + moduleName: "" + }, + top: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_margin_vertical"], + bundleName: "", + moduleName: "" + }, + bottom: "0vp" + }; + this.textInputPadding = { left: "0vp", right: "0vp", top: "0vp", bottom: "0vp" }; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + this.__item.set(e.item); + void 0 !== e.listNodeDataSource && (this.listNodeDataSource = e.listNodeDataSource); + void 0 !== e.columnWidth && (this.columnWidth = e.columnWidth); + void 0 !== e.isFocused && (this.isFocused = e.isFocused); + void 0 !== e.index && (this.index = e.index); + void 0 !== e.lastIndex && (this.lastIndex = e.lastIndex); + void 0 !== e.count && (this.count = e.count); + void 0 !== e.listTreeViewMenu && (this.listTreeViewMenu = e.listTreeViewMenu); + void 0 !== e.MAX_CN_LENGTH && (this.MAX_CN_LENGTH = e.MAX_CN_LENGTH); + void 0 !== e.MAX_EN_LENGTH && (this.MAX_EN_LENGTH = e.MAX_EN_LENGTH); + void 0 !== e.INITIAL_INVALID_VALUE && (this.INITIAL_INVALID_VALUE = e.INITIAL_INVALID_VALUE); + void 0 !== e.MAX_TOUCH_DOWN_COUNT && (this.MAX_TOUCH_DOWN_COUNT = e.MAX_TOUCH_DOWN_COUNT); + void 0 !== e.isMultiPress && (this.isMultiPress = e.isMultiPress); + void 0 !== e.touchDownCount && (this.touchDownCount = e.touchDownCount); + void 0 !== e.appEventBus && (this.appEventBus = e.appEventBus); + void 0 !== e.itemPadding && (this.itemPadding = e.itemPadding); + void 0 !== e.textInputPadding && (this.textInputPadding = e.textInputPadding) + } + + updateStateVars(e) { + this.__item.set(e.item) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__item.purgeDependencyOnElmtId(e); + this.__columnWidth.purgeDependencyOnElmtId(e); + this.__isFocused.purgeDependencyOnElmtId(e); + this.__index.purgeDependencyOnElmtId(e); + this.__lastIndex.purgeDependencyOnElmtId(e); + this.__count.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__item.aboutToBeDeleted(); + this.__columnWidth.aboutToBeDeleted(); + this.__isFocused.aboutToBeDeleted(); + this.__index.aboutToBeDeleted(); + this.__lastIndex.aboutToBeDeleted(); + this.__count.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get item() { + return this.__item.get() + } + + get columnWidth() { + return this.__columnWidth.get() + } + + set columnWidth(e) { + this.__columnWidth.set(e) + } + + get isFocused() { + return this.__isFocused.get() + } + + set isFocused(e) { + this.__isFocused.set(e) + } + + get index() { + return this.__index.get() + } + + set index(e) { + this.__index.set(e) + } + + get lastIndex() { + return this.__lastIndex.get() + } + + set lastIndex(e) { + this.__lastIndex.set(e) + } + + get count() { + return this.__count.get() + } + + set count(e) { + this.__count.set(e) + } + + aboutToAppear() { + this.item.getNodeItem().imageNode && (this.item.imageSource = this.item.getNodeItem().imageNode.source) + } + + checkInvalidPattern(e) { + return /[\\\/:*?"<>|]/.test(e) + } + + checkIsAllCN(e) { + return /^[\u4e00-\u9fa5]+$/.test(e) + } + + popupForShowTitle(e, t, i, o = null) { + this.observeComponentCreation(((e, i) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.backgroundColor(t); + Row.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + } + }); + Row.padding({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_elements_margin_horizontal_l"], + bundleName: "", + moduleName: "" + }, + top: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_middle"], + bundleName: "", + moduleName: "" + }, + bottom: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_card_margin_middle"], + bundleName: "", + moduleName: "" + } + }); + i || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Text.create(e); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontWeight("regular"); + Text.fontColor(i); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Row.pop() + } + + builder(e = null) { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.listTreeViewMenu ? this.ifElseBranchUpdateFunction(0, (() => { + this.listTreeViewMenu.bind(this)() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop() + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.item.getNodeIsShow() ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create(); + ViewStackProcessor.visualState("focused"); + Stack.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 2, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + }, + style: BorderStyle.Solid + }); + ViewStackProcessor.visualState("normal"); + Stack.border({ + radius: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_clicked"], + bundleName: "", + moduleName: "" + }, + width: 0 + }); + ViewStackProcessor.visualState(); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.opacity(this.listNodeDataSource.getListItemOpacity(ObservedObject.GetRawObject(this.item))); + Column.onHover((e => { + e ? this.item.setNodeColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_hover"], + bundleName: "", + moduleName: "" + }) : this.item.setNodeColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_background_transparent"], + bundleName: "", + moduleName: "" + }) + })); + Column.onTouch((e => { + this.count++; + if (this.count > 1) { + this.count--; + return + } + this.listNodeDataSource.setClickIndex(this.index); + let t = this.item.getNodeCurrentNodeId(); + if (e.type === TouchType.Down) this.item.setNodeColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_click_effect"], + bundleName: "", + moduleName: "" + }); else if (e.type === TouchType.Up) { + this.item.setNodeColor("#1A0A59F7"); + this.item.fontColor = { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary_activated"], + bundleName: "", + moduleName: "" + }; + if (null != this.item.getNodeItem().imageNode) { + this.item.getNodeItem().imageNode.setImageSource(InteractionStatus.Selected); + this.listNodeDataSource.setImageSource(this.index, InteractionStatus.Selected); + this.item.imageSource = this.item.getNodeItem().imageNode.source + } + this.item.getNodeItem().mainTitleNode.setMainTitleSelected(!0); + this.lastIndex = this.index; + let e = { currentNodeId: t }; + this.appEventBus.emit(TreeView.TreeListenType.NODE_CLICK, [e]) + } + if (-1 !== this.listNodeDataSource.getLastIndex() && this.index !== this.listNodeDataSource.getLastIndex()) { + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE,!1, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE) + } + this.count-- + })); + Column.backgroundColor(this.item.getNodeItem().mainTitleNode && this.item.getNodeItem().inputText && this.item.getIsShowInputText() ? this.item.getNodeItem().inputText.editColor : this.item.getNodeColor()); + Column.border({ + width: this.item.getNodeBorder().borderWidth, + color: this.item.getNodeBorder().borderColor, + radius: this.item.getNodeBorder().borderRadius + }); + Column.height(48); + Column.focusable(!0); + Column.onMouse((e => { + let t = this; + let i = findCurrentNodeIndex.call(t, this.item.getNodeCurrentNodeId()); + if (e.button == MouseButton.Right) { + t.listNodeDataSource.handleEvent(Event.MOUSE_BUTTON_RIGHT, findCurrentNodeIndex.call(t, this.item.getNodeCurrentNodeId())); + this.listTreeViewMenu = this.item.getMenu(); + t.listNodeDataSource.setClickIndex(i); + clearTimeout(this.item.getNodeItem().mainTitleNode.popUpTimeout) + } + e.stopPropagation() + })); + Column.padding({ top: 0, bottom: 0 }); + Column.bindPopup(this.item.getPopUpInfo().popUpIsShow, { + builder: { builder: () => { + this.popupForShowTitle.call(this, this.item.getPopUpInfo().popUpText, this.item.getPopUpInfo().popUpColor, this.item.getPopUpInfo().popUpTextColor) + } }, + placement: Placement.BottomLeft, + placementOnTop: !1, + popupColor: this.item.getPopUpInfo().popUpColor, + autoCancel: !0, + enableArrow: this.item.getPopUpInfo().popUpEnableArrow + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create({ alignContent: Alignment.Bottom }); + Stack.focusable(!0); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Divider.create(); + Divider.height(this.listNodeDataSource.getFlagLine().flagLineHeight); + Divider.color(this.listNodeDataSource.getFlagLine().flagLineColor); + Divider.visibility(this.listNodeDataSource.getVisibility(ObservedObject.GetRawObject(this.item))); + Divider.lineCap(LineCapStyle.Round); + Divider.margin({ left: this.item.getFlagLineLeftMargin() }); + Divider.focusable(!0); + t || Divider.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create({}); + Row.focusable(!0); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create({}); + Row.focusable(!0); + Row.width("100%"); + Gesture.create(GesturePriority.Low); + TapGesture.create({ count: 2 }); + TapGesture.onAction((e => { + this.listNodeDataSource.expandAndCollapseNode(findCurrentNodeIndex.call(this, this.item.getNodeCurrentNodeId())) + })); + TapGesture.pop(); + Gesture.pop(); + Row.height(this.item.getNodeHeight()); + Row.padding({ left: this.item.getNodeLeftPadding() }); + Row.bindContextMenu({ builder: this.builder.bind(this) }, ResponseType.RightClick); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.item.getNodeItem().imageNode ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.focusable(!0); + Row.backgroundColor("#00000000"); + Row.margin({ right: this.item.getNodeItem().imageNode.itemRightMargin }); + Row.height(this.item.getNodeItem().imageNode.itemHeight); + Row.width(this.item.getNodeItem().imageNode.itemWidth); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.imageSource); + Image.objectFit(ImageFit.Contain); + Image.height(this.item.getNodeItem().imageNode.itemHeight); + Image.width(this.item.getNodeItem().imageNode.itemWidth); + Image.opacity(this.item.getIsSelected() || this.item.getIsHighLight() ? this.item.getNodeItem().imageNode.noOpacity : this.item.getNodeItem().imageNode.opacity); + Image.focusable(null == this.item.getNodeItem().mainTitleNode); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.layoutWeight(1); + Row.focusable(!0); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.item.getNodeItem().mainTitleNode && this.item.getIsShowTitle() ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.item.getNodeItem().mainTitleNode.title); + Text.maxLines(1); + Text.fontSize(this.item.getNodeItem().mainTitleNode.size); + Text.fontColor(this.item.fontColor); + Text.margin({ right: this.item.getNodeItem().mainTitleNode.itemRightMargin }); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.fontWeight(this.item.getNodeItem().mainTitleNode.weight); + Text.focusable(!0); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.item.getNodeItem().mainTitleNode && this.item.getNodeItem().inputText && this.item.getIsShowInputText() ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.backgroundColor(this.item.getNodeItem().inputText.backgroundColor); + Row.borderRadius(this.item.getNodeItem().inputText.borderRadius); + Row.margin({ right: this.item.getNodeItem().inputText.itemRightMargin }); + Row.focusable(!0); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + TextInput.create({ text: this.item.getNodeItem().mainTitleNode.title }); + TextInput.focusable(!0); + TextInput.height(this.item.getNodeItem().inputText.itemHeight); + TextInput.fontSize(this.item.getNodeItem().inputText.size); + TextInput.fontColor(this.item.getNodeItem().inputText.color); + TextInput.borderRadius(this.item.getNodeItem().inputText.borderRadius); + TextInput.backgroundColor(this.item.getNodeItem().inputText.backgroundColor); + TextInput.enterKeyType(EnterKeyType.Done); + TextInput.focusable(!0); + TextInput.padding({ + left: this.textInputPadding.left, + right: this.textInputPadding.right, + top: this.textInputPadding.top, + bottom: this.textInputPadding.bottom + }); + TextInput.onChange((e => { + let t = this; + var i = findCurrentNodeIndex.call(t, this.item.getNodeCurrentNodeId()); + let o = ""; + let s = !1; + let a = !1; + if (t.checkInvalidPattern(e)) { + for (let i = 0;i < e.length; i++) t.checkInvalidPattern(e[i]) || (o += e[i]); + s = !0; + t.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.INVALID_ERROR,!0, i) + } else { + o = e; + s = !1 + } + if (t.checkIsAllCN(o) && o.length > this.MAX_CN_LENGTH || !t.checkIsAllCN(o) && o.length > this.MAX_EN_LENGTH) { + o = t.checkIsAllCN(o) ? o.substr(0, this.MAX_CN_LENGTH) : o.substr(0, this.MAX_EN_LENGTH); + a = !0; + t.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.LENGTH_ERROR,!0, i) + } else a = !1; + a || s || t.listNodeDataSource.setMainTitleNameOnEdit(i, o) + })); + TextInput.onSubmit((e => { + let t = this; + var i = findCurrentNodeIndex.call(t, this.item.getNodeCurrentNodeId()); + t.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE,!1, i); + t.listNodeDataSource.setItemVisibilityOnEdit(i, MenuOperation.COMMIT_NODE) + })); + t || TextInput.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Blank.create(); + t || Blank.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Blank.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.listNodeDataSource.hasSubtitle(this.item.getCurrentNodeId()) ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.focusable(!0); + Row.margin({ + left: this.listNodeDataSource.getSubTitlePara().margin.left, + right: this.item.getNodeItem().imageCollapse ? 0 : this.listNodeDataSource.getSubTitlePara().margin.right + }); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.listNodeDataSource.getSubtitle(this.item.getCurrentNodeId())); + Text.fontSize(this.listNodeDataSource.getSubTitlePara().fontSize); + Text.fontColor(this.listNodeDataSource.getSubTitleFontColor(this.item.getIsHighLight() || this.item.getIsModify())); + Text.fontWeight(this.listNodeDataSource.getSubTitlePara().fontWeight); + Text.focusable(!0); + 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(); + this.item.getNodeItem().imageCollapse ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.focusable(!0); + Row.height(this.item.getNodeItem().imageCollapse.itemHeight); + Row.width(this.item.getNodeItem().imageCollapse.itemWidth); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.item.getNodeItem().imageCollapse.collapseSource); + Image.fillColor(this.item.getNodeItem().imageCollapse.isCollapse ? "#00000000" : "#FFFFFF"); + Image.align(Alignment.End); + Image.objectFit(ImageFit.Contain); + Image.height(this.item.getNodeItem().imageCollapse.itemHeight); + Image.width(this.item.getNodeItem().imageCollapse.itemWidth); + Image.opacity(this.item.getIsHighLight() ? this.item.getNodeItem().imageCollapse.noOpacity : this.item.getNodeItem().imageCollapse.opacity); + Image.onTouch((e => { + if (e.type === TouchType.Down) { + let e = this; + e.listNodeDataSource.expandAndCollapseNode(findCurrentNodeIndex.call(e, this.item.getNodeCurrentNodeId())); + this.listNodeDataSource.setCurrentFocusNodeId(this.item.getCurrentNodeId()) + } + e.stopPropagation() + })); + Image.focusable(!0); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Row.pop(); + Row.pop(); + Stack.pop(); + Column.pop(); + Stack.pop() + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export default TreeView \ No newline at end of file diff --git a/advanced_ui_component/treeview/source/treeview.ets b/advanced_ui_component/treeview/source/treeview.ets new file mode 100644 index 0000000000000000000000000000000000000000..cd695b8b4031fe9dbb37b72c55784cce46fa2e57 --- /dev/null +++ b/advanced_ui_component/treeview/source/treeview.ets @@ -0,0 +1,3564 @@ +/* + * 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. + */ + +const IMAGE_NODE_HEIGHT: number = 24 +const IMAGE_NODE_WIDTH: number = 24 +const ITEM_WIDTH: number = 0 +const ITEM_HEIGHT: number = 48 +const ITEM_HEIGHT_INPUT: number = 32 +const BORDER_WIDTH_HAS: number = 2 +const BORDER_WIDTH_NONE: number = 0 +const NODE_HEIGHT: number = 48 +const LIST_ITEM_HEIGHT_NONE: number = 0 +const LIST_ITEM_HEIGHT: number = 48 +const SHADOW_OFFSETY: number = 10 +const FLAG_NUMBER: number = 2 +const DRAG_OPACITY: number = 0.4 +const DRAG_OPACITY_NONE: number = 1 +const FLAG_LINE_HEIGHT: string = '1.0vp' +const X_OFF_SET: string = '0vp' +const Y_OFF_SET: string = '2.75vp' +const Y_BOTTOM_OFF_SET: string = '-1.25vp' +const Y_BASE_PLATE_OFF_SET: string = '1.5vp' +const COLOR_SELECT: string = '#1A0A59F7' +const COLOR_IMAGE_ROW: string = '#00000000' +const COLOR_IMAGE_EDIT: string = '#FFFFFF' +const SHADOW_COLOR: string = '#00001E' +const GRAG_POP_UP_HEIGHT: string = '48' +const LEFT_PADDING: string = '8vp' +const RIGHT_PADDING: string = '8vp' +const FLOOR_MIN_WIDTH: string = '128vp' +const FLOOR_MAX_WIDTH: string = '208vp' +const TEXT_MIN_WIDTH: string = '80vp' +const TEXT_MAX_WIDTH: string = '160vp' +const MIN_WIDTH: string = '112vp' +const MAX_WIDTH: string = '192vp' +const TRANS_COLOR: string = '#00FFFFFF' + +const ARROW_DOWN = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA+' + + 'gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzA' + + 'AAOxAAADsQBlSsOGwAAAq9JREFUeNrt2j9rFEEYx/FJziIECwsLCwsJIVhYiISgaIhiioiIlpaCjZ1/qhNUIkHE0negpZggEnwHFgoWFiJic' + + 'VyRQsQXIHKIvyGzIJKbmTW7M7P6/cCvyR3c7fPsPLO7F2MAAAAAAAAAAAAAAAAAAAAAAAAAAF01keAz9ihrymVln/JEua18L7w2V5TrykHlt' + + 'XJTGTb9Ib0EB/JYueWKP6Ucd3mh/Ci0+Hfc9z6gTCuHlUvK06ZPnMkEB3Nth78tK89dQ0os/toOfz+kHG36w1I0YNwZs6JsFtaEccVvTYoGr' + + 'HteW3ajaKoDxbfz/10X94BXyoIyO+b1Wbcn2JE0ylT8VeW+5/UtZUn52sUG/FQ23PycG/OeGWXevW+U4cwPFf+MMmjjw3uJDnLkRo2vCTlWQ' + + 'l954Hn9i3Je+djWF+glPNNimlCthJcJLlH7buZPemb+ovKpzS/RS7zcqybMB/aEhZZXwmqg+NXMH7ZdkNQNqJrwLLAxz7Q4jkIzf5iq+LkaU' + + 'GdjbroJoUvNb674g1SFyNWAOntCU48tYq7zzyqfUxYhZwPqNOHYLi9RQ8XfylH8EhpQZ2P+23EUU/zFlGOntAbU2Zjr3qyF7nCrsTPIdeClN' + + 'CB2Y66zEvoRG26WsVNqA+rerPlWwg3lYeAmayl38UtsQBOPLezMfxRxkzUo4WBLbEDsxmxXwinlrRsn+5W7yr1SbrJiTJiy2d+T7Y82K4H32' + + 'QbsNf7fFeyDtRMlFb/kFVBnY7amXbN8l5oXTYtPNf/VBsTuCSZQfPs8/0OJB9eFBuymCXbsnCxlw+1yA2I35j+Lf860/Dz/f2rA73fMdhUc8' + + 'bzvjXKhxJnftasgH3sJelU5bbb/Z8ee8e/N9j9PrZt8P/ADAAAAAAAAAAAAAAAAAAAAAAAgpV9KuZwVm6MIDQAAAABJRU5ErkJggg==' + +const ARROW_DOWN_WITHE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIGNIUk0AAHomAAC' + + 'AhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAl' + + 'wSFlzAAAOxAAADsQBlSsOGwAAAKVJREFUeNpjYBgFo2AU0Bww4pL4////diC1hZGRcSo+A4DqWIDUZCB+AVTbiC7PhEfvByCeAjQgn4Dhy4E' + + '4BYgvYFODz4JYIF4DxBOwWYJkeAAQRwBdvxGbIcy4TG9sbPzX0NCwHsjUAuIiIPsDUOwkDsPXkhwHWFwaAsQlQAwyrJsYw4myAIslIPCHGMP' + + 'xBhGO4PoGxF+AOA9o+NbRTDgKRgFxAAAzj0Grm3RjyAAAAABJRU5ErkJggg==' + +const ARROW_RIGHT = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA' + + '+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlz' + + 'AAAOxAAADsQBlSsOGwAAAjVJREFUeNrtnCtvG1EQRq+9BlVUEBAYYFBgYGBYaBBoFUVVfkCtyqDAIL8jtI8EBruVIgU4UvMD0iKDPmirtlJg' + + 'lJZUyqzsSFXlxwZsPPPtOdJHbDKac+/cXXvtlAAAAAAAAAAAAAAAAAAAAAAUyZzW1bMMLbuWv5YvqgJqTps/sjT+eW1geckOuB+OLdtzpHy3' + + 'fFQTUHdY06MFr7+xPGMHlE93iYQnajvBo4APlj3LRhUkeBRwaRnProDkJXi9DP1ZFQmZ49oqISFzXl9RCb8sFwhYn4Sw9wlZkDplx1EWqFZJ' + + 'CVmwHSsnIZoAuYM5ogCpgzmqAJlxFFmAxDiKLiD8OFIQEHocqQgIK0FJwF0kfLZMELA+CTuWI8s1AtYj4YHlt+UcAeVK+JqmX2/OY9Pyat1F' + + '1pM2J2n6Fec8mh4KVBdwO27m8RAB5dNb0uhPCCiXTpo+zLWItwgoj/bsKmhrwft/PBzAOQ3RlT9a0vycF5ZvHoqtCTZ/vKL5fcuhl4KVRlA7' + + 'WvOVBOQP875f0fyBt+arnAH52DmNtvJVzoBwM19pBBVp/r7n5kceQa0CYyfE78pqoiu/733lRxUg1fxoZ0BbrfmRzoAiHy+Ea36UEdRRXPlR' + + 'RlCR5g+iNt/7CGoqr3zvAuRXvucR1CrQ/GES+fMOjzvgQH3seN8B3ao036uASVWan+Pxybgflqf/LY78wH2dBPF6I/bY8txyZXlnOUsAAAAA' + + 'AAAAAAAAAAAAAAAAEIgb8WKMjSFbuAQAAAAASUVORK5CYII=' + +const ARROW_RIGHT_WITHE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIGNIUk0AAHomAA' + + 'CAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA' + + 'lwSFlzAAAOxAAADsQBlSsOGwAAAKFJREFUeNpjYBgFowAE/v//bwHEPOToZSJS3XIg3k6OJcRaUALEFuRYwkyMosbGxusNDQ3XgMwCIHYAsl' + + 'cDxX5RzQJKLGEmxbvkWMJEaqQxMjKuBVI5QGwDxOnUimR08AFK81DdAmAqArl8DhDfAOKpVLUAavh2IH4CxI7A4HpDMEgpMPwFUXFGS8NJCa' + + 'L55BgOAixEqqsB4oOkGj4KRggAAN4STB9zyhGzAAAAAElFTkSuQmCC' + +enum Event { + TOUCH_DOWN = 0, + TOUCH_UP = 1, + HOVER = 3, + HOVER_OVER = 4, + FOCUS = 5, + BLUR = 6, + MOUSE_BUTTON_RIGHT = 7, + DRAG = 8 +} + +enum MenuOperation { + ADD_NODE = 0, + REMOVE_NODE = 1, + MODIFY_NODE = 2, + COMMIT_NODE = 3 +} + +enum PopUpType { + HINTS = 0, + WARNINGS = 1 +} + +enum InputError { + INVALID_ERROR = 0, + LENGTH_ERROR = 1, + NONE = 2 +} + +enum Flag { + DOWN_FLAG = 0, + UP_FLAG = 1, + NONE = 2 +} + +export enum NodeStatus { + Expand = 0, + Collapse +} + +export enum InteractionStatus { + Normal = 0, + Selected, + Edit, + FinishEdit, + DragInsert, + FinishDragInsert +} + +/* nodeId to find index */ +function findCurrentNodeIndex(this, currentNodeId: number): number { + let thisIndex: number = 0; + this.listNodeDataSource.ListNode.forEach(function (value, index) { + if (value.getNodeCurrentNodeId() == currentNodeId) { + thisIndex = index; + } + }) + return thisIndex; +} + +@Observed +export class NodeInfo { + private childNodeInfo: { isHasChildNode: boolean, childNum: number, allChildNum: number }; + imageSource: Resource | string; + private parentNodeId: number; + private currentNodeId: number; + fontColor: string | Resource; + private nodeHeight: Resource | number; + private nodeLevel: number; + private nodeItem: { imageNode?: TreeView.ImageNode, + inputText: TreeView.InputText, + mainTitleNode?: TreeView.MainTitleNode, + imageCollapse?: TreeView.ImageNode }; + private nodeLeftPadding: number; + private nodeColor: Resource | string; + private nodeIsShow: boolean; + private status: { normal: Resource, hover: Resource, press: Resource, selected: string, highLight: Resource }; + private nodeBorder: { borderWidth: Resource | number, borderColor: Resource, borderRadius: Resource }; + private popUpInfo: { popUpIsShow: boolean, + popUpEnableArrow: boolean, + popUpColor: Resource, + popUpText: string | Resource, + popUpTextColor: Resource}; + private listItemHeight: number; + private container: () => void; + private isShowTitle: boolean; + private isShowInputText: boolean; + private isSelected: boolean; + readonly borderWidth: {has: Resource | number, none: Resource | number } = + {has: BORDER_WIDTH_HAS/* 2vp */, none: BORDER_WIDTH_NONE/* 0vp */} + + /* parameter of the drag event.*/ + private nodeParam: { + isFolder?: boolean, + icon?: Resource, + selectedIcon?: Resource, + editIcon?: Resource, + primaryTitle?: string, + container?: () => void, + secondaryTitle?: number | string + }; + private node: TreeView.NodeItem; + private canShowFlagLine: boolean = false; + private isOverBorder: boolean = false; + private canShowBottomFlagLine: boolean = false; + private isHighLight: boolean = false; + private flagLineLeftMargin: number; + private isModify: boolean = false; + + constructor(node: TreeView.NodeItem) { + this.childNodeInfo = node.getChildNodeInfo(); + this.nodeItem = { imageNode: null, inputText: null, mainTitleNode: null, imageCollapse: null }; + this.popUpInfo = { popUpIsShow: false, + popUpEnableArrow: false, + popUpColor: null, + popUpText: '', + popUpTextColor: null }; + this.nodeItem.imageNode = node.getNodeItem().imageNode; + this.nodeItem.inputText = new TreeView.InputText(); + this.nodeItem.mainTitleNode = node.getNodeItem().mainTitleNode; + this.nodeItem.imageCollapse = node.getNodeItem().imageCollapse; + this.container = node.container; + this.parentNodeId = node.parentNodeId; + this.currentNodeId = node.currentNodeId; + this.nodeHeight = NODE_HEIGHT; + this.nodeLevel = node.nodeLevel; + this.nodeLeftPadding = node.nodeLevel * 12 + 8; // calculate left padding + this.nodeColor = $r('sys.color.ohos_id_color_background'); + this.nodeIsShow = (this.nodeLevel > 0) ? false : true; + this.listItemHeight = (this.nodeLevel > 0) ? LIST_ITEM_HEIGHT_NONE : LIST_ITEM_HEIGHT; + this.isShowTitle = true; + this.isShowInputText = false; + this.isSelected = false; + this.status = { normal: $r('sys.color.ohos_id_color_background_transparent'), + hover: $r('sys.color.ohos_id_color_hover'), + press: $r('sys.color.ohos_id_color_click_effect'), + selected: COLOR_SELECT, + highLight: $r('sys.color.ohos_id_color_activated') + }; + this.nodeBorder = { borderWidth: BORDER_WIDTH_NONE, + borderColor: $r('sys.color.ohos_id_color_focused_outline'), + borderRadius: $r('sys.float.ohos_id_corner_radius_clicked') + }; + this.flagLineLeftMargin = node.nodeLevel * 12 + 8; + this.node = node; + this.nodeParam = node.data; + } + + setFontColor(color: string | Resource) { + this.fontColor = color + } + + getFontColor() { + return this.fontColor; + } + + getPopUpInfo() { + return this.popUpInfo; + } + + setPopUpIsShow(isShow: boolean) { + this.popUpInfo.popUpIsShow = isShow; + } + + setPopUpEnableArrow(popUpEnableArrow: boolean) { + this.popUpInfo.popUpEnableArrow = popUpEnableArrow; + } + + setPopUpColor(color: Resource) { + this.popUpInfo.popUpColor = color; + } + + setPopUpText(text: string | Resource) { + this.popUpInfo.popUpText = text; + } + + setPopUpTextColor(popUpTextColor: Resource) { + this.popUpInfo.popUpTextColor = popUpTextColor; + } + + getIsShowTitle() { + return this.isShowTitle; + } + + getIsShowInputText() { + return this.isShowInputText; + } + + setTitleAndInputTextStatus(isModify: boolean) { + if (isModify) { + this.isShowTitle = false; + this.isShowInputText = true; + } else { + this.isShowTitle = true; + this.isShowInputText = false; + } + } + + handleImageCollapseAfterAddNode(isAddImageCollapse: boolean) { + // listTree this node already has ImageCollapse. + if (isAddImageCollapse) { + this.nodeItem.imageCollapse = new TreeView.ImageNode(ARROW_DOWN, null, null, + $r('sys.float.ohos_id_alpha_content_tertiary'), + IMAGE_NODE_HEIGHT, + IMAGE_NODE_WIDTH); + this.nodeItem.imageCollapse.itemRightMargin = ($r('sys.float.ohos_id_text_paragraph_margin_xs')); + } else { + this.nodeItem.imageCollapse = null; + } + } + + setNodeColor(nodeColor: Resource | string): void { + this.nodeColor = nodeColor; + } + + getNodeColor(): Resource | string { + return this.nodeColor; + } + + setListItemHeight(listItemHeight: number): void { + this.listItemHeight = listItemHeight; + } + + getListItemHeight(): number { + return this.listItemHeight; + } + + getNodeCurrentNodeId(): number { + return this.currentNodeId; + } + + getNodeParentNodeId(): number { + return this.parentNodeId; + } + + getNodeLeftPadding(): number { + return this.nodeLeftPadding; + } + + getNodeHeight(): Resource | number { + return this.nodeHeight; + } + + setNodeIsShow(nodeIsShow: boolean): void { + this.nodeIsShow = nodeIsShow; + } + + getNodeIsShow(): boolean { + return this.nodeIsShow; + } + + getNodeItem() { + return this.nodeItem; + } + + getNodeStatus() { + return this.status; + } + + getNodeBorder() { + return this.nodeBorder; + } + + setNodeBorder(isClearFocusStatus: boolean): void { + this.nodeBorder.borderWidth = isClearFocusStatus ? this.borderWidth.has : this.borderWidth.none; + } + + getChildNodeInfo() { + return this.childNodeInfo; + } + + getCurrentNodeId() { + return this.currentNodeId; + } + + getMenu() { + return this.container; + } + + setIsSelected(isSelected: boolean) { + this.isSelected = isSelected; + } + + getIsSelected() { + return this.isSelected; + } + + /* To gain the information while to alter node. */ + getNodeInfoData() { + return this.nodeParam; + } + + /* To gain the tree Node(NodeItem) while to alter node. */ + public getNodeInfoNode() { + return this.node; + } + + public getIsFolder() { + return this.nodeParam.isFolder; + } + + public setCanShowFlagLine(canShowFlagLine: boolean) { + this.canShowFlagLine = canShowFlagLine; + } + + public getCanShowFlagLine(): boolean { + return this.canShowFlagLine; + } + + public setFlagLineLeftMargin(currentNodeLevel: number) { + this.flagLineLeftMargin = currentNodeLevel * 12 + 8; // calculate + } + + public getFlagLineLeftMargin(): number { + return this.flagLineLeftMargin; + } + + public getNodeLevel(): number { + return this.nodeLevel; + } + + public setIsOverBorder(isOverBorder: boolean) { + this.isOverBorder = isOverBorder; + } + + public getIsOverBorder() { + return this.isOverBorder; + } + + public setCanShowBottomFlagLine(canShowBottomFlagLine: boolean) { + this.canShowBottomFlagLine = canShowBottomFlagLine; + } + + public getCanShowBottomFlagLine() { + return this.canShowBottomFlagLine; + } + + public setIsHighLight(isHighLight: boolean) { + this.isHighLight = isHighLight; + } + + public getIsHighLight(): boolean { + return this.isHighLight; + } + + public setIsModify(isModify: boolean) { + this.isModify = isModify; + } + + public getIsModify(): boolean { + return this.isModify; + } + +} + +export namespace TreeView { + + /* + * TreeListenType listen type. + * + * @since 10 + */ + export enum TreeListenType { + NODE_ADD = "NodeAdd", + NODE_DELETE = "NodeDelete", + NODE_MODIFY = "NodeModify", + NODE_MOVE = "NodeMove", + NODE_CLICK = 'NodeClick', + } + + export class TreeListener { + _events = [] + + constructor() { + } + + /* + * Event registration and processing. + * + * The event will not be destroyed after being processed. + * + * @param type Registered Events. + * @param callback Event callback. + * @since 10 + */ + public on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void) { + if (Array.isArray(type)) { + for (let i = 0, l = type.length; i < l; i++) { + this.on(type[i], callback) + } + } else { + (this._events[type] || (this._events[type] = [])).push(callback) + } + } + + /* + * Event registration and processing. + * + * After the event is processed once, it will be destroyed. + * + * @param type Registered Events. + * @param callback Event callback. + * @since 10 + */ + public once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void) { + let _self = this; + function handler() { + _self.off(type, handler); + callback.apply(null, [type, callback]); + } + + handler.callback = callback; + this.on(type, handler); + } + + /* + * Destroy event. + * + * @param type Registered Events. + * @param callback Event callback. + * @since 10 + */ + public off(type: TreeListenType, callback: (callbackParam: CallbackParam) => void) { + if (type == null) { + this._events = []; + } + if (Array.isArray(type)) { + for (let i = 0, l = type.length; i < l; i++) { + this.off(type[i], callback) + } + } + const cbs = this._events[type]; + if (!cbs) { + return; + } + if (callback == null) { + this._events[type] = null + } + let cb, i = cbs.length + while (i--) { + cb = cbs[i] + if (cb === callback || cb.callback === callback) { + cbs.splice(i, 1) + break + } + } + } + + /* + * Triggers all callbacks of an event with parameters. + * + * @param event Registered Events. + * @param argument Parameters returned by the callback event. + * @since 10 + */ + public emit(event, argument: any[]) { + let _self = this + if (!this._events[event]) { + return + } + let cbs = [...this._events[event]]; + if (cbs) { + for (let i = 0, l = cbs.length; i < l; i++) { + try { + cbs[i].apply(_self,argument) + } catch (e) { + new Error(e) + } + } + } + } + } + + /* + * TreeListenerManager. + * + * @since 10 + */ + export class TreeListenerManager { + static readonly APP_KEY_EVENT_BUS = "app_key_event_bus"; + private appEventBus: TreeListener; + private constructor() { + this.appEventBus = new TreeListener(); + } + + /* + * Obtains the EventBusManager object. + * + * @since 10 + */ + public static getInstance(): TreeListenerManager { + if (AppStorage.Get(this.APP_KEY_EVENT_BUS) == null) { + AppStorage.SetOrCreate(this.APP_KEY_EVENT_BUS, new TreeListenerManager()) + } + return AppStorage.Get(this.APP_KEY_EVENT_BUS); + } + + /* + * Obtains the EventBus object. + * + * @since 10 + */ + public getTreeListener(): TreeListener { + return this.appEventBus; + } + } + + class BasicDataSource implements IDataSource { + private listeners: DataChangeListener[] = [] + + public totalCount(): number { + return 0 + } + public getData(index: number): any { + return undefined + } + + registerDataChangeListener(listener: DataChangeListener): void { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + unregisterDataChangeListener(listener: DataChangeListener): void { + const pos = this.listeners.indexOf(listener); + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + notifyDataReload(): void { + this.listeners.forEach(listener => { + listener.onDataReloaded() + }) + } + notifyDataAdd(index: number): void { + this.listeners.forEach(listener => { + listener.onDataAdd(index) + }) + } + notifyDataChange(index: number): void { + this.listeners.forEach(listener => { + listener.onDataChange(index) + }) + } + notifyDataDelete(index: number): void { + this.listeners.forEach(listener => { + listener.onDataDelete(index) + }) + } + notifyDataMove(from: number, to: number): void { + this.listeners.forEach(listener => { + listener.onDataMove(from, to) + }) + } + } + + export class NodeItem { + private nodeItem: { imageNode?: ImageNode, + mainTitleNode?: MainTitleNode, + fontColor?: Resource, + imageCollapse?: ImageNode}; + private childNodeInfo: { isHasChildNode: boolean, childNum: number, allChildNum: number }; + container: () => void; + nodeLevel: number; + parentNodeId: number; + currentNodeId: number; + children: Array; + data: { isFolder?: boolean, + icon?: Resource, + selectedIcon?: Resource, + editIcon?: Resource, + primaryTitle?: string, + container?: () => void, + objectCount?: number | string } + + constructor(data: { isFolder?: boolean, + icon?: Resource, + selectedIcon?: Resource, + editIcon?: Resource, + primaryTitle?: string, + container?: () => void, + objectCount?: number | string }) { + this.data = data; + this.nodeLevel = -1; + this.parentNodeId = -1; + this.nodeItem = { imageNode: null, mainTitleNode: null, imageCollapse: null }; + this.childNodeInfo = { isHasChildNode: false, childNum: 0, allChildNum: 0 }; + this.container = data.container; + if (data.icon) { + this.nodeItem.imageNode = new ImageNode(data.icon, data.selectedIcon, data.editIcon, + $r('sys.float.ohos_id_alpha_content_fourth'), + IMAGE_NODE_HEIGHT, + IMAGE_NODE_WIDTH); + } + if (data.primaryTitle) { + this.nodeItem.mainTitleNode = new MainTitleNode(data.primaryTitle); + } + this.children = []; + } + + addImageCollapse(isHasChildNode: boolean) { + if (isHasChildNode) { + this.nodeItem.imageCollapse = new ImageNode(ARROW_RIGHT, null, null, + $r('sys.float.ohos_id_alpha_content_tertiary'), + IMAGE_NODE_HEIGHT, + IMAGE_NODE_WIDTH); + this.nodeItem.imageCollapse.itemRightMargin = ($r('sys.float.ohos_id_text_paragraph_margin_xs')); + } else { + this.nodeItem.imageCollapse = null; + } + } + + getNodeItem() { + return this.nodeItem; + } + + getChildNodeInfo() { + return this.childNodeInfo; + } + + getMenu(): () => void { + return this.container; + } + + getCurrentNodeId() { + return this.currentNodeId; + } + + getIsFolder() { + return this.data.isFolder; + } + } + + class NodeBaseInfo { + public rightMargin: Resource | number; + private width: number; + private height: number; + constructor() { + } + + set itemWidth(width: number) { + this.width = width; + } + + get itemWidth(): number { + return this.width; + } + + set itemHeight(height: number) { + this.height = height; + } + + get itemHeight(): number { + return this.height; + } + + set itemRightMargin(rightMargin: Resource | number) { + this.rightMargin = rightMargin; + } + + get itemRightMargin() { + return this.rightMargin; + } + } + + export class ImageNode extends NodeBaseInfo { + private imageSource: Resource | string; + private imageNormalSource: Resource | string; + private imageSelectedSource: Resource | string; + private imageEditSource: Resource | string; + private imageOpacity: Resource; + private currentInteractionStatus: InteractionStatus; + private imageCollapseSource: Resource | string; + private imageCollapseDownSource: Resource | string; + private isImageCollapse: boolean; + private imageCollapseRightSource: Resource | string; + constructor(imageSource: Resource | string, itemSelectedIcon: Resource, itemEditIcon: Resource, + imageOpacity: Resource, itemWidth: number, itemHeight: number) { + super(); + this.rightMargin = $r('sys.float.ohos_id_elements_margin_horizontal_m'); + this.imageSource = imageSource; + this.imageNormalSource = imageSource; + if (itemSelectedIcon != null) { + this.imageSelectedSource = itemSelectedIcon; + } else { + this.imageSelectedSource = this.imageNormalSource; + } + if (itemEditIcon != null) { + this.imageEditSource = itemEditIcon; + } else { + this.imageEditSource = this.imageNormalSource; + } + this.imageOpacity = imageOpacity; + this.itemWidth = itemWidth; + this.itemHeight = itemHeight; + this.imageCollapseSource = imageSource; + this.imageCollapseDownSource = ARROW_DOWN; + this.imageCollapseRightSource = ARROW_RIGHT; + this.isImageCollapse = true; + } + + get source() { + return this.imageSource; + } + + get normalSource() { + return this.imageNormalSource; + } + + get selectedSource() { + return this.imageSelectedSource; + } + + get editSource() { + return this.imageEditSource; + } + + get opacity() { + return this.imageOpacity; + } + + get noOpacity() { + return 1; + } + + get collapseSource() { + return this.imageCollapseSource; + } + + get isCollapse() { + return this.isImageCollapse; + } + + changeImageCollapseSource(nodeStatus: NodeStatus) { + if (nodeStatus == NodeStatus.Expand) { + this.imageCollapseSource = this.imageCollapseDownSource; + } else if (nodeStatus == NodeStatus.Collapse) { + this.imageCollapseSource = this.imageCollapseRightSource; + } + } + + setImageCollapseSource(interactionStatus: InteractionStatus, nodeStatus: NodeStatus) { + if (interactionStatus === InteractionStatus.Edit || interactionStatus === InteractionStatus.DragInsert) { + this.imageCollapseDownSource = ARROW_DOWN_WITHE; + this.imageCollapseRightSource = ARROW_RIGHT_WITHE; + this.isImageCollapse = false; + } else if (interactionStatus === InteractionStatus.FinishEdit || + interactionStatus === InteractionStatus.FinishDragInsert) { + this.imageCollapseDownSource = ARROW_DOWN + this.imageCollapseRightSource = ARROW_RIGHT + this.isImageCollapse = true; + } + this.imageCollapseSource = (nodeStatus == NodeStatus.Collapse) ? + this.imageCollapseRightSource : this.imageCollapseDownSource; + } + + setImageSource(interactionStatus: InteractionStatus) { + switch (interactionStatus) { + case InteractionStatus.Normal: + this.imageSource = this.imageNormalSource; + this.currentInteractionStatus = interactionStatus; + break; + case InteractionStatus.Selected: + if (this.currentInteractionStatus !== InteractionStatus.Edit) { + this.imageSource = this.imageSelectedSource; + this.currentInteractionStatus = interactionStatus; + } + break; + case InteractionStatus.Edit: + this.imageSource = this.imageEditSource; + this.currentInteractionStatus = interactionStatus; + break; + case InteractionStatus.FinishEdit: + this.imageSource = this.imageSelectedSource; + this.currentInteractionStatus = interactionStatus; + break; + case InteractionStatus.DragInsert: + this.imageSource = this.imageEditSource; + this.currentInteractionStatus = interactionStatus; + break; + case InteractionStatus.FinishDragInsert: + this.imageSource = this.imageNormalSource; + this.currentInteractionStatus = interactionStatus; + break; + default: + break; + } + } + } + + export class MainTitleNode extends NodeBaseInfo { + private mainTitleName: string; + mainTitleSetting: { fontColor: Resource, fontSize: Resource, fontWeight: FontWeight } + private showPopUpTimeout: number; + constructor(mainTitleName: string) { + super(); + this.mainTitleName = mainTitleName; + this.itemWidth = ITEM_WIDTH; + this.itemHeight = ITEM_HEIGHT; + this.rightMargin = $r('sys.float.ohos_id_text_paragraph_margin_xs'); + this.mainTitleSetting = { fontColor: $r('sys.color.ohos_id_color_primary'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Normal }; + this.showPopUpTimeout = 0; + } + setMainTitleSelected(isSelected: boolean): void { + if (isSelected) { + this.mainTitleSetting = { fontColor: $r('sys.color.ohos_id_color_text_primary_activated'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Regular }; + } else { + this.mainTitleSetting = { fontColor: $r('sys.color.ohos_id_color_primary'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Normal }; + } + } + set title(text: string) { + this.mainTitleName = text; + } + get title(): string { + return this.mainTitleName; + } + + set popUpTimeout(showPopUpTimeout: number) { + this.showPopUpTimeout = showPopUpTimeout; + } + + get popUpTimeout() { + return this.showPopUpTimeout; + } + + get color(): Resource { + return this.mainTitleSetting.fontColor; + } + + get size(): Resource { + return this.mainTitleSetting.fontSize; + } + + get weight(): FontWeight { + return this.mainTitleSetting.fontWeight; + } + + setMainTitleHighLight(isHighLight: boolean): void { + if (isHighLight) { + this.mainTitleSetting = { fontColor: $r('sys.color.ohos_id_color_primary_contrary'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Regular }; + } else { + this.mainTitleSetting = { fontColor: $r('sys.color.ohos_id_color_primary'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Normal }; + } + } + } + + export class InputText extends NodeBaseInfo { + private inputTextSetting: { fontColor: Resource, fontSize: Resource, fontWeight: FontWeight } + private status: { normal: Resource, hover: Resource, press: Resource }; + private statusColor: Resource = $r('sys.color.ohos_id_color_background'); + private editItemColor: Resource = $r('sys.color.ohos_id_color_emphasize'); + private radius: Resource = $r('sys.float.ohos_id_corner_radius_default_xs') + constructor() { + super(); + this.itemWidth = ITEM_WIDTH; + this.itemHeight = ITEM_HEIGHT_INPUT; + this.rightMargin = $r('sys.float.ohos_id_text_paragraph_margin_xs'); + this.inputTextSetting = { + fontColor: $r('sys.color.ohos_id_color_text_primary'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Normal }; + } + + get color(): Resource { + return this.inputTextSetting.fontColor; + } + + get size(): Resource { + return this.inputTextSetting.fontSize; + } + + get weight(): FontWeight { + return this.inputTextSetting.fontWeight; + } + + get borderRadius(): Resource { + return this.radius; + } + + get backgroundColor() { + return this.statusColor; + } + + get editColor() { + return this.editItemColor; + } + + get textInputStatusColor() { + return this.status; + } + } + + export class ListNodeUtils { + private _root: NodeItem; + public addNewNodeId: number; + private readonly MaxNodeLevel = 50; + private readonly MAX_CN_LENGTH: number = 254; + private readonly MAX_EN_LENGTH: number = 255; + private readonly INITIAL_INVALID_VALUE = -1; + constructor() { + this._root = new NodeItem({}); + this._root.nodeLevel = -1; + this._root.parentNodeId = -1; + this._root.currentNodeId = -1; + } + + getNewNodeId() { + return this.addNewNodeId; + } + + traverseNodeDF(callback, root: NodeItem = this._root) { + let stack = [], found = false; + stack.unshift(root); + let currentNode = stack.shift(); + while(!found && currentNode) { + found = callback(currentNode) === true; + if (!found) { + stack.unshift(...currentNode.children); + currentNode = stack.shift(); + } + } + } + + traverseNodeBF(callback) { + let queue = []; + let found: boolean = false; + queue.push(this._root); + let currentNode: NodeItem = queue.shift(); + while(!found && currentNode) { + try { + found = callback(currentNode); + } catch(err) { + var e = err.name + " == " + err.message; + } + if (!found) { + queue.push(...currentNode.children) + currentNode = queue.shift(); + } + } + } + + private contains(callback, traversal) { + traversal.call(this, callback, true); + } + + private updateParentChildNum(parentNode: NodeItem, isAdd: boolean, count: number) { + let parentNodeId: number = parentNode.parentNodeId; + while(parentNodeId >= 0) { + this.traverseNodeDF((node: NodeItem): boolean => { + if (node.currentNodeId == parentNodeId) { + node.getChildNodeInfo().allChildNum = + isAdd ? node.getChildNodeInfo().allChildNum + count : node.getChildNodeInfo().allChildNum - count; + parentNodeId = node.parentNodeId; + return false; + } + return false; + }) + } + } + + findParentNodeId(currentNodeId: number): number { + let current = null, + callback = function(node): boolean { + if (node.currentNodeId == currentNodeId ) { + current = node; + return true; + } + return false; + }; + this.contains(callback, this.traverseNodeBF); + return current.parentNodeId; + } + + addNode(parentNodeId: number, + currentNodeId: number, + data: { isFolder?: boolean, + icon?: Resource, + selectedIcon?: Resource, + editIcon?: Resource, + primaryTitle?: string, + secondaryTitle?: number | string, + container?: () => void, + }): ListNodeUtils { + if (this._root === null) { + this._root = new NodeItem({}); + this._root.nodeLevel = -1; + this._root.parentNodeId = -1; + this._root.currentNodeId = -1; + } + + let parent = null, + callback = function(node): boolean { + if (node.currentNodeId == parentNodeId ) { + parent = node; + return true; + } + return false; + }; + this.contains(callback, this.traverseNodeBF); + if (parent) { + let currentNode: NodeItem = new NodeItem(data); + if (parent.nodeLevel > this.MaxNodeLevel) { + throw new Error('ListNodeUtils[addNode]: The level of the tree view cannot exceed 50.'); + } + currentNode.nodeLevel = parent.nodeLevel + 1; // nodeLevel + currentNode.parentNodeId = parentNodeId; + currentNode.currentNodeId = currentNodeId; + parent.children.push(currentNode); + parent.getChildNodeInfo().isHasChildNode = true; + parent.getChildNodeInfo().childNum = parent.children.length; + parent.getChildNodeInfo().allChildNum += 1; // childNum + parent.addImageCollapse(parent.getChildNodeInfo().isHasChildNode); + this.updateParentChildNum(parent, true, 1); + return this; + } else { + throw new Error('ListNodeUtils[addNode]: Parent node not found.'); + } + } + + findNodeIndex(children, currentNodeId: number) { + let index = this.INITIAL_INVALID_VALUE; + for (let i = 0, len = children.length; i < len; i++) { + if (children[i].currentNodeId === currentNodeId) { + index = i; + break; + } + } + return index; + } + + private freeNodeMemory(rootNode: NodeItem, removeNodeIdList: number[]) { + let deleteNode: NodeItem[] = []; + let callback = function(node): boolean { + deleteNode.push(node); + return false; + }; + this.traverseNodeDF(callback, rootNode); + deleteNode.forEach((value)=>{ + removeNodeIdList.push(value.currentNodeId); + value = null; + }) + } + + removeNode(currentNodeId: number, parentNodeId: number, traversal: any) { + let parent = null, + callback = function(node): boolean { + if (node.currentNodeId == parentNodeId) { + parent = node; + return true; + } + return false; + }; + this.contains(callback, traversal); + + if (parent) { + let removeNodeIdList: number[] = []; + let index = this.findNodeIndex(parent.children, currentNodeId); + if (index < 0) { + throw new Error('Node does not exist.'); + } else { + var deleteNodeAllChildNum = parent.children[index].getChildNodeInfo().allChildNum + 1; + this.freeNodeMemory(parent.children[index], removeNodeIdList); + let node = parent.children.splice(index, 1); + node = null; + if (parent.children.length == 0) { + parent.addImageCollapse(false); + } + } + parent.getChildNodeInfo().childNum = parent.children.length; + parent.getChildNodeInfo().allChildNum -= (deleteNodeAllChildNum); + this.updateParentChildNum(parent, false, deleteNodeAllChildNum); + return removeNodeIdList; + } else { + throw new Error('Parent does not exist.'); + } + } + + getNewNodeInfo(nodeId: number) { + let parent = null, + callback = function(node): boolean { + if (node.currentNodeId == nodeId) { + parent = node; + return true; + } + return false; + }; + this.contains(callback, this.traverseNodeBF); + let newNodeInfo: { isFolder: boolean, icon: Resource, selectedIcon: Resource, editIcon: Resource, container: () => any, secondaryTitle: number | string } = + { isFolder: true, icon: null, selectedIcon: null, editIcon: null, container: null, secondaryTitle: '' }; + if (parent) { + if (parent.children.length === 0) { + if (parent.getNodeItem().imageNode != null) { + newNodeInfo.icon = parent.getNodeItem().imageNode.normalSource; + newNodeInfo.selectedIcon = parent.getNodeItem().imageNode.selectedSource; + newNodeInfo.editIcon = parent.getNodeItem().imageNode.editSource; + newNodeInfo.container = parent.getMenu(); + } else { + newNodeInfo.icon = null; + newNodeInfo.selectedIcon = null; + newNodeInfo.editIcon = null; + newNodeInfo.container = parent.getMenu(); + } + } else if (parent.children.length > 0) { + if (parent.getNodeItem().imageNode != null) { + newNodeInfo.icon = (parent.children[0].getNodeItem().imageNode != null) ? + parent.children[0].getNodeItem().imageNode.normalSource : null; + newNodeInfo.selectedIcon = (parent.children[0].getNodeItem().imageNode != null) ? + parent.children[0].getNodeItem().imageNode.selectedSource : null; + newNodeInfo.editIcon = (parent.children[0].getNodeItem().imageNode != null) ? + parent.children[0].getNodeItem().imageNode.editSource : null; + newNodeInfo.container = parent.children[0].getMenu(); + } else { + newNodeInfo.icon = null; + newNodeInfo.selectedIcon = null; + newNodeInfo.editIcon = null; + newNodeInfo.container = parent.children[0].getMenu(); + } + } + } + return newNodeInfo; + } + + getClickChildId(nodeId: number) { + let parent = null, + callback = function(node): boolean { + if (node.currentNodeId == nodeId) { + parent = node; + return true; + } + return false; + }; + this.contains(callback, this.traverseNodeBF); + if (parent) { + if (parent.children.length === 0) { + return []; + } else if (parent.children.length > 0) { + var nodeInfo: { itemId: number, itemIcon: Resource, itemTitle: string } = + { itemId: null, itemIcon: null, itemTitle: null } + var childrenNodeInfo: Array = new Array(parent.children.length); + for (let i = 0; i < childrenNodeInfo.length; i++) { + childrenNodeInfo[i] = 0; + } + for (let i = 0; i < parent.children.length && i < childrenNodeInfo.length; i++) { + childrenNodeInfo[i] = parent.children[i].currentNodeId; + } + return childrenNodeInfo; + } + } + return []; + } + + getClickNodeChildrenInfo(nodeId: number) { + let parent = null, + callback = function(node): boolean { + if (node.currentNodeId == nodeId) { + parent = node; + return true; + } + return false; + }; + this.contains(callback, this.traverseNodeBF); + if (parent) { + if (parent.children.length === 0) { + return []; + } else if (parent.children.length > 0) { + var nodeInfo: { itemId: number, itemIcon: Resource, itemTitle: string } = + { itemId: null, itemIcon: null, itemTitle: null } + var childrenNodeInfo: Array<{ itemId: number, itemIcon: Resource, itemTitle: string, isFolder: boolean }> = new Array(parent.children.length); + for (let i = 0; i < childrenNodeInfo.length; i++) { + childrenNodeInfo[i] = { itemId: null, itemIcon: null, itemTitle: null, isFolder: null }; + } + for (let i = 0; i < parent.children.length && i < childrenNodeInfo.length; i++) { + childrenNodeInfo[i].itemId = parent.children[i].currentNodeId; + if (parent.children[i].getNodeItem().imageNode) { + childrenNodeInfo[i].itemIcon = parent.children[i].getNodeItem().imageNode.source; + } + if (parent.children[i].getNodeItem().mainTitleNode) { + childrenNodeInfo[i].itemTitle = parent.children[i].getNodeItem().mainTitleNode.title; + } + childrenNodeInfo[i].isFolder = parent.children[i].getIsFolder(); + } + return childrenNodeInfo; + } + } + return []; + } + + public checkMainTitleIsValid(title: string) : boolean { + let invalid = /[\\\/:*?"<>|]/; + let invalidLength = /^[\u4e00-\u9fa5]+$/; + if (invalid.test(title)) { + return false; + } + if ((invalidLength.test(title) && title.length > this.MAX_CN_LENGTH) || + (!invalidLength.test(title) && title.length > this.MAX_EN_LENGTH)) { + return false; + } + return true; + } + + /* + * DFS: Depth first traversal in drag event. + * @param callback + */ + dragTraverseNodeDF(callback, root: NodeItem = this._root, listNode) { + let stack = [], found = false; + stack.unshift(root); + let currentNode = stack.shift(); + while(!found && currentNode) { + found = callback(currentNode, listNode) === true; + if (!found) { + stack.unshift(...currentNode.children); + currentNode = stack.shift(); + } + } + } + + /* + * Add the first dragging node in dragging nodes + * 1.the first dragging node needs to distinguish the position to insert + */ + addDragNode(parentNodeId: number, + currentNodeId: number, + insertCurrentNodeId: number, + isAfter: boolean, + data: { isFolder?: boolean, + icon?: Resource, + selectedIcon?: Resource, + editIcon?: Resource, + primaryTitle?: string, + container?: () => any, + objectCount?: number }): ListNodeUtils { + + if (this._root === null) { + this._root = new NodeItem({}); + this._root.nodeLevel = this.INITIAL_INVALID_VALUE; + this._root.parentNodeId = this.INITIAL_INVALID_VALUE; + this._root.currentNodeId = this.INITIAL_INVALID_VALUE; + } + + let parent = null, + callback = function(node): boolean { + if (node.currentNodeId == parentNodeId ) { + parent = node; + return true; + } + return false; + }; + this.contains(callback, this.traverseNodeBF); + if (parent) { + let currentNode: NodeItem = new NodeItem(data); + if (parent.nodeLevel > this.MaxNodeLevel) { + throw new Error('ListNodeUtils[addNode]: The level of the tree view cannot exceed 50.'); + } + currentNode.nodeLevel = parent.nodeLevel + 1; + currentNode.parentNodeId = parentNodeId; + currentNode.currentNodeId = currentNodeId; + let insertIndex: number = this.INITIAL_INVALID_VALUE; + if (parent.children.length) { + for (let i = 0; i < parent.children.length; i++) { + if ( parent.children[i].getCurrentNodeId() == insertCurrentNodeId) { + insertIndex = i; + break; + } + } + if (isAfter) { + parent.children.splice(insertIndex + 1, 0, currentNode); + } else { + parent.children.splice(insertIndex, 0, currentNode); + } + } else { + parent.children.push(currentNode); + } + parent.getChildNodeInfo().isHasChildNode = true; + parent.getChildNodeInfo().childNum = parent.children.length; + parent.getChildNodeInfo().allChildNum += 1; + parent.addImageCollapse(parent.getChildNodeInfo().isHasChildNode); + this.updateParentChildNum(parent, true, 1); + return this; + } else { + throw new Error('ListNodeUtils[addNode]: Parent node not found.'); + } + } + } + + export class ListNodeDataSource extends BasicDataSource { + readonly ROOT_NODE_ID = -1; + public listNodeUtils: ListNodeUtils = new ListNodeUtils(); + listNode: NodeInfo[] = []; + private readonly INITIAL_INVALID_VALUE = -1; + public lastIndex: number = -1; // record the last focused node. + thisIndex: number = -1; // records clicked nodes in the current period. + private modifyNodeIndex: number = -1; // records the nodes edited in the current period. + modifyNodeId: number = -1 + private currentOperation: MenuOperation; + private expandAndCollapseInfo = new Map(); + loadedNodeIdAndIndexMap = new Map(); // [currentNodeId, index] + private isTouchDown: boolean = false; + private appEventBus: TreeListener = TreeListenerManager.getInstance().getTreeListener(); + + /* parameter of the drag event. */ + private isInnerDrag: boolean = false; // Judge whether it is an internal drag event. + private isDrag: boolean = false; // It is used to handle events(For example, prevent press events) during global drag. + private draggingCurrentNodeId: number = this.INITIAL_INVALID_VALUE; // Record the current ID of the dragged node. + private draggingParentNodeId: number = this.INITIAL_INVALID_VALUE; // Record the parent ID of the dragged node. + private currentNodeInfo: NodeInfo = null; // To solve the problem of currentIndex missed in onDrop event. + private listItemOpacity : number = 1; // It is used to set the opacity of the node when dragged. + private lastPassIndex: number = this.INITIAL_INVALID_VALUE; // record the last passing node index in drag. + private lastPassId: number = this.INITIAL_INVALID_VALUE; // record the last passing node Id in drag. + private thisPassIndex: number = this.INITIAL_INVALID_VALUE; // record the current passing node in drag. + private lastDelayExpandIndex: number = this.INITIAL_INVALID_VALUE; // record last passing node in delay expand event. + private timeoutExpandId: number = this.INITIAL_INVALID_VALUE; + private lastTimeoutExpandId: number = this.INITIAL_INVALID_VALUE; + private clearTimeoutExpandId: number = this.INITIAL_INVALID_VALUE; + private timeoutHighLightId: number = this.INITIAL_INVALID_VALUE; + private lastTimeoutHighLightId: number = this.INITIAL_INVALID_VALUE; + private clearTimeoutHighLightId: number = this.INITIAL_INVALID_VALUE; + private lastDelayHighLightIndex: number = this.INITIAL_INVALID_VALUE; // record last passing node in HighLight event. + private lastDelayHighLightId: number = this.INITIAL_INVALID_VALUE; //record last passing node Id in HighLight event. + private nodeIdAndSubtitleMap = new Map(); // [currentNodeId, subtitle] + private flag: Flag = Flag.NONE; + private selectedParentNodeId: number = this.INITIAL_INVALID_VALUE; + private selectedParentNodeSubtitle: any = ''; + private insertNodeSubtitle: any = ''; + private currentFocusNodeId: number = this.INITIAL_INVALID_VALUE; + private lastFocusNodeId: number = this.INITIAL_INVALID_VALUE; + private addFocusNodeId: number = this.INITIAL_INVALID_VALUE; + + readonly FLAG_LINE: { flagLineHeight: string, + flagLineColor: Resource, + xOffset: string, + yTopOffset: string, + yBottomOffset: string, + yBasePlateOffset: string } = { + flagLineHeight: FLAG_LINE_HEIGHT, + flagLineColor: $r('sys.color.ohos_id_color_emphasize'), + xOffset: X_OFF_SET, + yTopOffset: Y_OFF_SET, + yBottomOffset: Y_BOTTOM_OFF_SET, + yBasePlateOffset: Y_BASE_PLATE_OFF_SET + } + + private readonly DRAG_POPUP: { floorConstraintSize: { minWidth: string, maxWidth: string }, + textConstraintSize: { minWidth1: string, maxWidth1: string, + minWidth2: string, maxWidth2: string }, + padding: { left: string, right: string }, + backgroundColor: ResourceColor, + height: string, + shadow: { radius: Resource, color: ResourceColor, offsetX?: number, offsetY?: number }, + borderRadius : Resource, + fontColor: Resource, + fontSize: Resource, + fontWeight: FontWeight + imageOpacity: Resource } = { + floorConstraintSize: { minWidth: FLOOR_MIN_WIDTH, maxWidth: FLOOR_MAX_WIDTH }, + textConstraintSize: { minWidth1: TEXT_MIN_WIDTH, maxWidth1: TEXT_MAX_WIDTH, minWidth2: MIN_WIDTH, maxWidth2: MAX_WIDTH }, + padding: { left: LEFT_PADDING, right: RIGHT_PADDING }, + backgroundColor: COLOR_IMAGE_EDIT, + height: GRAG_POP_UP_HEIGHT, + shadow: { radius: $r('sys.float.ohos_id_corner_radius_default_m'), color: SHADOW_COLOR, offsetX: 0, offsetY: SHADOW_OFFSETY }, + borderRadius: $r('sys.float.ohos_id_corner_radius_clicked'), + fontColor: $r('sys.color.ohos_id_color_primary'), + fontSize: $r('sys.float.ohos_id_text_size_body1'), + fontWeight: FontWeight.Regular, + imageOpacity: $r('sys.float.ohos_id_alpha_content_fourth') + } + + private readonly subTitle: { normalFontColor: Resource, + highLightFontColor: Resource, + fontSize: Resource, + fontWeight: FontWeight, + margin: { left: string, right: string } } = { + normalFontColor: $r('sys.color.ohos_id_color_secondary'), + highLightFontColor: $r('sys.color.ohos_id_color_primary_contrary'), + fontSize: $r('sys.float.ohos_id_text_size_body2'), + fontWeight: FontWeight.Regular, + margin: { left: '4vp', right: '24' } + } + + public changeNodeColor(index: number, color: Resource | string): void { + this.listNode[index].setNodeColor(color); + this.listNode[index].setNodeBorder(false) + } + + private getNodeColor(index) { + return this.listNode[index].getNodeColor(); + } + + private handleFocusEffect(index: number, isClearFocusStatus: boolean) { + if (this.listNode[index].getNodeIsShow()) { + this.listNode[index].setNodeBorder(isClearFocusStatus); + } + } + + public setImageSource(index: number, interactionStatus: InteractionStatus) { + let nodeInfo: NodeInfo = this.listNode[index]; + nodeInfo.setIsSelected(interactionStatus === InteractionStatus.Selected || + interactionStatus === InteractionStatus.Edit || interactionStatus === InteractionStatus.FinishEdit); + if (nodeInfo.getNodeItem().mainTitleNode != null && interactionStatus != InteractionStatus.DragInsert && + interactionStatus != InteractionStatus.FinishDragInsert) { + nodeInfo.getNodeItem().mainTitleNode.setMainTitleSelected(interactionStatus === InteractionStatus.Selected || + interactionStatus === InteractionStatus.FinishEdit); + } + if (nodeInfo.getNodeItem().imageNode != null) { + nodeInfo.getNodeItem().imageNode.setImageSource(interactionStatus); + } + } + + private setImageCollapseSource(index: number, interactionStatus: InteractionStatus) { + let nodeInfo: NodeInfo = this.listNode[index]; + if (nodeInfo.getNodeItem().imageCollapse != null) { + nodeInfo.getNodeItem().imageCollapse.setImageCollapseSource(interactionStatus, + this.expandAndCollapseInfo.get(nodeInfo.getCurrentNodeId())); + } + } + + public clearLastIndexStatus() { + if (this.lastIndex == -1 || this.lastIndex >= this.listNode.length) { + return; + } + this.setImageSource(this.lastIndex, InteractionStatus.Normal); + this.changeNodeColor(this.lastIndex, this.listNode[this.lastIndex].getNodeStatus().normal); + this.handleFocusEffect(this.lastIndex, false); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.listNode[this.lastIndex].getCurrentNodeId())); + } + + private changeNodeStatus(clickIndex: number): void { + let thisIndex: number = clickIndex; + let tmp: NodeInfo[] = this.ListNode; + let nodeId = tmp[clickIndex].getCurrentNodeId(); + if (this.expandAndCollapseInfo.get(nodeId) == NodeStatus.Expand) { + this.expandAndCollapseInfo.set(nodeId, NodeStatus.Collapse); + tmp[thisIndex].getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Collapse); + } else if (this.expandAndCollapseInfo.get(nodeId) == NodeStatus.Collapse) { + this.expandAndCollapseInfo.set(nodeId, NodeStatus.Expand); + tmp[thisIndex].getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Expand); + } + } + + private handleExpandAndCollapse(clickIndex: number) { + let thisIndex: number = clickIndex; + let tmp: NodeInfo[] = this.ListNode; + let nodeId = tmp[thisIndex].getCurrentNodeId(); + if (!this.expandAndCollapseInfo.has(nodeId)) { + return; + } + + let rootNodeStatus: NodeStatus = this.expandAndCollapseInfo.get(nodeId); + if (tmp[thisIndex].getChildNodeInfo().isHasChildNode && rootNodeStatus == NodeStatus.Collapse) { + for(var i = 0; i < tmp[thisIndex].getChildNodeInfo().allChildNum; i++) { + tmp[thisIndex + 1 + i].setNodeIsShow(false); + tmp[thisIndex + 1 + i].setListItemHeight(LIST_ITEM_HEIGHT_NONE); + } + this.notifyDataReload(); + return; + } + + let childNum: number[] = new Array(tmp[thisIndex].getChildNodeInfo().childNum); + childNum[0] = thisIndex + 1; + let index = 1; + while(index < tmp[thisIndex].getChildNodeInfo().childNum) { + childNum[index] = childNum[index -1] + tmp[childNum[index - 1]].getChildNodeInfo().allChildNum + 1; + index++; + } + if (rootNodeStatus == NodeStatus.Expand) { + for(var i = 0; i < childNum.length; i++) { + tmp[childNum[i]].setNodeIsShow(true); + tmp[childNum[i]].setListItemHeight(LIST_ITEM_HEIGHT); + let nodeId = tmp[childNum[i]].getCurrentNodeId(); + if(this.expandAndCollapseInfo.get(nodeId) == NodeStatus.Expand) { + this.handleExpandAndCollapse(childNum[i]); + } + } + } + childNum = null; + this.notifyDataReload(); + } + + public init(listNodeUtils: ListNodeUtils) { + let index = 0; + this.listNode = []; + this.listNodeUtils = listNodeUtils; + this.loadedNodeIdAndIndexMap.clear(); + this.listNodeUtils.traverseNodeDF((node: NodeItem): boolean => { + if (node.currentNodeId >= 0) { + var nodeInfo: NodeInfo = new NodeInfo(node); + this.listNode.push(nodeInfo); + if (nodeInfo.getChildNodeInfo().isHasChildNode) { + this.expandAndCollapseInfo.set(nodeInfo.getCurrentNodeId(), NodeStatus.Collapse); + } + if (nodeInfo.getNodeIsShow()) { + this.loadedNodeIdAndIndexMap.set(nodeInfo.getCurrentNodeId(), index++); + } + if (nodeInfo.getIsFolder()) { + this.nodeIdAndSubtitleMap.set(nodeInfo.getCurrentNodeId(), + nodeInfo.getNodeInfoData().secondaryTitle || nodeInfo.getNodeInfoData().secondaryTitle == 0 ? + nodeInfo.getNodeInfoData().secondaryTitle : ''); + } + } + return false; + }); + } + + private refreshRemoveNodeData(removeNodeIdList: number[], parentNodeInfo: NodeInfo) { + let deleteIndexList: number[] = []; + for (let i = 0; i < removeNodeIdList.length; i++) { + for (let j = 0; j < this.listNode.length; j++) { + if (this.listNode[j].getNodeCurrentNodeId() == removeNodeIdList[i]) { + let currentNodeId = this.listNode[j].getNodeCurrentNodeId(); + if (this.loadedNodeIdAndIndexMap.has(currentNodeId)) { + // this.listNode index to lazyForEach index. + deleteIndexList.push(this.loadedNodeIdAndIndexMap.get(currentNodeId)); + } + let deleteNode = this.listNode.splice(j, 1); + deleteNode = null; // free memory + if (this.expandAndCollapseInfo.has(removeNodeIdList[i])) { + this.expandAndCollapseInfo.delete(removeNodeIdList[i]); // delete deleteNode expandAndCollapseInfo. + } + break; + } + } + } + deleteIndexList.forEach((value)=>{ + this.notifyDataDelete(value); // notifyDataDelete do not update data. + this.notifyDataChange(value); // call notifyDataChange to update data. + }) + let index: number = 0; + for (let i = 0; i < this.listNode.length; i++) { + if (this.listNode[i].getNodeCurrentNodeId() == parentNodeInfo.getNodeCurrentNodeId()) { + if (parentNodeInfo.getNodeItem().imageCollapse == null) { + this.listNode[i].handleImageCollapseAfterAddNode(false); + // delete deleteNode parentNode expandAndCollapseInfo. + this.expandAndCollapseInfo.delete(parentNodeInfo.getNodeCurrentNodeId()); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.listNode[i].getNodeCurrentNodeId())); + } + break; + } + } + let callbackParam: CallbackParam = {currentNodeId: parentNodeInfo.getNodeCurrentNodeId(), parentNodeId: parentNodeInfo.getNodeParentNodeId()}; + this.appEventBus.emit(TreeListenType.NODE_DELETE, [callbackParam]); + } + + private refreshAddNodeData(addNodeIdList: number[]) { + var addNodeInfo: NodeInfo; + this.listNodeUtils.traverseNodeDF((node: NodeItem): boolean => { + if (node.currentNodeId === addNodeIdList[0]) { + addNodeInfo = new NodeInfo(node); + return true; + } + return false; + }); + addNodeInfo.setIsModify(true); + + let index: number = 0; + for (let i = 0; i < this.listNode.length; i++) { + if (this.listNode[i].getNodeCurrentNodeId() == addNodeInfo.getNodeParentNodeId()) { + index = i; + if (this.listNode[i].getNodeItem().imageCollapse == null) { + this.listNode[i].handleImageCollapseAfterAddNode(true); + this.notifyDataChange(index); + } else if (this.expandAndCollapseInfo.get(this.listNode[i].getNodeCurrentNodeId()) == NodeStatus.Collapse) { + this.changeNodeStatus(index); + } + this.listNode.splice(i + 1, 0, addNodeInfo); + this.listNode[i + 1].setTitleAndInputTextStatus(true); // false->true: realize inner Interaction. + this.listNode[i + 1].setNodeIsShow(true); + this.listNode[i + 1].setListItemHeight(LIST_ITEM_HEIGHT); + this.setImageSource(i + 1, InteractionStatus.Edit); // Normal->Edit : realize inner Interaction. + this.currentOperation = MenuOperation.ADD_NODE; + this.notifyDataAdd(i + 1); + this.notificationNodeInfo(i+1, this.currentOperation); + break; + } + } + this.modifyNodeIndex = index + 1; + this.expandAndCollapseInfo.set(addNodeInfo.getNodeParentNodeId(), NodeStatus.Expand); + this.handleExpandAndCollapse(index); + } + + public refreshData(listNodeUtils: ListNodeUtils, operation: MenuOperation, + parentNodeId: number, changeNodeIdList: number[]) { + let parentNodeInfo: NodeInfo; + this.listNodeUtils = listNodeUtils; + this.listNodeUtils.traverseNodeDF((node: NodeItem): boolean => { + if (node.currentNodeId == parentNodeId) { + parentNodeInfo = new NodeInfo(node); + return true; + } + return false; + }); + + if (operation === MenuOperation.REMOVE_NODE) { + this.nodeIdAndSubtitleMap.set(parentNodeId, this.selectedParentNodeSubtitle); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(parentNodeId)); + this.refreshRemoveNodeData(changeNodeIdList, parentNodeInfo); + } + + if (operation === MenuOperation.ADD_NODE) { + this.addFocusNodeId = changeNodeIdList[0]; + this.nodeIdAndSubtitleMap.set(this.getClickNodeId(), this.selectedParentNodeSubtitle); + this.nodeIdAndSubtitleMap.set(changeNodeIdList[0], this.insertNodeSubtitle); + this.refreshAddNodeData(changeNodeIdList); + } + } + + public setClickIndex(index: number) { + this.thisIndex = index; + } + + public getClickNodeId(): number { + if (this.thisIndex < 0 || this.thisIndex >= this.ListNode.length) { + return -1; + } + return this.ListNode[this.thisIndex].getCurrentNodeId(); + } + + public expandAndCollapseNode(clickIndex: number) { + this.changeNodeStatus(clickIndex); + this.handleExpandAndCollapse(clickIndex) + } + + public getIsTouchDown(): boolean { + return this.isTouchDown; + } + + public getLastIndex(): number { + return this.lastIndex; + } + + public handleEventDrag(index: number) { + this.setImageSource(index, InteractionStatus.Normal); + this.changeNodeColor(index, this.listNode[index].getNodeStatus().normal); + this.handleFocusEffect(index, false); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.listNode[index].getCurrentNodeId())); + } + + public handleEvent(event: Event, index: number) { + /* Return while the event is dragging event. */ + if (this.isDrag) { + return; + } + + if (event === Event.TOUCH_DOWN || event === Event.TOUCH_UP || event === Event.MOUSE_BUTTON_RIGHT) { + if (index != this.lastIndex) { + this.clearLastIndexStatus(); + } + } + + let lazyForEachIndex = this.loadedNodeIdAndIndexMap.get(this.listNode[index].getCurrentNodeId()); + switch(event) { + case Event.TOUCH_DOWN: + this.isTouchDown = true; + this.changeNodeColor(index, this.listNode[index].getNodeStatus().press); + this.notifyDataChange(lazyForEachIndex); + break; + case Event.TOUCH_UP: { + if (this.isInnerDrag) { + this.isInnerDrag = false; + } + this.isTouchDown = false; + let nodeInfo: NodeInfo = this.listNode[index]; + this.setImageSource(index, InteractionStatus.Selected); + nodeInfo.setFontColor($r('sys.color.ohos_id_color_primary')) + this.lastIndex = index; + this.changeNodeColor(index, nodeInfo.getNodeStatus().selected); + this.notifyDataChange(lazyForEachIndex); + break; + } + case Event.HOVER: + if (this.getNodeColor(index) != this.listNode[index].getNodeStatus().selected) { + this.changeNodeColor(index, this.listNode[index].getNodeStatus().hover); + this.notifyDataChange(lazyForEachIndex); + } + break; + case Event.HOVER_OVER: + if (this.getNodeColor(index) != this.listNode[index].getNodeStatus().selected) { + this.changeNodeColor(index, this.listNode[index].getNodeStatus().normal); + this.notifyDataChange(lazyForEachIndex); + } + break; + case Event.FOCUS: + this.handleFocusEffect(index, true); + this.notifyDataChange(lazyForEachIndex); + break; + case Event.BLUR: + this.handleFocusEffect(index, false); + this.notifyDataChange(lazyForEachIndex); + break; + case Event.MOUSE_BUTTON_RIGHT: + this.lastIndex = index; + this.finishEditing(); + break; + case Event.DRAG: + this.isTouchDown = false; + let nodeInfo: NodeInfo = this.listNode[index]; + this.setImageSource(index, InteractionStatus.Selected); + this.lastIndex = index; + this.changeNodeColor(index, nodeInfo.getNodeStatus().selected); + this.notifyDataChange(lazyForEachIndex); + break; + default: + break; + } + } + + private notificationNodeInfo(addNodeId: number, operation: MenuOperation) { + if (operation === MenuOperation.MODIFY_NODE) { + let modifyNodeInfo: NodeInfo = this.listNode[this.modifyNodeIndex]; + let backParamModify: CallbackParam = { currentNodeId: modifyNodeInfo.getNodeCurrentNodeId(), + parentNodeId: modifyNodeInfo.getNodeParentNodeId() } + this.appEventBus.emit(TreeListenType.NODE_MODIFY, + [backParamModify]); + } else if (operation === MenuOperation.ADD_NODE) { + let addNodeInfo: NodeInfo = this.listNode[addNodeId]; + let icon: Resource | string = (addNodeInfo.getNodeItem().imageNode != null) ? + addNodeInfo.getNodeItem().imageNode.source : null; + let selectedIcon: Resource | string = (addNodeInfo.getNodeItem().imageNode != null) ? + addNodeInfo.getNodeItem().imageNode.selectedSource : null; + let editIcon: Resource | string = (addNodeInfo.getNodeItem().imageNode != null) ? + addNodeInfo.getNodeItem().imageNode.editSource : null; + let callbackParam: CallbackParam = { currentNodeId: addNodeInfo.getNodeCurrentNodeId(), + parentNodeId: addNodeInfo.getNodeParentNodeId() } + this.appEventBus.emit(TreeListenType.NODE_ADD, + [callbackParam]); + } + } + + public finishEditing() { + if (this.modifyNodeIndex!= -1) { + this.setImageSource(this.modifyNodeIndex, InteractionStatus.FinishEdit); + this.setImageCollapseSource(this.modifyNodeIndex, InteractionStatus.FinishEdit); + this.listNode[this.modifyNodeIndex].setIsModify(false); + this.listNode[this.modifyNodeIndex].setTitleAndInputTextStatus(false); + this.notificationNodeInfo(this.modifyNodeIndex, this.currentOperation); + this.notifyDataChange(this.modifyNodeIndex); + } + } + + public setItemVisibilityOnEdit(nodeId: number, operation: MenuOperation) { + let index: number = -1; + if (nodeId == -1) { + return; + } + if (operation === MenuOperation.MODIFY_NODE) { + for (let i = 0; i < this.listNode.length; i++) { // nodeId to find index + if (this.listNode[i].getCurrentNodeId() == nodeId) { + index = i; + break; + } + } + let nodeInfo: NodeInfo = this.listNode[index]; + nodeInfo.setIsModify(true); + if (nodeInfo.getNodeItem().mainTitleNode === null) { + return; // no title + } + + this.currentOperation = MenuOperation.MODIFY_NODE; + nodeInfo.setTitleAndInputTextStatus(true); + this.setImageSource(index, InteractionStatus.Edit); + this.setImageCollapseSource(index, InteractionStatus.Edit); + this.modifyNodeIndex = index; + if (nodeInfo.getNodeItem().inputText) { + if (nodeInfo.getNodeItem().imageCollapse != null) { + nodeInfo.getNodeItem().inputText.rightMargin = + $r('sys.float.ohos_id_text_paragraph_margin_xs') + } else { + nodeInfo.getNodeItem().inputText.rightMargin = + $r('sys.float.ohos_id_elements_margin_horizontal_m') + } + } + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(nodeId)); + } + index = nodeId; + if (operation === MenuOperation.COMMIT_NODE) { + let nodeInfo: NodeInfo = this.listNode[index]; + nodeInfo.setTitleAndInputTextStatus(false); + nodeInfo.setIsModify(false); + this.setImageSource(index, InteractionStatus.FinishEdit); + this.setImageCollapseSource(index, InteractionStatus.FinishEdit); + this.notificationNodeInfo(this.modifyNodeIndex, this.currentOperation); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(nodeInfo.getCurrentNodeId())); + } + } + + public setPopUpInfo(popUpType: PopUpType, inputError: InputError, isShow: boolean, index: number) { + let nodeInfo: NodeInfo = this.listNode[index]; + nodeInfo.setPopUpIsShow(isShow); + // this.listNode index to lazyForEach index. + let lazyForEachIndex = this.loadedNodeIdAndIndexMap.get(nodeInfo.getCurrentNodeId()); + if (!isShow) { + this.notifyDataChange(lazyForEachIndex); + return; + } + if (popUpType === PopUpType.HINTS) { + if (nodeInfo.getNodeItem().mainTitleNode != null) { + nodeInfo.setPopUpText(nodeInfo.getNodeItem().mainTitleNode.title); + } else { + nodeInfo.setPopUpText(''); + nodeInfo.setPopUpIsShow(false); + } + nodeInfo.setPopUpEnableArrow(false); + nodeInfo.setPopUpColor($r('sys.color.ohos_id_color_background')); + nodeInfo.setPopUpTextColor($r('sys.color.ohos_id_color_text_secondary')); + } else if (popUpType === PopUpType.WARNINGS) { + if (nodeInfo.getNodeItem().inputText != null) { + if (inputError === InputError.INVALID_ERROR) { + nodeInfo.setPopUpText("invalid error"); + } else if (inputError === InputError.LENGTH_ERROR) { + nodeInfo.setPopUpText("length error"); + } + nodeInfo.setPopUpEnableArrow(true); + nodeInfo.setPopUpColor($r('sys.color.ohos_id_color_help_tip_bg')); + nodeInfo.setPopUpTextColor($r('sys.color.ohos_id_color_text_hint_contrary')); + } + } + this.notifyDataChange(lazyForEachIndex); + } + + public setShowPopUpTimeout(timeout: number, index: number) { + if (this.listNode[index].getNodeItem().mainTitleNode != null) { + this.listNode[index].getNodeItem().mainTitleNode.popUpTimeout = timeout; + } + let lazyForEachIndex = this.loadedNodeIdAndIndexMap.get(this.listNode[index].getCurrentNodeId()); + this.notifyDataChange(lazyForEachIndex); + } + + public setMainTitleNameOnEdit(index: number, text: string) { + + this.modifyNodeIndex = index; + if (this.listNode[index].getNodeItem().mainTitleNode != null) { + this.listNode[index].getNodeItem().mainTitleNode.title = text; + } + } + + public get ListNode(): NodeInfo[] { + return this.listNode; + } + + public totalCount(): number { + let count: number = 0; + let index: number = 0; + this.loadedNodeIdAndIndexMap.clear(); + for (let i =0 ; i < this.listNode.length; i++) { + if (this.listNode[i].getNodeIsShow()) { + this.loadedNodeIdAndIndexMap.set(this.listNode[i].getCurrentNodeId(), index++); + count++; + } + } + return count; + } + + public getData(index: number): any { + let count = 0; + for (let i = 0; i < this.listNode.length; i++) { + if (this.listNode[i].getNodeIsShow()) { + if (index == count) { + return this.listNode[i]; + } + count++; + } + } + return null; + } + + public addData(index: number, data: NodeInfo): void { + this.listNode.splice(index, 0, data) + this.notifyDataAdd(index) + } + + public pushData(data: NodeInfo): void { + this.listNode.push(data) + this.notifyDataAdd(this.listNode.length - 1) + } + + public setIsInnerDrag(isInnerDrag: boolean) { + this.isInnerDrag = isInnerDrag; + } + + public getIsInnerDrag(): boolean { + return this.isInnerDrag; + } + + public setIsDrag(isDrag: boolean) { + this.isDrag = isDrag; + } + + public getIsDrag(): boolean { + return this.isDrag; + } + + public setCurrentNodeInfo(currentNodeInfo: NodeInfo) { + this.currentNodeInfo = currentNodeInfo; + } + + public getCurrentNodeInfo() { + return this.currentNodeInfo; + } + + public setDraggingParentNodeId(draggingParentNodeId: number) { + this.draggingParentNodeId = draggingParentNodeId; + } + + public getDraggingParentNodeId() { + return this.draggingParentNodeId; + } + + public getDraggingCurrentNodeId() { + return this.draggingCurrentNodeId; + } + + public setDraggingCurrentNodeId(draggingCurrentNodeId: number) { + this.draggingCurrentNodeId = draggingCurrentNodeId; + } + + public setListItemOpacity(listItemOpacity: number) { + this.listItemOpacity = listItemOpacity; + } + + public getListItemOpacity(item: NodeInfo) { + return item.getCurrentNodeId() == this.getDraggingCurrentNodeId() ? this.listItemOpacity : 1; + } + + public getDragPopupPara() { + return this.DRAG_POPUP; + } + + public setLastPassIndex(lastPassIndex: number) { + this.lastPassIndex = lastPassIndex; + } + + public getLastPassIndex(): number { + return this.lastPassIndex; + } + + public getIsParentOfInsertNode(insertNodeId: number): boolean { + let selectedNodeItem: NodeItem = this.currentNodeInfo.getNodeInfoNode(); + let isParentNodeOfInsertNode = false, + callback = function(node): boolean { + if (node.currentNodeId == insertNodeId ) { + isParentNodeOfInsertNode = true; + return true; + } + return false; + }; + this.listNodeUtils.traverseNodeDF(callback, selectedNodeItem); + return isParentNodeOfInsertNode; + } + + public setPassIndex(thisPassIndex: number) { + this.thisPassIndex = thisPassIndex; + } + + public getPassIndex(): number { + return this.thisPassIndex; + } + + public clearTimeOutAboutDelayHighLightAndExpand(currentIndex: number) { + if (this.lastPassId != this.INITIAL_INVALID_VALUE && this.loadedNodeIdAndIndexMap.has(this.lastPassId)) { + let index: number = this.loadedNodeIdAndIndexMap.get(this.lastPassId); + let that =this; + this.ListNode.forEach(function(value) { + if (value.getNodeCurrentNodeId() == that.lastPassId) { + value.setCanShowFlagLine(false); + } + }) + this.notifyDataChange(index); + } + + if ((this.lastTimeoutHighLightId != this.INITIAL_INVALID_VALUE && + this.clearTimeoutHighLightId != this.lastTimeoutHighLightId)) { + clearTimeout(this.lastTimeoutHighLightId); + if (this.lastDelayHighLightIndex != this.INITIAL_INVALID_VALUE) { + this.clearHighLight(this.lastDelayHighLightIndex); + let index: number = this.loadedNodeIdAndIndexMap + .get(this.listNode[this.lastDelayHighLightIndex].getCurrentNodeId()); + this.notifyDataChange(index); + } + this.clearTimeoutHighLightId = this.lastTimeoutHighLightId; + } + this.lastTimeoutHighLightId = this.timeoutHighLightId; + this.lastDelayHighLightIndex = currentIndex; + + if ((this.lastTimeoutExpandId != this.INITIAL_INVALID_VALUE && + this.clearTimeoutExpandId != this.lastTimeoutExpandId)) { + clearTimeout(this.lastTimeoutExpandId); + this.clearTimeoutExpandId = this.lastTimeoutExpandId; + } + this.lastTimeoutExpandId = this.timeoutExpandId; + this.lastDelayExpandIndex = this.INITIAL_INVALID_VALUE; + } + + public clearHighLight(currentIndex: number) { + this.changeNodeColor(currentIndex, this.listNode[currentIndex].getNodeStatus().normal); + this.changeNodeHighLightColor(currentIndex, false); + this.setImageSource(currentIndex, InteractionStatus.FinishDragInsert); + this.setImageCollapseSource(currentIndex, InteractionStatus.FinishDragInsert); + this.listNode[currentIndex].setIsHighLight(false); + } + + private changeNodeHighLightColor(index: number, isHighLight: boolean): void { + if (this.listNode[index].getNodeItem().mainTitleNode && this.listNode[index].getIsShowTitle()) { + this.listNode[index].getNodeItem().mainTitleNode.setMainTitleHighLight(isHighLight); + } + } + + public setVisibility(flag: Flag, index: number, isOverBorder: boolean) { + let isChanged: boolean = (this.thisPassIndex != index || this.flag != flag) ? true : false; + this.thisPassIndex = index; + if ((isChanged || isOverBorder) && this.isInnerDrag) { + this.flag = flag; + let currentNodeId: number = this.getData(index).getCurrentNodeId(); + let currentNodeLevel: number = this.expandAndCollapseInfo.get(currentNodeId) == NodeStatus.Expand && + this.flag == Flag.DOWN_FLAG ? this.getData(index).getNodeLevel() + 1 : this.getData(index).getNodeLevel(); + if (this.lastPassId != this.INITIAL_INVALID_VALUE && this.loadedNodeIdAndIndexMap.has(this.lastPassId)) { + let lastIndex: number = this.loadedNodeIdAndIndexMap.get(this.lastPassId); + let that = this; + this.ListNode.forEach(function (value) { + if (value.getNodeCurrentNodeId() == that.lastPassId) { + value.setCanShowFlagLine(false); + } + }) + this.notifyDataChange(lastIndex); + } + if (this.flag == Flag.DOWN_FLAG && index < this.totalCount() - 1) { + this.getData(index).setCanShowFlagLine(false); + this.getData(index+1).setCanShowFlagLine(true); + this.getData(index).setCanShowBottomFlagLine(false); + this.getData(index+1).setFlagLineLeftMargin(currentNodeLevel); + this.notifyDataChange(index); + this.notifyDataChange(index + 1); + this.lastPassId = this.getData(index + 1).getNodeCurrentNodeId(); + } else if (this.flag == Flag.UP_FLAG && index < this.totalCount() - 1) { + this.getData(index).setCanShowFlagLine(true); + this.getData(index+1).setCanShowFlagLine(false); + this.getData(index).setCanShowBottomFlagLine(false); + this.getData(index).setFlagLineLeftMargin(currentNodeLevel); + this.notifyDataChange(index); + this.notifyDataChange(index + 1); + this.lastPassId = this.getData(index).getNodeCurrentNodeId(); + } else if (index >= this.totalCount() - 1) { + if (this.flag == Flag.DOWN_FLAG) { + this.getData(index).setCanShowFlagLine(false); + this.getData(index).setCanShowBottomFlagLine(true); + } else { + this.getData(index).setCanShowFlagLine(true); + this.getData(index).setCanShowBottomFlagLine(false); + } + this.getData(index).setFlagLineLeftMargin(currentNodeLevel); + this.notifyDataChange(index); + this.lastPassId = this.getData(index).getNodeCurrentNodeId(); + } + } + } + + public delayHighLightAndExpandNode(currentIndex: number, currentNodeId: number, showIndex: number) { + let isChangIndex: boolean = currentIndex != this.lastDelayExpandIndex ? true : false; + let isOverBorder: boolean = this.getData(showIndex).getIsOverBorder(); + if (isOverBorder) { + this.lastDelayExpandIndex = this.INITIAL_INVALID_VALUE; + } else { + this.lastDelayExpandIndex = currentIndex; + } + if (isOverBorder || isChangIndex) { + let that = this; + + /* highLight node time-out. */ + let canDelayHighLight: boolean = !isOverBorder && (!this.isInnerDrag || + (this.expandAndCollapseInfo.get(currentNodeId) == NodeStatus.Collapse && this.isInnerDrag) || + (!this.expandAndCollapseInfo.has(currentNodeId) && this.listNode[currentIndex].getIsFolder())); + if (canDelayHighLight) { + /* set hoverState color before highLight. */ + this.changeNodeColor(currentIndex, this.listNode[currentIndex].getNodeStatus().hover); + this.notifyDataChange(showIndex); + + let delayHighLightTime: number = this.isInnerDrag ? 1000 : 0; // ms + this.timeoutHighLightId = setTimeout(function() { + that.delayHighLight(currentIndex); + }, delayHighLightTime) + } + if (isOverBorder || (this.lastTimeoutHighLightId != this.INITIAL_INVALID_VALUE && + this.clearTimeoutHighLightId != this.lastTimeoutHighLightId)) { + clearTimeout(this.lastTimeoutHighLightId); + if (this.lastDelayHighLightIndex != this.INITIAL_INVALID_VALUE) { + this.clearHighLight(this.lastDelayHighLightIndex); + this.notifyDataReload(); + } + this.clearTimeoutHighLightId = this.lastTimeoutHighLightId; + } + this.lastTimeoutHighLightId = this.timeoutHighLightId; + this.lastDelayHighLightIndex = currentIndex; + + /* alter flagLine and expand node time-out. */ + if (!isOverBorder && this.expandAndCollapseInfo.get(currentNodeId) == NodeStatus.Collapse) { + let firstChildNodeId: number = this.getData(showIndex).getNodeInfoNode().children[0].currentNodeId; + let delayAlterFlagLineAndExpandNodeTime: number = 2000; // ms + this.timeoutExpandId = setTimeout(function() { + that.clearHighLight(that.lastDelayHighLightIndex); + that.alterFlagLineAndExpandNode(currentIndex, firstChildNodeId); + }, delayAlterFlagLineAndExpandNodeTime) + } + if (isOverBorder || (this.lastTimeoutExpandId != this.INITIAL_INVALID_VALUE && + this.clearTimeoutExpandId != this.lastTimeoutExpandId)) { + clearTimeout(this.lastTimeoutExpandId); + this.clearTimeoutExpandId = this.lastTimeoutExpandId; + } + this.lastTimeoutExpandId = this.timeoutExpandId; + } + } + + public delayHighLight(currentIndex: number) { + let that =this; + this.ListNode.forEach(function (value) { + if (value.getNodeCurrentNodeId() == that.lastPassId) { + value.setCanShowFlagLine(false); + value.setCanShowBottomFlagLine(false); + } + }) + this.changeNodeColor(currentIndex, this.listNode[currentIndex].getNodeStatus().highLight); + this.listNode[currentIndex].setIsHighLight(true); + this.changeNodeHighLightColor(currentIndex, true); + this.setImageSource(currentIndex, InteractionStatus.DragInsert); + this.setImageCollapseSource(currentIndex, InteractionStatus.DragInsert); + this.notifyDataReload(); + } + + public alterFlagLineAndExpandNode(currentIndex: number, firstChildNodeId: number) { + let that =this; + this.ListNode.forEach(function (value) { + if (value.getNodeCurrentNodeId() == that.lastPassId) { + value.setCanShowFlagLine(false); + value.setCanShowBottomFlagLine(false); + } + }) + this.ListNode.forEach(function (value) { + if (that.isInnerDrag && value.getNodeCurrentNodeId() == firstChildNodeId) { + value.setCanShowFlagLine(true); + } + }) + this.changeNodeStatus(currentIndex); + this.handleExpandAndCollapse(currentIndex); + this.lastPassId = firstChildNodeId; + } + + public hideLastLine() { + if (this.lastPassId != this.INITIAL_INVALID_VALUE && this.loadedNodeIdAndIndexMap.has(this.lastPassId)) { + let that = this; + this.ListNode.forEach(function (value) { + if (value.getNodeCurrentNodeId() == that.lastPassId) { + value.setCanShowFlagLine(false); + value.setCanShowBottomFlagLine(false); + } + }) + let index: number = this.loadedNodeIdAndIndexMap.get(this.lastPassId); + this.notifyDataChange(index); + } + } + + public clearLastTimeoutHighLight() { + if (this.lastTimeoutHighLightId != this.INITIAL_INVALID_VALUE && + this.clearTimeoutHighLightId != this.lastTimeoutHighLightId) { + clearTimeout(this.lastTimeoutHighLightId); + if (this.lastDelayHighLightIndex != this.INITIAL_INVALID_VALUE) { + this.clearHighLight(this.lastDelayHighLightIndex); + } + } + } + + public clearLastTimeoutExpand() { + if (this.lastTimeoutExpandId != this.INITIAL_INVALID_VALUE && + this.clearTimeoutExpandId != this.lastTimeoutExpandId) { + clearTimeout(this.lastTimeoutExpandId); + } + } + + public getSubtitle(currentNodeId: number): string { + if (this.nodeIdAndSubtitleMap.has(currentNodeId)) { + if (typeof this.nodeIdAndSubtitleMap.get(currentNodeId) == "number") { + return this.nodeIdAndSubtitleMap.get(currentNodeId).toString(); + } else { + return this.nodeIdAndSubtitleMap.get(currentNodeId) + } + } else { + return ''; + } + } + + public hasSubtitle(currentNodeId: number) { + return this.nodeIdAndSubtitleMap.has(currentNodeId); + } + + public initialParameterAboutDelayHighLightAndExpandIndex() { + this.lastDelayHighLightIndex = this.INITIAL_INVALID_VALUE; + this.lastDelayExpandIndex = this.INITIAL_INVALID_VALUE; + this.lastPassIndex = this.INITIAL_INVALID_VALUE; + this.draggingCurrentNodeId = this.INITIAL_INVALID_VALUE; + this.flag = Flag.NONE; + } + + public refreshSubtitle(insertNodeCurrentNodeId: number) { + this.nodeIdAndSubtitleMap.set(this.selectedParentNodeId, this.selectedParentNodeSubtitle); + this.nodeIdAndSubtitleMap.set(insertNodeCurrentNodeId, this.insertNodeSubtitle); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(this.selectedParentNodeId)); + this.notifyDataChange(this.loadedNodeIdAndIndexMap.get(insertNodeCurrentNodeId)); + } + + public setNodeSubtitlePara( + selectedParentNodeId: number, + selectedParentNodeSubtitle: ResourceStr, + insertNodeSubtitle: ResourceStr + ) { + this.selectedParentNodeId = selectedParentNodeId; + this.selectedParentNodeSubtitle = selectedParentNodeSubtitle; + this.insertNodeSubtitle = insertNodeSubtitle; + } + + public getInsertNodeSubtitle() { + return this.insertNodeSubtitle; + } + + public getExpandAndCollapseInfo(currentNodeId: number) { + return this.expandAndCollapseInfo.get(currentNodeId); + } + + public getLastDelayHighLightId() { + return this.lastDelayHighLightId; + } + + public setLastDelayHighLightId() { + this.ListNode.forEach((value, index) => { + if (index == this.lastDelayHighLightIndex) { + this.lastDelayHighLightId = value.getCurrentNodeId(); + } + }) + } + + public setLastPassId(lastPassId: number) { + this.lastPassId = lastPassId; + } + + public setLastDelayHighLightIndex(lastDelayHighLightIndex) { + this.lastDelayHighLightIndex = lastDelayHighLightIndex; + } + + /* + * Alter the current node location to a needful position. + * 1.Create an array named 'dragNodeParam' to store dragging node information. + * 2.Delete the dragging node from the tree. + * 3.Add the dragging node to the tree. + */ + public alterDragNode(rearParentNodeId: number, rearCurrentNodeId: number, insertNodeInfo: NodeInfo, + dragParentNodeId: number, dragCurrentNodeId: number, frontNodeInfoItem: NodeInfo) { + let dragNodeParam: { parentId: number, currentId: number, data: any }[] = []; + let parentNodeId: number = rearParentNodeId; + let currentNodeId: number = dragCurrentNodeId; + let nodeParam = frontNodeInfoItem.getNodeInfoData(); + let nodeInfo: NodeInfo = null; + let nodeInfoNode: NodeItem = frontNodeInfoItem.getNodeInfoNode(); + let isHighLight : boolean = false; + let insertChildIndex: number = this.INITIAL_INVALID_VALUE; + let currentChildIndex: number = this.INITIAL_INVALID_VALUE; + let isDownFlag: boolean = this.flag == Flag.DOWN_FLAG ? true : false; + + currentChildIndex = this.getChildIndex(dragParentNodeId, dragCurrentNodeId); + + insertChildIndex = this.getChildIndex(rearParentNodeId, rearCurrentNodeId) + 1; + + if (rearParentNodeId != dragParentNodeId) { + insertChildIndex = isDownFlag ? insertChildIndex + 1 : insertChildIndex; + } else { + if (insertChildIndex > currentChildIndex) { + insertChildIndex = isDownFlag ? insertChildIndex : insertChildIndex - 1; + } else { + insertChildIndex = isDownFlag ? insertChildIndex + 1 : insertChildIndex; + } + } + + for (let i = 0; i < this.listNode.length; i++) { + if (this.listNode[i].getCurrentNodeId() == rearCurrentNodeId) { + isHighLight = this.listNode[i].getIsHighLight(); + if (this.flag == Flag.DOWN_FLAG && this.expandAndCollapseInfo.get(rearCurrentNodeId) == NodeStatus.Expand) { + parentNodeId = rearCurrentNodeId; + insertChildIndex = 0; + } else if (this.flag == Flag.UP_FLAG && this.expandAndCollapseInfo.get(rearCurrentNodeId) == NodeStatus.Expand + && this.listNode[i].getCanShowFlagLine() == false) { + parentNodeId = rearCurrentNodeId; + insertChildIndex = 0; + } else if (isHighLight) { + parentNodeId = rearCurrentNodeId; + insertChildIndex = 0; + } + break; + } + } + + let callbackParam: CallbackParam = { currentNodeId: currentNodeId, parentNodeId: parentNodeId, childIndex: insertChildIndex } + + /* export inner drag node Id. */ + this.appEventBus.emit(TreeListenType.NODE_MOVE, [callbackParam]); + + /* To store dragging node information by the array named 'dragNodeParam'. */ + dragNodeParam.push({parentId: parentNodeId, currentId: currentNodeId, data: nodeParam}); + + let oneself = null, + callback = function(node, listNode): boolean { + if (node) { + oneself = node; + parentNodeId = oneself.parentNodeId; + currentNodeId = oneself.currentNodeId; + for (let i = 0; i < listNode.length; i++) { + if (listNode[i].getNodeCurrentNodeId() == currentNodeId) { + nodeInfo = listNode[i]; + break; + } + } + nodeParam = nodeInfo.getNodeInfoData(); + if (parentNodeId != dragParentNodeId) { + dragNodeParam.push({parentId: parentNodeId, currentId: currentNodeId, data: nodeParam}); + } + return false; + } + return false; + } + this.listNodeUtils.dragTraverseNodeDF(callback, nodeInfoNode, this.listNode); + + /* Delete the dragging node from the tree. */ + this.listNodeUtils.removeNode(dragCurrentNodeId, dragParentNodeId, this.listNodeUtils.traverseNodeBF); + + /* + * Add the dragging node to the tree + * 1.The first dragging node is added singly, because it needs to distinguish the position to insert + * + * Add first node. + */ + let insertCurrentNodeId: number = rearCurrentNodeId; + let isAfter: boolean = isDownFlag; + if (this.expandAndCollapseInfo.get(rearCurrentNodeId) == NodeStatus.Expand) { + isAfter = false; + this.listNode.forEach((value) => { + if (value.getCurrentNodeId() == rearCurrentNodeId && value.getCanShowFlagLine() == false) { + if (value.getNodeInfoNode().children.length) { + insertCurrentNodeId = value.getNodeInfoNode().children[0].currentNodeId; + } else { + insertCurrentNodeId = this.INITIAL_INVALID_VALUE; + } + } + }) + } else if (!this.expandAndCollapseInfo.get(rearCurrentNodeId) && isHighLight) { + this.expandAndCollapseInfo.set(rearCurrentNodeId, NodeStatus.Expand); + } + + this.listNodeUtils.addDragNode(dragNodeParam[0].parentId, dragNodeParam[0].currentId, insertCurrentNodeId, + isAfter, dragNodeParam[0].data); + + /* Add remaining node. */ + for (let j = 1; j < dragNodeParam.length; j++) { + this.listNodeUtils.addNode(dragNodeParam[j].parentId, dragNodeParam[j].currentId, dragNodeParam[j].data); + } + + /* Update node data and reload the array named 'listNode'. */ + for (let i = 0; i < this.listNode.length; i++) { + if (this.listNode[i].getCurrentNodeId() == dragParentNodeId) { + if (this.listNode[i].getNodeInfoNode().getNodeItem().imageCollapse == null) { + this.listNode[i].handleImageCollapseAfterAddNode(false); + this.expandAndCollapseInfo.delete(dragParentNodeId); + break; + } + } + } + let tmp: NodeInfo[] = [...this.listNode]; + this.reloadListNode(this.listNodeUtils, tmp); + + } + + /* + * Reload the array named 'listNode' + * @param listNodeUtils + * @param tmp + */ + public reloadListNode(listNodeUtils: ListNodeUtils, tmp: NodeInfo[]) { + let index = 0; + this.listNode = []; + this.listNodeUtils = listNodeUtils; + this.loadedNodeIdAndIndexMap.clear(); + this.listNodeUtils.traverseNodeDF((node: NodeItem): boolean => { + if (node.currentNodeId >= 0) { + var nodeInfo: NodeInfo = new NodeInfo(node); + this.listNode.push(nodeInfo); + + if (this.expandAndCollapseInfo.get(node.currentNodeId) == NodeStatus.Expand) { + nodeInfo.getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Expand); + } else if (this.expandAndCollapseInfo.get(node.currentNodeId) == NodeStatus.Collapse) { + nodeInfo.getNodeItem().imageCollapse.changeImageCollapseSource(NodeStatus.Collapse); + } + + for (let i = 0; i < tmp.length; i++){ + if (tmp[i].getCurrentNodeId() == nodeInfo.getCurrentNodeId()) { + nodeInfo.setNodeIsShow(tmp[i].getNodeIsShow()); + nodeInfo.setListItemHeight(tmp[i].getListItemHeight()); + if (nodeInfo.getNodeItem().mainTitleNode && nodeInfo.getIsShowTitle()) { + nodeInfo.getNodeItem().mainTitleNode.title = tmp[i].getNodeItem().mainTitleNode.title; + } + break; + } + } + if (nodeInfo.getNodeIsShow()) { + this.loadedNodeIdAndIndexMap.set(nodeInfo.getCurrentNodeId(), index++); + } + } + return false; + }); + } + + public getFlagLine() { + return this.FLAG_LINE; + } + + public getVisibility(nodeInfo: NodeInfo): any { + let lastShowIndex: number = this.loadedNodeIdAndIndexMap.get(nodeInfo.getCurrentNodeId()) - 1; + if (lastShowIndex > this.INITIAL_INVALID_VALUE) { + let lastNodeInfo: NodeInfo = this.getData(lastShowIndex); + return (nodeInfo.getCanShowFlagLine() == true && !nodeInfo.getIsHighLight() && !lastNodeInfo.getIsHighLight()) ? + Visibility.Visible : Visibility.Hidden; + } else { + return (nodeInfo.getCanShowFlagLine() == true && !nodeInfo.getIsHighLight()) ? + Visibility.Visible : Visibility.Hidden; + } + } + + public getSubTitlePara() { + return this.subTitle; + } + + public getIsFolder(nodeId: number) { + if (this.loadedNodeIdAndIndexMap.has(nodeId)) { + return this.getData(this.loadedNodeIdAndIndexMap.get(nodeId)).getIsFolder(); + } + return false; + } + + public getSubTitleFontColor(isHighLight: boolean) { + return isHighLight ? this.subTitle.highLightFontColor : this.subTitle.normalFontColor; + } + + private getChildIndex(rearParentNodeId: number, rearCurrentNodeId: number) { + let insertChildIndex: number = this.INITIAL_INVALID_VALUE; + this.listNodeUtils.traverseNodeBF(function(node): boolean { + if (node.getCurrentNodeId() == rearParentNodeId) { + node.children.forEach((value, index) => { + if (value.getCurrentNodeId() == rearCurrentNodeId) { + insertChildIndex = index; + } + }) + return true; + } + return false; + }); + return insertChildIndex; + } + + public setCurrentFocusNodeId(focusNodeId: number) { + this.currentFocusNodeId = focusNodeId; + } + + public getCurrentFocusNodeId(): number { + return this.currentFocusNodeId; + } + + public setLastFocusNodeId(focusNodeId: number) { + this.lastFocusNodeId = focusNodeId; + } + + public getLastFocusNodeId(): number { + return this.lastFocusNodeId; + } + + public getAddFocusNodeId(): number { + return this.addFocusNodeId; + } + + public setFlag(flag: Flag) { + this.flag = flag; + } + } + + /** + * Tree view control, which is created by using the TreeController class. + * + * When you create this component, you must initialize the listNodeDataSource. + * You can run the listTreeViewWidth command to set the width of the component. + * The default width is 200vp. + * + * @since 10 + */ + @Component + export struct TreeView { + @State nodeList: NodeInfo[] = []; + listNodeDataSource: ListNodeDataSource; + @State item: NodeInfo[] = null; + treeController: TreeController; + @State touchCount: number = 0; + @State dropSelectedIndex: number = 0; + @State viewLastIndex: number = -1; + @State listItemBgColor: Resource = $r('sys.color.ohos_id_color_background_transparent') + @BuilderParam private listTreeViewMenu: () => void = null; + private readonly MAX_CN_LENGTH: number = 254; + private readonly MAX_EN_LENGTH: number = 255; + private readonly INITIAL_INVALID_VALUE = -1; + private readonly MAX_TOUCH_DOWN_COUNT = 0; + private isMultiPress: boolean = false; + private touchDownCount: number = this.INITIAL_INVALID_VALUE; + private appEventBus: TreeListener = TreeListenerManager.getInstance().getTreeListener(); + private readonly itemPadding: { left: Resource, right: Resource, top: Resource, bottom: Resource } = + { left: $r('sys.float.ohos_id_card_margin_start'), + right: $r('sys.float.ohos_id_card_margin_end'), + top: $r('sys.float.ohos_id_text_margin_vertical'), + bottom: $r('sys.float.ohos_id_text_margin_vertical')}; + /* { left: '12vp', right: '12vp', top: '2vp', bottom: '2vp' } */ + private readonly textInputPadding: { left : string, right: string, top: string, bottom: string } = + { left : '0vp', right: '0vp', top: '0vp', bottom: '0vp'} + aboutToAppear(): void { + this.listNodeDataSource = this.treeController.getListNodeDataSource(); + this.nodeList = this.treeController.getListNodeDataSource().listNode; + this.item = this.treeController.getListNodeDataSource().listNode; + } + + private checkInvalidPattern(title: string): boolean { + let pattern = /[\\\/:*?"<>|]/; + return pattern.test(title) + } + + private checkIsAllCN(title: string): boolean { + let pattern = /^[\u4e00-\u9fa5]+$/; + return pattern.test(title) + } + + @Builder popupForShowTitle(text: string | Resource, backgroundColor: Resource, fontColor: Resource ) { + Row() { + Text(text).fontSize($r('sys.float.ohos_id_text_size_body2')).fontWeight('regular').fontColor(fontColor) + }.backgroundColor(backgroundColor) + .border({radius: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) + .padding({left: $r('sys.float.ohos_id_elements_margin_horizontal_l'), + right: $r('sys.float.ohos_id_elements_margin_horizontal_l'), + top: $r('sys.float.ohos_id_card_margin_middle'), + bottom: $r('sys.float.ohos_id_card_margin_middle')}) + } + + @Builder builder() { + this.listTreeViewMenu() + } + + /* Set the popup of dragging node. */ + @Builder draggingPopup(item: NodeInfo) { + Row() { + if (item.getNodeItem().imageNode) { + Row() { + Image(item.getNodeItem().imageNode.normalSource) + .objectFit(ImageFit.Contain) + .height(item.getNodeItem().imageNode.itemHeight) + .width(item.getNodeItem().imageNode.itemWidth) + .opacity(this.listNodeDataSource.getDragPopupPara().imageOpacity) + } + .backgroundColor(COLOR_IMAGE_ROW) + .margin({ right: item.getNodeItem().imageNode.itemRightMargin }) + .height(item.getNodeItem().imageNode.itemHeight) + .width(item.getNodeItem().imageNode.itemWidth) + } + + Row() { + if (item.getNodeItem().mainTitleNode && item.getIsShowTitle()) { + Text(item.getNodeItem().mainTitleNode.title) + .maxLines(1) + .fontSize(item.getNodeItem().mainTitleNode.size) + .fontColor(this.listNodeDataSource.getDragPopupPara().fontColor) + .fontWeight(this.listNodeDataSource.getDragPopupPara().fontWeight) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + } + .constraintSize({ + minWidth: item.getNodeItem().imageNode ? + this.listNodeDataSource.getDragPopupPara().textConstraintSize.minWidth1 : + this.listNodeDataSource.getDragPopupPara().textConstraintSize.minWidth2, + maxWidth: item.getNodeItem().imageNode ? + this.listNodeDataSource.getDragPopupPara().textConstraintSize.maxWidth1 : + this.listNodeDataSource.getDragPopupPara().textConstraintSize.maxWidth2 }) + } + .constraintSize({ minWidth: this.listNodeDataSource.getDragPopupPara().floorConstraintSize.minWidth, + maxWidth: this.listNodeDataSource.getDragPopupPara().floorConstraintSize.maxWidth }) + .height(this.listNodeDataSource.getDragPopupPara().height) + .backgroundColor(this.listNodeDataSource.getDragPopupPara().backgroundColor) + .padding({ left: this.listNodeDataSource.getDragPopupPara().padding.left, + right: this.listNodeDataSource.getDragPopupPara().padding.right }) + .shadow({ radius: $r('sys.float.ohos_id_corner_radius_default_m'), + color: SHADOW_COLOR, + offsetY: 0 }) + .borderRadius(this.listNodeDataSource.getDragPopupPara().borderRadius) // need to doubleCheck. + } + + clearLastIndexColor(){ + if (this.viewLastIndex == -1 || this.viewLastIndex >= this.nodeList.length) { + return; + } + this.setImageSources(this.viewLastIndex, InteractionStatus.Normal); + + this.nodeList[this.viewLastIndex].setNodeColor($r('sys.color.ohos_id_color_background_transparent')) + this.nodeList[this.viewLastIndex].fontColor = $r('sys.color.ohos_id_color_primary'); + this.listNodeDataSource.listNode[this.viewLastIndex].setNodeColor($r('sys.color.ohos_id_color_background_transparent')); + this.listNodeDataSource.listNode[this.viewLastIndex].fontColor = $r('sys.color.ohos_id_color_primary'); + this.listNodeDataSource.listNode[this.viewLastIndex].setIsSelected(false); + this.listNodeDataSource.setImageSource(this.viewLastIndex, InteractionStatus.Normal); + } + + setImageSources(index: number, interactionStatus: InteractionStatus) { + let nodeInfo: NodeInfo = this.nodeList[index]; + nodeInfo.setIsSelected(interactionStatus === InteractionStatus.Selected || + interactionStatus === InteractionStatus.Edit || interactionStatus === InteractionStatus.FinishEdit); + if (nodeInfo.getNodeItem().mainTitleNode != null && interactionStatus != InteractionStatus.DragInsert && + interactionStatus != InteractionStatus.FinishDragInsert) { + nodeInfo.getNodeItem().mainTitleNode.setMainTitleSelected(interactionStatus === InteractionStatus.Selected || + interactionStatus === InteractionStatus.FinishEdit); + } + if (nodeInfo.getNodeItem().imageNode != null) { + nodeInfo.getNodeItem().imageNode.setImageSource(interactionStatus); + } + } + + findIndex(currentNodeId: number): number { + let thisIndex: number = 0; + this.listNodeDataSource.ListNode.forEach(function (value, index) { + if (value.getNodeCurrentNodeId() == currentNodeId) { + thisIndex = index; + } + }) + return thisIndex; + } + + build() { + List({ }) { + LazyForEach(this.listNodeDataSource, (itemInner: NodeInfo) => { + ListItem() { + Row() { + TreeViewInner({ + item: itemInner, + listNodeDataSource: this.listNodeDataSource, + index: this.findIndex(itemInner.getNodeCurrentNodeId()), + }) + } + .onTouch((event: TouchEvent) => { + this.viewLastIndex = this.listNodeDataSource.getLastIndex(); + let index = this.findIndex(itemInner.getNodeCurrentNodeId()) + + if (event.type == TouchType.Down) { + if (index != this.viewLastIndex) { + this.clearLastIndexColor() + this.listNodeDataSource.lastIndex = index; + this.listNodeDataSource.setClickIndex(index); + } + } + if (event.type == TouchType.Up) { + this.listNodeDataSource.listNode[index].setIsSelected(true); + this.listNodeDataSource.setImageSource(index, InteractionStatus.Selected); + if (this.listNodeDataSource.listNode[index].getNodeItem().imageNode != null) { + this.listNodeDataSource.listNode[index].imageSource = this.listNodeDataSource.listNode[index].getNodeItem().imageNode.source; + } + + if (index != this.viewLastIndex) { + this.clearLastIndexColor() + + this.listNodeDataSource.lastIndex = index; + this.listNodeDataSource.setClickIndex(index); + } + this.viewLastIndex = index; + } + + if (this.listNodeDataSource.getLastIndex() !== -1 && index !== this.listNodeDataSource.getLastIndex()) { + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE, false, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE); + } + }) + } + .width('100%').height(itemInner.getListItemHeight()) + .padding({ left: this.itemPadding.left, right: this.itemPadding.right}) + .align(Alignment.Start) + .onDragStart((event: DragEvent, extraParams: string) => { + if (this.listNodeDataSource.getIsDrag() || this.listNodeDataSource.getIsInnerDrag() || this.isMultiPress) { + console.error('drag error, a item has been dragged'); + return; + } + this.dropSelectedIndex = JSON.parse(extraParams).selectedIndex; + let currentNodeIndex = JSON.parse(extraParams).selectedIndex; + let currentNodeInfo = this.listNodeDataSource.getData(currentNodeIndex); + let currentItemNodeId = itemInner.getNodeCurrentNodeId(); + /* handle the situation of drag error, currentNodeIndex is not found in onDragStart. */ + if (currentNodeIndex >= this.listNodeDataSource.totalCount() || currentNodeIndex == undefined) { + console.error('drag error, currentNodeIndex is not found in onDragStart'); + return; + } + + this.listNodeDataSource.setIsInnerDrag(true); + this.listNodeDataSource.setIsDrag(true); + this.listNodeDataSource.setCurrentNodeInfo(currentNodeInfo); + this.listNodeDataSource.setDraggingCurrentNodeId(currentNodeInfo.getNodeCurrentNodeId()); + this.listNodeDataSource.setDraggingParentNodeId(currentNodeInfo.getNodeParentNodeId()); + + /* set the opacity of the dragging node. */ + let draggingNodeOpacity: number = DRAG_OPACITY; + this.listNodeDataSource.setListItemOpacity(draggingNodeOpacity); + this.listNodeDataSource.notifyDataChange(currentNodeIndex); + + /* + * handle the situation of drag is too fast,it attribute a fault to OH. + * OH has Solved on real machine. + */ + if (currentItemNodeId != currentNodeInfo.getNodeCurrentNodeId()) { + console.error('drag is too fast,it attribute a fault to OH'); + this.listNodeDataSource.setIsDrag(false); + return; + } + + return this.draggingPopup(currentNodeInfo); + }) + }, item => JSON.stringify(item)) + } + + /* Move the dragged node. */ + .onDragMove((event: DragEvent) => { + if (this.isMultiPress) { + console.error('drag error, a item has been dragged'); + return; + } + let nodeHeight: number = LIST_ITEM_HEIGHT; + + /* flag the position of the focus on the node. */ + let flag: Flag = Math.floor(event.getY() / (nodeHeight / FLAG_NUMBER)) % FLAG_NUMBER ? Flag.DOWN_FLAG : Flag.UP_FLAG; + + /* Record the node position to which the dragged node moves. */ + let index = JSON.parse(extraParams).insertIndex; + + /* Handle the situation where the focus(index) exceeds the list area. */ + let isOverBorder: boolean = false; + if (index >= this.listNodeDataSource.totalCount()) { + flag = Flag.DOWN_FLAG; + index = this.listNodeDataSource.totalCount() - 1; + this.listNodeDataSource.getData(index).setIsOverBorder(true); + isOverBorder = true; + } else { + this.listNodeDataSource.getData(index).setIsOverBorder(false); + } + + let currentNodeInfo: NodeInfo = this.listNodeDataSource.getData(index); + let currentNodeId: number = currentNodeInfo.getCurrentNodeId(); + + /* + * handle a situation that "draggingCurrentNodeId" is parent of "insertNodeCurrentNodeId"; + * do not perform some functions. + */ + if (index != this.listNodeDataSource.getLastPassIndex() && this.listNodeDataSource.getIsInnerDrag()) { + let isParentNodeOfInsertNode: boolean = this.listNodeDataSource.getIsParentOfInsertNode(currentNodeId); + if (isParentNodeOfInsertNode) { + this.listNodeDataSource.setPassIndex(index); + let that = this; + this.listNodeDataSource.clearTimeOutAboutDelayHighLightAndExpand(findCurrentNodeIndex.call(that, + currentNodeId)); + this.listNodeDataSource.setFlag(Flag.NONE); + return; + } + } + this.listNodeDataSource.setLastPassIndex(index); + + /* Set the visibility of the flag line. */ + this.listNodeDataSource.setVisibility(flag, index - 1, isOverBorder); + + /* Automatically HighLight one second delay and expand after two second delay. */ + if (currentNodeId != this.listNodeDataSource.getDraggingCurrentNodeId()) { + let that = this; + this.listNodeDataSource.delayHighLightAndExpandNode(findCurrentNodeIndex.call(that, currentNodeId), + currentNodeId, index); + } + }) + + /* DragEvent Enter. */ + .onDragEnter((event: DragEvent, extraParams: string) => { + if (this.listNodeDataSource.getIsInnerDrag()) { + this.listNodeDataSource.setIsDrag(true); + + /* set the opacity of the dragging node. */ + let draggingNodeOpacity: number = DRAG_OPACITY; + this.listNodeDataSource.setListItemOpacity(draggingNodeOpacity); + } + }) + + /* DragEvent Leave. */ + .onDragLeave((event: DragEvent, extraParams: string) => { + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.clearLastTimeoutExpand(); + let draggingNodeOpacity: number = DRAG_OPACITY_NONE; + this.listNodeDataSource.setListItemOpacity(draggingNodeOpacity); + this.listNodeDataSource.setIsDrag(false); + this.listNodeDataSource.notifyDataReload(); + }) + + /* DragEvent Drop. */ + .onDrop((event: DragEvent, extraParams: string) => { + this.listNodeDataSource.clearLastTimeoutExpand(); + let draggingNodeOpacity: number = DRAG_OPACITY_NONE; + this.listNodeDataSource.setListItemOpacity(draggingNodeOpacity); + let insertNodeIndex: number = JSON.parse(extraParams).insertIndex + let currentNodeIndex: number = this.dropSelectedIndex; + + if (currentNodeIndex - 1 > this.listNodeDataSource.totalCount() || currentNodeIndex == undefined) { + console.error('drag error, currentNodeIndex is not found'); + this.listNodeDataSource.setIsDrag(false); + return; + } + + if (insertNodeIndex == this.listNodeDataSource.totalCount()) { + console.log('need to insert into the position of the last line, now insertNodeIndex = insertNodeIndex - 1'); + insertNodeIndex -= 1; + } + + let insertNodeInfo: NodeInfo = this.listNodeDataSource.getData(insertNodeIndex); + if (insertNodeInfo == null) { + return; + } + let insertNodeCurrentNodeId: number = insertNodeInfo.getNodeCurrentNodeId(); + + /* outer node is move in. */ + if (!this.listNodeDataSource.getIsDrag() || !this.listNodeDataSource.getIsInnerDrag()) { + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.setIsInnerDrag(false); + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.initialParameterAboutDelayHighLightAndExpandIndex(); + this.listNodeDataSource.refreshSubtitle(insertNodeCurrentNodeId); + this.listNodeDataSource.notifyDataReload(); + return; + } + + let currentNodeInfo: NodeInfo = this.listNodeDataSource.getCurrentNodeInfo(); + let insertNodeParentNodeId: number = insertNodeInfo.getNodeParentNodeId(); + let draggingCurrentNodeId: number = this.listNodeDataSource.getDraggingCurrentNodeId(); + let draggingParentNodeId: number = this.listNodeDataSource.getDraggingParentNodeId(); + + /* + * handle a situation that "draggingCurrentNodeId" is parent of "insertNodeCurrentNodeId". + * drag is fail. + */ + let isParentNodeOfInsertNode: boolean = this.listNodeDataSource.getIsParentOfInsertNode(insertNodeCurrentNodeId); + if (isParentNodeOfInsertNode) { + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.setIsInnerDrag(false); + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.notifyDataChange(insertNodeIndex); + this.listNodeDataSource.initialParameterAboutDelayHighLightAndExpandIndex(); + this.listNodeDataSource.setIsDrag(false); + + /* set the position of focus. */ + let that = this; + let currentFocusIndex: number = findCurrentNodeIndex.call(that, draggingCurrentNodeId); + this.listNodeDataSource.setClickIndex(currentFocusIndex); + this.listNodeDataSource.handleEvent(Event.DRAG, currentFocusIndex); + return; + } + + /* Collapse drag node. */ + if (this.listNodeDataSource.getExpandAndCollapseInfo(draggingCurrentNodeId) == NodeStatus.Expand) { + let that = this; + this.listNodeDataSource.expandAndCollapseNode( + findCurrentNodeIndex.call(that, draggingCurrentNodeId)); + } + + let flag: boolean = false; + + /* Expand insert node. */ + if (this.listNodeDataSource.getExpandAndCollapseInfo(insertNodeCurrentNodeId) == NodeStatus.Collapse) { + let that = this; + let currentIndex: number = findCurrentNodeIndex.call(that, insertNodeCurrentNodeId); + if (this.listNodeDataSource.ListNode[currentIndex].getIsHighLight()) { + this.listNodeDataSource.expandAndCollapseNode(currentIndex); + } + flag = true; + } + + /* alter dragNode. */ + this.listNodeDataSource.setLastDelayHighLightId(); + if (draggingCurrentNodeId != insertNodeCurrentNodeId){ + this.listNodeDataSource.alterDragNode(insertNodeParentNodeId, insertNodeCurrentNodeId, insertNodeInfo, + draggingParentNodeId, draggingCurrentNodeId, currentNodeInfo); + this.listNodeDataSource.hideLastLine(); + } else { + /*the position of dragNode is equal with the position of insertNode. */ + this.listNodeDataSource.hideLastLine(); + this.listNodeDataSource.setLastPassId(draggingCurrentNodeId); + this.listNodeDataSource.hideLastLine(); + } + let that = this; + let lastDelayHighLightIndex: number = findCurrentNodeIndex.call(that, + this.listNodeDataSource.getLastDelayHighLightId()); + this.listNodeDataSource.setLastDelayHighLightIndex(lastDelayHighLightIndex); + this.listNodeDataSource.clearLastTimeoutHighLight(); + this.listNodeDataSource.initialParameterAboutDelayHighLightAndExpandIndex(); + this.listNodeDataSource.setIsDrag(false); + + /* set the position of focus. */ + let currentFocusIndex: number = findCurrentNodeIndex.call(that, draggingCurrentNodeId); + this.listNodeDataSource.setClickIndex(currentFocusIndex); + this.listNodeDataSource.handleEvent(Event.DRAG, currentFocusIndex); + + /* innerDrag is over. */ + this.listNodeDataSource.setIsInnerDrag(false); + this.listNodeDataSource.notifyDataReload(); + + this.listNodeDataSource.listNode[currentFocusIndex].fontColor = $r('sys.color.ohos_id_color_text_primary_activated'); + if (this.viewLastIndex !== -1 && currentNodeIndex != this.viewLastIndex) { + this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().mainTitleNode.setMainTitleSelected(false) + this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().mainTitleNode.setMainTitleHighLight(false) + } + + if (this.listNodeDataSource.listNode[this.viewLastIndex] != null) { + this.listNodeDataSource.listNode[this.viewLastIndex].fontColor = $r('sys.color.ohos_id_color_text_primary'); + } + + this.listNodeDataSource.lastIndex = this.viewLastIndex; + if (this.listNodeDataSource.listNode[this.viewLastIndex]) { + if (this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().imageNode != null) { + + this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().imageNode.setImageSource(InteractionStatus.Normal); + this.listNodeDataSource.listNode[this.viewLastIndex].imageSource = this.listNodeDataSource.listNode[this.viewLastIndex].getNodeItem().imageNode.source; + } + } + + if(this.listNodeDataSource.listNode[this.viewLastIndex]) { + this.listNodeDataSource.listNode[this.viewLastIndex].setNodeColor($r('sys.color.ohos_id_color_background_transparent')); + } + + this.viewLastIndex = currentFocusIndex; + }) + } + } + + // Declare NodeParam + export interface NodeParam { + parentNodeId?: number, + currentNodeId?: number, + isFolder?: boolean, + icon?: Resource, + selectedIcon?: Resource, + editIcon?: Resource, + primaryTitle?: string, + secondaryTitle?: number | string, + container?: () => void, + } + + // Declare CallbackParam + export interface CallbackParam { + currentNodeId: number, + parentNodeId?: number, + childIndex?: number, + } + + /** + * Create a tree view control proxy class to generate a tree view. + * + * @since 10 + */ + export class TreeController { + readonly ROOT_NODE_ID: number = -1; + private nodeIdList: number[] = []; + private listNodeUtils : ListNodeUtils = new ListNodeUtils(); + private listNodeDataSource : ListNodeDataSource = new ListNodeDataSource(); + + /** + * After the addNode interface is invoked, + * this interface is used to obtain the initialization data of + * the tree view component for creating a tree view component. + * + * @return ListNodeDataSource Obtains the initialization data of the tree view component. + * + * @since 10 + */ + public getListNodeDataSource(): ListNodeDataSource { + return this.listNodeDataSource; + } + + /** + * Obtains the subNode information of the currently clicked node. + * + * @return Array Returns an array that stores the configuration information of each node. + * If there is no child node, an empty array is returned. + * + * @since 10 + */ + public getClickNodeChildrenInfo(): Array<{ itemId: number, itemIcon: Resource, itemTitle: string, + isFolder: boolean }> { + let clickNodeId = this.listNodeDataSource.getClickNodeId(); + return this.listNodeUtils.getClickNodeChildrenInfo(clickNodeId); + } + + public getChildrenId(): Array { + let clickNodeId = this.listNodeDataSource.getClickNodeId(); + return this.listNodeUtils.getClickChildId(clickNodeId); + } + + /** + * Delete a node. + * + * Register an ON_ITEM_DELETE callback through the EventBus mechanism to obtain the IDs of all deleted nodes. + * + * @since 10 + */ + public removeNode(): void { + let clickNodeId = this.listNodeDataSource.getClickNodeId(); + if (clickNodeId < 0) { + return; + } + let parentNodeId = this.listNodeUtils.findParentNodeId(clickNodeId); + let removeNodeIdList: number[] = this.listNodeUtils.removeNode(clickNodeId, + parentNodeId, this.listNodeUtils.traverseNodeBF); + this.listNodeDataSource.refreshData(this.listNodeUtils, MenuOperation.REMOVE_NODE, parentNodeId, removeNodeIdList); + this.nodeIdList.splice(this.nodeIdList.indexOf(clickNodeId), 1); + } + + /** + * Modify the node name. + * + * Register an ON_ITEM_MODIFY callback to obtain the ID, parent node ID, and node name of the modified node. + * + * @since 10 + */ + public modifyNode(): void { + let clickNodeId = this.listNodeDataSource.getClickNodeId(); + this.listNodeDataSource.setItemVisibilityOnEdit(clickNodeId, MenuOperation.MODIFY_NODE); + } + + /** + * Add a node. + * + * Icon of a new node, which is generated by the system by default. + * If there is a same-level node, the icon of the first node of the same-level node is used. + * If no icon is set for the first node of the same-level node, the new node does not have an icon. + * If there is no peer node, the icon of the parent node is used. + * If no icon is set for the parent node, the new node does not have an icon. + * The system generates an ID for the new node and registers an ON_ITEM_ADD callback through + * the EventBus mechanism to obtain the ID, parent node ID, node name, normal icon, selected icon, + * edit icon of the new node. + * + * @since 10 + */ + public add(): void { + let clickNodeId: number = this.listNodeDataSource.getClickNodeId(); + if (clickNodeId == this.listNodeDataSource.ROOT_NODE_ID || !this.listNodeDataSource.getIsFolder(clickNodeId)) { + return; + } + let newNodeInfo: { isFolder: boolean, icon: Resource, selectedIcon: Resource, editIcon: Resource, + container: () =>any, secondaryTitle: number | string } = + { isFolder: true, icon: null, selectedIcon: null, editIcon: null, container: null, secondaryTitle: '' }; + newNodeInfo = this.listNodeUtils.getNewNodeInfo(clickNodeId); + this.nodeIdList.push(this.nodeIdList[this.nodeIdList.length - 1] + 1); + let newNodeId: number = this.nodeIdList[this.nodeIdList.length - 1]; + this.listNodeUtils.addNewNodeId = newNodeId; + this.listNodeUtils.addNode(clickNodeId, newNodeId, + { isFolder: newNodeInfo.isFolder, icon: newNodeInfo.icon, selectedIcon: newNodeInfo.selectedIcon, + editIcon: newNodeInfo.editIcon, primaryTitle: '新建文件夹', container: newNodeInfo.container, + secondaryTitle: newNodeInfo.secondaryTitle }); + this.listNodeDataSource.refreshData(this.listNodeUtils, MenuOperation.ADD_NODE, clickNodeId, [newNodeId]); + + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE, false, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE); + this.listNodeDataSource.listNode[this.listNodeDataSource.getLastIndex()].setFontColor($r('sys.color.ohos_id_color_text_primary')); + + let newNodeindex = findCurrentNodeIndex.call(this, newNodeId); + this.listNodeDataSource.setClickIndex(newNodeindex); + this.listNodeDataSource.handleEvent(Event.TOUCH_UP, newNodeindex); + } + + public addNodeParam(nodeParam: NodeParam): TreeController { + if (nodeParam.primaryTitle != null && + !this.listNodeUtils.checkMainTitleIsValid(nodeParam.primaryTitle)) { + throw new Error('ListTreeNode[addNode]: ' + + 'The directory name cannot contain the following characters\ /: *? "< > | or exceeds the maximum length.'); + return null; + } + if (nodeParam.primaryTitle == null && nodeParam.icon == null) { + throw new Error('ListTreeNode[addNode]: ' + + 'The icon and directory name cannot be empty at the same time.'); + return null; + } + if (nodeParam.currentNodeId === this.ROOT_NODE_ID || nodeParam.currentNodeId === null) { + throw new Error('ListTreeNode[addNode]: currentNodeId can not be -1 or null.'); + return null; + } + this.nodeIdList.push(nodeParam.currentNodeId); + this.listNodeUtils.addNode(nodeParam.parentNodeId, nodeParam.currentNodeId, nodeParam); + return this; + } + + /** + * Initialize the interface of the tree view. This interface is used to generate ListNodeDataSource data. + * addNode is only designed for initialization. It can only be invoked during initialization. + * + * A maximum of 50 directory levels can be added. + * + * @param parentNodeId ID of the parent node. + * @param currentNodeId ID of the new node. The value cannot be -1 or null. + * @param nodeParam Configuration information of the newly added node. + * For details, see the comment description of NodeParam. + * @return ListTreeNode Tree view component proxy class. + * + * @since 10 + */ + public addNode(nodeParam?: NodeParam): TreeController { + if (nodeParam == null) { + this.add(); + } else { + if (nodeParam.primaryTitle != null && + !this.listNodeUtils.checkMainTitleIsValid(nodeParam.primaryTitle)) { + throw new Error('ListTreeNode[addNode]: ' + + 'The directory name cannot contain the following characters\ /: *? "< > | or exceeds the maximum length.'); + return null; + } + if (nodeParam.primaryTitle == null && nodeParam.icon == null) { + throw new Error('ListTreeNode[addNode]: ' + + 'The icon and directory name cannot be empty at the same time.'); + return null; + } + if (nodeParam.currentNodeId === this.ROOT_NODE_ID || nodeParam.currentNodeId === null) { + throw new Error('ListTreeNode[addNode]: currentNodeId can not be -1 or null.'); + return null; + } + this.nodeIdList.push(nodeParam.currentNodeId); + this.listNodeUtils.addNode(nodeParam.parentNodeId, nodeParam.currentNodeId, nodeParam); + return this; + } + } + + /** + * After the initialization is complete by calling the addNode interface, + * call this interface to complete initialization. + * + * This interface must be called when you finish initializing the ListTreeView by addNode. + * @since 10 + */ + public buildDone() { + this.listNodeDataSource.init(this.listNodeUtils); + this.nodeIdList.sort((a, b) => a - b); + } + + public refreshNode(parentId: number, parentSubTitle: ResourceStr = '', + currentSubtitle: ResourceStr = '') { + this.listNodeDataSource.setNodeSubtitlePara(parentId, parentSubTitle, currentSubtitle); + } + } +} + +@Component +export struct TreeViewInner { + @ObjectLink item: NodeInfo; + listNodeDataSource: TreeView.ListNodeDataSource; + @State columnWidth: number = 0; + @State isFocused: boolean = false; + @State index: number = -1; + @State lastIndex: number = -1; + @State count: number = 0; + @BuilderParam private listTreeViewMenu: () => void = null; + private readonly MAX_CN_LENGTH: number = 254; + private readonly MAX_EN_LENGTH: number = 255; + private readonly INITIAL_INVALID_VALUE = -1; + private readonly MAX_TOUCH_DOWN_COUNT = 0; + private isMultiPress: boolean = false; + private touchDownCount: number = this.INITIAL_INVALID_VALUE; + private appEventBus: TreeView.TreeListener = TreeView.TreeListenerManager.getInstance().getTreeListener(); + private readonly itemPadding: { left: Resource, right: Resource, top: Resource, bottom: string | Resource } = + { left: $r('sys.float.ohos_id_card_margin_start'), + right: $r('sys.float.ohos_id_card_margin_end'), + top: $r('sys.float.ohos_id_text_margin_vertical'), + bottom: '0vp' }; + /* { left: '12vp', right: '12vp', top: '2vp', bottom: '0vp' } */ + private readonly textInputPadding: { left : string, right: string, top: string, bottom: string } = + { left : '0vp', right: '0vp', top: '0vp', bottom: '0vp'} + + aboutToAppear(): void { + if (this.item.getNodeItem().imageNode) { + this.item.imageSource = this.item.getNodeItem().imageNode.source + } + } + + private checkInvalidPattern(title: string): boolean { + let pattern = /[\\\/:*?"<>|]/; + return pattern.test(title) + } + + private checkIsAllCN(title: string): boolean { + let pattern = /^[\u4e00-\u9fa5]+$/; + return pattern.test(title) + } + + @Builder popupForShowTitle(text: string | Resource, backgroundColor: Resource, fontColor: Resource ) { + Row() { + Text(text).fontSize($r('sys.float.ohos_id_text_size_body2')).fontWeight('regular').fontColor(fontColor) + }.backgroundColor(backgroundColor) + .border({radius: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) + .padding({left: $r('sys.float.ohos_id_elements_margin_horizontal_l'), + right: $r('sys.float.ohos_id_elements_margin_horizontal_l'), + top: $r('sys.float.ohos_id_card_margin_middle'), + bottom: $r('sys.float.ohos_id_card_margin_middle')}) + } + + @Builder builder() { + if (this.listTreeViewMenu) { + this.listTreeViewMenu() + } + } + + build(){ + if (this.item.getNodeIsShow()) { + Stack() { + Column() { + Stack({alignContent: Alignment.Bottom}) { + Divider() + .height(this.listNodeDataSource.getFlagLine().flagLineHeight) + .color(this.listNodeDataSource.getFlagLine().flagLineColor) + .visibility(this.listNodeDataSource.getVisibility(this.item)) + .lineCap(LineCapStyle.Round) + .margin({ left: this.item.getFlagLineLeftMargin() }) + .focusable(true) + Row({}) { + Row({}) { + if (this.item.getNodeItem().imageNode) { + Row() { + Image(this.item.imageSource) + .objectFit(ImageFit.Contain) + .height(this.item.getNodeItem().imageNode.itemHeight) + .width(this.item.getNodeItem().imageNode.itemWidth) + .opacity(!this.item.getIsSelected() && !this.item.getIsHighLight() ? + this.item.getNodeItem().imageNode.opacity : this.item.getNodeItem().imageNode.noOpacity) + .focusable(this.item.getNodeItem().mainTitleNode != null ? false : true) + } + .focusable(true) + .backgroundColor(COLOR_IMAGE_ROW) + .margin({ right: this.item.getNodeItem().imageNode.itemRightMargin }) + .height(this.item.getNodeItem().imageNode.itemHeight) + .width(this.item.getNodeItem().imageNode.itemWidth) + } + Row() { + if (this.item.getNodeItem().mainTitleNode && this.item.getIsShowTitle()) { + Text(this.item.getNodeItem().mainTitleNode.title) + .maxLines(1) // max line + .fontSize(this.item.getNodeItem().mainTitleNode.size) + .fontColor(this.item.fontColor) + .margin({ right: this.item.getNodeItem().mainTitleNode.itemRightMargin }) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontWeight(this.item.getNodeItem().mainTitleNode.weight) + .focusable(true) + } + if (this.item.getNodeItem().mainTitleNode && + this.item.getNodeItem().inputText && + this.item.getIsShowInputText()) { + Row() { + TextInput({ text: this.item.getNodeItem().mainTitleNode.title }) + .height(this.item.getNodeItem().inputText.itemHeight) + .fontSize(this.item.getNodeItem().inputText.size) + .fontColor(this.item.getNodeItem().inputText.color) + .borderRadius(this.item.getNodeItem().inputText.borderRadius) + .backgroundColor(this.item.getNodeItem().inputText.backgroundColor) + .enterKeyType(EnterKeyType.Done) + .focusable(true) + .padding({ left: this.textInputPadding.left, right: this.textInputPadding.right, + top: this.textInputPadding.top, bottom: this.textInputPadding.bottom }) + .onChange((value: string) => { + let that = this; + var thisIndex = findCurrentNodeIndex.call(that, this.item.getNodeCurrentNodeId()); + let res: string = ''; + let isInvalidError: boolean = false; + let isLengthError: boolean = false; + if (that.checkInvalidPattern(value)) { + for (let i = 0; i < value.length; i++) { + if (!that.checkInvalidPattern(value[i])) { + res += value[i]; + } + } + isInvalidError = true; + that.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, + InputError.INVALID_ERROR, true, thisIndex); + } + else { + res = value; + isInvalidError = false; + } + if ((that.checkIsAllCN(res) && res.length > this.MAX_CN_LENGTH) || + (!that.checkIsAllCN(res) && res.length > this.MAX_EN_LENGTH)) { + res = that.checkIsAllCN(res) ? + res.substr(0, this.MAX_CN_LENGTH) : res.substr(0, this.MAX_EN_LENGTH); + isLengthError = true; + that.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, + InputError.LENGTH_ERROR, true, thisIndex); + } + else { + isLengthError = false; + } + if (!isLengthError && !isInvalidError) { + that.listNodeDataSource.setMainTitleNameOnEdit(thisIndex, res); + } + }) + .onSubmit((enterKey: EnterKeyType) => { + let that = this; + var thisIndex = findCurrentNodeIndex.call(that, this.item.getNodeCurrentNodeId()); + that.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE, false, thisIndex); + that.listNodeDataSource.setItemVisibilityOnEdit(thisIndex, MenuOperation.COMMIT_NODE); + }) + }.backgroundColor(this.item.getNodeItem().inputText.backgroundColor) + .borderRadius(this.item.getNodeItem().inputText.borderRadius) + .margin({ right: this.item.getNodeItem().inputText.itemRightMargin }) + } + Blank() + } + .layoutWeight(1) + .focusable(true) + + if (this.listNodeDataSource.hasSubtitle(this.item.getCurrentNodeId())) { + Row() { + Text(this.listNodeDataSource.getSubtitle(this.item.getCurrentNodeId())) + .fontSize(this.listNodeDataSource.getSubTitlePara().fontSize) + .fontColor(this.listNodeDataSource.getSubTitleFontColor(this.item.getIsHighLight() || this.item.getIsModify())) + .fontWeight(this.listNodeDataSource.getSubTitlePara().fontWeight) + } + .focusable(true) + .margin({ left: this.listNodeDataSource.getSubTitlePara().margin.left, + right: this.item.getNodeItem().imageCollapse ? + 0 : this.listNodeDataSource.getSubTitlePara().margin.right }) + } + + if (this.item.getNodeItem().imageCollapse) { + Row() { + Image(this.item.getNodeItem().imageCollapse.collapseSource) + .fillColor(this.item.getNodeItem().imageCollapse.isCollapse ? COLOR_IMAGE_ROW : COLOR_IMAGE_EDIT) + .align(Alignment.End) + .objectFit(ImageFit.Contain) + .height(this.item.getNodeItem().imageCollapse.itemHeight) + .width(this.item.getNodeItem().imageCollapse.itemWidth) + .opacity(!this.item.getIsHighLight() ? + this.item.getNodeItem().imageCollapse.opacity : this.item.getNodeItem().imageCollapse.noOpacity) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + let that = this; + that.listNodeDataSource.expandAndCollapseNode(findCurrentNodeIndex.call(that, this.item.getNodeCurrentNodeId())); + this.listNodeDataSource.setCurrentFocusNodeId(this.item.getCurrentNodeId()); + } + event.stopPropagation(); + }) + .focusable(true) + } + .focusable(true) + .height(this.item.getNodeItem().imageCollapse.itemHeight) + .width(this.item.getNodeItem().imageCollapse.itemWidth) + } + } + .focusable(true) + .width('100%') + .gesture( + TapGesture({ count: 2 }) // doubleClick + .onAction((event: GestureEvent) => { + let that = this; + that.listNodeDataSource.expandAndCollapseNode( + findCurrentNodeIndex.call(that, this.item.getNodeCurrentNodeId())); + }) + ) + .height(this.item.getNodeHeight()) + .padding({ left: this.item.getNodeLeftPadding() }) + .bindContextMenu(this.builder, ResponseType.RightClick) + }.focusable(true) + }.focusable(true) + } + .opacity(this.listNodeDataSource.getListItemOpacity(this.item)) + .onHover((isHover: boolean) => { + if (isHover) { + this.item.setNodeColor($r('sys.color.ohos_id_color_hover')) + } else { + this.item.setNodeColor($r('sys.color.ohos_id_color_background_transparent')) + } + }) + .onTouch((event) => { + this.count++; + if(this.count > 1) { + this.count--; + return; + } + + this.listNodeDataSource.setClickIndex(this.index); + let currentId = this.item.getNodeCurrentNodeId(); + + if (event.type === TouchType.Down) { + this.item.setNodeColor($r('sys.color.ohos_id_color_click_effect')); + } + + else if (event.type === TouchType.Up) { + this.item.setNodeColor(COLOR_SELECT); + this.item.fontColor = $r('sys.color.ohos_id_color_text_primary_activated'); + if (this.item.getNodeItem().imageNode != null) { + this.item.getNodeItem().imageNode.setImageSource(InteractionStatus.Selected); + this.listNodeDataSource.setImageSource(this.index, InteractionStatus.Selected); + this.item.imageSource = this.item.getNodeItem().imageNode.source; + } + + this.item.getNodeItem().mainTitleNode.setMainTitleSelected(true) + this.lastIndex = this.index; + + let callbackParam = { currentNodeId: currentId } + this.appEventBus.emit(TreeView.TreeListenType.NODE_CLICK, [callbackParam]); + } + + if (this.listNodeDataSource.getLastIndex() !== -1 && this.index !== this.listNodeDataSource.getLastIndex()) { + this.listNodeDataSource.setPopUpInfo(PopUpType.WARNINGS, InputError.NONE, false, this.listNodeDataSource.getLastIndex()); + this.listNodeDataSource.setItemVisibilityOnEdit(this.listNodeDataSource.getLastIndex(), MenuOperation.COMMIT_NODE); + } + this.count--; + }) + /* backgroundColor when editing and in other states. */ + .backgroundColor((this.item.getNodeItem().mainTitleNode && this.item.getNodeItem().inputText && + this.item.getIsShowInputText()) ? this.item.getNodeItem().inputText.editColor : this.item.getNodeColor()) + .border({ + width: this.item.getNodeBorder().borderWidth, + color: this.item.getNodeBorder().borderColor, + radius: this.item.getNodeBorder().borderRadius + }) + .height(LIST_ITEM_HEIGHT) + .focusable(true) + .onMouse((event: MouseEvent) => { + let that = this; + let thisIndex = findCurrentNodeIndex.call(that, this.item.getNodeCurrentNodeId()); + if (event.button == MouseButton.Right) { + that.listNodeDataSource.handleEvent(Event.MOUSE_BUTTON_RIGHT, + findCurrentNodeIndex.call(that, this.item.getNodeCurrentNodeId())); + this.listTreeViewMenu = this.item.getMenu(); + that.listNodeDataSource.setClickIndex(thisIndex); + clearTimeout(this.item.getNodeItem().mainTitleNode.popUpTimeout); + } + event.stopPropagation(); + }) + .padding({ top: 0, bottom: 0 }) + .bindPopup(this.item.getPopUpInfo().popUpIsShow, { + builder: this.popupForShowTitle(this.item.getPopUpInfo().popUpText, this.item.getPopUpInfo().popUpColor, + this.item.getPopUpInfo().popUpTextColor), + placement: Placement.BottomLeft, + placementOnTop: false, + popupColor: this.item.getPopUpInfo().popUpColor, + autoCancel: true, + enableArrow: this.item.getPopUpInfo().popUpEnableArrow + }) + .onAreaChange((oldValue: Area, newValue: Area) => { + let columnWidthNum = Number(parseInt(newValue.width.toString(), 0)) + this.columnWidth = columnWidthNum + }) + } + .stateStyles({ + focused: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: FLAG_NUMBER, + color: $r('sys.color.ohos_id_color_focused_outline'), + style: BorderStyle.Solid + }) + }, + normal: { + .border({ + radius: $r('sys.float.ohos_id_corner_radius_clicked'), + width: 0 }) + } + }) + } + } +} \ No newline at end of file