Improve tab components to match linter
This commit is contained in:
parent
0117b25cd8
commit
aa992d20b2
3 changed files with 417 additions and 350 deletions
|
|
@ -2,23 +2,44 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {withTheme} from 'react-native-paper';
|
||||
import TabIcon from "./TabIcon";
|
||||
import TabHomeIcon from "./TabHomeIcon";
|
||||
import {Animated} from 'react-native';
|
||||
import {Collapsible} from "react-navigation-collapsible";
|
||||
import Animated from 'react-native-reanimated';
|
||||
import {Collapsible} from 'react-navigation-collapsible';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import TabIcon from './TabIcon';
|
||||
import TabHomeIcon from './TabHomeIcon';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
state: Object,
|
||||
descriptors: Object,
|
||||
navigation: Object,
|
||||
theme: Object,
|
||||
collapsibleStack: Object,
|
||||
}
|
||||
type RouteType = {
|
||||
name: string,
|
||||
key: string,
|
||||
params: {collapsible: Collapsible},
|
||||
state: {
|
||||
index: number,
|
||||
routes: Array<RouteType>,
|
||||
},
|
||||
};
|
||||
|
||||
type State = {
|
||||
translateY: AnimatedValue,
|
||||
barSynced: boolean,
|
||||
}
|
||||
type PropsType = {
|
||||
state: {
|
||||
index: number,
|
||||
routes: Array<RouteType>,
|
||||
},
|
||||
descriptors: {
|
||||
[key: string]: {
|
||||
options: {
|
||||
tabBarLabel: string,
|
||||
title: string,
|
||||
},
|
||||
},
|
||||
},
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
|
||||
type StateType = {
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
translateY: any,
|
||||
};
|
||||
|
||||
const TAB_ICONS = {
|
||||
proxiwash: 'tshirt-crew',
|
||||
|
|
@ -27,29 +48,15 @@ const TAB_ICONS = {
|
|||
planex: 'clock',
|
||||
};
|
||||
|
||||
class CustomTabBar extends React.Component<Props, State> {
|
||||
|
||||
class CustomTabBar extends React.Component<PropsType, StateType> {
|
||||
static TAB_BAR_HEIGHT = 48;
|
||||
|
||||
state = {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
translateY: new Animated.Value(0),
|
||||
}
|
||||
|
||||
syncTabBar = (route, index) => {
|
||||
const state = this.props.state;
|
||||
const isFocused = state.index === index;
|
||||
if (isFocused) {
|
||||
const stackState = route.state;
|
||||
const stackRoute = stackState ? stackState.routes[stackState.index] : undefined;
|
||||
const params: { collapsible: Collapsible } = stackRoute ? stackRoute.params : undefined;
|
||||
const collapsible = params ? params.collapsible : undefined;
|
||||
if (collapsible) {
|
||||
this.setState({
|
||||
translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigates to the given route if it is different from the current one
|
||||
|
|
@ -58,14 +65,15 @@ class CustomTabBar extends React.Component<Props, State> {
|
|||
* @param currentIndex The current route index
|
||||
* @param destIndex The destination route index
|
||||
*/
|
||||
onItemPress(route: Object, currentIndex: number, destIndex: number) {
|
||||
const event = this.props.navigation.emit({
|
||||
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)
|
||||
this.props.navigation.navigate(route.name);
|
||||
navigation.navigate(route.name);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -73,16 +81,25 @@ class CustomTabBar extends React.Component<Props, State> {
|
|||
*
|
||||
* @param route
|
||||
*/
|
||||
onItemLongPress(route: Object) {
|
||||
const event = this.props.navigation.emit({
|
||||
onItemLongPress(route: RouteType) {
|
||||
const {navigation} = this.props;
|
||||
const event = navigation.emit({
|
||||
type: 'tabLongPress',
|
||||
target: route.key,
|
||||
canPreventDefault: true,
|
||||
});
|
||||
if (route.name === "home" && !event.defaultPrevented)
|
||||
this.props.navigation.navigate('game-start');
|
||||
if (route.name === 'home' && !event.defaultPrevented)
|
||||
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
|
||||
*
|
||||
|
|
@ -90,22 +107,13 @@ class CustomTabBar extends React.Component<Props, State> {
|
|||
* @param focused
|
||||
* @returns {null}
|
||||
*/
|
||||
tabBarIcon = (route, focused) => {
|
||||
getTabBarIcon = (route: RouteType, focused: boolean): React.Node => {
|
||||
let icon = TAB_ICONS[route.name];
|
||||
icon = focused ? icon : icon + ('-outline');
|
||||
if (route.name !== "home")
|
||||
return icon;
|
||||
else
|
||||
icon = focused ? icon : `${icon}-outline`;
|
||||
if (route.name !== 'home') return icon;
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds the active route and syncs the tab bar animation with the header bar
|
||||
*/
|
||||
onRouteChange = () => {
|
||||
this.props.state.routes.map(this.syncTabBar)
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a tab icon render.
|
||||
* If the given route is focused, it syncs the tab bar and header bar animations together
|
||||
|
|
@ -114,49 +122,79 @@ class CustomTabBar extends React.Component<Props, State> {
|
|||
* @param index The index of the current route
|
||||
* @returns {*}
|
||||
*/
|
||||
renderIcon = (route, index) => {
|
||||
const state = this.props.state;
|
||||
const {options} = this.props.descriptors[route.key];
|
||||
const label =
|
||||
options.tabBarLabel != null
|
||||
? options.tabBarLabel
|
||||
: options.title != null
|
||||
? options.title
|
||||
: route.name;
|
||||
getRenderIcon = (route: RouteType, index: number): React.Node => {
|
||||
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 onPress = () => {
|
||||
this.onItemPress(route, state.index, index);
|
||||
};
|
||||
const onLongPress = () => {
|
||||
this.onItemLongPress(route);
|
||||
};
|
||||
const isFocused = state.index === index;
|
||||
|
||||
const color = isFocused ? this.props.theme.colors.primary : this.props.theme.colors.tabIcon;
|
||||
if (route.name !== "home") {
|
||||
return <TabIcon
|
||||
const color = isFocused
|
||||
? props.theme.colors.primary
|
||||
: props.theme.colors.tabIcon;
|
||||
if (route.name !== 'home') {
|
||||
return (
|
||||
<TabIcon
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
icon={this.tabBarIcon(route, isFocused)}
|
||||
icon={this.getTabBarIcon(route, isFocused)}
|
||||
color={color}
|
||||
label={label}
|
||||
focused={isFocused}
|
||||
extraData={state.index > index}
|
||||
key={route.key}
|
||||
/>
|
||||
} else
|
||||
return <TabHomeIcon
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TabHomeIcon
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
focused={isFocused}
|
||||
key={route.key}
|
||||
tabBarHeight={CustomTabBar.TAB_BAR_HEIGHT}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
getIcons() {
|
||||
return this.props.state.routes.map(this.renderIcon);
|
||||
getIcons(): React.Node {
|
||||
const {props} = this;
|
||||
return props.state.routes.map(this.getRenderIcon);
|
||||
}
|
||||
|
||||
render() {
|
||||
this.props.navigation.addListener('state', this.onRouteChange);
|
||||
syncTabBar = (route: RouteType, index: number) => {
|
||||
const {state} = this.props;
|
||||
const isFocused = state.index === index;
|
||||
if (isFocused) {
|
||||
const stackState = route.state;
|
||||
const stackRoute =
|
||||
stackState != null ? stackState.routes[stackState.index] : null;
|
||||
const params: {collapsible: Collapsible} | null =
|
||||
stackRoute != null ? stackRoute.params : 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(): React.Node {
|
||||
const {props, state} = this;
|
||||
props.navigation.addListener('state', this.onRouteChange);
|
||||
const icons = this.getIcons();
|
||||
// $FlowFixMe
|
||||
return (
|
||||
<Animated.View
|
||||
useNativeDriver
|
||||
|
|
@ -167,10 +205,9 @@ class CustomTabBar extends React.Component<Props, State> {
|
|||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
backgroundColor: this.props.theme.colors.surface,
|
||||
transform: [{translateY: this.state.translateY}],
|
||||
}}
|
||||
>
|
||||
backgroundColor: props.theme.colors.surface,
|
||||
transform: [{translateY: state.translateY}],
|
||||
}}>
|
||||
{icons}
|
||||
</Animated.View>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,70 +1,95 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, Platform, View} from "react-native";
|
||||
import {Image, Platform, View} from 'react-native';
|
||||
import {FAB, TouchableRipple, withTheme} from 'react-native-paper';
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import FOCUSED_ICON from '../../../assets/tab-icon.png';
|
||||
import UNFOCUSED_ICON from '../../../assets/tab-icon-outline.png';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
focused: boolean,
|
||||
onPress: Function,
|
||||
onLongPress: Function,
|
||||
theme: Object,
|
||||
onPress: () => void,
|
||||
onLongPress: () => void,
|
||||
theme: CustomTheme,
|
||||
tabBarHeight: number,
|
||||
}
|
||||
};
|
||||
|
||||
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
|
||||
|
||||
/**
|
||||
* Abstraction layer for Agenda component, using custom configuration
|
||||
*/
|
||||
class TabHomeIcon extends React.Component<Props> {
|
||||
|
||||
focusedIcon = require('../../../assets/tab-icon.png');
|
||||
unFocusedIcon = require('../../../assets/tab-icon-outline.png');
|
||||
|
||||
constructor(props) {
|
||||
class TabHomeIcon extends React.Component<PropsType> {
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
Animatable.initializeRegistryWithDefinitions({
|
||||
fabFocusIn: {
|
||||
"0": {
|
||||
scale: 1, translateY: 0
|
||||
'0': {
|
||||
scale: 1,
|
||||
translateY: 0,
|
||||
},
|
||||
"0.9": {
|
||||
scale: 1.2, translateY: -9
|
||||
'0.9': {
|
||||
scale: 1.2,
|
||||
translateY: -9,
|
||||
},
|
||||
"1": {
|
||||
scale: 1.1, translateY: -7
|
||||
'1': {
|
||||
scale: 1.1,
|
||||
translateY: -7,
|
||||
},
|
||||
},
|
||||
fabFocusOut: {
|
||||
"0": {
|
||||
scale: 1.1, translateY: -6
|
||||
'0': {
|
||||
scale: 1.1,
|
||||
translateY: -6,
|
||||
},
|
||||
'1': {
|
||||
scale: 1,
|
||||
translateY: 0,
|
||||
},
|
||||
"1": {
|
||||
scale: 1, translateY: 0
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
iconRender = ({size, color}) =>
|
||||
this.props.focused
|
||||
? <Image
|
||||
source={this.focusedIcon}
|
||||
style={{width: size, height: size, tintColor: color}}
|
||||
/>
|
||||
: <Image
|
||||
source={this.unFocusedIcon}
|
||||
style={{width: size, height: size, tintColor: color}}
|
||||
/>;
|
||||
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
return (nextProps.focused !== this.props.focused);
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {focused} = this.props;
|
||||
return nextProps.focused !== focused;
|
||||
}
|
||||
|
||||
render(): React$Node {
|
||||
const props = this.props;
|
||||
getIconRender = ({
|
||||
size,
|
||||
color,
|
||||
}: {
|
||||
size: number,
|
||||
color: string,
|
||||
}): React.Node => {
|
||||
const {focused} = this.props;
|
||||
if (focused)
|
||||
return (
|
||||
<Image
|
||||
source={FOCUSED_ICON}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
tintColor: color,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Image
|
||||
source={UNFOCUSED_ICON}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
tintColor: color,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
|
|
@ -74,33 +99,35 @@ class TabHomeIcon extends React.Component<Props> {
|
|||
<TouchableRipple
|
||||
onPress={props.onPress}
|
||||
onLongPress={props.onLongPress}
|
||||
borderless={true}
|
||||
rippleColor={Platform.OS === 'android' ? this.props.theme.colors.primary : 'transparent'}
|
||||
borderless
|
||||
rippleColor={
|
||||
Platform.OS === 'android'
|
||||
? props.theme.colors.primary
|
||||
: 'transparent'
|
||||
}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: this.props.tabBarHeight + 30,
|
||||
height: props.tabBarHeight + 30,
|
||||
marginBottom: -15,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<AnimatedFAB
|
||||
duration={200}
|
||||
easing={"ease-out"}
|
||||
animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
|
||||
icon={this.iconRender}
|
||||
easing="ease-out"
|
||||
animation={props.focused ? 'fabFocusIn' : 'fabFocusOut'}
|
||||
icon={this.getIconRender}
|
||||
style={{
|
||||
marginTop: 15,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}}/>
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
/>
|
||||
</TouchableRipple>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default withTheme(TabHomeIcon);
|
||||
|
|
@ -1,53 +1,57 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {View} from "react-native";
|
||||
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 {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
type PropsType = {
|
||||
focused: boolean,
|
||||
color: string,
|
||||
label: string,
|
||||
icon: MaterialCommunityIconsGlyphs,
|
||||
onPress: Function,
|
||||
onLongPress: Function,
|
||||
theme: Object,
|
||||
extraData: any,
|
||||
}
|
||||
|
||||
onPress: () => void,
|
||||
onLongPress: () => void,
|
||||
theme: CustomTheme,
|
||||
extraData: null | boolean | number | string,
|
||||
};
|
||||
|
||||
/**
|
||||
* Abstraction layer for Agenda component, using custom configuration
|
||||
*/
|
||||
class TabIcon extends React.Component<Props> {
|
||||
|
||||
class TabIcon extends React.Component<PropsType> {
|
||||
firstRender: boolean;
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
Animatable.initializeRegistryWithDefinitions({
|
||||
focusIn: {
|
||||
"0": {
|
||||
scale: 1, translateY: 0
|
||||
'0': {
|
||||
scale: 1,
|
||||
translateY: 0,
|
||||
},
|
||||
"0.9": {
|
||||
scale: 1.3, translateY: 7
|
||||
'0.9': {
|
||||
scale: 1.3,
|
||||
translateY: 7,
|
||||
},
|
||||
"1": {
|
||||
scale: 1.2, translateY: 6
|
||||
'1': {
|
||||
scale: 1.2,
|
||||
translateY: 6,
|
||||
},
|
||||
},
|
||||
focusOut: {
|
||||
"0": {
|
||||
scale: 1.2, translateY: 6
|
||||
'0': {
|
||||
scale: 1.2,
|
||||
translateY: 6,
|
||||
},
|
||||
'1': {
|
||||
scale: 1,
|
||||
translateY: 0,
|
||||
},
|
||||
"1": {
|
||||
scale: 1, translateY: 0
|
||||
},
|
||||
}
|
||||
});
|
||||
this.firstRender = true;
|
||||
}
|
||||
|
|
@ -56,32 +60,33 @@ class TabIcon extends React.Component<Props> {
|
|||
this.firstRender = false;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
return (nextProps.focused !== this.props.focused)
|
||||
|| (nextProps.theme.dark !== this.props.theme.dark)
|
||||
|| (nextProps.extraData !== this.props.extraData);
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return (
|
||||
nextProps.focused !== props.focused ||
|
||||
nextProps.theme.dark !== props.theme.dark ||
|
||||
nextProps.extraData !== props.extraData
|
||||
);
|
||||
}
|
||||
|
||||
render(): React$Node {
|
||||
const props = this.props;
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<TouchableRipple
|
||||
onPress={props.onPress}
|
||||
onLongPress={props.onLongPress}
|
||||
borderless={true}
|
||||
rippleColor={this.props.theme.colors.primary}
|
||||
borderless
|
||||
rippleColor={props.theme.colors.primary}
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<View>
|
||||
<Animatable.View
|
||||
duration={200}
|
||||
easing={"ease-out"}
|
||||
animation={props.focused ? "focusIn" : "focusOut"}
|
||||
useNativeDriver
|
||||
>
|
||||
easing="ease-out"
|
||||
animation={props.focused ? 'focusIn' : 'focusOut'}
|
||||
useNativeDriver>
|
||||
<MaterialCommunityIcons
|
||||
name={props.icon}
|
||||
color={props.color}
|
||||
|
|
@ -93,16 +98,14 @@ class TabIcon extends React.Component<Props> {
|
|||
/>
|
||||
</Animatable.View>
|
||||
<Animatable.Text
|
||||
animation={props.focused ? "fadeOutDown" : "fadeIn"}
|
||||
animation={props.focused ? 'fadeOutDown' : 'fadeIn'}
|
||||
useNativeDriver
|
||||
|
||||
style={{
|
||||
color: props.color,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
fontSize: 10,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{props.label}
|
||||
</Animatable.Text>
|
||||
</View>
|
||||
|
|
|
|||
Loading…
Reference in a new issue