• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 { AlbumSetPage } from '@ohos/browser/BrowserComponents';
17import { PhotoGridView } from './PhotoGridView';
18import { Constants, Log } from '@ohos/common';
19import { BrowserController } from '@ohos/common/CommonComponents';
20import { PhotoBrowserComponent } from './PhotoBrowserComponent';
21import { SelectPhotoBrowserView } from './SelectPhotoBrowserView';
22
23const TAG = 'TabContentComponent';
24
25@Component
26export struct TabContentComponent {
27  @Prop pageStatus: boolean = false;
28  @StorageLink('isShowPhotoGridView') isShowPhotoGridView: boolean = false;
29  @Prop currentIndex: number = 0;
30  @StorageLink('currentBreakpoint') currentBreakpoint: string = Constants.BREAKPOINT_MD;
31  @Consume @Watch('onShowStatusChanged') isShow: boolean;
32  @State @Watch('updateIndexStatus') browserController: BrowserController = new BrowserController(true);
33  @Link isShowTabBar: boolean;
34  @Link @Watch('onPhotoBrowserStatusChanged') isShowPhotoBrowser: boolean;
35  @Link @Watch('onSelectPhotoBrowserStatusChanged') isShowSelectPhotoBrowser: boolean;
36  @State isRunningAnimation: boolean = false;
37
38  onShowStatusChanged() {
39    this.pageStatus = this.isShow /*&& this.isInCurrentTab();*/
40    Log.error(TAG, 'this.pageStatus = ' + this.pageStatus
41    + ', this.isShow = ' + this.isShow + ', this.isInCurrentTab() = ' + this.isInCurrentTab()
42    );
43  }
44
45  onPhotoBrowserStatusChanged() {
46    if (this.isInCurrentTab()) {
47      this.isShowTabBar = !this.isShowPhotoGridView && !this.isShowPhotoBrowser;
48    }
49  }
50
51  onSelectPhotoBrowserStatusChanged() {
52    if (this.isInCurrentTab()) {
53      this.isShowTabBar = !this.isShowPhotoGridView && !this.isShowSelectPhotoBrowser;
54    }
55  }
56
57  build() {
58    Stack() {
59      AlbumSetPage({
60        isInCurrentTab: this.currentIndex === Constants.ALBUM_PAGE_INDEX
61      })
62
63      if (this.isShowPhotoGridView && this.currentBreakpoint != Constants.BREAKPOINT_LG) {
64        PhotoGridView({
65          pageStatus: this.pageStatus,
66          browserController: this.browserController
67        })
68          .transition(TransitionEffect.opacity(0.99))
69      }
70
71      if (this.isInCurrentTab() && this.isShowPhotoBrowser) {
72        Column() {
73          PhotoBrowserComponent({
74            pageStatus: this.pageStatus,
75            geometryTransitionEnable: true,
76            isRunningAnimation: $isRunningAnimation,
77            browserController: this.browserController
78          })
79        }
80        .width("100%")
81        .height("100%")
82
83        // Opacity must change for TransitionEffect taking effect
84        .transition(TransitionEffect.asymmetric(TransitionEffect.opacity(0.99), TransitionEffect.opacity(0.99)))
85      }
86
87      if (this.isInCurrentTab() && this.isShowSelectPhotoBrowser) {
88        Column() {
89          SelectPhotoBrowserView({
90            pageStatus: this.pageStatus,
91            geometryTransitionEnable: true,
92            isRunningAnimation: $isRunningAnimation,
93            browserController: this.browserController
94          })
95        }
96        .width("100%")
97        .height("100%")
98
99        // Opacity must change for TransitionEffect taking effect
100        .transition(TransitionEffect.asymmetric(TransitionEffect.opacity(0.99), TransitionEffect.opacity(0.99)))
101      }
102    }
103  }
104
105  private updateIndexStatus() {
106    this.isShowPhotoBrowser = this.browserController.isBrowserShow;
107    this.isShowSelectPhotoBrowser = this.browserController.isSelectBrowserShow;
108    this.isRunningAnimation = this.browserController.isAnimating;
109  }
110
111  private isInCurrentTab(): boolean {
112    return this.currentIndex === Constants.ALBUM_PAGE_INDEX;
113  }
114}