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';
16
17/**
18 * Slider component
19 */
20@Component
21export default struct SliderComponent {
22  @State clickConfirm: boolean = true;
23  @State showStep: boolean = false;
24  @State value: number = 0;
25  @State fontSize: number = 18; // Font size
26  private visible: boolean = true;
27  private min: number = 0;
28  private max: number = 100;
29  private step: number = 1;
30  private leftImage: string = '';
31  private rightImage: string = '';
32  private onChange?: (value: number, mode: SliderChangeMode) => void
33  private summary: string | Resource = ''; // Text details
34
35  build() {
36    Flex({ direction: FlexDirection.Row }) {
37      Column() {
38        Image(this.leftImage)
39          .width($r('app.float.slider_image_width'))
40          .height($r('app.float.slider_image_height'))
41          .objectFit(ImageFit.Contain);
42      }
43      .align(Alignment.TopStart)
44      .visibility(this.visible ? Visibility.Visible : Visibility.None)
45      .padding({ left: $r('app.float.slider_image_margin') })
46      .onClick(() => {
47        if (this.value != this.min && this.clickConfirm) {
48          this.value = Math.max(this.min, this.value - this?.step);
49          this.onChangeHandler(this.value, SliderChangeMode.End);
50        }
51      })
52      .align(Alignment.Center)
53
54      Column() {
55        Row() {
56          Text(this.summary)
57            .fontSize(this.fontSize)
58            .textAlign(TextAlign.Start);
59        }
60        .width(ComponentConfig.WH_83_100)
61
62        Slider({
63          value: this.value,
64          min: this.min,
65          max: this.max,
66          step: this.step
67        })
68          .selectedColor(Color.Blue)
69          .blockColor(Color.Blue)
70          .width(ComponentConfig.WH_100_100)
71          .showSteps(this.showStep)
72          .onChange((value, mode) => {
73            this.onChangeHandler(value, mode)
74          });
75      }.align(Alignment.Center).flexGrow(1)
76
77      Column() {
78        Image(this.rightImage)
79          .width($r('app.float.slider_image_width'))
80          .height($r('app.float.slider_image_height'))
81          .align(Alignment.Start)
82          .objectFit(ImageFit.Contain);
83      }
84      .align(Alignment.TopEnd)
85      .visibility(this.visible ? Visibility.Visible : Visibility.None)
86      .padding({ right: $r('app.float.slider_image_margin') })
87      .onClick(() => {
88        if (this.value != this.max && this.clickConfirm) {
89          this.value = Math.min(this.max, this.value + this?.step);
90          this.onChangeHandler(this.value, SliderChangeMode.End);
91        }
92      })
93      .align(Alignment.Center)
94
95    }.width(ComponentConfig.WH_100_100).align(Alignment.TopStart)
96  }
97
98  /**
99   * Change handler
100   *
101   * @param value - Change value
102   * @param mode - State
103   */
104  onChangeHandler(value: number, mode: SliderChangeMode) {
105    if (this.onChange) {
106      this.onChange(value, mode);
107    }
108  }
109}