Skip to content

withScrollEnabler - fix hooks and typings #832

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 13, 2020
Merged

withScrollEnabler - fix hooks and typings #832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec02d7e
withScrollEnabler - fix hooks and typings
M-i-k-e-l Jun 29, 2020
2206174
Merge branch 'master' into fix/with-scroll-enabler-fix-hooks-and-typings
M-i-k-e-l Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 55 additions & 70 deletions demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockFlatList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,81 @@
import _ from 'lodash';
import React, {memo, useCallback} from 'react';
import {
FlatList,
FlatListProps,
StyleSheet,
LayoutChangeEvent
} from 'react-native';
// eslint-disable-next-line no-unused-vars
import {FlatList, StyleSheet, LayoutChangeEvent} from 'react-native';
import {
Colors,
Text,
View,
withScrollEnabler,
// eslint-disable-next-line no-unused-vars
WithScrollEnablerProps
} from 'react-native-ui-lib';

export type AutoLockScrollViewProps = FlatListProps<number> & {
export type AutoLockScrollViewProps = WithScrollEnablerProps & {
horizontal?: boolean;
numberOfItems: number;
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
onLayout: (event: LayoutChangeEvent) => void;
};

const AutoLockFlatList = (props: AutoLockScrollViewProps) => {
const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
const numberOfItems = props.numberOfItems;

const WithScrollEnabler = withScrollEnabler(
useCallback(
(props: WithScrollEnablerProps) => {
const getData = useCallback(
(numberOfItems: number) => {
return [...Array(numberOfItems).keys()];
},
[numberOfItems]
);

const keyExtractor = useCallback((item: number) => {
return item.toString();
}, []);
const getData = useCallback((numberOfItems: number) => {
return [...Array(numberOfItems).keys()];
}, []);

const renderItem = useCallback(({index}: {index: number}) => {
return (
<View key={index} style={styles.item}>
<Text>{index + 1}</Text>
</View>
);
}, []);
const keyExtractor = useCallback((item: number) => {
return item.toString();
}, []);

const onContentSizeChange = useCallback(
(contentWidth: number, contentHeight: number) => {
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
_.invoke(
props,
'scrollEnablerProps.onContentSizeChange',
contentWidth,
contentHeight
);
},
[
props.onContentSizeChange,
props.scrollEnablerProps.onContentSizeChange
]
);
const renderItem = useCallback(({index}: {index: number}) => {
return (
<View key={index} style={styles.item}>
<Text>{index + 1}</Text>
</View>
);
}, []);

const onLayout = useCallback(
(nativeEvent: LayoutChangeEvent) => {
_.invoke(props, 'onLayout', nativeEvent);
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
},
[props.onLayout, props.scrollEnablerProps.onLayout]
);
const onContentSizeChange = useCallback(
(contentWidth: number, contentHeight: number) => {
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
_.invoke(
props,
'scrollEnablerProps.onContentSizeChange',
contentWidth,
contentHeight
);
},
[props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
);

return (
<FlatList
{...props}
style={styles.flatList}
contentContainerStyle={styles.flatListContainer}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
data={getData(numberOfItems)}
renderItem={renderItem}
keyExtractor={keyExtractor}
onContentSizeChange={onContentSizeChange}
onLayout={onLayout}
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
/>
);
},
[numberOfItems]
)
const onLayout = useCallback(
(nativeEvent: LayoutChangeEvent) => {
_.invoke(props, 'onLayout', nativeEvent);
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
},
[props.onLayout, props.scrollEnablerProps.onLayout]
);

return <WithScrollEnabler {...props} />;
return (
<FlatList
{...props}
style={styles.flatList}
contentContainerStyle={styles.flatListContainer}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
data={getData(numberOfItems)}
renderItem={renderItem}
keyExtractor={keyExtractor}
onContentSizeChange={onContentSizeChange}
onLayout={onLayout}
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
/>
);
};

export default memo(AutoLockFlatList);
export default memo(withScrollEnabler(WithScrollEnabler));

const styles = StyleSheet.create({
flatList: {
Expand Down
109 changes: 48 additions & 61 deletions demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockScrollView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,71 @@
import _ from 'lodash';
import React, {memo, useCallback} from 'react';
import {
ScrollView,
ScrollViewProps,
StyleSheet,
LayoutChangeEvent
} from 'react-native';
// eslint-disable-next-line no-unused-vars
import {ScrollView, StyleSheet, LayoutChangeEvent} from 'react-native';
import {
Colors,
Text,
View,
withScrollEnabler,
// eslint-disable-next-line no-unused-vars
WithScrollEnablerProps
} from 'react-native-ui-lib';

export type AutoLockScrollViewProps = ScrollViewProps & {
export type AutoLockScrollViewProps = WithScrollEnablerProps & {
horizontal?: boolean;
numberOfItems: number;
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
onLayout: (event: LayoutChangeEvent) => void;
};

const AutoLockScrollView = (props: AutoLockScrollViewProps) => {
const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
const numberOfItems = props.numberOfItems;
const renderItem = useCallback((index: number) => {
return (
<View key={index} style={styles.item}>
<Text>{index + 1}</Text>
</View>
);
}, []);

const WithScrollEnabler = withScrollEnabler(
useCallback(
(props: WithScrollEnablerProps) => {
const renderItem = useCallback((index: number) => {
return (
<View key={index} style={styles.item}>
<Text>{index + 1}</Text>
</View>
);
}, []);

const onContentSizeChange = useCallback(
(contentWidth: number, contentHeight: number) => {
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
_.invoke(
props,
'scrollEnablerProps.onContentSizeChange',
contentWidth,
contentHeight
);
},
[
props.onContentSizeChange,
props.scrollEnablerProps.onContentSizeChange
]
);

const onLayout = useCallback(
(nativeEvent: LayoutChangeEvent) => {
_.invoke(props, 'onLayout', nativeEvent);
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
},
[props.onLayout, props.scrollEnablerProps.onLayout]
);
const onContentSizeChange = useCallback(
(contentWidth: number, contentHeight: number) => {
_.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
_.invoke(
props,
'scrollEnablerProps.onContentSizeChange',
contentWidth,
contentHeight
);
},
[props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
);

return (
<ScrollView
{...props}
style={styles.scrollView}
contentContainerStyle={styles.scrollViewContainer}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
onContentSizeChange={onContentSizeChange}
onLayout={onLayout}
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
>
{_.times(numberOfItems, renderItem)}
</ScrollView>
);
},
[numberOfItems]
)
const onLayout = useCallback(
(nativeEvent: LayoutChangeEvent) => {
_.invoke(props, 'onLayout', nativeEvent);
_.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
},
[props.onLayout, props.scrollEnablerProps.onLayout]
);

return <WithScrollEnabler {...props} />;
return (
<ScrollView
{...props}
style={styles.scrollView}
contentContainerStyle={styles.scrollViewContainer}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
onContentSizeChange={onContentSizeChange}
onLayout={onLayout}
scrollEnabled={props.scrollEnablerProps.scrollEnabled}
>
{_.times(numberOfItems, renderItem)}
</ScrollView>
);
};

export default memo(AutoLockScrollView);
export default memo(withScrollEnabler(WithScrollEnabler));

const styles = StyleSheet.create({
scrollView: {
Expand Down
3 changes: 2 additions & 1 deletion demo/src/screens/componentScreens/WithScrollEnablerScreen/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, {Component} from 'react';
// eslint-disable-next-line no-unused-vars
import {LayoutChangeEvent} from 'react-native';
import {Text, View} from 'react-native-ui-lib';
import {
renderHeader,
renderBooleanOption,
renderSliderOption
// @ts-ignore
} from '../../ExampleScreenPresenter';
import AutoLockScrollView from './AutoLockScrollView';
import AutoLockFlatList from './AutoLockFlatList';
Expand Down Expand Up @@ -49,7 +51,6 @@ class WithScrollEnablerScreen extends Component {
const Container = isListView ? AutoLockScrollView : AutoLockFlatList;

return (
// @ts-ignore
<Container
key={`${isHorizontal}`}
horizontal={isHorizontal}
Expand Down
7 changes: 3 additions & 4 deletions generatedTypes/commons/withScrollEnabler.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React from 'react';
import { FlatListProps, ScrollViewProps, LayoutChangeEvent } from 'react-native';
import { LayoutChangeEvent } from 'react-native';
export declare type ScrollEnablerProps = {
onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
onLayout: (event: LayoutChangeEvent) => void;
scrollEnabled: boolean;
};
declare type SupportedViews = FlatListProps<any> | ScrollViewProps;
export declare type WithScrollEnablerProps = SupportedViews & {
export declare type WithScrollEnablerProps = {
scrollEnablerProps: ScrollEnablerProps;
ref?: any;
};
declare function withScrollEnabler<PROPS extends SupportedViews>(WrappedComponent: React.ComponentType<WithScrollEnablerProps>): React.ComponentType<PROPS>;
declare function withScrollEnabler<PROPS>(WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>): React.ComponentType<PROPS>;
export default withScrollEnabler;
20 changes: 11 additions & 9 deletions src/commons/withScrollEnabler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import _ from 'lodash';
import React, {useState, useCallback, useRef} from 'react';
// eslint-disable-next-line no-unused-vars
import {FlatListProps, ScrollViewProps, LayoutChangeEvent} from 'react-native';
// eslint-disable-next-line no-unused-vars
import forwardRef, {ForwardRefInjectedProps} from './forwardRef';

export type ScrollEnablerProps = {
Expand All @@ -10,17 +10,19 @@ export type ScrollEnablerProps = {
scrollEnabled: boolean;
};

type SupportedViews = FlatListProps<any> | ScrollViewProps;
declare type SupportedViewsProps = FlatListProps<any> | ScrollViewProps;

export type WithScrollEnablerProps = SupportedViews & {
export type WithScrollEnablerProps = {
scrollEnablerProps: ScrollEnablerProps;
ref?: any;
};
type PropTypes = ForwardRefInjectedProps & SupportedViews;
function withScrollEnabler<PROPS extends SupportedViews>(
WrappedComponent: React.ComponentType<WithScrollEnablerProps>

type PropTypes = ForwardRefInjectedProps & SupportedViewsProps;

function withScrollEnabler<PROPS>(
WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>
): React.ComponentType<PROPS> {
const ScrollEnabler = (props: PropTypes) => {
const ScrollEnabler = (props: PROPS & PropTypes) => {
const [scrollEnabled, setScrollEnabled] = useState(true);
const contentSize = useRef(0);
const layoutSize = useRef(0);
Expand All @@ -46,7 +48,7 @@ function withScrollEnabler<PROPS extends SupportedViews>(
);

const onLayout = useCallback(
(event) => {
(event: LayoutChangeEvent) => {
const {
nativeEvent: {
layout: {width, height}
Expand All @@ -72,7 +74,7 @@ function withScrollEnabler<PROPS extends SupportedViews>(
);
};

return forwardRef(ScrollEnabler) as any;
return forwardRef(ScrollEnabler);
}

export default withScrollEnabler;