1/*
2 * Copyright (c) 2021-2022 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
16import Log from '../default/Log'
17import StyleConfiguration, { SimpleToggleBaseStyle } from './common/StyleConfiguration'
18
19const TAG = 'SimpleToggleBase'
20
21@Component
22export default struct SimpleToggleBase {
23  private mToggleId: string
24  @Link mIcon: Resource
25  @State mIconStr: string = ''
26  private mUseIconStr: boolean = false
27  private mAutoIconColor: boolean = false
28  @Link mChangeSwitch: boolean
29  @Link mLabel: Resource
30  private mLabelStr: string | Resource
31  private mUseLabelStr: boolean = false
32  private mIconOnBG: string | Resource
33  private mEditMode: boolean = false
34  private mDragMode: boolean = false
35  private mClickEvent: Function
36  private mLongClickEvent: Function
37  @State mIconIsHover: boolean = false
38  @State mTextIsHover: boolean = false
39  @State style: SimpleToggleBaseStyle = StyleConfiguration.getSimpleToggleBaseStyle()
40
41  aboutToAppear() {
42    Log.showInfo(TAG, `aboutToAppear, mToggleId: ${this.mToggleId}, mLabel: ${JSON.stringify(this.mLabel)}, mEditMode: ${this.mEditMode} mDragMode: ${this.mDragMode} `)
43  }
44
45  aboutToDisappear() {
46    Log.showInfo(TAG, 'aboutToDisappear')
47  }
48
49  build() {
50    Column() {
51      Stack() {
52        Flex()
53          .backgroundColor(this.mChangeSwitch ? (this.mIconOnBG ? this.mIconOnBG : this.style.iconOnBG) : this.style.iconOffBG)
54          .clip(new Circle({
55            width: this.mDragMode ? this.style.dragCircleWidth : this.style.circleWidth,
56            height: this.mDragMode ? this.style.dragCircleHeight : this.style.circleHeight
57          }))
58          .width(this.mDragMode ? this.style.dragCircleWidth : this.style.circleWidth)
59          .height(this.mDragMode ? this.style.dragCircleHeight : this.style.circleHeight)
60        if (!this.mDragMode) {
61          Flex()
62            .backgroundColor(this.mIconIsHover ? this.style.hoverColor : this.style.transparentColor)
63            .clip(new Circle({ width: this.style.circleWidth, height: this.style.circleHeight }))
64            .width(this.style.circleWidth)
65            .height(this.style.circleHeight)
66        }
67        Image(this.mUseIconStr ? this.mIconStr : this.mIcon)
68          .size({
69            width: this.mDragMode ? this.style.dragIconWidth : this.style.iconWidth,
70            height: this.mDragMode ? this.style.dragIconHeight : this.style.iconHeight })
71          .objectFit(ImageFit.Contain)
72          .fillColor(this.mChangeSwitch ? this.style.iconOnColor : this.style.iconOffColor)
73          .onHover((isHover) => {
74            this.mIconIsHover = isHover;
75          })
76      }
77      .width(this.mDragMode ? this.style.dragCircleWidth : this.style.circleWidth)
78      .height(this.mDragMode ? this.style.dragCircleHeight : this.style.circleHeight)
79      .onClick(this.onIconItemClick.bind(this))
80
81      if (!this.mDragMode) {
82        Stack() {
83          Flex()
84            .backgroundColor(this.mTextIsHover ? this.style.hoverColor : this.style.transparentColor)
85            .clip(new Rect({
86              width: this.style.textHoverWidth,
87              height: this.style.textHoverHeight
88            }).radius(this.style.textHoverRadius))
89            .width(this.style.textHoverWidth)
90            .height(this.style.textHoverHeight)
91          Text(this.mUseLabelStr ? this.mLabelStr : this.mLabel)
92            .fontSize(this.style.titleSize)
93            .fontColor(this.style.titleColor)
94            .textAlign(TextAlign.Center)
95            .maxLines(2)
96            .onHover((isHover) => {
97              this.mTextIsHover = isHover;
98            })
99        }.margin({top: this.style.componentGap})
100      }
101    }
102    .width('100%')
103    .height('100%')
104  }
105
106  onIconItemClick(event: ClickEvent) {
107    if (this.mDragMode) {
108      return
109    }
110    Log.showDebug(TAG, `onIconItemClick`)
111    if (this.mClickEvent) {
112      this.mClickEvent()
113    }
114  }
115
116  onIconItemLongPressGesture(event: GestureEvent) {
117    if (this.mEditMode || this.mDragMode) {
118      return
119    }
120    Log.showDebug(TAG, `onIconItemLongPressGesture, event: ${JSON.stringify(event)}`)
121    if (this.mLongClickEvent) {
122      this.mLongClickEvent()
123    }
124  }
125}
126