Improve animated components to match linter

src/components/Animations/AnimatedAccordion.js

@@ -1,101 +1,114 @@
 // @flow
 
 import * as React from 'react';
-import {View} from "react-native";
+import {View} from 'react-native';
 import {List, withTheme} from 'react-native-paper';
-import Collapsible from "react-native-collapsible";
+import Collapsible from 'react-native-collapsible';
-import * as Animatable from "react-native-animatable";
+import * as Animatable from 'react-native-animatable';
-import type {CustomTheme} from "../../managers/ThemeManager";
+import type {CustomTheme} from '../../managers/ThemeManager';
 
-type Props = {
+type PropsType = {
   theme: CustomTheme,
   title: string,
   subtitle?: string,
-    left?: (props: { [keys: string]: any }) =>  React.Node,
+  left?: () => React.Node,
   opened?: boolean,
-    unmountWhenCollapsed: boolean,
+  unmountWhenCollapsed?: boolean,
   children?: React.Node,
-}
+};
 
-type State = {
+type StateType = {
   expanded: boolean,
-}
+};
 
 const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
 
-class AnimatedAccordion extends React.Component<Props, State> {
+class AnimatedAccordion extends React.Component<PropsType, StateType> {
-
   static defaultProps = {
+    subtitle: '',
+    left: null,
+    opened: null,
     unmountWhenCollapsed: false,
-    }
+    children: null,
+  };
+
   chevronRef: {current: null | AnimatedListIcon};
+
   chevronIcon: string;
+
   animStart: string;
+
   animEnd: string;
 
-    state = {
+  constructor(props: PropsType) {
-        expanded: this.props.opened != null ? this.props.opened : false,
-    }
-
-    constructor(props) {
     super(props);
+    this.state = {
+      expanded: props.opened != null ? props.opened : false,
+    };
     this.chevronRef = React.createRef();
     this.setupChevron();
   }
 
+  shouldComponentUpdate(nextProps: PropsType): boolean {
+    const {state, props} = this;
+    if (nextProps.opened != null && nextProps.opened !== props.opened)
+      state.expanded = nextProps.opened;
+    return true;
+  }
+
   setupChevron() {
-        if (this.state.expanded) {
+    const {state} = this;
-            this.chevronIcon = "chevron-up";
+    if (state.expanded) {
-            this.animStart = "180deg";
+      this.chevronIcon = 'chevron-up';
-            this.animEnd = "0deg";
+      this.animStart = '180deg';
+      this.animEnd = '0deg';
     } else {
-            this.chevronIcon = "chevron-down";
+      this.chevronIcon = 'chevron-down';
-            this.animStart = "0deg";
+      this.animStart = '0deg';
-            this.animEnd = "180deg";
+      this.animEnd = '180deg';
     }
   }
 
   toggleAccordion = () => {
+    const {state} = this;
     if (this.chevronRef.current != null) {
-            this.chevronRef.current.transitionTo({rotate: this.state.expanded ? this.animStart : this.animEnd});
+      this.chevronRef.current.transitionTo({
-            this.setState({expanded: !this.state.expanded})
+        rotate: state.expanded ? this.animStart : this.animEnd,
+      });
+      this.setState({expanded: !state.expanded});
     }
   };
 
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+  render(): React.Node {
-        if (nextProps.opened != null && nextProps.opened !== this.props.opened)
+    const {props, state} = this;
-            this.state.expanded = nextProps.opened;
+    const {colors} = props.theme;
-        return true;
-    }
-
-    render() {
-        const colors = this.props.theme.colors;
     return (
       <View>
         <List.Item
-                    {...this.props}
+          title={props.title}
-                    title={this.props.title}
+          subtitle={props.subtitle}
-                    subtitle={this.props.subtitle}
+          titleStyle={state.expanded ? {color: colors.primary} : undefined}
-                    titleStyle={this.state.expanded ? {color: colors.primary} : undefined}
           onPress={this.toggleAccordion}
-                    right={(props) => <AnimatedListIcon
+          right={({size}: {size: number}): React.Node => (
+            <AnimatedListIcon
               ref={this.chevronRef}
-                        {...props}
+              size={size}
               icon={this.chevronIcon}
-                        color={this.state.expanded ? colors.primary : undefined}
+              color={state.expanded ? colors.primary : undefined}
               useNativeDriver
-                    />}
-                    left={this.props.left}
             />
-                <Collapsible collapsed={!this.state.expanded}>
+          )}
-                    {!this.props.unmountWhenCollapsed || (this.props.unmountWhenCollapsed && this.state.expanded)
+          left={props.left}
-                        ? this.props.children
+        />
+        <Collapsible collapsed={!state.expanded}>
+          {!props.unmountWhenCollapsed ||
+          (props.unmountWhenCollapsed && state.expanded)
+            ? props.children
             : null}
         </Collapsible>
       </View>
     );
   }
-
 }
 
 export default withTheme(AnimatedAccordion);

src/components/Animations/AnimatedBottomBar.js

@@ -1,143 +1,33 @@
 // @flow
 
 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 AutoHideHandler from "../../utils/AutoHideHandler";
 import * as Animatable from 'react-native-animatable';
-import CustomTabBar from "../Tabbar/CustomTabBar";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {StackNavigationProp} from "@react-navigation/stack";
+import AutoHideHandler from '../../utils/AutoHideHandler';
-import type {CustomTheme} from "../../managers/ThemeManager";
+import CustomTabBar from '../Tabbar/CustomTabBar';
+import type {CustomTheme} from '../../managers/ThemeManager';
 
 const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
   theme: CustomTheme,
-    onPress: (action: string, data: any) => void,
+  onPress: (action: string, data?: string) => void,
   seekAttention: boolean,
-}
+};
 
-type State = {
+type StateType = {
   currentMode: string,
-}
+};
 
 const DISPLAY_MODES = {
-    DAY: "agendaDay",
+  DAY: 'agendaDay',
-    WEEK: "agendaWeek",
+  WEEK: 'agendaWeek',
-    MONTH: "month",
+  MONTH: 'month',
-}
-
-class AnimatedBottomBar extends React.Component<Props, State> {
-
-    ref: { current: null | Animatable.View };
-    hideHandler: AutoHideHandler;
-
-    displayModeIcons: { [key: string]: string };
-
-    state = {
-        currentMode: DISPLAY_MODES.WEEK,
-    }
-
-    constructor() {
-        super();
-        this.ref = React.createRef();
-        this.hideHandler = new AutoHideHandler(false);
-        this.hideHandler.addListener(this.onHideChange);
-
-        this.displayModeIcons = {};
-        this.displayModeIcons[DISPLAY_MODES.DAY] = "calendar-text";
-        this.displayModeIcons[DISPLAY_MODES.WEEK] = "calendar-week";
-        this.displayModeIcons[DISPLAY_MODES.MONTH] = "calendar-range";
-    }
-
-    shouldComponentUpdate(nextProps: Props, nextState: State) {
-        return (nextProps.seekAttention !== this.props.seekAttention)
-            || (nextState.currentMode !== this.state.currentMode);
-    }
-
-    onHideChange = (shouldHide: boolean) => {
-        if (this.ref.current != null) {
-            if (shouldHide)
-                this.ref.current.fadeOutDown(500);
-            else
-                this.ref.current.fadeInUp(500);
-        }
-    }
-
-    onScroll = (event: SyntheticEvent<EventTarget>) => {
-        this.hideHandler.onScroll(event);
 };
 
-    changeDisplayMode = () => {
-        let newMode;
-        switch (this.state.currentMode) {
-            case DISPLAY_MODES.DAY:
-                newMode = DISPLAY_MODES.WEEK;
-                break;
-            case DISPLAY_MODES.WEEK:
-                newMode = DISPLAY_MODES.MONTH;
-
-                break;
-            case DISPLAY_MODES.MONTH:
-                newMode = DISPLAY_MODES.DAY;
-                break;
-        }
-        this.setState({currentMode: newMode});
-        this.props.onPress("changeView", newMode);
-    };
-
-    render() {
-        const buttonColor = this.props.theme.colors.primary;
-        return (
-            <Animatable.View
-                ref={this.ref}
-                useNativeDriver
-                style={{
-                    ...styles.container,
-                    bottom: 10 + CustomTabBar.TAB_BAR_HEIGHT
-                }}>
-                <Surface style={styles.surface}>
-                    <View style={styles.fabContainer}>
-                        <AnimatedFAB
-                            animation={this.props.seekAttention ? "bounce" : undefined}
-                            easing="ease-out"
-                            iterationDelay={500}
-                            iterationCount="infinite"
-                            useNativeDriver
-                            style={styles.fab}
-                            icon="account-clock"
-                            onPress={() => this.props.navigation.navigate('group-select')}
-                        />
-                    </View>
-                    <View style={{flexDirection: 'row'}}>
-                        <IconButton
-                            icon={this.displayModeIcons[this.state.currentMode]}
-                            color={buttonColor}
-                            onPress={this.changeDisplayMode}/>
-                        <IconButton
-                            icon="clock-in"
-                            color={buttonColor}
-                            style={{marginLeft: 5}}
-                            onPress={() => this.props.onPress('today', undefined)}/>
-                    </View>
-                    <View style={{flexDirection: 'row'}}>
-                        <IconButton
-                            icon="chevron-left"
-                            color={buttonColor}
-                            onPress={() => this.props.onPress('prev', undefined)}/>
-                        <IconButton
-                            icon="chevron-right"
-                            color={buttonColor}
-                            style={{marginLeft: 5}}
-                            onPress={() => this.props.onPress('next', undefined)}/>
-                    </View>
-                </Surface>
-            </Animatable.View>
-        );
-    }
-}
-
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
@@ -153,18 +43,136 @@ const styles = StyleSheet.create({
     elevation: 2,
   },
   fabContainer: {
-        position: "absolute",
+    position: 'absolute',
     left: 0,
     right: 0,
-        alignItems: "center",
+    alignItems: 'center',
     width: '100%',
-        height: '100%'
+    height: '100%',
   },
   fab: {
     position: 'absolute',
     alignSelf: 'center',
     top: '-25%',
-    }
+  },
 });
 
