• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 {isNfcAvailable} from '../../../../../../../../common/src/main/ets/default/Constants';
17import Log from '../../../../../../../../common/src/main/ets/default/Log'
18import { StatusBarData, StatusBarBackgroundData, StatusBarConfig } from '../common/Constants'
19import { FASlotName } from '../../../../../../../../common/src/main/ets/default/Constants'
20import { TintContentInfo } from '../../../../../../../../common/src/main/ets/default/TintStateManager'
21import StyleConfigurationCommon, { CommonStyle
22} from '../../../../../../../../common/src/main/ets/default/StyleConfiguration'
23import StyleConfiguration, { StatusBarNotificationIconStyle, VerticalStatusBarItemLoadComponentStyle
24} from '../common/StyleConfiguration'
25import ViewModel from '../viewmodel/StatusBarVM'
26import { StringArray } from '../viewmodel/StatusBarVM'
27import IconItemComponent from './IconItemComponent'
28import BatteryIcon from '../../../../../../../batterycomponent/src/main/ets/default/pages/batteryIcon'
29import ClockIcon from '../../../../../../../clockcomponent/src/main/ets/default/pages/clockIcon'
30import WifiIcon from '../../../../../../../wificomponent/src/main/ets/default/pages/wifiIcon'
31import BluetoothIcon from '../../../../../../../bluetoothcomponent/src/main/ets/com/ohos/pages/StatusBarIconItemBluetoothComponent'
32import SignalIcon from '../../../../../../../signalcomponent/src/main/ets/default/pages/signalIcon'
33import CapsuleIcon from '../../../../../../../capsulecomponent/src/main/ets/default/pages/CapsuleIcon'
34import LocationIcon from '../../../../../../../locationcomponent/src/main/ets/com/ohos/pages/StatusBarIconItemLocationComponent'
35import RingModeIcon from '../../../../../../../ringmodecomponent/src/main/ets/com/ohos/pages/StatusBarIconItemRingModeComponent'
36import NfcIcon from '../../../../../../../nfccomponent/src/main/ets/com/ohos/pages/StatusBarIconItemNFComponent'
37
38const TAG = 'StatusBarComponent'
39const TAG_StatusBarGroup = 'StatusBarGroup'
40const TAG_VerticalStatusBarItemLoadComponent = 'VerticalStatusBarItemLoadComponent'
41const TAG_StatusBarItemLoadComponent = 'StatusBarItemLoadComponent'
42const TAG_StatusBarEmptyIcon = 'StatusBarEmptyIcon'
43const TAG_StatusBarNotificationIcon = 'StatusBarNotificationIcon'
44const TAG_StatusBarBackground = 'StatusBarBackground'
45
46@Component
47export default struct StatusBarComponent {
48  private mStatusBarComponentConfig: StatusBarConfig
49  @State mStatusBarData: StatusBarData = ViewModel.getStatusBarData()
50  private moduleName: string = ''
51
52  aboutToAppear() {
53    AppStorage.SetOrCreate('size', $r("app.float.status_bar_margin_left_right"));
54    Log.showInfo(TAG, `aboutToAppear Start, mStatusBarComponentConfig: ${JSON.stringify(this.mStatusBarComponentConfig)}`);
55    this.initViewModel(this.moduleName);
56  }
57
58  aboutToDisappear() {
59    Log.showInfo(TAG, `aboutToDisappear`);
60  }
61
62  initViewModel(moduleName: string) {
63    Log.showInfo(TAG, `initViewModel`);
64    ViewModel.initViewModel(this.mStatusBarComponentConfig, moduleName);
65  }
66
67  build() {
68    Stack() {
69      StatusBarBackground()
70      if (this.mStatusBarData.showHorizontal) {
71        Row() {
72          StatusBarGroup({
73            index: 0,
74            mLayoutWeight: 1,
75            mAlignItems: HorizontalAlign.Start
76          })
77          StatusBarGroup({
78            index: 1,
79            mLayoutWeight: 0,
80            mAlignItems: HorizontalAlign.Center
81          })
82          StatusBarGroup({
83            index: 2,
84            mLayoutWeight: 1,
85            mAlignItems: HorizontalAlign.End
86          })
87        }
88        .padding({ left: $r('app.float.status_bar_padding_start'), right: $r('app.float.status_bar_padding_end') })
89        .width('100%')
90        .height('100%')
91      } else {
92        Column() {
93          StatusBarGroup({
94            index: 0,
95            mLayoutWeight: 1,
96            mAlignItems: VerticalAlign.Center
97          })
98          StatusBarGroup({
99            index: 1,
100            mLayoutWeight: 0,
101            mAlignItems: VerticalAlign.Center
102          })
103          StatusBarGroup({
104            index: 2,
105            mLayoutWeight: 1,
106            mAlignItems: VerticalAlign.Center
107          })
108        }
109        .width('100%')
110        .height('100%')
111      }
112    }
113    .width('100%')
114    .height('100%')
115  }
116}
117
118@Component
119struct StatusBarBackground {
120  @State mStatusBarData: StatusBarData = ViewModel.getStatusBarData()
121  @State mBackgroundDatas: StatusBarBackgroundData[] = ViewModel.getBackgroundDatas()
122
123  aboutToAppear() {
124    Log.showInfo(TAG_StatusBarBackground, `aboutToAppear`);
125  }
126
127  aboutToDisappear() {
128    Log.showInfo(TAG_StatusBarBackground, `aboutToDisAppear`);
129  }
130
131  build() {
132    if (this.mStatusBarData.showHorizontal) {
133      Row() {
134        ForEach(this.mBackgroundDatas, (data: StatusBarBackgroundData) => {
135          if (data.width > 0) {
136            Column() {
137            }
138            .width(data.width + 'px')
139            .height('100%')
140            .backgroundColor(data.backgroundColor)
141          }
142        })
143      }
144      .width('100%')
145      .height('100%')
146    } else {
147      Column() {
148        ForEach(this.mBackgroundDatas, (data: StatusBarBackgroundData) => {
149          if (data.width > 0) {
150            Column() {
151            }
152            .width('100%')
153            .height(data.width + 'px')
154            .backgroundColor(data.backgroundColor)
155          }
156        })
157      }
158      .width('100%')
159      .height('100%')
160    }
161  }
162}
163
164@Component
165struct StatusBarGroup {
166  @StorageLink('StatusBarLayout') mStatusBarLayout: string[][] = [[], [], []]
167  private mLayoutWeight: number = 1
168  private mAlignItems: any = HorizontalAlign.Center;
169  private index: number = -1;
170  @State mStatusBarData: StatusBarData = ViewModel.getStatusBarData()
171
172  aboutToAppear() {
173    Log.showInfo(TAG_StatusBarGroup, `aboutToAppear, mLayoutWeight: ${this.mLayoutWeight} mAlignItems: ${this.mAlignItems} `);
174  }
175
176  aboutToDisappear() {
177    Log.showInfo(TAG_StatusBarGroup, `aboutToDisAppear`);
178  }
179
180  build() {
181    if (this.mStatusBarData.showHorizontal) {
182      Column() {
183        Row() {
184          ForEach(this.mStatusBarLayout[this.index], (componentName: string) => {
185            StatusBarItemLoadComponent({
186              mComponentName: componentName
187            })
188          }, (componentName: string) => componentName)
189        }.height('100%')
190      }
191      .alignItems(this.mAlignItems)
192      .layoutWeight(this.mLayoutWeight)
193      .height('100%')
194    } else {
195      Row() {
196        Column() {
197          ForEach(this.mStatusBarLayout[this.index], (componentName: string) => {
198            VerticalStatusBarItemLoadComponent({
199              mComponentName: componentName
200            })
201          }, (componentName: string) => componentName)
202        }.width('100%')
203        .alignItems(HorizontalAlign.Start)
204      }
205      .alignItems(this.mAlignItems)
206      .width('100%')
207      .layoutWeight(this.mLayoutWeight)
208    }
209  }
210}
211
212@Component
213struct VerticalStatusBarItemLoadComponent {
214  private mComponentName: string
215  @State mComponentHeight: number = 0
216  @State style: VerticalStatusBarItemLoadComponentStyle = StyleConfiguration.getVerticalStatusBarItemLoadComponentStyle()
217
218  aboutToAppear() {
219    Log.showInfo(TAG_VerticalStatusBarItemLoadComponent, `aboutToAppear, mComponentName: ${this.mComponentName}`);
220  }
221
222  aboutToDisappear() {
223    Log.showInfo(TAG_VerticalStatusBarItemLoadComponent, `aboutToDisAppear, mComponentName: ${this.mComponentName}`);
224  }
225
226  build() {
227    Row() {
228      StatusBarItemLoadComponent({
229        mComponentName: this.mComponentName
230      })
231    }
232    .height(this.mComponentHeight + 'px')
233    .onAreaChange((e, e2) => {
234      Log.showInfo(TAG_VerticalStatusBarItemLoadComponent, `onAreaChange, mComponentName: ${this.mComponentName} e: ${JSON.stringify(e)} e2: ${JSON.stringify(e2)}`);
235      this.mComponentHeight = e2.width > 0 ? this.style.statusBarVerticalComponentHeight : 0
236      Log.showInfo(TAG_VerticalStatusBarItemLoadComponent, `onAreaChange, mComponentName: ${this.mComponentName} mComponentHeight: ${this.mComponentHeight}`);
237    })
238  }
239}
240
241@Component
242struct StatusBarItemLoadComponent {
243  private mComponentName: string
244  aboutToAppear() {
245    Log.showInfo(TAG_StatusBarItemLoadComponent, `aboutToAppear, mComponentName: ${this.mComponentName} `)
246  }
247
248  aboutToDisappear() {
249    Log.showInfo(TAG_StatusBarGroup, `aboutToDisAppear, mComponentName: ${this.mComponentName} `)
250  }
251
252  build() {
253    Row() {
254      if (this.mComponentName == FASlotName.EMPTY) {
255        StatusBarEmptyIcon()
256      } else if (this.mComponentName == FASlotName.WIFI) {
257        WifiIcon()
258      } else if (this.mComponentName == FASlotName.BLUETOOTH) {
259        BluetoothIcon()
260      } else if (this.mComponentName == FASlotName.SIGNAL) {
261        SignalIcon()
262      } else if (this.mComponentName == FASlotName.CLOCK) {
263        ClockIcon()
264      } else if (this.mComponentName == FASlotName.BATTERY) {
265        BatteryIcon()
266      } else if (this.mComponentName == FASlotName.CAPSULE) {
267        CapsuleIcon()
268      } else if (this.mComponentName == FASlotName.NOTIFICATION) {
269        StatusBarNotificationIcon()
270      } else if (this.mComponentName == FASlotName.LOCATION) {
271        LocationIcon()
272      } else if (this.mComponentName == FASlotName.RING_MODE) {
273        RingModeIcon()
274      } else if (this.mComponentName == FASlotName.NFC) {
275        if (isNfcAvailable()) {
276          NfcIcon()
277        }
278      } else {
279        IconItemComponent({
280          keyId: this.mComponentName
281        })
282      }
283    }.height('100%')
284    .onAreaChange((e: Area, e2: Area) => {
285      Log.showInfo(TAG_StatusBarItemLoadComponent, `onAreaChange, componentName: ${this.mComponentName}}, new area: ${JSON.stringify(e2)} `)
286      ViewModel.updateComponentArea(this.mComponentName, e2)
287    })
288  }
289}
290
291@Component
292struct StatusBarEmptyIcon {
293  @StorageLink('StatusBarEmptyWidth') mStatusBarEmptyWidth: number = 0
294  @State mTintContentInfo: TintContentInfo = ViewModel.getEmptyTintContentInfo()
295
296  aboutToAppear() {
297    Log.showInfo(TAG_StatusBarEmptyIcon, `aboutToAppear, mStatusBarEmptyWidth: ${this.mStatusBarEmptyWidth} `)
298  }
299
300  aboutToDisappear() {
301    Log.showInfo(TAG_StatusBarEmptyIcon, `aboutToDisAppear`);
302  }
303
304  build() {
305    Row().width(this.mStatusBarEmptyWidth).height('100%')
306  }
307}
308
309@Component
310struct StatusBarNotificationIcon {
311  @StorageLink('notificationList') notificationList: Array<any> = []
312  @StorageLink('StatusCoefficient') StatusCoefficient: number = 1.0
313  @State mTintContentInfo: TintContentInfo = ViewModel.getNotificationTintContentInfo()
314  @State styleCommon: CommonStyle = StyleConfigurationCommon.getCommonStyle()
315  @State style: StatusBarNotificationIconStyle = StyleConfiguration.getStatusBarNotificationIconStyle()
316
317  aboutToAppear() {
318    Log.showInfo(TAG_StatusBarNotificationIcon, `aboutToAppear`);
319  }
320
321  aboutToDisappear() {
322    Log.showInfo(TAG_StatusBarNotificationIcon, `aboutToDisAppear`);
323  }
324
325  build() {
326    Row() {
327      if (this.notificationList.length > 0) {
328        Row().height(1).width(this.styleCommon.statusBarMarginLeftRight)
329      }
330      if (this.notificationList.length > 3) {
331        ForEach(this.notificationList.slice(0, 3), (item: any) => {
332          Image(item[0].smallIcon)
333            .objectFit(ImageFit.ScaleDown)
334            .height(this.style.iconHeight)
335            .width(this.style.iconWidth)
336            .margin({ right: this.style.iconSpace })
337            .fillColor(this.mTintContentInfo.contentColor)
338        })
339        Row() {
340          Text('...')
341            .fontSize(this.styleCommon.statusBarFontSize)
342            .fontColor(this.mTintContentInfo.contentColor)
343        }
344      } else {
345        ForEach(this.notificationList.map((item, index1) => {
346          return { i: index1, data: item }
347        }), (item) => {
348          if (item.i > 0) {
349            Row().height(1).width(this.style.iconSpace)
350          }
351          Image(item.data[0].smallIcon)
352            .objectFit(ImageFit.ScaleDown)
353            .height(this.style.iconHeight)
354            .width(this.style.iconWidth)
355            .fillColor(this.mTintContentInfo.contentColor)
356        })
357      }
358      if (this.notificationList.length > 0) {
359        Row().height(1).width(this.styleCommon.statusBarMarginLeftRight)
360      }
361    }
362    .height('100%')
363  }
364}
365