• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2021 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import ResourceUtil from '../common/ResourceUtil';
16import ComponentConfig from '../../../../../../component/src/main/ets/default/ComponentConfig';
17import LogUtil from '../../../../../../utils/src/main/ets/default/baseUtil/LogUtil';
18import Log from '../../../../../../utils/src/main/ets/default/baseUtil/LogDecorator';
19import ConfigData from '../../../../../../utils/src/main/ets/default/baseUtil/ConfigData';
20import Router from '@system.router'
21import InputMethod from '@ohos.inputMethod';
22
23let SEARCH_INPUT_MAX_LENGTH = 100;
24
25/**
26 * Search header component
27 */
28@Component
29export default struct SearchHeader {
30  @Link inputKeyword: string
31  @State placeholderSize: string = ''
32  @State placeholder: string = ''
33  @State icBackIsTouch: boolean= false;
34  @State cancelIsTouch: boolean= false;
35
36  build() {
37    Row() {
38      Image($r("app.media.ic_back"))
39        .width($r('app.float.wh_value_24'))
40        .height($r('app.float.wh_value_24'))
41        .fillColor($r("sys.color.ohos_id_color_primary"))
42        .margin({ right: $r('app.float.wh_value_16') })
43        .borderRadius($r("app.float.sys_corner_radius_clicked"))
44        .backgroundColor(this.icBackIsTouch ? $r("app.color.color_E3E3E3_grey") : $r("app.color.color_00000000_transparent"))
45        .onClick(() => {
46          Router.back();
47        })
48        .onTouch((event: TouchEvent) => {
49          if (event.type === TouchType.Down) {
50            this.icBackIsTouch = true;
51          }
52          if (event.type === TouchType.Up) {
53            this.icBackIsTouch = false;
54          }
55        });
56      Stack({ alignContent: Alignment.Start }) {
57        TextInput({ placeholder: this.placeholder, text: this.inputKeyword })
58          .placeholderColor($r("sys.color.ohos_id_color_text_secondary"))
59          .placeholderFont({ size: this.placeholderSize, weight: FontWeight.Normal, style: FontStyle.Normal })
60          .type(InputType.Normal)
61          .caretColor($r("sys.color.ohos_id_color_text_primary_activated"))
62          .enterKeyType(EnterKeyType.Search)
63          .backgroundColor($r("app.color.white_bg_color"))
64          .padding({left:$r('app.float.wh_padding_35')})
65          .border({ width: $r('app.float.wh_value_1_5'), color:$r("sys.color.ohos_id_color_fourth"), radius: $r('app.float.wh_value_20') })
66          .maxLength(SEARCH_INPUT_MAX_LENGTH)
67          .height($r("app.float.search_input_height"))
68          .onChange((value: string) => {
69            LogUtil.debug(ConfigData.TAG + 'searchPage SearchHeader : text input on change ：value = ' + JSON.stringify(value));
70            this.inputKeyword = value
71          })
72          .onSubmit((enterKey) => {
73            InputMethod.getInputMethodController().stopInput().then((ret) => {
74              LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
75            });
76          })
77        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
78          Image($r("app.media.ic_search"))
79            .width($r('app.float.wh_value_18'))
80            .height($r('app.float.wh_value_18'))
81            .objectFit(ImageFit.Contain)
82            .margin({ left: $r('app.float.distance_11') })
83          if(this.inputKeyword != '') {
84            Image($r("app.media.ic_public_cancel"))
85              .width($r('app.float.wh_value_18'))
86              .height($r('app.float.wh_value_18'))
87              .objectFit(ImageFit.Contain)
88              .fillColor($r("sys.color.ohos_id_color_primary"))
89              .opacity(0.6)
90              .margin({ right: $r('app.float.distance_11') })
91              .align(Alignment.End)
92              .backgroundColor(this.cancelIsTouch ? $r("app.color.color_E3E3E3_grey") : $r("app.color.color_00000000_transparent"))
93              .onClick(() => {
94                this.inputKeyword = ''
95              })
96              .onTouch((event: TouchEvent) => {
97              if (event.type === TouchType.Down) {
98                this.cancelIsTouch = true;
99              }
100              if (event.type === TouchType.Up) {
101                this.cancelIsTouch = false;
102              }
103            });
104          }
105        }
106        .hitTestBehavior(HitTestMode.Transparent)
107      }
108      .width('100%')
109    }
110    .padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_52') })
111    .width(ComponentConfig.WH_100_100)
112    .height($r("app.float.page_header_height"))
113    .alignItems(VerticalAlign.Center)
114    .align(Alignment.Start);
115  }
116
117  @Log
118  aboutToAppear() {
119    ResourceUtil.getString($r("app.string.searchHint")).then(value => this.placeholder = value)
120    ResourceUtil.getString($r("app.float.search_placeholder_font")).then(value => this.placeholderSize = value);
121  }
122}