• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 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
16var __decorate = (this && this.__decorate) || function (k1, l1, m1, n1) {
17  var o1 = arguments.length, p1 = o1 < 3 ? l1 : n1 === null ? n1 = Object.getOwnPropertyDescriptor(l1, m1) : n1, q1;
18  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
19    p1 = Reflect.decorate(k1, l1, m1, n1);
20  else
21    for (var r1 = k1.length - 1; r1 >= 0; r1--)
22      if (q1 = k1[r1])
23        p1 = (o1 < 3 ? q1(p1) : o1 > 3 ? q1(l1, m1, p1) : q1(l1, m1)) || p1;
24  return o1 > 3 && p1 && Object.defineProperty(l1, m1, p1), p1;
25};
26if (!("finalizeConstruction" in ViewPU.prototype)) {
27  Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
28}
29const arkuiNode = requireNapi('arkui.node');
30const LengthMetrics = arkuiNode.LengthMetrics;
31const LengthUnit = arkuiNode.LengthUnit;
32const EMPTY_STRING = '';
33const MAX_PROGRESS = 100;
34const MAX_PERCENTAGE = '100%';
35const MIN_PERCENTAGE = '0%';
36const TEXT_OPACITY = 0.4;
37const BUTTON_NORMARL_WIDTH = 44;
38const BUTTON_NORMARL_HEIGHT = 28;
39const BUTTON_BORDER_RADIUS = 14;
40const TEXT_ENABLE = 1.0;
41const PROGRESS_BUTTON_PROGRESS_KEY = 'progress_button_progress_key';
42const PROGRESS_BUTTON_PRIMARY_FONT_KEY = 'progress_button_primary_font_key';
43const PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY = 'progress_button_container_background_color_key';
44const PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY = 'progress_button_emphasize_secondary_button_key';
45export class ProgressButtonV2 extends ViewV2 {
46  constructor(c1, d1, e1, f1 = -1, g1, h1) {
47    super(c1, f1, h1);
48    this.initParam("progress", (d1 && "progress" in d1) ? d1.progress : undefined);
49    this.initParam("content", (d1 && "content" in d1) ? d1.content : EMPTY_STRING);
50    this.initParam("progressButtonWidth", (d1 && "progressButtonWidth" in d1) ? d1.progressButtonWidth : LengthMetrics.vp(BUTTON_NORMARL_WIDTH));
51    this.initParam("onClicked", (d1 && "onClicked" in d1) ? d1.onClicked : () => {
52    });
53    this.initParam("isEnabled", (d1 && "isEnabled" in d1) ? d1.isEnabled : true);
54    this.initParam("colorOptions", (d1 && "colorOptions" in d1) ? d1.colorOptions : undefined);
55    this.initParam("progressButtonRadius", (d1 && "progressButtonRadius" in d1) ? d1.progressButtonRadius : undefined);
56    this.textProgress = EMPTY_STRING;
57    this.isLoading = false;
58    this.progressColor = '#330A59F7';
59    this.containerBorderColor = '#330A59F7';
60    this.containerBackgroundColor = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_foreground_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" };
61    this.textHeight = BUTTON_NORMARL_HEIGHT;
62    this.buttonBorderRadius = BUTTON_BORDER_RADIUS;
63    this.finalizeConstruction();
64  }
65  onWillApplyTheme(b1) {
66    this.progressColor = b1.colors.compEmphasizeSecondary;
67    this.containerBorderColor = b1.colors.compEmphasizeSecondary;
68    this.containerBackgroundColor = b1.colors.iconOnFourth;
69  }
70  getButtonProgress() {
71    if (this.progress < 0) {
72      return 0;
73    }
74    else if (this.progress > MAX_PROGRESS) {
75      return MAX_PROGRESS;
76    }
77    return this.progress;
78  }
79  getProgressContext() {
80    if (this.progress < 0) {
81      this.isLoading = false;
82      this.textProgress = MIN_PERCENTAGE;
83    }
84    else if (this.progress >= MAX_PROGRESS) {
85      this.isLoading = false;
86      this.textProgress = MAX_PERCENTAGE;
87    }
88    else {
89      this.isLoading = true;
90      this.textProgress = `${Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS)}%`;
91    }
92  }
93  getLoadingProgress() {
94    if (this.isLoading) {
95      if (this.progress < 0) {
96        this.textProgress = MIN_PERCENTAGE;
97      }
98      else if (this.progress >= MAX_PROGRESS) {
99        this.textProgress = MAX_PERCENTAGE;
100      }
101      else {
102        this.textProgress = `${Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS)}%`;
103      }
104    }
105  }
106  getProgressButtonRadius() {
107    if (!this.progressButtonRadius || this.progressButtonRadius.unit === LengthUnit.PERCENT) {
108      return LengthMetrics.vp(this.buttonBorderRadius);
109    }
110    else if (this.progressButtonRadius.value < 0) {
111      return LengthMetrics.vp(0);
112    }
113    else {
114      return this.progressButtonRadius;
115    }
116  }
117  initialRender() {
118    this.observeComponentCreation2((y, z) => {
119      Button.createWithChild();
120      Button.borderRadius(this.progressButtonRadius ? this.toLengthString(this.getProgressButtonRadius()) :
121        this.buttonBorderRadius);
122      Button.clip(false);
123      Button.hoverEffect(HoverEffect.None);
124      Button.key(PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY);
125      Button.backgroundColor(this.colorOptions?.backgroundColor?.color
126        ? this.colorOptions?.backgroundColor?.color
127        : this.containerBackgroundColor);
128      Button.padding({ top: 0, bottom: 0 });
129      Button.width((!this.progressButtonWidth || this.progressButtonWidth.value < 0)
130        ? BUTTON_NORMARL_WIDTH : this.toLengthString(this.progressButtonWidth));
131      Button.constraintSize({ minWidth: BUTTON_NORMARL_WIDTH });
132      Button.stateEffect(this.isEnabled);
133      Button.onClick(() => {
134        if (!this.isEnabled) {
135          return;
136        }
137        if (this.progress < MAX_PROGRESS) {
138          this.isLoading = !this.isLoading;
139        }
140        this.onClicked?.();
141      });
142    }, Button);
143    this.observeComponentCreation2((w, x) => {
144      Stack.create();
145    }, Stack);
146    this.observeComponentCreation2((u, v) => {
147      Progress.create({
148        value: this.getButtonProgress(), total: MAX_PROGRESS,
149        style: ProgressStyle.Capsule
150      });
151      Progress.height(this.textHeight);
152      Progress.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
153      Progress.borderRadius(this.buttonBorderRadius);
154      Progress.width('100%');
155      Progress.hoverEffect(HoverEffect.None);
156      Progress.style({
157        borderColor: this.colorOptions?.borderColor?.color ?
158          this.colorOptions?.borderColor?.color : this.containerBorderColor,
159        borderRadius: this.getProgressButtonRadius()
160      });
161      Progress.clip(false);
162      Progress.enabled(this.isEnabled);
163      Progress.key(PROGRESS_BUTTON_PROGRESS_KEY);
164      Progress.color(this.colorOptions?.progressColor?.color ? this.colorOptions?.progressColor?.color : this.progressColor);
165    }, Progress);
166    this.observeComponentCreation2((s, t) => {
167      Row.create();
168      Row.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
169    }, Row);
170    this.observeComponentCreation2((n, o) => {
171      Text.create(this.isLoading ? this.textProgress : this.content);
172      Text.fontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" });
173      Text.fontWeight(FontWeight.Medium);
174      Text.key(PROGRESS_BUTTON_PRIMARY_FONT_KEY);
175      Text.fontColor(this.colorOptions?.textColor?.color);
176      Text.maxLines(1);
177      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
178      Text.padding({
179        top: 4,
180        left: 8,
181        right: 8,
182        bottom: 4
183      });
184      Text.opacity(this.isEnabled ? TEXT_ENABLE : TEXT_OPACITY);
185      Text.onSizeChange((q, r) => {
186        if (!r.height || r.height === this.textHeight) {
187          return;
188        }
189        this.textHeight = r.height > BUTTON_NORMARL_HEIGHT ? r.height : BUTTON_NORMARL_HEIGHT;
190        this.buttonBorderRadius = Number(this.textHeight) / 2;
191      });
192    }, Text);
193    Text.pop();
194    Row.pop();
195    this.observeComponentCreation2((l, m) => {
196      Row.create();
197      Row.key(PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY);
198      Row.backgroundColor(Color.Transparent);
199      Row.border({
200        width: 1,
201        color: this.colorOptions?.borderColor?.color ?
202          this.colorOptions?.borderColor?.color : this.containerBorderColor
203      });
204      Row.height(this.textHeight);
205      Row.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
206      Row.borderRadius(this.progressButtonRadius ? this.toLengthString(this.getProgressButtonRadius()) :
207        this.buttonBorderRadius);
208      Row.width('100%');
209    }, Row);
210    Row.pop();
211    Stack.pop();
212    Button.pop();
213  }
214  toLengthString(c) {
215    if (c === void (0)) {
216      return '';
217    }
218    const d = c.value;
219    switch (c.unit) {
220      case LengthUnit.PX:
221        return `${d}px`;
222      case LengthUnit.FP:
223        return `${d}fp`;
224      case LengthUnit.LPX:
225        return `${d}lpx`;
226      case LengthUnit.PERCENT:
227        return `${d * 100}%`;
228      case LengthUnit.VP:
229        return `${d}vp`;
230      default:
231        return `${d}vp`;
232    }
233  }
234  updateStateVars(b) {
235    if (b === undefined) {
236      return;
237    }
238    if ("progress" in b) {
239      this.updateParam("progress", b.progress);
240    }
241    if ("content" in b) {
242      this.updateParam("content", b.content);
243    }
244    if ("progressButtonWidth" in b) {
245      this.updateParam("progressButtonWidth", b.progressButtonWidth);
246    }
247    if ("onClicked" in b) {
248      this.updateParam("onClicked", b.onClicked);
249    }
250    if ("isEnabled" in b) {
251      this.updateParam("isEnabled", b.isEnabled);
252    }
253    if ("colorOptions" in b) {
254      this.updateParam("colorOptions", b.colorOptions);
255    }
256    if ("progressButtonRadius" in b) {
257      this.updateParam("progressButtonRadius", b.progressButtonRadius);
258    }
259  }
260  rerender() {
261    this.updateDirtyElements();
262  }
263}
264__decorate([
265  Param
266], ProgressButtonV2.prototype, "progress", void 0);
267__decorate([
268  Param
269], ProgressButtonV2.prototype, "content", void 0);
270__decorate([
271  Param,
272  Once
273], ProgressButtonV2.prototype, "progressButtonWidth", void 0);
274__decorate([
275  Param
276], ProgressButtonV2.prototype, "onClicked", void 0);
277__decorate([
278  Param
279], ProgressButtonV2.prototype, "isEnabled", void 0);
280__decorate([
281  Param
282], ProgressButtonV2.prototype, "colorOptions", void 0);
283__decorate([
284    Param
285], ProgressButtonV2.prototype, "progressButtonRadius", void 0);
286__decorate([
287  Local
288], ProgressButtonV2.prototype, "textProgress", void 0);
289__decorate([
290  Local
291], ProgressButtonV2.prototype, "isLoading", void 0);
292__decorate([
293  Local
294], ProgressButtonV2.prototype, "progressColor", void 0);
295__decorate([
296  Local
297], ProgressButtonV2.prototype, "containerBorderColor", void 0);
298__decorate([
299  Local
300], ProgressButtonV2.prototype, "containerBackgroundColor", void 0);
301__decorate([
302  Local
303], ProgressButtonV2.prototype, "textHeight", void 0);
304__decorate([
305  Local
306], ProgressButtonV2.prototype, "buttonBorderRadius", void 0);
307__decorate([
308  Monitor('progress')
309], ProgressButtonV2.prototype, "getProgressContext", null);
310__decorate([
311  Monitor('isLoading')
312], ProgressButtonV2.prototype, "getLoadingProgress", null);
313let ProgressButtonV2Color = class ProgressButtonV2Color {
314  constructor(a) {
315    this.progressColor = a.progressColor;
316    this.borderColor = a.borderColor;
317    this.textColor = a.textColor;
318    this.backgroundColor = a.backgroundColor;
319  }
320};
321__decorate([
322  Trace
323], ProgressButtonV2Color.prototype, "progressColor", void 0);
324__decorate([
325  Trace
326], ProgressButtonV2Color.prototype, "borderColor", void 0);
327__decorate([
328  Trace
329], ProgressButtonV2Color.prototype, "textColor", void 0);
330__decorate([
331  Trace
332], ProgressButtonV2Color.prototype, "backgroundColor", void 0);
333ProgressButtonV2Color = __decorate([
334  ObservedV2
335], ProgressButtonV2Color);
336
337export default { ProgressButtonV2,ProgressButtonV2Color };