Application Android et IOS pour l'amicale des élèves
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

CustomTabBar.tsx 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import {Animated} from 'react-native';
  21. import {withTheme} from 'react-native-paper';
  22. import {Collapsible} from 'react-navigation-collapsible';
  23. import TabIcon from './TabIcon';
  24. import TabHomeIcon from './TabHomeIcon';
  25. import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
  26. import {NavigationState} from '@react-navigation/native';
  27. import {
  28. PartialState,
  29. Route,
  30. } from '@react-navigation/routers/lib/typescript/src/types';
  31. type RouteType = Route<string> & {
  32. state?: NavigationState | PartialState<NavigationState>;
  33. };
  34. interface PropsType extends BottomTabBarProps {
  35. theme: ReactNativePaper.Theme;
  36. }
  37. type StateType = {
  38. translateY: any;
  39. };
  40. type validRoutes = 'proxiwash' | 'services' | 'planning' | 'planex';
  41. const TAB_ICONS = {
  42. proxiwash: 'tshirt-crew',
  43. services: 'account-circle',
  44. planning: 'calendar-range',
  45. planex: 'clock',
  46. };
  47. class CustomTabBar extends React.Component<PropsType, StateType> {
  48. static TAB_BAR_HEIGHT = 48;
  49. constructor(props: PropsType) {
  50. super(props);
  51. this.state = {
  52. translateY: new Animated.Value(0),
  53. };
  54. // @ts-ignore
  55. props.navigation.addListener('state', this.onRouteChange);
  56. }
  57. /**
  58. * Navigates to the given route if it is different from the current one
  59. *
  60. * @param route Destination route
  61. * @param currentIndex The current route index
  62. * @param destIndex The destination route index
  63. */
  64. onItemPress(route: RouteType, currentIndex: number, destIndex: number) {
  65. const {navigation} = this.props;
  66. if (currentIndex !== destIndex) {
  67. navigation.navigate(route.name);
  68. }
  69. }
  70. /**
  71. * Navigates to tetris screen on home button long press
  72. *
  73. * @param route
  74. */
  75. onItemLongPress(route: RouteType) {
  76. const {navigation} = this.props;
  77. if (route.name === 'home') {
  78. navigation.navigate('game-start');
  79. }
  80. }
  81. /**
  82. * Finds the active route and syncs the tab bar animation with the header bar
  83. */
  84. onRouteChange = () => {
  85. const {props} = this;
  86. props.state.routes.map(this.syncTabBar);
  87. };
  88. /**
  89. * Gets an icon for the given route if it is not the home one as it uses a custom button
  90. *
  91. * @param route
  92. * @param focused
  93. * @returns {null}
  94. */
  95. getTabBarIcon = (route: RouteType, focused: boolean) => {
  96. let icon = TAB_ICONS[route.name as validRoutes];
  97. icon = focused ? icon : `${icon}-outline`;
  98. if (route.name !== 'home') {
  99. return icon;
  100. }
  101. return '';
  102. };
  103. /**
  104. * Gets a tab icon render.
  105. * If the given route is focused, it syncs the tab bar and header bar animations together
  106. *
  107. * @param route The route for the icon
  108. * @param index The index of the current route
  109. * @returns {*}
  110. */
  111. getRenderIcon = (route: RouteType, index: number) => {
  112. const {props} = this;
  113. const {state} = props;
  114. const {options} = props.descriptors[route.key];
  115. let label;
  116. if (options.tabBarLabel != null) {
  117. label = options.tabBarLabel;
  118. } else if (options.title != null) {
  119. label = options.title;
  120. } else {
  121. label = route.name;
  122. }
  123. const onPress = () => {
  124. this.onItemPress(route, state.index, index);
  125. };
  126. const onLongPress = () => {
  127. this.onItemLongPress(route);
  128. };
  129. const isFocused = state.index === index;
  130. const color = isFocused
  131. ? props.theme.colors.primary
  132. : props.theme.colors.tabIcon;
  133. if (route.name !== 'home') {
  134. return (
  135. <TabIcon
  136. onPress={onPress}
  137. onLongPress={onLongPress}
  138. icon={this.getTabBarIcon(route, isFocused)}
  139. color={color}
  140. label={label as string}
  141. focused={isFocused}
  142. extraData={state.index > index}
  143. key={route.key}
  144. />
  145. );
  146. }
  147. return (
  148. <TabHomeIcon
  149. onPress={onPress}
  150. onLongPress={onLongPress}
  151. focused={isFocused}
  152. key={route.key}
  153. tabBarHeight={CustomTabBar.TAB_BAR_HEIGHT}
  154. />
  155. );
  156. };
  157. getIcons() {
  158. const {props} = this;
  159. return props.state.routes.map(this.getRenderIcon);
  160. }
  161. syncTabBar = (route: RouteType, index: number) => {
  162. const {state} = this.props;
  163. const isFocused = state.index === index;
  164. if (isFocused) {
  165. const stackState = route.state;
  166. const stackRoute =
  167. stackState && stackState.index != null
  168. ? stackState.routes[stackState.index]
  169. : null;
  170. const params: {collapsible: Collapsible} | null | undefined = stackRoute
  171. ? (stackRoute.params as {collapsible: Collapsible})
  172. : null;
  173. const collapsible = params != null ? params.collapsible : null;
  174. if (collapsible != null) {
  175. this.setState({
  176. translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
  177. });
  178. }
  179. }
  180. };
  181. render() {
  182. const {props, state} = this;
  183. const icons = this.getIcons();
  184. return (
  185. <Animated.View
  186. style={{
  187. flexDirection: 'row',
  188. height: CustomTabBar.TAB_BAR_HEIGHT,
  189. width: '100%',
  190. position: 'absolute',
  191. bottom: 0,
  192. left: 0,
  193. backgroundColor: props.theme.colors.surface,
  194. transform: [{translateY: state.translateY}],
  195. }}>
  196. {icons}
  197. </Animated.View>
  198. );
  199. }
  200. }
  201. export default withTheme(CustomTabBar);