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
16import { BrowserConstants, Constants, Log, ScreenManager } from '@ohos/common';
17import { ToolBar } from '@ohos/common/CommonComponents';
18import Curves from '@ohos.curves';
19
20const TAG: string = 'browser_PhotoBrowserToolBar';
21const TOOL_BAR_OPACITY_0: number = 0;
22const TOOL_BAR_OPACITY_1: number = 1;
23
24@Component
25export struct PhotoBrowserToolBar {
26  @Consume @Watch('onShowChanged') isShowBar: boolean;
27  @State opacityValue: number = 1;
28  @State isVisibility: boolean = true;
29  @State currentBackgroundColor: Resource = $r('app.color.default_background_color');
30  onMenuClicked: Function = (): void => {};
31  @StorageLink('isSplitMode') isSplitMode: boolean = ScreenManager.getInstance().isSplitMode();
32  @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal();
33  @StorageLink('leftBlank') leftBlank: number[] =
34    [0, ScreenManager.getInstance().getStatusBarHeight(), 0, ScreenManager.getInstance().getNaviBarHeight()];
35  noAnimation: boolean = true;
36  @Consume hidePopup: boolean;
37  private isFromPhotoBrowser = false;
38
39  aboutToAppear(): void {
40    Log.debug(TAG, `isShowBar=${this.isShowBar}, isHorizontal=${this.isHorizontal}`);
41    if (this.isShowBar && !this.isHorizontal) {
42      this.isVisibility = true;
43    } else {
44      this.isVisibility = false;
45    }
46    this.opacityValue = this.isShowBar ? TOOL_BAR_OPACITY_1 : TOOL_BAR_OPACITY_0;
47  }
48
49  onShowChanged(): void {
50    if (this.isShowBar && !this.isHorizontal) {
51      this.isVisibility = this.isShowBar;
52    }
53
54    animateTo({
55      duration: BrowserConstants.IMMERSE_ANIM_DURATION,
56      delay: this.isShowBar ? BrowserConstants.IMMERSE_ANIM_DELAY : 0,
57      curve: this.isShowBar ? Curves.cubicBezier(0.6, 0.0, 0.6, 1.0) : Curves.cubicBezier(0.2, 0.0, 0.2, 1.0),
58      onFinish: () => {
59        if (!this.isShowBar && !this.isHorizontal) {
60          this.isVisibility = this.isShowBar;
61        }
62      }
63    }, () => {
64      this.opacityValue = this.isShowBar ? TOOL_BAR_OPACITY_1 : TOOL_BAR_OPACITY_0;
65    })
66  }
67
68  build() {
69    Stack() {
70      ToolBar({
71        onMenuClicked: this.onMenuClicked,
72        isFromPhotoBrowser: this.isFromPhotoBrowser
73      })
74    }
75    .padding({ bottom: this.leftBlank[3] })
76    .width(Constants.PERCENT_100)
77    .visibility(this.isVisibility ? Visibility.Visible : Visibility.Hidden)
78    .opacity(this.opacityValue)
79    .backgroundColor(this.currentBackgroundColor)
80  }
81}