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