diff --git a/interface/composelistitem/BUILD.gn b/interface/composelistitem/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..9de280ab3e1d40ad46db9ae499b29ef836db0058 --- /dev/null +++ b/interface/composelistitem/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_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" +} + +ohos_shared_library("composelistitem") { + sources = [ "composelistitem.cpp" ] + + deps = [ ":composelistitem_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + subsystem_name = "hmos_ext" + part_name = "ui_advanced" + + relative_install_dir = "module/arkui/advanced" +} diff --git a/interface/composelistitem/composelistitem.cpp b/interface/composelistitem/composelistitem.cpp new file mode 100644 index 0000000000000000000000000000000000000000..bf795fc4f35db86bdec86f3d4843bf8950547217 --- /dev/null +++ b/interface/composelistitem/composelistitem.cpp @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_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; + } + } + + +static napi_module composelistitemModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.ComposeListItem", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void composelistitemRegisterModule(void) +{ + napi_module_register(&composelistitemModule); +} \ No newline at end of file diff --git a/interface/composelistitem/composelistitem.js b/interface/composelistitem/composelistitem.js new file mode 100644 index 0000000000000000000000000000000000000000..09de65f085cf0b1eb0453b9be9f99e5e7b6069c6 --- /dev/null +++ b/interface/composelistitem/composelistitem.js @@ -0,0 +1,799 @@ +/* + * 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 LISTITEMCARD_BORDER_HIDDEN = 0; +const TEXT_MAX_LINE = 1; +const LISTITEMCARD_BORDER_SHOWN = 2; +const TEXT_COLUMN_SPACE = 2; +const TEXT_SAFE_MARGIN = 8; +const BADGE_SIZE = 8; +const SMALL_ICON_SIZE = 16; +const SYSTEM_ICON_SIZE = 24; +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"; + +class ContentItemStruct extends ViewPU { + constructor(e, t, o, i = -1) { + super(e, o, i); + this.iconStyle = null; + this.icon = null; + this.title = null; + this.subtitle = null; + this.description = null; + this.iconSizeMap = 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]]); + this.itemHeight = ItemHeight.FIRST_HEIGHT; + 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.title && (this.title = e.title); + void 0 !== e.subtitle && (this.subtitle = e.subtitle); + void 0 !== e.description && (this.description = e.description); + void 0 !== e.iconSizeMap && (this.iconSizeMap = e.iconSizeMap); + void 0 !== e.itemHeight && (this.itemHeight = e.itemHeight); + void 0 !== e.itemRowSpace && (this.itemRowSpace = e.itemRowSpace) + } + + updateStateVars(e) { + } + + purgeVariableDependenciesOnElmtId(e) { + } + + aboutToBeDeleted() { + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + aboutToAppear() { + null == this.subtitle && null == this.description ? null == this.icon ? this.itemHeight = ItemHeight.FIRST_HEIGHT : this.itemHeight = this.iconStyle <= IconType.HEAD_SCULPTURE ? ItemHeight.SECOND_HEIGHT : ItemHeight.THIRD_HEIGHT : null == this.description ? null == this.icon || null != this.icon && this.iconStyle <= IconType.SYSTEM_ICON ? this.itemHeight = ItemHeight.THIRD_HEIGHT : this.itemHeight = ItemHeight.FOURTH_HEIGHT : this.itemHeight = ItemHeight.FIFTH_HEIGHT; + null == this.icon && null == this.iconStyle && (this.itemRowSpace = 0); + this.iconSizeMap.get(this.iconStyle) >= this.itemHeight && (this.itemHeight = this.iconSizeMap.get(this.iconStyle) + 32) + } + + 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(this.iconSizeMap.get(this.iconStyle)); + Image.height(this.iconSizeMap.get(this.iconStyle)); + Image.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0); + 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: this.iconSizeMap.get(this.iconStyle), + minHeight: 0, + maxHeight: this.iconSizeMap.get(this.iconStyle) + }); + Image.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + Image.focusable(!0); + 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: 2 }); + 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.title); + 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.focusable(!0); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + null != this.subtitle ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.subtitle); + 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); + 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); + 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 }); + Row.height(this.itemHeight); + 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, i = -1) { + super(e, o, i); + 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.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) + } + + aboutToBeDeleted() { + this.__switchState.aboutToBeDeleted(); + this.__radioState.aboutToBeDeleted(); + this.__checkBoxState.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) + } + + 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(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Button.createWithLabel(e); + 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 }); + o || Button.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Button.pop() + } + + createIcon(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Row.create(); + Row.height(48); + Row.width(48); + Row.justifyContent(FlexAlign.Center); + Row.onClick(e.action); + o || Row.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: "" + }); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Row.pop() + } + + createImage(e, t = null) { + this.observeComponentCreation(((t, o) => { + ViewStackProcessor.StartGetAccessRecordingFor(t); + Image.create(e); + Image.height(48); + Image.width(48); + 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); + o || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop() + } + + createArrow(e, t = null) { + 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.onClick(e.action); + o || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })) + } + + 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); + 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); + 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); + 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 + })); + o || Toggle.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Toggle.pop(); + Row.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.createText.bind(this)(this.text); + this.createArrow.bind(this)(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, i = -1) { + super(e, o, i); + 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.isActive = !1; + 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.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) + } + + aboutToBeDeleted() { + this.__contentItem.aboutToBeDeleted(); + this.__operateItem.aboutToBeDeleted(); + this.__frontColor.aboutToBeDeleted(); + this.__borderSize.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) + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.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 || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Flex.create({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }); + Flex.focusable(!0); + Flex.border({ + width: this.borderSize, + color: { + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_focused_outline"], + bundleName: "", + moduleName: "" + } + }); + Flex.borderRadius({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_corner_radius_default_m"], + bundleName: "", + moduleName: "" + }); + Flex.backgroundColor(this.frontColor); + Flex.onFocus((() => { + this.borderSize = 2 + })); + Flex.onBlur((() => { + this.borderSize = 0 + })); + Flex.onHover((e => { + this.frontColor = e ? "#0d000000" : this.isActive ? "#1a0a59f7" : Color.Transparent.toString() + })); + Flex.onTouch((e => { + e.type == TouchType.Down && (this.frontColor = "#1a000000"); + e.type == TouchType.Up && (this.frontColor = this.isActive ? "#1a0a59f7" : Color.Transparent.toString()) + })); + Flex.onClick((() => { + 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, { + title: 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.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, + title: "string" == typeof this.contentItem.primaryText ? this.contentItem.primaryText : null, + subtitle: "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); + 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 + }, void 0, e)) : this.updateStateVarsOfChildByElmtId(e, {}); + ViewStackProcessor.StopGetAccessRecording() + })) + })) : If.branchId(1); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Flex.pop(); + Column.pop() + } + + rerender() { + this.updateDirtyElements() + } +} + +export default { IconType, ComposeListItem }; \ No newline at end of file diff --git a/interface/swiperefresher/BUILD.gn b/interface/swiperefresher/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..f245f8f8018d8ca6194390d7e3f92b412f94f3de --- /dev/null +++ b/interface/swiperefresher/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_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", + ] + + subsystem_name = "hmos_ext" + part_name = "ui_advanced" + + relative_install_dir = "module/arkui/advanced" +} diff --git a/interface/swiperefresher/swiperefresher.cpp b/interface/swiperefresher/swiperefresher.cpp new file mode 100644 index 0000000000000000000000000000000000000000..8d5726b4027783ed945ad90afe5ad7532225990b --- /dev/null +++ b/interface/swiperefresher/swiperefresher.cpp @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2023-2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_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; + } + } + + +static napi_module swiperefresherModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "arkui.advanced.SwipeRefresher", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void swiperefresherRegisterModule(void) +{ + napi_module_register(&swiperefresherModule); +} \ No newline at end of file diff --git a/interface/swiperefresher/swiperefresher.js b/interface/swiperefresher/swiperefresher.js new file mode 100644 index 0000000000000000000000000000000000000000..d34c05fcf0740e25b2e9d71122a0218b53b3ba24 --- /dev/null +++ b/interface/swiperefresher/swiperefresher.js @@ -0,0 +1,119 @@ +/* + * 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 }); + Flex.margin({ top: 16, bottom: 16 }); + 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: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Flex.pop() + } + + rerender() { + this.updateDirtyElements() + } +} \ No newline at end of file diff --git a/source/ComposeListItem/ComposeListItem.ets b/source/ComposeListItem/ComposeListItem.ets new file mode 100644 index 0000000000000000000000000000000000000000..0c6bb53403854c05ca4426462f5528e24de52659 --- /dev/null +++ b/source/ComposeListItem/ComposeListItem.ets @@ -0,0 +1,488 @@ +/* + * 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; +} + +const LISTITEMCARD_BORDER_HIDDEN = 0; +const TEXT_MAX_LINE = 1; +const LISTITEMCARD_BORDER_SHOWN = 2; +const TEXT_COLUMN_SPACE = 2; +const TEXT_SAFE_MARGIN = 8; +const BADGE_SIZE = 8; +const SMALL_ICON_SIZE = 16; +const SYSTEM_ICON_SIZE = 24; +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'; + +@Component +struct ContentItemStruct { + iconStyle: IconType = null + icon: Resource = null + title: string = null + subtitle: string = null + description: string = null + private iconSizeMap: 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] + ]) + private itemHeight: number = ItemHeight.FIRST_HEIGHT + private itemRowSpace: number = NORMAL_ITEM_ROW_SPACE + + aboutToAppear() { + if (this.subtitle == null && this.description == null) { + if (this.icon == null) { + this.itemHeight = ItemHeight.FIRST_HEIGHT + } + else { + this.itemHeight = this.iconStyle <= IconType.HEAD_SCULPTURE ? ItemHeight.SECOND_HEIGHT : ItemHeight.THIRD_HEIGHT + } + } + else if (this.description == null) { + if (this.icon == null || (this.icon != null && this.iconStyle <= IconType.SYSTEM_ICON)) { + this.itemHeight = ItemHeight.THIRD_HEIGHT + } + else { + this.itemHeight = ItemHeight.FOURTH_HEIGHT + } + } + else { + this.itemHeight = ItemHeight.FIFTH_HEIGHT + } + + if (this.icon == null && this.iconStyle == null) { + this.itemRowSpace = SPECIAL_ITEM_ROW_SPACE + } + + if (this.iconSizeMap.get(this.iconStyle) >= this.itemHeight) { + this.itemHeight = this.iconSizeMap.get(this.iconStyle) + SAFE_LIST_PADDING; + } + } + + @Builder + createIcon() { + if (this.icon != null && this.iconStyle != null) { + if (this.iconStyle <= IconType.PREVIEW) { + Image(this.icon) + .objectFit(ImageFit.Contain) + .width(this.iconSizeMap.get(this.iconStyle)) + .height(this.iconSizeMap.get(this.iconStyle)) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + .focusable(true) + } + else { + Image(this.icon) + .objectFit(ImageFit.Contain) + .constraintSize({ + minWidth: SPECIAL_ICON_SIZE, + maxWidth: this.iconSizeMap.get(this.iconStyle), + minHeight: SPECIAL_ICON_SIZE, + maxHeight: this.iconSizeMap.get(this.iconStyle) + }) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + .focusable(true) + } + } + } + + @Builder + createText() { + Column({ space: TEXT_COLUMN_SPACE }) { + Text(this.title) + .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 }) + .focusable(true) + if (this.subtitle != null) { + Text(this.subtitle) + .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) + } + 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) + } + } + .margin({ + top: TEXT_SAFE_MARGIN, + bottom: TEXT_SAFE_MARGIN + }) + .alignItems(HorizontalAlign.Start) + } + + build() { + Row({ space: this.itemRowSpace }) { + this.createIcon() + this.createText() + } + .height(this.itemHeight) + } +} + +@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 + 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(text) + .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 + }) + } + + @Builder + createIcon(icon: OperateIcon) { + Row() { + Image(icon.value) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ICONLIKE_SIZE) + .focusable(true) + .fillColor($r('sys.color.ohos_id_color_primary')) + } + .height(OPERATEITEM_ICON_CLICKABLE_SIZE) + .width(OPERATEITEM_ICON_CLICKABLE_SIZE) + .justifyContent(FlexAlign.Center) + .onClick(icon.action) + } + + @Builder + createImage(image: Resource) { + Image(image) + .height(OPERATEITEM_IMAGE_SIZE) + .width(OPERATEITEM_IMAGE_SIZE) + } + + @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) + } + + @Builder + createArrow(icon: OperateIcon) { + Image(icon.value) + .height(OPERATEITEM_ICONLIKE_SIZE) + .width(OPERATEITEM_ARROW_WIDTH) + .focusable(true) + .fillColor($r('sys.color.ohos_id_color_fourth')) + .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) + } + + @Builder + createCheckBox(checkBox: OperateCheck) { + Checkbox() + .select(this.checkBoxState) + .onChange(checkBox.onChange) + .height(OPERATEITEM_ICONLIKE_SIZE) + .height(OPERATEITEM_ICONLIKE_SIZE) + } + + @Builder + createSwitch(toggleParams: OperateCheck) { + Row() { + Toggle({ type: ToggleType.Switch, isOn: this.switchState }) + .onChange(toggleParams.onChange) + .onClick(() => { + this.switchState = !this.switchState + }) + } + .height(OPERATEITEM_ICON_CLICKABLE_SIZE) + .width(OPERATEITEM_ICON_CLICKABLE_SIZE) + .justifyContent(FlexAlign.Center) + } + + 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.createText(this.text) + this.createArrow(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) + } + } + } + } +} + +/** + * Declare type OperateIcon + * @typedef OperationOption + * @syscap SystemCapability.ArkUI.ArkUI.Full + * @since 10 + */ +export declare type OperateIcon = { + /** + * The content of text or the address of icon. + * @type { ResourceStr }. + * @since 10 + */ + value: ResourceStr, + + /** + * Callback function when operate the icon. + * @type { () => void }. + * @since 10 + */ + action?: () => void +} + +export type OperateButton = { + /** + * The text on the button. + * @type { ResourceStr }. + * @since 10 + */ + text?: string +} + +/** + * Declare type OperateCheck + * @typedef OperationOption + * @syscap SystemCapability.ArkUI.ArkUI.Full + * @since 10 + */ +export declare type OperateCheck = { + /** + * Whether is checked on default. + * @type { ResourceStr }. + * @since 10 + */ + isCheck?: boolean, + + /** + * Callback function when operate the checkbox/switch/radio. + * @type { () => void }. + * @since 10 + */ + onChange?: (value: boolean) => void +} + +@Component +export struct ComposeListItem { + @Prop contentItem: ContentItem = null; + @Prop operateItem: OperateItem = null; + @State frontColor: string = Color.Transparent.toString() + @State borderSize: number = 0; + private isActive: boolean = false + + build() { + Column() { + Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + if (this.contentItem == null) { + ContentItemStruct({ + title: null + }) + } + if (this.contentItem != null) { + ContentItemStruct({ + icon: typeof this.contentItem.icon === 'string' ? null : this.contentItem.icon, + iconStyle: this.contentItem.iconStyle, + title: typeof this.contentItem.primaryText === 'string' ? this.contentItem.primaryText : null, + subtitle: 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 + }) + } + } + .focusable(true) + .border({ + width: this.borderSize, + color: $r('sys.color.ohos_id_color_focused_outline') + }) + .borderRadius($r('sys.float.ohos_id_corner_radius_default_m')) + .backgroundColor(this.frontColor) + .onFocus(() => { + this.borderSize = LISTITEMCARD_BORDER_SHOWN + }) + .onBlur(() => { + this.borderSize = LISTITEMCARD_BORDER_HIDDEN + }) + .onHover((isHover: boolean) => { + this.frontColor = isHover ? HOVERING_COLOR : (this.isActive ? ACTIVED_COLOR : Color.Transparent.toString()) + }) + .onTouch((event: TouchEvent) => { + if (event.type == TouchType.Down) { + this.frontColor = TOUCH_DOWN_COLOR + } + if (event.type == TouchType.Up) { + this.frontColor = this.isActive ? ACTIVED_COLOR : Color.Transparent.toString() + } + }) + .onClick(() => { + this.isActive = !this.isActive + this.frontColor = this.isActive ? ACTIVED_COLOR : Color.Transparent.toString() + }) + } + .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/source/Swiperefresher/SwipeRefresher.ets b/source/Swiperefresher/SwipeRefresher.ets new file mode 100644 index 0000000000000000000000000000000000000000..141a8cf802bb8b203d2d57228072aa12466731e1 --- /dev/null +++ b/source/Swiperefresher/SwipeRefresher.ets @@ -0,0 +1,47 @@ +/* + * 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')) + } + .margin({ + top: DEFAULT_MARGIN, + bottom: DEFAULT_MARGIN + }) + } +} \ No newline at end of file