123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- /*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
- */
-
- import * as React from 'react';
- import {Animated} from 'react-native';
- import {withTheme} from 'react-native-paper';
- import {Collapsible} from 'react-navigation-collapsible';
- import TabIcon from './TabIcon';
- import TabHomeIcon from './TabHomeIcon';
- import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
- import {NavigationState} from '@react-navigation/native';
- import {
- PartialState,
- Route,
- } from '@react-navigation/routers/lib/typescript/src/types';
-
- type RouteType = Route<string> & {
- state?: NavigationState | PartialState<NavigationState>;
- };
-
- interface PropsType extends BottomTabBarProps {
- theme: ReactNativePaper.Theme;
- }
-
- type StateType = {
- translateY: any;
- };
-
- type validRoutes = 'proxiwash' | 'services' | 'planning' | 'planex';
-
- const TAB_ICONS = {
- proxiwash: 'tshirt-crew',
- services: 'account-circle',
- planning: 'calendar-range',
- planex: 'clock',
- };
-
- class CustomTabBar extends React.Component<PropsType, StateType> {
- static TAB_BAR_HEIGHT = 48;
-
- constructor(props: PropsType) {
- super(props);
- this.state = {
- translateY: new Animated.Value(0),
- };
- // @ts-ignore
- props.navigation.addListener('state', this.onRouteChange);
- }
-
- /**
- * Navigates to the given route if it is different from the current one
- *
- * @param route Destination route
- * @param currentIndex The current route index
- * @param destIndex The destination route index
- */
- onItemPress(route: RouteType, currentIndex: number, destIndex: number) {
- const {navigation} = this.props;
- if (currentIndex !== destIndex) {
- navigation.navigate(route.name);
- }
- }
-
- /**
- * Navigates to tetris screen on home button long press
- *
- * @param route
- */
- onItemLongPress(route: RouteType) {
- const {navigation} = this.props;
- if (route.name === 'home') {
- navigation.navigate('game-start');
- }
- }
-
- /**
- * Finds the active route and syncs the tab bar animation with the header bar
- */
- onRouteChange = () => {
- const {props} = this;
- props.state.routes.map(this.syncTabBar);
- };
-
- /**
- * Gets an icon for the given route if it is not the home one as it uses a custom button
- *
- * @param route
- * @param focused
- * @returns {null}
- */
- getTabBarIcon = (route: RouteType, focused: boolean) => {
- let icon = TAB_ICONS[route.name as validRoutes];
- icon = focused ? icon : `${icon}-outline`;
- if (route.name !== 'home') {
- return icon;
- }
- return '';
- };
-
- /**
- * Gets a tab icon render.
- * If the given route is focused, it syncs the tab bar and header bar animations together
- *
- * @param route The route for the icon
- * @param index The index of the current route
- * @returns {*}
- */
- getRenderIcon = (route: RouteType, index: number) => {
- const {props} = this;
- const {state} = props;
- const {options} = props.descriptors[route.key];
- let label;
- if (options.tabBarLabel != null) {
- label = options.tabBarLabel;
- } else if (options.title != null) {
- label = options.title;
- } else {
- label = route.name;
- }
-
- const onPress = () => {
- this.onItemPress(route, state.index, index);
- };
- const onLongPress = () => {
- this.onItemLongPress(route);
- };
- const isFocused = state.index === index;
-
- const color = isFocused
- ? props.theme.colors.primary
- : props.theme.colors.tabIcon;
- if (route.name !== 'home') {
- return (
- <TabIcon
- onPress={onPress}
- onLongPress={onLongPress}
- icon={this.getTabBarIcon(route, isFocused)}
- color={color}
- label={label as string}
- focused={isFocused}
- extraData={state.index > index}
- key={route.key}
- />
- );
- }
- return (
- <TabHomeIcon
- onPress={onPress}
- onLongPress={onLongPress}
- focused={isFocused}
- key={route.key}
- tabBarHeight={CustomTabBar.TAB_BAR_HEIGHT}
- />
- );
- };
-
- getIcons() {
- const {props} = this;
- return props.state.routes.map(this.getRenderIcon);
- }
-
- syncTabBar = (route: RouteType, index: number) => {
- const {state} = this.props;
- const isFocused = state.index === index;
- if (isFocused) {
- const stackState = route.state;
- const stackRoute =
- stackState && stackState.index != null
- ? stackState.routes[stackState.index]
- : null;
- const params: {collapsible: Collapsible} | null | undefined = stackRoute
- ? (stackRoute.params as {collapsible: Collapsible})
- : null;
- const collapsible = params != null ? params.collapsible : null;
- if (collapsible != null) {
- this.setState({
- translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
- });
- }
- }
- };
-
- render() {
- const {props, state} = this;
- const icons = this.getIcons();
- return (
- <Animated.View
- style={{
- flexDirection: 'row',
- height: CustomTabBar.TAB_BAR_HEIGHT,
- width: '100%',
- position: 'absolute',
- bottom: 0,
- left: 0,
- backgroundColor: props.theme.colors.surface,
- transform: [{translateY: state.translateY}],
- }}>
- {icons}
- </Animated.View>
- );
- }
- }
-
- export default withTheme(CustomTabBar);
|