Browse Source

Improve collapsible components to match linter

Arnaud Vergnet 3 years ago
parent
commit
34ccf9c4c9

+ 50
- 42
src/components/Collapsible/CollapsibleComponent.js View File

@@ -1,51 +1,59 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {withCollapsible} from "../../utils/withCollapsible";
5
-import {Collapsible} from "react-navigation-collapsible";
6
-import CustomTabBar from "../Tabbar/CustomTabBar";
7
-
8
-export type CollapsibleComponentProps = {
9
-    children?: React.Node,
10
-    hasTab?: boolean,
11
-    onScroll?: (event: SyntheticEvent<EventTarget>) => void,
4
+import {Collapsible} from 'react-navigation-collapsible';
5
+import {withCollapsible} from '../../utils/withCollapsible';
6
+import CustomTabBar from '../Tabbar/CustomTabBar';
7
+
8
+export type CollapsibleComponentPropsType = {
9
+  children?: React.Node,
10
+  hasTab?: boolean,
11
+  onScroll?: (event: SyntheticEvent<EventTarget>) => void,
12 12
 };
13 13
 
14
-type Props = {
15
-    ...CollapsibleComponentProps,
16
-    collapsibleStack: Collapsible,
17
-    component: any,
18
-}
14
+type PropsType = {
15
+  ...CollapsibleComponentPropsType,
16
+  collapsibleStack: Collapsible,
17
+  // eslint-disable-next-line flowtype/no-weak-types
18
+  component: any,
19
+};
19 20
 
20
-class CollapsibleComponent extends React.Component<Props> {
21
-
22
-    static defaultProps = {
23
-        hasTab: false,
24
-    }
25
-
26
-    onScroll = (event: SyntheticEvent<EventTarget>) => {
27
-        if (this.props.onScroll)
28
-            this.props.onScroll(event);
29
-    }
30
-
31
-    render() {
32
-        const Comp = this.props.component;
33
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
34
-        return (
35
-            <Comp
36
-                {...this.props}
37
-                onScroll={onScrollWithListener(this.onScroll)}
38
-                contentContainerStyle={{
39
-                    paddingTop: containerPaddingTop,
40
-                    paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
41
-                    minHeight: '100%'
42
-                }}
43
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
44
-            >
45
-                {this.props.children}
46
-            </Comp>
47
-        );
48
-    }
21
+class CollapsibleComponent extends React.Component<PropsType> {
22
+  static defaultProps = {
23
+    children: null,
24
+    hasTab: false,
25
+    onScroll: null,
26
+  };
27
+
28
+  onScroll = (event: SyntheticEvent<EventTarget>) => {
29
+    const {props} = this;
30
+    if (props.onScroll) props.onScroll(event);
31
+  };
32
+
33
+  render(): React.Node {
34
+    const {props} = this;
35
+    const Comp = props.component;
36
+    const {
37
+      containerPaddingTop,
38
+      scrollIndicatorInsetTop,
39
+      onScrollWithListener,
40
+    } = props.collapsibleStack;
41
+
42
+    return (
43
+      <Comp
44
+        // eslint-disable-next-line react/jsx-props-no-spreading
45
+        {...props}
46
+        onScroll={onScrollWithListener(this.onScroll)}
47
+        contentContainerStyle={{
48
+          paddingTop: containerPaddingTop,
49
+          paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
50
+          minHeight: '100%',
51
+        }}
52
+        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
53
+        {props.children}
54
+      </Comp>
55
+    );
56
+  }
49 57
 }
50 58
 
51 59
 export default withCollapsible(CollapsibleComponent);

+ 18
- 18
src/components/Collapsible/CollapsibleFlatList.js View File

@@ -1,26 +1,26 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated} from "react-native";
5
-import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
-import CollapsibleComponent from "./CollapsibleComponent";
4
+import {Animated} from 'react-native';
5
+import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
6
+import CollapsibleComponent from './CollapsibleComponent';
7 7
 
8
-type Props = {
9
-    ...CollapsibleComponentProps
10
-}
11
-
12
-class CollapsibleFlatList extends React.Component<Props> {
8
+type PropsType = {
9
+  ...CollapsibleComponentPropsType,
10
+};
13 11
 
14
-    render() {
15
-        return (
16
-            <CollapsibleComponent
17
-                {...this.props}
18
-                component={Animated.FlatList}
19
-            >
20
-                {this.props.children}
21
-            </CollapsibleComponent>
22
-        );
23
-    }
12
+// eslint-disable-next-line react/prefer-stateless-function
13
+class CollapsibleFlatList extends React.Component<PropsType> {
14
+  render(): React.Node {
15
+    const {props} = this;
16
+    return (
17
+      <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
18
+        {...props}
19
+        component={Animated.FlatList}>
20
+        {props.children}
21
+      </CollapsibleComponent>
22
+    );
23
+  }
24 24
 }
25 25
 
26 26
 export default CollapsibleFlatList;

+ 18
- 18
src/components/Collapsible/CollapsibleScrollView.js View File

@@ -1,26 +1,26 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated} from "react-native";
5
-import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
-import CollapsibleComponent from "./CollapsibleComponent";
4
+import {Animated} from 'react-native';
5
+import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
6
+import CollapsibleComponent from './CollapsibleComponent';
7 7
 
8
-type Props = {
9
-    ...CollapsibleComponentProps
10
-}
11
-
12
-class CollapsibleScrollView extends React.Component<Props> {
8
+type PropsType = {
9
+  ...CollapsibleComponentPropsType,
10
+};
13 11
 
14
-    render() {
15
-        return (
16
-            <CollapsibleComponent
17
-                {...this.props}
18
-                component={Animated.ScrollView}
19
-            >
20
-                {this.props.children}
21
-            </CollapsibleComponent>
22
-        );
23
-    }
12
+// eslint-disable-next-line react/prefer-stateless-function
13
+class CollapsibleScrollView extends React.Component<PropsType> {
14
+  render(): React.Node {
15
+    const {props} = this;
16
+    return (
17
+      <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
18
+        {...props}
19
+        component={Animated.ScrollView}>
20
+        {props.children}
21
+      </CollapsibleComponent>
22
+    );
23
+  }
24 24
 }
25 25
 
26 26
 export default CollapsibleScrollView;

+ 18
- 18
src/components/Collapsible/CollapsibleSectionList.js View File

@@ -1,26 +1,26 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated} from "react-native";
5
-import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
-import CollapsibleComponent from "./CollapsibleComponent";
4
+import {Animated} from 'react-native';
5
+import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
6
+import CollapsibleComponent from './CollapsibleComponent';
7 7
 
8
-type Props = {
9
-    ...CollapsibleComponentProps
10
-}
11
-
12
-class CollapsibleSectionList extends React.Component<Props> {
8
+type PropsType = {
9
+  ...CollapsibleComponentPropsType,
10
+};
13 11
 
14
-    render() {
15
-        return (
16
-            <CollapsibleComponent
17
-                {...this.props}
18
-                component={Animated.SectionList}
19
-            >
20
-                {this.props.children}
21
-            </CollapsibleComponent>
22
-        );
23
-    }
12
+// eslint-disable-next-line react/prefer-stateless-function
13
+class CollapsibleSectionList extends React.Component<PropsType> {
14
+  render(): React.Node {
15
+    const {props} = this;
16
+    return (
17
+      <CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
18
+        {...props}
19
+        component={Animated.SectionList}>
20
+        {props.children}
21
+      </CollapsibleComponent>
22
+    );
23
+  }
24 24
 }
25 25
 
26 26
 export default CollapsibleSectionList;

Loading…
Cancel
Save