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 */
15import MmsBoolean from '../data/MmsBoolean';
16
17/**
18 * Options: dual title, 1 switch
19 */
20@Component
21export struct SettingItemSwitch {
22  primaryTitle: string | Resource;
23  secondaryTitle?: string | Resource;
24  @ObjectLink isEnable: MmsBoolean;
25  showBottomDivider ?: boolean = false;
26  visibilityShow ?: Visibility = Visibility.Visible;
27  onChange: (isOn: boolean) => void;
28
29  build() {
30    Column() {
31      Flex({
32        direction: FlexDirection.Row,
33        justifyContent: FlexAlign.SpaceBetween,
34        alignItems: ItemAlign.Center
35      }) {
36        Flex({
37          direction: FlexDirection.Column,
38          justifyContent: FlexAlign.Center,
39          alignItems: ItemAlign.Start
40        }) {
41          Text(this.primaryTitle)
42            .height($r('app.float.settings_item_primary_title_height'))
43            .fontWeight(FontWeight.Medium)
44            .fontSize($r('app.float.settings_item_primary_title_font_size'))
45            .fontColor($r('sys.color.ohos_id_color_text_primary'))
46
47          if (this.secondaryTitle != undefined) {
48            Text(this.secondaryTitle)
49              .height($r('app.float.settings_item_secondary_title_height'))
50              .margin({ top: $r('app.float.settings_item_title_space') })
51              .fontWeight(FontWeight.Regular)
52              .fontSize($r('app.float.settings_item_secondary_title_font_size'))
53              .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
54          }
55        }
56        .layoutWeight(1)
57
58        Toggle({ type: ToggleType.Switch, isOn: this.isEnable.value })
59          .width($r('app.float.settings_item_switch_width'))
60          .offset({ x: 4, y: 0 })
61          .selectedColor($r('sys.color.ohos_id_color_activated'))
62          .onChange((isOn: boolean) => {
63            if (typeof isOn === 'number') {
64              let newIsOn: number = isOn;
65              switch (newIsOn) {
66                case 1:
67                  isOn = true;
68                  break;
69                case 0:
70                  isOn = false;
71                  break;
72                default:
73                  break;
74              }
75            }
76            this.onChange(isOn);
77          })
78      }
79      .layoutWeight(1)
80
81      if (this.showBottomDivider) {
82        Divider()
83          .vertical(false)
84          .strokeWidth(1)
85          .color($r('sys.color.ohos_id_color_list_separator'))
86          .lineCap(LineCapStyle.Round)
87      }
88    }
89    .width('100%')
90    .height(this.secondaryTitle != undefined ? $r('app.float.settings_item_height_2') :
91    $r('app.float.settings_item_height_1'))
92    .visibility(this.visibilityShow)
93  }
94}
95
96/**
97 * Setting items: double title, one status, and one next icon
98 */
99@Component
100export struct SettingItemJump {
101  primaryTitle: string | Resource;
102  secondaryTitle ?: string | Resource;
103  @Consume statusTitle: Resource;
104  showBottomDivider ?: boolean = false;
105  visibilityShow ?: Visibility = Visibility.Visible;
106  OnClick: (event?: ClickEvent) => void;
107
108  build() {
109    Column() {
110      Flex({
111        direction: FlexDirection.Row,
112        justifyContent: FlexAlign.SpaceBetween,
113        alignItems: ItemAlign.Center
114      }) {
115        Flex({
116          direction: FlexDirection.Column,
117          justifyContent: FlexAlign.Center,
118          alignItems: ItemAlign.Start
119        }) {
120          Text(this.primaryTitle)
121            .height($r('app.float.settings_item_primary_title_height'))
122            .fontWeight(FontWeight.Medium)
123            .fontSize($r('app.float.settings_item_primary_title_font_size'))
124            .fontColor($r('sys.color.ohos_id_color_text_primary'))
125
126          if (this.secondaryTitle != undefined) {
127            Text(this.secondaryTitle)
128              .height($r('app.float.settings_item_secondary_title_height'))
129              .margin({ top: $r('app.float.settings_item_title_space') })
130              .fontWeight(FontWeight.Regular)
131              .fontSize($r('app.float.settings_item_secondary_title_font_size'))
132              .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
133          }
134        }
135        .layoutWeight(1)
136
137        Row() {
138          if (this.statusTitle != undefined) {
139            Text(this.statusTitle)
140              .height($r('app.float.settings_item_secondary_title_height'))
141              .margin({ right: $r('app.float.settings_item_status_title_margin_right') })
142              .fontWeight(FontWeight.Regular)
143              .fontSize($r('app.float.settings_item_secondary_title_font_size'))
144              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
145          }
146
147          Image($rawfile('icon/ic_next.svg'))
148            .width($r('app.float.settings_item_next_image_width'))
149            .height($r('app.float.settings_item_next_image_height'))
150        }
151      }
152      .layoutWeight(1)
153      .onClick(this.OnClick)
154
155      if (this.showBottomDivider) {
156        Divider()
157          .vertical(false)
158          .strokeWidth(1)
159          .color($r('sys.color.ohos_id_color_list_separator'))
160          .lineCap(LineCapStyle.Round)
161      }
162    }
163    .width('100%')
164    .height(this.secondaryTitle != undefined ? $r('app.float.settings_item_height_2') :
165    $r('app.float.settings_item_height_1'))
166    .visibility(this.visibilityShow)
167  }
168}