• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2* Copyright (c) 2023 Hunan OpenValley Digital Industry Development 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 router from '@ohos.router';
17import emitter from '@ohos.events.emitter';
18import { Constant, Information } from '@ohos/capabilities';
19import { getString } from '@ohos/common/src/main/ets/util/ResourceUtil';
20
21const MIN_AGE = 1;
22const AGE_RANGE = 9;
23const AGE_DEFAULT = 0;
24
25const arr = Array(AGE_RANGE)
26  .fill(0)
27  .map<string>((_: number, i: number) => `${i + MIN_AGE}${getString($r('app.string.old'))}`);
28
29@CustomDialog
30struct AgePickDialog {
31  private controller?: CustomDialogController;
32  private sure: (age: number) => void = () => {
33  };
34  @State select: number = AGE_DEFAULT;
35
36  build() {
37    Column() {
38      Text($r('app.string.age'))
39        .margin({ left: 24, top: 14 })
40        .width('100%')
41        .fontColor($r('app.color.text_color_primary'))
42        .fontSize(20)
43        .textAlign(TextAlign.Start)
44
45      Column() {
46        TextPicker({ range: arr, selected: this.select })
47          .onChange((value: string | string[], index: number | number[]) => {
48            if (typeof index === 'number') {
49              this.select = index;
50            }
51          })
52      }
53      .width('100%')
54      .height(238)
55
56      Row() {
57        Text($r('app.string.cancel'))
58          .height('100%')
59          .width('50%')
60          .textAlign(TextAlign.Center)
61          .fontSize(16)
62          .fontColor($r('app.color.text_color_accent'))
63          .onClick(() => {
64            this.controller?.close();
65          })
66        Divider()
67          .vertical(true)
68          .height('100%')
69        Text($r('app.string.sure'))
70          .id('add_sure')
71          .height('100%')
72          .width('50%')
73          .textAlign(TextAlign.Center)
74          .fontSize(16)
75          .fontColor($r('app.color.text_color_accent'))
76          .onClick(() => {
77            this.sure(this.select + MIN_AGE)
78            this.controller?.close();
79          })
80      }
81      .height(40)
82    }
83    .height(328)
84    .margin({ left: 12, right: 12, bottom: 16 })
85    .borderRadius(24)
86    .backgroundColor($r('app.color.bg_white'))
87  }
88}
89
90@Entry
91@Component
92export struct AddInformationView {
93  @State information: Information = new Information('', 0, '', true)
94  private dialogController: CustomDialogController = new CustomDialogController({
95    builder: AgePickDialog({ sure: (age: number) => {
96      this.information.age = age;
97    } }),
98    customStyle: false,
99    alignment: DialogAlignment.Bottom
100  })
101  @State flag: string = '';
102
103  aboutToAppear() {
104    let tem: string = (router.getParams() as Record<string, Object>)['title'] as string;
105    if (!tem) {
106      return;
107    }
108    this.flag = tem;
109  }
110
111  build() {
112    Column() {
113      Row() {
114        Row() {
115          Image($r("app.media.ic_public_back"))
116            .height(24)
117            .aspectRatio(1)
118            .objectFit(ImageFit.Contain)
119        }
120        .height('100%')
121        .aspectRatio(1)
122        .padding({ left: 24 })
123        .onClick(() => {
124          router.back();
125        })
126
127        Text($r('app.string.add_new_contact'))
128          .fontColor($r('app.color.text_color_primary'))
129          .fontSize(20)
130          .margin({ left: 24 })
131
132        Blank()
133
134        Row() {
135          Image($r('app.media.ic_public_confirm'))
136            .height(24)
137            .aspectRatio(1)
138            .objectFit(ImageFit.Contain)
139        }
140        .id('add_confirm')
141        .height('100%')
142        .aspectRatio(1)
143        .padding({ right: 24 })
144        .onClick(() => {
145          let eventId = Constant.EMITTER_ID_DEFAULT;
146          switch (this.flag) {
147            case getString($r('app.string.deque')):
148              eventId = Constant.EMITTER_ID_DEQUE;
149              break;
150            case getString($r('app.string.linked_list')):
151              eventId = Constant.EMITTER_ID_LINKED_LIST;
152              break;
153            case getString($r('app.string.list')):
154              eventId = Constant.EMITTER_ID_LIST;
155              break;
156            case getString($r('app.string.queue')):
157              eventId = Constant.EMITTER_ID_QUEUE;
158              break;
159            case getString($r('app.string.stack')):
160              eventId = Constant.EMITTER_ID_STACK;
161              break;
162            case getString($r('app.string.vector')):
163              eventId = Constant.EMITTER_ID_VECTOR;
164              break;
165            default:
166              eventId = Constant.EMITTER_ID_DEFAULT;
167              break;
168          }
169
170          let event: emitter.InnerEvent = {
171            eventId: eventId,
172            priority: emitter.EventPriority.HIGH
173          };
174
175          let eventData: emitter.EventData = {
176            data: {
177              'name': this.information.name,
178              'age': this.information.age,
179              'phone': this.information.phone,
180              'clickAble': this.information.clickAble
181            }
182          };
183
184          emitter.emit(event, eventData);
185          router.back();
186        })
187
188      }
189      .width('100%')
190      .height(56)
191
192      Row() {
193        Image($r('app.media.ic_public_user'))
194          .margin({ left: 19 })
195          .width(19)
196          .aspectRatio(1)
197        Text($r('app.string.names'))
198          .margin({ left: 19 })
199          .fontSize(16)
200          .fontColor($r('app.color.text_color_primary'))
201        Column() {
202          TextInput({ placeholder: $r('app.string.input_name') })
203            .id('add_name')
204            .height(48)
205            .fontSize(16)
206            .backgroundColor($r('sys.color.ohos_id_color_background_transparent'))
207            .onChange((value: string) => {
208              this.information.name = value;
209            })
210        }
211        .layoutWeight(1)
212        .margin({ left: 52, right: 16 })
213      }
214      .height(64)
215      .width('100%')
216      .borderRadius(16)
217      .backgroundColor($r('app.color.bg_white'))
218      .margin({ top: 12 })
219
220      Row() {
221        Image($r('app.media.ic_age'))
222          .margin({ left: 19 })
223          .width(19)
224          .aspectRatio(1)
225        Text($r('app.string.age'))
226          .margin({ left: 19 })
227          .fontSize(16)
228          .fontColor($r('app.color.text_color_primary'))
229        Column() {
230          Image($r('app.media.ic_public_spinner_down'))
231            .height(24)
232            .width(12)
233        }
234        .id('add_age')
235        .justifyContent(FlexAlign.Center)
236        .width(54)
237        .height('100%')
238        .onClick(() => {
239          this.dialogController.open();
240        })
241
242        Column() {
243          TextInput({
244            text: this.information.age === 0 ? '' : `${this.information.age}`,
245            placeholder: $r('app.string.please_choose')
246          })
247            .height(48)
248            .fontSize(16)
249            .focusable(false)
250            .backgroundColor($r('sys.color.ohos_id_color_background_transparent'))
251            .onClick(() => {
252              this.dialogController.open();
253            })
254        }
255        .layoutWeight(1)
256        .margin({ right: 16 })
257      }
258      .height(64)
259      .width('100%')
260      .borderRadius(16)
261      .backgroundColor($r('app.color.bg_white'))
262      .margin({ top: 12 })
263
264      Row() {
265        Image($r('app.media.ic_public_phone'))
266          .margin({ left: 19 })
267          .width(19)
268          .aspectRatio(1)
269        Text($r('app.string.contact_phone'))
270          .margin({ left: 19 })
271          .fontSize(16)
272          .fontColor($r('app.color.text_color_primary'))
273        Column() {
274          TextInput({ placeholder: $r('app.string.input_phone') })
275            .id('add_phone')
276            .height(48)
277            .fontSize(16)
278            .backgroundColor($r('sys.color.ohos_id_color_background_transparent'))
279            .onChange((value: string) => {
280              this.information.phone = value;
281            })
282        }
283        .layoutWeight(1)
284        .margin({ left: 52, right: 16 })
285      }
286      .height(64)
287      .width('100%')
288      .borderRadius(16)
289      .backgroundColor($r('app.color.bg_white'))
290      .margin({ top: 12 })
291    }
292    .height('100%')
293    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
294    .padding({ left: 12, right: 12 })
295  }
296}