From 51b54854c6acc4be39091b261c23acb523c4c8f2 Mon Sep 17 00:00:00 2001 From: youzhi92 Date: Mon, 11 Nov 2024 11:30:48 +0000 Subject: [PATCH] refactor: Chip component Signed-off-by: youzhi92 Change-Id: Ib4c8cfc1c87aef553a1ffcfecbf10bd2177d6de6 --- .../chip/interfaces/BUILD.gn | 38 +- .../chip/interfaces/chip.cpp | 29 +- .../chip/interfaces/chip_v14.js | 1500 +++++++++++++++++ .../chip/source/chip_v14.ets | 976 +++++++++++ 4 files changed, 2535 insertions(+), 8 deletions(-) create mode 100644 advanced_ui_component/chip/interfaces/chip_v14.js create mode 100644 advanced_ui_component/chip/source/chip_v14.ets diff --git a/advanced_ui_component/chip/interfaces/BUILD.gn b/advanced_ui_component/chip/interfaces/BUILD.gn index e74497abe92..c30f03bb1fc 100755 --- a/advanced_ui_component/chip/interfaces/BUILD.gn +++ b/advanced_ui_component/chip/interfaces/BUILD.gn @@ -14,6 +14,7 @@ import("//build/config/components/ets_frontend/es2abc_config.gni") import("//build/ohos.gni") import("//foundation/arkui/ace_engine/ace_config.gni") +import("//foundation/arkui/ace_engine/adapter/ohos/build/config.gni") import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni") import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni") @@ -25,24 +26,57 @@ es2abc_gen_abc("gen_chip_abc") { extra_args = [ "--module" ] } +es2abc_gen_abc("gen_chip_v14_abc") { + src_js = rebase_path("chip_v14.js") + dst_file = rebase_path(target_out_dir + "/chip_v14.abc") + in_puts = [ "chip_v14.js" ] + out_puts = [ target_out_dir + "/chip_v14.abc" ] + extra_args = [ "--module" ] +} + gen_js_obj("chip_abc") { input = get_label_info(":gen_chip_abc", "target_out_dir") + "/chip.abc" output = target_out_dir + "/chip_abc.o" dep = ":gen_chip_abc" } +gen_js_obj("chip_v14_abc") { + input = + get_label_info(":gen_chip_v14_abc", "target_out_dir") + "/chip_v14.abc" + output = target_out_dir + "/chip_v14_abc.o" + dep = ":gen_chip_v14_abc" +} + gen_obj("chip_abc_preview") { input = get_label_info(":gen_chip_abc", "target_out_dir") + "/chip.abc" output = target_out_dir + "/chip_abc.c" snapshot_dep = [ ":gen_chip_abc" ] } +gen_obj("chip_v14_abc_preview") { + input = + get_label_info(":gen_chip_v14_abc", "target_out_dir") + "/chip_v14.abc" + output = target_out_dir + "/chip_v14_abc.c" + snapshot_dep = [ ":gen_chip_v14_abc" ] +} + ohos_shared_library("chip") { + configs = [ "$ace_root/interfaces/napi/kits:ace_napi_config" ] + sources = [ "chip.cpp" ] + + deps = [ libace_target ] + if (use_mingw_win || use_mac || use_linux) { - deps = [ ":gen_obj_src_chip_abc_preview" ] + deps += [ + ":gen_obj_src_chip_abc_preview", + ":gen_obj_src_chip_v14_abc_preview", + ] } else { - deps = [ ":chip_abc" ] + deps += [ + ":chip_abc", + ":chip_v14_abc", + ] } external_deps = [ diff --git a/advanced_ui_component/chip/interfaces/chip.cpp b/advanced_ui_component/chip/interfaces/chip.cpp index 5f81e002915..6ed864ba472 100755 --- a/advanced_ui_component/chip/interfaces/chip.cpp +++ b/advanced_ui_component/chip/interfaces/chip.cpp @@ -13,20 +13,35 @@ * limitations under the License. */ +#include "interfaces/napi/kits/utils/napi_utils.h" #include "napi/native_node_api.h" extern const char _binary_chip_abc_start[]; extern const char _binary_chip_abc_end[]; +extern const char _binary_chip_v14_abc_start[]; +extern const char _binary_chip_v14_abc_end[]; + +namespace OHOS::Ace::Napi { + // Napi get abc code function extern "C" __attribute__((visibility("default"))) void NAPI_arkui_advanced_Chip_GetABCCode( const char** buf, int* buflen) { - if (buf != nullptr) { - *buf = _binary_chip_abc_start; - } - if (buflen != nullptr) { - *buflen = _binary_chip_abc_end - _binary_chip_abc_start; + if (Container::GreatOrEqualAPITargetVersion(PlatformVersion::VERSION_FOURTEEN)) { + if (buf != nullptr) { + *buf = _binary_chip_v14_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_chip_v14_abc_end - _binary_chip_v14_abc_start; + } + } else { + if (buf != nullptr) { + *buf = _binary_chip_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_chip_abc_end - _binary_chip_abc_start; + } } } @@ -44,4 +59,6 @@ static napi_module ChipsModule = { extern "C" __attribute__((constructor)) void ChipsRegisterModule(void) { napi_module_register(&ChipsModule); -} \ No newline at end of file +} + +} // namespace OHOS::Ace::Napi \ No newline at end of file diff --git a/advanced_ui_component/chip/interfaces/chip_v14.js b/advanced_ui_component/chip/interfaces/chip_v14.js new file mode 100644 index 00000000000..d83ec29748e --- /dev/null +++ b/advanced_ui_component/chip/interfaces/chip_v14.js @@ -0,0 +1,1500 @@ +/* + * Copyright (c) 2024 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. + */ + +if (!('finalizeConstruction' in ViewPU.prototype)) { + Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {}); +} +const ColorMetrics = requireNapi('arkui.node').ColorMetrics; +const LengthMetrics = requireNapi('arkui.node').LengthMetrics; +const KeyCode = requireNapi('multimodalInput.keyCode').KeyCode; +const mediaquery = requireNapi('mediaquery'); +export var ChipSize; +(function (ChipSize) { + ChipSize['NORMAL'] = 'NORMAL'; + ChipSize['SMALL'] = 'SMALL'; +})(ChipSize || (ChipSize = {})); +var a1; +(function (e5) { + e5['SM'] = 'SM'; + e5['MD'] = 'MD'; + e5['LG'] = 'LG'; +})(a1 || (a1 = {})); +export var AccessibilitySelectedType; +(function (AccessibilitySelectedType) { + AccessibilitySelectedType[(AccessibilitySelectedType['CLICKED'] = 0)] = + 'CLICKED'; + AccessibilitySelectedType[(AccessibilitySelectedType['CHECKED'] = 1)] = + 'CHECKED'; + AccessibilitySelectedType[(AccessibilitySelectedType['SELECTED'] = 2)] = + 'SELECTED'; +})(AccessibilitySelectedType || (AccessibilitySelectedType = {})); +export const b1 = { + prefixIcon: { + size: { width: 16, height: 16 }, + fillColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_secondary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + activatedFillColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_contrary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + }, + label: { + e1: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button2'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + f1: { + id: -1, + type: 10002, + params: ['sys.float.ohos_id_text_size_button2'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + fontColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + activatedFontColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_contrary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + fontFamily: 'HarmonyOS Sans', + g1: { + left: 6, + right: 6, + top: 0, + bottom: 0, + }, + h1: { + left: 4, + right: 4, + top: 0, + bottom: 0, + }, + defaultFontSize: 14, + i1: { + start: LengthMetrics.vp(6), + end: LengthMetrics.vp(6), + top: LengthMetrics.vp(0), + bottom: LengthMetrics.vp(0), + }, + j1: { + start: LengthMetrics.vp(4), + end: LengthMetrics.vp(4), + top: LengthMetrics.vp(0), + bottom: LengthMetrics.vp(0), + }, + }, + suffixIcon: { + size: { width: 16, height: 16 }, + fillColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_secondary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + activatedFillColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_contrary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + l1: { + id: -1, + type: 20000, + params: ['sys.media.ohos_ic_public_cancel', 16, 16], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + focusable: false, + }, + m1: { + n1: [ + { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_secondary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + ], + activatedFontColor: [ + { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_text_primary_contrary'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + ], + fontSize: 16, + o1: -1, + }, + q1: { + s1: 1.75, + t1: 12, + u1: 36, + v1: 28, + enabled: true, + activated: false, + backgroundColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_button_normal'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + activatedBackgroundColor: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_emphasize'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + w1: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_focused_outline'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + z1: 2, + a2: { + id: -1, + type: 10002, + params: ['sys.float.chip_border_radius_normal'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + b2: { + id: -1, + type: 10002, + params: ['sys.float.chip_border_radius_small'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + borderWidth: 2, + c2: { + start: LengthMetrics.vp(16), + end: LengthMetrics.vp(16), + top: LengthMetrics.vp(4), + bottom: LengthMetrics.vp(4), + }, + d2: { + start: LengthMetrics.vp(12), + end: LengthMetrics.vp(12), + top: LengthMetrics.vp(4), + bottom: LengthMetrics.vp(4), + }, + e2: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_hover'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + f2: { + id: -1, + type: 10001, + params: ['sys.color.ohos_id_color_click_effect'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }, + opacity: { normal: 1, hover: 0.95, pressed: 0.9 }, + g2: { + h2: 128, + i2: 156, + j2: 280, + l2: 400, + }, + }, +}; +const o = 10003; +const t = 10002; +const u = 10007; +export function Chip(options, parent = null) { + const d5 = options; + { + (parent ? parent : this).observeComponentCreation2( + (elmtId, isInitialRender, options = d5) => { + if (isInitialRender) { + let componentCall = new d1( + parent ? parent : this, + { + chipSize: options.size, + prefixIcon: options.prefixIcon, + prefixSymbol: options.prefixSymbol, + label: options.label, + suffixIcon: options.suffixIcon, + suffixSymbol: options.suffixSymbol, + suffixSymbolOptions: options.suffixSymbolOptions, + allowClose: options.allowClose, + closeOptions: options.closeOptions, + chipEnabled: options.enabled, + chipActivated: options.activated, + chipNodeBackgroundColor: options.backgroundColor, + chipNodeActivatedBackgroundColor: + options.activatedBackgroundColor, + chipNodeRadius: options.borderRadius, + chipDirection: options.direction, + chipAccessibilitySelectedType: options.accessibilitySelectedType, + chipAccessibilityDescription: options.accessibilityDescription, + chipAccessibilityLevel: options.accessibilityLevel, + onClose: options.onClose, + onClicked: options.onClicked, + }, + undefined, + elmtId, + () => {}, + { + page: 'advancedComponents/src/main/ets/components/ChipV2.ets', + line: 289, + m2: 3, + } + ); + ViewPU.create(componentCall); + let paramsLambda = () => { + return { + chipSize: options.size, + prefixIcon: options.prefixIcon, + prefixSymbol: options.prefixSymbol, + label: options.label, + suffixIcon: options.suffixIcon, + suffixSymbol: options.suffixSymbol, + suffixSymbolOptions: options.suffixSymbolOptions, + allowClose: options.allowClose, + closeOptions: options.closeOptions, + chipEnabled: options.enabled, + chipActivated: options.activated, + chipNodeBackgroundColor: options.backgroundColor, + chipNodeActivatedBackgroundColor: + options.activatedBackgroundColor, + chipNodeRadius: options.borderRadius, + chipDirection: options.direction, + chipAccessibilitySelectedType: options.accessibilitySelectedType, + chipAccessibilityDescription: options.accessibilityDescription, + chipAccessibilityLevel: options.accessibilityLevel, + onClose: options.onClose, + onClicked: options.onClicked, + }; + }; + componentCall.paramsGenerator_ = paramsLambda; + } else { + (parent ? parent : this).updateStateVarsOfChildByElmtId(elmtId, { + chipSize: options.size, + prefixIcon: options.prefixIcon, + prefixSymbol: options.prefixSymbol, + label: options.label, + suffixIcon: options.suffixIcon, + suffixSymbol: options.suffixSymbol, + suffixSymbolOptions: options.suffixSymbolOptions, + allowClose: options.allowClose, + closeOptions: options.closeOptions, + chipEnabled: options.enabled, + chipActivated: options.activated, + chipNodeBackgroundColor: options.backgroundColor, + chipNodeActivatedBackgroundColor: options.activatedBackgroundColor, + chipNodeRadius: options.borderRadius, + chipDirection: options.direction, + chipAccessibilitySelectedType: options.accessibilitySelectedType, + chipAccessibilityDescription: options.accessibilityDescription, + chipAccessibilityLevel: options.accessibilityLevel, + }); + } + }, + { name: 'ChipComponent' } + ); + } +} +export class d1 extends ViewPU { + constructor( + parent, + params, + __localStorage, + elmtId = -1, + paramsLambda = undefined, + extraInfo + ) { + super(parent, __localStorage, elmtId, extraInfo); + if (typeof paramsLambda === 'function') { + this.paramsGenerator_ = paramsLambda; + } + this.theme = b1; + this.n2 = new SynchedPropertyObjectOneWayPU( + params.chipSize, + this, + 'chipSize' + ); + this.o2 = new SynchedPropertySimpleOneWayPU( + params.allowClose, + this, + 'allowClose' + ); + this.q2 = new SynchedPropertyObjectOneWayPU( + params.closeOptions, + this, + 'closeOptions' + ); + this.s2 = new SynchedPropertySimpleOneWayPU( + params.chipDirection, + this, + 'chipDirection' + ); + this.t2 = new SynchedPropertyObjectOneWayPU( + params.prefixIcon, + this, + 'prefixIcon' + ); + this.u2 = new SynchedPropertyObjectOneWayPU( + params.prefixSymbol, + this, + 'prefixSymbol' + ); + this.v2 = new SynchedPropertyObjectOneWayPU(params.label, this, 'label'); + this.w2 = new SynchedPropertyObjectOneWayPU( + params.suffixIcon, + this, + 'suffixIcon' + ); + this.z2 = new SynchedPropertyObjectOneWayPU( + params.suffixSymbol, + this, + 'suffixSymbol' + ); + this.a3 = new SynchedPropertyObjectOneWayPU( + params.suffixSymbolOptions, + this, + 'suffixSymbolOptions' + ); + this.b3 = new SynchedPropertyObjectOneWayPU( + params.chipNodeBackgroundColor, + this, + 'chipNodeBackgroundColor' + ); + this.c3 = new SynchedPropertyObjectOneWayPU( + params.chipNodeActivatedBackgroundColor, + this, + 'chipNodeActivatedBackgroundColor' + ); + this.d3 = new SynchedPropertyObjectOneWayPU( + params.chipNodeRadius, + this, + 'chipNodeRadius' + ); + this.e3 = new SynchedPropertySimpleOneWayPU( + params.chipEnabled, + this, + 'chipEnabled' + ); + this.f3 = new SynchedPropertySimpleOneWayPU( + params.chipActivated, + this, + 'chipActivated' + ); + this.g3 = new SynchedPropertySimpleOneWayPU( + params.chipAccessibilitySelectedType, + this, + 'chipAccessibilitySelectedType' + ); + this.h3 = new SynchedPropertyObjectOneWayPU( + params.chipAccessibilityDescription, + this, + 'chipAccessibilityDescription' + ); + this.i3 = new SynchedPropertySimpleOneWayPU( + params.chipAccessibilityLevel, + this, + 'chipAccessibilityLevel' + ); + this.w4 = new ObservedPropertySimplePU(true, this, 'isChipExist'); + this.l3 = new ObservedPropertyObjectPU({ x: 1, y: 1 }, this, 'chipScale'); + this.m3 = new ObservedPropertySimplePU(1, this, 'chipOpacity'); + this.x4 = new ObservedPropertySimplePU(0, this, 'suffixSymbolHeight'); + this.z3 = new ObservedPropertySimplePU(0, this, 'suffixSymbolWidth'); + this.y4 = new ObservedPropertySimplePU(a1.SM, this, 'breakPoint'); + this.w3 = new ObservedPropertySimplePU(1, this, 'fontSizeScale'); + this.onClose = undefined; + this.onClicked = undefined; + this.smListener = mediaquery.matchMediaSync( + '(0vp { + this.fontSizeScale = configuration.fontSizeScale ?? 1; + }, + onMemoryLevel() {}, + }; + this.setInitiallyProvidedValue(params); + this.finalizeConstruction(); + } + setInitiallyProvidedValue(params) { + if (params.theme !== undefined) { + this.theme = params.theme; + } + if (params.chipSize === undefined) { + this.n2.set(ChipSize.NORMAL); + } + if (params.chipDirection === undefined) { + this.s2.set(Direction.Auto); + } + if (params.chipEnabled === undefined) { + this.e3.set(true); + } + if (params.isChipExist !== undefined) { + this.isChipExist = params.isChipExist; + } + if (params.chipScale !== undefined) { + this.chipScale = params.chipScale; + } + if (params.chipOpacity !== undefined) { + this.chipOpacity = params.chipOpacity; + } + if (params.suffixSymbolHeight !== undefined) { + this.suffixSymbolHeight = params.suffixSymbolHeight; + } + if (params.suffixSymbolWidth !== undefined) { + this.suffixSymbolWidth = params.suffixSymbolWidth; + } + if (params.breakPoint !== undefined) { + this.breakPoint = params.breakPoint; + } + if (params.fontSizeScale !== undefined) { + this.fontSizeScale = params.fontSizeScale; + } + if (params.onClose !== undefined) { + this.onClose = params.onClose; + } + if (params.onClicked !== undefined) { + this.onClicked = params.onClicked; + } + if (params.smListener !== undefined) { + this.smListener = params.smListener; + } + if (params.mdListener !== undefined) { + this.mdListener = params.mdListener; + } + if (params.lgListener !== undefined) { + this.lgListener = params.lgListener; + } + if (params.symbolEffect !== undefined) { + this.symbolEffect = params.symbolEffect; + } + if (params.environmentCallbackID !== undefined) { + this.environmentCallbackID = params.environmentCallbackID; + } + if (params.environmentCallback !== undefined) { + this.environmentCallback = params.environmentCallback; + } + } + updateStateVars(params) { + this.n2.reset(params.chipSize); + this.o2.reset(params.allowClose); + this.q2.reset(params.closeOptions); + this.s2.reset(params.chipDirection); + this.t2.reset(params.prefixIcon); + this.u2.reset(params.prefixSymbol); + this.v2.reset(params.label); + this.w2.reset(params.suffixIcon); + this.z2.reset(params.suffixSymbol); + this.a3.reset(params.suffixSymbolOptions); + this.b3.reset(params.chipNodeBackgroundColor); + this.c3.reset(params.chipNodeActivatedBackgroundColor); + this.d3.reset(params.chipNodeRadius); + this.e3.reset(params.chipEnabled); + this.f3.reset(params.chipActivated); + this.g3.reset(params.chipAccessibilitySelectedType); + this.h3.reset(params.chipAccessibilityDescription); + this.i3.reset(params.chipAccessibilityLevel); + } + purgeVariableDependenciesOnElmtId(rmElmtId) { + this.n2.purgeDependencyOnElmtId(rmElmtId); + this.o2.purgeDependencyOnElmtId(rmElmtId); + this.q2.purgeDependencyOnElmtId(rmElmtId); + this.s2.purgeDependencyOnElmtId(rmElmtId); + this.t2.purgeDependencyOnElmtId(rmElmtId); + this.u2.purgeDependencyOnElmtId(rmElmtId); + this.v2.purgeDependencyOnElmtId(rmElmtId); + this.w2.purgeDependencyOnElmtId(rmElmtId); + this.z2.purgeDependencyOnElmtId(rmElmtId); + this.a3.purgeDependencyOnElmtId(rmElmtId); + this.b3.purgeDependencyOnElmtId(rmElmtId); + this.c3.purgeDependencyOnElmtId(rmElmtId); + this.d3.purgeDependencyOnElmtId(rmElmtId); + this.e3.purgeDependencyOnElmtId(rmElmtId); + this.f3.purgeDependencyOnElmtId(rmElmtId); + this.g3.purgeDependencyOnElmtId(rmElmtId); + this.h3.purgeDependencyOnElmtId(rmElmtId); + this.i3.purgeDependencyOnElmtId(rmElmtId); + this.w4.purgeDependencyOnElmtId(rmElmtId); + this.l3.purgeDependencyOnElmtId(rmElmtId); + this.m3.purgeDependencyOnElmtId(rmElmtId); + this.x4.purgeDependencyOnElmtId(rmElmtId); + this.z3.purgeDependencyOnElmtId(rmElmtId); + this.y4.purgeDependencyOnElmtId(rmElmtId); + this.w3.purgeDependencyOnElmtId(rmElmtId); + } + aboutToBeDeleted() { + this.n2.aboutToBeDeleted(); + this.o2.aboutToBeDeleted(); + this.q2.aboutToBeDeleted(); + this.s2.aboutToBeDeleted(); + this.t2.aboutToBeDeleted(); + this.u2.aboutToBeDeleted(); + this.v2.aboutToBeDeleted(); + this.w2.aboutToBeDeleted(); + this.z2.aboutToBeDeleted(); + this.a3.aboutToBeDeleted(); + this.b3.aboutToBeDeleted(); + this.c3.aboutToBeDeleted(); + this.d3.aboutToBeDeleted(); + this.e3.aboutToBeDeleted(); + this.f3.aboutToBeDeleted(); + this.g3.aboutToBeDeleted(); + this.h3.aboutToBeDeleted(); + this.i3.aboutToBeDeleted(); + this.w4.aboutToBeDeleted(); + this.l3.aboutToBeDeleted(); + this.m3.aboutToBeDeleted(); + this.x4.aboutToBeDeleted(); + this.z3.aboutToBeDeleted(); + this.y4.aboutToBeDeleted(); + this.w3.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + get chipSize() { + return this.n2.get(); + } + set chipSize(newValue) { + this.n2.set(newValue); + } + get allowClose() { + return this.o2.get(); + } + set allowClose(newValue) { + this.o2.set(newValue); + } + get closeOptions() { + return this.q2.get(); + } + set closeOptions(newValue) { + this.q2.set(newValue); + } + get chipDirection() { + return this.s2.get(); + } + set chipDirection(newValue) { + this.s2.set(newValue); + } + get prefixIcon() { + return this.t2.get(); + } + set prefixIcon(newValue) { + this.t2.set(newValue); + } + get prefixSymbol() { + return this.u2.get(); + } + set prefixSymbol(newValue) { + this.u2.set(newValue); + } + get label() { + return this.v2.get(); + } + set label(newValue) { + this.v2.set(newValue); + } + get suffixIcon() { + return this.w2.get(); + } + set suffixIcon(newValue) { + this.w2.set(newValue); + } + get suffixSymbol() { + return this.z2.get(); + } + set suffixSymbol(newValue) { + this.z2.set(newValue); + } + get suffixSymbolOptions() { + return this.a3.get(); + } + set suffixSymbolOptions(newValue) { + this.a3.set(newValue); + } + get chipNodeBackgroundColor() { + return this.b3.get(); + } + set chipNodeBackgroundColor(newValue) { + this.b3.set(newValue); + } + get chipNodeActivatedBackgroundColor() { + return this.c3.get(); + } + set chipNodeActivatedBackgroundColor(newValue) { + this.c3.set(newValue); + } + get chipNodeRadius() { + return this.d3.get(); + } + set chipNodeRadius(newValue) { + this.d3.set(newValue); + } + get chipEnabled() { + return this.e3.get(); + } + set chipEnabled(newValue) { + this.e3.set(newValue); + } + get chipActivated() { + return this.f3.get(); + } + set chipActivated(newValue) { + this.f3.set(newValue); + } + get chipAccessibilitySelectedType() { + return this.g3.get(); + } + set chipAccessibilitySelectedType(newValue) { + this.g3.set(newValue); + } + get chipAccessibilityDescription() { + return this.h3.get(); + } + set chipAccessibilityDescription(newValue) { + this.h3.set(newValue); + } + get chipAccessibilityLevel() { + return this.i3.get(); + } + set chipAccessibilityLevel(newValue) { + this.i3.set(newValue); + } + get isChipExist() { + return this.w4.get(); + } + set isChipExist(newValue) { + this.w4.set(newValue); + } + get chipScale() { + return this.l3.get(); + } + set chipScale(newValue) { + this.l3.set(newValue); + } + get chipOpacity() { + return this.m3.get(); + } + set chipOpacity(newValue) { + this.m3.set(newValue); + } + get suffixSymbolHeight() { + return this.x4.get(); + } + set suffixSymbolHeight(newValue) { + this.x4.set(newValue); + } + get suffixSymbolWidth() { + return this.z3.get(); + } + set suffixSymbolWidth(newValue) { + this.z3.set(newValue); + } + get breakPoint() { + return this.y4.get(); + } + set breakPoint(newValue) { + this.y4.set(newValue); + } + get fontSizeScale() { + return this.w3.get(); + } + set fontSizeScale(newValue) { + this.w3.set(newValue); + } + aboutToAppear() { + this.smListener.on('change', (c5) => { + if (c5.matches) { + this.breakPoint = a1.SM; + } + }); + this.mdListener.on('change', (b5) => { + if (b5.matches) { + this.breakPoint = a1.MD; + } + }); + this.lgListener.on('change', (a5) => { + if (a5.matches) { + this.breakPoint = a1.LG; + } + }); + let z4 = this.getUIContext().getHostContext(); + if (z4) { + this.fontSizeScale = z4.config?.fontSizeScale ?? 1; + this.environmentCallbackID = z4 + .getApplicationContext() + .on('environment', this.environmentCallback); + } + } + aboutToDisappear() { + this.smListener.off('change'); + this.mdListener.off('change'); + this.lgListener.off('change'); + if (this.environmentCallbackID) { + this.getUIContext() + .getHostContext() + ?.getApplicationContext() + .off('environment', this.environmentCallbackID); + this.environmentCallbackID = void 0; + } + } + ChipBuilder(parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Button.createWithChild({ type: ButtonType.Normal }); + Button.clip(false); + Button.padding(0); + Button.focusable(true); + Button.size(this.getChipSize()); + Button.enabled(this.isChipEnabled()); + Button.direction(this.chipDirection); + Button.backgroundColor(this.getChipBackgroundColor()); + Button.borderRadius(this.getChipBorderRadius()); + Button.scale(ObservedObject.GetRawObject(this.chipScale)); + Button.opacity(this.chipOpacity); + Button.accessibilityGroup(true); + Button.accessibilityDescription(this.getAccessibilityDescription()); + Button.accessibilityLevel(this.getAccessibilityLevel()); + Button.accessibilityChecked(this.getAccessibilityChecked()); + Button.accessibilitySelected(this.getAccessibilitySelected()); + Button.onClick(this.getChipOnClicked()); + Button.onKeyEvent((event) => { + if ( + event.type === KeyType.Down && + event.keyCode === KeyCode.KEYCODE_FORWARD_DEL + ) { + this.deleteChip(); + } + }); + }, Button); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Flex.create({ + justifyContent: FlexAlign.Center, + alignItems: ItemAlign.Center, + }); + Flex.direction(this.chipDirection); + Flex.padding(this.getChipPadding()); + Flex.size(this.getChipSize()); + Flex.constraintSize(this.getChipConstraintSize()); + }, Flex); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (this.hasPrefixSymbol()) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + SymbolGlyph.create(); + SymbolGlyph.fontSize(this.theme.m1.fontSize); + SymbolGlyph.fontColor(this.getDefaultSymbolColor()); + SymbolGlyph.flexShrink(0); + SymbolGlyph.attributeModifier.bind(this)( + this.getPrefixSymbolModifier() + ); + SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); + SymbolGlyph.symbolEffect(this.symbolEffect, false); + SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.m1.o1); + }, SymbolGlyph); + }); + } else if (this.prefixIcon?.src) { + this.ifElseBranchUpdateFunction(1, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Image.create(this.prefixIcon.src); + Image.direction(this.chipDirection); + Image.size(this.getPrefixIconSize()); + Image.fillColor(this.getPrefixIconFilledColor()); + Image.objectFit(ImageFit.Cover); + Image.focusable(false); + Image.flexShrink(0); + Image.draggable(false); + }, Image); + }); + } else { + this.ifElseBranchUpdateFunction(2, () => {}); + } + }, If); + If.pop(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Text.create(this.getChipText()); + Text.draggable(false); + Text.flexShrink(1); + Text.focusable(true); + Text.maxLines(1); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.textAlign(TextAlign.Center); + Text.direction(this.chipDirection); + Text.fontSize(this.getLabelFontSize()); + Text.fontColor(this.getLabelFontColor()); + Text.fontFamily(this.getLabelFontFamily()); + Text.fontWeight(this.getLabelFontWeight()); + Text.margin(this.getLabelMargin()); + }, Text); + Text.pop(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (this.hasSuffixSymbol()) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Button.createWithChild({ type: ButtonType.Normal }); + Button.onClick(this.getSuffixSymbolAction()); + Button.accessibilityText(this.getSuffixSymbolAccessibilityText()); + Button.accessibilityDescription( + this.getSuffixSymbolAccessibilityDescription() + ); + Button.accessibilityLevel(this.getSuffixSymbolAccessibilityLevel()); + Button.flexShrink(0); + Button.backgroundColor(Color.Transparent); + Button.borderRadius(0); + Button.padding(0); + Button.stateEffect(false); + Button.hoverEffect(HoverEffect.None); + }, Button); + this.observeComponentCreation2((elmtId, isInitialRender) => { + SymbolGlyph.create(); + SymbolGlyph.fontSize(this.theme.m1.fontSize); + SymbolGlyph.fontColor(this.getDefaultSymbolColor()); + SymbolGlyph.attributeModifier.bind(this)( + this.getSuffixSymbolModifier() + ); + SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); + SymbolGlyph.symbolEffect(this.symbolEffect, false); + SymbolGlyph.symbolEffect(this.symbolEffect, this.theme.m1.o1); + }, SymbolGlyph); + Button.pop(); + }); + } else if (this.suffixIcon?.src) { + this.ifElseBranchUpdateFunction(1, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Button.createWithChild({ type: ButtonType.Normal }); + Button.backgroundColor(Color.Transparent); + Button.borderRadius(0); + Button.padding(0); + Button.flexShrink(0); + Button.stateEffect(false); + Button.hoverEffect(HoverEffect.None); + Button.size(this.getSuffixIconSize()); + Button.accessibilityText(this.getSuffixIconAccessibilityText()); + Button.accessibilityDescription( + this.getSuffixIconAccessibilityDescription() + ); + Button.accessibilityLevel(this.getSuffixIconAccessibilityLevel()); + Button.onClick(this.getSuffixIconAction()); + }, Button); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Image.create(this.suffixIcon.src); + Image.direction(this.chipDirection); + Image.size(this.getSuffixIconSize()); + Image.fillColor(this.getSuffixIconFilledColor()); + Image.objectFit(ImageFit.Cover); + Image.draggable(false); + }, Image); + Button.pop(); + }); + } else if (this.isClosable()) { + this.ifElseBranchUpdateFunction(2, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Button.createWithChild({ type: ButtonType.Normal }); + Button.backgroundColor(Color.Transparent); + Button.borderRadius(0); + Button.padding(0); + Button.flexShrink(0); + Button.stateEffect(false); + Button.hoverEffect(HoverEffect.None); + Button.accessibilityText(this.getCloseIconAccessibilityText()); + Button.accessibilityDescription( + this.getCloseIconAccessibilityDescription() + ); + Button.accessibilityLevel(this.getCloseIconAccessibilityLevel()); + Button.onClick(() => { + if (!this.isChipEnabled()) { + return; + } + this.onClose?.(); + this.deleteChip(); + }); + }, Button); + this.observeComponentCreation2((elmtId, isInitialRender) => { + SymbolGlyph.create({ + id: -1, + type: 40000, + params: ['sys.symbol.xmark'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }); + SymbolGlyph.fontSize(this.theme.m1.fontSize); + SymbolGlyph.fontColor(this.getDefaultSymbolColor()); + }, SymbolGlyph); + Button.pop(); + }); + } else { + this.ifElseBranchUpdateFunction(3, () => {}); + } + }, If); + If.pop(); + Flex.pop(); + Button.pop(); + } + getCloseIconAccessibilityLevel() { + if (this.closeOptions?.accessibilityLevel) { + return this.closeOptions.accessibilityLevel; + } + return 'yes'; + } + getCloseIconAccessibilityDescription() { + if (typeof this.closeOptions?.accessibilityDescription === 'undefined') { + return void 0; + } + return this.closeOptions.accessibilityDescription; + } + getCloseIconAccessibilityText() { + if (typeof this.closeOptions?.accessibilityText === 'undefined') { + return { + id: -1, + type: 10003, + params: ['sys.string.delete_used_for_accessibility_text'], + bundleName: '__harDefaultBundleName__', + moduleName: '__harDefaultModuleName__', + }; + } + return this.closeOptions.accessibilityText; + } + getSuffixIconAction() { + if (this.suffixIcon?.src) { + if (!this.suffixIcon?.action) { + return void 0; + } + return () => { + if (this.isChipEnabled()) { + this.suffixIcon?.action?.(); + } + }; + } + return void 0; + } + getSuffixIconFilledColor() { + if (this.isChipActivated()) { + return ( + this.suffixIcon?.activatedFillColor ?? + this.theme.suffixIcon.activatedFillColor + ); + } + return this.suffixIcon?.fillColor ?? this.theme.suffixIcon.fillColor; + } + getSuffixIconSize() { + let y4 = { width: 0, height: 0 }; + if ( + typeof this.suffixIcon?.size?.width !== 'undefined' && + this.isValidLength(this.suffixIcon.size.width) + ) { + y4.width = this.suffixIcon.size.width; + } else { + y4.width = this.theme.suffixIcon.size.width; + } + if ( + typeof this.suffixIcon?.size?.height !== 'undefined' && + this.isValidLength(this.suffixIcon.size.height) + ) { + y4.height = this.suffixIcon.size.height; + } else { + y4.height = this.theme.suffixIcon.size.height; + } + return y4; + } + getSuffixIconAccessibilityLevel() { + if (!this.suffixIcon?.accessibilityLevel) { + return !this.suffixIcon?.action ? 'no' : 'yes'; + } + return this.suffixIcon.accessibilityLevel; + } + getSuffixIconAccessibilityDescription() { + if (typeof this.suffixIcon?.accessibilityDescription === 'undefined') { + return void 0; + } + return this.suffixIcon.accessibilityDescription; + } + getSuffixIconAccessibilityText() { + if (typeof this.suffixIcon?.accessibilityText === 'undefined') { + return void 0; + } + return this.suffixIcon.accessibilityText; + } + isClosable() { + return this.allowClose ?? true; + } + getSuffixSymbolModifier() { + if (this.isChipActivated()) { + return this.suffixSymbol?.activated; + } + return this.suffixSymbol?.normal; + } + getSuffixSymbolAccessibilityLevel() { + if (this.isChipActivated()) { + if ( + !this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel + ) { + return this.suffixSymbolOptions?.action ? 'yes' : 'no'; + } + return this.suffixSymbolOptions.activatedAccessibility.accessibilityLevel; + } + if (!this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel) { + return this.suffixSymbolOptions?.action ? 'yes' : 'no'; + } + return this.suffixSymbolOptions.normalAccessibility.accessibilityLevel; + } + getSuffixSymbolAccessibilityDescription() { + if (this.isChipActivated()) { + if ( + typeof this.suffixSymbolOptions?.activatedAccessibility + ?.accessibilityDescription !== 'undefined' + ) { + return this.suffixSymbolOptions.activatedAccessibility + .accessibilityDescription; + } + return void 0; + } + if ( + typeof this.suffixSymbolOptions?.normalAccessibility + ?.accessibilityDescription !== 'undefined' + ) { + return this.suffixSymbolOptions.normalAccessibility + .accessibilityDescription; + } + return void 0; + } + getSuffixSymbolAccessibilityText() { + if (this.isChipActivated()) { + if ( + typeof this.suffixSymbolOptions?.activatedAccessibility + ?.accessibilityText !== 'undefined' + ) { + return this.suffixSymbolOptions.activatedAccessibility + .accessibilityText; + } + return void 0; + } + if ( + typeof this.suffixSymbolOptions?.normalAccessibility + ?.accessibilityText !== 'undefined' + ) { + return this.suffixSymbolOptions.normalAccessibility.accessibilityText; + } + return void 0; + } + getSuffixSymbolAction() { + if (typeof this.suffixSymbolOptions?.action === 'undefined') { + return void 0; + } + return () => { + if (!this.isChipEnabled()) { + return; + } + this.suffixSymbolOptions?.action?.(); + }; + } + hasSuffixSymbol() { + return !!(this.suffixSymbol?.normal || this.suffixSymbol?.activated); + } + getPrefixIconFilledColor() { + if (this.isChipActivated()) { + return ( + this.prefixIcon?.activatedFillColor ?? + this.theme.prefixIcon.activatedFillColor + ); + } + return this.prefixIcon?.fillColor ?? this.theme.prefixIcon.fillColor; + } + getPrefixIconSize() { + let x4 = { width: 0, height: 0 }; + if ( + typeof this.prefixIcon?.size?.width !== 'undefined' && + this.isValidLength(this.prefixIcon.size.width) + ) { + x4.width = this.prefixIcon.size.width; + } else { + x4.width = this.theme.prefixIcon.size.width; + } + if ( + typeof this.prefixIcon?.size?.height !== 'undefined' && + this.isValidLength(this.prefixIcon.size.height) + ) { + x4.height = this.prefixIcon.size.height; + } else { + x4.height = this.theme.prefixIcon.size.height; + } + return x4; + } + getPrefixSymbolModifier() { + if (this.isChipActivated()) { + return this.prefixSymbol?.activated; + } + return this.prefixSymbol?.normal; + } + getDefaultSymbolColor() { + return this.isChipActivated() + ? this.theme.m1.activatedFontColor + : this.theme.m1.n1; + } + hasPrefixSymbol() { + return !!(this.prefixSymbol?.normal || this.prefixSymbol?.activated); + } + getChipConstraintSize() { + const constraintSize = {}; + if (typeof this.chipSize === 'string') { + constraintSize.maxWidth = this.getChipMaxWidth(); + constraintSize.minHeight = + this.chipSize === ChipSize.SMALL ? this.theme.q1.v1 : this.theme.q1.u1; + } else { + if ( + typeof this.chipSize?.width === 'undefined' || + !this.isValidLength(this.chipSize.width) + ) { + constraintSize.maxWidth = this.getChipMaxWidth(); + } + if ( + typeof this.chipSize?.height === 'undefined' || + !this.isValidLength(this.chipSize.height) + ) { + constraintSize.minHeight = this.theme.q1.u1; + } + } + return constraintSize; + } + getChipMaxWidth() { + if (this.fontSizeScale >= this.theme.q1.s1) { + return void 0; + } + if (this.breakPoint === a1.SM) { + return this.theme.q1.g2.i2; + } + if (this.breakPoint === a1.MD) { + return this.theme.q1.g2.j2; + } + if (this.breakPoint === a1.LG) { + return this.theme.q1.g2.l2; + } + return void 0; + } + getChipSize() { + const w4 = { + width: 'auto', + height: 'auto', + }; + if (typeof this.chipSize !== 'string') { + if ( + typeof this.chipSize?.width !== 'undefined' && + this.isValidLength(this.chipSize.width) + ) { + w4.width = this.chipSize.width; + } + if ( + typeof this.chipSize?.height !== 'undefined' && + this.isValidLength(this.chipSize.height) + ) { + w4.height = this.chipSize.height; + } + } + return w4; + } + getChipPadding() { + return this.isSmallChipSize() ? this.theme.q1.d2 : this.theme.q1.c2; + } + getLabelMargin() { + const localizedLabelMargin = { + start: LengthMetrics.vp(0), + end: LengthMetrics.vp(0), + }; + const u4 = this.isSmallChipSize() + ? this.theme.label.j1 + : this.theme.label.i1; + if ( + typeof this.label?.localizedLabelMargin?.start !== 'undefined' && + this.label.localizedLabelMargin.start.value >= 0 + ) { + localizedLabelMargin.start = this.label.localizedLabelMargin.start; + } else if (this.hasPrefix()) { + localizedLabelMargin.start = u4.start; + } + if ( + typeof this.label?.localizedLabelMargin?.end !== 'undefined' && + this.label.localizedLabelMargin.end.value >= 0 + ) { + localizedLabelMargin.end = this.label.localizedLabelMargin.end; + } else if (this.hasSuffix()) { + localizedLabelMargin.end = u4.end; + } + if (typeof this.label?.localizedLabelMargin === 'object') { + return localizedLabelMargin; + } + if (typeof this.label.labelMargin === 'object') { + const labelMargin = { left: 0, right: 0 }; + const v4 = this.isSmallChipSize() + ? this.theme.label.h1 + : this.theme.label.g1; + if ( + typeof this.label?.labelMargin?.left !== 'undefined' && + this.isValidLength(this.label.labelMargin.left) + ) { + labelMargin.left = this.label.labelMargin.left; + } else if (this.hasPrefix()) { + labelMargin.left = v4.left; + } + if ( + typeof this.label?.labelMargin?.right !== 'undefined' && + this.isValidLength(this.label.labelMargin.right) + ) { + labelMargin.right = this.label.labelMargin.right; + } else if (this.hasSuffix()) { + labelMargin.right = v4.right; + } + return labelMargin; + } + return localizedLabelMargin; + } + hasSuffix() { + if (this.suffixIcon?.src) { + return true; + } + return this.isChipActivated() + ? !!this.suffixSymbol?.activated + : !!this.suffixSymbol?.normal; + } + hasPrefix() { + if (this.prefixIcon?.src) { + return true; + } + return this.isChipActivated() + ? !!this.prefixSymbol?.activated + : !!this.prefixSymbol?.normal; + } + getLabelFontWeight() { + return this.isChipActivated() ? FontWeight.Medium : FontWeight.Regular; + } + getLabelFontFamily() { + return this.label?.fontFamily ?? this.theme.label.fontFamily; + } + getLabelFontColor() { + if (this.isChipActivated()) { + return ( + this.label?.activatedFontColor ?? this.theme.label.activatedFontColor + ); + } + return this.label?.fontColor ?? this.theme.label.fontColor; + } + getLabelFontSize() { + if ( + typeof this.label.fontSize !== 'undefined' && + this.isValidLength(this.label.fontSize) + ) { + return this.label.fontSize; + } + if (this.isSmallChipSize()) { + return this.theme.label.f1; + } + return this.theme.label.defaultFontSize; + } + getChipText() { + return this.label?.text ?? ''; + } + deleteChip() { + Context.animateTo({ curve: Curve.Sharp, duration: 150 }, () => { + this.chipOpacity = 0; + }); + Context.animateTo( + { + curve: Curve.FastOutLinearIn, + duration: 150, + onFinish: () => { + this.isChipExist = false; + }, + }, + () => { + this.chipScale = { x: 0.85, y: 0.85 }; + } + ); + } + getChipOnClicked() { + if (this.onClicked) { + return this.onClicked.bind(this); + } + return void 0; + } + getAccessibilitySelected() { + if ( + this.getChipAccessibilitySelectedType() === + AccessibilitySelectedType.SELECTED + ) { + return this.isChipActivated(); + } + return void 0; + } + getAccessibilityChecked() { + if ( + this.getChipAccessibilitySelectedType() === + AccessibilitySelectedType.CHECKED + ) { + return this.isChipActivated(); + } + return void 0; + } + getChipAccessibilitySelectedType() { + if (typeof this.chipActivated === 'undefined') { + return AccessibilitySelectedType.CLICKED; + } + return ( + this.chipAccessibilitySelectedType ?? AccessibilitySelectedType.CHECKED + ); + } + getAccessibilityLevel() { + return this.chipAccessibilityLevel; + } + getAccessibilityDescription() { + if (typeof this.chipAccessibilityDescription === 'undefined') { + return void 0; + } + return this.chipAccessibilityDescription; + } + isChipEnabled() { + return this.chipEnabled ?? true; + } + getChipBorderRadius() { + if ( + typeof this.chipNodeRadius !== 'undefined' && + this.isValidLength(this.chipNodeRadius) + ) { + return this.chipNodeRadius; + } + return this.isSmallChipSize() ? this.theme.q1.b2 : this.theme.q1.a2; + } + isSmallChipSize() { + return ( + typeof this.chipSize === 'string' && this.chipSize === ChipSize.SMALL + ); + } + getChipBackgroundColor() { + if (this.isChipActivated()) { + return this.getColor( + this.chipNodeActivatedBackgroundColor, + this.theme.q1.activatedBackgroundColor + ); + } + return this.getColor( + this.chipNodeBackgroundColor, + this.theme.q1.backgroundColor + ); + } + getColor(color, t4) { + if (!color) { + return t4; + } + try { + ColorMetrics.resourceColor(color).color; + return color; + } catch (e) { + console.error(`[Chip] failed to get color`); + return Color.Transparent; + } + } + isChipActivated() { + return this.chipActivated ?? false; + } + isValidLength(length) { + if (typeof length === 'number') { + return length >= 0; + } else if (typeof length === 'string') { + return this.isValidLengthString(length); + } else if (typeof length === 'object') { + const resource = length; + const resourceManager = + this.getUIContext().getHostContext()?.resourceManager; + if (!resourceManager) { + console.error('[Chip] failed to get resourceManager.'); + return false; + } + switch (resource.type) { + case t: + case u: + return resourceManager.getNumber(resource) >= 0; + case o: + return this.isValidLengthString( + resourceManager.getStringSync(resource) + ); + default: + return false; + } + } + return false; + } + isValidLengthString(length) { + const matches = length.match(/(-?\d+(?:\.\d+)?)_?(fp|vp|px|lpx)?$/i); + if (!matches || matches.length < 3) { + return false; + } + return Number.parseInt(matches[1], 10) >= 0; + } + initialRender() { + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (this.isChipExist) { + this.ifElseBranchUpdateFunction(0, () => { + this.ChipBuilder.bind(this)(); + }); + } else { + this.ifElseBranchUpdateFunction(1, () => {}); + } + }, If); + If.pop(); + } + rerender() { + this.updateDirtyElements(); + } +} + +export default { + Chip, + ChipSize, + AccessibilitySelectedType, +}; diff --git a/advanced_ui_component/chip/source/chip_v14.ets b/advanced_ui_component/chip/source/chip_v14.ets new file mode 100644 index 00000000000..ad0678beb83 --- /dev/null +++ b/advanced_ui_component/chip/source/chip_v14.ets @@ -0,0 +1,976 @@ +/* + * Copyright (c) 2024 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 { ColorMetrics, LengthMetrics } from '@ohos.arkui.node'; +import { SymbolGlyphModifier } from '@ohos.arkui.modifier'; +import { KeyCode } from '@kit.InputKit'; +import mediaquery from '@ohos.mediaquery'; +import EnvironmentCallback from '@ohos.app.ability.EnvironmentCallback'; +import common from '@ohos.app.ability.common'; + +export enum ChipSize { + NORMAL = "NORMAL", + SMALL = "SMALL" +} + +enum BreakPointsType { + SM = "SM", + MD = "MD", + LG = "LG" +} + +export enum AccessibilitySelectedType { + CLICKED = 0, + CHECKED = 1, + SELECTED = 2, +} + +export interface IconCommonOptions { + src: ResourceStr; + size?: SizeOptions; + fillColor?: ResourceColor; + activatedFillColor?: ResourceColor; +} + +export interface SuffixIconOptions extends IconCommonOptions { + action?: () => void; + accessibilityText?: ResourceStr; + accessibilityDescription?: ResourceStr; + accessibilityLevel?: string; +} + +export interface PrefixIconOptions extends IconCommonOptions {} + +export interface AccessibilityOptions { + accessibilityLevel?: string; + accessibilityText?: ResourceStr; + accessibilityDescription?: ResourceStr; +} + +export interface CloseOptions extends AccessibilityOptions {} + +export interface ChipSymbolGlyphOptions { + normal?: SymbolGlyphModifier; + activated?: SymbolGlyphModifier; +} + +export interface ChipSuffixSymbolGlyphOptions { + normalAccessibility?: AccessibilityOptions; + activatedAccessibility?: AccessibilityOptions; + action?: VoidCallback; +} + +export interface LabelMarginOptions { + left?: Dimension; + right?: Dimension; +} + +export interface LocalizedLabelMarginOptions { + start?: LengthMetrics; + end?: LengthMetrics; +} + +export interface LabelOptions { + text: string; + fontSize?: Dimension; + fontColor?: ResourceColor; + activatedFontColor?: ResourceColor; + fontFamily?: string; + labelMargin?: LabelMarginOptions; + localizedLabelMargin?: LocalizedLabelMarginOptions; +} + +interface IconTheme { + size: SizeOptions; + fillColor: ResourceColor; + activatedFillColor: ResourceColor; +} + +interface PrefixIconTheme extends IconTheme {} + +interface SuffixIconTheme extends IconTheme { + defaultDeleteIcon: ResourceStr; + focusable: boolean; +} + +interface DefaultSymbolTheme { + normalFontColor: Array; + activatedFontColor: Array; + fontSize: Length; + defaultEffect: number; +} + +interface LabelTheme { + normalFontSize: Dimension; + smallFontSize: Dimension; + fontColor: ResourceColor; + activatedFontColor: ResourceColor; + fontFamily: string; + normalMargin: Margin; + localizedNormalMargin: LocalizedMargin; + smallMargin: Margin; + localizedSmallMargin: LocalizedMargin; + defaultFontSize: Dimension; +} + +interface ChipNodeOpacity { + normal: number; + hover: number; + pressed: number; +} + +interface ChipNodeConstraintWidth { + breakPointMinWidth: number, + breakPointSmMaxWidth: number, + breakPointMdMaxWidth: number, + breakPointLgMaxWidth: number, +} + +interface ChipNodeTheme { + suitAgeScale: number; + minLabelWidth: Dimension; + normalHeight: Dimension; + smallHeight: Dimension; + enabled: boolean; + activated: boolean; + backgroundColor: ResourceColor; + activatedBackgroundColor: ResourceColor; + focusOutlineColor: ResourceColor; + focusOutlineMargin: number; + normalBorderRadius: Dimension; + smallBorderRadius: Dimension; + borderWidth: number; + localizedNormalPadding: LocalizedPadding; + localizedSmallPadding: LocalizedPadding; + hoverBlendColor: ResourceColor; + pressedBlendColor: ResourceColor; + opacity: ChipNodeOpacity; + breakPointConstraintWidth: ChipNodeConstraintWidth; +} + +interface ChipTheme { + prefixIcon: PrefixIconTheme; + label: LabelTheme; + suffixIcon: SuffixIconTheme; + defaultSymbol: DefaultSymbolTheme; + chipNode: ChipNodeTheme; +} + +export const defaultTheme: ChipTheme = { + prefixIcon: { + size: { width: 16, height: 16 }, + fillColor: $r('sys.color.ohos_id_color_secondary'), + activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary'), + }, + label: { + normalFontSize: $r('sys.float.ohos_id_text_size_button2'), + smallFontSize: $r('sys.float.ohos_id_text_size_button2'), + fontColor: $r('sys.color.ohos_id_color_text_primary'), + activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), + fontFamily: 'HarmonyOS Sans', + normalMargin: { + left: 6, + right: 6, + top: 0, + bottom: 0 + }, + smallMargin: { + left: 4, + right: 4, + top: 0, + bottom: 0 + }, + defaultFontSize: 14, + localizedNormalMargin: { + start: LengthMetrics.vp(6), + end: LengthMetrics.vp(6), + top: LengthMetrics.vp(0), + bottom: LengthMetrics.vp(0) + }, + localizedSmallMargin: { + start: LengthMetrics.vp(4), + end: LengthMetrics.vp(4), + top: LengthMetrics.vp(0), + bottom: LengthMetrics.vp(0), + } + }, + suffixIcon: { + size: { width: 16, height: 16 }, + fillColor: $r('sys.color.ohos_id_color_secondary'), + activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary'), + defaultDeleteIcon: $r('sys.media.ohos_ic_public_cancel', 16, 16), + focusable: false, + }, + defaultSymbol: { + normalFontColor: [$r('sys.color.ohos_id_color_secondary')], + activatedFontColor: [$r('sys.color.ohos_id_color_text_primary_contrary')], + fontSize: 16, + defaultEffect: -1, + }, + chipNode: { + suitAgeScale: 1.75, + minLabelWidth: 12, + normalHeight: 36, + smallHeight: 28, + enabled: true, + activated: false, + backgroundColor: $r('sys.color.ohos_id_color_button_normal'), + activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), + focusOutlineColor: $r('sys.color.ohos_id_color_focused_outline'), + focusOutlineMargin: 2, + normalBorderRadius: $r('sys.float.chip_border_radius_normal'), + smallBorderRadius: $r('sys.float.chip_border_radius_small'), + borderWidth: 2, + localizedNormalPadding: { + start: LengthMetrics.vp(16), + end: LengthMetrics.vp(16), + top: LengthMetrics.vp(4), + bottom: LengthMetrics.vp(4) + }, + localizedSmallPadding: { + start: LengthMetrics.vp(12), + end: LengthMetrics.vp(12), + top: LengthMetrics.vp(4), + bottom: LengthMetrics.vp(4) + }, + hoverBlendColor: $r('sys.color.ohos_id_color_hover'), + pressedBlendColor: $r('sys.color.ohos_id_color_click_effect'), + opacity: { normal: 1, hover: 0.95, pressed: 0.9 }, + breakPointConstraintWidth: { + breakPointMinWidth: 128, + breakPointSmMaxWidth: 156, + breakPointMdMaxWidth: 280, + breakPointLgMaxWidth: 400 + } + } +}; + +const RESOURCE_TYPE_STRING = 10003; +const RESOURCE_TYPE_FLOAT = 10002; +const RESOURCE_TYPE_INTEGER = 10007; + +interface ChipOptions { + prefixIcon?: PrefixIconOptions; + prefixSymbol?: ChipSymbolGlyphOptions; + label: LabelOptions; + suffixIcon?: SuffixIconOptions; + suffixSymbol?: ChipSymbolGlyphOptions; + suffixSymbolOptions?: ChipSuffixSymbolGlyphOptions; + allowClose?: boolean; + closeOptions?: CloseOptions; + enabled?: boolean; + activated?: boolean; + backgroundColor?: ResourceColor; + activatedBackgroundColor?: ResourceColor; + borderRadius?: Dimension; + size?: ChipSize | SizeOptions; + direction?: Direction; + accessibilitySelectedType?: AccessibilitySelectedType; + accessibilityDescription?: ResourceStr; + accessibilityLevel?: string; + onClose?: () => void + onClicked?: () => void +} + +@Builder +export function Chip(options: ChipOptions) { + ChipComponent({ + chipSize: options.size, + prefixIcon: options.prefixIcon, + prefixSymbol: options.prefixSymbol, + label: options.label, + suffixIcon: options.suffixIcon, + suffixSymbol: options.suffixSymbol, + suffixSymbolOptions: options.suffixSymbolOptions, + allowClose: options.allowClose, + closeOptions: options.closeOptions, + chipEnabled: options.enabled, + chipActivated: options.activated, + chipNodeBackgroundColor: options.backgroundColor, + chipNodeActivatedBackgroundColor: options.activatedBackgroundColor, + chipNodeRadius: options.borderRadius, + chipDirection: options.direction, + chipAccessibilitySelectedType: options.accessibilitySelectedType, + chipAccessibilityDescription: options.accessibilityDescription, + chipAccessibilityLevel: options.accessibilityLevel, + onClose: options.onClose, + onClicked: options.onClicked, + }) +} + + +@Component +export struct ChipComponent { + private theme: ChipTheme = defaultTheme; + @Prop chipSize?: ChipSize | SizeOptions = ChipSize.NORMAL; + @Prop allowClose?: boolean; + @Prop closeOptions?: CloseOptions; + @Prop chipDirection?: Direction = Direction.Auto; + @Prop prefixIcon?: PrefixIconOptions; + @Prop prefixSymbol?: ChipSymbolGlyphOptions; + @Require @Prop label: LabelOptions; + @Prop suffixIcon?: SuffixIconOptions; + @Prop suffixSymbol?: ChipSymbolGlyphOptions; + @Prop suffixSymbolOptions?: ChipSuffixSymbolGlyphOptions; + @Prop chipNodeBackgroundColor?: ResourceColor; + @Prop chipNodeActivatedBackgroundColor?: ResourceColor; + @Prop chipNodeRadius?: Dimension; + @Prop chipEnabled?: boolean = true; + @Prop chipActivated?: boolean; + @Prop chipAccessibilitySelectedType?: AccessibilitySelectedType; + @Prop chipAccessibilityDescription?: ResourceStr; + @Prop chipAccessibilityLevel?: string; + @State isChipExist: boolean = true; + @State chipScale: ScaleOptions = { x: 1, y: 1 }; + @State chipOpacity: number = 1; + @State suffixSymbolHeight: number = 0; + @State suffixSymbolWidth: number = 0; + @State breakPoint: BreakPointsType = BreakPointsType.SM; + @State fontSizeScale: number = 1; + public onClose?: VoidCallback; + public onClicked?: VoidCallback; + private smListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp { + this.fontSizeScale = configuration.fontSizeScale ?? 1; + }, + onMemoryLevel() { + } + }; + + aboutToAppear(): void { + this.smListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.SM; + } + }); + this.mdListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.MD; + } + }); + this.lgListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.LG; + } + }); + let abilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext | undefined; + if (abilityContext) { + this.fontSizeScale = abilityContext.config?.fontSizeScale ?? 1; + this.environmentCallbackID = abilityContext.getApplicationContext().on('environment', this.environmentCallback); + } + } + + aboutToDisappear(): void { + this.smListener.off('change'); + this.mdListener.off('change'); + this.lgListener.off('change'); + if (this.environmentCallbackID) { + this.getUIContext().getHostContext()?.getApplicationContext().off('environment', this.environmentCallbackID); + this.environmentCallbackID = void 0; + } + } + + @Builder + ChipBuilder() { + Button({ type: ButtonType.Normal }) { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + if (this.hasPrefixSymbol()) { + SymbolGlyph() + .fontSize(this.theme.defaultSymbol.fontSize) + .fontColor(this.getDefaultSymbolColor()) + .flexShrink(0) + .attributeModifier(this.getPrefixSymbolModifier()) + .effectStrategy(SymbolEffectStrategy.NONE) + .symbolEffect(this.symbolEffect, false) + .symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect) + } else if (this.prefixIcon?.src) { + Image(this.prefixIcon.src) + .direction(this.chipDirection) + .size(this.getPrefixIconSize()) + .fillColor(this.getPrefixIconFilledColor()) + .objectFit(ImageFit.Cover) + .focusable(false) + .flexShrink(0) + .draggable(false) + } + + Text(this.getChipText()) + .draggable(false) + .flexShrink(1) + .focusable(true) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .textAlign(TextAlign.Center) + .direction(this.chipDirection) + .fontSize(this.getLabelFontSize()) + .fontColor(this.getLabelFontColor()) + .fontFamily(this.getLabelFontFamily()) + .fontWeight(this.getLabelFontWeight()) + .margin(this.getLabelMargin()) + + if (this.hasSuffixSymbol()) { + Button({ type: ButtonType.Normal }) { + SymbolGlyph() + .fontSize(this.theme.defaultSymbol.fontSize) + .fontColor(this.getDefaultSymbolColor()) + .attributeModifier(this.getSuffixSymbolModifier()) + .effectStrategy(SymbolEffectStrategy.NONE) + .symbolEffect(this.symbolEffect, false) + .symbolEffect(this.symbolEffect, this.theme.defaultSymbol.defaultEffect) + } + .onClick(this.getSuffixSymbolAction()) + .accessibilityText(this.getSuffixSymbolAccessibilityText()) + .accessibilityDescription(this.getSuffixSymbolAccessibilityDescription()) + .accessibilityLevel(this.getSuffixSymbolAccessibilityLevel()) + .flexShrink(0) + .backgroundColor(Color.Transparent) + .borderRadius(0) + .padding(0) + .stateEffect(false) + .hoverEffect(HoverEffect.None) + } else if (this.suffixIcon?.src) { + Button({ type: ButtonType.Normal }) { + Image(this.suffixIcon.src) + .direction(this.chipDirection) + .size(this.getSuffixIconSize()) + .fillColor(this.getSuffixIconFilledColor()) + .objectFit(ImageFit.Cover) + .draggable(false) + } + .backgroundColor(Color.Transparent) + .borderRadius(0) + .padding(0) + .flexShrink(0) + .stateEffect(false) + .hoverEffect(HoverEffect.None) + .size(this.getSuffixIconSize()) + .accessibilityText(this.getSuffixIconAccessibilityText()) + .accessibilityDescription(this.getSuffixIconAccessibilityDescription()) + .accessibilityLevel(this.getSuffixIconAccessibilityLevel()) + .onClick(this.getSuffixIconAction()) + } else if (this.isClosable()) { + Button({ type: ButtonType.Normal }) { + SymbolGlyph($r('sys.symbol.xmark')) + .fontSize(this.theme.defaultSymbol.fontSize) + .fontColor(this.getDefaultSymbolColor()) + } + .backgroundColor(Color.Transparent) + .borderRadius(0) + .padding(0) + .flexShrink(0) + .stateEffect(false) + .hoverEffect(HoverEffect.None) + .accessibilityText(this.getCloseIconAccessibilityText()) + .accessibilityDescription(this.getCloseIconAccessibilityDescription()) + .accessibilityLevel(this.getCloseIconAccessibilityLevel()) + .onClick(() => { + if (!this.isChipEnabled()) { + return; + } + this.onClose?.(); + this.deleteChip(); + }) + } + } + .direction(this.chipDirection) + .padding(this.getChipPadding()) + .size(this.getChipSize()) + .constraintSize(this.getChipConstraintSize()) + } + .clip(false) + .padding(0) + .focusable(true) + .size(this.getChipSize()) + .enabled(this.isChipEnabled()) + .direction(this.chipDirection) + .backgroundColor(this.getChipBackgroundColor()) + .borderRadius(this.getChipBorderRadius()) + .scale(this.chipScale) + .opacity(this.chipOpacity) + .accessibilityGroup(true) + .accessibilityDescription(this.getAccessibilityDescription()) + .accessibilityLevel(this.getAccessibilityLevel()) + .accessibilityChecked(this.getAccessibilityChecked()) + .accessibilitySelected(this.getAccessibilitySelected()) + .onClick(this.getChipOnClicked()) + .onKeyEvent((event) => { + if (event.type === KeyType.Down && event.keyCode === KeyCode.KEYCODE_FORWARD_DEL) { + this.deleteChip() + } + }) + } + + private getCloseIconAccessibilityLevel(): string { + if (this.closeOptions?.accessibilityLevel) { + return this.closeOptions.accessibilityLevel; + } + return 'yes'; + } + + private getCloseIconAccessibilityDescription(): Resource | undefined { + if (typeof this.closeOptions?.accessibilityDescription === 'undefined') { + return void 0; + } + return this.closeOptions.accessibilityDescription as Resource; + } + + private getCloseIconAccessibilityText(): Resource { + if (typeof this.closeOptions?.accessibilityText === 'undefined') { + return $r('sys.string.delete_used_for_accessibility_text'); + } + return this.closeOptions.accessibilityText as ESObject as Resource; + } + + getSuffixIconAction(): Callback | undefined { + if (this.suffixIcon?.src) { + if (!this.suffixIcon?.action) { + return void 0; + } + return () => { + if (this.isChipEnabled()) { + this.suffixIcon?.action?.(); + } + }; + } + return void 0; + } + + getSuffixIconFilledColor(): ResourceColor { + if (this.isChipActivated()) { + return this.suffixIcon?.activatedFillColor ?? this.theme.suffixIcon.activatedFillColor; + } + return this.suffixIcon?.fillColor ?? this.theme.suffixIcon.fillColor; + } + + getSuffixIconSize(): SizeOptions { + let suffixIconSize: SizeOptions = { width: 0, height: 0 }; + if (typeof this.suffixIcon?.size?.width !== 'undefined' && this.isValidLength(this.suffixIcon.size.width)) { + suffixIconSize.width = this.suffixIcon.size.width; + } else { + suffixIconSize.width = this.theme.suffixIcon.size.width; + } + if (typeof this.suffixIcon?.size?.height !== 'undefined' && this.isValidLength(this.suffixIcon.size.height)) { + suffixIconSize.height = this.suffixIcon.size.height; + } else { + suffixIconSize.height = this.theme.suffixIcon.size.height; + } + return suffixIconSize; + } + + getSuffixIconAccessibilityLevel(): string { + if (!this.suffixIcon?.accessibilityLevel) { + return !this.suffixIcon?.action ? 'no' : 'yes'; + } + return this.suffixIcon.accessibilityLevel; + } + + getSuffixIconAccessibilityDescription(): Resource | undefined { + if (typeof this.suffixIcon?.accessibilityDescription === 'undefined') { + return void 0; + } + return this.suffixIcon.accessibilityDescription as ESObject as Resource; + } + + getSuffixIconAccessibilityText(): Resource | undefined { + if (typeof this.suffixIcon?.accessibilityText === 'undefined') { + return void 0; + } + + return this.suffixIcon.accessibilityText as ESObject as Resource; + } + + isClosable(): boolean { + return this.allowClose ?? true; + } + + getSuffixSymbolModifier(): SymbolGlyphModifier | undefined { + if (this.isChipActivated()) { + return this.suffixSymbol?.activated; + } + return this.suffixSymbol?.normal; + } + + getSuffixSymbolAccessibilityLevel(): string { + if (this.isChipActivated()) { + if (!this.suffixSymbolOptions?.activatedAccessibility?.accessibilityLevel) { + return this.suffixSymbolOptions?.action ? 'yes' : 'no'; + } + return this.suffixSymbolOptions.activatedAccessibility.accessibilityLevel; + } + if (!this.suffixSymbolOptions?.normalAccessibility?.accessibilityLevel) { + return this.suffixSymbolOptions?.action ? 'yes' : 'no'; + } + return this.suffixSymbolOptions.normalAccessibility.accessibilityLevel; + } + + getSuffixSymbolAccessibilityDescription(): Resource | undefined { + if (this.isChipActivated()) { + if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityDescription !== 'undefined') { + return this.suffixSymbolOptions.activatedAccessibility.accessibilityDescription as Resource; + } + return void 0; + } + if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityDescription !== 'undefined') { + return this.suffixSymbolOptions.normalAccessibility.accessibilityDescription as Resource; + } + return void 0; + } + + getSuffixSymbolAccessibilityText(): Resource | undefined { + if (this.isChipActivated()) { + if (typeof this.suffixSymbolOptions?.activatedAccessibility?.accessibilityText !== 'undefined') { + return this.suffixSymbolOptions.activatedAccessibility.accessibilityText as Resource; + } + return void 0; + } + if (typeof this.suffixSymbolOptions?.normalAccessibility?.accessibilityText !== 'undefined') { + return this.suffixSymbolOptions.normalAccessibility.accessibilityText as Resource; + } + return void 0; + } + + getSuffixSymbolAction(): Callback | undefined { + if (typeof this.suffixSymbolOptions?.action === 'undefined') { + return void 0; + } + return () => { + if (!this.isChipEnabled()) { + return; + } + this.suffixSymbolOptions?.action?.(); + }; + } + + hasSuffixSymbol(): boolean { + return !!(this.suffixSymbol?.normal || this.suffixSymbol?.activated); + } + + getPrefixIconFilledColor(): ResourceColor { + if (this.isChipActivated()) { + return this.prefixIcon?.activatedFillColor ?? this.theme.prefixIcon.activatedFillColor; + } + return this.prefixIcon?.fillColor ?? this.theme.prefixIcon.fillColor; + } + + getPrefixIconSize(): SizeOptions { + let prefixIconSize: SizeOptions = { width: 0, height: 0 }; + if (typeof this.prefixIcon?.size?.width !== 'undefined' && this.isValidLength(this.prefixIcon.size.width)) { + prefixIconSize.width = this.prefixIcon.size.width; + } else { + prefixIconSize.width = this.theme.prefixIcon.size.width + } + if (typeof this.prefixIcon?.size?.height !== 'undefined' && this.isValidLength(this.prefixIcon.size.height)) { + prefixIconSize.height = this.prefixIcon.size.height; + } else { + prefixIconSize.height = this.theme.prefixIcon.size.height + } + return prefixIconSize; + } + + getPrefixSymbolModifier(): SymbolGlyphModifier | undefined { + if (this.isChipActivated()) { + return this.prefixSymbol?.activated; + } + return this.prefixSymbol?.normal; + } + + getDefaultSymbolColor(): ResourceColor[] { + return this.isChipActivated() ? this.theme.defaultSymbol.activatedFontColor : + this.theme.defaultSymbol.normalFontColor; + } + + hasPrefixSymbol(): boolean { + return !!(this.prefixSymbol?.normal || this.prefixSymbol?.activated); + } + + getChipConstraintSize(): ConstraintSizeOptions | undefined { + const constraintSize: ConstraintSizeOptions = {}; + if (typeof this.chipSize === 'string') { + constraintSize.maxWidth = this.getChipMaxWidth(); + constraintSize.minHeight = + this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallHeight : this.theme.chipNode.normalHeight; + } else { + if (typeof this.chipSize?.width === 'undefined' || !this.isValidLength(this.chipSize.width)) { + constraintSize.maxWidth = this.getChipMaxWidth(); + } + if (typeof this.chipSize?.height === 'undefined' || !this.isValidLength(this.chipSize.height)) { + constraintSize.minHeight = this.theme.chipNode.normalHeight; + } + } + return constraintSize; + } + + getChipMaxWidth(): Length | undefined { + if (this.fontSizeScale >= this.theme.chipNode.suitAgeScale) { + return void 0; + } + if (this.breakPoint === BreakPointsType.SM) { + return this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth; + } + if (this.breakPoint === BreakPointsType.MD) { + return this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth; + } + if (this.breakPoint === BreakPointsType.LG) { + return this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth; + } + return void 0; + } + + getChipSize(): SizeOptions | undefined { + const chipSize: SizeOptions = { + width: 'auto', + height: 'auto' + }; + + if (typeof this.chipSize !== 'string') { + if (typeof this.chipSize?.width !== 'undefined' && this.isValidLength(this.chipSize.width)) { + chipSize.width = this.chipSize.width; + } + if (typeof this.chipSize?.height !== 'undefined' && this.isValidLength(this.chipSize.height)) { + chipSize.height = this.chipSize.height; + } + } + + return chipSize; + } + + getChipPadding(): Length | Padding | LocalizedPadding { + return this.isSmallChipSize() ? this.theme.chipNode.localizedSmallPadding : + this.theme.chipNode.localizedNormalPadding; + } + + getLabelMargin(): Length | Padding | LocalizedPadding { + const localizedLabelMargin: LocalizedMargin = { + start: LengthMetrics.vp(0), + end: LengthMetrics.vp(0), + }; + const defaultLocalizedMargin = + this.isSmallChipSize() ? this.theme.label.localizedSmallMargin : this.theme.label.localizedNormalMargin; + + if (typeof this.label?.localizedLabelMargin?.start !== 'undefined' && + this.label.localizedLabelMargin.start.value >= 0) { + localizedLabelMargin.start = this.label.localizedLabelMargin.start; + } else if (this.hasPrefix()) { + localizedLabelMargin.start = defaultLocalizedMargin.start; + } + + if (typeof this.label?.localizedLabelMargin?.end !== 'undefined' && + this.label.localizedLabelMargin.end.value >= 0) { + localizedLabelMargin.end = this.label.localizedLabelMargin.end; + } else if (this.hasSuffix()) { + localizedLabelMargin.end = defaultLocalizedMargin.end; + } + if (typeof this.label?.localizedLabelMargin === 'object') { + return localizedLabelMargin; + } + if (typeof this.label.labelMargin === 'object') { + const labelMargin: Margin = { left: 0, right: 0 }; + const defaultLabelMargin: Margin = + this.isSmallChipSize() ? this.theme.label.smallMargin : this.theme.label.normalMargin; + if (typeof this.label?.labelMargin?.left !== 'undefined' && this.isValidLength(this.label.labelMargin.left)) { + labelMargin.left = this.label.labelMargin.left; + } else if (this.hasPrefix()) { + labelMargin.left = defaultLabelMargin.left; + } + if (typeof this.label?.labelMargin?.right !== 'undefined' && this.isValidLength(this.label.labelMargin.right)) { + labelMargin.right = this.label.labelMargin.right; + } else if (this.hasSuffix()) { + labelMargin.right = defaultLabelMargin.right; + } + return labelMargin; + } + return localizedLabelMargin; + } + + hasSuffix(): boolean { + if (this.suffixIcon?.src) { + return true; + } + return this.isChipActivated() ? !!this.suffixSymbol?.activated : !!this.suffixSymbol?.normal; + } + + private hasPrefix(): boolean { + if (this.prefixIcon?.src) { + return true; + } + return this.isChipActivated() ? !!this.prefixSymbol?.activated : !!this.prefixSymbol?.normal; + } + + getLabelFontWeight(): string | number | FontWeight { + return this.isChipActivated() ? FontWeight.Medium : FontWeight.Regular; + } + + getLabelFontFamily(): ResourceStr { + return this.label?.fontFamily ?? this.theme.label.fontFamily; + } + + getLabelFontColor(): ResourceColor { + if (this.isChipActivated()) { + return this.label?.activatedFontColor ?? this.theme.label.activatedFontColor; + } + return this.label?.fontColor ?? this.theme.label.fontColor; + } + + getLabelFontSize(): Dimension { + if (typeof this.label.fontSize !== 'undefined' && this.isValidLength(this.label.fontSize)) { + return this.label.fontSize; + } + if (this.isSmallChipSize()) { + return this.theme.label.smallFontSize; + } + return this.theme.label.defaultFontSize; + } + + getChipText(): ResourceStr { + return this.label?.text ?? ''; + } + + deleteChip() { + animateTo({ curve: Curve.Sharp, duration: 150 }, () => { + this.chipOpacity = 0; + }); + animateTo({ + curve: Curve.FastOutLinearIn, + duration: 150, + onFinish: () => { + this.isChipExist = false; + } + }, () => { + this.chipScale = { x: 0.85, y: 0.85 }; + }) + } + + getChipOnClicked(): Callback | undefined { + if (this.onClicked) { + return this.onClicked.bind(this); + } + return void 0; + } + + private getAccessibilitySelected(): boolean | undefined { + if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.SELECTED) { + return this.isChipActivated(); + } + return void 0; + } + + private getAccessibilityChecked(): boolean | undefined { + if (this.getChipAccessibilitySelectedType() === AccessibilitySelectedType.CHECKED) { + return this.isChipActivated(); + } + return void 0; + } + + private getChipAccessibilitySelectedType(): AccessibilitySelectedType { + if (typeof this.chipActivated === 'undefined') { + return AccessibilitySelectedType.CLICKED; + } + return this.chipAccessibilitySelectedType ?? AccessibilitySelectedType.CHECKED; + } + + private getAccessibilityLevel(): string | undefined { + return this.chipAccessibilityLevel; + } + + private getAccessibilityDescription(): Resource | undefined { + if (typeof this.chipAccessibilityDescription === 'undefined') { + return void 0; + } + return this.chipAccessibilityDescription as ESObject as Resource; + } + + isChipEnabled(): boolean { + return this.chipEnabled ?? true; + } + + getChipBorderRadius(): Dimension { + if (typeof this.chipNodeRadius !== 'undefined' && this.isValidLength(this.chipNodeRadius)) { + return this.chipNodeRadius; + } + return this.isSmallChipSize() ? this.theme.chipNode.smallBorderRadius : this.theme.chipNode.normalBorderRadius; + } + + isSmallChipSize() { + return typeof this.chipSize === 'string' && this.chipSize === ChipSize.SMALL; + } + + getChipBackgroundColor(): ResourceColor { + if (this.isChipActivated()) { + return this.getColor(this.chipNodeActivatedBackgroundColor, this.theme.chipNode.activatedBackgroundColor); + } + return this.getColor(this.chipNodeBackgroundColor, this.theme.chipNode.backgroundColor); + } + + getColor(color: ResourceColor | undefined, defaultColor: ResourceColor): ResourceColor { + if (!color) { + return defaultColor; + } + try { + ColorMetrics.resourceColor(color).color; + return color; + } catch (e) { + console.error(`[Chip] failed to get color`); + return Color.Transparent; + } + } + + isChipActivated() { + return this.chipActivated ?? false; + } + + isValidLength(length: Length): boolean { + if (typeof length === 'number') { + return length >= 0; + } else if (typeof length === 'string') { + return this.isValidLengthString(length); + } else if (typeof length === 'object') { + const resource = length as Resource; + const resourceManager = this.getUIContext().getHostContext()?.resourceManager; + if (!resourceManager) { + console.error('[Chip] failed to get resourceManager.'); + return false; + } + switch (resource.type) { + case RESOURCE_TYPE_FLOAT: + case RESOURCE_TYPE_INTEGER: + return resourceManager.getNumber(resource) >= 0; + case RESOURCE_TYPE_STRING: + return this.isValidLengthString(resourceManager.getStringSync(resource)); + default: + return false; + } + } + return false; + } + + isValidLengthString(length: string): boolean { + const matches = length.match(/(-?\d+(?:\.\d+)?)_?(fp|vp|px|lpx)?$/i); + if (!matches || matches.length < 3) { + return false; + } + return Number.parseInt(matches[1], 10) >= 0; + } + + build() { + if (this.isChipExist) { + this.ChipBuilder() + } + } +}