1/*
2 * Copyright (c) 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 deviceInfo from '@ohos.deviceInfo';
17import Constants, { NumKeyBoardItem } from '../vm/Constants';
18
19const DIGITAL_BUTTON_DIAMETER = 60;
20const DIGITAL_BUTTON_RECT_WH = 100;
21const DIGITAL_BUTTON_RECT_HH = 50;
22const DEL_PASSWORD = -2;
23const CALL_PHONE = -1;
24const GO_BACK = -3;
25
26@Component
27export default struct NumKeyBoard {
28  private onKeyPress?: (params: number, callback: Function) => void;
29  @StorageLink('numKeyboard') numKeyboard: NumKeyBoardItem[] = Constants.numKeyBoard;
30
31  build() {
32    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
33      Grid() {
34        ForEach(this.numKeyboard, (item: NumKeyBoardItem) => {
35          GridItem() {
36            Stack({ alignContent: Alignment.Center }) {
37              Column({ space: 0 }) {
38                Flex({
39                  direction: FlexDirection.Column,
40                  alignItems: ItemAlign.Center,
41                  justifyContent: FlexAlign.Center
42                }) {
43                  if (item.value === CALL_PHONE || item.value === GO_BACK || item.value === DEL_PASSWORD) {
44                    Text(item.row1 as Resource | string)
45                      .draggable(false)
46                      .id('textNumKeyBordCustomPwd' + item.index)
47                      .fontSize(deviceInfo.deviceType === 'tablet'
48                        ? $r('app.float.digital_password_prompt_font_size')
49                        : $r('app.float.numKeyBoard_row1_16'))
50                      .fontWeight(FontWeight.Medium)
51                      .fontColor(Color.White)
52                      .textAlign(TextAlign.Center)
53                      .width(Constants.fullContainerWidth)
54                      .padding($r('app.float.numkeyBoard_rowsGap'))
55                      .margin($r('app.float.numkeyBoard_rowsGap'))
56                  } else {
57                    Text(item.row1 as Resource | string)
58                      .draggable(false)
59                      .id('textNumKeyBordCustomPwd' + item.index)
60                      .fontSize(deviceInfo.deviceType === 'tablet'
61                        ? $r('app.float.digital_password_prompt_font_size')
62                        : $r('app.float.numKeyBoard_row1_28'))
63                      .fontWeight(FontWeight.Medium)
64                      .fontColor(Color.White)
65                      .textAlign(TextAlign.Center)
66                      .width(Constants.fullContainerWidth)
67                      .padding($r('app.float.numkeyBoard_rowsGap'))
68                      .margin($r('app.float.numkeyBoard_rowsGap'))
69                  }
70                  if (!!item.row2) {
71                    Text(item.row2)
72                      .draggable(false)
73                      .fontSize(deviceInfo.deviceType === 'tablet'
74                        ? $r('app.float.digital_password_row2_font_size')
75                        : $r('app.float.numKeyBoard_row2'))
76                      .fontWeight(FontWeight.Regular)
77                      .fontColor(Color.White)
78                      .opacity($r('app.float.numkeyBoard_text_opacity'))
79                      .textAlign(TextAlign.Center)
80                      .width(Constants.fullContainerWidth)
81                      .padding($r('app.float.numkeyBoard_rowsGap'))
82                      .margin($r('app.float.numkeyBoard_rowsGap'))
83                  }
84                }
85                .width(Constants.fullContainerWidth)
86                .height($r('app.float.keyboard_key_high'))
87                .height(deviceInfo.deviceType === 'tablet'
88                  ? $r('app.float.keyboard_key_high')
89                  : $r('app.float.keyboard_key_high_phone'))
90              }
91
92              if (deviceInfo.deviceType === 'tablet') {
93                if (item.value === CALL_PHONE || item.value === GO_BACK || item.value === DEL_PASSWORD) {
94                  Column() {
95                    Button({ type: ButtonType.Normal, stateEffect: true })
96                      .backgroundColor($r('app.color.button_color'))
97                      .width(DIGITAL_BUTTON_RECT_WH)
98                      .height(DIGITAL_BUTTON_RECT_HH)
99                  }
100                } else {
101                  Column() {
102                    Button({ type: ButtonType.Circle })
103                      .backgroundColor($r('app.color.button_color'))
104                      .width(DIGITAL_BUTTON_DIAMETER)
105                      .height(DIGITAL_BUTTON_DIAMETER)
106                  }
107                }
108              }
109            }
110            .onClick(() => {
111                setTimeout((index: number, callback: Function):void => this.onKeyPress?.(index, callback), 0, item.index, () => {
112                });
113            })
114            .id('numKeyBordCustomPwd' + item.index)
115          }
116        })
117      }
118      .columnsTemplate('1fr 1fr 1fr')
119      .rowsTemplate('1fr 1fr 1fr 1fr')
120      .rowsGap($r('app.float.numkeyBoard_rowsGap'))
121      .width(Constants.fullContainerWidth)
122      .height(Constants.fullContainerHeight)
123    }
124    .width('86%')
125    .height(Constants.fullContainerHeight)
126  }
127}