1/** 2 * Copyright (c) 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 CallServiceProxy from '../../model/CallServiceProxy'; 17import DtmfBtn from '../components/DtmfBtn'; 18import DefaultCallData from '../struct/TypeUtils'; 19 20class DataListStruct { 21 public value: string 22 public sign: string 23} 24const TAG = 'Keyboard'; 25 26@Component 27export default struct Keyboard { 28 @Link callData: DefaultCallData; 29 @StorageLink('TextInput') textInput: string = ''; 30 @StorageLink('TextInputValue') textInputValue: string = ''; 31 @State dataList: Array<DataListStruct> = 32 [ 33 { 34 value: '1', 35 sign: 'o_o' 36 }, 37 { 38 value: '2', 39 sign: 'ABC' 40 }, 41 { 42 value: '3', 43 sign: 'DEF' 44 }, 45 { 46 value: '4', 47 sign: 'GHI' 48 }, 49 { 50 value: '5', 51 sign: 'JKL' 52 }, 53 { 54 value: '6', 55 sign: 'MNO' 56 }, 57 { 58 value: '7', 59 sign: 'PQRS' 60 }, 61 { 62 value: '8', 63 sign: 'TUV' 64 }, 65 { 66 value: '9', 67 sign: 'WXYZ' 68 }, 69 { 70 value: '*', 71 sign: '(P)' 72 }, 73 { 74 value: '0', 75 sign: '+' 76 }, 77 { 78 value: '#', 79 sign: '(W)' 80 }, 81 ]; 82 private mCallServiceProxy: CallServiceProxy; 83 84 public aboutToAppear(): void { 85 this.mCallServiceProxy = CallServiceProxy.getInstance(); 86 } 87 88 build() { 89 GridRow({ columns: { sm: 4, md: 8, lg: 12 }, gutter: 24 }) { 90 GridCol({ span: { sm: 4, md: 6, lg: 6 }, offset: { md: 1, lg: 3 } }) { 91 Grid() { 92 ForEach(this.dataList, (item) => { 93 GridItem() { 94 DtmfBtn({ 95 item: item, 96 textInput: $textInput, 97 textInputValue: $textInputValue, 98 dataList: $dataList, 99 callData: this.callData 100 }) 101 } 102 .height(56.5) 103 }) 104 } 105 .columnsGap(24) 106 .rowsGap(20.5) 107 .columnsTemplate('1fr 1fr 1fr') 108 .rowsTemplate('1fr 1fr 1fr 1fr') 109 } 110 .height(287.5) 111 } 112 .margin({ left: 24, right: 24 }) 113 } 114}