• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2021 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 ComponentConfig from './ComponentConfig';
16import LogUtil from '../../../../../utils/src/main/ets/default/baseUtil/LogUtil';
17import Log from '../../../../../utils/src/main/ets/default/baseUtil/LogDecorator';
18import { RadioListItem } from '../../../../../utils/src/main/ets/default/bean/RadioListItem';
19
20/**
21 * Radio component
22 */
23@Component
24export default struct RadioListComponent {
25  @State dataList: RadioListItem[] = [];
26  @State checkedValue: string = '';
27  private showRadio: boolean = true;
28  private onChange?: (item: RadioListItem) => void;
29
30  build() {
31    Column() {
32      List() {
33        ForEach(this.dataList, (item: RadioListItem) => {
34          ListItem() {
35            RadioComponent({
36              radioItem: item,
37              showRadio: this.showRadio,
38              isChecked: (this.checkedValue == item.settingValue),
39              onChange: () => {
40                this.checkedValue = item.settingValue as string;
41                if (this.onChange) {
42                  LogUtil.info('settings RadioListComponent : onChange: settingValue = ' + item.settingValue)
43                  this.onChange(item);
44                }
45              }
46            });
47          }
48          .height(item.settingIcon ? $r('app.float.audio_no_icon_height') : $r('app.float.password_list_item_height'));
49        });
50      }
51      .divider({
52        strokeWidth: $r('app.float.divider_wh'),
53        color: $r('app.color.color_E3E3E3_grey'),
54        startMargin: $r('app.float.wh_value_24'),
55        endMargin: $r('app.float.wh_value_24')
56      })
57      .width(ComponentConfig.WH_100_100)
58      .alignSelf(ItemAlign.Start);
59    }
60    .width(ComponentConfig.WH_100_100);
61  }
62}
63
64/**
65 * set up radio component
66 */
67@Component
68struct RadioComponent {
69  private radioItem: RadioListItem = new RadioListItem();
70  private isChecked: boolean = false;
71  private onChange?: () => void;
72  private showRadio: boolean = true;
73
74  build() {
75    Flex({ justifyContent: FlexAlign.SpaceBetween }) {
76      Row() {
77        Image(this.radioItem.settingIcon)
78          .width($r('app.float.audio_image_common_size'))
79          .height($r('app.float.audio_image_common_size'))
80          .margin({ right: $r('app.float.audio_image_margin_right') })
81          .visibility(this.radioItem.settingIcon ? Visibility.Visible : Visibility.None)
82          .objectFit(ImageFit.Contain);
83        Column() {
84          Text(this.radioItem.settingTitle)
85            .fontColor($r("sys.color.ohos_id_color_primary"))
86            .fontSize($r('app.float.font_16'))
87            .textAlign(TextAlign.Start)
88            .fontWeight(500)
89            .lineHeight('22vp')
90            .maxLines(ComponentConfig.MAX_LINES_3)
91            .textOverflow({ overflow: TextOverflow.Ellipsis })
92          Text(this.radioItem.settingSummary)
93            .fontColor($r('app.color.color_999999_grey'))
94            .fontSize($r('app.float.audio_subtitle_font_size'))
95            .textAlign(TextAlign.Start)
96            .maxLines(ComponentConfig.MAX_LINES_1)
97            .textOverflow({ overflow: TextOverflow.Ellipsis })
98            .visibility(this.radioItem.settingSummary ? Visibility.Visible : Visibility.None)
99            .margin({ bottom: $r('app.float.audio_summary_subtitle_margin_bottom') });
100        }
101        .alignItems(HorizontalAlign.Start);
102      }
103      .flexShrink(0)
104      .alignItems(VerticalAlign.Center)
105      .align(Alignment.Start);
106
107      Row() {
108        Radio({ value: this.radioItem.settingValue as string, group: '' })
109          .height($r('app.float.radio_component_height'))
110          .margin({ right: $r('app.float.radio_component_margin_bottom_right') })
111          .align(Alignment.End)
112          .enabled(false)
113          .checked(this.isChecked)
114          .visibility(this.showRadio ? Visibility.Visible : Visibility.None)
115      }
116      .align(Alignment.End);
117    }
118    .height($r('app.float.wh_value_48'))
119    .margin({ left: $r('app.float.wh_value_24') })
120    .padding({ top: $r('app.float.wh_value_13'), bottom: $r('app.float.wh_value_13') })
121    .width(ComponentConfig.WH_100_100)
122    .onClick(() => {
123      LogUtil.info('settings RadioComponent : call onClick.')
124      if (this.onChange) {
125        this.onChange()
126      }
127    });
128  }
129}
130