Show attention seeker when no group selected

This commit is contained in:
Arnaud Vergnet 2020-04-16 19:26:40 +02:00
parent cb1aa8bcf2
commit 9c6ebad502
3 changed files with 12 additions and 4 deletions

View file

@ -38,6 +38,7 @@
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
"react-native-animatable": "^1.3.3",
"react-native-app-intro-slider": "^4.0.0", "react-native-app-intro-slider": "^4.0.0",
"react-native-appearance": "~0.3.3", "react-native-appearance": "~0.3.3",
"react-native-autolink": "^3.0.0", "react-native-autolink": "^3.0.0",

View file

@ -4,12 +4,15 @@ import * as React from 'react';
import {StyleSheet, View} from "react-native"; import {StyleSheet, View} from "react-native";
import {FAB, IconButton, Surface, withTheme} from "react-native-paper"; import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
import AutoHideComponent from "./AutoHideComponent"; import AutoHideComponent from "./AutoHideComponent";
import * as Animatable from 'react-native-animatable';
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
type Props = { type Props = {
navigation: Object, navigation: Object,
theme: Object, theme: Object,
onPress: Function, onPress: Function,
currentGroup: string, seekAttention: boolean,
} }
type State = { type State = {
@ -42,7 +45,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
} }
shouldComponentUpdate(nextProps: Props, nextState: State) { shouldComponentUpdate(nextProps: Props, nextState: State) {
return (nextProps.currentGroup !== this.props.currentGroup) return (nextProps.seekAttention !== this.props.seekAttention)
|| (nextState.currentMode !== this.state.currentMode); || (nextState.currentMode !== this.state.currentMode);
} }
@ -76,7 +79,11 @@ class AnimatedBottomBar extends React.Component<Props, State> {
style={styles.container}> style={styles.container}>
<Surface style={styles.surface}> <Surface style={styles.surface}>
<View style={styles.fabContainer}> <View style={styles.fabContainer}>
<FAB <AnimatedFAB
animation={this.props.seekAttention ? "jello" : undefined}
easing="ease-out"
iterationCount="infinite"
// useNativeDriver={true}
style={styles.fab} style={styles.fab}
icon="account-clock" icon="account-clock"
onPress={() => this.props.navigation.navigate('group-select')} onPress={() => this.props.navigation.navigate('group-select')}

View file

@ -336,7 +336,7 @@ class PlanexScreen extends React.Component<Props, State> {
{...this.props} {...this.props}
ref={this.barRef} ref={this.barRef}
onPress={this.sendMessage} onPress={this.sendMessage}
currentGroup={this.state.currentGroup.name} seekAttention={this.state.currentGroup.id === -1}
/> />
</View> </View>
); );