Skip to content

Commit 35433cc

Browse files
M-i-k-e-lM-i-k-e-l
authored
withScrollEnabler - fix hooks and typings (#832)
1 parent f6617be commit 35433cc

File tree

5 files changed

+119
-145
lines changed

5 files changed

+119
-145
lines changed

‎demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockFlatList.tsx

Lines changed: 55 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,81 @@
11
import _ from 'lodash';
22
import React, {memo, useCallback} from 'react';
3-
import {
4-
FlatList,
5-
FlatListProps,
6-
StyleSheet,
7-
LayoutChangeEvent
8-
} from 'react-native';
3+
// eslint-disable-next-line no-unused-vars
4+
import {FlatList, StyleSheet, LayoutChangeEvent} from 'react-native';
95
import {
106
Colors,
117
Text,
128
View,
139
withScrollEnabler,
10+
// eslint-disable-next-line no-unused-vars
1411
WithScrollEnablerProps
1512
} from 'react-native-ui-lib';
1613

17-
export type AutoLockScrollViewProps = FlatListProps<number> & {
14+
export type AutoLockScrollViewProps = WithScrollEnablerProps & {
15+
horizontal?: boolean;
1816
numberOfItems: number;
17+
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
18+
onLayout: (event: LayoutChangeEvent) => void;
1919
};
2020

21-
const AutoLockFlatList = (props: AutoLockScrollViewProps) => {
21+
const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
2222
const numberOfItems = props.numberOfItems;
2323

24-
const WithScrollEnabler = withScrollEnabler(
25-
useCallback(
26-
(props: WithScrollEnablerProps) => {
27-
const getData = useCallback(
28-
(numberOfItems: number) => {
29-
return [...Array(numberOfItems).keys()];
30-
},
31-
[numberOfItems]
32-
);
33-
34-
const keyExtractor = useCallback((item: number) => {
35-
return item.toString();
36-
}, []);
24+
const getData = useCallback((numberOfItems: number) => {
25+
return [...Array(numberOfItems).keys()];
26+
}, []);
3727

38-
const renderItem = useCallback(({index}: {index: number}) => {
39-
return (
40-
<View key={index} style={styles.item}>
41-
<Text>{index + 1}</Text>
42-
</View>
43-
);
44-
}, []);
28+
const keyExtractor = useCallback((item: number) => {
29+
return item.toString();
30+
}, []);
4531

46-
const onContentSizeChange = useCallback(
47-
(contentWidth: number, contentHeight: number) => {
48-
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
49-
_.invoke(
50-
props,
51-
'scrollEnablerProps.onContentSizeChange',
52-
contentWidth,
53-
contentHeight
54-
);
55-
},
56-
[
57-
props.onContentSizeChange,
58-
props.scrollEnablerProps.onContentSizeChange
59-
]
60-
);
32+
const renderItem = useCallback(({index}: {index: number}) => {
33+
return (
34+
<View key={index} style={styles.item}>
35+
<Text>{index + 1}</Text>
36+
</View>
37+
);
38+
}, []);
6139

62-
const onLayout = useCallback(
63-
(nativeEvent: LayoutChangeEvent) => {
64-
_.invoke(props, 'onLayout', nativeEvent);
65-
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
66-
},
67-
[props.onLayout, props.scrollEnablerProps.onLayout]
68-
);
40+
const onContentSizeChange = useCallback(
41+
(contentWidth: number, contentHeight: number) => {
42+
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
43+
_.invoke(
44+
props,
45+
'scrollEnablerProps.onContentSizeChange',
46+
contentWidth,
47+
contentHeight
48+
);
49+
},
50+
[props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
51+
);
6952

70-
return (
71-
<FlatList
72-
{...props}
73-
style={styles.flatList}
74-
contentContainerStyle={styles.flatListContainer}
75-
showsHorizontalScrollIndicator={false}
76-
showsVerticalScrollIndicator={false}
77-
data={getData(numberOfItems)}
78-
renderItem={renderItem}
79-
keyExtractor={keyExtractor}
80-
onContentSizeChange={onContentSizeChange}
81-
onLayout={onLayout}
82-
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
83-
/>
84-
);
85-
},
86-
[numberOfItems]
87-
)
53+
const onLayout = useCallback(
54+
(nativeEvent: LayoutChangeEvent) => {
55+
_.invoke(props, 'onLayout', nativeEvent);
56+
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
57+
},
58+
[props.onLayout, props.scrollEnablerProps.onLayout]
8859
);
8960

90-
return <WithScrollEnabler {...props} />;
61+
return (
62+
<FlatList
63+
{...props}
64+
style={styles.flatList}
65+
contentContainerStyle={styles.flatListContainer}
66+
showsHorizontalScrollIndicator={false}
67+
showsVerticalScrollIndicator={false}
68+
data={getData(numberOfItems)}
69+
renderItem={renderItem}
70+
keyExtractor={keyExtractor}
71+
onContentSizeChange={onContentSizeChange}
72+
onLayout={onLayout}
73+
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
74+
/>
75+
);
9176
};
9277

93-
export default memo(AutoLockFlatList);
78+
export default memo(withScrollEnabler(WithScrollEnabler));
9479

9580
const styles = StyleSheet.create({
9681
flatList: {

‎demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockScrollView.tsx

Lines changed: 48 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,71 @@
11
import _ from 'lodash';
22
import React, {memo, useCallback} from 'react';
3-
import {
4-
ScrollView,
5-
ScrollViewProps,
6-
StyleSheet,
7-
LayoutChangeEvent
8-
} from 'react-native';
3+
// eslint-disable-next-line no-unused-vars
4+
import {ScrollView, StyleSheet, LayoutChangeEvent} from 'react-native';
95
import {
106
Colors,
117
Text,
128
View,
139
withScrollEnabler,
10+
// eslint-disable-next-line no-unused-vars
1411
WithScrollEnablerProps
1512
} from 'react-native-ui-lib';
1613

17-
export type AutoLockScrollViewProps = ScrollViewProps & {
14+
export type AutoLockScrollViewProps = WithScrollEnablerProps & {
15+
horizontal?: boolean;
1816
numberOfItems: number;
17+
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
18+
onLayout: (event: LayoutChangeEvent) => void;
1919
};
2020

21-
const AutoLockScrollView = (props: AutoLockScrollViewProps) => {
21+
const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
2222
const numberOfItems = props.numberOfItems;
23+
const renderItem = useCallback((index: number) => {
24+
return (
25+
<View key={index} style={styles.item}>
26+
<Text>{index + 1}</Text>
27+
</View>
28+
);
29+
}, []);
2330

24-
const WithScrollEnabler = withScrollEnabler(
25-
useCallback(
26-
(props: WithScrollEnablerProps) => {
27-
const renderItem = useCallback((index: number) => {
28-
return (
29-
<View key={index} style={styles.item}>
30-
<Text>{index + 1}</Text>
31-
</View>
32-
);
33-
}, []);
34-
35-
const onContentSizeChange = useCallback(
36-
(contentWidth: number, contentHeight: number) => {
37-
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
38-
_.invoke(
39-
props,
40-
'scrollEnablerProps.onContentSizeChange',
41-
contentWidth,
42-
contentHeight
43-
);
44-
},
45-
[
46-
props.onContentSizeChange,
47-
props.scrollEnablerProps.onContentSizeChange
48-
]
49-
);
50-
51-
const onLayout = useCallback(
52-
(nativeEvent: LayoutChangeEvent) => {
53-
_.invoke(props, 'onLayout', nativeEvent);
54-
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
55-
},
56-
[props.onLayout, props.scrollEnablerProps.onLayout]
57-
);
31+
const onContentSizeChange = useCallback(
32+
(contentWidth: number, contentHeight: number) => {
33+
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
34+
_.invoke(
35+
props,
36+
'scrollEnablerProps.onContentSizeChange',
37+
contentWidth,
38+
contentHeight
39+
);
40+
},
41+
[props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
42+
);
5843

59-
return (
60-
<ScrollView
61-
{...props}
62-
style={styles.scrollView}
63-
contentContainerStyle={styles.scrollViewContainer}
64-
showsHorizontalScrollIndicator={false}
65-
showsVerticalScrollIndicator={false}
66-
onContentSizeChange={onContentSizeChange}
67-
onLayout={onLayout}
68-
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
69-
>
70-
{_.times(numberOfItems, renderItem)}
71-
</ScrollView>
72-
);
73-
},
74-
[numberOfItems]
75-
)
44+
const onLayout = useCallback(
45+
(nativeEvent: LayoutChangeEvent) => {
46+
_.invoke(props, 'onLayout', nativeEvent);
47+
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
48+
},
49+
[props.onLayout, props.scrollEnablerProps.onLayout]
7650
);
7751

78-
return <WithScrollEnabler {...props} />;
52+
return (
53+
<ScrollView
54+
{...props}
55+
style={styles.scrollView}
56+
contentContainerStyle={styles.scrollViewContainer}
57+
showsHorizontalScrollIndicator={false}
58+
showsVerticalScrollIndicator={false}
59+
onContentSizeChange={onContentSizeChange}
60+
onLayout={onLayout}
61+
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
62+
>
63+
{_.times(numberOfItems, renderItem)}
64+
</ScrollView>
65+
);
7966
};
8067

81-
export default memo(AutoLockScrollView);
68+
export default memo(withScrollEnabler(WithScrollEnabler));
8269

8370
const styles = StyleSheet.create({
8471
scrollView: {

‎demo/src/screens/componentScreens/WithScrollEnablerScreen/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, {Component} from 'react';
2+
// eslint-disable-next-line no-unused-vars
23
import {LayoutChangeEvent} from 'react-native';
34
import {Text, View} from 'react-native-ui-lib';
45
import {
56
renderHeader,
67
renderBooleanOption,
78
renderSliderOption
9+
// @ts-ignore
810
} from '../../ExampleScreenPresenter';
911
import AutoLockScrollView from './AutoLockScrollView';
1012
import AutoLockFlatList from './AutoLockFlatList';
@@ -49,7 +51,6 @@ class WithScrollEnablerScreen extends Component {
4951
const Container = isListView ? AutoLockScrollView : AutoLockFlatList;
5052

5153
return (
52-
// @ts-ignore
5354
<Container
5455
key={`${isHorizontal}`}
5556
horizontal={isHorizontal}

‎generatedTypes/commons/withScrollEnabler.d.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React from 'react';
2-
import { FlatListProps, ScrollViewProps, LayoutChangeEvent } from 'react-native';
2+
import { LayoutChangeEvent } from 'react-native';
33
export declare type ScrollEnablerProps = {
44
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
55
onLayout: (event: LayoutChangeEvent) => void;
66
scrollEnabled: boolean;
77
};
8-
declare type SupportedViews = FlatListProps<any> | ScrollViewProps;
9-
export declare type WithScrollEnablerProps = SupportedViews & {
8+
export declare type WithScrollEnablerProps = {
109
scrollEnablerProps: ScrollEnablerProps;
1110
ref?: any;
1211
};
13-
declare function withScrollEnabler<PROPS extends SupportedViews>(WrappedComponent: React.ComponentType<WithScrollEnablerProps>): React.ComponentType<PROPS>;
12+
declare function withScrollEnabler<PROPS>(WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>): React.ComponentType<PROPS>;
1413
export default withScrollEnabler;

‎src/commons/withScrollEnabler.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import _ from 'lodash';
21
import React, {useState, useCallback, useRef} from 'react';
32
// eslint-disable-next-line no-unused-vars
43
import {FlatListProps, ScrollViewProps, LayoutChangeEvent} from 'react-native';
4+
// eslint-disable-next-line no-unused-vars
55
import forwardRef, {ForwardRefInjectedProps} from './forwardRef';
66

77
export type ScrollEnablerProps = {
@@ -10,17 +10,19 @@ export type ScrollEnablerProps = {
1010
scrollEnabled: boolean;
1111
};
1212

13-
type SupportedViews = FlatListProps<any> | ScrollViewProps;
13+
declare type SupportedViewsProps = FlatListProps<any> | ScrollViewProps;
1414

15-
export type WithScrollEnablerProps = SupportedViews & {
15+
export type WithScrollEnablerProps = {
1616
scrollEnablerProps: ScrollEnablerProps;
1717
ref?: any;
1818
};
19-
type PropTypes = ForwardRefInjectedProps & SupportedViews;
20-
function withScrollEnabler<PROPS extends SupportedViews>(
21-
WrappedComponent: React.ComponentType<WithScrollEnablerProps>
19+
20+
type PropTypes = ForwardRefInjectedProps & SupportedViewsProps;
21+
22+
function withScrollEnabler<PROPS>(
23+
WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>
2224
): React.ComponentType<PROPS> {
23-
const ScrollEnabler = (props: PropTypes) => {
25+
const ScrollEnabler = (props: PROPS & PropTypes) => {
2426
const [scrollEnabled, setScrollEnabled] = useState(true);
2527
const contentSize = useRef(0);
2628
const layoutSize = useRef(0);
@@ -46,7 +48,7 @@ function withScrollEnabler<PROPS extends SupportedViews>(
4648
);
4749

4850
const onLayout = useCallback(
49-
(event) => {
51+
(event: LayoutChangeEvent) => {
5052
const {
5153
nativeEvent: {
5254
layout: {width, height}
@@ -72,7 +74,7 @@ function withScrollEnabler<PROPS extends SupportedViews>(
7274
);
7375
};
7476

75-
return forwardRef(ScrollEnabler) as any;
77+
return forwardRef(ScrollEnabler);
7678
}
7779

7880
export default withScrollEnabler;

0 commit comments

Comments
 (0)