• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-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
16export enum ItemState {
17  ENABLE = 1,
18  DISABLE = 2,
19  ACTIVATE = 3
20}
21
22const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA" +
23  "+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzA" +
24  "AAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I" +
25  "3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxam9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIY" +
26  "eQ+8lrJyU+re7HgJtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpYKT" +
27  "mVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2re1oP43rNDc6wh1qDS/6t0" +
28  "n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdusCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF" +
29  "8EUcdfbsAAAAASUVORK5CYII=";
30
31@Observed
32export class ToolBarOption {
33  content: string;
34  action?: () => void;
35  icon?: Resource;
36  state?: ItemState = 1;
37}
38
39@Observed
40export class ToolBarOptions extends Array<ToolBarOption> {
41}
42
43@Component
44export struct ToolBar {
45  @ObjectLink toolBarList: ToolBarOptions
46  controller: TabsController
47  @Prop activateIndex: number = -1
48  @Prop moreText: string = "更多"
49  @State menuContent: { value: string, action: () => void }[] = []
50  toolBarItemBackground: Resource[] = []
51  @State itemBackground: Resource = $r('sys.color.ohos_id_color_toolbar_bg')
52  @Builder MoreTabBuilder(index: number) {
53    Column() {
54      Image(PUBLIC_MORE)
55        .width(24)
56        .height(24)
57        .fillColor($r('sys.color.ohos_id_color_toolbar_icon'))
58        .margin({ top: 8, bottom: 2 })
59        .objectFit(ImageFit.Contain)
60      Text(this.moreText)
61        .fontColor($r('sys.color.ohos_id_color_toolbar_text'))
62        .fontSize($r('sys.float.ohos_id_text_size_caption'))
63        .fontWeight(FontWeight.Medium)
64    }.width('100%').height('100%').bindMenu(this.menuContent, { offset: { x: 5, y : -10}})
65    .padding({left: 4, right: 4})
66    .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
67  }
68
69  @Builder TabBuilder(index: number) {
70    Column() {
71      Image(this.toolBarList[index].icon)
72        .width(24)
73        .height(24)
74        .fillColor(this.activateIndex === index && !(this.toolBarList[index].state === 2)
75          ? $r('sys.color.ohos_id_color_text_primary_activated') : $r('sys.color.ohos_id_color_primary'))
76        .opacity((this.toolBarList[index].state === 2) ? 0.4 : 1)
77        .margin({ top: 8, bottom: 2 })
78        .objectFit(ImageFit.Contain)
79      Text(this.toolBarList[index].content)
80        .fontColor(this.activateIndex === index && !(this.toolBarList[index].state === 2)
81          ? $r('sys.color.ohos_id_color_toolbar_text_actived') : $r('sys.color.ohos_id_color_toolbar_text'))
82        .fontSize($r('sys.float.ohos_id_text_size_caption'))
83        .maxFontSize($r('sys.float.ohos_id_text_size_caption'))
84        .minFontSize(9)
85        .fontWeight(FontWeight.Medium)
86        .maxLines(2)
87        .textOverflow({ overflow: TextOverflow.Ellipsis })
88        .opacity((this.toolBarList[index].state === 2) ? 0.4 : 1)
89    }
90    .width('100%').height('100%')
91    .focusable(!(this.toolBarList[index].state === 2))
92    .focusOnTouch(!(this.toolBarList[index].state === 2))
93    .padding({left: 4, right: 4})
94    .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
95    .backgroundColor(this.itemBackground)
96    .onClick(() => {
97      if (this.toolBarList[index].state === 3) {
98        if (this.activateIndex === index)
99          this.activateIndex = -1
100        else {
101          this.activateIndex = index
102        }
103      }
104      if (!(this.toolBarList[index].state === 2)) {
105        this.toolBarList[index].action && this.toolBarList[index].action()
106      }
107    })
108    .onHover((isHover: boolean) => {
109      if (isHover ) {
110        this.toolBarItemBackground[index] = (this.toolBarList[index].state === 2)
111          ? $r('sys.color.ohos_id_color_toolbar_bg'): $r('sys.color.ohos_id_color_hover')
112      } else {
113        this.toolBarItemBackground[index] = $r('sys.color.ohos_id_color_toolbar_bg')
114      }
115      this.itemBackground = this.toolBarItemBackground[index]
116    })
117    .stateStyles({
118      pressed: {
119        .backgroundColor((this.toolBarList[index].state === 2) ? this.toolBarItemBackground[index] : $r('sys.color.ohos_id_color_click_effect'))
120      },
121      normal: {
122        .backgroundColor(this.toolBarItemBackground[index])
123      }
124    })
125  }
126
127  refreshData() {
128    this.menuContent = []
129    for (let i = 0; i < this.toolBarList.length; i++) {
130      if (i >= 4 && this.toolBarList.length > 5) {
131        this.menuContent[i - 4] = {
132          value: this.toolBarList[i].content,
133          action: this.toolBarList[i].action
134        }
135      } else {
136        this.toolBarItemBackground[i] = $r('sys.color.ohos_id_color_toolbar_bg')
137        this.menuContent = []
138      }
139    }
140    return true
141  }
142
143  aboutToAppear() {
144    this.refreshData()
145  }
146  build() {
147    Column() {
148      Divider().width('100%').height(1)
149      Column() {
150        Tabs({ barPosition: BarPosition.End, controller: this.controller}) {
151          ForEach(this.toolBarList, (item: ToolBarOption, index: number) => {
152            if (this.toolBarList.length <= 5) {
153              TabContent() {
154              }.tabBar(this.TabBuilder(index))
155              .enabled(!(this.toolBarList[index].state === 2))
156              .focusOnTouch(!(this.toolBarList[index].state === 2))
157            } else if (index < 4){
158              TabContent() {
159              }.tabBar(this.TabBuilder(index))
160              .enabled(!(this.toolBarList[index].state === 2))
161              .focusOnTouch(!(this.toolBarList[index].state === 2))
162            }
163          })
164          if (this.refreshData() && this.toolBarList.length > 5) {
165            TabContent() {
166            }.tabBar(this.MoreTabBuilder(4))
167          }
168        }
169        .vertical(false)
170        .constraintSize({ minHeight: 56, maxHeight: 56})
171        .barMode(BarMode.Fixed)
172        .onChange((index: number) => {
173        })
174        .width('100%')
175        .padding({ left: this.toolBarList.length < 5? 24 : 0, right: this.toolBarList.length < 5? 24 : 0})
176        .backgroundColor($r('sys.color.ohos_id_color_toolbar_bg'))
177      }.width('100%')
178    }
179  }
180}