1/*
2 * Copyright (c) 2021-2023 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 */
15
16import Constants from '../utils/constant';
17import { AppInfo, ApplicationObj } from '../model/typedef';
18
19@Component
20export struct textInput {
21  @Link applicationItem: Array<AppInfo | ApplicationObj>; // application info array
22  @Link searchResult: boolean; // search results
23  @State oldApplicationItem: Array<AppInfo | ApplicationObj> = []; // Original application information array
24
25  aboutToAppear() {
26    this.oldApplicationItem = this.applicationItem;
27  }
28
29  build() {
30    Column() {
31      Flex({ alignContent: FlexAlign.Start }) {
32        TextInput({ placeholder: $r('app.string.textInput_placeholder') })
33          .backgroundColor($r('sys.color.comp_background_list_card'))
34          .padding({ left: Constants.TEXTINPUT_PADDING_LEFT })
35          .type(InputType.Normal)
36          .border({
37            width: Constants.TEXTINPUT_BORDER_WIDTH, color: $r('app.color.label_color_20'), radius: Constants.TEXTINPUT_BORDER_RADIUS
38          })
39          .placeholderColor(Color.Grey)
40          .placeholderFont({
41            size: Constants.TEXT_MIDDLE_FONT_SIZE,
42            weight: FontWeight.Normal,
43            family: 'sans-serif',
44            style: FontStyle.Normal
45          })
46          .caretColor($r('sys.color.font_secondary'))
47          .height(Constants.TEXTINPUT_HEIGHT)
48          .onChange((value: string) => {
49            if (value === '' || value === null) {
50              this.applicationItem = this.oldApplicationItem;
51            } else {
52              this.applicationItem = this.oldApplicationItem.filter((item: AppInfo | ApplicationObj) => {
53                  return String(item.label).indexOf(value) > -1;
54              })
55            }
56            if (this.applicationItem.length) {
57              this.searchResult = true;
58            } else {
59              this.searchResult = false;
60            }
61          })
62        Button().defaultFocus(true).opacity(0).position({ x: '-100%' })
63        Image($r('app.media.ic_public_search_filled'))
64          .objectFit(ImageFit.Contain)
65          .width(Constants.TEXTINPUT_IMAGE_WIDTH)
66          .height(Constants.TEXTINPUT_IMAGE_HEIGHT)
67          .position({ x: Constants.TEXTINPUT_IMAGE_MARGIN_LEFT, y: Constants.TEXTINPUT_IMAGE_MARGIN_TOP })
68      }
69    }
70  }
71}