+class AnimatedBottomBar extends React.Component<PropsType, StateType> {
+  ref: {current: null | Animatable.View};
+
+  hideHandler: AutoHideHandler;
+
+  displayModeIcons: {[key: string]: string};
+
+  constructor() {
+    super();
+    this.state = {
+      currentMode: DISPLAY_MODES.WEEK,
+    };
+    this.ref = React.createRef();
+    this.hideHandler = new AutoHideHandler(false);
+    this.hideHandler.addListener(this.onHideChange);
+
+    this.displayModeIcons = {};
+    this.displayModeIcons[DISPLAY_MODES.DAY] = 'calendar-text';
+    this.displayModeIcons[DISPLAY_MODES.WEEK] = 'calendar-week';
+    this.displayModeIcons[DISPLAY_MODES.MONTH] = 'calendar-range';
+  }
+
+  shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
+    const {props, state} = this;
+    return (
+      nextProps.seekAttention !== props.seekAttention ||
+      nextState.currentMode !== state.currentMode
+    );
+  }
+
+  onHideChange = (shouldHide: boolean) => {
+    if (this.ref.current != null) {
+      if (shouldHide) this.ref.current.fadeOutDown(500);
+      else this.ref.current.fadeInUp(500);
+    }
+  };
+
+  onScroll = (event: SyntheticEvent<EventTarget>) => {
+    this.hideHandler.onScroll(event);
+  };
+
+  changeDisplayMode = () => {
+    const {props, state} = this;
+    let newMode;
+    switch (state.currentMode) {
+      case DISPLAY_MODES.DAY:
+        newMode = DISPLAY_MODES.WEEK;
+        break;
+      case DISPLAY_MODES.WEEK:
+        newMode = DISPLAY_MODES.MONTH;
+        break;
+      case DISPLAY_MODES.MONTH:
+        newMode = DISPLAY_MODES.DAY;
+        break;
+      default:
+        newMode = DISPLAY_MODES.WEEK;
+        break;
+    }
+    this.setState({currentMode: newMode});
+    props.onPress('changeView', newMode);
+  };
+
+  render(): React.Node {
+    const {props, state} = this;
+    const buttonColor = props.theme.colors.primary;
+    return (
+      <Animatable.View
+        ref={this.ref}
+        useNativeDriver
+        style={{
+          ...styles.container,
+          bottom: 10 + CustomTabBar.TAB_BAR_HEIGHT,
+        }}>
+        <Surface style={styles.surface}>
+          <View style={styles.fabContainer}>
+            <AnimatedFAB
+              animation={props.seekAttention ? 'bounce' : undefined}
+              easing="ease-out"
+              iterationDelay={500}
+              iterationCount="infinite"
+              useNativeDriver
+              style={styles.fab}
+              icon="account-clock"
+              onPress={(): void => props.navigation.navigate('group-select')}
+            />
+          </View>
+          <View style={{flexDirection: 'row'}}>
+            <IconButton
+              icon={this.displayModeIcons[state.currentMode]}
+              color={buttonColor}
+              onPress={this.changeDisplayMode}
+            />
+            <IconButton
+              icon="clock-in"
+              color={buttonColor}
+              style={{marginLeft: 5}}
+              onPress={(): void => props.onPress('today')}
+            />
+          </View>
+          <View style={{flexDirection: 'row'}}>
+            <IconButton
+              icon="chevron-left"
+              color={buttonColor}
+              onPress={(): void => props.onPress('prev')}
+            />
+            <IconButton
+              icon="chevron-right"
+              color={buttonColor}
+              style={{marginLeft: 5}}
+              onPress={(): void => props.onPress('next')}
+            />
+          </View>
+        </Surface>
+      </Animatable.View>
+    );
+  }
+}
+
 export default withTheme(AnimatedBottomBar);

