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'), right: $r('app.float.wh_padding_35') })
65          .border({
66            width: $r('app.float.wh_value_1_5'),
67            color: $r("sys.color.ohos_id_color_fourth"),
68            radius: $r('app.float.wh_value_20')
69          })
70          .maxLength(SEARCH_INPUT_MAX_LENGTH)
71          .height($r("app.float.search_input_height"))
72          .onChange((value: string) => {
73            LogUtil.debug(ConfigData.TAG + 'searchPage SearchHeader : text input on change ：value = ' + JSON.stringify(value));
74            this.inputKeyword = value
75          })
76          .onSubmit((enterKey) => {
77            InputMethod.getInputMethodController().stopInput().then((ret) => {
78              LogUtil.debug(`${ConfigData.TAG}, enterType: ${enterKey}, stopInput: ${ret}`);
79            });
80          })
81        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
82          Image($r("app.media.ic_search"))
83            .width($r('app.float.wh_value_18'))
84            .height($r('app.float.wh_value_18'))
85            .objectFit(ImageFit.Contain)
86            .margin({ left: $r('app.float.distance_11') })
87          if (this.inputKeyword != '') {
88            Image($r("app.media.ic_public_cancel"))
89              .width($r('app.float.wh_value_18'))
90              .height($r('app.float.wh_value_18'))
91              .objectFit(ImageFit.Contain)
92              .fillColor($r("sys.color.ohos_id_color_primary"))
93              .opacity(0.6)
94              .margin({ right: $r('app.float.distance_11') })
95              .align(Alignment.End)
96              .backgroundColor(this.cancelIsTouch ? $r("app.color.color_E3E3E3_grey") : $r("app.color.color_00000000_transparent"))
97              .onClick(() => {
98                this.inputKeyword = ''
99              })
100              .onTouch((event?: TouchEvent) => {
101                if (event?.type === TouchType.Down) {
102                  this.cancelIsTouch = true;
103                }
104                if (event?.type === TouchType.Up) {
105                  this.cancelIsTouch = false;
106                }
107              });
108          }
109        }
110        .hitTestBehavior(HitTestMode.Transparent)
111      }
112      .width('100%')
113    }
114    .padding({ left: $r('app.float.wh_value_12'), right: $r('app.float.wh_value_52') })
115    .width(ComponentConfig.WH_100_100)
116    .height($r("app.float.page_header_height"))
117    .alignItems(VerticalAlign.Center)
118    .align(Alignment.Start);
119  }
120
121  aboutToAppear() {
122    ResourceUtil.getString($r("app.string.searchHint")).then(value => this.placeholder = value)
123    ResourceUtil.getString($r("app.float.search_placeholder_font")).then(value => this.placeholderSize = value);
124  }
125}