exceptionprompt/source/exceptionprompt.ets

/*
 * Copyright (c) 2023-2025 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.
 */
import curves from '@ohos.curves';
import { common, EnvironmentCallback } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { LengthMetrics, SymbolGlyphModifier } from '@kit.ArkUI';
import { i18n } from '@kit.LocalizationKit';

const START_TIME = 250;
const END_TIME = 200;
const BORDER_RADIUS = 12;
const ZINDEX_NUM = 9;
const SYMBOL_SIZE: number = 24;
const MAX_SYMBOL_FONT_SCALE: number = 2;
const MIN_SYMBOL_FONT_SCALE: number = 1;
const DEFAULT_SYMBOL_FONT_SCALE: number = 1;

export enum MarginType {
  DEFAULT_MARGIN = 0,
  FIT_MARGIN = 1,
}

export interface PromptOptions {
  icon?: ResourceStr,
  symbolStyle?: SymbolGlyphModifier,
  tip?: ResourceStr,
  marginType: MarginType,
  actionText?: ResourceStr,
  marginTop: Dimension,
  isShown?: boolean
}

@Component
export struct ExceptionPrompt {
  @Prop options: PromptOptions
  @State fontSizeScale: number | undefined = undefined;
  touchBackgroundColor: Resource = $r('sys.color.ohos_id_color_sub_background_transparent')
  maxAppFontScale: number = 1;
  isFollowingSystemFontScale: boolean = false;
  onTipClick?: () => void = undefined;
  onActionTextClick?: () => void = undefined;
  private callbackId: number | undefined = undefined;
  private callbacks: EnvironmentCallback = {
    onConfigurationUpdated: (config) => {
      this.fontSizeScale = Math.min(this.updateFontScale(), MAX_SYMBOL_FONT_SCALE);
      this.fontSizeScale = Math.max(this.fontSizeScale, MIN_SYMBOL_FONT_SCALE);
    }, onMemoryLevel() {
    }
  };

  @Builder
  TextBuilder() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Row() {
        if (this.options?.symbolStyle !== undefined) {
          SymbolGlyph()
            .fontColor([$r('sys.color.ohos_id_color_warning')])
            .attributeModifier(this.options?.symbolStyle)
            .effectStrategy(SymbolEffectStrategy.NONE)
            .symbolEffect(new SymbolEffect(), false)
            .fontSize(`${(this.fontSizeScale ?? DEFAULT_SYMBOL_FONT_SCALE) * SYMBOL_SIZE}vp`)
        } else {
          if (Util.isSymbolResource(this.options?.icon)) {
            SymbolGlyph((this.options?.icon as Resource | undefined) ?? $r('sys.symbol.exclamationmark_circle'))
              .fontColor([$r('sys.color.ohos_id_color_warning')])
              .fontSize(`${(this.fontSizeScale ?? DEFAULT_SYMBOL_FONT_SCALE) * SYMBOL_SIZE}vp`)
          } else {
            Image(this.options?.icon)
              .width('24vp')
              .height('24vp')
              .fillColor($r('sys.color.ohos_id_color_warning'))
          }
        }
        Text(this.options.tip)
          .fontSize($r('sys.float.ohos_id_text_size_body1'))
          .minFontScale(1)
          .maxFontScale(Math.min(this.updateFontScale(), 2))
          .fontColor($r('sys.color.ohos_id_color_warning'))
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(2)
          .margin({ start: LengthMetrics.resource($r('sys.float.ohos_id_dialog_margin_end')) })
          .flexShrink(1)
          .direction(i18n.isRTL(i18n.System.getSystemLanguage()) ? Direction.Rtl : Direction.Ltr)
      }
      .padding({ right: $r('sys.float.ohos_id_default_padding_end') })
      .width('100%')
      .accessibilityDescription(this.onTipClick ? '' : ' ')
      .onClick(() => {
        this.onTipClick && this.onTipClick();
      })

