xref: /foundation/arkui/ace_engine/advanced_ui_component/progressbutton/interfaces/progressbutton.js

/*
 * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

if (!("finalizeConstruction" in ViewPU.prototype)) {
  Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
}
const EMPTY_STRING = '';
const MAX_PROGRESS = 100;
const MAX_PERCENTAGE = '100%';
const MIN_PERCENTAGE = '0%';
const TEXT_OPACITY = 0.4;
const BUTTON_NORMARL_WIDTH = 44;
const BUTTON_NORMARL_HEIGHT = 28;
const BUTTON_BORDER_RADIUS = 14;
const TEXT_ENABLE = 1.0;
const PROGRESS_BUTTON_PROGRESS_KEY = 'progress_button_progress_key';
const PROGRESS_BUTTON_PRIMARY_FONT_KEY = 'progress_button_primary_font_key';
const PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY = 'progress_button_container_background_color_key';
const PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY = 'progress_button_emphasize_secondary_button_key';
export class ProgressButton extends ViewPU {
  constructor(k1, l1, m1, n1 = -1, o1 = undefined, p1) {
    super(k1, m1, n1, p1);
    if (typeof o1 === "function") {
      this.paramsGenerator_ = o1;
    }
    this.__progress = new SynchedPropertySimpleOneWayPU(l1.progress, this, "progress");
    this.__textProgress = new ObservedPropertySimplePU(EMPTY_STRING, this, "textProgress");
    this.__content = new SynchedPropertySimpleOneWayPU(l1.content, this, "content");
    this.__isLoading = new ObservedPropertySimplePU(false, this, "isLoading");
    this.progressButtonWidth = BUTTON_NORMARL_WIDTH;
    this.clickCallback = () => { };
    this.__enable = new SynchedPropertySimpleOneWayPU(l1.enable, this, "enable");
    this.__progressColor = new ObservedPropertyObjectPU('#330A59F7', this, "progressColor");
    this.__containerBorderColor = new ObservedPropertyObjectPU('#330A59F7', this, "containerBorderColor");
    this.__containerBackgroundColor = new ObservedPropertyObjectPU({ "id": -1, "type": 10001,
      params: ['sys.color.ohos_id_color_foreground_contrary'],
      "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, this, "containerBackgroundColor");
    this.__textHeight = new ObservedPropertyObjectPU(BUTTON_NORMARL_HEIGHT, this, "textHeight");
    this.__buttonBorderRadius = new ObservedPropertySimplePU(BUTTON_BORDER_RADIUS, this, "buttonBorderRadius");
    this.setInitiallyProvidedValue(l1);
    this.declareWatch("progress", this.getProgressContext);
    this.declareWatch("isLoading", this.getLoadingProgress);
    this.finalizeConstruction();
  }
  setInitiallyProvidedValue(j1) {
    if (j1.textProgress !== undefined) {
      this.textProgress = j1.textProgress;
    }
    if (j1.content === undefined) {
      this.__content.set(EMPTY_STRING);
    }
    if (j1.isLoading !== undefined) {
      this.isLoading = j1.isLoading;
    }
    if (j1.progressButtonWidth !== undefined) {
      this.progressButtonWidth = j1.progressButtonWidth;
    }
    if (j1.clickCallback !== undefined) {
      this.clickCallback = j1.clickCallback;
    }
    if (j1.enable === undefined) {
      this.__enable.set(true);
    }
    if (j1.progressColor !== undefined) {
      this.progressColor = j1.progressColor;
    }
    if (j1.containerBorderColor !== undefined) {
      this.containerBorderColor = j1.containerBorderColor;
    }
    if (j1.containerBackgroundColor !== undefined) {
      this.containerBackgroundColor = j1.containerBackgroundColor;
    }
    if (j1.textHeight !== undefined) {
      this.textHeight = j1.textHeight;
    }
    if (j1.buttonBorderRadius !== undefined) {
      this.buttonBorderRadius = j1.buttonBorderRadius;
    }
  }
  updateStateVars(i1) {
    this.__progress.reset(i1.progress);
    this.__content.reset(i1.content);
    this.__enable.reset(i1.enable);
  }
  purgeVariableDependenciesOnElmtId(h1) {
    this.__progress.purgeDependencyOnElmtId(h1);
    this.__textProgress.purgeDependencyOnElmtId(h1);
    this.__content.purgeDependencyOnElmtId(h1);
    this.__isLoading.purgeDependencyOnElmtId(h1);
    this.__enable.purgeDependencyOnElmtId(h1);
    this.__progressColor.purgeDependencyOnElmtId(h1);
    this.__containerBorderColor.purgeDependencyOnElmtId(h1);
    this.__containerBackgroundColor.purgeDependencyOnElmtId(h1);
    this.__textHeight.purgeDependencyOnElmtId(h1);
    this.__buttonBorderRadius.purgeDependencyOnElmtId(h1);
  }
  aboutToBeDeleted() {
    this.__progress.aboutToBeDeleted();
    this.__textProgress.aboutToBeDeleted();
    this.__content.aboutToBeDeleted();
    this.__isLoading.aboutToBeDeleted();
    this.__enable.aboutToBeDeleted();
    this.__progressColor.aboutToBeDeleted();
    this.__containerBorderColor.aboutToBeDeleted();
    this.__containerBackgroundColor.aboutToBeDeleted();
    this.__textHeight.aboutToBeDeleted();
    this.__buttonBorderRadius.aboutToBeDeleted();
    SubscriberManager.Get().delete(this.id__());
    this.aboutToBeDeletedInternal();
  }
  get progress() {
    return this.__progress.get();
  }
  set progress(g1) {
    this.__progress.set(g1);
  }
  get textProgress() {
    return this.__textProgress.get();
  }
  set textProgress(f1) {
    this.__textProgress.set(f1);
  }
  get content() {
    return this.__content.get();
  }
  set content(e1) {
    this.__content.set(e1);
  }
  get isLoading() {
    return this.__isLoading.get();
  }
  set isLoading(d1) {
    this.__isLoading.set(d1);
  }
  get enable() {
    return this.__enable.get();
  }
  set enable(c1) {
    this.__enable.set(c1);
  }
  get progressColor() {
    return this.__progressColor.get();
  }
  set progressColor(b1) {
    this.__progressColor.set(b1);
  }
  get containerBorderColor() {
    return this.__containerBorderColor.get();
  }
  set containerBorderColor(a1) {
    this.__containerBorderColor.set(a1);
  }
  get containerBackgroundColor() {
    return this.__containerBackgroundColor.get();
  }
  set containerBackgroundColor(z) {
    this.__containerBackgroundColor.set(z);
  }
  get textHeight() {
    return this.__textHeight.get();
  }
  set textHeight(y) {
    this.__textHeight.set(y);
  }
  get buttonBorderRadius() {
    return this.__buttonBorderRadius.get();
  }
  set buttonBorderRadius(x) {
    this.__buttonBorderRadius.set(x);
  }
  onWillApplyTheme(w) {
    this.progressColor = w.colors.compEmphasizeSecondary;
    this.containerBorderColor = w.colors.compEmphasizeSecondary;
    this.containerBackgroundColor = w.colors.iconOnFourth;
  }
  getButtonProgress() {
    if (this.progress < 0) {
      return 0;
    }
    else if (this.progress > MAX_PROGRESS) {
      return MAX_PROGRESS;
    }
    return this.progress;
  }
  getProgressContext() {
    if (this.progress < 0) {
      this.isLoading = false;
      this.textProgress = MIN_PERCENTAGE;
    }
    else if (this.progress >= MAX_PROGRESS) {
      this.isLoading = false;
      this.textProgress = MAX_PERCENTAGE;
    }
    else {
      this.isLoading = true;
      this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%';
    }
  }
  getLoadingProgress() {
    if (this.isLoading) {
      if (this.progress < 0) {
        this.textProgress = MIN_PERCENTAGE;
      }
      else if (this.progress >= MAX_PROGRESS) {
        this.textProgress = MAX_PERCENTAGE;
      }
      else {
        this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%';
      }
    }
  }
  initialRender() {
    this.observeComponentCreation2((t, u) => {
      Button.createWithChild();
      Button.borderRadius(this.buttonBorderRadius);
      Button.clip(false);
      Button.hoverEffect(HoverEffect.None);
      Button.key(PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY);
      Button.backgroundColor(ObservedObject.GetRawObject(this.containerBackgroundColor));
      Button.constraintSize({ minWidth: 44 });
      Button.padding({ top: 0, bottom: 0 });
      Button.width((!this.progressButtonWidth || this.progressButtonWidth < BUTTON_NORMARL_WIDTH) ?
        BUTTON_NORMARL_WIDTH : this.progressButtonWidth);
      Button.stateEffect(this.enable);
      Button.onClick(() => {
        if (!this.enable) {
          return;
        }
        if (this.progress < MAX_PROGRESS) {
          this.isLoading = !this.isLoading;
        }
        this.clickCallback && this.clickCallback();
      });
    }, Button);
    this.observeComponentCreation2((r, s) => {
      Stack.create();
    }, Stack);
    this.observeComponentCreation2((p, q) => {
      Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS,
        style: ProgressStyle.Capsule });
      Progress.height(ObservedObject.GetRawObject(this.textHeight));
      Progress.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
      Progress.borderRadius(this.buttonBorderRadius);
      Progress.width('100%');
      Progress.hoverEffect(HoverEffect.None);
      Progress.clip(false);
      Progress.enabled(this.enable);
      Progress.key(PROGRESS_BUTTON_PROGRESS_KEY);
      Progress.color(ObservedObject.GetRawObject(this.progressColor));
    }, Progress);
    this.observeComponentCreation2((n, o) => {
      Row.create();
      Row.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
    }, Row);
    this.observeComponentCreation2((i, j) => {
      Text.create(this.isLoading ? this.textProgress : this.content);
      Text.fontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'],
        "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" });
      Text.fontWeight(FontWeight.Medium);
      Text.key(PROGRESS_BUTTON_PRIMARY_FONT_KEY);
      Text.maxLines(1);
      Text.textOverflow({ overflow: TextOverflow.Ellipsis });
      Text.padding({ top: 4, left: 8, right: 8, bottom: 4 });
      Text.opacity(this.enable ? TEXT_ENABLE : TEXT_OPACITY);
      Text.onAreaChange((l, m) => {
        if (!m.height || m.height === this.textHeight) {
          return;
        }
        this.textHeight = m.height > BUTTON_NORMARL_HEIGHT ? m.height : BUTTON_NORMARL_HEIGHT;
        this.buttonBorderRadius = Number(this.textHeight) / 2;
      });
    }, Text);
    Text.pop();
    Row.pop();
    this.observeComponentCreation2((g, h) => {
      Row.create();
      Row.key(PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY);
      Row.backgroundColor(Color.Transparent);
      Row.border({ width: 1, color: this.containerBorderColor });
      Row.height(ObservedObject.GetRawObject(this.textHeight));
      Row.constraintSize({ minHeight: BUTTON_NORMARL_HEIGHT });
      Row.borderRadius(this.buttonBorderRadius);
      Row.width('100%');
    }, Row);
    Row.pop();
    Stack.pop();
    Button.pop();
  }
  rerender() {
    this.updateDirtyElements();
  }
}

export default { ProgressButton };