• 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 */
15import deviceInfo from '@ohos.deviceInfo';
16import { Action } from '../../redux/actions/Action';
17import { Log } from '../../utils/Log';
18import { Dispatch, OhCombinedState } from '../../redux/store';
19import { getStore } from '../../redux/store';
20
21class MoreListInfo {
22  itemIcon: Resource = $r('app.media.photo');
23  itemValue: string = 'photo';
24}
25
26class StateStruct {
27  modeIndex: number = 0;
28}
29
30class MoreListDispatcher {
31  private mDispatch: Dispatch = (data) => data;
32
33  public setDispatch(dispatch: Dispatch) {
34    this.mDispatch = dispatch;
35  }
36
37  public swipeChangeMode(swipeModeIndex: number): void {
38    this.mDispatch(Action.swipeChangeMode(swipeModeIndex));
39  }
40}
41
42@Component
43export struct MoreList {
44  private TAG: string = '[moreList]:';
45  @State state: StateStruct = new StateStruct();
46  private mAction: MoreListDispatcher = new MoreListDispatcher();
47  private mDirection: PanDirection = PanDirection.Right;
48  private moreList: MoreListInfo[] = [{
49    itemIcon: $r('app.media.photo'),
50    itemValue: 'photo'
51  }, {
52    itemIcon: $r('app.media.sd_card'),
53    itemValue: 'sd_card'
54  }, {
55    itemIcon: $r('app.media.setting'),
56    itemValue: 'setting'
57  }, {
58    itemIcon: $r('app.media.small_switch_camera'),
59    itemValue: 'switch'
60  }, {
61    itemIcon: $r('app.media.sound_mute'),
62    itemValue: 'sound_mute'
63  }]
64
65  aboutToAppear() {
66    Log.info(`${this.TAG} aboutToAppear start`)
67    getStore().subscribe((state: OhCombinedState) => {
68      this.state = {
69        modeIndex: state.modeReducer.modeIndex,
70      };
71    }, (dispatch: Dispatch) => {
72      this.mAction.setDispatch(dispatch);
73    });
74    this.setDirection()
75    Log.info(`${this.TAG} aboutToAppear end`)
76  }
77
78  private setDirection(): void {
79    switch (deviceInfo.deviceType) {
80      case 'PAD':
81        this.mDirection = PanDirection.Down
82        break
83      case 'tablet':
84        this.mDirection = PanDirection.Down
85        break
86      default:
87        this.mDirection = PanDirection.Right
88        break
89    }
90  }
91
92  build() {
93    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
94      Grid() {
95        ForEach(this.moreList, (item: MoreListInfo) => {
96          GridItem() {
97            Column() {
98              Image(item.itemIcon)
99                .width(40)
100                .height(40)
101                .objectFit(ImageFit.Contain)
102              Text(item.itemValue)
103                .width('50%')
104                .height('50%')
105                .fontSize(16)
106                .fontColor(Color.White)
107                .textAlign(TextAlign.Center)
108            }
109          }
110        })
111      }
112      .columnsTemplate('1fr 1fr 1fr')
113      .rowsTemplate('1fr 1fr 1fr')
114      .columnsGap(1)
115      .rowsGap(1)
116      .backgroundColor('rgba(205,201,201,0.6)')
117    }
118    .width('100%')
119    .height('70%')
120    .gesture(
121    PanGesture({ direction: this.mDirection })
122      .onActionEnd(() => {
123        this.mAction.swipeChangeMode(this.state.modeIndex - 1)
124      })
125    )
126  }
127}