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 { Action } from '../../../redux/actions/Action' 17import { CaptureMode } from '../../../setting/settingitem/CaptureMode' 18import { Log } from '../../../utils/Log' 19import { EventBus } from '../../../worker/eventbus/EventBus' 20import { EventBusManager } from '../../../worker/eventbus/EventBusManager' 21import { getStore } from '../../../redux/store' 22 23let tabBarMState = (state) => { 24 return { 25 widthTabBar: state.PreviewReducer.widthTabBar 26 } 27} 28 29let tabBarMDispatcher = (dispatch) => { 30 return { 31 updateShowTabBarWidth: (widthTabBar: String) => { 32 dispatch(Action.updateShowTabBarWidth(widthTabBar)) 33 } 34 } 35} 36 37class StateStruct { 38 widthTabBar 39 updateShowTabBarWidth: Function 40} 41 42@Component 43export struct TabBarSame { 44 private TAG: string = '[TabBarSame]:' 45 @State state: StateStruct = new StateStruct() 46 appEventBus: EventBus = EventBusManager.getInstance().getEventBus() 47 48 private aboutToAppear() { 49 Log.info(`${this.TAG} aboutToAppear invoke E`) 50 getStore().connect(tabBarMState, tabBarMDispatcher)(this.state) 51 this.appEventBus.on(Action.ACTION_ON_MODE_CHANGED,this.updateTabBarWidth.bind(this)) 52 Log.info(`${this.TAG} aboutToAppear invoke X`) 53 } 54 55 private updateTabBarWidth(data) { 56 Log.info(`${this.TAG} updateTabBarWidth invoke E`) 57 switch (data.mode) { 58 case CaptureMode.PHOTO: 59 this.state.updateShowTabBarWidth('40%') 60 break; 61 case CaptureMode.VIDEO: 62 this.state.updateShowTabBarWidth('10%') 63 break; 64 default: 65 this.state.updateShowTabBarWidth('30%') 66 break; 67 } 68 Log.info(`${this.TAG} updateTabBarWidth invoke X`) 69 } 70 71 build() { 72 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 73 Column() { 74 } 75 .width(this.state.widthTabBar) 76 .height('100%') 77 .animation({ 78 duration: 2000, 79 curve: Curve.Sharp, 80 delay: 0, 81 iterations: 1, 82 playMode: PlayMode.Normal 83 }) 84 85 Column() { 86 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 87 Image($r("app.media.delete")) 88 .width(24) 89 .height(24) 90 }.width('100%').height('100%') 91 }.width('20%').height('100%') 92 } 93 .width('100%') 94 .height('100%') 95 } 96}