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
16if (!('finalizeConstruction' in ViewPU.prototype)) {
17  Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { });
18}
19const EMPTY_STRING = '';
20const MAX_PROGRESS = 100;
21const MAX_PERCENTAGE = '100%';
22const MIN_PERCENTAGE = '0%';
23const TEXT_OPACITY = 0.4;
24const BUTTON_NORMARL_WIDTH = 44;
25const BUTTON_NORMARL_HEIGHT = 28;
26const BUTTON_BORDER_RADIUS = 14;
27const TEXT_ENABLE = 1.0;
28const PROGRESS_BUTTON_PROGRESS_KEY = 'progress_button_progress_key';
29const PROGRESS_BUTTON_PRIMARY_FONT_KEY = 'progress_button_primary_font_key';
30const PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY = 'progress_button_container_background_color_key';
31const PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY = 'progress_button_emphasize_secondary_button_key';
32export class ProgressButton extends ViewPU {
33  constructor(k1, l1, m1, n1 = -1, o1 = undefined, p1) {
34    super(k1, m1, n1, p1);
35    if (typeof o1 === 'function') {
36      this.paramsGenerator_ = o1;
37    }
38    this.__progress = new SynchedPropertySimpleOneWayPU(l1.progress, this, 'progress');
39    this.__textProgress = new ObservedPropertySimplePU(EMPTY_STRING, this, 'textProgress');
40    this.__content = new SynchedPropertySimpleOneWayPU(l1.content, this, 'content');
41    this.__isLoading = new ObservedPropertySimplePU(false, this, 'isLoading');
42    this.progressButtonWidth = BUTTON_NORMARL_WIDTH;
43    this.clickCallback = () => { };
44    this.__enable = new SynchedPropertySimpleOneWayPU(l1.enable, this, 'enable');
45    this.__progressColor = new ObservedPropertyObjectPU('#330A59F7', this, 'progressColor');
46    this.__containerBorderColor = new ObservedPropertyObjectPU('#330A59F7', this, 'containerBorderColor');
47    this.__containerBackgroundColor = new ObservedPropertyObjectPU({ 'id': -1, 'type': 10001,
48      params: ['sys.color.ohos_id_color_foreground_contrary'],
49      'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, this, 'containerBackgroundColor');
50    this.__textHeight = new ObservedPropertyObjectPU(BUTTON_NORMARL_HEIGHT, this, 'textHeight');
51    this.__buttonBorderRadius = new ObservedPropertySimplePU(BUTTON_BORDER_RADIUS, this, 'buttonBorderRadius');
52    this.setInitiallyProvidedValue(l1);
53    this.declareWatch('progress', this.getProgressContext);
54    this.declareWatch('isLoading', this.getLoadingProgress);
55    this.finalizeConstruction();
56  }
57  setInitiallyProvidedValue(j1) {
58    if (j1.textProgress !== undefined) {
59      this.textProgress = j1.textProgress;
60    }
61    if (j1.content === undefined) {
62      this.__content.set(EMPTY_STRING);
63    }
64    if (j1.isLoading !== undefined) {
65      this.isLoading = j1.isLoading;
66    }
67    if (j1.progressButtonWidth !== undefined) {
68      this.progressButtonWidth = j1.progressButtonWidth;
69    }
70    if (j1.clickCallback !== undefined) {
71      this.clickCallback = j1.clickCallback;
72    }
73    if (j1.enable === undefined) {
74      this.__enable.set(true);
75    }
76    if (j1.progressColor !== undefined) {
77      this.progressColor = j1.progressColor;
78    }
79    if (j1.containerBorderColor !== undefined) {
80      this.containerBorderColor = j1.containerBorderColor;
81    }
82    if (j1.containerBackgroundColor !== undefined) {
83      this.containerBackgroundColor = j1.containerBackgroundColor;
84    }
85    if (j1.textHeight !== undefined) {
86      this.textHeight = j1.textHeight;
87    }
88    if (j1.buttonBorderRadius !== undefined) {
89      this.buttonBorderRadius = j1.buttonBorderRadius;
90    }
91  }
92  updateStateVars(i1) {
93    this.__progress.reset(i1.progress);
94    this.__content.reset(i1.content);
95    this.__enable.reset(i1.enable);
96  }
97  purgeVariableDependenciesOnElmtId(h1) {
98    this.__progress.purgeDependencyOnElmtId(h1);
99    this.__textProgress.purgeDependencyOnElmtId(h1);
100    this.__content.purgeDependencyOnElmtId(h1);
101    this.__isLoading.purgeDependencyOnElmtId(h1);
102    this.__enable.purgeDependencyOnElmtId(h1);
103    this.__progressColor.purgeDependencyOnElmtId(h1);
104    this.__containerBorderColor.purgeDependencyOnElmtId(h1);
105    this.__containerBackgroundColor.purgeDependencyOnElmtId(h1);
106    this.__textHeight.purgeDependencyOnElmtId(h1);
107    this.__buttonBorderRadius.purgeDependencyOnElmtId(h1);
108  }
109  aboutToBeDeleted() {
110    this.__progress.aboutToBeDeleted();
111    this.__textProgress.aboutToBeDeleted();
112    this.__content.aboutToBeDeleted();
113    this.__isLoading.aboutToBeDeleted();
114    this.__enable.aboutToBeDeleted();
115    this.__progressColor.aboutToBeDeleted();
116    this.__containerBorderColor.aboutToBeDeleted();
117    this.__containerBackgroundColor.aboutToBeDeleted();
118    this.__textHeight.aboutToBeDeleted();
119    this.__buttonBorderRadius.aboutToBeDeleted();
120    SubscriberManager.Get().delete(this.id__());
121    this.aboutToBeDeletedInternal();
122  }
123  get progress() {
124    return this.__progress.get();
125  }
126  set progress(g1) {
127    this.__progress.set(g1);
128  }
129  get textProgress() {
130    return this.__textProgress.get();
131  }
132  set textProgress(f1) {
133    this.__textProgress.set(f1);
134  }
135  get content() {
136    return this.__content.get();
137  }
138  set content(e1) {
139    this.__content.set(e1);
140  }
141  get isLoading() {
142    return this.__isLoading.get();
143  }
144  set isLoading(d1) {
145    this.__isLoading.set(d1);
146  }
147  get enable() {
148    return this.__enable.get();
149  }
150  set enable(c1) {
151    this.__enable.set(c1);
152  }
153  get progressColor() {
154    return this.__progressColor.get();
155  }
156  set progressColor(b1) {
157    this.__progressColor.set(b1);
158  }
159  get containerBorderColor() {
160    return this.__containerBorderColor.get();
161  }
162  set containerBorderColor(a1) {
163    this.__containerBorderColor.set(a1);
164  }
165  get containerBackgroundColor() {
166    return this.__containerBackgroundColor.get();
167  }
168  set containerBackgroundColor(z) {
169    this.__containerBackgroundColor.set(z);
170  }
171  get textHeight() {
172    return this.__textHeight.get();
173  }
174  set textHeight(y) {
175    this.__textHeight.set(y);
176  }
177  get buttonBorderRadius() {
178    return this.__buttonBorderRadius.get();
179  }
180  set buttonBorderRadius(x) {
181    this.__buttonBorderRadius.set(x);
182  }
183  onWillApplyTheme(w) {
184    this.progressColor = w.colors.compEmphasizeSecondary;
185    this.containerBorderColor = w.colors.compEmphasizeSecondary;
186    this.containerBackgroundColor = w.colors.iconOnFourth;
187  }
188  getButtonProgress() {
189    if (this.progress < 0) {
190      return 0;
191    }
192    else if (this.progress > MAX_PROGRESS) {
193      return MAX_PROGRESS;
194    }
195    return this.progress;
196  }
197  getProgressContext() {
198    if (this.progress < 0) {
199      this.isLoading = false;
200      this.textProgress = MIN_PERCENTAGE;
201    }
202    else if (this.progress >= MAX_PROGRESS) {
203      this.isLoading = false;
204      this.textProgress = MAX_PERCENTAGE;
205    }
206    else {
207      this.isLoading = true;
208      this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%';
209    }
210  }
211  getLoadingProgress() {
212    if (this.isLoading) {
213      if (this.progress < 0) {
214        this.textProgress = MIN_PERCENTAGE;
215      }
216      else if (this.progress >= MAX_PROGRESS) {
217        this.textProgress = MAX_PERCENTAGE;
218      }
219      else {
220        this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%';
221      }
222    }
223  }
224  initialRender() {
225    this.observeComponentCreation2((t, u) => {
226      Button.createWithChild();
227      Button.borderRadius(this.buttonBorderRadius);
228      Button.clip(false);
229      Button.hoverEffect(HoverEffect.None);
230      Button.key(PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY);
231      Button.backgroundColor(ObservedObject.GetRawObject(this.containerBackgroundColor));
232      Button.constraintSize({ minWidth: 44 });
233      Button.padding({ top: 0, bottom: 0 });
234      Button.width((!this.progressButtonWidth || this.progressButtonWidth < BUTTON_NORMARL_WIDTH) ?
235        BUTTON_NORMARL_WIDTH : this.progressButtonWidth);
236      Button.stateEffect(this.enable);
237      Button.onClick(() => {
238        if (!this.enable) {
239          return;
240        }
241        if (this.progress < MAX_PROGRESS) {
242          this.isLoading = !this.isLoading;
243        }
244        this.clickCallback && this.clickCallback();
245      });
246    }, Button);
247    this.observeComponentCreation2((r, s) => {
248      Stack.create();
249    }, Stack);
250    this.observeComponentCreation2((p, q) => {
251      Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS,
252        style: ProgressStyle.Capsule });
253      Progress.height(ObservedObject.GetRawObject(this.textHeight));
254      Progress.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
255      Progress.borderRadius(this.buttonBorderRadius);
256      Progress.width('100%');
257      Progress.hoverEffect(HoverEffect.None);
258      Progress.clip(false);
259      Progress.enabled(this.enable);
260      Progress.key(PROGRESS_BUTTON_PROGRESS_KEY);
261      Progress.color(ObservedObject.GetRawObject(this.progressColor));
262    }, Progress);
263    this.observeComponentCreation2((n, o) => {
264      Row.create();
265      Row.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
266    }, Row);
267    this.observeComponentCreation2((i, j) => {
268      Text.create(this.isLoading ? this.textProgress : this.content);
269      Text.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'],
270        'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
271      Text.fontWeight(FontWeight.Medium);
272      Text.key(PROGRESS_BUTTON_PRIMARY_FONT_KEY);
273      Text.maxLines(1);
274      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
275      Text.padding({ top: 4, left: 8, right: 8, bottom: 4 });
276      Text.opacity(this.enable ? TEXT_ENABLE : TEXT_OPACITY);
277      Text.onAreaChange((l, m) => {
278        if (!m.height || m.height === this.textHeight) {
279          return;
280        }
281        this.textHeight = m.height > BUTTON_NORMARL_HEIGHT ? m.height : BUTTON_NORMARL_HEIGHT;
282        this.buttonBorderRadius = Number(this.textHeight) / 2;
283      });
284    }, Text);
285    Text.pop();
286    Row.pop();
287    this.observeComponentCreation2((g, h) => {
288      Row.create();
289      Row.key(PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY);
290      Row.backgroundColor(Color.Transparent);
291      Row.border({ width: 1, color: this.containerBorderColor });
292      Row.height(ObservedObject.GetRawObject(this.textHeight));
293      Row.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
294      Row.borderRadius(this.buttonBorderRadius);
295      Row.width('100%');
296    }, Row);
297    Row.pop();
298    Stack.pop();
299    Button.pop();
300  }
301  rerender() {
302    this.updateDirtyElements();
303  }
304}
305
306export default { ProgressButton };