      if (this.options.actionText) {
        Button({ stateEffect: false, type: ButtonType.Normal }) {
          Row() {
            Text(this.options.actionText)
              .fontSize($r('sys.float.ohos_id_text_size_body2'))
              .minFontScale(1)
              .maxFontScale(Math.min(this.updateFontScale(), 2))
              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
              .maxLines(2)
              .padding(0)
              .margin({ end: LengthMetrics.resource($r('sys.float.ohos_id_text_paragraph_margin_s')) })
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .flexShrink(1)
              .textAlign(TextAlign.End)
              .direction(i18n.isRTL(i18n.System.getSystemLanguage()) ? Direction.Rtl : Direction.Ltr)
            SymbolGlyph($r('sys.symbol.chevron_right'))
              .fontSize(`${(this.fontSizeScale ?? DEFAULT_SYMBOL_FONT_SCALE) * SYMBOL_SIZE}vp`)
              .fontColor([$r('sys.color.ohos_id_color_tertiary')])
          }
          .width('100%')
          .justifyContent(FlexAlign.End)
        }
        .backgroundColor(this.touchBackgroundColor)
        .width(this.options.actionText ? 144 : 0)
        .borderRadius($r('sys.float.ohos_id_corner_radius_subtab'))
        .padding({
          right: $r('sys.float.padding_level2'),
        })
        .accessibilityDescription(this.onActionTextClick ? '' : ' ')
        .accessibilityRole(this.onActionTextClick ? AccessibilityRoleType.BUTTON : AccessibilityRoleType.ROLE_NONE)
        .onClick(() => {
          this.onActionTextClick && this.onActionTextClick();
        })
      }
    }
    .padding({
      left: $r('sys.float.ohos_id_notification_margin_start'),
      right: $r('sys.float.ohos_id_text_paragraph_margin_s'),
      top: $r('sys.float.ohos_id_default_padding_start'),
      bottom: $r('sys.float.ohos_id_default_padding_end')
    })
  }

  build() {
    Row() {
      Column() {
        Column() {
          this.TextBuilder()
        }
        .width('100%')
        .borderRadius(BORDER_RADIUS)
        .backgroundColor($r('sys.color.comp_background_warning_secondary'))
        .zIndex(ZINDEX_NUM)
      }
      .padding(this.options.marginType === MarginType.DEFAULT_MARGIN ? {
        left: $r('sys.float.ohos_id_card_margin_start'),
        right: $r('sys.float.ohos_id_card_margin_end')
      } : {
        left: $r('sys.float.ohos_id_max_padding_start'),
        right: $r('sys.float.ohos_id_max_padding_end')
      })
      .transition(
        TransitionEffect.OPACITY.animation({
          curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1),
          duration: this.options.isShown ? START_TIME : END_TIME
        })
      )
      .visibility(this.options.isShown ? Visibility.Visible : Visibility.None)
    }
    .width('100%')
    .position({ y: this.options.marginTop })
    .zIndex(ZINDEX_NUM)
  }

  aboutToAppear() {
    try {
      let uiContent: UIContext = this.getUIContext();
      this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale();
      this.maxAppFontScale = uiContent.getMaxFontScale();
      this.fontSizeScale = Math.min(this.updateFontScale(), MAX_SYMBOL_FONT_SCALE);
      this.fontSizeScale = Math.max(this.fontSizeScale, MIN_SYMBOL_FONT_SCALE);
      this.callbackId = uiContent.getHostContext()?.getApplicationContext()?.on('environment', this.callbacks);
    } catch (err) {
      let code: number = (err as BusinessError).code;
      let message: string = (err as BusinessError).message;
      hilog.error(0x3900, 'Ace', `Failed to init fontsizescale info, cause, code: ${code}, message: ${message}`);
    }
  }

  aboutToDisappear(): void {
    if (this.callbackId) {
      this.getUIContext().getHostContext()?.getApplicationContext()?.off('environment', this.callbackId);
      this.callbackId = void (0);
    }
  }

  updateFontScale(): number {
    let uiContent: UIContext = this.getUIContext();
    let systemFontScale: number = (uiContent.getHostContext() as common.UIAbilityContext)?.config?.fontSizeScale ?? 1;
    if (!this.isFollowingSystemFontScale) {
      return 1;
    }
    return Math.min(systemFontScale, this.maxAppFontScale);
  }
}

class Util {
  private static RESOURCE_TYPE_SYMBOL = 40000;

  public static isSymbolResource(resourceStr: ResourceStr | undefined): boolean {
    if (resourceStr === undefined) {
      return true;
    }
    if (!Util.isResourceType(resourceStr)) {
      return false;
    }
    let resource = resourceStr as Resource;
    return resource.type === Util.RESOURCE_TYPE_SYMBOL;
  }

  public static isResourceType(resource: ResourceStr): boolean {
    if (!resource) {
      return false;
    }
    return typeof resource !== 'string';
  }
}