xref: /applications/standard/systemui/common/src/main/ets/template/iconComponent.ets

/*
 * Copyright (c) 2021-2022 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 Log from '../default/Log';
import StyleConfiguration, { IconComponentStyle } from './common/StyleConfiguration'

const TAG = 'iconComponent'

@Component
export default struct iconComponent {
  @State iconOff: string = ""
  @State iconOn: string = ""
  @Prop iconOffStr: string
  @Prop iconOnStr: string
  private useIconStr = false
  @State mIconIsHover: boolean = false
  @Link changeSwitch: boolean
  @State style: IconComponentStyle = StyleConfiguration.getIconComponentStyle()

  aboutToAppear() {
    Log.showInfo(TAG,`aboutToAppear, ${this.changeSwitch} ${JSON.stringify(this.iconOff)} ${JSON.stringify(this.iconOn)} , useIconStr: ${this.useIconStr}`)
  }

  aboutToDisappear() {
    Log.showInfo(TAG, 'aboutToDisappear')
  }

  build() {
    Stack() {
      Flex()
        .backgroundColor(this.changeSwitch ? this.style.iconOnBG : this.style.iconOffBG)
        .clip(new Circle({ width: this.style.circleWidth, height: this.style.circleHeight }))
        .width(this.style.circleWidth)
        .height(this.style.circleHeight)
      Flex()
        .backgroundColor(this.mIconIsHover ? this.style.hoverColor : this.style.transparentColor)
        .clip(new Circle({ width: this.style.circleWidth, height: this.style.circleHeight }))
        .width(this.style.circleWidth)
        .height(this.style.circleHeight)
      Image(this.changeSwitch == false ? (this.useIconStr ? this.iconOffStr : this.iconOff) : (this.useIconStr ? this.iconOnStr : this.iconOn))
        .size({ width: this.style.iconWidth, height: this.style.iconHeight })
        .objectFit(ImageFit.Contain)
        .fillColor(this.changeSwitch ? this.style.iconOnColor : this.style.iconOffColor)
        .onHover((isHover) => {
          this.mIconIsHover = isHover;
        })
    }
    .width(this.style.circleWidth)
    .height(this.style.circleHeight)
  }
}