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 ConfigData from '../../../../../utils/src/main/ets/default/baseUtil/ConfigData';
18
19/**
20 * item custom component
21 */
22@Component
23export default struct EntryComponent {
24  @State isShow: Boolean = true;
25  @State settingIcon: string = "";
26  @State endTextIsShow: Boolean = true;
27  @State settingSummary: string = '';
28  @State settingValue: string = "";
29  @State settingArrow: string = '';
30  @State settingArrowStyle: string = "";
31  @State titleFontColor: Resource = $r('sys.color.ohos_id_color_text_primary');
32  @State isTouched: boolean = false;
33  private settingTitle: string | Resource = '';
34  private settingUri: string = '';
35  private isEnabled: boolean = true;
36  private onArrowClick?: () => void;
37  private heights ? = $r('app.float.wh_value_70');
38  private image_wh ? = $r('app.float.wh_value_50');
39  private fontSize ? = $r('sys.float.ohos_id_text_size_body1');
40  private valueFontSize ? = $r('sys.float.ohos_id_text_size_body2');
41
42  build() {
43    Row() {
44      Row() {
45        Image(this.settingIcon)
46          .width(this.image_wh as Length)
47          .height(this.image_wh as Length)
48          .margin({ right: $r('app.float.wh_10') })
49          .visibility('' === this.settingIcon ? Visibility.None : Visibility.Visible)
50          .objectFit(ImageFit.Contain)
51          .fillColor($r("sys.color.ohos_id_color_primary"))
52        Column() {
53          Text(this.settingTitle)
54            .fontColor(this.isEnabled ? this.titleFontColor : $r("sys.color.ohos_id_color_primary"))
55            .fontSize(this.fontSize as (number | string | Resource))
56            .textAlign(TextAlign.Start)
57            .maxLines(ComponentConfig.MAX_LINES_3)
58            .textOverflow({ overflow: TextOverflow.Ellipsis })
59            .fontWeight(500)
60          Row() {
61            Text($r('app.string.version'))
62              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
63              .fontSize($r('sys.float.ohos_id_text_size_body2'))
64              .textAlign(TextAlign.Start)
65              .maxLines(ComponentConfig.MAX_LINES_1)
66              .textOverflow({ overflow: TextOverflow.Ellipsis })
67              .visibility('pages/applicationInfo' === this.settingUri ? Visibility.Visible : Visibility.None)
68              .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') });
69
70            Text(this.settingSummary)
71              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
72              .fontSize($r('sys.float.ohos_id_text_size_body2'))
73              .fontWeight('sans-serif')
74              .textAlign(TextAlign.Start)
75              .maxLines(ComponentConfig.MAX_LINES_1)
76              .textOverflow({ overflow: TextOverflow.Ellipsis })
77              .visibility('' === this.settingSummary || undefined === this.settingSummary ? Visibility.None : Visibility.Visible)
78              .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') });
79          }
80        }
81        .alignItems(HorizontalAlign.Start);
82      }
83      .flexShrink(0)
84      .alignItems(VerticalAlign.Center)
85      .align(Alignment.Start)
86      .layoutWeight(ConfigData.LAYOUT_WEIGHT_1)
87
88      Row() {
89        Text(this.settingValue)
90          .fontSize(this.valueFontSize as (number | string | Resource))
91          .fontColor($r("sys.color.ohos_id_color_primary"))
92          .opacity($r('sys.float.ohos_id_alpha_content_secondary'))
93          .fontWeight('HwChinese-medium')
94          .height($r('app.float.wh_value_40'))
95          .margin({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l'), right: $r('app.float.wh_value_4') })
96          .align(Alignment.End);
97
98        if (!this.settingArrowStyle && this.settingArrow) {
99          Image(this.settingArrow)
100            .visibility('' === this.settingArrow ? Visibility.None : Visibility.Visible)
101            .width($r("app.float.wh_value_12"))
102            .height($r("app.float.wh_value_24"))
103            .margin({ right: $r('app.float.wh_value_8') })
104            .fillColor($r("sys.color.ohos_id_color_primary"))
105            .opacity($r("app.float.opacity_0_2"))
106        } else if (this.settingArrow) {
107          Image(this.settingArrow)
108            .visibility('' === this.settingArrow ? Visibility.None : Visibility.Visible)
109            .fillColor($r("sys.color.ohos_id_color_primary"))
110            .width($r('app.float.wh_value_24'))
111            .height($r('app.float.wh_value_24'))
112            .margin({ right: $r('app.float.wh_value_12') })
113            .borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
114            .onClick(this.onArrowClick as ((event?: ClickEvent) => void))
115
116        }
117      }
118      .alignItems(VerticalAlign.Center)
119      .align(Alignment.End);
120    }
121    .opacity(this.isEnabled ? 1 : $r('sys.float.ohos_id_alpha_disabled'))
122    .height(this.heights as Length)
123    .width(ComponentConfig.WH_100_100)
124    .padding({ left: $r('sys.float.ohos_id_card_margin_start') })
125    .borderRadius($r("sys.float.ohos_id_corner_radius_default_l"))
126    .linearGradient((this.isEnabled && this.isTouched) ? {
127      angle: 90,
128      direction: GradientDirection.Right,
129      colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
130    } : {
131      angle: 90,
132      direction: GradientDirection.Right,
133      colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
134    })
135    .alignItems(VerticalAlign.Center)
136    .onTouch((event?: TouchEvent) => {
137      if (event?.type === TouchType.Down) {
138        this.isTouched = true;
139      }
140      if (event?.type === TouchType.Up) {
141        this.isTouched = false;
142      }
143    })
144  }
145}