From d1593a578bbcbb2d3fbeb95b5e2c91b1ee469312 Mon Sep 17 00:00:00 2001 From: jiyu Date: Mon, 20 Jan 2025 12:27:02 +0000 Subject: [PATCH 01/11] =?UTF-8?q?=E6=96=B0=E5=BB=BAAtomicServiceSearch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- BUILD.gn | 1 + .../interfaces/atomicservicesearch.cpp | 54 +++ .../interfaces/atomicservicesearch.js | 439 ++++++++++++++++++ .../source/atomicservicesearch.ets | 254 ++++++++++ bundle.json | 1 + 5 files changed, 749 insertions(+) create mode 100644 atomicservicesearch/interfaces/atomicservicesearch.cpp create mode 100644 atomicservicesearch/interfaces/atomicservicesearch.js create mode 100644 atomicservicesearch/source/atomicservicesearch.ets diff --git a/BUILD.gn b/BUILD.gn index c681d2a..ead9200 100644 --- a/BUILD.gn +++ b/BUILD.gn @@ -14,6 +14,7 @@ group("advanced_ui_component") { deps = [ "atomicservicenavigation/interfaces:atomicservicenavigation", + "atomicservicesearch/interfaces:atomicservicesearch", "atomicservicetabs/interfaces:atomicservicetabs", "atomicserviceweb/interfaces:atomicserviceweb", "innerfullscreenlaunchcomponent/interfaces:innerfullscreenlaunchcomponent", diff --git a/atomicservicesearch/interfaces/atomicservicesearch.cpp b/atomicservicesearch/interfaces/atomicservicesearch.cpp new file mode 100644 index 0000000..fd9e9ec --- /dev/null +++ b/atomicservicesearch/interfaces/atomicservicesearch.cpp @@ -0,0 +1,54 @@ +/* + * Copyright (c) 2025 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_atomicservicesearch_abc_start[]; +extern const char _binary_atomicservicesearch_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_atomicservice_AtomicServiceSearch_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_atomicservicesearch_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_atomicservicesearch_abc_end - _binary_atomicservicesearch_abc_start; + } +} + +/* + * Module define + */ +static napi_module AtomicServiceSearchModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "atomicservice.AtomicServiceSearch", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +/* + * Module registerfunction + */ +extern "C" __attribute__((constructor)) void AtomicServiceSearchRegisterModule(void) +{ + napi_module_register(&AtomicServiceSearchModule); +} \ No newline at end of file diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js new file mode 100644 index 0000000..2de5205 --- /dev/null +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -0,0 +1,439 @@ +/* + * Copyright (c) 2025 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 OperationType = requireNapi('arkui.advanced.SubHeader'); +const TEXT_SIZE_BODY1 = { 'id': -1, 'type': -1, params: [`sys.float.ohos_id_text_size_body1`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const TEXT_COLOR_SECONDARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_secondary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const ICON_COLOR_SECONDARY = { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const TEXT_BOX_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const TEXT_COLOR_PRIMARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_primary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const FUNCTION_ICON_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_primary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const EFFECT_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_click_effect`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const FONT_WEIGHT_PRIMARY = 500; +const FONT_WEIGHT_DEFAULT = 400; +const FONT_SIZE = 16; +const MENU_ALIGN_TYPE_START_X = 0; +const MENU_ALIGN_TYPE_START_Y = 0; +const SELECT_CONSTRAINT_SIZE_MIN_HEIGHT = 36; +const SELECT_HEIGHT = 36; +const SELECT_PADDING_LEFT = 6; +const SELECT_MARGIN_LEFT = 2; +const SELECT_SPACE = 2; +const DIVIDER_HEIGHT = 20; +const DIVIDER_OPACITY = 0.6; +const DIVIDER_MARGIN_LEFT = 2; +const DIVIDER_MARGIN_RIGHT = -2; +const FUNCTION_ICON_WIDTH_HEIGHT = 24; +const INDEPENDENT_FUNCTION_POSITION_OFFSET = 0; +const FUNCTION_POSITION_OFFSET = 2; +const INDEPENDENT_FUNCTION_WIDTH_HEIGHT = 40; +const FUNCTION_WIDTH_HEIGHT = 36; +const FLEX_SHRINK = 0; +const INDEPENDENT_FUNCTION_MARGIN = 0; +const FUNCTION_MARGIN_LEFT = 8; +const FUNCTION_MARGIN_RIGHT = 0; +const BORDER_RADIUS = 20; +const SEARCH_HEIGHT = 40; + +export class AtomicServiceSearch extends ViewPU { + + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { + super(parent, __localStorage, elmtId, extraInfo); + if (typeof paramsLambda === 'function') { + this.paramsGenerator_ = paramsLambda; + } + this.__isFunction1Pressed = new ObservedPropertySimplePU(false, this, 'isFunction1Pressed'); + this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, 'isFunction2Pressed'); + this.__isSearchPressed = new ObservedPropertySimplePU(false, this, 'isSearchPressed'); + this.__changeValue = new SynchedPropertySimpleOneWayPU(params.changeValue, this, 'changeValue'); + this.__showImage = new ObservedPropertySimplePU(true, this, 'showImage'); + this.__hint = new SynchedPropertyObjectOneWayPU(params.hint, this, 'hint'); + this.select = undefined; + this.__operationType = new SynchedPropertySimpleOneWayPU(params.operationType, this, 'operationType'); + this.operationItem = undefined; + this.onSearch = undefined; + this.controller = new SearchController(); + this.setInitiallyProvidedValue(params); + this.declareWatch('changeValue', this.onParamsChange); + this.finalizeConstruction(); + } + + setInitiallyProvidedValue(params) { + if (params.isFunction1Pressed !== undefined) { + this.isFunction1Pressed = params.isFunction1Pressed; + } + if (params.isFunction2Pressed !== undefined) { + this.isFunction2Pressed = params.isFunction2Pressed; + } + if (params.isSearchPressed !== undefined) { + this.isSearchPressed = params.isSearchPressed; + } + if (params.changeValue === undefined) { + this.__changeValue.set(''); + } + if (params.showImage !== undefined) { + this.showImage = params.showImage; + } + if (params.hint === undefined) { + this.__hint.set('Search'); + } + if (params.select !== undefined) { + this.select = params.select; + } + if (params.operationType === undefined) { + this.__operationType.set(OperationType.BUTTON); + } + if (params.operationItem !== undefined) { + this.operationItem = params.operationItem; + } + if (params.onSearch !== undefined) { + this.onSearch = params.onSearch; + } + if (params.controller !== undefined) { + this.controller = params.controller; + } + } + + updateStateVars(params) { + this.__changeValue.reset(params.changeValue); + this.__hint.reset(params.hint); + this.__operationType.reset(params.operationType); + } + + purgeVariableDependenciesOnElmtId(rmElmtId) { + this.__isFunction1Pressed.purgeDependencyOnElmtId(rmElmtId); + this.__isFunction2Pressed.purgeDependencyOnElmtId(rmElmtId); + this.__isSearchPressed.purgeDependencyOnElmtId(rmElmtId); + this.__changeValue.purgeDependencyOnElmtId(rmElmtId); + this.__showImage.purgeDependencyOnElmtId(rmElmtId); + this.__hint.purgeDependencyOnElmtId(rmElmtId); + this.__operationType.purgeDependencyOnElmtId(rmElmtId); + } + + aboutToBeDeleted() { + this.__isFunction1Pressed.aboutToBeDeleted(); + this.__isFunction2Pressed.aboutToBeDeleted(); + this.__isSearchPressed.aboutToBeDeleted(); + this.__changeValue.aboutToBeDeleted(); + this.__showImage.aboutToBeDeleted(); + this.__hint.aboutToBeDeleted(); + this.__operationType.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal(); + } + + get isFunction1Pressed() { + return this.__isFunction1Pressed.get(); + } + + set isFunction1Pressed(newValue) { + this.__isFunction1Pressed.set(newValue); + } + + get isFunction2Pressed() { + return this.__isFunction2Pressed.get(); + } + + set isFunction2Pressed(newValue) { + this.__isFunction2Pressed.set(newValue); + } + + get isSearchPressed() { + return this.__isSearchPressed.get(); + } + + set isSearchPressed(newValue) { + this.__isSearchPressed.set(newValue); + } + + get changeValue() { + return this.__changeValue.get(); + } + + set changeValue(newValue) { + this.__changeValue.set(newValue); + } + + get showImage() { + return this.__showImage.get(); + } + + set showImage(newValue) { + this.__showImage.set(newValue); + } + + get hint() { + return this.__hint.get(); + } + + set hint(newValue) { + this.__hint.set(newValue); + } + + get operationType() { + return this.__operationType.get(); + } + + set operationType(newValue) { + this.__operationType.set(newValue); + } + + onParamsChange() { + this.showImage = this.changeValue.length === 0 ? true : false; + } + + renderSearch(parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Search.create({ value: this.changeValue, placeholder: this.hint, controller: this.controller }); + Search.backgroundColor(Color.Transparent); + Search.placeholderFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }); + Search.textFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }); + Search.fontColor(TEXT_COLOR_SECONDARY); + Search.searchIcon({ color: ICON_COLOR_SECONDARY }); + Search.onSubmit(this.onSearch?.onSubmit); + Search.onChange((value, previewText) => { + if (typeof this.onSearch?.onChange !== 'undefined') { + this.onSearch?.onChange(value, previewText); + } + this.changeValue = value; + }); + Search.onCopy(this.onSearch?.onCopy); + Search.onCut(this.onSearch?.onCut); + Search.onPaste(this.onSearch?.onPaste); + Search.onTextSelectionChange(this.onSearch?.onTextSelectionChange); + Search.onContentScroll(this.onSearch?.onContentScroll); + Search.onEditChange(this.onSearch?.onEditChange); + Search.onWillInsert(this.onSearch?.onWillInsert); + Search.onDidInsert(this.onSearch?.onDidInsert); + Search.onWillDelete(this.onSearch?.onWillDelete); + Search.onDidDelete(this.onSearch?.onDidDelete); + Search.onTouch((event) => { + if (event && event.type === TouchType.Down) { + this.isSearchPressed = true; + } + else if (event && event.type === TouchType.Up) { + this.isSearchPressed = false; + } + }); + }, Search); + Search.pop(); + } + + renderSelect(parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (typeof this.select !== 'undefined' && this.select.options.length !== 0) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Row.create(); + Row.flexShrink(FLEX_SHRINK); + }, Row); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Select.create(this.select?.options); + Select.value(this.select?.value); + Select.selected(this.select?.selected); + Select.onSelect(this.select?.onSelect); + Select.font({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_PRIMARY }); + Select.fontColor(TEXT_COLOR_PRIMARY); + Select.selectedOptionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }); + Select.menuAlign(MenuAlignType.START, { dx: MENU_ALIGN_TYPE_START_X, dy: MENU_ALIGN_TYPE_START_Y }); + Select.optionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }); + Select.backgroundColor(Color.Transparent); + Select.arrowPosition(ArrowPosition.END); + Select.constraintSize({ minHeight: SELECT_CONSTRAINT_SIZE_MIN_HEIGHT }); + Select.padding({ left: SELECT_PADDING_LEFT }); + Select.margin({ left: SELECT_MARGIN_LEFT }); + Select.height(SELECT_HEIGHT); + Select.space(SELECT_SPACE); + }, Select); + Select.pop(); + this.renderDivider.bind(this)(); + Row.pop(); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); + } + + renderDivider(parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Divider.create(); + Divider.vertical(true); + Divider.height(DIVIDER_HEIGHT); + Divider.color(Color.Black); + Divider.opacity(DIVIDER_OPACITY); + Divider.margin({ left: DIVIDER_MARGIN_LEFT, right: DIVIDER_MARGIN_RIGHT }); + }, Divider); + } + + renderFunction(item, independentOrNot, parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Row.create(); + Row.position(independentOrNot ? + { top: INDEPENDENT_FUNCTION_POSITION_OFFSET, right: INDEPENDENT_FUNCTION_POSITION_OFFSET } : + { top: FUNCTION_POSITION_OFFSET, right: FUNCTION_POSITION_OFFSET }); + Row.width(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT); + Row.height(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT); + Row.flexShrink(FLEX_SHRINK); + Row.borderRadius(BORDER_RADIUS); + Row.onClick(item.action); + Row.alignItems(VerticalAlign.Center); + Row.justifyContent(FlexAlign.Center); + Row.margin(independentOrNot ? INDEPENDENT_FUNCTION_MARGIN : + { left: FUNCTION_MARGIN_LEFT, right: FUNCTION_MARGIN_RIGHT }); + Row.backgroundColor(independentOrNot ? + (this.isFunction2Pressed ? EFFECT_COLOR : Color.Transparent) : + (this.isFunction1Pressed ? EFFECT_COLOR : Color.Transparent)); + Row.onTouch((event) => { + if (event && event.type === TouchType.Down) { + if (independentOrNot) { + this.isFunction2Pressed = true; + } + else { + this.isFunction1Pressed = true; + } + } + else if (event && event.type === TouchType.Up) { + if (independentOrNot) { + this.isFunction2Pressed = false; + } + else { + this.isFunction1Pressed = false; + } + } + }); + }, Row); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Image.create(item.value); + Image.width(FUNCTION_ICON_WIDTH_HEIGHT); + Image.height(FUNCTION_ICON_WIDTH_HEIGHT); + Image.fillColor(FUNCTION_ICON_COLOR); + Image.objectFit(ImageFit.Contain); + }, Image); + Row.pop(); + } + + initialRender() { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Row.create(); + }, Row); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Flex.create({ + direction: FlexDirection.Row, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Start + }); + Flex.height(SEARCH_HEIGHT); + Flex.borderRadius(BORDER_RADIUS); + Flex.backgroundColor((typeof this.operationItem !== 'undefined' && this.operationItem?.length >= 2) ? + Color.Transparent : (this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR)); + }, Flex); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (typeof this.operationItem === 'undefined' || this.operationItem?.length === 0) { + this.ifElseBranchUpdateFunction(0, () => { + this.renderSelect.bind(this)(); + this.renderSearch.bind(this)(); + }); + } else if (this.operationItem?.length === 1) { + this.ifElseBranchUpdateFunction(1, () => { + this.renderSelect.bind(this)(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Stack.create(); + }, Stack); + this.renderSearch.bind(this)(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (this.showImage) { + this.ifElseBranchUpdateFunction(0, () => { + this.renderFunction.bind(this)(this.operationItem[0], false); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); + Stack.pop(); + }); + } else if (this.operationItem?.length >= 2) { + this.ifElseBranchUpdateFunction(2, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Flex.create({ + direction: FlexDirection.Row, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.SpaceBetween + }); + Flex.height(SEARCH_HEIGHT); + Flex.borderRadius(BORDER_RADIUS); + Flex.backgroundColor(this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR); + }, Flex); + this.renderSelect.bind(this)(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Stack.create(); + }, Stack); + this.renderSearch.bind(this)(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (this.showImage) { + this.ifElseBranchUpdateFunction(0, () => { + this.renderFunction.bind(this)(this.operationItem[0], false); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); + Stack.pop(); + Flex.pop(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Row.create(); + Row.width(INDEPENDENT_FUNCTION_WIDTH_HEIGHT); + Row.height(INDEPENDENT_FUNCTION_WIDTH_HEIGHT); + Row.flexShrink(FLEX_SHRINK); + Row.borderRadius(BORDER_RADIUS); + Row.margin({ left: FUNCTION_MARGIN_LEFT }); + Row.backgroundColor(TEXT_BOX_COLOR); + }, Row); + this.renderFunction.bind(this)(this.operationItem[1], true); + Row.pop(); + }); + } + else { + this.ifElseBranchUpdateFunction(3, () => { + }); + } + }, If); + If.pop(); + Flex.pop(); + Row.pop(); + } + + rerender() { + this.updateDirtyElements(); + } +} + +export default { AtomicServiceSearch }; diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets new file mode 100644 index 0000000..e7d7902 --- /dev/null +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -0,0 +1,254 @@ +​/* + * Copyright (c) 2025 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 { OperationType, SelectOptions, OperationOption } from '@ohos.arkui.advanced.SubHeader'; + +const TEXT_SIZE_BODY1: Resource = $r(`sys.float.ohos_id_text_size_body1`); +const TEXT_COLOR_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); +const ICON_COLOR_SECONDARY = $r('sys.color.ohos_id_color_secondary'); +const TEXT_BOX_COLOR = $r(`sys.color.ohos_id_color_text_field_sub_bg`); +const TEXT_COLOR_PRIMARY = $r(`sys.color.ohos_id_color_text_primary`); +const FUNCTION_ICON_COLOR = $r(`sys.color.ohos_id_color_primary`); +const EFFECT_COLOR = $r(`sys.color.ohos_id_color_click_effect`); +const FONT_WEIGHT_PRIMARY: number = 500; +const FONT_WEIGHT_DEFAULT: number = 400; +const FONT_SIZE: number = 16; +const MENU_ALIGN_TYPE_START_X: number = 0; +const MENU_ALIGN_TYPE_START_Y: number = 0; +const SELECT_CONSTRAINT_SIZE_MIN_HEIGHT: number = 36; +const SELECT_HEIGHT: number = 36; +const SELECT_PADDING_LEFT: number = 6; +const SELECT_MARGIN_LEFT: number = 2; +const SELECT_SPACE: number = 2; +const DIVIDER_HEIGHT: number = 20; +const DIVIDER_OPACITY: number = 0.6; +const DIVIDER_MARGIN_LEFT: number = 2; +const DIVIDER_MARGIN_RIGHT: number = -2; +const FUNCTION_ICON_WIDTH_HEIGHT: number = 24; +const INDEPENDENT_FUNCTION_POSITION_OFFSET: number = 0; +const FUNCTION_POSITION_OFFSET: number = 2; +const INDEPENDENT_FUNCTION_WIDTH_HEIGHT: number = 40; +const FUNCTION_WIDTH_HEIGHT: number = 36; +const FLEX_SHRINK: number = 0; +const INDEPENDENT_FUNCTION_MARGIN: number = 0; +const FUNCTION_MARGIN_LEFT: number = 8; +const FUNCTION_MARGIN_right: number = 0; +const BORDER_RADIUS: number = 20; +const SEARCH_HEIGHT: number = 40; + +export interface OnSearchEvent { + onSubmit?: (value: string) => void; + onChange?: EditableTextOnChangeCallback; + onCopy?: (value: string) => void; + onCut?: (value: string) => void; + onPaste?: (value: string, event: PasteEvent) => void; + onTextSelectionChange?: (selectionStart: number, selectionEnd: number) => void; + onContentScroll?: (totalOffsetX: number, totalOffsetY: number) => void; + onEditChange?: Callback; + onWillInsert?: Callback; + onDidInsert?: Callback; + onWillDelete?: Callback; + onDidDelete?: Callback; +} + + +@Component +export struct AtomicServiceSearch { + @State private isFunction1Pressed: boolean = false; + @State private isFunction2Pressed: boolean = false; + @State private isSearchPressed: boolean = false; + @Watch('onParamsChange') @Prop changeValue: string = ''; + @State private showImage: boolean = true; + @Prop hint?: ResourceStr = 'Search'; + select?: SelectOptions; + @Prop operationType?: OperationType = OperationType.BUTTON; + operationItem?: Array; + onSearch?: OnSearchEvent; + private controller: SearchController = new SearchController(); + + private onParamsChange(): void { + this.showImage = this.changeValue.length === 0 ? true : false; + } + + @Builder + renderSearch() { + Search({ value: this.changeValue, placeholder: this.hint, controller: this.controller }) + .backgroundColor(Color.Transparent) + .placeholderFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }) + .textFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }) + .fontColor(TEXT_COLOR_SECONDARY) + .searchIcon({ color: ICON_COLOR_SECONDARY }) + .onSubmit(this.onSearch?.onSubmit) + .onChange((value: string, previewText?: PreviewText) => { + if (typeof this.onSearch?.onChange !== 'undefined') { + this.onSearch?.onChange(value, previewText); + } + this.changeValue = value; + }) + .onCopy(this.onSearch?.onCopy) + .onCut(this.onSearch?.onCut) + .onPaste(this.onSearch?.onPaste) + .onTextSelectionChange(this.onSearch?.onTextSelectionChange) + .onContentScroll(this.onSearch?.onContentScroll) + .onEditChange(this.onSearch?.onEditChange) + .onWillInsert(this.onSearch?.onWillInsert) + .onDidInsert(this.onSearch?.onDidInsert) + .onWillDelete(this.onSearch?.onWillDelete) + .onDidDelete(this.onSearch?.onDidDelete) + .onTouch((event?: TouchEvent) => { + if (event && event.type === TouchType.Down) { + this.isSearchPressed = true; + } else if (event && event.type === TouchType.Up) { + this.isSearchPressed = false; + } + }) + } + + @Builder + renderSelect() { + if (typeof this.select !== 'undefined' && this.select.options.length !== 0) { + Row() { + Select(this.select?.options)// 下拉选项内容 + .value(this.select?.value)// 下拉按钮本身的文本内容 + .selected(this.select?.selected)// 设置下拉菜单初始选项的索引 + .onSelect(this.select?.onSelect)// 下拉菜单选中某一项的回调 + .font({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_PRIMARY })// 配置文字大小 + .fontColor(TEXT_COLOR_PRIMARY)// 配置文字颜色 + .selectedOptionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }) + .menuAlign(MenuAlignType.START, { dx: MENU_ALIGN_TYPE_START_X, dy: MENU_ALIGN_TYPE_START_Y }) + .optionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }) + .backgroundColor(Color.Transparent) + .arrowPosition(ArrowPosition.END) + .constraintSize({ minHeight: SELECT_CONSTRAINT_SIZE_MIN_HEIGHT }) + .padding({ left: SELECT_PADDING_LEFT }) + .margin({ left: SELECT_MARGIN_LEFT }) + .height(SELECT_HEIGHT) + .space(SELECT_SPACE) + this.renderDivider(); + } + .flexShrink(FLEX_SHRINK) + } + } + + @Builder + renderDivider() { + Divider() + .vertical(true) + .height(DIVIDER_HEIGHT) + .color(Color.Black) + .opacity(DIVIDER_OPACITY) + .margin({ left: DIVIDER_MARGIN_LEFT, right: DIVIDER_MARGIN_RIGHT }) + } + + @Builder + renderFunction(item: OperationOption, independentOrNot: boolean) { + Row() { + Image(item.value) + .width(FUNCTION_ICON_WIDTH_HEIGHT) + .height(FUNCTION_ICON_WIDTH_HEIGHT) + .fillColor(FUNCTION_ICON_COLOR) + .objectFit(ImageFit.Contain) + } + .position(independentOrNot ? + { top: INDEPENDENT_FUNCTION_POSITION_OFFSET, right: INDEPENDENT_FUNCTION_POSITION_OFFSET } : + { top: FUNCTION_POSITION_OFFSET, right: FUNCTION_POSITION_OFFSET }) + .width(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT) + .height(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT) + .flexShrink(FLEX_SHRINK) + .borderRadius(BORDER_RADIUS) + .onClick(item.action) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .margin(independentOrNot ? INDEPENDENT_FUNCTION_MARGIN : + { left: FUNCTION_MARGIN_LEFT, right: FUNCTION_MARGIN_right }) + .backgroundColor(independentOrNot ? + (this.isFunction2Pressed ? EFFECT_COLOR : Color.Transparent) : + (this.isFunction1Pressed ? EFFECT_COLOR : Color.Transparent) + ) + .onTouch((event?: TouchEvent) => { + if (event && event.type === TouchType.Down) { + if (independentOrNot) { + this.isFunction2Pressed = true; + } else { + this.isFunction1Pressed = true; + } + } else if (event && event.type === TouchType.Up) { + if (independentOrNot) { + this.isFunction2Pressed = false; + } else { + this.isFunction1Pressed = false; + } + } + }) + } + + build() { + Row() { + Flex({ + direction: FlexDirection.Row, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Start + }) { + if (typeof this.operationItem === 'undefined' || this.operationItem?.length === 0) { + this.renderSelect(); + this.renderSearch(); + } + else if (this.operationItem?.length === 1) { + this.renderSelect(); + Stack() { + this.renderSearch(); + if (this.showImage) { + this.renderFunction(this.operationItem[0], false); + } + } + } + else if (this.operationItem?.length >= 2) { + Flex({ + direction: FlexDirection.Row, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.SpaceBetween + }) { + this.renderSelect(); + Stack() { + this.renderSearch(); + if (this.showImage) { + this.renderFunction(this.operationItem[0], false); + } + } + } + .height(SEARCH_HEIGHT) + .borderRadius(BORDER_RADIUS) + .backgroundColor(this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR) + + Row() { + this.renderFunction(this.operationItem[1], true); + } + .width(INDEPENDENT_FUNCTION_WIDTH_HEIGHT) + .height(INDEPENDENT_FUNCTION_WIDTH_HEIGHT) + .flexShrink(FLEX_SHRINK) + .borderRadius(BORDER_RADIUS) + .margin({ left: FUNCTION_MARGIN_LEFT }) + .backgroundColor(TEXT_BOX_COLOR) + } + } + .height(SEARCH_HEIGHT) + .borderRadius(BORDER_RADIUS) + .backgroundColor((typeof this.operationItem !== 'undefined' && this.operationItem?.length >= 2) ? + Color.Transparent : (this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR)) + } + } +} + +​ \ No newline at end of file diff --git a/bundle.json b/bundle.json index ca80fc0..92b2aee 100644 --- a/bundle.json +++ b/bundle.json @@ -26,6 +26,7 @@ "build": { "sub_component": [ "//foundation/arkui/advanced_ui_component/atomicservicenavigation/interfaces:atomicservicenavigation", + "//foundation/arkui/advanced_ui_component/atomicservicesearch/interfaces:atomicservicesearch", "//foundation/arkui/advanced_ui_component/atomicservicetabs/interfaces:atomicservicetabs", "//foundation/arkui/advanced_ui_component/atomicserviceweb/interfaces:atomicserviceweb", "//foundation/arkui/advanced_ui_component/innerfullscreenlaunchcomponent/interfaces:innerfullscreenlaunchcomponent", -- Gitee From 447fc95a0ca893ad58869e6d68b694b6884b5813 Mon Sep 17 00:00:00 2001 From: jiyu Date: Mon, 20 Jan 2025 12:28:53 +0000 Subject: [PATCH 02/11] =?UTF-8?q?=E5=A2=9E=E5=8A=A0build.gn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- atomicservicesearch/interfaces/BUILD.gn | 57 +++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 atomicservicesearch/interfaces/BUILD.gn diff --git a/atomicservicesearch/interfaces/BUILD.gn b/atomicservicesearch/interfaces/BUILD.gn new file mode 100644 index 0000000..9fdf586 --- /dev/null +++ b/atomicservicesearch/interfaces/BUILD.gn @@ -0,0 +1,57 @@ +# Copyright (c) 2025 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/config/components/ets_frontend/es2abc_config.gni") +import("//build/ohos.gni") +import("//foundation/arkui/advanced_ui_component/atomicservice_config.gni") + +es2abc_gen_abc("gen_atomicservicesearch_abc") { + src_js = rebase_path("atomicservicesearch.js") + dst_file = rebase_path(target_out_dir + "/atomicservicesearch.abc") + in_puts = [ "atomicservicesearch.js" ] + out_puts = [ target_out_dir + "/atomicservicesearch.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("atomicservicesearch_abc") { + input = get_label_info(":gen_atomicservicesearch_abc", "target_out_dir") + + "/atomicservicesearch.abc" + output = target_out_dir + "/atomicservicesearch_abc.o" + dep = ":gen_atomicservicesearch_abc" +} + +gen_obj("atomicservicesearch_abc_preview") { + input = get_label_info(":gen_atomicservicesearch_abc", "target_out_dir") + + "/atomicservicesearch.abc" + output = target_out_dir + "/atomicservicesearch_abc.c" + snapshot_dep = [ ":gen_atomicservicesearch_abc" ] +} + +ohos_shared_library("atomicservicesearch") { + sources = [ "atomicservicesearch.cpp" ] + + if (use_mingw_win || use_mac || use_linux) { + deps = [ ":gen_obj_src_atomicservicesearch_abc_preview" ] + } else { + deps = [ ":atomicservicesearch_abc" ] + } + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + relative_install_dir = "module/atomicservice" + subsystem_name = "arkui" + part_name = "advanced_ui_component" +} -- Gitee From 296d231fabb41a11bb3e357cdb50dd7b56eb31e8 Mon Sep 17 00:00:00 2001 From: jiyu Date: Mon, 27 Jan 2025 01:12:27 +0000 Subject: [PATCH 03/11] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=A0=E6=95=88?= =?UTF-8?q?=E7=A9=BA=E8=A1=8C=E5=8F=8A=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- atomicservicesearch/source/atomicservicesearch.ets | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index e7d7902..5e93c4c 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -63,7 +63,6 @@ export interface OnSearchEvent { onDidDelete?: Callback; } - @Component export struct AtomicServiceSearch { @State private isFunction1Pressed: boolean = false; @@ -120,12 +119,12 @@ export struct AtomicServiceSearch { renderSelect() { if (typeof this.select !== 'undefined' && this.select.options.length !== 0) { Row() { - Select(this.select?.options)// 下拉选项内容 - .value(this.select?.value)// 下拉按钮本身的文本内容 - .selected(this.select?.selected)// 设置下拉菜单初始选项的索引 - .onSelect(this.select?.onSelect)// 下拉菜单选中某一项的回调 - .font({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_PRIMARY })// 配置文字大小 - .fontColor(TEXT_COLOR_PRIMARY)// 配置文字颜色 + Select(this.select?.options) + .value(this.select?.value) + .selected(this.select?.selected) + .onSelect(this.select?.onSelect) + .font({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_PRIMARY }) + .fontColor(TEXT_COLOR_PRIMARY) .selectedOptionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }) .menuAlign(MenuAlignType.START, { dx: MENU_ALIGN_TYPE_START_X, dy: MENU_ALIGN_TYPE_START_Y }) .optionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }) -- Gitee From 0d5ebfa9aaf39b46bbd83188c046e0013cb74be9 Mon Sep 17 00:00:00 2001 From: jiyu Date: Fri, 7 Feb 2025 07:38:17 +0000 Subject: [PATCH 04/11] =?UTF-8?q?=E9=95=9C=E5=83=8F=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E5=85=BC=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 98 +++++++++++-------- .../source/atomicservicesearch.ets | 47 +++++---- 2 files changed, 84 insertions(+), 61 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index 2de5205..28d4c83 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -13,17 +13,20 @@ * limitations under the License. */ -if (!('finalizeConstruction' in ViewPU.prototype)) { - Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { }); +if (!("finalizeConstruction" in ViewPU.prototype)) { + Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } + const OperationType = requireNapi('arkui.advanced.SubHeader'); -const TEXT_SIZE_BODY1 = { 'id': -1, 'type': -1, params: [`sys.float.ohos_id_text_size_body1`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; -const TEXT_COLOR_SECONDARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_secondary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; -const ICON_COLOR_SECONDARY = { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; -const TEXT_BOX_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; -const TEXT_COLOR_PRIMARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_primary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; -const FUNCTION_ICON_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_primary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; -const EFFECT_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_click_effect`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const LengthMetrics = requireNapi('arkui.node').LengthMetrics; + +const TEXT_SIZE_BODY1 = { "id": -1, "type": -1, params: [`sys.float.ohos_id_text_size_body1`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const TEXT_COLOR_SECONDARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_secondary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const ICON_COLOR_SECONDARY = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_secondary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const TEXT_BOX_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const TEXT_COLOR_PRIMARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_primary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const FUNCTION_ICON_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_primary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const EFFECT_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_click_effect`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; const FONT_WEIGHT_PRIMARY = 500; const FONT_WEIGHT_DEFAULT = 400; const FONT_SIZE = 16; @@ -57,23 +60,26 @@ export class AtomicServiceSearch extends ViewPU { if (typeof paramsLambda === 'function') { this.paramsGenerator_ = paramsLambda; } + this.__changeValue = new SynchedPropertySimpleOneWayPU(params.changeValue, this, 'changeValue'); this.__isFunction1Pressed = new ObservedPropertySimplePU(false, this, 'isFunction1Pressed'); this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, 'isFunction2Pressed'); this.__isSearchPressed = new ObservedPropertySimplePU(false, this, 'isSearchPressed'); - this.__changeValue = new SynchedPropertySimpleOneWayPU(params.changeValue, this, 'changeValue'); this.__showImage = new ObservedPropertySimplePU(true, this, 'showImage'); this.__hint = new SynchedPropertyObjectOneWayPU(params.hint, this, 'hint'); - this.select = undefined; this.__operationType = new SynchedPropertySimpleOneWayPU(params.operationType, this, 'operationType'); + this.controller = new SearchController(); this.operationItem = undefined; + this.select = undefined; this.onSearch = undefined; - this.controller = new SearchController(); this.setInitiallyProvidedValue(params); this.declareWatch('changeValue', this.onParamsChange); this.finalizeConstruction(); } - + setInitiallyProvidedValue(params) { + if (params.changeValue === undefined) { + this.__changeValue.set(''); + } if (params.isFunction1Pressed !== undefined) { this.isFunction1Pressed = params.isFunction1Pressed; } @@ -83,30 +89,27 @@ export class AtomicServiceSearch extends ViewPU { if (params.isSearchPressed !== undefined) { this.isSearchPressed = params.isSearchPressed; } - if (params.changeValue === undefined) { - this.__changeValue.set(''); - } if (params.showImage !== undefined) { this.showImage = params.showImage; } if (params.hint === undefined) { this.__hint.set('Search'); } - if (params.select !== undefined) { - this.select = params.select; - } if (params.operationType === undefined) { this.__operationType.set(OperationType.BUTTON); } + if (params.controller !== undefined) { + this.controller = params.controller; + } if (params.operationItem !== undefined) { this.operationItem = params.operationItem; } + if (params.select !== undefined) { + this.select = params.select; + } if (params.onSearch !== undefined) { this.onSearch = params.onSearch; } - if (params.controller !== undefined) { - this.controller = params.controller; - } } updateStateVars(params) { @@ -116,20 +119,20 @@ export class AtomicServiceSearch extends ViewPU { } purgeVariableDependenciesOnElmtId(rmElmtId) { + this.__changeValue.purgeDependencyOnElmtId(rmElmtId); this.__isFunction1Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isFunction2Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isSearchPressed.purgeDependencyOnElmtId(rmElmtId); - this.__changeValue.purgeDependencyOnElmtId(rmElmtId); this.__showImage.purgeDependencyOnElmtId(rmElmtId); this.__hint.purgeDependencyOnElmtId(rmElmtId); this.__operationType.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { + this.__changeValue.aboutToBeDeleted(); this.__isFunction1Pressed.aboutToBeDeleted(); this.__isFunction2Pressed.aboutToBeDeleted(); this.__isSearchPressed.aboutToBeDeleted(); - this.__changeValue.aboutToBeDeleted(); this.__showImage.aboutToBeDeleted(); this.__hint.aboutToBeDeleted(); this.__operationType.aboutToBeDeleted(); @@ -137,6 +140,14 @@ export class AtomicServiceSearch extends ViewPU { this.aboutToBeDeletedInternal(); } + get changeValue() { + return this.__changeValue.get(); + } + + set changeValue(newValue) { + this.__changeValue.set(newValue); + } + get isFunction1Pressed() { return this.__isFunction1Pressed.get(); } @@ -161,14 +172,6 @@ export class AtomicServiceSearch extends ViewPU { this.__isSearchPressed.set(newValue); } - get changeValue() { - return this.__changeValue.get(); - } - - set changeValue(newValue) { - this.__changeValue.set(newValue); - } - get showImage() { return this.__showImage.get(); } @@ -256,8 +259,8 @@ export class AtomicServiceSearch extends ViewPU { Select.backgroundColor(Color.Transparent); Select.arrowPosition(ArrowPosition.END); Select.constraintSize({ minHeight: SELECT_CONSTRAINT_SIZE_MIN_HEIGHT }); - Select.padding({ left: SELECT_PADDING_LEFT }); - Select.margin({ left: SELECT_MARGIN_LEFT }); + Select.padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }); + Select.margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }); Select.height(SELECT_HEIGHT); Select.space(SELECT_SPACE); }, Select); @@ -281,7 +284,10 @@ export class AtomicServiceSearch extends ViewPU { Divider.height(DIVIDER_HEIGHT); Divider.color(Color.Black); Divider.opacity(DIVIDER_OPACITY); - Divider.margin({ left: DIVIDER_MARGIN_LEFT, right: DIVIDER_MARGIN_RIGHT }); + Divider.margin({ + start: LengthMetrics.vp(DIVIDER_MARGIN_LEFT), + end: LengthMetrics.vp(DIVIDER_MARGIN_RIGHT) + }); }, Divider); } @@ -289,8 +295,11 @@ export class AtomicServiceSearch extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.position(independentOrNot ? - { top: INDEPENDENT_FUNCTION_POSITION_OFFSET, right: INDEPENDENT_FUNCTION_POSITION_OFFSET } : - { top: FUNCTION_POSITION_OFFSET, right: FUNCTION_POSITION_OFFSET }); + { + top: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET), + end: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET) + } : + { top: LengthMetrics.vp(FUNCTION_POSITION_OFFSET), end: LengthMetrics.vp(FUNCTION_POSITION_OFFSET) }); Row.width(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT); Row.height(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT); Row.flexShrink(FLEX_SHRINK); @@ -298,8 +307,14 @@ export class AtomicServiceSearch extends ViewPU { Row.onClick(item.action); Row.alignItems(VerticalAlign.Center); Row.justifyContent(FlexAlign.Center); - Row.margin(independentOrNot ? INDEPENDENT_FUNCTION_MARGIN : - { left: FUNCTION_MARGIN_LEFT, right: FUNCTION_MARGIN_RIGHT }); + Row.margin(independentOrNot ? + { + start: LengthMetrics.vp(INDEPENDENT_FUNCTION_MARGIN), + } : + { + start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT), + end: LengthMetrics.vp(FUNCTION_MARGIN_RIGHT) + }); Row.backgroundColor(independentOrNot ? (this.isFunction2Pressed ? EFFECT_COLOR : Color.Transparent) : (this.isFunction1Pressed ? EFFECT_COLOR : Color.Transparent)); @@ -331,7 +346,6 @@ export class AtomicServiceSearch extends ViewPU { }, Image); Row.pop(); } - initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); @@ -414,7 +428,7 @@ export class AtomicServiceSearch extends ViewPU { Row.height(INDEPENDENT_FUNCTION_WIDTH_HEIGHT); Row.flexShrink(FLEX_SHRINK); Row.borderRadius(BORDER_RADIUS); - Row.margin({ left: FUNCTION_MARGIN_LEFT }); + Row.margin({ start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT) }); Row.backgroundColor(TEXT_BOX_COLOR); }, Row); this.renderFunction.bind(this)(this.operationItem[1], true); @@ -430,7 +444,7 @@ export class AtomicServiceSearch extends ViewPU { Flex.pop(); Row.pop(); } - + rerender() { this.updateDirtyElements(); } diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index 5e93c4c..955a48a 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -12,8 +12,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -​ + import { OperationType, SelectOptions, OperationOption } from '@ohos.arkui.advanced.SubHeader'; +import { LengthMetrics } from '@kit.ArkUI'; const TEXT_SIZE_BODY1: Resource = $r(`sys.float.ohos_id_text_size_body1`); const TEXT_COLOR_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); @@ -44,7 +45,7 @@ const FUNCTION_WIDTH_HEIGHT: number = 36; const FLEX_SHRINK: number = 0; const INDEPENDENT_FUNCTION_MARGIN: number = 0; const FUNCTION_MARGIN_LEFT: number = 8; -const FUNCTION_MARGIN_right: number = 0; +const FUNCTION_MARGIN_RIGHT: number = 0; const BORDER_RADIUS: number = 20; const SEARCH_HEIGHT: number = 40; @@ -65,17 +66,17 @@ export interface OnSearchEvent { @Component export struct AtomicServiceSearch { + @Watch('onParamsChange') @Prop changeValue: string = ''; @State private isFunction1Pressed: boolean = false; @State private isFunction2Pressed: boolean = false; @State private isSearchPressed: boolean = false; - @Watch('onParamsChange') @Prop changeValue: string = ''; @State private showImage: boolean = true; @Prop hint?: ResourceStr = 'Search'; - select?: SelectOptions; @Prop operationType?: OperationType = OperationType.BUTTON; + private controller: SearchController = new SearchController(); operationItem?: Array; + select?: SelectOptions; onSearch?: OnSearchEvent; - private controller: SearchController = new SearchController(); private onParamsChange(): void { this.showImage = this.changeValue.length === 0 ? true : false; @@ -131,8 +132,8 @@ export struct AtomicServiceSearch { .backgroundColor(Color.Transparent) .arrowPosition(ArrowPosition.END) .constraintSize({ minHeight: SELECT_CONSTRAINT_SIZE_MIN_HEIGHT }) - .padding({ left: SELECT_PADDING_LEFT }) - .margin({ left: SELECT_MARGIN_LEFT }) + .padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }) + .margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }) .height(SELECT_HEIGHT) .space(SELECT_SPACE) this.renderDivider(); @@ -148,7 +149,10 @@ export struct AtomicServiceSearch { .height(DIVIDER_HEIGHT) .color(Color.Black) .opacity(DIVIDER_OPACITY) - .margin({ left: DIVIDER_MARGIN_LEFT, right: DIVIDER_MARGIN_RIGHT }) + .margin({ + start: LengthMetrics.vp(DIVIDER_MARGIN_LEFT), + end: LengthMetrics.vp(DIVIDER_MARGIN_RIGHT) + }) } @Builder @@ -161,8 +165,11 @@ export struct AtomicServiceSearch { .objectFit(ImageFit.Contain) } .position(independentOrNot ? - { top: INDEPENDENT_FUNCTION_POSITION_OFFSET, right: INDEPENDENT_FUNCTION_POSITION_OFFSET } : - { top: FUNCTION_POSITION_OFFSET, right: FUNCTION_POSITION_OFFSET }) + { + top: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET), + end: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET) + } : + { top: LengthMetrics.vp(FUNCTION_POSITION_OFFSET), end: LengthMetrics.vp(FUNCTION_POSITION_OFFSET) }) .width(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT) .height(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT) .flexShrink(FLEX_SHRINK) @@ -170,8 +177,14 @@ export struct AtomicServiceSearch { .onClick(item.action) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) - .margin(independentOrNot ? INDEPENDENT_FUNCTION_MARGIN : - { left: FUNCTION_MARGIN_LEFT, right: FUNCTION_MARGIN_right }) + .margin(independentOrNot ? + { + start: LengthMetrics.vp(INDEPENDENT_FUNCTION_MARGIN), + } : + { + start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT), + end: LengthMetrics.vp(FUNCTION_MARGIN_RIGHT) + }) .backgroundColor(independentOrNot ? (this.isFunction2Pressed ? EFFECT_COLOR : Color.Transparent) : (this.isFunction1Pressed ? EFFECT_COLOR : Color.Transparent) @@ -203,8 +216,7 @@ export struct AtomicServiceSearch { if (typeof this.operationItem === 'undefined' || this.operationItem?.length === 0) { this.renderSelect(); this.renderSearch(); - } - else if (this.operationItem?.length === 1) { + } else if (this.operationItem?.length === 1) { this.renderSelect(); Stack() { this.renderSearch(); @@ -212,8 +224,7 @@ export struct AtomicServiceSearch { this.renderFunction(this.operationItem[0], false); } } - } - else if (this.operationItem?.length >= 2) { + } else if (this.operationItem?.length >= 2) { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, @@ -238,7 +249,7 @@ export struct AtomicServiceSearch { .height(INDEPENDENT_FUNCTION_WIDTH_HEIGHT) .flexShrink(FLEX_SHRINK) .borderRadius(BORDER_RADIUS) - .margin({ left: FUNCTION_MARGIN_LEFT }) + .margin({ start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT) }) .backgroundColor(TEXT_BOX_COLOR) } } @@ -249,5 +260,3 @@ export struct AtomicServiceSearch { } } } - -​ \ No newline at end of file -- Gitee From d9f6e18089e3def3746126d8fc214875de22d3f6 Mon Sep 17 00:00:00 2001 From: jiyu Date: Wed, 12 Feb 2025 08:16:27 +0000 Subject: [PATCH 05/11] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9A=B4=E9=9C=B2Selec?= =?UTF-8?q?t=E5=8F=8ASearch=E6=A0=B7=E5=BC=8F=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 630 ++++++++++-------- .../source/atomicservicesearch.ets | 501 +++++++++----- 2 files changed, 681 insertions(+), 450 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index 28d4c83..ee60736 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -17,69 +17,53 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } -const OperationType = requireNapi('arkui.advanced.SubHeader'); const LengthMetrics = requireNapi('arkui.node').LengthMetrics; const TEXT_SIZE_BODY1 = { "id": -1, "type": -1, params: [`sys.float.ohos_id_text_size_body1`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const TEXT_COLOR_SECONDARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_secondary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const COLOR_TEXT_SECONDARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_secondary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; const ICON_COLOR_SECONDARY = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_secondary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const TEXT_BOX_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const ATOMIC_SERVICE_SEARCH_BG_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; const TEXT_COLOR_PRIMARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_primary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; const FUNCTION_ICON_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_primary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; const EFFECT_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_click_effect`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const FONT_WEIGHT_PRIMARY = 500; -const FONT_WEIGHT_DEFAULT = 400; -const FONT_SIZE = 16; -const MENU_ALIGN_TYPE_START_X = 0; -const MENU_ALIGN_TYPE_START_Y = 0; -const SELECT_CONSTRAINT_SIZE_MIN_HEIGHT = 36; -const SELECT_HEIGHT = 36; +const ICON_SIZE = 16; const SELECT_PADDING_LEFT = 6; const SELECT_MARGIN_LEFT = 2; -const SELECT_SPACE = 2; -const DIVIDER_HEIGHT = 20; +const FLEX_SHRINK = 0; const DIVIDER_OPACITY = 0.6; const DIVIDER_MARGIN_LEFT = 2; const DIVIDER_MARGIN_RIGHT = -2; -const FUNCTION_ICON_WIDTH_HEIGHT = 24; -const INDEPENDENT_FUNCTION_POSITION_OFFSET = 0; -const FUNCTION_POSITION_OFFSET = 2; -const INDEPENDENT_FUNCTION_WIDTH_HEIGHT = 40; -const FUNCTION_WIDTH_HEIGHT = 36; -const FLEX_SHRINK = 0; -const INDEPENDENT_FUNCTION_MARGIN = 0; -const FUNCTION_MARGIN_LEFT = 8; -const FUNCTION_MARGIN_RIGHT = 0; -const BORDER_RADIUS = 20; -const SEARCH_HEIGHT = 40; - +const ATOMIC_SERVICE_SEARCH_HEIGHT = 40; +const ATMOIC_SELECT_HEIGHT = 36; +const ATOMIC_SELECT_BORDER_RADIUS = 20; +const ATOMIC_DIVIDER_HEIGHT = 20; +const ICON_WIDTH_AND_HEIGTH = 24; +const OPERATION_ITEM1_MARGIN_RIGHT = 2; +const OPERATION_ITEM2_MARGIN_LEFT = 8; export class AtomicServiceSearch extends ViewPU { - constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); - if (typeof paramsLambda === 'function') { + if (typeof paramsLambda === "function") { this.paramsGenerator_ = paramsLambda; } - this.__changeValue = new SynchedPropertySimpleOneWayPU(params.changeValue, this, 'changeValue'); - this.__isFunction1Pressed = new ObservedPropertySimplePU(false, this, 'isFunction1Pressed'); - this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, 'isFunction2Pressed'); - this.__isSearchPressed = new ObservedPropertySimplePU(false, this, 'isSearchPressed'); - this.__showImage = new ObservedPropertySimplePU(true, this, 'showImage'); - this.__hint = new SynchedPropertyObjectOneWayPU(params.hint, this, 'hint'); - this.__operationType = new SynchedPropertySimpleOneWayPU(params.operationType, this, 'operationType'); + this.__isFunction1Pressed = new ObservedPropertySimplePU(false, this, "isFunction1Pressed"); + this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, "isFunction2Pressed"); + this.__isSearchPressed = new ObservedPropertySimplePU(false, this, "isSearchPressed"); + this.__showImage = new ObservedPropertySimplePU(true, this, "showImage"); + this.__value = new SynchedPropertySimpleOneWayPU(params.value, this, "value"); + this.__placeholder = new SynchedPropertyObjectOneWayPU(params.placeholder, this, "placeholder"); this.controller = new SearchController(); - this.operationItem = undefined; - this.select = undefined; - this.onSearch = undefined; + this.selectItems = undefined; + this.__selectStyle = new SynchedPropertyObjectOneWayPU(params.selectStyle, this, "selectStyle"); + this.searchEvents = undefined; + this.__searchStyle = new SynchedPropertyObjectOneWayPU(params.searchStyle, this, "searchStyle"); + this.operationItem1 = undefined; + this.operationItem2 = undefined; this.setInitiallyProvidedValue(params); - this.declareWatch('changeValue', this.onParamsChange); + this.declareWatch("value", this.onParamsChange); this.finalizeConstruction(); } - setInitiallyProvidedValue(params) { - if (params.changeValue === undefined) { - this.__changeValue.set(''); - } if (params.isFunction1Pressed !== undefined) { this.isFunction1Pressed = params.isFunction1Pressed; } @@ -92,139 +76,307 @@ export class AtomicServiceSearch extends ViewPU { if (params.showImage !== undefined) { this.showImage = params.showImage; } - if (params.hint === undefined) { - this.__hint.set('Search'); + if (params.value === undefined) { + this.__value.set(''); } - if (params.operationType === undefined) { - this.__operationType.set(OperationType.BUTTON); + if (params.placeholder === undefined) { + this.__placeholder.set('Search'); } if (params.controller !== undefined) { this.controller = params.controller; } - if (params.operationItem !== undefined) { - this.operationItem = params.operationItem; + if (params.selectItems !== undefined) { + this.selectItems = params.selectItems; + } + if (params.selectStyle === undefined) { + this.__selectStyle.set({ + font: { + size: TEXT_SIZE_BODY1, + }, + fontColor: TEXT_COLOR_PRIMARY + }); + } + if (params.searchEvents !== undefined) { + this.searchEvents = params.searchEvents; + } + if (params.searchStyle === undefined) { + this.__searchStyle.set({ + componentBackgroundColor: ATOMIC_SERVICE_SEARCH_BG_COLOR, + placeholderFont: { + size: TEXT_SIZE_BODY1, + }, + placeholderColor: COLOR_TEXT_SECONDARY, + textFont: { + size: TEXT_SIZE_BODY1, + }, + fontColor: COLOR_TEXT_SECONDARY, + searchIcon: { + size: ICON_SIZE, + color: ICON_COLOR_SECONDARY, + }, + pressBackgroundColor: EFFECT_COLOR + }); } - if (params.select !== undefined) { - this.select = params.select; + if (params.operationItem1 !== undefined) { + this.operationItem1 = params.operationItem1; } - if (params.onSearch !== undefined) { - this.onSearch = params.onSearch; + if (params.operationItem2 !== undefined) { + this.operationItem2 = params.operationItem2; } } - updateStateVars(params) { - this.__changeValue.reset(params.changeValue); - this.__hint.reset(params.hint); - this.__operationType.reset(params.operationType); + this.__value.reset(params.value); + this.__placeholder.reset(params.placeholder); + this.__selectStyle.reset(params.selectStyle); + this.__searchStyle.reset(params.searchStyle); } - purgeVariableDependenciesOnElmtId(rmElmtId) { - this.__changeValue.purgeDependencyOnElmtId(rmElmtId); this.__isFunction1Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isFunction2Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isSearchPressed.purgeDependencyOnElmtId(rmElmtId); this.__showImage.purgeDependencyOnElmtId(rmElmtId); - this.__hint.purgeDependencyOnElmtId(rmElmtId); - this.__operationType.purgeDependencyOnElmtId(rmElmtId); + this.__value.purgeDependencyOnElmtId(rmElmtId); + this.__placeholder.purgeDependencyOnElmtId(rmElmtId); + this.__selectStyle.purgeDependencyOnElmtId(rmElmtId); + this.__searchStyle.purgeDependencyOnElmtId(rmElmtId); } - aboutToBeDeleted() { - this.__changeValue.aboutToBeDeleted(); this.__isFunction1Pressed.aboutToBeDeleted(); this.__isFunction2Pressed.aboutToBeDeleted(); this.__isSearchPressed.aboutToBeDeleted(); this.__showImage.aboutToBeDeleted(); - this.__hint.aboutToBeDeleted(); - this.__operationType.aboutToBeDeleted(); + this.__value.aboutToBeDeleted(); + this.__placeholder.aboutToBeDeleted(); + this.__selectStyle.aboutToBeDeleted(); + this.__searchStyle.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } - - get changeValue() { - return this.__changeValue.get(); - } - - set changeValue(newValue) { - this.__changeValue.set(newValue); - } - get isFunction1Pressed() { return this.__isFunction1Pressed.get(); } - set isFunction1Pressed(newValue) { this.__isFunction1Pressed.set(newValue); } - get isFunction2Pressed() { return this.__isFunction2Pressed.get(); } - set isFunction2Pressed(newValue) { this.__isFunction2Pressed.set(newValue); } - get isSearchPressed() { return this.__isSearchPressed.get(); } - set isSearchPressed(newValue) { this.__isSearchPressed.set(newValue); } - get showImage() { return this.__showImage.get(); } - set showImage(newValue) { this.__showImage.set(newValue); } - - get hint() { - return this.__hint.get(); + get value() { + return this.__value.get(); } - - set hint(newValue) { - this.__hint.set(newValue); + set value(newValue) { + this.__value.set(newValue); } - - get operationType() { - return this.__operationType.get(); + get placeholder() { + return this.__placeholder.get(); } - - set operationType(newValue) { - this.__operationType.set(newValue); + set placeholder(newValue) { + this.__placeholder.set(newValue); + } + get selectStyle() { + return this.__selectStyle.get(); + } + set selectStyle(newValue) { + this.__selectStyle.set(newValue); + } + get searchStyle() { + return this.__searchStyle.get(); + } + set searchStyle(newValue) { + this.__searchStyle.set(newValue); + } + aboutToAppear() { + this.showImage = this.value.length === 0 ? true : false; + this.initSelectStyle(); + this.initSearchStyle(); + } + initSelectStyle() { + if (typeof this.selectStyle !== 'undefined') { + if (typeof this.selectStyle.font === 'undefined') { + this.selectStyle.font = { size: TEXT_SIZE_BODY1 }; + } + if (typeof this.selectStyle.fontColor !== 'undefined') { + this.selectStyle.fontColor = TEXT_COLOR_PRIMARY; + } + } + } + initSearchStyle() { + if (typeof this.searchStyle !== 'undefined') { + if (typeof this.searchStyle.componentBackgroundColor === 'undefined') { + this.searchStyle.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; + } + if (typeof this.searchStyle.placeholderFont === 'undefined') { + this.searchStyle.placeholderFont = { size: TEXT_SIZE_BODY1 }; + } + if (typeof this.searchStyle.placeholderColor === 'undefined') { + this.searchStyle.placeholderColor = COLOR_TEXT_SECONDARY; + } + if (typeof this.searchStyle.textFont === 'undefined') { + this.searchStyle.textFont = { size: TEXT_SIZE_BODY1 }; + } + if (typeof this.searchStyle.fontColor === 'undefined') { + this.searchStyle.fontColor = COLOR_TEXT_SECONDARY; + } + if (typeof this.searchStyle.searchIcon === 'undefined') { + this.searchStyle.searchIcon = { + size: ICON_SIZE, + color: ICON_COLOR_SECONDARY, + }; + } + if (typeof this.searchStyle.pressBackgroundColor === 'undefined') { + this.searchStyle.pressBackgroundColor = EFFECT_COLOR; + } + } } - onParamsChange() { - this.showImage = this.changeValue.length === 0 ? true : false; + this.showImage = this.value.length === 0 ? true : false; + } + renderSelect(parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Row.create(); + Row.flexShrink(FLEX_SHRINK); + }, Row); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Select.create(this.selectItems?.options); + Select.value(this.selectItems?.value); + Select.selected(this.selectItems?.selected); + Select.onSelect(this.selectItems?.onSelect); + Select.controlSize(this.selectStyle?.controlSize); + Select.menuItemContentModifier.bind(this)(this.selectStyle?.menuItemContentModifier); + Select.divider(this.selectStyle?.divider); + Select.font(this.selectStyle?.font); + Select.fontColor(this.selectStyle?.fontColor); + Select.selectedOptionBgColor(this.selectStyle?.selectedOptionBgColor); + Select.selectedOptionFont(this.selectStyle?.selectedOptionFont); + Select.selectedOptionFontColor(this.selectStyle?.selectedOptionFontColor); + Select.optionBgColor(this.selectStyle?.optionBgColor); + Select.optionFont(this.selectStyle?.optionFont); + Select.optionFontColor(this.selectStyle?.optionFontColor); + Select.space(this.selectStyle?.space); + Select.arrowPosition(this.selectStyle?.arrowPosition); + Select.menuAlign(this.selectStyle?.menuAlign?.alignType, this.selectStyle?.menuAlign?.offset); + Select.optionWidth(this.selectStyle?.optionWidth); + Select.optionHeight(this.selectStyle?.optionHeight); + Select.menuBackgroundColor(this.selectStyle?.menuBackgroundColor); + Select.menuBackgroundBlurStyle(this.selectStyle?.menuBackgroundBlurStyle); + Select.height(ATMOIC_SELECT_HEIGHT); + Select.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); + Select.constraintSize({ minHeight: ATMOIC_SELECT_HEIGHT }); + Select.padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }); + Select.margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }); + Select.backgroundColor(Color.Transparent); + }, Select); + Select.pop(); + Row.pop(); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); + } + renderDivider(parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Divider.create(); + Divider.vertical(true); + Divider.color(Color.Black); + Divider.height(ATOMIC_DIVIDER_HEIGHT); + Divider.opacity(DIVIDER_OPACITY); + Divider.margin({ + start: LengthMetrics.vp(DIVIDER_MARGIN_LEFT), + end: LengthMetrics.vp(DIVIDER_MARGIN_RIGHT) + }); + }, Divider); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); } - renderSearch(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { - Search.create({ value: this.changeValue, placeholder: this.hint, controller: this.controller }); + Search.create({ + value: this.value, + placeholder: this.placeholder, + controller: this.controller + }); Search.backgroundColor(Color.Transparent); - Search.placeholderFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }); - Search.textFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }); - Search.fontColor(TEXT_COLOR_SECONDARY); - Search.searchIcon({ color: ICON_COLOR_SECONDARY }); - Search.onSubmit(this.onSearch?.onSubmit); + Search.searchButton(this.searchStyle?.searchButton?.value, this.searchStyle?.searchButton?.option); + Search.placeholderColor(this.searchStyle?.placeholderColor); + Search.placeholderFont(this.searchStyle?.placeholderFont); + Search.textFont(this.searchStyle?.textFont); + Search.textAlign(this.searchStyle?.textAlign); + Search.copyOption(this.searchStyle?.copyOption); + Search.searchIcon(this.searchStyle?.searchIcon); + Search.cancelButton({ icon: this.searchStyle?.cancelIcon }); + Search.fontColor(this.searchStyle?.fontColor); + Search.caretStyle(this.searchStyle?.caretStyle); + Search.enableKeyboardOnFocus(this.searchStyle?.enableKeyboardOnFocus); + Search.selectionMenuHidden(this.searchStyle?.selectionMenuHidden); + Search.customKeyboard(null, { supportAvoidance: this.searchStyle?.keyboardAvoidance }); + Search.type(this.searchStyle?.type); + Search.maxLength(this.searchStyle?.maxLength); + Search.enterKeyType(this.searchStyle?.enterKeyType); + Search.decoration(this.searchStyle?.decoration); + Search.letterSpacing(this.searchStyle?.letterSpacing); + Search.fontFeature(this.searchStyle?.fontFeature); + Search.selectedBackgroundColor(this.searchStyle?.selectedBackgroundColor); + Search.inputFilter(this.searchStyle?.inputFilter?.value, this.searchStyle?.inputFilter?.error); + Search.textIndent(this.searchStyle?.textIndent); + Search.minFontSize(this.searchStyle?.minFontSize); + Search.maxFontSize(this.searchStyle?.maxFontSize); + Search.editMenuOptions(this.searchStyle?.editMenuOptions); + Search.enablePreviewText(this.searchStyle?.enablePreviewText); + Search.enableHapticFeedback(this.searchStyle?.enableHapticFeedback); + Search.placeholderFont(this.searchStyle?.placeholderFont); + Search.textFont(this.searchStyle?.textFont); + Search.searchIcon(this.searchStyle?.searchIcon); + Search.fontColor(this.searchStyle?.fontColor); + Search.onCut(this.searchEvents?.onCut); + Search.onCopy(this.searchEvents?.onCopy); + Search.onPaste(this.searchEvents?.onPaste); + Search.onSubmit(this.searchEvents?.onSubmit); + Search.onDidInsert(this.searchEvents?.onDidInsert); + Search.onDidDelete(this.searchEvents?.onDidDelete); + Search.onEditChange(this.searchEvents?.onEditChange); + Search.onWillInsert(this.searchEvents?.onWillInsert); + Search.onWillDelete(this.searchEvents?.onWillDelete); + Search.onContentScroll(this.searchEvents?.onContentScroll); + Search.onTextSelectionChange(this.searchEvents?.onTextSelectionChange); Search.onChange((value, previewText) => { - if (typeof this.onSearch?.onChange !== 'undefined') { - this.onSearch?.onChange(value, previewText); + if (typeof this.searchEvents?.onChange !== 'undefined') { + this.searchEvents?.onChange(value, previewText); } - this.changeValue = value; + this.value = value; }); - Search.onCopy(this.onSearch?.onCopy); - Search.onCut(this.onSearch?.onCut); - Search.onPaste(this.onSearch?.onPaste); - Search.onTextSelectionChange(this.onSearch?.onTextSelectionChange); - Search.onContentScroll(this.onSearch?.onContentScroll); - Search.onEditChange(this.onSearch?.onEditChange); - Search.onWillInsert(this.onSearch?.onWillInsert); - Search.onDidInsert(this.onSearch?.onDidInsert); - Search.onWillDelete(this.onSearch?.onWillDelete); - Search.onDidDelete(this.onSearch?.onDidDelete); Search.onTouch((event) => { if (event && event.type === TouchType.Down) { this.isSearchPressed = true; @@ -236,36 +388,38 @@ export class AtomicServiceSearch extends ViewPU { }, Search); Search.pop(); } - - renderSelect(parent = null) { + renderOperationItem1(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.select !== 'undefined' && this.select.options.length !== 0) { + if (typeof this.operationItem1 !== 'undefined' && this.showImage) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); + Row.onClick(this.operationItem1?.action); Row.flexShrink(FLEX_SHRINK); + Row.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); + Row.alignItems(VerticalAlign.Center); + Row.justifyContent(FlexAlign.Center); + Row.width(ATMOIC_SELECT_HEIGHT); + Row.height(ATMOIC_SELECT_HEIGHT); + Row.margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }); + Row.backgroundColor(this.isFunction1Pressed ? this.searchStyle?.pressBackgroundColor : Color.Transparent); + Row.onTouch((event) => { + if (event && event.type === TouchType.Down) { + this.isFunction1Pressed = true; + } + else if (event && event.type === TouchType.Up) { + this.isFunction1Pressed = false; + } + }); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { - Select.create(this.select?.options); - Select.value(this.select?.value); - Select.selected(this.select?.selected); - Select.onSelect(this.select?.onSelect); - Select.font({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_PRIMARY }); - Select.fontColor(TEXT_COLOR_PRIMARY); - Select.selectedOptionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }); - Select.menuAlign(MenuAlignType.START, { dx: MENU_ALIGN_TYPE_START_X, dy: MENU_ALIGN_TYPE_START_Y }); - Select.optionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }); - Select.backgroundColor(Color.Transparent); - Select.arrowPosition(ArrowPosition.END); - Select.constraintSize({ minHeight: SELECT_CONSTRAINT_SIZE_MIN_HEIGHT }); - Select.padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }); - Select.margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }); - Select.height(SELECT_HEIGHT); - Select.space(SELECT_SPACE); - }, Select); - Select.pop(); - this.renderDivider.bind(this)(); + Image.create(this.operationItem1?.value); + Image.objectFit(ImageFit.Contain); + Image.fillColor(FUNCTION_ICON_COLOR); + Image.width(ICON_WIDTH_AND_HEIGTH); + Image.height(ICON_WIDTH_AND_HEIGTH); + }, Image); Row.pop(); }); } @@ -276,79 +430,53 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - - renderDivider(parent = null) { - this.observeComponentCreation2((elmtId, isInitialRender) => { - Divider.create(); - Divider.vertical(true); - Divider.height(DIVIDER_HEIGHT); - Divider.color(Color.Black); - Divider.opacity(DIVIDER_OPACITY); - Divider.margin({ - start: LengthMetrics.vp(DIVIDER_MARGIN_LEFT), - end: LengthMetrics.vp(DIVIDER_MARGIN_RIGHT) - }); - }, Divider); - } - - renderFunction(item, independentOrNot, parent = null) { + renderOperationItem2(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { - Row.create(); - Row.position(independentOrNot ? - { - top: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET), - end: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET) - } : - { top: LengthMetrics.vp(FUNCTION_POSITION_OFFSET), end: LengthMetrics.vp(FUNCTION_POSITION_OFFSET) }); - Row.width(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT); - Row.height(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT); - Row.flexShrink(FLEX_SHRINK); - Row.borderRadius(BORDER_RADIUS); - Row.onClick(item.action); - Row.alignItems(VerticalAlign.Center); - Row.justifyContent(FlexAlign.Center); - Row.margin(independentOrNot ? - { - start: LengthMetrics.vp(INDEPENDENT_FUNCTION_MARGIN), - } : - { - start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT), - end: LengthMetrics.vp(FUNCTION_MARGIN_RIGHT) + If.create(); + if (typeof this.operationItem2 !== 'undefined') { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Row.create(); + Row.onClick(this.operationItem2?.action); + Row.flexShrink(FLEX_SHRINK); + Row.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); + Row.alignItems(VerticalAlign.Center); + Row.justifyContent(FlexAlign.Center); + Row.width(ATOMIC_SERVICE_SEARCH_HEIGHT); + Row.height(ATOMIC_SERVICE_SEARCH_HEIGHT); + Row.margin(OPERATION_ITEM2_MARGIN_LEFT); + Row.backgroundColor(this.isFunction2Pressed ? this.searchStyle?.pressBackgroundColor : + this.searchStyle?.componentBackgroundColor); + Row.onTouch((event) => { + if (event && event.type === TouchType.Down) { + this.isFunction2Pressed = true; + } + else if (event && event.type === TouchType.Up) { + this.isFunction2Pressed = false; + } + }); + }, Row); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Image.create(this.operationItem2?.value); + Image.objectFit(ImageFit.Contain); + Image.fillColor(FUNCTION_ICON_COLOR); + Image.width(ICON_WIDTH_AND_HEIGTH); + Image.height(ICON_WIDTH_AND_HEIGTH); + }, Image); + Row.pop(); }); - Row.backgroundColor(independentOrNot ? - (this.isFunction2Pressed ? EFFECT_COLOR : Color.Transparent) : - (this.isFunction1Pressed ? EFFECT_COLOR : Color.Transparent)); - Row.onTouch((event) => { - if (event && event.type === TouchType.Down) { - if (independentOrNot) { - this.isFunction2Pressed = true; - } - else { - this.isFunction1Pressed = true; - } - } - else if (event && event.type === TouchType.Up) { - if (independentOrNot) { - this.isFunction2Pressed = false; - } - else { - this.isFunction1Pressed = false; - } - } - }); - }, Row); - this.observeComponentCreation2((elmtId, isInitialRender) => { - Image.create(item.value); - Image.width(FUNCTION_ICON_WIDTH_HEIGHT); - Image.height(FUNCTION_ICON_WIDTH_HEIGHT); - Image.fillColor(FUNCTION_ICON_COLOR); - Image.objectFit(ImageFit.Contain); - }, Image); - Row.pop(); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); } initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); + Row.height(ATOMIC_SERVICE_SEARCH_HEIGHT); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { Flex.create({ @@ -356,95 +484,43 @@ export class AtomicServiceSearch extends ViewPU { alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }); - Flex.height(SEARCH_HEIGHT); - Flex.borderRadius(BORDER_RADIUS); - Flex.backgroundColor((typeof this.operationItem !== 'undefined' && this.operationItem?.length >= 2) ? - Color.Transparent : (this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR)); }, Flex); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Stack.create(); + Stack.alignContent(Alignment.End); + Stack.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); + Stack.backgroundColor(this.isSearchPressed ? + this.searchStyle?.pressBackgroundColor : this.searchStyle?.componentBackgroundColor); + }, Stack); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Flex.create({ + direction: FlexDirection.Row, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Start + }); + }, Flex); + this.renderSelect.bind(this)(); + this.renderDivider.bind(this)(); + this.renderSearch.bind(this)(); + Flex.pop(); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.operationItem === 'undefined' || this.operationItem?.length === 0) { + if (typeof this.searchStyle?.searchButton === 'undefined') { this.ifElseBranchUpdateFunction(0, () => { - this.renderSelect.bind(this)(); - this.renderSearch.bind(this)(); - }); - } else if (this.operationItem?.length === 1) { - this.ifElseBranchUpdateFunction(1, () => { - this.renderSelect.bind(this)(); - this.observeComponentCreation2((elmtId, isInitialRender) => { - Stack.create(); - }, Stack); - this.renderSearch.bind(this)(); - this.observeComponentCreation2((elmtId, isInitialRender) => { - If.create(); - if (this.showImage) { - this.ifElseBranchUpdateFunction(0, () => { - this.renderFunction.bind(this)(this.operationItem[0], false); - }); - } - else { - this.ifElseBranchUpdateFunction(1, () => { - }); - } - }, If); - If.pop(); - Stack.pop(); - }); - } else if (this.operationItem?.length >= 2) { - this.ifElseBranchUpdateFunction(2, () => { - this.observeComponentCreation2((elmtId, isInitialRender) => { - Flex.create({ - direction: FlexDirection.Row, - alignItems: ItemAlign.Center, - justifyContent: FlexAlign.SpaceBetween - }); - Flex.height(SEARCH_HEIGHT); - Flex.borderRadius(BORDER_RADIUS); - Flex.backgroundColor(this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR); - }, Flex); - this.renderSelect.bind(this)(); - this.observeComponentCreation2((elmtId, isInitialRender) => { - Stack.create(); - }, Stack); - this.renderSearch.bind(this)(); - this.observeComponentCreation2((elmtId, isInitialRender) => { - If.create(); - if (this.showImage) { - this.ifElseBranchUpdateFunction(0, () => { - this.renderFunction.bind(this)(this.operationItem[0], false); - }); - } - else { - this.ifElseBranchUpdateFunction(1, () => { - }); - } - }, If); - If.pop(); - Stack.pop(); - Flex.pop(); - this.observeComponentCreation2((elmtId, isInitialRender) => { - Row.create(); - Row.width(INDEPENDENT_FUNCTION_WIDTH_HEIGHT); - Row.height(INDEPENDENT_FUNCTION_WIDTH_HEIGHT); - Row.flexShrink(FLEX_SHRINK); - Row.borderRadius(BORDER_RADIUS); - Row.margin({ start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT) }); - Row.backgroundColor(TEXT_BOX_COLOR); - }, Row); - this.renderFunction.bind(this)(this.operationItem[1], true); - Row.pop(); + this.renderOperationItem1.bind(this)(); }); } else { - this.ifElseBranchUpdateFunction(3, () => { + this.ifElseBranchUpdateFunction(1, () => { }); } }, If); If.pop(); + Stack.pop(); + this.renderOperationItem2.bind(this)(); Flex.pop(); Row.pop(); } - rerender() { this.updateDirtyElements(); } diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index 955a48a..92298d1 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -1,4 +1,4 @@ -​/* +/* * Copyright (c) 2025 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. @@ -12,51 +12,74 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import { OperationType, SelectOptions, OperationOption } from '@ohos.arkui.advanced.SubHeader'; -import { LengthMetrics } from '@kit.ArkUI'; +import { LengthMetrics, SelectOptions, OperationOption } from '@kit.ArkUI'; const TEXT_SIZE_BODY1: Resource = $r(`sys.float.ohos_id_text_size_body1`); -const TEXT_COLOR_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); +const COLOR_TEXT_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); const ICON_COLOR_SECONDARY = $r('sys.color.ohos_id_color_secondary'); -const TEXT_BOX_COLOR = $r(`sys.color.ohos_id_color_text_field_sub_bg`); +const ATOMIC_SERVICE_SEARCH_BG_COLOR = $r(`sys.color.ohos_id_color_text_field_sub_bg`); const TEXT_COLOR_PRIMARY = $r(`sys.color.ohos_id_color_text_primary`); const FUNCTION_ICON_COLOR = $r(`sys.color.ohos_id_color_primary`); const EFFECT_COLOR = $r(`sys.color.ohos_id_color_click_effect`); -const FONT_WEIGHT_PRIMARY: number = 500; -const FONT_WEIGHT_DEFAULT: number = 400; -const FONT_SIZE: number = 16; -const MENU_ALIGN_TYPE_START_X: number = 0; -const MENU_ALIGN_TYPE_START_Y: number = 0; -const SELECT_CONSTRAINT_SIZE_MIN_HEIGHT: number = 36; -const SELECT_HEIGHT: number = 36; +const ICON_SIZE: number = 16; const SELECT_PADDING_LEFT: number = 6; const SELECT_MARGIN_LEFT: number = 2; -const SELECT_SPACE: number = 2; -const DIVIDER_HEIGHT: number = 20; +const FLEX_SHRINK: number = 0; const DIVIDER_OPACITY: number = 0.6; const DIVIDER_MARGIN_LEFT: number = 2; const DIVIDER_MARGIN_RIGHT: number = -2; -const FUNCTION_ICON_WIDTH_HEIGHT: number = 24; -const INDEPENDENT_FUNCTION_POSITION_OFFSET: number = 0; -const FUNCTION_POSITION_OFFSET: number = 2; -const INDEPENDENT_FUNCTION_WIDTH_HEIGHT: number = 40; -const FUNCTION_WIDTH_HEIGHT: number = 36; -const FLEX_SHRINK: number = 0; -const INDEPENDENT_FUNCTION_MARGIN: number = 0; -const FUNCTION_MARGIN_LEFT: number = 8; -const FUNCTION_MARGIN_RIGHT: number = 0; -const BORDER_RADIUS: number = 20; -const SEARCH_HEIGHT: number = 40; +const ATOMIC_SERVICE_SEARCH_HEIGHT: number = 40; +const ATMOIC_SELECT_HEIGHT: number = 36; +const ATOMIC_SELECT_BORDER_RADIUS: number = 20; +const ATOMIC_DIVIDER_HEIGHT: number = 20; +const ICON_WIDTH_AND_HEIGTH: number = 24; +const OPERATION_ITEM1_MARGIN_RIGHT: number = 2; +const OPERATION_ITEM2_MARGIN_LEFT: number = 8; + +interface InputFilterOptions { + value: ResourceStr, + error?: Callback +} + +interface SearchButtonParams { + value: string, + option?: SearchButtonOptions +} -export interface OnSearchEvent { - onSubmit?: (value: string) => void; +interface MenuAlignOption { + alignType: MenuAlignType, + offset?: Offset +} + +interface SelectStyles { + controlSize?: ControlSize; + menuItemContentModifier?: ContentModifier; + divider?: Optional | null; + font?: Font; + fontColor?: ResourceColor; + selectedOptionBgColor?: ResourceColor; + selectedOptionFont?: Font; + selectedOptionFontColor?: ResourceColor; + optionBgColor?: ResourceColor; + optionFont?: Font; + optionFontColor?: ResourceColor; + optionWidth?: Dimension | OptionWidthMode; + optionHeight?: Dimension; + space?: Length; + arrowPosition?: ArrowPosition; + menuAlign?: MenuAlignOption; + menuBackgroundColor?: ResourceColor; + menuBackgroundBlurStyle?: BlurStyle; +} + +interface SearchEvents { + onSubmit?: Callback | SearchSubmitCallback; onChange?: EditableTextOnChangeCallback; - onCopy?: (value: string) => void; - onCut?: (value: string) => void; - onPaste?: (value: string, event: PasteEvent) => void; - onTextSelectionChange?: (selectionStart: number, selectionEnd: number) => void; - onContentScroll?: (totalOffsetX: number, totalOffsetY: number) => void; + onCopy?: Callback; + onCut?: Callback; + onPaste?: OnPasteCallback; + onTextSelectionChange?: OnTextSelectionChangeCallback; + onContentScroll?: OnContentScrollCallback; onEditChange?: Callback; onWillInsert?: Callback; onDidInsert?: Callback; @@ -64,49 +87,233 @@ export interface OnSearchEvent { onDidDelete?: Callback; } +interface SearchStyle { + componentBackgroundColor?: ResourceColor; + pressBackgroundColor?: ResourceColor; + searchButton?: SearchButtonParams; + placeholderColor?: ResourceColor; + placeholderFont?: Font; + textFont?: Font; + textAlign?: TextAlign; + copyOption?: CopyOptions; + searchIcon?: IconOptions | SymbolGlyphModifier; + cancelIcon?: IconOptions; + fontColor?: ResourceColor; + caretStyle?: CaretStyle; + enableKeyboardOnFocus?: boolean; + selectionMenuHidden?: boolean; + keyboardAvoidance?: boolean; + type?: SearchType; + maxLength?: number; + enterKeyType?: EnterKeyType; + decoration?: TextDecorationOptions; + letterSpacing?: number | string | Resource; + fontFeature?: string; + selectedBackgroundColor?: ResourceColor; + inputFilter?: InputFilterOptions; + textIndent?: Dimension; + minFontSize?: number | string | Resource; + maxFontSize?: number | string | Resource; + editMenuOptions?: EditMenuOptions; + enablePreviewText?: boolean; + enableHapticFeedback?: boolean; +} + @Component export struct AtomicServiceSearch { - @Watch('onParamsChange') @Prop changeValue: string = ''; @State private isFunction1Pressed: boolean = false; @State private isFunction2Pressed: boolean = false; @State private isSearchPressed: boolean = false; @State private showImage: boolean = true; - @Prop hint?: ResourceStr = 'Search'; - @Prop operationType?: OperationType = OperationType.BUTTON; - private controller: SearchController = new SearchController(); - operationItem?: Array; - select?: SelectOptions; - onSearch?: OnSearchEvent; + @Prop @Watch('onParamsChange') value: string = ''; + @Prop placeholder?: ResourceStr = 'Search'; + controller: SearchController = new SearchController(); + selectItems?: SelectOptions; + @Prop selectStyle?: SelectStyles = { + font:{ + size: TEXT_SIZE_BODY1, + }, + fontColor: TEXT_COLOR_PRIMARY + }; + searchEvents?: SearchEvents; + @Prop searchStyle?: SearchStyle = { + componentBackgroundColor: ATOMIC_SERVICE_SEARCH_BG_COLOR, + placeholderFont: { + size: TEXT_SIZE_BODY1, + }, + placeholderColor: COLOR_TEXT_SECONDARY, + textFont: { + size: TEXT_SIZE_BODY1, + }, + fontColor: COLOR_TEXT_SECONDARY, + searchIcon: { + size: ICON_SIZE, + color: ICON_COLOR_SECONDARY, + }, + pressBackgroundColor: EFFECT_COLOR + }; + operationItem1?: OperationOption; + operationItem2?: OperationOption; + + aboutToAppear(): void { + this.showImage = this.value.length === 0 ? true : false; + this.initSelectStyle(); + this.initSearchStyle(); + } + + private initSelectStyle(): void { + if (typeof this.selectStyle !== 'undefined') { + if (typeof this.selectStyle.font === 'undefined') { + this.selectStyle.font = { size: TEXT_SIZE_BODY1 }; + } + if (typeof this.selectStyle.fontColor !== 'undefined') { + this.selectStyle.fontColor = TEXT_COLOR_PRIMARY; + } + } + + } + + private initSearchStyle() : void { + if (typeof this.searchStyle !== 'undefined') { + if (typeof this.searchStyle.componentBackgroundColor === 'undefined') { + this.searchStyle.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; + } + if (typeof this.searchStyle.placeholderFont === 'undefined') { + this.searchStyle.placeholderFont = { size: TEXT_SIZE_BODY1 }; + } + if (typeof this.searchStyle.placeholderColor === 'undefined') { + this.searchStyle.placeholderColor = COLOR_TEXT_SECONDARY; + } + if (typeof this.searchStyle.textFont === 'undefined') { + this.searchStyle.textFont = { size: TEXT_SIZE_BODY1 }; + } + if (typeof this.searchStyle.fontColor === 'undefined') { + this.searchStyle.fontColor = COLOR_TEXT_SECONDARY; + } + if (typeof this.searchStyle.searchIcon === 'undefined') { + this.searchStyle.searchIcon = { + size: ICON_SIZE, + color: ICON_COLOR_SECONDARY, + } + } + if (typeof this.searchStyle.pressBackgroundColor === 'undefined') { + this.searchStyle.pressBackgroundColor = EFFECT_COLOR; + } + } + } private onParamsChange(): void { - this.showImage = this.changeValue.length === 0 ? true : false; + this.showImage = this.value.length === 0 ? true : false; + } + + @Builder + renderSelect() { + if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + Row() { + Select(this.selectItems?.options) + .value(this.selectItems?.value) + .selected(this.selectItems?.selected) + .onSelect(this.selectItems?.onSelect) + .controlSize(this.selectStyle?.controlSize) + .menuItemContentModifier(this.selectStyle?.menuItemContentModifier) + .divider(this.selectStyle?.divider) + .font(this.selectStyle?.font) + .fontColor(this.selectStyle?.fontColor) + .selectedOptionBgColor(this.selectStyle?.selectedOptionBgColor) + .selectedOptionFont(this.selectStyle?.selectedOptionFont) + .selectedOptionFontColor(this.selectStyle?.selectedOptionFontColor) + .optionBgColor(this.selectStyle?.optionBgColor) + .optionFont(this.selectStyle?.optionFont) + .optionFontColor(this.selectStyle?.optionFontColor) + .space(this.selectStyle?.space) + .arrowPosition(this.selectStyle?.arrowPosition) + .menuAlign(this.selectStyle?.menuAlign?.alignType, this.selectStyle?.menuAlign?.offset) + .optionWidth(this.selectStyle?.optionWidth) + .optionHeight(this.selectStyle?.optionHeight) + .menuBackgroundColor(this.selectStyle?.menuBackgroundColor) + .menuBackgroundBlurStyle(this.selectStyle?.menuBackgroundBlurStyle) + .height(ATMOIC_SELECT_HEIGHT) + .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) + .constraintSize({ minHeight: ATMOIC_SELECT_HEIGHT }) + .padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }) + .margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }) + .backgroundColor(Color.Transparent) + } + .flexShrink(FLEX_SHRINK) + } + } + + @Builder + renderDivider() { + if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + Divider() + .vertical(true) + .color(Color.Black) + .height(ATOMIC_DIVIDER_HEIGHT) + .opacity(DIVIDER_OPACITY) + .margin({ + start: LengthMetrics.vp(DIVIDER_MARGIN_LEFT), + end: LengthMetrics.vp(DIVIDER_MARGIN_RIGHT) + }) + } } @Builder renderSearch() { - Search({ value: this.changeValue, placeholder: this.hint, controller: this.controller }) + Search({ + value: this.value, + placeholder: this.placeholder, + controller: this.controller + }) .backgroundColor(Color.Transparent) - .placeholderFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }) - .textFont({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_DEFAULT }) - .fontColor(TEXT_COLOR_SECONDARY) - .searchIcon({ color: ICON_COLOR_SECONDARY }) - .onSubmit(this.onSearch?.onSubmit) + .searchButton(this.searchStyle?.searchButton?.value, this.searchStyle?.searchButton?.option) + .placeholderColor(this.searchStyle?.placeholderColor) + .placeholderFont(this.searchStyle?.placeholderFont) + .textFont(this.searchStyle?.textFont) + .textAlign(this.searchStyle?.textAlign) + .copyOption(this.searchStyle?.copyOption) + .searchIcon(this.searchStyle?.searchIcon) + .cancelButton({icon: this.searchStyle?.cancelIcon}) + .fontColor(this.searchStyle?.fontColor) + .caretStyle(this.searchStyle?.caretStyle) + .enableKeyboardOnFocus(this.searchStyle?.enableKeyboardOnFocus) + .selectionMenuHidden(this.searchStyle?.selectionMenuHidden) + .customKeyboard(null, {supportAvoidance: this.searchStyle?.keyboardAvoidance}) + .type(this.searchStyle?.type) + .maxLength(this.searchStyle?.maxLength) + .enterKeyType(this.searchStyle?.enterKeyType) + .decoration(this.searchStyle?.decoration) + .letterSpacing(this.searchStyle?.letterSpacing) + .fontFeature(this.searchStyle?.fontFeature) + .selectedBackgroundColor(this.searchStyle?.selectedBackgroundColor) + .inputFilter(this.searchStyle?.inputFilter?.value, this.searchStyle?.inputFilter?.error) + .textIndent(this.searchStyle?.textIndent) + .minFontSize(this.searchStyle?.minFontSize) + .maxFontSize(this.searchStyle?.maxFontSize) + .editMenuOptions(this.searchStyle?.editMenuOptions) + .enablePreviewText(this.searchStyle?.enablePreviewText) + .enableHapticFeedback(this.searchStyle?.enableHapticFeedback) + .placeholderFont(this.searchStyle?.placeholderFont) + .textFont(this.searchStyle?.textFont) + .searchIcon(this.searchStyle?.searchIcon) + .fontColor(this.searchStyle?.fontColor) + .onCut(this.searchEvents?.onCut) + .onCopy(this.searchEvents?.onCopy) + .onPaste(this.searchEvents?.onPaste) + .onSubmit(this.searchEvents?.onSubmit) + .onDidInsert(this.searchEvents?.onDidInsert) + .onDidDelete(this.searchEvents?.onDidDelete) + .onEditChange(this.searchEvents?.onEditChange) + .onWillInsert(this.searchEvents?.onWillInsert) + .onWillDelete(this.searchEvents?.onWillDelete) + .onContentScroll(this.searchEvents?.onContentScroll) + .onTextSelectionChange(this.searchEvents?.onTextSelectionChange) .onChange((value: string, previewText?: PreviewText) => { - if (typeof this.onSearch?.onChange !== 'undefined') { - this.onSearch?.onChange(value, previewText); + if (typeof this.searchEvents?.onChange !== 'undefined') { + this.searchEvents?.onChange(value, previewText); } - this.changeValue = value; + this.value = value; }) - .onCopy(this.onSearch?.onCopy) - .onCut(this.onSearch?.onCut) - .onPaste(this.onSearch?.onPaste) - .onTextSelectionChange(this.onSearch?.onTextSelectionChange) - .onContentScroll(this.onSearch?.onContentScroll) - .onEditChange(this.onSearch?.onEditChange) - .onWillInsert(this.onSearch?.onWillInsert) - .onDidInsert(this.onSearch?.onDidInsert) - .onWillDelete(this.onSearch?.onWillDelete) - .onDidDelete(this.onSearch?.onDidDelete) .onTouch((event?: TouchEvent) => { if (event && event.type === TouchType.Down) { this.isSearchPressed = true; @@ -117,93 +324,62 @@ export struct AtomicServiceSearch { } @Builder - renderSelect() { - if (typeof this.select !== 'undefined' && this.select.options.length !== 0) { + renderOperationItem1() { + if (typeof this.operationItem1 !== 'undefined' && this.showImage) { Row() { - Select(this.select?.options) - .value(this.select?.value) - .selected(this.select?.selected) - .onSelect(this.select?.onSelect) - .font({ size: TEXT_SIZE_BODY1, weight: FONT_WEIGHT_PRIMARY }) - .fontColor(TEXT_COLOR_PRIMARY) - .selectedOptionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }) - .menuAlign(MenuAlignType.START, { dx: MENU_ALIGN_TYPE_START_X, dy: MENU_ALIGN_TYPE_START_Y }) - .optionFont({ size: FONT_SIZE, weight: FONT_WEIGHT_DEFAULT }) - .backgroundColor(Color.Transparent) - .arrowPosition(ArrowPosition.END) - .constraintSize({ minHeight: SELECT_CONSTRAINT_SIZE_MIN_HEIGHT }) - .padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }) - .margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }) - .height(SELECT_HEIGHT) - .space(SELECT_SPACE) - this.renderDivider(); + Image(this.operationItem1?.value) + .objectFit(ImageFit.Contain) + .fillColor(FUNCTION_ICON_COLOR) + .width(ICON_WIDTH_AND_HEIGTH) + .height(ICON_WIDTH_AND_HEIGTH) } + .onClick(this.operationItem1?.action) .flexShrink(FLEX_SHRINK) - } - } - - @Builder - renderDivider() { - Divider() - .vertical(true) - .height(DIVIDER_HEIGHT) - .color(Color.Black) - .opacity(DIVIDER_OPACITY) - .margin({ - start: LengthMetrics.vp(DIVIDER_MARGIN_LEFT), - end: LengthMetrics.vp(DIVIDER_MARGIN_RIGHT) + .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .width(ATMOIC_SELECT_HEIGHT) + .height(ATMOIC_SELECT_HEIGHT) + .margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }) + .backgroundColor(this.isFunction1Pressed ? this.searchStyle?.pressBackgroundColor : Color.Transparent) + .onTouch((event?: TouchEvent) => { + if (event && event.type === TouchType.Down) { + this.isFunction1Pressed = true; + } else if (event && event.type === TouchType.Up) { + this.isFunction1Pressed = false; + } }) + } } @Builder - renderFunction(item: OperationOption, independentOrNot: boolean) { - Row() { - Image(item.value) - .width(FUNCTION_ICON_WIDTH_HEIGHT) - .height(FUNCTION_ICON_WIDTH_HEIGHT) - .fillColor(FUNCTION_ICON_COLOR) - .objectFit(ImageFit.Contain) - } - .position(independentOrNot ? - { - top: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET), - end: LengthMetrics.vp(INDEPENDENT_FUNCTION_POSITION_OFFSET) - } : - { top: LengthMetrics.vp(FUNCTION_POSITION_OFFSET), end: LengthMetrics.vp(FUNCTION_POSITION_OFFSET) }) - .width(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT) - .height(independentOrNot ? INDEPENDENT_FUNCTION_WIDTH_HEIGHT : FUNCTION_WIDTH_HEIGHT) - .flexShrink(FLEX_SHRINK) - .borderRadius(BORDER_RADIUS) - .onClick(item.action) - .alignItems(VerticalAlign.Center) - .justifyContent(FlexAlign.Center) - .margin(independentOrNot ? - { - start: LengthMetrics.vp(INDEPENDENT_FUNCTION_MARGIN), - } : - { - start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT), - end: LengthMetrics.vp(FUNCTION_MARGIN_RIGHT) - }) - .backgroundColor(independentOrNot ? - (this.isFunction2Pressed ? EFFECT_COLOR : Color.Transparent) : - (this.isFunction1Pressed ? EFFECT_COLOR : Color.Transparent) - ) - .onTouch((event?: TouchEvent) => { - if (event && event.type === TouchType.Down) { - if (independentOrNot) { + renderOperationItem2() { + if (typeof this.operationItem2 !== 'undefined') { + Row() { + Image(this.operationItem2?.value) + .objectFit(ImageFit.Contain) + .fillColor(FUNCTION_ICON_COLOR) + .width(ICON_WIDTH_AND_HEIGTH) + .height(ICON_WIDTH_AND_HEIGTH) + } + .onClick(this.operationItem2?.action) + .flexShrink(FLEX_SHRINK) + .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .width(ATOMIC_SERVICE_SEARCH_HEIGHT) + .height(ATOMIC_SERVICE_SEARCH_HEIGHT) + .margin(OPERATION_ITEM2_MARGIN_LEFT) + .backgroundColor(this.isFunction2Pressed ? this.searchStyle?.pressBackgroundColor : + this.searchStyle?.componentBackgroundColor) + .onTouch((event?: TouchEvent) => { + if (event && event.type === TouchType.Down) { this.isFunction2Pressed = true; - } else { - this.isFunction1Pressed = true; - } - } else if (event && event.type === TouchType.Up) { - if (independentOrNot) { + } else if (event && event.type === TouchType.Up) { this.isFunction2Pressed = false; - } else { - this.isFunction1Pressed = false; } - } - }) + }) + } } build() { @@ -213,50 +389,29 @@ export struct AtomicServiceSearch { alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { - if (typeof this.operationItem === 'undefined' || this.operationItem?.length === 0) { - this.renderSelect(); - this.renderSearch(); - } else if (this.operationItem?.length === 1) { - this.renderSelect(); - Stack() { - this.renderSearch(); - if (this.showImage) { - this.renderFunction(this.operationItem[0], false); - } - } - } else if (this.operationItem?.length >= 2) { + Stack() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, - justifyContent: FlexAlign.SpaceBetween - }) { + justifyContent: FlexAlign.Start + }){ this.renderSelect(); - Stack() { - this.renderSearch(); - if (this.showImage) { - this.renderFunction(this.operationItem[0], false); - } - } + this.renderDivider(); + this.renderSearch(); } - .height(SEARCH_HEIGHT) - .borderRadius(BORDER_RADIUS) - .backgroundColor(this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR) - - Row() { - this.renderFunction(this.operationItem[1], true); + if (typeof this.searchStyle?.searchButton === 'undefined') { + this.renderOperationItem1(); } - .width(INDEPENDENT_FUNCTION_WIDTH_HEIGHT) - .height(INDEPENDENT_FUNCTION_WIDTH_HEIGHT) - .flexShrink(FLEX_SHRINK) - .borderRadius(BORDER_RADIUS) - .margin({ start: LengthMetrics.vp(FUNCTION_MARGIN_LEFT) }) - .backgroundColor(TEXT_BOX_COLOR) } + .alignContent(Alignment.End) + .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) + .backgroundColor(this.isSearchPressed ? + this.searchStyle?.pressBackgroundColor : this.searchStyle?.componentBackgroundColor) + + this.renderOperationItem2(); } - .height(SEARCH_HEIGHT) - .borderRadius(BORDER_RADIUS) - .backgroundColor((typeof this.operationItem !== 'undefined' && this.operationItem?.length >= 2) ? - Color.Transparent : (this.isSearchPressed ? EFFECT_COLOR : TEXT_BOX_COLOR)) } + .height(ATOMIC_SERVICE_SEARCH_HEIGHT) } + } -- Gitee From b8a019b873e80d0deba6b65bcd4acf9c36534d6f Mon Sep 17 00:00:00 2001 From: jiyu Date: Wed, 12 Feb 2025 08:39:22 +0000 Subject: [PATCH 06/11] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 71 ++++++++++++++----- 1 file changed, 52 insertions(+), 19 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index ee60736..11e4321 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -13,19 +13,19 @@ * limitations under the License. */ -if (!("finalizeConstruction" in ViewPU.prototype)) { - Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); +if (!('finalizeConstruction' in ViewPU.prototype)) { + Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { }); } const LengthMetrics = requireNapi('arkui.node').LengthMetrics; -const TEXT_SIZE_BODY1 = { "id": -1, "type": -1, params: [`sys.float.ohos_id_text_size_body1`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const COLOR_TEXT_SECONDARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_secondary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const ICON_COLOR_SECONDARY = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_secondary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const ATOMIC_SERVICE_SEARCH_BG_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const TEXT_COLOR_PRIMARY = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_text_primary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const FUNCTION_ICON_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_primary`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const EFFECT_COLOR = { "id": -1, "type": -1, params: [`sys.color.ohos_id_color_click_effect`], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const TEXT_SIZE_BODY1 = { 'id': -1, 'type': -1, params: [`sys.float.ohos_id_text_size_body1`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const COLOR_TEXT_SECONDARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_secondary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const ICON_COLOR_SECONDARY = { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const ATOMIC_SERVICE_SEARCH_BG_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_field_sub_bg`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const TEXT_COLOR_PRIMARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_primary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const FUNCTION_ICON_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_primary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; +const EFFECT_COLOR = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_click_effect`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; const ICON_SIZE = 16; const SELECT_PADDING_LEFT = 6; const SELECT_MARGIN_LEFT = 2; @@ -40,29 +40,32 @@ const ATOMIC_DIVIDER_HEIGHT = 20; const ICON_WIDTH_AND_HEIGTH = 24; const OPERATION_ITEM1_MARGIN_RIGHT = 2; const OPERATION_ITEM2_MARGIN_LEFT = 8; + export class AtomicServiceSearch extends ViewPU { + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); - if (typeof paramsLambda === "function") { + if (typeof paramsLambda === 'function') { this.paramsGenerator_ = paramsLambda; } - this.__isFunction1Pressed = new ObservedPropertySimplePU(false, this, "isFunction1Pressed"); - this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, "isFunction2Pressed"); - this.__isSearchPressed = new ObservedPropertySimplePU(false, this, "isSearchPressed"); - this.__showImage = new ObservedPropertySimplePU(true, this, "showImage"); - this.__value = new SynchedPropertySimpleOneWayPU(params.value, this, "value"); - this.__placeholder = new SynchedPropertyObjectOneWayPU(params.placeholder, this, "placeholder"); + this.__isFunction1Pressed = new ObservedPropertySimplePU(false, this, 'isFunction1Pressed'); + this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, 'isFunction2Pressed'); + this.__isSearchPressed = new ObservedPropertySimplePU(false, this, 'isSearchPressed'); + this.__showImage = new ObservedPropertySimplePU(true, this, 'showImage'); + this.__value = new SynchedPropertySimpleOneWayPU(params.value, this, 'value'); + this.__placeholder = new SynchedPropertyObjectOneWayPU(params.placeholder, this, 'placeholder'); this.controller = new SearchController(); this.selectItems = undefined; - this.__selectStyle = new SynchedPropertyObjectOneWayPU(params.selectStyle, this, "selectStyle"); + this.__selectStyle = new SynchedPropertyObjectOneWayPU(params.selectStyle, this, 'selectStyle'); this.searchEvents = undefined; - this.__searchStyle = new SynchedPropertyObjectOneWayPU(params.searchStyle, this, "searchStyle"); + this.__searchStyle = new SynchedPropertyObjectOneWayPU(params.searchStyle, this, 'searchStyle'); this.operationItem1 = undefined; this.operationItem2 = undefined; this.setInitiallyProvidedValue(params); - this.declareWatch("value", this.onParamsChange); + this.declareWatch('value', this.onParamsChange); this.finalizeConstruction(); } + setInitiallyProvidedValue(params) { if (params.isFunction1Pressed !== undefined) { this.isFunction1Pressed = params.isFunction1Pressed; @@ -124,12 +127,14 @@ export class AtomicServiceSearch extends ViewPU { this.operationItem2 = params.operationItem2; } } + updateStateVars(params) { this.__value.reset(params.value); this.__placeholder.reset(params.placeholder); this.__selectStyle.reset(params.selectStyle); this.__searchStyle.reset(params.searchStyle); } + purgeVariableDependenciesOnElmtId(rmElmtId) { this.__isFunction1Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isFunction2Pressed.purgeDependencyOnElmtId(rmElmtId); @@ -140,6 +145,7 @@ export class AtomicServiceSearch extends ViewPU { this.__selectStyle.purgeDependencyOnElmtId(rmElmtId); this.__searchStyle.purgeDependencyOnElmtId(rmElmtId); } + aboutToBeDeleted() { this.__isFunction1Pressed.aboutToBeDeleted(); this.__isFunction2Pressed.aboutToBeDeleted(); @@ -152,59 +158,77 @@ export class AtomicServiceSearch extends ViewPU { SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } + get isFunction1Pressed() { return this.__isFunction1Pressed.get(); } + set isFunction1Pressed(newValue) { this.__isFunction1Pressed.set(newValue); } + get isFunction2Pressed() { return this.__isFunction2Pressed.get(); } + set isFunction2Pressed(newValue) { this.__isFunction2Pressed.set(newValue); } + get isSearchPressed() { return this.__isSearchPressed.get(); } + set isSearchPressed(newValue) { this.__isSearchPressed.set(newValue); } + get showImage() { return this.__showImage.get(); } + set showImage(newValue) { this.__showImage.set(newValue); } + get value() { return this.__value.get(); } + set value(newValue) { this.__value.set(newValue); } + get placeholder() { return this.__placeholder.get(); } + set placeholder(newValue) { this.__placeholder.set(newValue); } + get selectStyle() { return this.__selectStyle.get(); } + set selectStyle(newValue) { this.__selectStyle.set(newValue); } + get searchStyle() { return this.__searchStyle.get(); } + set searchStyle(newValue) { this.__searchStyle.set(newValue); } + aboutToAppear() { this.showImage = this.value.length === 0 ? true : false; this.initSelectStyle(); this.initSearchStyle(); } + initSelectStyle() { if (typeof this.selectStyle !== 'undefined') { if (typeof this.selectStyle.font === 'undefined') { @@ -215,6 +239,7 @@ export class AtomicServiceSearch extends ViewPU { } } } + initSearchStyle() { if (typeof this.searchStyle !== 'undefined') { if (typeof this.searchStyle.componentBackgroundColor === 'undefined') { @@ -243,9 +268,11 @@ export class AtomicServiceSearch extends ViewPU { } } } + onParamsChange() { this.showImage = this.value.length === 0 ? true : false; } + renderSelect(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -296,6 +323,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } + renderDivider(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -321,6 +349,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } + renderSearch(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Search.create({ @@ -388,6 +417,7 @@ export class AtomicServiceSearch extends ViewPU { }, Search); Search.pop(); } + renderOperationItem1(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -430,6 +460,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } + renderOperationItem2(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -473,6 +504,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } + initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); @@ -521,6 +553,7 @@ export class AtomicServiceSearch extends ViewPU { Flex.pop(); Row.pop(); } + rerender() { this.updateDirtyElements(); } -- Gitee From f24c995c9107f1bf964602219ddbf61b2a526992 Mon Sep 17 00:00:00 2001 From: jiyu Date: Wed, 12 Feb 2025 08:48:00 +0000 Subject: [PATCH 07/11] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- atomicservicesearch/source/atomicservicesearch.ets | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index 92298d1..d33cb4e 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -164,7 +164,7 @@ export struct AtomicServiceSearch { private initSelectStyle(): void { if (typeof this.selectStyle !== 'undefined') { if (typeof this.selectStyle.font === 'undefined') { - this.selectStyle.font = { size: TEXT_SIZE_BODY1 }; + this.selectStyle.font = { size: TEXT_SIZE_BODY1 }; } if (typeof this.selectStyle.fontColor !== 'undefined') { this.selectStyle.fontColor = TEXT_COLOR_PRIMARY; @@ -394,11 +394,12 @@ export struct AtomicServiceSearch { direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start - }){ + }) { this.renderSelect(); this.renderDivider(); this.renderSearch(); } + if (typeof this.searchStyle?.searchButton === 'undefined') { this.renderOperationItem1(); } -- Gitee From 87c541697a44445bad8b458dc5f915f7ce8ab2bb Mon Sep 17 00:00:00 2001 From: jiyu Date: Thu, 13 Feb 2025 07:20:29 +0000 Subject: [PATCH 08/11] =?UTF-8?q?=E5=B0=81=E8=A3=85=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 333 +++++++++--------- .../source/atomicservicesearch.ets | 266 +++++++------- 2 files changed, 289 insertions(+), 310 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index 11e4321..f4c886f 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -42,7 +42,7 @@ const OPERATION_ITEM1_MARGIN_RIGHT = 2; const OPERATION_ITEM2_MARGIN_LEFT = 8; export class AtomicServiceSearch extends ViewPU { - + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); if (typeof paramsLambda === 'function') { @@ -54,18 +54,15 @@ export class AtomicServiceSearch extends ViewPU { this.__showImage = new ObservedPropertySimplePU(true, this, 'showImage'); this.__value = new SynchedPropertySimpleOneWayPU(params.value, this, 'value'); this.__placeholder = new SynchedPropertyObjectOneWayPU(params.placeholder, this, 'placeholder'); + this.__select = new SynchedPropertyObjectOneWayPU(params.select, this, 'select'); + this.__search = new SynchedPropertyObjectOneWayPU(params.search, this, 'search'); + this.operation = undefined; this.controller = new SearchController(); - this.selectItems = undefined; - this.__selectStyle = new SynchedPropertyObjectOneWayPU(params.selectStyle, this, 'selectStyle'); - this.searchEvents = undefined; - this.__searchStyle = new SynchedPropertyObjectOneWayPU(params.searchStyle, this, 'searchStyle'); - this.operationItem1 = undefined; - this.operationItem2 = undefined; this.setInitiallyProvidedValue(params); this.declareWatch('value', this.onParamsChange); this.finalizeConstruction(); } - + setInitiallyProvidedValue(params) { if (params.isFunction1Pressed !== undefined) { this.isFunction1Pressed = params.isFunction1Pressed; @@ -85,25 +82,11 @@ export class AtomicServiceSearch extends ViewPU { if (params.placeholder === undefined) { this.__placeholder.set('Search'); } - if (params.controller !== undefined) { - this.controller = params.controller; - } - if (params.selectItems !== undefined) { - this.selectItems = params.selectItems; + if (params.select === undefined) { + this.__select.set({}); } - if (params.selectStyle === undefined) { - this.__selectStyle.set({ - font: { - size: TEXT_SIZE_BODY1, - }, - fontColor: TEXT_COLOR_PRIMARY - }); - } - if (params.searchEvents !== undefined) { - this.searchEvents = params.searchEvents; - } - if (params.searchStyle === undefined) { - this.__searchStyle.set({ + if (params.search === undefined) { + this.__search.set({ componentBackgroundColor: ATOMIC_SERVICE_SEARCH_BG_COLOR, placeholderFont: { size: TEXT_SIZE_BODY1, @@ -120,21 +103,21 @@ export class AtomicServiceSearch extends ViewPU { pressBackgroundColor: EFFECT_COLOR }); } - if (params.operationItem1 !== undefined) { - this.operationItem1 = params.operationItem1; + if (params.operation !== undefined) { + this.operation = params.operation; } - if (params.operationItem2 !== undefined) { - this.operationItem2 = params.operationItem2; + if (params.controller !== undefined) { + this.controller = params.controller; } } - + updateStateVars(params) { this.__value.reset(params.value); this.__placeholder.reset(params.placeholder); - this.__selectStyle.reset(params.selectStyle); - this.__searchStyle.reset(params.searchStyle); + this.__select.reset(params.select); + this.__search.reset(params.search); } - + purgeVariableDependenciesOnElmtId(rmElmtId) { this.__isFunction1Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isFunction2Pressed.purgeDependencyOnElmtId(rmElmtId); @@ -142,10 +125,10 @@ export class AtomicServiceSearch extends ViewPU { this.__showImage.purgeDependencyOnElmtId(rmElmtId); this.__value.purgeDependencyOnElmtId(rmElmtId); this.__placeholder.purgeDependencyOnElmtId(rmElmtId); - this.__selectStyle.purgeDependencyOnElmtId(rmElmtId); - this.__searchStyle.purgeDependencyOnElmtId(rmElmtId); + this.__select.purgeDependencyOnElmtId(rmElmtId); + this.__search.purgeDependencyOnElmtId(rmElmtId); } - + aboutToBeDeleted() { this.__isFunction1Pressed.aboutToBeDeleted(); this.__isFunction2Pressed.aboutToBeDeleted(); @@ -153,158 +136,158 @@ export class AtomicServiceSearch extends ViewPU { this.__showImage.aboutToBeDeleted(); this.__value.aboutToBeDeleted(); this.__placeholder.aboutToBeDeleted(); - this.__selectStyle.aboutToBeDeleted(); - this.__searchStyle.aboutToBeDeleted(); + this.__select.aboutToBeDeleted(); + this.__search.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } - + get isFunction1Pressed() { return this.__isFunction1Pressed.get(); } - + set isFunction1Pressed(newValue) { this.__isFunction1Pressed.set(newValue); } - + get isFunction2Pressed() { return this.__isFunction2Pressed.get(); } - + set isFunction2Pressed(newValue) { this.__isFunction2Pressed.set(newValue); } - + get isSearchPressed() { return this.__isSearchPressed.get(); } - + set isSearchPressed(newValue) { this.__isSearchPressed.set(newValue); } - + get showImage() { return this.__showImage.get(); } - + set showImage(newValue) { this.__showImage.set(newValue); } - + get value() { return this.__value.get(); } - + set value(newValue) { this.__value.set(newValue); } - + get placeholder() { return this.__placeholder.get(); } - + set placeholder(newValue) { this.__placeholder.set(newValue); } - - get selectStyle() { - return this.__selectStyle.get(); + + get select() { + return this.__select.get(); } - - set selectStyle(newValue) { - this.__selectStyle.set(newValue); + + set select(newValue) { + this.__select.set(newValue); } - - get searchStyle() { - return this.__searchStyle.get(); + + get search() { + return this.__search.get(); } - - set searchStyle(newValue) { - this.__searchStyle.set(newValue); + + set search(newValue) { + this.__search.set(newValue); } - + aboutToAppear() { - this.showImage = this.value.length === 0 ? true : false; + this.showImage = this.value?.length === 0 ? true : false; this.initSelectStyle(); this.initSearchStyle(); } - + initSelectStyle() { - if (typeof this.selectStyle !== 'undefined') { - if (typeof this.selectStyle.font === 'undefined') { - this.selectStyle.font = { size: TEXT_SIZE_BODY1 }; + if (typeof this.select !== 'undefined') { + if (typeof this.select.font === 'undefined') { + this.select.font = { size: TEXT_SIZE_BODY1 }; } - if (typeof this.selectStyle.fontColor !== 'undefined') { - this.selectStyle.fontColor = TEXT_COLOR_PRIMARY; + if (typeof this.select.fontColor !== 'undefined') { + this.select.fontColor = TEXT_COLOR_PRIMARY; } } } - + initSearchStyle() { - if (typeof this.searchStyle !== 'undefined') { - if (typeof this.searchStyle.componentBackgroundColor === 'undefined') { - this.searchStyle.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; + if (typeof this.search !== 'undefined') { + if (typeof this.search.componentBackgroundColor === 'undefined') { + this.search.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; } - if (typeof this.searchStyle.placeholderFont === 'undefined') { - this.searchStyle.placeholderFont = { size: TEXT_SIZE_BODY1 }; + if (typeof this.search.placeholderFont === 'undefined') { + this.search.placeholderFont = { size: TEXT_SIZE_BODY1 }; } - if (typeof this.searchStyle.placeholderColor === 'undefined') { - this.searchStyle.placeholderColor = COLOR_TEXT_SECONDARY; + if (typeof this.search.placeholderColor === 'undefined') { + this.search.placeholderColor = COLOR_TEXT_SECONDARY; } - if (typeof this.searchStyle.textFont === 'undefined') { - this.searchStyle.textFont = { size: TEXT_SIZE_BODY1 }; + if (typeof this.search.textFont === 'undefined') { + this.search.textFont = { size: TEXT_SIZE_BODY1 }; } - if (typeof this.searchStyle.fontColor === 'undefined') { - this.searchStyle.fontColor = COLOR_TEXT_SECONDARY; + if (typeof this.search.fontColor === 'undefined') { + this.search.fontColor = COLOR_TEXT_SECONDARY; } - if (typeof this.searchStyle.searchIcon === 'undefined') { - this.searchStyle.searchIcon = { + if (typeof this.search.searchIcon === 'undefined') { + this.search.searchIcon = { size: ICON_SIZE, color: ICON_COLOR_SECONDARY, }; } - if (typeof this.searchStyle.pressBackgroundColor === 'undefined') { - this.searchStyle.pressBackgroundColor = EFFECT_COLOR; + if (typeof this.search.pressBackgroundColor === 'undefined') { + this.search.pressBackgroundColor = EFFECT_COLOR; } } } - + onParamsChange() { - this.showImage = this.value.length === 0 ? true : false; + this.showImage = this.value?.length === 0 ? true : false; } - + renderSelect(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.flexShrink(FLEX_SHRINK); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { - Select.create(this.selectItems?.options); - Select.value(this.selectItems?.value); - Select.selected(this.selectItems?.selected); - Select.onSelect(this.selectItems?.onSelect); - Select.controlSize(this.selectStyle?.controlSize); - Select.menuItemContentModifier.bind(this)(this.selectStyle?.menuItemContentModifier); - Select.divider(this.selectStyle?.divider); - Select.font(this.selectStyle?.font); - Select.fontColor(this.selectStyle?.fontColor); - Select.selectedOptionBgColor(this.selectStyle?.selectedOptionBgColor); - Select.selectedOptionFont(this.selectStyle?.selectedOptionFont); - Select.selectedOptionFontColor(this.selectStyle?.selectedOptionFontColor); - Select.optionBgColor(this.selectStyle?.optionBgColor); - Select.optionFont(this.selectStyle?.optionFont); - Select.optionFontColor(this.selectStyle?.optionFontColor); - Select.space(this.selectStyle?.space); - Select.arrowPosition(this.selectStyle?.arrowPosition); - Select.menuAlign(this.selectStyle?.menuAlign?.alignType, this.selectStyle?.menuAlign?.offset); - Select.optionWidth(this.selectStyle?.optionWidth); - Select.optionHeight(this.selectStyle?.optionHeight); - Select.menuBackgroundColor(this.selectStyle?.menuBackgroundColor); - Select.menuBackgroundBlurStyle(this.selectStyle?.menuBackgroundBlurStyle); + Select.create(this.select?.options); + Select.value(this.select?.value); + Select.selected(this.select?.selected); + Select.onSelect(this.select?.onSelect); + Select.controlSize(this.select?.controlSize); + Select.menuItemContentModifier.bind(this)(this.select?.menuItemContentModifier); + Select.divider(this.select?.divider); + Select.font(this.select?.font); + Select.fontColor(this.select?.fontColor); + Select.selectedOptionBgColor(this.select?.selectedOptionBgColor); + Select.selectedOptionFont(this.select?.selectedOptionFont); + Select.selectedOptionFontColor(this.select?.selectedOptionFontColor); + Select.optionBgColor(this.select?.optionBgColor); + Select.optionFont(this.select?.optionFont); + Select.optionFontColor(this.select?.optionFontColor); + Select.space(this.select?.space); + Select.arrowPosition(this.select?.arrowPosition); + Select.menuAlign(this.select?.menuAlign?.alignType, this.select?.menuAlign?.offset); + Select.optionWidth(this.select?.optionWidth); + Select.optionHeight(this.select?.optionHeight); + Select.menuBackgroundColor(this.select?.menuBackgroundColor); + Select.menuBackgroundBlurStyle(this.select?.menuBackgroundBlurStyle); Select.height(ATMOIC_SELECT_HEIGHT); Select.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Select.constraintSize({ minHeight: ATMOIC_SELECT_HEIGHT }); @@ -323,11 +306,11 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + renderDivider(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Divider.create(); @@ -349,7 +332,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + renderSearch(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Search.create({ @@ -358,51 +341,51 @@ export class AtomicServiceSearch extends ViewPU { controller: this.controller }); Search.backgroundColor(Color.Transparent); - Search.searchButton(this.searchStyle?.searchButton?.value, this.searchStyle?.searchButton?.option); - Search.placeholderColor(this.searchStyle?.placeholderColor); - Search.placeholderFont(this.searchStyle?.placeholderFont); - Search.textFont(this.searchStyle?.textFont); - Search.textAlign(this.searchStyle?.textAlign); - Search.copyOption(this.searchStyle?.copyOption); - Search.searchIcon(this.searchStyle?.searchIcon); - Search.cancelButton({ icon: this.searchStyle?.cancelIcon }); - Search.fontColor(this.searchStyle?.fontColor); - Search.caretStyle(this.searchStyle?.caretStyle); - Search.enableKeyboardOnFocus(this.searchStyle?.enableKeyboardOnFocus); - Search.selectionMenuHidden(this.searchStyle?.selectionMenuHidden); - Search.customKeyboard(null, { supportAvoidance: this.searchStyle?.keyboardAvoidance }); - Search.type(this.searchStyle?.type); - Search.maxLength(this.searchStyle?.maxLength); - Search.enterKeyType(this.searchStyle?.enterKeyType); - Search.decoration(this.searchStyle?.decoration); - Search.letterSpacing(this.searchStyle?.letterSpacing); - Search.fontFeature(this.searchStyle?.fontFeature); - Search.selectedBackgroundColor(this.searchStyle?.selectedBackgroundColor); - Search.inputFilter(this.searchStyle?.inputFilter?.value, this.searchStyle?.inputFilter?.error); - Search.textIndent(this.searchStyle?.textIndent); - Search.minFontSize(this.searchStyle?.minFontSize); - Search.maxFontSize(this.searchStyle?.maxFontSize); - Search.editMenuOptions(this.searchStyle?.editMenuOptions); - Search.enablePreviewText(this.searchStyle?.enablePreviewText); - Search.enableHapticFeedback(this.searchStyle?.enableHapticFeedback); - Search.placeholderFont(this.searchStyle?.placeholderFont); - Search.textFont(this.searchStyle?.textFont); - Search.searchIcon(this.searchStyle?.searchIcon); - Search.fontColor(this.searchStyle?.fontColor); - Search.onCut(this.searchEvents?.onCut); - Search.onCopy(this.searchEvents?.onCopy); - Search.onPaste(this.searchEvents?.onPaste); - Search.onSubmit(this.searchEvents?.onSubmit); - Search.onDidInsert(this.searchEvents?.onDidInsert); - Search.onDidDelete(this.searchEvents?.onDidDelete); - Search.onEditChange(this.searchEvents?.onEditChange); - Search.onWillInsert(this.searchEvents?.onWillInsert); - Search.onWillDelete(this.searchEvents?.onWillDelete); - Search.onContentScroll(this.searchEvents?.onContentScroll); - Search.onTextSelectionChange(this.searchEvents?.onTextSelectionChange); + Search.searchButton(this.search?.searchButton?.value, this.search?.searchButton?.option); + Search.placeholderColor(this.search?.placeholderColor); + Search.placeholderFont(this.search?.placeholderFont); + Search.textFont(this.search?.textFont); + Search.textAlign(this.search?.textAlign); + Search.copyOption(this.search?.copyOption); + Search.searchIcon(this.search?.searchIcon); + Search.cancelButton({ icon: this.search?.cancelIcon }); + Search.fontColor(this.search?.fontColor); + Search.caretStyle(this.search?.caretStyle); + Search.enableKeyboardOnFocus(this.search?.enableKeyboardOnFocus); + Search.selectionMenuHidden(this.search?.selectionMenuHidden); + Search.customKeyboard(null, { supportAvoidance: this.search?.keyboardAvoidance }); + Search.type(this.search?.type); + Search.maxLength(this.search?.maxLength); + Search.enterKeyType(this.search?.enterKeyType); + Search.decoration(this.search?.decoration); + Search.letterSpacing(this.search?.letterSpacing); + Search.fontFeature(this.search?.fontFeature); + Search.selectedBackgroundColor(this.search?.selectedBackgroundColor); + Search.inputFilter(this.search?.inputFilter?.value, this.search?.inputFilter?.error); + Search.textIndent(this.search?.textIndent); + Search.minFontSize(this.search?.minFontSize); + Search.maxFontSize(this.search?.maxFontSize); + Search.editMenuOptions(this.search?.editMenuOptions); + Search.enablePreviewText(this.search?.enablePreviewText); + Search.enableHapticFeedback(this.search?.enableHapticFeedback); + Search.placeholderFont(this.search?.placeholderFont); + Search.textFont(this.search?.textFont); + Search.searchIcon(this.search?.searchIcon); + Search.fontColor(this.search?.fontColor); + Search.onCut(this.search?.onCut); + Search.onCopy(this.search?.onCopy); + Search.onPaste(this.search?.onPaste); + Search.onSubmit(this.search?.onSubmit); + Search.onDidInsert(this.search?.onDidInsert); + Search.onDidDelete(this.search?.onDidDelete); + Search.onEditChange(this.search?.onEditChange); + Search.onWillInsert(this.search?.onWillInsert); + Search.onWillDelete(this.search?.onWillDelete); + Search.onContentScroll(this.search?.onContentScroll); + Search.onTextSelectionChange(this.search?.onTextSelectionChange); Search.onChange((value, previewText) => { - if (typeof this.searchEvents?.onChange !== 'undefined') { - this.searchEvents?.onChange(value, previewText); + if (typeof this.search?.onChange !== 'undefined') { + this.search?.onChange(value, previewText); } this.value = value; }); @@ -417,15 +400,15 @@ export class AtomicServiceSearch extends ViewPU { }, Search); Search.pop(); } - + renderOperationItem1(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.operationItem1 !== 'undefined' && this.showImage) { + if (typeof this.operation?.auxiliaryItem !== 'undefined' && this.showImage) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); - Row.onClick(this.operationItem1?.action); + Row.onClick(this.operation?.auxiliaryItem.action); Row.flexShrink(FLEX_SHRINK); Row.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Row.alignItems(VerticalAlign.Center); @@ -433,7 +416,7 @@ export class AtomicServiceSearch extends ViewPU { Row.width(ATMOIC_SELECT_HEIGHT); Row.height(ATMOIC_SELECT_HEIGHT); Row.margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }); - Row.backgroundColor(this.isFunction1Pressed ? this.searchStyle?.pressBackgroundColor : Color.Transparent); + Row.backgroundColor(this.isFunction1Pressed ? this.search?.pressBackgroundColor : Color.Transparent); Row.onTouch((event) => { if (event && event.type === TouchType.Down) { this.isFunction1Pressed = true; @@ -444,7 +427,7 @@ export class AtomicServiceSearch extends ViewPU { }); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { - Image.create(this.operationItem1?.value); + Image.create(this.operation?.auxiliaryItem?.value); Image.objectFit(ImageFit.Contain); Image.fillColor(FUNCTION_ICON_COLOR); Image.width(ICON_WIDTH_AND_HEIGTH); @@ -460,15 +443,15 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + renderOperationItem2(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.operationItem2 !== 'undefined') { + if (typeof this.operation?.auxiliaryItem !== 'undefined') { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); - Row.onClick(this.operationItem2?.action); + Row.onClick(this.operation?.auxiliaryItem.action); Row.flexShrink(FLEX_SHRINK); Row.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Row.alignItems(VerticalAlign.Center); @@ -476,8 +459,8 @@ export class AtomicServiceSearch extends ViewPU { Row.width(ATOMIC_SERVICE_SEARCH_HEIGHT); Row.height(ATOMIC_SERVICE_SEARCH_HEIGHT); Row.margin(OPERATION_ITEM2_MARGIN_LEFT); - Row.backgroundColor(this.isFunction2Pressed ? this.searchStyle?.pressBackgroundColor : - this.searchStyle?.componentBackgroundColor); + Row.backgroundColor(this.isFunction2Pressed ? + this.search?.pressBackgroundColor : this.search?.componentBackgroundColor); Row.onTouch((event) => { if (event && event.type === TouchType.Down) { this.isFunction2Pressed = true; @@ -488,7 +471,7 @@ export class AtomicServiceSearch extends ViewPU { }); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { - Image.create(this.operationItem2?.value); + Image.create(this.operation?.auxiliaryItem.value); Image.objectFit(ImageFit.Contain); Image.fillColor(FUNCTION_ICON_COLOR); Image.width(ICON_WIDTH_AND_HEIGTH); @@ -504,7 +487,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); @@ -522,7 +505,7 @@ export class AtomicServiceSearch extends ViewPU { Stack.alignContent(Alignment.End); Stack.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Stack.backgroundColor(this.isSearchPressed ? - this.searchStyle?.pressBackgroundColor : this.searchStyle?.componentBackgroundColor); + this.search?.pressBackgroundColor : this.search?.componentBackgroundColor); }, Stack); this.observeComponentCreation2((elmtId, isInitialRender) => { Flex.create({ @@ -537,7 +520,7 @@ export class AtomicServiceSearch extends ViewPU { Flex.pop(); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.searchStyle?.searchButton === 'undefined') { + if (typeof this.search?.searchButton === 'undefined') { this.ifElseBranchUpdateFunction(0, () => { this.renderOperationItem1.bind(this)(); }); @@ -553,10 +536,10 @@ export class AtomicServiceSearch extends ViewPU { Flex.pop(); Row.pop(); } - rerender() { this.updateDirtyElements(); } + } export default { AtomicServiceSearch }; diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index d33cb4e..f068905 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -12,7 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { LengthMetrics, SelectOptions, OperationOption } from '@kit.ArkUI'; +import { LengthMetrics, OperationOption } from '@kit.ArkUI'; const TEXT_SIZE_BODY1: Resource = $r(`sys.float.ohos_id_text_size_body1`); const COLOR_TEXT_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); @@ -51,7 +51,11 @@ interface MenuAlignOption { offset?: Offset } -interface SelectStyles { +interface SelectOptions { + options?: Array; + selected?: number; + value?: string; + onSelect?: (index: number, value?: string) => void; controlSize?: ControlSize; menuItemContentModifier?: ContentModifier; divider?: Optional | null; @@ -72,22 +76,7 @@ interface SelectStyles { menuBackgroundBlurStyle?: BlurStyle; } -interface SearchEvents { - onSubmit?: Callback | SearchSubmitCallback; - onChange?: EditableTextOnChangeCallback; - onCopy?: Callback; - onCut?: Callback; - onPaste?: OnPasteCallback; - onTextSelectionChange?: OnTextSelectionChangeCallback; - onContentScroll?: OnContentScrollCallback; - onEditChange?: Callback; - onWillInsert?: Callback; - onDidInsert?: Callback; - onWillDelete?: Callback; - onDidDelete?: Callback; -} - -interface SearchStyle { +interface SearchOptions { componentBackgroundColor?: ResourceColor; pressBackgroundColor?: ResourceColor; searchButton?: SearchButtonParams; @@ -117,6 +106,23 @@ interface SearchStyle { editMenuOptions?: EditMenuOptions; enablePreviewText?: boolean; enableHapticFeedback?: boolean; + onSubmit?: Callback | SearchSubmitCallback; + onChange?: EditableTextOnChangeCallback; + onCopy?: Callback; + onCut?: Callback; + onPaste?: OnPasteCallback; + onTextSelectionChange?: OnTextSelectionChangeCallback; + onContentScroll?: OnContentScrollCallback; + onEditChange?: Callback; + onWillInsert?: Callback; + onDidInsert?: Callback; + onWillDelete?: Callback; + onDidDelete?: Callback; +} + +interface OperationOptions { + auxiliaryItem?: OperationOption; + independentItem?: OperationOption; } @Component @@ -125,18 +131,10 @@ export struct AtomicServiceSearch { @State private isFunction2Pressed: boolean = false; @State private isSearchPressed: boolean = false; @State private showImage: boolean = true; - @Prop @Watch('onParamsChange') value: string = ''; + @Prop @Watch('onParamsChange') value?: string = ''; @Prop placeholder?: ResourceStr = 'Search'; - controller: SearchController = new SearchController(); - selectItems?: SelectOptions; - @Prop selectStyle?: SelectStyles = { - font:{ - size: TEXT_SIZE_BODY1, - }, - fontColor: TEXT_COLOR_PRIMARY - }; - searchEvents?: SearchEvents; - @Prop searchStyle?: SearchStyle = { + @Prop select?: SelectOptions = {}; + @Prop search?: SearchOptions = { componentBackgroundColor: ATOMIC_SERVICE_SEARCH_BG_COLOR, placeholderFont: { size: TEXT_SIZE_BODY1, @@ -152,86 +150,85 @@ export struct AtomicServiceSearch { }, pressBackgroundColor: EFFECT_COLOR }; - operationItem1?: OperationOption; - operationItem2?: OperationOption; + operation?: OperationOptions; + controller?: SearchController = new SearchController(); aboutToAppear(): void { - this.showImage = this.value.length === 0 ? true : false; + this.showImage = this.value?.length === 0 ? true : false; this.initSelectStyle(); this.initSearchStyle(); } private initSelectStyle(): void { - if (typeof this.selectStyle !== 'undefined') { - if (typeof this.selectStyle.font === 'undefined') { - this.selectStyle.font = { size: TEXT_SIZE_BODY1 }; + if (typeof this.select !== 'undefined') { + if (typeof this.select.font === 'undefined') { + this.select.font = { size: TEXT_SIZE_BODY1 }; } - if (typeof this.selectStyle.fontColor !== 'undefined') { - this.selectStyle.fontColor = TEXT_COLOR_PRIMARY; + if (typeof this.select.fontColor !== 'undefined') { + this.select.fontColor = TEXT_COLOR_PRIMARY; } } - } private initSearchStyle() : void { - if (typeof this.searchStyle !== 'undefined') { - if (typeof this.searchStyle.componentBackgroundColor === 'undefined') { - this.searchStyle.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; + if (typeof this.search !== 'undefined') { + if (typeof this.search.componentBackgroundColor === 'undefined') { + this.search.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; } - if (typeof this.searchStyle.placeholderFont === 'undefined') { - this.searchStyle.placeholderFont = { size: TEXT_SIZE_BODY1 }; + if (typeof this.search.placeholderFont === 'undefined') { + this.search.placeholderFont = { size: TEXT_SIZE_BODY1 }; } - if (typeof this.searchStyle.placeholderColor === 'undefined') { - this.searchStyle.placeholderColor = COLOR_TEXT_SECONDARY; + if (typeof this.search.placeholderColor === 'undefined') { + this.search.placeholderColor = COLOR_TEXT_SECONDARY; } - if (typeof this.searchStyle.textFont === 'undefined') { - this.searchStyle.textFont = { size: TEXT_SIZE_BODY1 }; + if (typeof this.search.textFont === 'undefined') { + this.search.textFont = { size: TEXT_SIZE_BODY1 }; } - if (typeof this.searchStyle.fontColor === 'undefined') { - this.searchStyle.fontColor = COLOR_TEXT_SECONDARY; + if (typeof this.search.fontColor === 'undefined') { + this.search.fontColor = COLOR_TEXT_SECONDARY; } - if (typeof this.searchStyle.searchIcon === 'undefined') { - this.searchStyle.searchIcon = { + if (typeof this.search.searchIcon === 'undefined') { + this.search.searchIcon = { size: ICON_SIZE, color: ICON_COLOR_SECONDARY, } } - if (typeof this.searchStyle.pressBackgroundColor === 'undefined') { - this.searchStyle.pressBackgroundColor = EFFECT_COLOR; + if (typeof this.search.pressBackgroundColor === 'undefined') { + this.search.pressBackgroundColor = EFFECT_COLOR; } } } private onParamsChange(): void { - this.showImage = this.value.length === 0 ? true : false; + this.showImage = this.value?.length === 0 ? true : false; } @Builder renderSelect() { - if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { Row() { - Select(this.selectItems?.options) - .value(this.selectItems?.value) - .selected(this.selectItems?.selected) - .onSelect(this.selectItems?.onSelect) - .controlSize(this.selectStyle?.controlSize) - .menuItemContentModifier(this.selectStyle?.menuItemContentModifier) - .divider(this.selectStyle?.divider) - .font(this.selectStyle?.font) - .fontColor(this.selectStyle?.fontColor) - .selectedOptionBgColor(this.selectStyle?.selectedOptionBgColor) - .selectedOptionFont(this.selectStyle?.selectedOptionFont) - .selectedOptionFontColor(this.selectStyle?.selectedOptionFontColor) - .optionBgColor(this.selectStyle?.optionBgColor) - .optionFont(this.selectStyle?.optionFont) - .optionFontColor(this.selectStyle?.optionFontColor) - .space(this.selectStyle?.space) - .arrowPosition(this.selectStyle?.arrowPosition) - .menuAlign(this.selectStyle?.menuAlign?.alignType, this.selectStyle?.menuAlign?.offset) - .optionWidth(this.selectStyle?.optionWidth) - .optionHeight(this.selectStyle?.optionHeight) - .menuBackgroundColor(this.selectStyle?.menuBackgroundColor) - .menuBackgroundBlurStyle(this.selectStyle?.menuBackgroundBlurStyle) + Select(this.select?.options) + .value(this.select?.value) + .selected(this.select?.selected) + .onSelect(this.select?.onSelect) + .controlSize(this.select?.controlSize) + .menuItemContentModifier(this.select?.menuItemContentModifier) + .divider(this.select?.divider) + .font(this.select?.font) + .fontColor(this.select?.fontColor) + .selectedOptionBgColor(this.select?.selectedOptionBgColor) + .selectedOptionFont(this.select?.selectedOptionFont) + .selectedOptionFontColor(this.select?.selectedOptionFontColor) + .optionBgColor(this.select?.optionBgColor) + .optionFont(this.select?.optionFont) + .optionFontColor(this.select?.optionFontColor) + .space(this.select?.space) + .arrowPosition(this.select?.arrowPosition) + .menuAlign(this.select?.menuAlign?.alignType, this.select?.menuAlign?.offset) + .optionWidth(this.select?.optionWidth) + .optionHeight(this.select?.optionHeight) + .menuBackgroundColor(this.select?.menuBackgroundColor) + .menuBackgroundBlurStyle(this.select?.menuBackgroundBlurStyle) .height(ATMOIC_SELECT_HEIGHT) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .constraintSize({ minHeight: ATMOIC_SELECT_HEIGHT }) @@ -245,7 +242,7 @@ export struct AtomicServiceSearch { @Builder renderDivider() { - if (typeof this.selectItems !== 'undefined' && this.selectItems.options.length !== 0) { + if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { Divider() .vertical(true) .color(Color.Black) @@ -266,51 +263,51 @@ export struct AtomicServiceSearch { controller: this.controller }) .backgroundColor(Color.Transparent) - .searchButton(this.searchStyle?.searchButton?.value, this.searchStyle?.searchButton?.option) - .placeholderColor(this.searchStyle?.placeholderColor) - .placeholderFont(this.searchStyle?.placeholderFont) - .textFont(this.searchStyle?.textFont) - .textAlign(this.searchStyle?.textAlign) - .copyOption(this.searchStyle?.copyOption) - .searchIcon(this.searchStyle?.searchIcon) - .cancelButton({icon: this.searchStyle?.cancelIcon}) - .fontColor(this.searchStyle?.fontColor) - .caretStyle(this.searchStyle?.caretStyle) - .enableKeyboardOnFocus(this.searchStyle?.enableKeyboardOnFocus) - .selectionMenuHidden(this.searchStyle?.selectionMenuHidden) - .customKeyboard(null, {supportAvoidance: this.searchStyle?.keyboardAvoidance}) - .type(this.searchStyle?.type) - .maxLength(this.searchStyle?.maxLength) - .enterKeyType(this.searchStyle?.enterKeyType) - .decoration(this.searchStyle?.decoration) - .letterSpacing(this.searchStyle?.letterSpacing) - .fontFeature(this.searchStyle?.fontFeature) - .selectedBackgroundColor(this.searchStyle?.selectedBackgroundColor) - .inputFilter(this.searchStyle?.inputFilter?.value, this.searchStyle?.inputFilter?.error) - .textIndent(this.searchStyle?.textIndent) - .minFontSize(this.searchStyle?.minFontSize) - .maxFontSize(this.searchStyle?.maxFontSize) - .editMenuOptions(this.searchStyle?.editMenuOptions) - .enablePreviewText(this.searchStyle?.enablePreviewText) - .enableHapticFeedback(this.searchStyle?.enableHapticFeedback) - .placeholderFont(this.searchStyle?.placeholderFont) - .textFont(this.searchStyle?.textFont) - .searchIcon(this.searchStyle?.searchIcon) - .fontColor(this.searchStyle?.fontColor) - .onCut(this.searchEvents?.onCut) - .onCopy(this.searchEvents?.onCopy) - .onPaste(this.searchEvents?.onPaste) - .onSubmit(this.searchEvents?.onSubmit) - .onDidInsert(this.searchEvents?.onDidInsert) - .onDidDelete(this.searchEvents?.onDidDelete) - .onEditChange(this.searchEvents?.onEditChange) - .onWillInsert(this.searchEvents?.onWillInsert) - .onWillDelete(this.searchEvents?.onWillDelete) - .onContentScroll(this.searchEvents?.onContentScroll) - .onTextSelectionChange(this.searchEvents?.onTextSelectionChange) + .searchButton(this.search?.searchButton?.value, this.search?.searchButton?.option) + .placeholderColor(this.search?.placeholderColor) + .placeholderFont(this.search?.placeholderFont) + .textFont(this.search?.textFont) + .textAlign(this.search?.textAlign) + .copyOption(this.search?.copyOption) + .searchIcon(this.search?.searchIcon) + .cancelButton({icon: this.search?.cancelIcon}) + .fontColor(this.search?.fontColor) + .caretStyle(this.search?.caretStyle) + .enableKeyboardOnFocus(this.search?.enableKeyboardOnFocus) + .selectionMenuHidden(this.search?.selectionMenuHidden) + .customKeyboard(null, {supportAvoidance: this.search?.keyboardAvoidance}) + .type(this.search?.type) + .maxLength(this.search?.maxLength) + .enterKeyType(this.search?.enterKeyType) + .decoration(this.search?.decoration) + .letterSpacing(this.search?.letterSpacing) + .fontFeature(this.search?.fontFeature) + .selectedBackgroundColor(this.search?.selectedBackgroundColor) + .inputFilter(this.search?.inputFilter?.value, this.search?.inputFilter?.error) + .textIndent(this.search?.textIndent) + .minFontSize(this.search?.minFontSize) + .maxFontSize(this.search?.maxFontSize) + .editMenuOptions(this.search?.editMenuOptions) + .enablePreviewText(this.search?.enablePreviewText) + .enableHapticFeedback(this.search?.enableHapticFeedback) + .placeholderFont(this.search?.placeholderFont) + .textFont(this.search?.textFont) + .searchIcon(this.search?.searchIcon) + .fontColor(this.search?.fontColor) + .onCut(this.search?.onCut) + .onCopy(this.search?.onCopy) + .onPaste(this.search?.onPaste) + .onSubmit(this.search?.onSubmit) + .onDidInsert(this.search?.onDidInsert) + .onDidDelete(this.search?.onDidDelete) + .onEditChange(this.search?.onEditChange) + .onWillInsert(this.search?.onWillInsert) + .onWillDelete(this.search?.onWillDelete) + .onContentScroll(this.search?.onContentScroll) + .onTextSelectionChange(this.search?.onTextSelectionChange) .onChange((value: string, previewText?: PreviewText) => { - if (typeof this.searchEvents?.onChange !== 'undefined') { - this.searchEvents?.onChange(value, previewText); + if (typeof this.search?.onChange !== 'undefined') { + this.search?.onChange(value, previewText); } this.value = value; }) @@ -325,15 +322,15 @@ export struct AtomicServiceSearch { @Builder renderOperationItem1() { - if (typeof this.operationItem1 !== 'undefined' && this.showImage) { + if (typeof this.operation?.auxiliaryItem !== 'undefined' && this.showImage) { Row() { - Image(this.operationItem1?.value) + Image(this.operation?.auxiliaryItem?.value) .objectFit(ImageFit.Contain) .fillColor(FUNCTION_ICON_COLOR) .width(ICON_WIDTH_AND_HEIGTH) .height(ICON_WIDTH_AND_HEIGTH) } - .onClick(this.operationItem1?.action) + .onClick(this.operation?.auxiliaryItem.action) .flexShrink(FLEX_SHRINK) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .alignItems(VerticalAlign.Center) @@ -341,7 +338,7 @@ export struct AtomicServiceSearch { .width(ATMOIC_SELECT_HEIGHT) .height(ATMOIC_SELECT_HEIGHT) .margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }) - .backgroundColor(this.isFunction1Pressed ? this.searchStyle?.pressBackgroundColor : Color.Transparent) + .backgroundColor(this.isFunction1Pressed ? this.search?.pressBackgroundColor : Color.Transparent) .onTouch((event?: TouchEvent) => { if (event && event.type === TouchType.Down) { this.isFunction1Pressed = true; @@ -354,15 +351,15 @@ export struct AtomicServiceSearch { @Builder renderOperationItem2() { - if (typeof this.operationItem2 !== 'undefined') { + if (typeof this.operation?.auxiliaryItem !== 'undefined') { Row() { - Image(this.operationItem2?.value) + Image(this.operation?.auxiliaryItem.value) .objectFit(ImageFit.Contain) .fillColor(FUNCTION_ICON_COLOR) .width(ICON_WIDTH_AND_HEIGTH) .height(ICON_WIDTH_AND_HEIGTH) } - .onClick(this.operationItem2?.action) + .onClick(this.operation?.auxiliaryItem.action) .flexShrink(FLEX_SHRINK) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .alignItems(VerticalAlign.Center) @@ -370,8 +367,8 @@ export struct AtomicServiceSearch { .width(ATOMIC_SERVICE_SEARCH_HEIGHT) .height(ATOMIC_SERVICE_SEARCH_HEIGHT) .margin(OPERATION_ITEM2_MARGIN_LEFT) - .backgroundColor(this.isFunction2Pressed ? this.searchStyle?.pressBackgroundColor : - this.searchStyle?.componentBackgroundColor) + .backgroundColor(this.isFunction2Pressed ? + this.search?.pressBackgroundColor : this.search?.componentBackgroundColor) .onTouch((event?: TouchEvent) => { if (event && event.type === TouchType.Down) { this.isFunction2Pressed = true; @@ -394,20 +391,19 @@ export struct AtomicServiceSearch { direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start - }) { + }){ this.renderSelect(); this.renderDivider(); this.renderSearch(); } - - if (typeof this.searchStyle?.searchButton === 'undefined') { + if (typeof this.search?.searchButton === 'undefined') { this.renderOperationItem1(); } } .alignContent(Alignment.End) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .backgroundColor(this.isSearchPressed ? - this.searchStyle?.pressBackgroundColor : this.searchStyle?.componentBackgroundColor) + this.search?.pressBackgroundColor : this.search?.componentBackgroundColor) this.renderOperationItem2(); } -- Gitee From e1003af55b444de575fc085072761cfe2c515a28 Mon Sep 17 00:00:00 2001 From: jiyu Date: Thu, 13 Feb 2025 10:49:26 +0000 Subject: [PATCH 09/11] updata AtomicServiceSearch Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 93 ++++++++++--------- .../source/atomicservicesearch.ets | 41 ++++---- 2 files changed, 68 insertions(+), 66 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index f4c886f..987d0e5 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -30,11 +30,11 @@ const ICON_SIZE = 16; const SELECT_PADDING_LEFT = 6; const SELECT_MARGIN_LEFT = 2; const FLEX_SHRINK = 0; -const DIVIDER_OPACITY = 0.6; +const DIVIDER_OPACITY = 0.5; const DIVIDER_MARGIN_LEFT = 2; const DIVIDER_MARGIN_RIGHT = -2; const ATOMIC_SERVICE_SEARCH_HEIGHT = 40; -const ATMOIC_SELECT_HEIGHT = 36; +const ATOMIC_SELECT_HEIGHT = 36; const ATOMIC_SELECT_BORDER_RADIUS = 20; const ATOMIC_DIVIDER_HEIGHT = 20; const ICON_WIDTH_AND_HEIGTH = 24; @@ -42,7 +42,7 @@ const OPERATION_ITEM1_MARGIN_RIGHT = 2; const OPERATION_ITEM2_MARGIN_LEFT = 8; export class AtomicServiceSearch extends ViewPU { - + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); if (typeof paramsLambda === 'function') { @@ -62,7 +62,7 @@ export class AtomicServiceSearch extends ViewPU { this.declareWatch('value', this.onParamsChange); this.finalizeConstruction(); } - + setInitiallyProvidedValue(params) { if (params.isFunction1Pressed !== undefined) { this.isFunction1Pressed = params.isFunction1Pressed; @@ -110,14 +110,14 @@ export class AtomicServiceSearch extends ViewPU { this.controller = params.controller; } } - + updateStateVars(params) { this.__value.reset(params.value); this.__placeholder.reset(params.placeholder); this.__select.reset(params.select); this.__search.reset(params.search); } - + purgeVariableDependenciesOnElmtId(rmElmtId) { this.__isFunction1Pressed.purgeDependencyOnElmtId(rmElmtId); this.__isFunction2Pressed.purgeDependencyOnElmtId(rmElmtId); @@ -128,7 +128,7 @@ export class AtomicServiceSearch extends ViewPU { this.__select.purgeDependencyOnElmtId(rmElmtId); this.__search.purgeDependencyOnElmtId(rmElmtId); } - + aboutToBeDeleted() { this.__isFunction1Pressed.aboutToBeDeleted(); this.__isFunction2Pressed.aboutToBeDeleted(); @@ -141,77 +141,77 @@ export class AtomicServiceSearch extends ViewPU { SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } - + get isFunction1Pressed() { return this.__isFunction1Pressed.get(); } - + set isFunction1Pressed(newValue) { this.__isFunction1Pressed.set(newValue); } - + get isFunction2Pressed() { return this.__isFunction2Pressed.get(); } - + set isFunction2Pressed(newValue) { this.__isFunction2Pressed.set(newValue); } - + get isSearchPressed() { return this.__isSearchPressed.get(); } - + set isSearchPressed(newValue) { this.__isSearchPressed.set(newValue); } - + get showImage() { return this.__showImage.get(); } - + set showImage(newValue) { this.__showImage.set(newValue); } - + get value() { return this.__value.get(); } - + set value(newValue) { this.__value.set(newValue); } - + get placeholder() { return this.__placeholder.get(); } - + set placeholder(newValue) { this.__placeholder.set(newValue); } - + get select() { return this.__select.get(); } - + set select(newValue) { this.__select.set(newValue); } - + get search() { return this.__search.get(); } - + set search(newValue) { this.__search.set(newValue); } - + aboutToAppear() { this.showImage = this.value?.length === 0 ? true : false; this.initSelectStyle(); this.initSearchStyle(); } - + initSelectStyle() { if (typeof this.select !== 'undefined') { if (typeof this.select.font === 'undefined') { @@ -222,7 +222,7 @@ export class AtomicServiceSearch extends ViewPU { } } } - + initSearchStyle() { if (typeof this.search !== 'undefined') { if (typeof this.search.componentBackgroundColor === 'undefined') { @@ -251,15 +251,15 @@ export class AtomicServiceSearch extends ViewPU { } } } - + onParamsChange() { this.showImage = this.value?.length === 0 ? true : false; } - + renderSelect(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { + if (typeof this.select !== 'undefined' && typeof this.select.options !== 'undefined') { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); @@ -288,9 +288,9 @@ export class AtomicServiceSearch extends ViewPU { Select.optionHeight(this.select?.optionHeight); Select.menuBackgroundColor(this.select?.menuBackgroundColor); Select.menuBackgroundBlurStyle(this.select?.menuBackgroundBlurStyle); - Select.height(ATMOIC_SELECT_HEIGHT); + Select.height(ATOMIC_SELECT_HEIGHT); Select.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); - Select.constraintSize({ minHeight: ATMOIC_SELECT_HEIGHT }); + Select.constraintSize({ minHeight: ATOMIC_SELECT_HEIGHT }); Select.padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }); Select.margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }); Select.backgroundColor(Color.Transparent); @@ -306,11 +306,11 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + renderDivider(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { + if (typeof this.select !== 'undefined' && typeof this.select.options !== 'undefined') { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Divider.create(); @@ -332,7 +332,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + renderSearch(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Search.create({ @@ -400,8 +400,8 @@ export class AtomicServiceSearch extends ViewPU { }, Search); Search.pop(); } - - renderOperationItem1(parent = null) { + + renderAuxiliaryItem(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (typeof this.operation?.auxiliaryItem !== 'undefined' && this.showImage) { @@ -413,8 +413,8 @@ export class AtomicServiceSearch extends ViewPU { Row.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Row.alignItems(VerticalAlign.Center); Row.justifyContent(FlexAlign.Center); - Row.width(ATMOIC_SELECT_HEIGHT); - Row.height(ATMOIC_SELECT_HEIGHT); + Row.width(ATOMIC_SELECT_HEIGHT); + Row.height(ATOMIC_SELECT_HEIGHT); Row.margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }); Row.backgroundColor(this.isFunction1Pressed ? this.search?.pressBackgroundColor : Color.Transparent); Row.onTouch((event) => { @@ -443,15 +443,15 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - - renderOperationItem2(parent = null) { + + renderIndependentItem(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (typeof this.operation?.auxiliaryItem !== 'undefined') { + if (typeof this.operation?.independentItem !== 'undefined') { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); - Row.onClick(this.operation?.auxiliaryItem.action); + Row.onClick(this.operation?.independentItem.action); Row.flexShrink(FLEX_SHRINK); Row.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Row.alignItems(VerticalAlign.Center); @@ -471,7 +471,7 @@ export class AtomicServiceSearch extends ViewPU { }); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { - Image.create(this.operation?.auxiliaryItem.value); + Image.create(this.operation?.independentItem.value); Image.objectFit(ImageFit.Contain); Image.fillColor(FUNCTION_ICON_COLOR); Image.width(ICON_WIDTH_AND_HEIGTH); @@ -487,7 +487,7 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); } - + initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); @@ -522,7 +522,7 @@ export class AtomicServiceSearch extends ViewPU { If.create(); if (typeof this.search?.searchButton === 'undefined') { this.ifElseBranchUpdateFunction(0, () => { - this.renderOperationItem1.bind(this)(); + this.renderAuxiliaryItem.bind(this)(); }); } else { @@ -532,10 +532,11 @@ export class AtomicServiceSearch extends ViewPU { }, If); If.pop(); Stack.pop(); - this.renderOperationItem2.bind(this)(); + this.renderIndependentItem.bind(this)(); Flex.pop(); Row.pop(); } + rerender() { this.updateDirtyElements(); } diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index f068905..b105387 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -14,6 +14,7 @@ */ import { LengthMetrics, OperationOption } from '@kit.ArkUI'; +declare type OnSelectCallback = (index: number, value?: string) => void; const TEXT_SIZE_BODY1: Resource = $r(`sys.float.ohos_id_text_size_body1`); const COLOR_TEXT_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); const ICON_COLOR_SECONDARY = $r('sys.color.ohos_id_color_secondary'); @@ -25,11 +26,11 @@ const ICON_SIZE: number = 16; const SELECT_PADDING_LEFT: number = 6; const SELECT_MARGIN_LEFT: number = 2; const FLEX_SHRINK: number = 0; -const DIVIDER_OPACITY: number = 0.6; +const DIVIDER_OPACITY: number = 0.5; const DIVIDER_MARGIN_LEFT: number = 2; const DIVIDER_MARGIN_RIGHT: number = -2; const ATOMIC_SERVICE_SEARCH_HEIGHT: number = 40; -const ATMOIC_SELECT_HEIGHT: number = 36; +const ATOMIC_SELECT_HEIGHT: number = 36; const ATOMIC_SELECT_BORDER_RADIUS: number = 20; const ATOMIC_DIVIDER_HEIGHT: number = 20; const ICON_WIDTH_AND_HEIGTH: number = 24; @@ -55,7 +56,7 @@ interface SelectOptions { options?: Array; selected?: number; value?: string; - onSelect?: (index: number, value?: string) => void; + onSelect?: OnSelectCallback; controlSize?: ControlSize; menuItemContentModifier?: ContentModifier; divider?: Optional | null; @@ -162,7 +163,7 @@ export struct AtomicServiceSearch { private initSelectStyle(): void { if (typeof this.select !== 'undefined') { if (typeof this.select.font === 'undefined') { - this.select.font = { size: TEXT_SIZE_BODY1 }; + this.select.font = { size: TEXT_SIZE_BODY1 }; } if (typeof this.select.fontColor !== 'undefined') { this.select.fontColor = TEXT_COLOR_PRIMARY; @@ -205,7 +206,7 @@ export struct AtomicServiceSearch { @Builder renderSelect() { - if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { + if (typeof this.select !== 'undefined' && typeof this.select.options !== 'undefined') { Row() { Select(this.select?.options) .value(this.select?.value) @@ -229,9 +230,9 @@ export struct AtomicServiceSearch { .optionHeight(this.select?.optionHeight) .menuBackgroundColor(this.select?.menuBackgroundColor) .menuBackgroundBlurStyle(this.select?.menuBackgroundBlurStyle) - .height(ATMOIC_SELECT_HEIGHT) + .height(ATOMIC_SELECT_HEIGHT) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) - .constraintSize({ minHeight: ATMOIC_SELECT_HEIGHT }) + .constraintSize({ minHeight: ATOMIC_SELECT_HEIGHT }) .padding({ start: LengthMetrics.vp(SELECT_PADDING_LEFT) }) .margin({ start: LengthMetrics.vp(SELECT_MARGIN_LEFT) }) .backgroundColor(Color.Transparent) @@ -242,7 +243,7 @@ export struct AtomicServiceSearch { @Builder renderDivider() { - if (typeof this.select !== 'undefined' && this.select?.options?.length !== 0) { + if (typeof this.select !== 'undefined' && typeof this.select.options !== 'undefined') { Divider() .vertical(true) .color(Color.Black) @@ -270,12 +271,12 @@ export struct AtomicServiceSearch { .textAlign(this.search?.textAlign) .copyOption(this.search?.copyOption) .searchIcon(this.search?.searchIcon) - .cancelButton({icon: this.search?.cancelIcon}) + .cancelButton({ icon: this.search?.cancelIcon }) .fontColor(this.search?.fontColor) .caretStyle(this.search?.caretStyle) .enableKeyboardOnFocus(this.search?.enableKeyboardOnFocus) .selectionMenuHidden(this.search?.selectionMenuHidden) - .customKeyboard(null, {supportAvoidance: this.search?.keyboardAvoidance}) + .customKeyboard(null, { supportAvoidance: this.search?.keyboardAvoidance }) .type(this.search?.type) .maxLength(this.search?.maxLength) .enterKeyType(this.search?.enterKeyType) @@ -321,7 +322,7 @@ export struct AtomicServiceSearch { } @Builder - renderOperationItem1() { + renderAuxiliaryItem() { if (typeof this.operation?.auxiliaryItem !== 'undefined' && this.showImage) { Row() { Image(this.operation?.auxiliaryItem?.value) @@ -335,8 +336,8 @@ export struct AtomicServiceSearch { .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center) - .width(ATMOIC_SELECT_HEIGHT) - .height(ATMOIC_SELECT_HEIGHT) + .width(ATOMIC_SELECT_HEIGHT) + .height(ATOMIC_SELECT_HEIGHT) .margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }) .backgroundColor(this.isFunction1Pressed ? this.search?.pressBackgroundColor : Color.Transparent) .onTouch((event?: TouchEvent) => { @@ -350,16 +351,16 @@ export struct AtomicServiceSearch { } @Builder - renderOperationItem2() { - if (typeof this.operation?.auxiliaryItem !== 'undefined') { + renderIndependentItem() { + if (typeof this.operation?.independentItem !== 'undefined') { Row() { - Image(this.operation?.auxiliaryItem.value) + Image(this.operation?.independentItem.value) .objectFit(ImageFit.Contain) .fillColor(FUNCTION_ICON_COLOR) .width(ICON_WIDTH_AND_HEIGTH) .height(ICON_WIDTH_AND_HEIGTH) } - .onClick(this.operation?.auxiliaryItem.action) + .onClick(this.operation?.independentItem.action) .flexShrink(FLEX_SHRINK) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .alignItems(VerticalAlign.Center) @@ -391,13 +392,13 @@ export struct AtomicServiceSearch { direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start - }){ + }) { this.renderSelect(); this.renderDivider(); this.renderSearch(); } if (typeof this.search?.searchButton === 'undefined') { - this.renderOperationItem1(); + this.renderAuxiliaryItem(); } } .alignContent(Alignment.End) @@ -405,7 +406,7 @@ export struct AtomicServiceSearch { .backgroundColor(this.isSearchPressed ? this.search?.pressBackgroundColor : this.search?.componentBackgroundColor) - this.renderOperationItem2(); + this.renderIndependentItem(); } } .height(ATOMIC_SERVICE_SEARCH_HEIGHT) -- Gitee From f535fd6df910432496b15571ceef3d43640154d3 Mon Sep 17 00:00:00 2001 From: jiyu Date: Fri, 14 Feb 2025 08:29:09 +0000 Subject: [PATCH 10/11] =?UTF-8?q?=E6=A3=80=E8=A7=86=E6=84=8F=E8=A7=81?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 27 +++++++------ .../source/atomicservicesearch.ets | 38 ++++++++++--------- 2 files changed, 34 insertions(+), 31 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index 987d0e5..ed3efcc 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -18,7 +18,6 @@ if (!('finalizeConstruction' in ViewPU.prototype)) { } const LengthMetrics = requireNapi('arkui.node').LengthMetrics; - const TEXT_SIZE_BODY1 = { 'id': -1, 'type': -1, params: [`sys.float.ohos_id_text_size_body1`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; const COLOR_TEXT_SECONDARY = { 'id': -1, 'type': -1, params: [`sys.color.ohos_id_color_text_secondary`], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; const ICON_COLOR_SECONDARY = { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_secondary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; @@ -52,7 +51,7 @@ export class AtomicServiceSearch extends ViewPU { this.__isFunction2Pressed = new ObservedPropertySimplePU(false, this, 'isFunction2Pressed'); this.__isSearchPressed = new ObservedPropertySimplePU(false, this, 'isSearchPressed'); this.__showImage = new ObservedPropertySimplePU(true, this, 'showImage'); - this.__value = new SynchedPropertySimpleOneWayPU(params.value, this, 'value'); + this.__value = new SynchedPropertyObjectOneWayPU(params.value, this, 'value'); this.__placeholder = new SynchedPropertyObjectOneWayPU(params.placeholder, this, 'placeholder'); this.__select = new SynchedPropertyObjectOneWayPU(params.select, this, 'select'); this.__search = new SynchedPropertyObjectOneWayPU(params.search, this, 'search'); @@ -100,7 +99,7 @@ export class AtomicServiceSearch extends ViewPU { size: ICON_SIZE, color: ICON_COLOR_SECONDARY, }, - pressBackgroundColor: EFFECT_COLOR + pressedBackgroundColor: EFFECT_COLOR }); } if (params.operation !== undefined) { @@ -207,7 +206,7 @@ export class AtomicServiceSearch extends ViewPU { } aboutToAppear() { - this.showImage = this.value?.length === 0 ? true : false; + this.showImage = this.value?.toString().length === 0 ? true : false; this.initSelectStyle(); this.initSearchStyle(); } @@ -246,14 +245,14 @@ export class AtomicServiceSearch extends ViewPU { color: ICON_COLOR_SECONDARY, }; } - if (typeof this.search.pressBackgroundColor === 'undefined') { - this.search.pressBackgroundColor = EFFECT_COLOR; + if (typeof this.search.pressedBackgroundColor === 'undefined') { + this.search.pressedBackgroundColor = EFFECT_COLOR; } } } onParamsChange() { - this.showImage = this.value?.length === 0 ? true : false; + this.showImage = this.value?.toString().length === 0 ? true : false; } renderSelect(parent = null) { @@ -336,7 +335,7 @@ export class AtomicServiceSearch extends ViewPU { renderSearch(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Search.create({ - value: this.value, + value: this.value?.toString(), placeholder: this.placeholder, controller: this.controller }); @@ -352,8 +351,8 @@ export class AtomicServiceSearch extends ViewPU { Search.fontColor(this.search?.fontColor); Search.caretStyle(this.search?.caretStyle); Search.enableKeyboardOnFocus(this.search?.enableKeyboardOnFocus); - Search.selectionMenuHidden(this.search?.selectionMenuHidden); - Search.customKeyboard(null, { supportAvoidance: this.search?.keyboardAvoidance }); + Search.selectionMenuHidden(this.search?.hideSelectionMenu); + Search.customKeyboard(null, { supportAvoidance: this.search?.avoidKeyboard }); Search.type(this.search?.type); Search.maxLength(this.search?.maxLength); Search.enterKeyType(this.search?.enterKeyType); @@ -416,7 +415,7 @@ export class AtomicServiceSearch extends ViewPU { Row.width(ATOMIC_SELECT_HEIGHT); Row.height(ATOMIC_SELECT_HEIGHT); Row.margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }); - Row.backgroundColor(this.isFunction1Pressed ? this.search?.pressBackgroundColor : Color.Transparent); + Row.backgroundColor(this.isFunction1Pressed ? this.search?.pressedBackgroundColor : Color.Transparent); Row.onTouch((event) => { if (event && event.type === TouchType.Down) { this.isFunction1Pressed = true; @@ -460,7 +459,7 @@ export class AtomicServiceSearch extends ViewPU { Row.height(ATOMIC_SERVICE_SEARCH_HEIGHT); Row.margin(OPERATION_ITEM2_MARGIN_LEFT); Row.backgroundColor(this.isFunction2Pressed ? - this.search?.pressBackgroundColor : this.search?.componentBackgroundColor); + this.search?.pressedBackgroundColor : this.search?.componentBackgroundColor); Row.onTouch((event) => { if (event && event.type === TouchType.Down) { this.isFunction2Pressed = true; @@ -505,7 +504,7 @@ export class AtomicServiceSearch extends ViewPU { Stack.alignContent(Alignment.End); Stack.borderRadius(ATOMIC_SELECT_BORDER_RADIUS); Stack.backgroundColor(this.isSearchPressed ? - this.search?.pressBackgroundColor : this.search?.componentBackgroundColor); + this.search?.pressedBackgroundColor : this.search?.componentBackgroundColor); }, Stack); this.observeComponentCreation2((elmtId, isInitialRender) => { Flex.create({ @@ -540,7 +539,7 @@ export class AtomicServiceSearch extends ViewPU { rerender() { this.updateDirtyElements(); } - + } export default { AtomicServiceSearch }; diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index b105387..e13c96c 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -15,6 +15,10 @@ import { LengthMetrics, OperationOption } from '@kit.ArkUI'; declare type OnSelectCallback = (index: number, value?: string) => void; +declare type OnPasteCallback = (value: string, event: PasteEvent) => void; +declare type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void; +declare type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void; + const TEXT_SIZE_BODY1: Resource = $r(`sys.float.ohos_id_text_size_body1`); const COLOR_TEXT_SECONDARY = $r(`sys.color.ohos_id_color_text_secondary`); const ICON_COLOR_SECONDARY = $r('sys.color.ohos_id_color_secondary'); @@ -79,7 +83,7 @@ interface SelectOptions { interface SearchOptions { componentBackgroundColor?: ResourceColor; - pressBackgroundColor?: ResourceColor; + pressedBackgroundColor?: ResourceColor; searchButton?: SearchButtonParams; placeholderColor?: ResourceColor; placeholderFont?: Font; @@ -91,8 +95,8 @@ interface SearchOptions { fontColor?: ResourceColor; caretStyle?: CaretStyle; enableKeyboardOnFocus?: boolean; - selectionMenuHidden?: boolean; - keyboardAvoidance?: boolean; + hideSelectionMenu?: boolean; + avoidKeyboard?: boolean; type?: SearchType; maxLength?: number; enterKeyType?: EnterKeyType; @@ -132,7 +136,7 @@ export struct AtomicServiceSearch { @State private isFunction2Pressed: boolean = false; @State private isSearchPressed: boolean = false; @State private showImage: boolean = true; - @Prop @Watch('onParamsChange') value?: string = ''; + @Prop @Watch('onParamsChange') value?: ResourceStr = ''; @Prop placeholder?: ResourceStr = 'Search'; @Prop select?: SelectOptions = {}; @Prop search?: SearchOptions = { @@ -149,13 +153,13 @@ export struct AtomicServiceSearch { size: ICON_SIZE, color: ICON_COLOR_SECONDARY, }, - pressBackgroundColor: EFFECT_COLOR + pressedBackgroundColor: EFFECT_COLOR }; operation?: OperationOptions; controller?: SearchController = new SearchController(); aboutToAppear(): void { - this.showImage = this.value?.length === 0 ? true : false; + this.showImage = this.value?.toString().length === 0 ? true : false; this.initSelectStyle(); this.initSearchStyle(); } @@ -171,7 +175,7 @@ export struct AtomicServiceSearch { } } - private initSearchStyle() : void { + private initSearchStyle(): void { if (typeof this.search !== 'undefined') { if (typeof this.search.componentBackgroundColor === 'undefined') { this.search.componentBackgroundColor = ATOMIC_SERVICE_SEARCH_BG_COLOR; @@ -194,14 +198,14 @@ export struct AtomicServiceSearch { color: ICON_COLOR_SECONDARY, } } - if (typeof this.search.pressBackgroundColor === 'undefined') { - this.search.pressBackgroundColor = EFFECT_COLOR; + if (typeof this.search.pressedBackgroundColor === 'undefined') { + this.search.pressedBackgroundColor = EFFECT_COLOR; } } } private onParamsChange(): void { - this.showImage = this.value?.length === 0 ? true : false; + this.showImage = this.value?.toString().length === 0 ? true : false; } @Builder @@ -259,7 +263,7 @@ export struct AtomicServiceSearch { @Builder renderSearch() { Search({ - value: this.value, + value: this.value?.toString(), placeholder: this.placeholder, controller: this.controller }) @@ -275,8 +279,8 @@ export struct AtomicServiceSearch { .fontColor(this.search?.fontColor) .caretStyle(this.search?.caretStyle) .enableKeyboardOnFocus(this.search?.enableKeyboardOnFocus) - .selectionMenuHidden(this.search?.selectionMenuHidden) - .customKeyboard(null, { supportAvoidance: this.search?.keyboardAvoidance }) + .selectionMenuHidden(this.search?.hideSelectionMenu) + .customKeyboard(null, { supportAvoidance: this.search?.avoidKeyboard }) .type(this.search?.type) .maxLength(this.search?.maxLength) .enterKeyType(this.search?.enterKeyType) @@ -339,7 +343,7 @@ export struct AtomicServiceSearch { .width(ATOMIC_SELECT_HEIGHT) .height(ATOMIC_SELECT_HEIGHT) .margin({ right: OPERATION_ITEM1_MARGIN_RIGHT }) - .backgroundColor(this.isFunction1Pressed ? this.search?.pressBackgroundColor : Color.Transparent) + .backgroundColor(this.isFunction1Pressed ? this.search?.pressedBackgroundColor : Color.Transparent) .onTouch((event?: TouchEvent) => { if (event && event.type === TouchType.Down) { this.isFunction1Pressed = true; @@ -369,7 +373,7 @@ export struct AtomicServiceSearch { .height(ATOMIC_SERVICE_SEARCH_HEIGHT) .margin(OPERATION_ITEM2_MARGIN_LEFT) .backgroundColor(this.isFunction2Pressed ? - this.search?.pressBackgroundColor : this.search?.componentBackgroundColor) + this.search?.pressedBackgroundColor : this.search?.componentBackgroundColor) .onTouch((event?: TouchEvent) => { if (event && event.type === TouchType.Down) { this.isFunction2Pressed = true; @@ -397,6 +401,7 @@ export struct AtomicServiceSearch { this.renderDivider(); this.renderSearch(); } + if (typeof this.search?.searchButton === 'undefined') { this.renderAuxiliaryItem(); } @@ -404,12 +409,11 @@ export struct AtomicServiceSearch { .alignContent(Alignment.End) .borderRadius(ATOMIC_SELECT_BORDER_RADIUS) .backgroundColor(this.isSearchPressed ? - this.search?.pressBackgroundColor : this.search?.componentBackgroundColor) + this.search?.pressedBackgroundColor : this.search?.componentBackgroundColor) this.renderIndependentItem(); } } .height(ATOMIC_SERVICE_SEARCH_HEIGHT) } - } -- Gitee From de9287ac5d789cbbb6ea2478aa164b1aec6d47ec Mon Sep 17 00:00:00 2001 From: jiyu Date: Sun, 16 Feb 2025 09:50:33 +0000 Subject: [PATCH 11/11] update AtomicServiceSearch Signed-off-by: jiyu --- .../interfaces/atomicservicesearch.js | 20 +++++++++--- .../source/atomicservicesearch.ets | 32 ++++++++++++------- 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/atomicservicesearch/interfaces/atomicservicesearch.js b/atomicservicesearch/interfaces/atomicservicesearch.js index ed3efcc..e1e0ec2 100644 --- a/atomicservicesearch/interfaces/atomicservicesearch.js +++ b/atomicservicesearch/interfaces/atomicservicesearch.js @@ -59,6 +59,8 @@ export class AtomicServiceSearch extends ViewPU { this.controller = new SearchController(); this.setInitiallyProvidedValue(params); this.declareWatch('value', this.onParamsChange); + this.declareWatch('select', this.onSelectChange); + this.declareWatch('search', this.onSearchChange); this.finalizeConstruction(); } @@ -211,6 +213,18 @@ export class AtomicServiceSearch extends ViewPU { this.initSearchStyle(); } + onParamsChange() { + this.showImage = this.value?.toString().length === 0 ? true : false; + } + + onSelectChange() { + this.initSelectStyle(); + } + + onSearchChange() { + this.initSearchStyle(); + } + initSelectStyle() { if (typeof this.select !== 'undefined') { if (typeof this.select.font === 'undefined') { @@ -251,10 +265,6 @@ export class AtomicServiceSearch extends ViewPU { } } - onParamsChange() { - this.showImage = this.value?.toString().length === 0 ? true : false; - } - renderSelect(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -539,7 +549,7 @@ export class AtomicServiceSearch extends ViewPU { rerender() { this.updateDirtyElements(); } - + } export default { AtomicServiceSearch }; diff --git a/atomicservicesearch/source/atomicservicesearch.ets b/atomicservicesearch/source/atomicservicesearch.ets index e13c96c..63d00d2 100644 --- a/atomicservicesearch/source/atomicservicesearch.ets +++ b/atomicservicesearch/source/atomicservicesearch.ets @@ -41,22 +41,22 @@ const ICON_WIDTH_AND_HEIGTH: number = 24; const OPERATION_ITEM1_MARGIN_RIGHT: number = 2; const OPERATION_ITEM2_MARGIN_LEFT: number = 8; -interface InputFilterOptions { +export interface InputFilterOptions { value: ResourceStr, error?: Callback } -interface SearchButtonParams { +export interface SearchButtonParams { value: string, option?: SearchButtonOptions } -interface MenuAlignOption { +export interface MenuAlignOption { alignType: MenuAlignType, offset?: Offset } -interface SelectOptions { +export interface SelectOptions { options?: Array; selected?: number; value?: string; @@ -81,7 +81,7 @@ interface SelectOptions { menuBackgroundBlurStyle?: BlurStyle; } -interface SearchOptions { +export interface SearchOptions { componentBackgroundColor?: ResourceColor; pressedBackgroundColor?: ResourceColor; searchButton?: SearchButtonParams; @@ -125,7 +125,7 @@ interface SearchOptions { onDidDelete?: Callback; } -interface OperationOptions { +export interface OperationOptions { auxiliaryItem?: OperationOption; independentItem?: OperationOption; } @@ -138,8 +138,8 @@ export struct AtomicServiceSearch { @State private showImage: boolean = true; @Prop @Watch('onParamsChange') value?: ResourceStr = ''; @Prop placeholder?: ResourceStr = 'Search'; - @Prop select?: SelectOptions = {}; - @Prop search?: SearchOptions = { + @Prop @Watch('onSelectChange') select?: SelectOptions = {}; + @Prop @Watch('onSearchChange') search?: SearchOptions = { componentBackgroundColor: ATOMIC_SERVICE_SEARCH_BG_COLOR, placeholderFont: { size: TEXT_SIZE_BODY1, @@ -164,6 +164,18 @@ export struct AtomicServiceSearch { this.initSearchStyle(); } + private onParamsChange(): void { + this.showImage = this.value?.toString().length === 0 ? true : false; + } + + private onSelectChange(): void { + this.initSelectStyle(); + } + + private onSearchChange(): void { + this.initSearchStyle(); + } + private initSelectStyle(): void { if (typeof this.select !== 'undefined') { if (typeof this.select.font === 'undefined') { @@ -204,10 +216,6 @@ export struct AtomicServiceSearch { } } - private onParamsChange(): void { - this.showImage = this.value?.toString().length === 0 ? true : false; - } - @Builder renderSelect() { if (typeof this.select !== 'undefined' && typeof this.select.options !== 'undefined') { -- Gitee