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