1/*
2 * Copyright (c) 2023-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
16const CHECKBOX_CONTAINER_HEIGHT: number = 48
17const CONTENT_MAX_LINES: number = 2
18const DIVIDER_CONTAINER_WIDTH: number = 16
19const DIVIDER_HEIGHT: number = 24
20const DIVIDER_WIDTH: number = 2
21const LOADING_PROGRESS_WIDTH: number = 40
22const LOADING_PROGRESS_HEIGHT: number = 48
23const ITEM_TEXT_SIZE: number = 14
24export declare type ButtonOptions = {
25  value: ResourceStr;
26  action?: () => void;
27  background?: ResourceColor;
28  fontColor?: ResourceColor;
29}
30
31@CustomDialog
32export struct TipsDialog{
33  controller: CustomDialogController
34  imageRes: Resource
35  imageSize: SizeOptions = {width: '100%', height: 180}
36  title: ResourceStr = ''
37  content?: ResourceStr = ''
38  checkTips?: ResourceStr = ''
39  @State isChecked?: boolean = false
40  primaryButton?: ButtonOptions = {value: ""}
41  secondaryButton?: ButtonOptions = {value: ""}
42
43  build() {
44    Column() {
45      Row() {
46        Column() {
47          Image(this.imageRes)
48            .size(this.imageSize)
49            .objectFit(ImageFit.Fill)
50        }.layoutWeight(1)
51        .clip(true)
52      }.width('100%')
53      .padding({ left: 24, right: 24})
54      .margin({top: 24})
55      Row() {
56        Text(this.title)
57          .fontSize($r('sys.float.ohos_id_text_size_headline8'))
58          .fontWeight(FontWeight.Medium)
59          .fontColor($r('sys.color.ohos_id_color_text_primary'))
60          .textAlign(TextAlign.Center)
61      }.padding({ left: 24, right: 24 })
62      .margin({top: 16})
63      if (this.content) {
64        Row() {
65          Text(this.content)
66            .fontSize($r('sys.float.ohos_id_text_size_body2'))
67            .fontWeight(FontWeight.Medium)
68            .fontColor($r('sys.color.ohos_id_color_text_primary'))
69            .textAlign(TextAlign.Center)
70            .minFontSize($r('sys.float.ohos_id_text_size_body3'))
71        }.padding({ left: 24, right: 24, top: 8, bottom: 8 })
72        .width('100%')
73      }
74      Row() {
75        Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked)
76          .onChange((checked: boolean) => {
77            this.isChecked = checked
78          })
79          .margin({ left: 0, right: 8})
80        Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2'))
81          .fontWeight(FontWeight.Medium)
82          .fontColor($r('sys.color.ohos_id_color_text_primary'))
83          .maxLines(CONTENT_MAX_LINES)
84          .layoutWeight(1)
85          .focusOnTouch(true)
86          .onClick(() => {
87            this.isChecked = !this.isChecked
88          })
89      }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 })
90
91      Row() {
92        if (this.primaryButton.value) {
93          Button(this.primaryButton.value)
94            .fontSize($r('sys.float.ohos_id_text_size_button1'))
95            .fontWeight(FontWeight.Medium)
96            .layoutWeight(1)
97            .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
98            .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
99            .onClick(() => {
100              if (this.primaryButton.action) this.primaryButton.action()
101              this.controller.close()
102            })
103        }
104        if (this.secondaryButton.value && this.primaryButton.value) {
105          Column() {
106            if (!this.secondaryButton.background) {
107              Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
108            }
109          }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
110        }
111        if (this.secondaryButton.value) {
112          Button(this.secondaryButton.value)
113            .fontSize($r('sys.float.ohos_id_text_size_button1'))
114            .fontWeight(FontWeight.Medium)
115            .layoutWeight(1)
116            .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
117            .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
118            .onClick(() => {
119              if (this.secondaryButton.action) this.secondaryButton.action()
120              this.controller.close()
121            })
122        }
123      }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
124    }
125    .backgroundBlurStyle(BlurStyle.Thick)
126    .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
127    .margin({
128      left: $r('sys.float.ohos_id_dialog_margin_start'),
129      right: $r('sys.float.ohos_id_dialog_margin_end'),
130      bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
131    })
132    // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
133    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
134  }
135}
136
137@CustomDialog
138export struct SelectDialog{
139  controller: CustomDialogController
140  title: ResourceStr = ''
141  content?: ResourceStr = ''
142  selectedIndex?: number = -1
143  confirm?: ButtonOptions = {value: ""}
144  radioContent: Array<SheetInfo> = []
145
146  build() {
147      Column() {
148        Row() {
149          Text(this.title)
150            .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
151            .fontWeight(FontWeight.Medium)
152            .maxLines(CONTENT_MAX_LINES)
153            .minFontSize($r('sys.float.ohos_id_text_size_sub_title1'))
154            .textOverflow({ overflow: TextOverflow.Ellipsis})
155            .fontColor($r('sys.color.ohos_id_color_text_primary'))
156            .textAlign(TextAlign.Start)
157            .width('100%')
158        }.padding({ left: 24, right: 24, top: 24 })
159        .constraintSize({minHeight: 56})
160        if (this.content) {
161          Row() {
162            Text(this.content)
163              .fontSize($r('sys.float.ohos_id_text_size_body2'))
164              .fontWeight(FontWeight.Medium)
165              .fontColor($r('sys.color.ohos_id_color_text_primary'))
166              .maxLines(CONTENT_MAX_LINES)
167              .textOverflow({ overflow: TextOverflow.Ellipsis})
168              .minFontSize($r('sys.float.ohos_id_text_size_body3'))
169          }.padding({ left: 24, right: 24, top: 8, bottom: 8 })
170          .width('100%')
171        }
172        List({space: 1}) {
173          ForEach(this.radioContent, (item: SheetInfo, index?: number) => {
174            ListItem() {
175              Column() {
176                Row() {
177                  Text(item.title)
178                    .fontSize(ITEM_TEXT_SIZE)
179                    .fontWeight(FontWeight.Regular)
180                    .maxLines(CONTENT_MAX_LINES)
181                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
182                    .layoutWeight(1)
183                  Radio({ value: 'item.title', group: 'radioGroup'}).checked(this.selectedIndex == index)
184                    .onChange(() => {
185                      item.action && item.action()
186                      this.controller.close()
187                    })
188                    .onClick(() => {
189                      item.action && item.action()
190                      this.controller.close()
191                    })
192                }.constraintSize({minHeight: 48}).clip(false)
193                .onClick(() => {
194                  item.action && item.action()
195                  this.controller.close()
196                })
197                if (index < this.radioContent.length - 1) {
198                  Divider().color($r('sys.color.ohos_id_color_list_separator'))
199                }
200              }
201            }
202          })
203        }.width('100%').padding({ left: 24, right: 24, top: 8, bottom: 8 }).clip(false)
204        Row() {
205          if (this.confirm.value) {
206            Button(this.confirm.value)
207              .fontSize($r('sys.float.ohos_id_text_size_button1'))
208              .fontWeight(FontWeight.Medium)
209              .layoutWeight(1)
210              .backgroundColor(this.confirm.background? this.confirm.background: $r('sys.color.ohos_id_color_background_transparent'))
211              .fontColor(this.confirm.fontColor ? this.confirm.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
212              .onClick(() => {
213                this.confirm.action && this.confirm.action()
214                this.controller.close()
215              })
216          }
217        }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
218      }
219      .backgroundBlurStyle(BlurStyle.Thick)
220      .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
221      .margin({
222        left: $r('sys.float.ohos_id_dialog_margin_start'),
223        right: $r('sys.float.ohos_id_dialog_margin_end'),
224        bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
225      })
226      // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
227      .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
228  }
229}
230
231@CustomDialog
232export struct ConfirmDialog{
233  controller: CustomDialogController
234  title: ResourceStr = ''
235  content?: ResourceStr = ''
236  checkTips?: ResourceStr = ''
237  @State isChecked?: boolean = false
238  primaryButton?: ButtonOptions = {value: ""}
239  secondaryButton?: ButtonOptions = {value: ""}
240
241  build() {
242      Column() {
243        Row() {
244          Text(this.title)
245            .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
246            .fontWeight(FontWeight.Medium)
247            .maxLines(CONTENT_MAX_LINES)
248            .minFontSize($r('sys.float.ohos_id_text_size_sub_title1'))
249            .textOverflow({ overflow: TextOverflow.Ellipsis})
250            .fontColor($r('sys.color.ohos_id_color_text_primary'))
251            .textAlign(TextAlign.Start)
252            .width('100%')
253        }.padding({ left: 24, right: 24, top: 24 })
254        .constraintSize({minHeight: 56})
255        if (this.content) {
256          Row() {
257            Text(this.content)
258              .fontSize($r('sys.float.ohos_id_text_size_body1'))
259              .fontWeight(FontWeight.Medium)
260              .fontColor($r('sys.color.ohos_id_color_text_primary'))
261              .maxLines(CONTENT_MAX_LINES)
262              .textOverflow({ overflow: TextOverflow.Ellipsis})
263              .minFontSize($r('sys.float.ohos_id_text_size_body3'))
264          }.padding({ left: 24, right: 24, top: 8, bottom: 8 })
265          .width('100%')
266          .constraintSize({minHeight: 36})
267        }
268        Row() {
269          Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked)
270            .onChange((checked: boolean) => {
271              this.isChecked = checked
272            })
273            .margin({ left: 0, right: 8})
274          Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2'))
275            .fontWeight(FontWeight.Medium)
276            .fontColor($r('sys.color.ohos_id_color_text_primary'))
277            .maxLines(CONTENT_MAX_LINES)
278            .layoutWeight(1)
279            .focusOnTouch(true)
280            .onClick(() => {
281              this.isChecked = !this.isChecked
282            })
283        }.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 })
284
285        Row() {
286          if (this.primaryButton.value) {
287            Button(this.primaryButton.value)
288              .fontSize($r('sys.float.ohos_id_text_size_button1'))
289              .fontWeight(FontWeight.Medium)
290              .layoutWeight(1)
291              .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
292              .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
293              .onClick(() => {
294                if (this.primaryButton.action) this.primaryButton.action()
295                this.controller.close()
296              })
297          }
298          if (this.secondaryButton.value && this.primaryButton.value) {
299            Column() {
300              if (!this.secondaryButton.background) {
301                Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
302              }
303            }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
304          }
305          if (this.secondaryButton.value) {
306            Button(this.secondaryButton.value)
307              .fontSize($r('sys.float.ohos_id_text_size_button1'))
308              .fontWeight(FontWeight.Medium)
309              .layoutWeight(1)
310              .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
311              .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
312              .onClick(() => {
313                if (this.secondaryButton.action) this.secondaryButton.action()
314                this.controller.close()
315              })
316          }
317        }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
318      }
319      .backgroundBlurStyle(BlurStyle.Thick)
320      .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
321      .margin({
322        left: $r('sys.float.ohos_id_dialog_margin_start'),
323        right: $r('sys.float.ohos_id_dialog_margin_end'),
324        bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
325      })
326      // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
327      .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
328  }
329}
330
331@CustomDialog
332export struct AlertDialog{
333  controller: CustomDialogController
334  content: ResourceStr = ''
335  primaryButton?: ButtonOptions = {value: ""}
336  secondaryButton?: ButtonOptions = {value: ""}
337  build() {
338    Column() {
339      Row() {
340        Text(this.content)
341          .fontSize($r('sys.float.ohos_id_text_size_body1'))
342          .fontWeight(FontWeight.Medium)
343          .fontColor($r('sys.color.ohos_id_color_text_primary'))
344      }.padding({ left: 24, right: 24, top: 24 })
345      Row() {
346        if (this.primaryButton.value) {
347          Button(this.primaryButton.value)
348            .fontSize($r('sys.float.ohos_id_text_size_button1'))
349            .fontWeight(FontWeight.Medium)
350            .layoutWeight(1)
351            .backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
352            .fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
353            .onClick(() => {
354              if (this.primaryButton.action) this.primaryButton.action()
355              this.controller.close()
356            })
357        }
358        if (this.secondaryButton.value && this.primaryButton.value) {
359          Column() {
360            if (!this.secondaryButton.background) {
361              Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
362            }
363          }.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
364        }
365        if (this.secondaryButton.value) {
366          Button(this.secondaryButton.value)
367            .fontSize($r('sys.float.ohos_id_text_size_button1'))
368            .fontWeight(FontWeight.Medium)
369            .layoutWeight(1)
370            .backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
371            .fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
372            .onClick(() => {
373              if (this.secondaryButton.action) this.secondaryButton.action()
374              this.controller.close()
375            })
376        }
377      }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
378    }
379    .backgroundBlurStyle(BlurStyle.Thick)
380    .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
381    .margin({
382      left: $r('sys.float.ohos_id_dialog_margin_start'),
383      right: $r('sys.float.ohos_id_dialog_margin_end'),
384      bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
385    })
386    // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
387    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
388  }
389}
390
391@CustomDialog
392export struct LoadingDialog{
393  controller: CustomDialogController
394  content?: ResourceStr = ''
395  build() {
396    Column() {
397      Row() {
398        Text(this.content)
399          .fontSize($r('sys.float.ohos_id_text_size_body1'))
400          .fontWeight(FontWeight.Medium)
401          .fontColor($r('sys.color.ohos_id_color_text_primary'))
402          .layoutWeight(1)
403        LoadingProgress().width(LOADING_PROGRESS_WIDTH).height(LOADING_PROGRESS_HEIGHT).margin({ left: 16 })
404      }.margin({ left: 24, right: 24, top: 24, bottom: 24 })
405      .constraintSize({minHeight: 48})
406    }
407    .backgroundBlurStyle(BlurStyle.Thick)
408    .borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
409    .margin({
410      left: $r('sys.float.ohos_id_dialog_margin_start'),
411      right: $r('sys.float.ohos_id_dialog_margin_end'),
412      bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
413    })
414    // 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
415    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
416  }
417}