• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 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 { Log } from '../../utils/Log'
17import getStore from '../../redux/store'
18import { Action } from '../../redux/actions/Action'
19
20let localState = (state) => {
21  return {
22    mode: state.ModeReducer.mode,
23  }
24}
25
26let localDispatcher = (dispatch) => {
27  return {
28    updateShowBigTextFlag: (flag: boolean) => {
29      dispatch(Action.updateShowBigTextFlag(flag))
30    },
31    updateUiState: (state: boolean) => {
32      dispatch(Action.uiState(state))
33    }
34//    updateBigTextOpacity: (opacity: number) => {
35//      dispatch(Action.updateBigTextOpacity(opacity))
36//    }
37  }
38}
39
40@Component
41export struct BigText {
42  private TAG: string = '[BigText]:'
43  private mConnect: any
44  private modeResource = {
45    'MULTI': $r('app.string.multi_mode'),
46    'PHOTO': $r('app.string.photo_mode'),
47    'VIDEO': $r('app.string.video_mode')
48  }
49
50  @State state: any = {}
51  @State bigTextOpacity: number = 0
52
53  public aboutToAppear() {
54    Log.info(`${this.TAG} aboutToAppear E`)
55    this.mConnect = getStore().connect(localState, localDispatcher)(this.state)
56    Log.info(`${this.TAG} aboutToAppear X`)
57  }
58
59  public aboutToDisappear(): void {
60    Log.info(`${this.TAG} aboutToDisappear E`)
61    this.mConnect?.destroy()
62    Log.info(`${this.TAG} aboutToDisappear X`)
63  }
64
65  build() {
66    Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
67      Text(this.modeResource[this.state.mode])
68        .fontSize(60)
69        .fontColor(Color.White)
70        .fontWeight(300)
71        .textAlign(TextAlign.Center)
72        .width('100%')
73        .opacity(this.bigTextOpacity)
74        .onAppear(() => {
75          animateTo({ duration: 150,
76            curve: Curve.Sharp,
77            delay: 0,
78            onFinish: () => {
79              animateTo({ duration: 150,
80                curve: Curve.Sharp,
81                delay: 1000,
82                onFinish: () => {
83                  this.state.updateShowBigTextFlag(false)
84                  this.state.updateUiState(true)
85                }
86              }, () => {
87                this.bigTextOpacity = 0
88              })
89            }
90          }, () => {
91            this.bigTextOpacity = 1
92          })
93        })
94    }
95    .width('100%')
96    .height('96vp')
97  }
98}
99