• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021-2022 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';
17
18@Component
19export struct alphabetIndexerComponent {
20  private value: string[] = [
21    '#',
22    'A',
23    'B',
24    'C',
25    'D',
26    'E',
27    'F',
28    'G',
29    'H',
30    'I',
31    'J',
32    'K',
33    'L',
34    'M',
35    'N',
36    'O',
37    'P',
38    'Q',
39    'R',
40    'S',
41    'T',
42    'U',
43    'V',
44    'W',
45    'X',
46    'Y',
47    'Z'
48  ]; // Array of alphabetically indexed names
49  @Link applicationItem: Array<any>; // application info array
50  @State index: number = 0; // alphabetical index
51  @State oldApplicationItem: Array<any> = [] // Original application information array
52
53  aboutToAppear() {
54    this.oldApplicationItem = this.applicationItem
55  }
56
57  build() {
58    AlphabetIndexer({ arrayValue: this.value, selected: this.index })
59      .selectedColor($r('app.color.selected_Color')) // selected color
60      .popupColor($r('app.color.popup_Color')) // popover color
61      .selectedBackgroundColor($r('app.color.selected_Background_Color')) // Check background color
62      .popupBackground($r('app.color.popup_Background_Color')) // popover background color
63      .usingPopup(true) // whether to show a popup
64      .selectedFont({ size: Constants.ALPHABETINDEXER_SELECTEDFONT_SIZE, weight: FontWeight.Bolder }) // selected style
65      .popupFont({ size: Constants.ALPHABETINDEXER_POPUPFONT_SIZE, weight: FontWeight.Bolder }) // Demo of the popup
66      .itemSize(Constants.ALPHABETINDEXER_ITEMSIZE) // size square of each item
67      .alignStyle(IndexerAlign.Left) // Align left
68      .onSelect((index: number) => {
69        this.index = index;
70        if (this.value[index] === '#' || this.value[index] === '☆') {
71          this.applicationItem = this.oldApplicationItem;
72        } else {
73          this.applicationItem = this.oldApplicationItem.filter((item) => {
74            return item.alphabeticalIndex.toUpperCase() === this.value[index];
75          })
76        }
77      })
78      .height(Constants.ALPHABETINDEXER_HEIGHT)
79      .width(Constants.ALPHABETINDEXER_WIDTH)
80  }
81}