Improve collapsible components to match linter

src/components/Collapsible/CollapsibleComponent.js

@@ -1,51 +1,59 @@
 // @flow
 
 import * as React from 'react';
-import {withCollapsible} from "../../utils/withCollapsible";
+import {Collapsible} from 'react-navigation-collapsible';
-import {Collapsible} from "react-navigation-collapsible";
+import {withCollapsible} from '../../utils/withCollapsible';
-import CustomTabBar from "../Tabbar/CustomTabBar";
+import CustomTabBar from '../Tabbar/CustomTabBar';
 
-export type CollapsibleComponentProps = {
+export type CollapsibleComponentPropsType = {
-    children?: React.Node,
+  children?: React.Node,
-    hasTab?: boolean,
+  hasTab?: boolean,
-    onScroll?: (event: SyntheticEvent<EventTarget>) => void,
+  onScroll?: (event: SyntheticEvent<EventTarget>) => void,
 };
 
-type Props = {
+type PropsType = {
-    ...CollapsibleComponentProps,
+  ...CollapsibleComponentPropsType,
-    collapsibleStack: Collapsible,
+  collapsibleStack: Collapsible,
-    component: any,
+  // eslint-disable-next-line flowtype/no-weak-types
-}
+  component: any,
+};
 
-class CollapsibleComponent extends React.Component<Props> {
+class CollapsibleComponent extends React.Component<PropsType> {
+  static defaultProps = {
+    children: null,
+    hasTab: false,
+    onScroll: null,
+  };
 
-    static defaultProps = {
+  onScroll = (event: SyntheticEvent<EventTarget>) => {
-        hasTab: false,
+    const {props} = this;
-    }
+    if (props.onScroll) props.onScroll(event);
+  };
 
-    onScroll = (event: SyntheticEvent<EventTarget>) => {
+  render(): React.Node {
-        if (this.props.onScroll)
+    const {props} = this;
-            this.props.onScroll(event);
+    const Comp = props.component;
-    }
+    const {
+      containerPaddingTop,
+      scrollIndicatorInsetTop,
+      onScrollWithListener,
+    } = props.collapsibleStack;
 
-    render() {
+    return (
-        const Comp = this.props.component;
+      <Comp
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
+        // eslint-disable-next-line react/jsx-props-no-spreading
-        return (
+        {...props}
-            <Comp
+        onScroll={onScrollWithListener(this.onScroll)}
-                {...this.props}
+        contentContainerStyle={{
-                onScroll={onScrollWithListener(this.onScroll)}
+          paddingTop: containerPaddingTop,
-                contentContainerStyle={{
+          paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
-                    paddingTop: containerPaddingTop,
+          minHeight: '100%',
-                    paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
+        }}
-                    minHeight: '100%'
+        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
-                }}
+        {props.children}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+      </Comp>
-            >
+    );
-                {this.props.children}
+  }
-            </Comp>
-        );
-    }
 }
 
 export default withCollapsible(CollapsibleComponent);

src/components/Collapsible/CollapsibleFlatList.js

@@ -1,26 +1,26 @@
 // @flow
 
 import * as React from 'react';
-import {Animated} from "react-native";
+import {Animated} from 'react-native';
-import type {CollapsibleComponentProps} from "./CollapsibleComponent";
+import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
-import CollapsibleComponent from "./CollapsibleComponent";
+import CollapsibleComponent from './CollapsibleComponent';
 
-type Props = {
+type PropsType = {
-    ...CollapsibleComponentProps
+  ...CollapsibleComponentPropsType,
-}
+};
 
-class CollapsibleFlatList extends React.Component<Props> {
+// eslint-disable-next-line react/prefer-stateless-function
-
+class CollapsibleFlatList extends React.Component<PropsType> {
-    render() {
+  render(): React.Node {
-        return (
+    const {props} = this;
-            <CollapsibleComponent
+    return (
-                {...this.props}
+      <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
-                component={Animated.FlatList}
+        {...props}
-            >
+        component={Animated.FlatList}>
-                {this.props.children}
+        {props.children}
-            </CollapsibleComponent>
+      </CollapsibleComponent>
-        );
+    );
-    }
+  }
 }
 
 export default CollapsibleFlatList;

src/components/Collapsible/CollapsibleScrollView.js

@@ -1,26 +1,26 @@
 // @flow
 
 import * as React from 'react';
-import {Animated} from "react-native";
+import {Animated} from 'react-native';
-import type {CollapsibleComponentProps} from "./CollapsibleComponent";
+import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
-import CollapsibleComponent from "./CollapsibleComponent";
+import CollapsibleComponent from './CollapsibleComponent';
 
-type Props = {
+type PropsType = {
-    ...CollapsibleComponentProps
+  ...CollapsibleComponentPropsType,
-}
+};
 
-class CollapsibleScrollView extends React.Component<Props> {
+// eslint-disable-next-line react/prefer-stateless-function
-
+class CollapsibleScrollView extends React.Component<PropsType> {
-    render() {
+  render(): React.Node {
-        return (
+    const {props} = this;
-            <CollapsibleComponent
+    return (
-                {...this.props}
+      <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
-                component={Animated.ScrollView}
+        {...props}
-            >
+        component={Animated.ScrollView}>
-                {this.props.children}
+        {props.children}
-            </CollapsibleComponent>
+      </CollapsibleComponent>
-        );
+    );
-    }
+  }
 }
 
 export default CollapsibleScrollView;

src/components/Collapsible/CollapsibleSectionList.js

@@ -1,26 +1,26 @@
 // @flow
 
 import * as React from 'react';
-import {Animated} from "react-native";
+import {Animated} from 'react-native';
-import type {CollapsibleComponentProps} from "./CollapsibleComponent";
+import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
-import CollapsibleComponent from "./CollapsibleComponent";
+import CollapsibleComponent from './CollapsibleComponent';
 
-type Props = {
+type PropsType = {
-    ...CollapsibleComponentProps
+  ...CollapsibleComponentPropsType,
-}
+};
 
-class CollapsibleSectionList extends React.Component<Props> {
+// eslint-disable-next-line react/prefer-stateless-function
-
+class CollapsibleSectionList extends React.Component<PropsType> {
-    render() {
+  render(): React.Node {
-        return (
+    const {props} = this;
-            <CollapsibleComponent
+    return (
-                {...this.props}
+      <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
-                component={Animated.SectionList}
+        {...props}
-            >
+        component={Animated.SectionList}>
-                {this.props.children}
+        {props.children}
-            </CollapsibleComponent>
+      </CollapsibleComponent>
-        );
+    );
-    }
+  }
 }
 
 export default CollapsibleSectionList;