Browse Source

Show attention seeker when no group selected

Arnaud Vergnet 4 years ago
parent
commit
9c6ebad502
3 changed files with 12 additions and 4 deletions
  1. 1
    0
      package.json
  2. 10
    3
      src/components/Custom/AnimatedBottomBar.js
  3. 1
    1
      src/screens/Websites/PlanexScreen.js

+ 1
- 0
package.json View File

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

+ 10
- 3
src/components/Custom/AnimatedBottomBar.js View File

@@ -4,12 +4,15 @@ import * as React from 'react';
4 4
 import {StyleSheet, View} from "react-native";
5 5
 import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
6 6
 import AutoHideComponent from "./AutoHideComponent";
7
+import * as Animatable from 'react-native-animatable';
8
+
9
+const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
7 10
 
8 11
 type Props = {
9 12
     navigation: Object,
10 13
     theme: Object,
11 14
     onPress: Function,
12
-    currentGroup: string,
15
+    seekAttention: boolean,
13 16
 }
14 17
 
15 18
 type State = {
@@ -42,7 +45,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
42 45
     }
43 46
 
44 47
     shouldComponentUpdate(nextProps: Props, nextState: State) {
45
-        return (nextProps.currentGroup !== this.props.currentGroup)
48
+        return (nextProps.seekAttention !== this.props.seekAttention)
46 49
             || (nextState.currentMode !== this.state.currentMode);
47 50
     }
48 51
 
@@ -76,7 +79,11 @@ class AnimatedBottomBar extends React.Component<Props, State> {
76 79
                 style={styles.container}>
77 80
                 <Surface style={styles.surface}>
78 81
                     <View style={styles.fabContainer}>
79
-                        <FAB
82
+                        <AnimatedFAB
83
+                            animation={this.props.seekAttention ? "jello" : undefined}
84
+                            easing="ease-out"
85
+                            iterationCount="infinite"
86
+                            // useNativeDriver={true}
80 87
                             style={styles.fab}
81 88
                             icon="account-clock"
82 89
                             onPress={() => this.props.navigation.navigate('group-select')}

+ 1
- 1
src/screens/Websites/PlanexScreen.js View File

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

Loading…
Cancel
Save