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