1/**
2 * Copyright (c) 2021-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 ComponentConfig from './ComponentConfig';
17import SwitchController from './controller/SwitchController';
18
19/**
20 * Toggle component
21 */
22@Component
23export default struct SwitchComponent {
24  @Link isOn: boolean;
25  @State isEnabled?: boolean = true;
26  private title: string | Resource = '';
27  private controller?: SwitchController;
28  private summary?: string | Resource = '';
29  private switchHeight: string | number | Resource = '';
30
31  build() {
32    Row() {
33      Column() {
34        Text(this.title)
35          .fontColor($r('sys.color.ohos_fa_text_primary'))
36          .fontSize($r("app.float.font_16"))
37          .fontWeight(FontWeight.Medium)
38
39        if (this.summary) {
40          Text(this.summary)
41            .fontColor($r('sys.color.ohos_fa_text_secondary'))
42            .fontSize($r('sys.float.ohos_id_text_size_body2'))
43            .fontWeight('sans-serif')
44            .textAlign(TextAlign.Start)
45            .maxLines(ComponentConfig.MAX_LINES_1)
46            .textOverflow({ overflow: TextOverflow.Ellipsis })
47            .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') })
48        }
49      }
50      .alignItems(HorizontalAlign.Start)
51
52      Blank()
53
54      Stack({ alignContent: Alignment.Start }) {
55        Toggle({ type: ToggleType.Switch, isOn: this.isOn })
56          .width('36vp')
57          .height('20vp')
58          .margin({ left: $r('app.float.wh_value_6') })
59          .selectedColor('#007DFF')
60          .onChange((isOn: boolean) => {
61            if (!this.isEnabled) return;
62            this.isOn = new Boolean(isOn).valueOf();
63            this.toggleValue(this.isOn);
64          });
65      }
66    }
67    .padding({ left: $r('app.float.distance_12'), right: $r('app.float.distance_8') })
68    .width(ComponentConfig.WH_100_100)
69    .height(this.switchHeight)
70    .backgroundColor($r("app.color.white_bg_color"))
71    .alignItems(VerticalAlign.Center)
72    .borderRadius($r("app.float.radius_16"))
73  }
74
75  aboutToAppear() {
76    if (this.controller) {
77      this.toggleValue = this.controller.onSelfToggleValueBindThis;
78
79      // bind component and initialize
80      this.controller.bindComponent(this)
81        .bindProperties(["isOn", "isEnabled"])
82        .initData()
83        .subscribe();
84    }
85  }
86
87  aboutToDisappear() {
88    this.controller?.unsubscribe();
89  }
90
91  private toggleValue: (isOn: boolean) => void = () => {
92  };
93}