• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-2023 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
16const EMPTY_STRING: string = ''
17const MAX_PROGRESS: number = 100
18const MAX_PERCENTAGE: string = '100%'
19const MIN_PERCENTAGE: string = '0%'
20
21@Component
22export struct ProgressButton {
23  @Prop @Watch('getProgressContext') progress: number
24  @State textProgress: string = EMPTY_STRING
25  @Prop content: string = EMPTY_STRING
26  @State isLoading: boolean = false
27  progressButtonWidth?: Length = 44
28  clickCallback: () => void = null
29  @Prop enable: boolean = true
30
31  private getButtonProgress(): number {
32    if (this.progress < 0) {
33      return 0
34    } else if (this.progress > MAX_PROGRESS) {
35      return MAX_PROGRESS
36    }
37    return this.progress
38  }
39
40  private getProgressContext() {
41    if (this.progress < 0) {
42      this.isLoading = false
43      this.textProgress = MIN_PERCENTAGE
44    } else if (this.progress >= MAX_PROGRESS) {
45      this.isLoading = false
46      this.textProgress = MAX_PERCENTAGE
47    } else {
48      this.isLoading = true
49      this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + "%"
50    }
51  }
52
53  build() {
54    Button() {
55      Stack(){
56        Progress({ value: this.getButtonProgress(), total: MAX_PROGRESS,
57          style: ProgressStyle.Capsule })
58          .height(28)
59          .borderRadius(14)
60          .width('100%')
61          .hoverEffect(HoverEffect.None)
62          .clip(false)
63          .enabled(this.enable)
64          .color('#330A59F7')
65        Row() {
66          Text(this.isLoading? this.textProgress: this.content)
67            .fontSize($r('sys.float.ohos_id_text_size_button3'))
68            .fontWeight(FontWeight.Medium)
69            .fontColor($r('sys.color.ohos_id_color_text_primary'))
70            .maxLines(1)
71            .textOverflow({ overflow: TextOverflow.Ellipsis })
72            .padding({left: 8, right: 8})
73            .opacity(this.enable? 1.0: 0.4)
74        }
75        Row().backgroundColor(Color.Transparent)
76          .border({ width: 1, color: '#330A59F7'})
77          .height(28)
78          .borderRadius(14)
79          .width('100%')
80      }
81    }
82    .borderRadius(14)
83    .clip(false)
84    .hoverEffect(HoverEffect.None)
85    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
86    .constraintSize({minWidth: 44})
87    .width(this.progressButtonWidth < 44? 44: this.progressButtonWidth)
88    .stateEffect(this.enable)
89    .onClick(() => {
90      if(!this.enable){
91        return
92      }
93      if (this.progress < MAX_PROGRESS) {
94        this.isLoading = !this.isLoading
95      }
96      this.clickCallback && this.clickCallback()
97    })
98  }
99}