|
@@ -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);
|