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