1/*
2 * Copyright (c) 2022-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
16import { Action } from '../browserOperation/Action';
17import { ActionBarColorMode } from '../browserOperation/ActionBarMode';
18import { ColumnSize, ScreenManager } from '../../model/common/ScreenManager';
19import { Constants } from '../../model/common/Constants';
20
21@Component
22export struct ActionBarButton {
23  @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal();
24  @State res: Resource | undefined = undefined;
25  action: Action = Action.NONE;
26  onMenuClicked: Function = (): void => {};
27  isLeft = true;
28  isFirst = false;
29  isAutoTint = true;
30  colorMode: ActionBarColorMode = ActionBarColorMode.NORMAL;
31  @State showPopup: boolean = false;
32  @Consume moreMenuList: Action[];
33  @Consume @Watch('isNeedHidePopup') hidePopup: boolean;
34  private isPadDeviceType: boolean = false;
35
36  aboutToAppear(): void {
37    this.isPadDeviceType = AppStorage.get<string>('deviceType') !== Constants.DEFAULT_DEVICE_TYPE;
38  }
39
40  isNeedHidePopup(): void {
41    if (this.hidePopup) {
42      this.showPopup = false;
43    }
44  }
45
46  @Builder
47  PopupBuilder() {
48    Column() {
49      ForEach(this.moreMenuList, (menu: Action, index?: number) => {
50        Text(menu.textRes)
51          .width('100%')
52          .height($r('app.float.menu_height'))
53          .fontColor(menu.fillColor)
54          .fontSize($r('sys.float.ohos_id_text_size_body1'))
55          .onClick(() => {
56            this.onMenuClicked && this.onMenuClicked(menu);
57          })
58          .key('ActionBarButton_Text_' + menu.componentKey)
59        if (this.moreMenuList.indexOf(menu) != this.moreMenuList.length - 1) {
60          Divider()
61            .width('100%')
62            .strokeWidth(Constants.MENU_DIVIDER_STROKE_WIDTH)
63            .color($r('sys.color.ohos_id_color_list_separator'))
64            .key('ActionBarButton_Divider_' + menu.componentKey)
65        }
66      }, (menu: Action) => menu.actionID.toString())
67    }
68    .width(ScreenManager.getInstance().getColumnsWidth(ColumnSize.COLUMN_TWO))
69    .borderRadius($r('sys.float.ohos_id_corner_radius_default_l'))
70    .padding({
71      top: $r('app.float.menu_padding_vertical'),
72      bottom: $r('app.float.menu_padding_vertical'),
73      left: $r('app.float.menu_padding_horizontal'),
74      right: $r('app.float.menu_padding_horizontal')
75    })
76    .backgroundColor(Color.White)
77    .margin({
78      right: this.isHorizontal ? $r('sys.float.ohos_id_max_padding_end') : $r('app.float.menu_margin_right'),
79      bottom: this.isHorizontal ? 0 : $r('app.float.menu_margin_bottom')
80    })
81  }
82
83  @Builder
84  ActionBarButtonBuilder() {
85    Flex({
86      direction: FlexDirection.Column,
87      justifyContent: FlexAlign.Center,
88      alignItems: ItemAlign.Center
89    }) {
90      if (this.isAutoTint) {
91        Image(this.res)
92          .height($r('app.float.icon_size'))
93          .width($r('app.float.icon_size'))
94          .fillColor(this.colorMode == ActionBarColorMode.TRANSPARENT ?
95          Action.ICON_DEFAULT_COLOR_CONTRARY : this.action.fillColor)
96      } else {
97        Image(this.res)
98          .height($r('app.float.icon_size'))
99          .width($r('app.float.icon_size'))
100      }
101    }
102    .key('ActionBarButton' + this.action.componentKey)
103  }
104
105  build() {
106    if (this.action.actionID == Action.MORE.actionID) {
107      Row() {
108        this.ActionBarButtonBuilder()
109      }
110      .onClick(() => {
111        this.showPopup = !this.showPopup
112      })
113      .bindPopup(this.showPopup, {
114        builder: this.PopupBuilder,
115        placement: Placement.Top,
116        popupColor: '#00FFFFFF',
117        enableArrow: false,
118        onStateChange: (e) => {
119          if (!e.isVisible) {
120            this.showPopup = false;
121          } else {
122            this.hidePopup = false;
123          }
124        }
125      })
126    } else {
127      Row() {
128        this.ActionBarButtonBuilder()
129      }
130      .onClick(() => {
131        this.onMenuClicked && this.onMenuClicked(this.action)
132      })
133    }
134  }
135}