From 5261e8525467096c5ac92db59c65915f51497ebf Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 22 Sep 2020 15:16:25 +0200 Subject: [PATCH] Update custom tab bar to use TypeScript --- .../{CustomTabBar.js => CustomTabBar.tsx} | 88 +++++++++---------- .../{TabHomeIcon.js => TabHomeIcon.tsx} | 26 +++--- .../Tabbar/{TabIcon.js => TabIcon.tsx} | 26 +++--- 3 files changed, 63 insertions(+), 77 deletions(-) rename src/components/Tabbar/{CustomTabBar.js => CustomTabBar.tsx} (78%) rename src/components/Tabbar/{TabHomeIcon.js => TabHomeIcon.tsx} (88%) rename src/components/Tabbar/{TabIcon.js => TabIcon.tsx} (88%) diff --git a/src/components/Tabbar/CustomTabBar.js b/src/components/Tabbar/CustomTabBar.tsx similarity index 78% rename from src/components/Tabbar/CustomTabBar.js rename to src/components/Tabbar/CustomTabBar.tsx index c9ddaa5..797257e 100644 --- a/src/components/Tabbar/CustomTabBar.js +++ b/src/components/Tabbar/CustomTabBar.tsx @@ -17,8 +17,6 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {Animated} from 'react-native'; import {withTheme} from 'react-native-paper'; @@ -26,40 +24,40 @@ import {Collapsible} from 'react-navigation-collapsible'; import {StackNavigationProp} from '@react-navigation/stack'; import TabIcon from './TabIcon'; import TabHomeIcon from './TabHomeIcon'; -import type {CustomThemeType} from '../../managers/ThemeManager'; type RouteType = { - name: string, - key: string, - params: {collapsible: Collapsible}, + name: string; + key: string; + params: {collapsible: Collapsible}; state: { - index: number, - routes: Array, - }, + index: number; + routes: Array; + }; }; type PropsType = { state: { - index: number, - routes: Array, - }, + index: number; + routes: Array; + }; descriptors: { [key: string]: { options: { - tabBarLabel: string, - title: string, - }, - }, - }, - navigation: StackNavigationProp, - theme: CustomThemeType, + tabBarLabel: string; + title: string; + }; + }; + }; + navigation: StackNavigationProp; + theme: ReactNativePaper.Theme; }; type StateType = { - // eslint-disable-next-line flowtype/no-weak-types - translateY: any, + translateY: any; }; +type validRoutes = 'proxiwash' | 'services' | 'planning' | 'planex'; + const TAB_ICONS = { proxiwash: 'tshirt-crew', services: 'account-circle', @@ -70,8 +68,8 @@ const TAB_ICONS = { class CustomTabBar extends React.Component { static TAB_BAR_HEIGHT = 48; - constructor() { - super(); + constructor(props: PropsType) { + super(props); this.state = { translateY: new Animated.Value(0), }; @@ -86,13 +84,9 @@ class CustomTabBar extends React.Component { */ onItemPress(route: RouteType, currentIndex: number, destIndex: number) { const {navigation} = this.props; - const event = navigation.emit({ - type: 'tabPress', - target: route.key, - canPreventDefault: true, - }); - if (currentIndex !== destIndex && !event.defaultPrevented) + if (currentIndex !== destIndex) { navigation.navigate(route.name); + } } /** @@ -102,13 +96,9 @@ class CustomTabBar extends React.Component { */ onItemLongPress(route: RouteType) { const {navigation} = this.props; - const event = navigation.emit({ - type: 'tabLongPress', - target: route.key, - canPreventDefault: true, - }); - if (route.name === 'home' && !event.defaultPrevented) + if (route.name === 'home') { navigation.navigate('game-start'); + } } /** @@ -126,11 +116,13 @@ class CustomTabBar extends React.Component { * @param focused * @returns {null} */ - getTabBarIcon = (route: RouteType, focused: boolean): React.Node => { - let icon = TAB_ICONS[route.name]; + 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 null; + if (route.name !== 'home') { + return icon; + } + return ''; }; /** @@ -141,14 +133,18 @@ class CustomTabBar extends React.Component { * @param index The index of the current route * @returns {*} */ - getRenderIcon = (route: RouteType, index: number): React.Node => { + 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; + 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); @@ -186,7 +182,7 @@ class CustomTabBar extends React.Component { ); }; - getIcons(): React.Node { + getIcons() { const {props} = this; return props.state.routes.map(this.getRenderIcon); } @@ -209,14 +205,12 @@ class CustomTabBar extends React.Component { } }; - render(): React.Node { + render() { const {props, state} = this; props.navigation.addListener('state', this.onRouteChange); const icons = this.getIcons(); return ( - // $FlowFixMe . */ -// @flow - import * as React from 'react'; import {Image, View} from 'react-native'; import {FAB} from 'react-native-paper'; import * as Animatable from 'react-native-animatable'; -import FOCUSED_ICON from '../../../assets/tab-icon.png'; -import UNFOCUSED_ICON from '../../../assets/tab-icon-outline.png'; +const FOCUSED_ICON = require('../../../assets/tab-icon.png'); +const UNFOCUSED_ICON = require('../../../assets/tab-icon-outline.png'); type PropsType = { - focused: boolean, - onPress: () => void, - onLongPress: () => void, - tabBarHeight: number, + focused: boolean; + onPress: () => void; + onLongPress: () => void; + tabBarHeight: number; }; const AnimatedFAB = Animatable.createAnimatableComponent(FAB); @@ -44,6 +42,7 @@ class TabHomeIcon extends React.Component { Animatable.initializeRegistryWithDefinitions({ fabFocusIn: { '0': { + // @ts-ignore scale: 1, translateY: 0, }, @@ -58,6 +57,7 @@ class TabHomeIcon extends React.Component { }, fabFocusOut: { '0': { + // @ts-ignore scale: 1.1, translateY: -6, }, @@ -74,13 +74,7 @@ class TabHomeIcon extends React.Component { return nextProps.focused !== focused; } - getIconRender = ({ - size, - color, - }: { - size: number, - color: string, - }): React.Node => { + getIconRender = ({size, color}: {size: number; color: string}) => { const {focused} = this.props; return ( { ); }; - render(): React.Node { + render() { const {props} = this; return ( . */ -// @flow - import * as React from 'react'; import {View} from 'react-native'; import {TouchableRipple, withTheme} from 'react-native-paper'; -import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import * as Animatable from 'react-native-animatable'; -import type {CustomThemeType} from '../../managers/ThemeManager'; type PropsType = { - focused: boolean, - color: string, - label: string, - icon: MaterialCommunityIconsGlyphs, - onPress: () => void, - onLongPress: () => void, - theme: CustomThemeType, - extraData: null | boolean | number | string, + focused: boolean; + color: string; + label: string; + icon: string; + onPress: () => void; + onLongPress: () => void; + theme: ReactNativePaper.Theme; + extraData: null | boolean | number | string; }; /** @@ -49,6 +45,7 @@ class TabIcon extends React.Component { Animatable.initializeRegistryWithDefinitions({ focusIn: { '0': { + // @ts-ignore scale: 1, translateY: 0, }, @@ -63,6 +60,7 @@ class TabIcon extends React.Component { }, focusOut: { '0': { + // @ts-ignore scale: 1.2, translateY: 6, }, @@ -88,7 +86,7 @@ class TabIcon extends React.Component { ); } - render(): React.Node { + render() { const {props} = this; return ( { style={{ flex: 1, justifyContent: 'center', - borderRadius: 10 + borderRadius: 10, }}>