• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 PopupBuilder() {
47    Column() {
48      ForEach(this.moreMenuList, (menu: Action, index?: number) => {
49        Text(menu.textRes)
50          .width('100%')
51          .height($r('app.float.menu_height'))
52          .fontColor(menu.fillColor)
53          .fontSize($r('sys.float.ohos_id_text_size_body1'))
54          .onClick(() => {
55            this.onMenuClicked && this.onMenuClicked(menu);
56          })
57          .key('ActionBarButton_Text_' + menu.componentKey)
58        if (this.moreMenuList.indexOf(menu) != this.moreMenuList.length - 1) {
59          Divider()
60            .width('100%')
61            .strokeWidth(Constants.MENU_DIVIDER_STROKE_WIDTH)
62            .color($r('sys.color.ohos_id_color_list_separator'))
63            .key('ActionBarButton_Divider_' + menu.componentKey)
64        }
65      }, (menu: Action) => menu.actionID.toString())
66    }
67    .width(ScreenManager.getInstance().getColumnsWidth(ColumnSize.COLUMN_TWO))
68    .borderRadius($r('sys.float.ohos_id_corner_radius_default_l'))
69    .padding({
70      top: $r('app.float.menu_padding_vertical'),
71      bottom: $r('app.float.menu_padding_vertical'),
72      left: $r('app.float.menu_padding_horizontal'),
73      right: $r('app.float.menu_padding_horizontal')
74    })
75    .backgroundColor(Color.White)
76    .margin({
77      right: this.isHorizontal ? $r('sys.float.ohos_id_max_padding_end') : $r('app.float.menu_margin_right'),
78      bottom: this.isHorizontal ? 0 : $r('app.float.menu_margin_bottom')
79    })
80  }
81
82  @Builder ActionBarButtonBuilder() {
83    Flex({
84      direction: FlexDirection.Column,
85      justifyContent: FlexAlign.Center,
86      alignItems: ItemAlign.Center
87    }) {
88      if (this.isAutoTint) {
89        Image(this.res)
90          .height($r('app.float.icon_size'))
91          .width($r('app.float.icon_size'))
92          .fillColor(this.colorMode == ActionBarColorMode.TRANSPARENT ?
93          Action.ICON_DEFAULT_COLOR_CONTRARY : this.action.fillColor)
94      } else {
95        Image(this.res)
96          .height($r('app.float.icon_size'))
97          .width($r('app.float.icon_size'))
98      }
99    }
100    .key('ActionBarButton' + this.action.componentKey)
101  }
102
103  build() {
104    if (this.action.actionID == Action.MORE.actionID) {
105      Row() {
106        this.ActionBarButtonBuilder()
107      }
108      .onClick(() => {
109        this.showPopup = !this.showPopup
110      })
111      .bindPopup(this.showPopup, {
112        builder: this.PopupBuilder,
113        placement: Placement.Top,
114        popupColor: '#00FFFFFF',
115        enableArrow: false,
116        onStateChange: (e) => {
117          if (!e.isVisible) {
118            this.showPopup = false;
119          } else {
120            this.hidePopup = false;
121          }
122        }
123      })
124    } else {
125      Row() {
126        this.ActionBarButtonBuilder()
127      }
128      .onClick(() => {
129        this.onMenuClicked && this.onMenuClicked(this.action)
130      })
131    }
132  }
133}