src/components/Animations/AnimatedFAB.js

@@ -1,24 +1,30 @@
 // @flow
 
 import * as React from 'react';
-import {StyleSheet} from "react-native";
+import {StyleSheet} from 'react-native';
-import {FAB} from "react-native-paper";
+import {FAB} from 'react-native-paper';
-import AutoHideHandler from "../../utils/AutoHideHandler";
 import * as Animatable from 'react-native-animatable';
-import CustomTabBar from "../Tabbar/CustomTabBar";
+import AutoHideHandler from '../../utils/AutoHideHandler';
-import {StackNavigationProp} from "@react-navigation/stack";
+import CustomTabBar from '../Tabbar/CustomTabBar';
 
-type Props = {
+type PropsType = {
-    navigation: StackNavigationProp,
   icon: string,
   onPress: () => void,
-}
+};
 
 const AnimatedFab = Animatable.createAnimatableComponent(FAB);
 
-export default class AnimatedFAB extends React.Component<Props> {
+const styles = StyleSheet.create({
+  fab: {
+    position: 'absolute',
+    margin: 16,
+    right: 0,
+  },
+});
 
+export default class AnimatedFAB extends React.Component<PropsType> {
   ref: {current: null | Animatable.View};
+
   hideHandler: AutoHideHandler;
 
   constructor() {
@@ -34,33 +40,24 @@ export default class AnimatedFAB extends React.Component<Props> {
 
   onHideChange = (shouldHide: boolean) => {
     if (this.ref.current != null) {
-            if (shouldHide)
+      if (shouldHide) this.ref.current.bounceOutDown(1000);
-                this.ref.current.bounceOutDown(1000);
+      else this.ref.current.bounceInUp(1000);
-            else
-                this.ref.current.bounceInUp(1000);
-        }
     }
+  };
 
-    render() {
+  render(): React.Node {
+    const {props} = this;
     return (
       <AnimatedFab
         ref={this.ref}
         useNativeDriver
-                icon={this.props.icon}
+        icon={props.icon}
-                onPress={this.props.onPress}
+        onPress={props.onPress}
         style={{
           ...styles.fab,
-                    bottom: CustomTabBar.TAB_BAR_HEIGHT
+          bottom: CustomTabBar.TAB_BAR_HEIGHT,
         }}
       />
     );
   }
 }
-
-const styles = StyleSheet.create({
-    fab: {
-        position: 'absolute',
-        margin: 16,
-        right: 0,
-    },
-});