From 78f1aa4304977f24d452948658393f42df38e1c8 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 16 Oct 2023 10:09:16 +0200 Subject: [PATCH 1/5] [TS migration] Migrate 'ScrollViewWithContext.js' component to TypeScript --- ...ewWithContext.js => ScrollViewWithContext.tsx} | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) rename src/components/{ScrollViewWithContext.js => ScrollViewWithContext.tsx} (78%) diff --git a/src/components/ScrollViewWithContext.js b/src/components/ScrollViewWithContext.tsx similarity index 78% rename from src/components/ScrollViewWithContext.js rename to src/components/ScrollViewWithContext.tsx index bf0e7c6d62e8..d2817b44d821 100644 --- a/src/components/ScrollViewWithContext.js +++ b/src/components/ScrollViewWithContext.tsx @@ -1,5 +1,5 @@ import React, {useState, useRef} from 'react'; -import {ScrollView} from 'react-native'; +import {NativeScrollEvent, NativeSyntheticEvent, ScrollView} from 'react-native'; const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16; @@ -8,6 +8,13 @@ const ScrollContext = React.createContext(); // eslint-disable-next-line react/forbid-foreign-prop-types const propTypes = ScrollView.propTypes; +type ScrollViewWithContextProps = { + onScroll: (event: NativeSyntheticEvent) => void; + children?: React.ReactNode; + scrollEventThrottle: number; + innerRef: React.MutableRefObject; +}; + /* * is a wrapper around that provides a ref to the . * can be used as a direct replacement for @@ -15,12 +22,12 @@ const propTypes = ScrollView.propTypes; * Using this wrapper will automatically handle scrolling to the picker's * when the picker modal is opened */ -function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRef, ...restProps}) { +function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRef, ...restProps}: ScrollViewWithContextProps) { const [contentOffsetY, setContentOffsetY] = useState(0); - const defaultScrollViewRef = useRef(); + const defaultScrollViewRef = useRef(); const scrollViewRef = innerRef || defaultScrollViewRef; - const setContextScrollPosition = (event) => { + const setContextScrollPosition = (event: NativeSyntheticEvent) => { if (onScroll) { onScroll(event); } From 123e843abcaae7b4c07c3f1d4860ea397c09fc11 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 16 Oct 2023 15:02:54 +0200 Subject: [PATCH 2/5] [TS migration] Migrate 'ScrollViewWithContext.js' component to TypeScript --- src/components/ScrollViewWithContext.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx index d2817b44d821..f7c6a46b8809 100644 --- a/src/components/ScrollViewWithContext.tsx +++ b/src/components/ScrollViewWithContext.tsx @@ -1,19 +1,21 @@ -import React, {useState, useRef} from 'react'; +import React, {useState, useRef, ForwardedRef} from 'react'; import {NativeScrollEvent, NativeSyntheticEvent, ScrollView} from 'react-native'; const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16; -const ScrollContext = React.createContext(); +type ScrollContextValue = { + contentOffsetY?: number; + scrollViewRef?: ForwardedRef; +}; -// eslint-disable-next-line react/forbid-foreign-prop-types -const propTypes = ScrollView.propTypes; +const ScrollContext = React.createContext({}); type ScrollViewWithContextProps = { onScroll: (event: NativeSyntheticEvent) => void; children?: React.ReactNode; scrollEventThrottle: number; - innerRef: React.MutableRefObject; -}; + innerRef: ForwardedRef; +} & Partial; /* * is a wrapper around that provides a ref to the . @@ -24,8 +26,8 @@ type ScrollViewWithContextProps = { */ function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRef, ...restProps}: ScrollViewWithContextProps) { const [contentOffsetY, setContentOffsetY] = useState(0); - const defaultScrollViewRef = useRef(); - const scrollViewRef = innerRef || defaultScrollViewRef; + const defaultScrollViewRef = useRef(null); + const scrollViewRef = innerRef ?? defaultScrollViewRef; const setContextScrollPosition = (event: NativeSyntheticEvent) => { if (onScroll) { @@ -54,10 +56,9 @@ function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRe ); } -ScrollViewWithContext.propTypes = propTypes; ScrollViewWithContext.displayName = 'ScrollViewWithContext'; -export default React.forwardRef((props, ref) => ( +export default React.forwardRef((props, ref) => ( Date: Mon, 16 Oct 2023 19:41:34 +0200 Subject: [PATCH 3/5] ScrollViewWithContext fixes --- src/components/ScrollViewWithContext.tsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx index f7c6a46b8809..5fe013632952 100644 --- a/src/components/ScrollViewWithContext.tsx +++ b/src/components/ScrollViewWithContext.tsx @@ -4,17 +4,19 @@ import {NativeScrollEvent, NativeSyntheticEvent, ScrollView} from 'react-native' const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16; type ScrollContextValue = { - contentOffsetY?: number; - scrollViewRef?: ForwardedRef; + contentOffsetY: number; + scrollViewRef: ForwardedRef; }; -const ScrollContext = React.createContext({}); +const ScrollContext = React.createContext({ + contentOffsetY: 0, + scrollViewRef: null, +}); type ScrollViewWithContextProps = { onScroll: (event: NativeSyntheticEvent) => void; children?: React.ReactNode; scrollEventThrottle: number; - innerRef: ForwardedRef; } & Partial; /* @@ -24,10 +26,10 @@ type ScrollViewWithContextProps = { * Using this wrapper will automatically handle scrolling to the picker's * when the picker modal is opened */ -function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRef, ...restProps}: ScrollViewWithContextProps) { +function ScrollViewWithContext({onScroll, scrollEventThrottle, children, ...restProps}: ScrollViewWithContextProps, ref: ForwardedRef) { const [contentOffsetY, setContentOffsetY] = useState(0); const defaultScrollViewRef = useRef(null); - const scrollViewRef = innerRef ?? defaultScrollViewRef; + const scrollViewRef = ref ?? defaultScrollViewRef; const setContextScrollPosition = (event: NativeSyntheticEvent) => { if (onScroll) { @@ -58,11 +60,5 @@ function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRe ScrollViewWithContext.displayName = 'ScrollViewWithContext'; -export default React.forwardRef((props, ref) => ( - -)); +export default React.forwardRef(ScrollViewWithContext); export {ScrollContext}; From 3d569746e2e1211007b70a9b00eaa4576ba4b1f5 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 17 Oct 2023 12:19:08 +0200 Subject: [PATCH 4/5] Remove infered types --- src/components/ScrollViewWithContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx index 5fe013632952..d12ed8a644a7 100644 --- a/src/components/ScrollViewWithContext.tsx +++ b/src/components/ScrollViewWithContext.tsx @@ -60,5 +60,5 @@ function ScrollViewWithContext({onScroll, scrollEventThrottle, children, ...rest ScrollViewWithContext.displayName = 'ScrollViewWithContext'; -export default React.forwardRef(ScrollViewWithContext); +export default React.forwardRef(ScrollViewWithContext); export {ScrollContext}; From 6733533ab43061fb53274808174f6f35825ae0e3 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 10 Nov 2023 09:45:11 +0100 Subject: [PATCH 5/5] fix: prettier --- src/components/ScrollViewWithContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx index d46e087fdaa1..6122d5508a38 100644 --- a/src/components/ScrollViewWithContext.tsx +++ b/src/components/ScrollViewWithContext.tsx @@ -1,4 +1,4 @@ -import React, {useState, useRef, ForwardedRef, useMemo} from 'react'; +import React, {ForwardedRef, useMemo, useRef, useState} from 'react'; import {NativeScrollEvent, NativeSyntheticEvent, ScrollView} from 'react-native'; const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16;