• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 '../utils/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.ohos_id_color_list_card_bg'))
34          .padding({ left: Constants.TEXTINPUT_PADDING_LEFT })
35          .type(InputType.Normal)
36          .border({ width: Constants.TEXTINPUT_BORDER_WIDTH, color: $r("app.color.label_color_20"), radius: Constants.TEXTINPUT_BORDER_RADIUS })
37          .placeholderColor(Color.Grey)
38          .placeholderFont({ size: Constants.TEXTINPUT_PLACEHOLDER_Font_SIZE, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal })
39          .caretColor($r('sys.color.ohos_id_color_text_secondary'))
40          .height(Constants.TEXTINPUT_HEIGHT)
41          .onChange((value: string) => {
42            if (value === '' || value === null) {
43              this.applicationItem = this.oldApplicationItem;
44            } else {
45              this.applicationItem = this.oldApplicationItem.filter((item: appInfo | ApplicationObj) => {
46                  return String(item.label).indexOf(value) > -1;
47              })
48            }
49            if (this.applicationItem.length) {
50              this.searchResult = true;
51            } else {
52              this.searchResult = false;
53            }
54          })
55        Button().defaultFocus(true).opacity(0).position({ x: '-100%' })
56        Image($r('app.media.ic_public_search_filled'))
57          .objectFit(ImageFit.Contain)
58          .width(Constants.TEXTINPUT_IMAGE_WIDTH)
59          .height(Constants.TEXTINPUT_IMAGE_HEIGHT)
60          .position({ x: Constants.TEXTINPUT_IMAGE_MARGIN_LEFT, y: Constants.TEXTINPUT_IMAGE_MARGIN_TOP })
61      }
62    }
63  }
64}