1/*
2 * Copyright (c) 2023 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
16@Component
17export struct MouseTurnPageButton {
18  @State iconColor: Resource = $r('app.color.ohos_id_color_white_icon')
19  @State buttonBackgroundColor: Resource = $r('app.color.ohos_id_color_whiteIcon_blackPlane')
20  @State isButtonHover: boolean = false
21  @Consume @Watch('handleIconColor') isDefaultBackgroundColor: boolean
22  private isStart: boolean = false;
23  private imageResource: Resource | null = null;
24
25  aboutToAppear() {
26    this.imageResource = this.isStart ? $r('app.media.ic_public_arrow_left_swiper')
27                                      : $r('app.media.ic_public_arrow_right_swiper')
28    this.handleIconColor()
29  }
30
31  public handleIconColor(): void {
32    if (this.isDefaultBackgroundColor) {
33      this.iconColor = $r('app.color.ohos_id_color_white_icon')
34      this.buttonBackgroundColor = this.isButtonHover ? $r('app.color.ohos_id_color_whiteIcon_blackPlane_hover')
35                                                      : $r('app.color.ohos_id_color_whiteIcon_blackPlane')
36    } else {
37      this.iconColor = $r('app.color.ohos_id_color_black_icon')
38      this.buttonBackgroundColor = this.isButtonHover ? $r('app.color.ohos_id_color_blackIcon_whitePlane_hover')
39                                                      : $r('app.color.ohos_id_color_blackIcon_whitePlane')
40    }
41  }
42
43  build() {
44    Button({ type: ButtonType.Capsule }) {
45      Image(this.imageResource)
46        .fillColor(this.iconColor)
47        .width($r('app.float.mouse_turn_page_button_image_width'))
48        .height($r('app.float.mouse_turn_page_button_image_height'))
49        .focusable(true)
50    }
51    .backgroundColor(this.buttonBackgroundColor)
52    .width($r('app.float.mouse_turn_page_button_size'))
53    .height($r('app.float.mouse_turn_page_button_size'))
54    .focusable(true)
55    .responseRegion({
56      x: $r('app.float.mouse_turn_page_button_response_offset'),
57      y: $r('app.float.mouse_turn_page_button_response_offset'),
58      width: $r('app.float.mouse_turn_page_button_response_size'),
59      height: $r('app.float.mouse_turn_page_button_response_size')
60    })
61    .onHover((isHover?: boolean) => {
62      if (isHover != null) {
63        this.isButtonHover = isHover
64      }
65      this.handleIconColor()
66    })
67  }
68}