From a14a710b66c98e2fea648ad0bb05dcdfbafcd625 Mon Sep 17 00:00:00 2001 From: war-in Date: Mon, 25 Mar 2024 15:29:25 +0100 Subject: [PATCH 01/10] migrate files --- .../{MVCPFlatList.js => MVCPFlatList.tsx} | 87 +++++++++---------- .../FlatList/{index.web.js => index.web.ts} | 0 2 files changed, 43 insertions(+), 44 deletions(-) rename src/components/FlatList/{MVCPFlatList.js => MVCPFlatList.tsx} (73%) rename src/components/FlatList/{index.web.js => index.web.ts} (100%) diff --git a/src/components/FlatList/MVCPFlatList.js b/src/components/FlatList/MVCPFlatList.tsx similarity index 73% rename from src/components/FlatList/MVCPFlatList.js rename to src/components/FlatList/MVCPFlatList.tsx index 656a0ed7f00e..2467d957143d 100644 --- a/src/components/FlatList/MVCPFlatList.js +++ b/src/components/FlatList/MVCPFlatList.tsx @@ -1,10 +1,11 @@ /* eslint-disable es/no-optional-chaining, es/no-nullish-coalescing-operators, react/prop-types */ -import PropTypes from 'prop-types'; -import React from 'react'; +import type {ForwardedRef, MutableRefObject} from 'react'; +import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react'; +import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; import {FlatList} from 'react-native'; -function mergeRefs(...args) { - return function forwardRef(node) { +function mergeRefs(...args: Array | ForwardedRef | null>) { + return function forwardRef2(node: FlatList) { args.forEach((ref) => { if (ref == null) { return; @@ -23,41 +24,51 @@ function mergeRefs(...args) { }; } -function useMergeRefs(...args) { - return React.useMemo( +function useMergeRefs(...args: Array | ForwardedRef | null>) { + return useMemo( () => mergeRefs(...args), // eslint-disable-next-line [...args], ); } -const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizontal, onScroll, ...props}, forwardedRef) => { +type MaintainVisibleContentPositionProps = { + minIndexForVisible: number; + autoscrollToTopThreshold?: number; +}; + +type MVCPFlatListProps = FlatListProps & { + maintainVisibleContentPosition: MaintainVisibleContentPositionProps | null; + horizontal?: boolean; +}; + +function MVCPFlatList({maintainVisibleContentPosition = null, horizontal = false, onScroll, ...props}: MVCPFlatListProps, ref: ForwardedRef) { const {minIndexForVisible: mvcpMinIndexForVisible, autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold} = maintainVisibleContentPosition ?? {}; - const scrollRef = React.useRef(null); - const prevFirstVisibleOffsetRef = React.useRef(null); - const firstVisibleViewRef = React.useRef(null); - const mutationObserverRef = React.useRef(null); - const lastScrollOffsetRef = React.useRef(0); - const isListRenderedRef = React.useRef(false); - - const getScrollOffset = React.useCallback(() => { + const scrollRef = useRef(null); + const prevFirstVisibleOffsetRef = useRef(0); + const firstVisibleViewRef = useRef(null); + const mutationObserverRef = useRef(null); + const lastScrollOffsetRef = useRef(0); + const isListRenderedRef = useRef(false); + + const getScrollOffset = useCallback((): number => { if (scrollRef.current == null) { return 0; } - return horizontal ? scrollRef.current?.getScrollableNode()?.scrollLeft : scrollRef.current?.getScrollableNode()?.scrollTop; + return horizontal ? Number(scrollRef.current?.getScrollableNode()?.scrollLeft) : Number(scrollRef.current?.getScrollableNode()?.scrollTop); }, [horizontal]); - const getContentView = React.useCallback(() => scrollRef.current?.getScrollableNode()?.childNodes[0], []); + const getContentView = useCallback(() => scrollRef.current?.getScrollableNode()?.childNodes[0], []); - const scrollToOffset = React.useCallback( - (offset, animated) => { + const scrollToOffset = useCallback( + (offset: number, animated: boolean) => { const behavior = animated ? 'smooth' : 'instant'; scrollRef.current?.getScrollableNode()?.scroll(horizontal ? {left: offset, behavior} : {top: offset, behavior}); }, [horizontal], ); - const prepareForMaintainVisibleContentPosition = React.useCallback(() => { + const prepareForMaintainVisibleContentPosition = useCallback(() => { if (mvcpMinIndexForVisible == null) { return; } @@ -82,7 +93,7 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont } }, [getContentView, getScrollOffset, mvcpMinIndexForVisible, horizontal]); - const adjustForMaintainVisibleContentPosition = React.useCallback(() => { + const adjustForMaintainVisibleContentPosition = useCallback(() => { if (mvcpMinIndexForVisible == null) { return; } @@ -105,7 +116,7 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont } }, [getScrollOffset, scrollToOffset, mvcpMinIndexForVisible, mvcpAutoscrollToTopThreshold, horizontal]); - const setupMutationObserver = React.useCallback(() => { + const setupMutationObserver = useCallback(() => { const contentView = getContentView(); if (contentView == null) { return; @@ -139,7 +150,7 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont mutationObserverRef.current = mutationObserver; }, [adjustForMaintainVisibleContentPosition, prepareForMaintainVisibleContentPosition, getContentView, getScrollOffset, scrollToOffset]); - React.useEffect(() => { + useEffect(() => { if (!isListRenderedRef.current) { return; } @@ -149,10 +160,10 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont }); }, [prepareForMaintainVisibleContentPosition, setupMutationObserver]); - const setMergedRef = useMergeRefs(scrollRef, forwardedRef); + const setMergedRef = useMergeRefs(scrollRef, ref); - const onRef = React.useCallback( - (newRef) => { + const onRef = useCallback( + (newRef: FlatList) => { // Make sure to only call refs and re-attach listeners if the node changed. if (newRef == null || newRef === scrollRef.current) { return; @@ -165,18 +176,18 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont [prepareForMaintainVisibleContentPosition, setMergedRef, setupMutationObserver], ); - React.useEffect(() => { + useEffect(() => { const mutationObserver = mutationObserverRef.current; return () => { mutationObserver?.disconnect(); }; }, []); - const onScrollInternal = React.useCallback( - (ev) => { + const onScrollInternal = useCallback( + (event: NativeSyntheticEvent) => { prepareForMaintainVisibleContentPosition(); - onScroll?.(ev); + onScroll?.(event); }, [prepareForMaintainVisibleContentPosition, onScroll], ); @@ -196,20 +207,8 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont }} /> ); -}); +} MVCPFlatList.displayName = 'MVCPFlatList'; -MVCPFlatList.propTypes = { - maintainVisibleContentPosition: PropTypes.shape({ - minIndexForVisible: PropTypes.number.isRequired, - autoscrollToTopThreshold: PropTypes.number, - }), - horizontal: PropTypes.bool, -}; - -MVCPFlatList.defaultProps = { - maintainVisibleContentPosition: null, - horizontal: false, -}; -export default MVCPFlatList; +export default forwardRef(MVCPFlatList); diff --git a/src/components/FlatList/index.web.js b/src/components/FlatList/index.web.ts similarity index 100% rename from src/components/FlatList/index.web.js rename to src/components/FlatList/index.web.ts From 926a2e185328b325956a1df5a0f371b68c306795 Mon Sep 17 00:00:00 2001 From: war-in Date: Mon, 25 Mar 2024 15:53:27 +0100 Subject: [PATCH 02/10] disable lint --- src/components/FlatList/MVCPFlatList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FlatList/MVCPFlatList.tsx b/src/components/FlatList/MVCPFlatList.tsx index 2467d957143d..8fb4cfbe48d5 100644 --- a/src/components/FlatList/MVCPFlatList.tsx +++ b/src/components/FlatList/MVCPFlatList.tsx @@ -58,6 +58,7 @@ function MVCPFlatList({maintainVisibleContentPosition = null, horizontal return horizontal ? Number(scrollRef.current?.getScrollableNode()?.scrollLeft) : Number(scrollRef.current?.getScrollableNode()?.scrollTop); }, [horizontal]); + // eslint-disable-next-line @typescript-eslint/no-unsafe-return const getContentView = useCallback(() => scrollRef.current?.getScrollableNode()?.childNodes[0], []); const scrollToOffset = useCallback( From 66c68362270cfd0b6eee7375936fd091817ce038 Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 26 Mar 2024 13:40:42 +0100 Subject: [PATCH 03/10] small tweaks --- src/components/FlatList/MVCPFlatList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/FlatList/MVCPFlatList.tsx b/src/components/FlatList/MVCPFlatList.tsx index 8fb4cfbe48d5..f3a7e6fc796c 100644 --- a/src/components/FlatList/MVCPFlatList.tsx +++ b/src/components/FlatList/MVCPFlatList.tsx @@ -1,11 +1,11 @@ /* eslint-disable es/no-optional-chaining, es/no-nullish-coalescing-operators, react/prop-types */ import type {ForwardedRef, MutableRefObject} from 'react'; -import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; import {FlatList} from 'react-native'; function mergeRefs(...args: Array | ForwardedRef | null>) { - return function forwardRef2(node: FlatList) { + return function forwardRef(node: FlatList) { args.forEach((ref) => { if (ref == null) { return; @@ -42,7 +42,7 @@ type MVCPFlatListProps = FlatListProps & { horizontal?: boolean; }; -function MVCPFlatList({maintainVisibleContentPosition = null, horizontal = false, onScroll, ...props}: MVCPFlatListProps, ref: ForwardedRef) { +function MVCPFlatList({maintainVisibleContentPosition, horizontal = false, onScroll, ...props}: MVCPFlatListProps, ref: ForwardedRef) { const {minIndexForVisible: mvcpMinIndexForVisible, autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold} = maintainVisibleContentPosition ?? {}; const scrollRef = useRef(null); const prevFirstVisibleOffsetRef = useRef(0); @@ -212,4 +212,4 @@ function MVCPFlatList({maintainVisibleContentPosition = null, horizontal MVCPFlatList.displayName = 'MVCPFlatList'; -export default forwardRef(MVCPFlatList); +export default React.forwardRef(MVCPFlatList); From 8ae952b3a199bc78aed950c99efeb84b50967e24 Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 26 Mar 2024 14:29:32 +0100 Subject: [PATCH 04/10] adjust file structure --- src/components/FlatList/index.android.tsx | 5 +++-- src/components/FlatList/{index.ts => index.ios.ts} | 0 .../FlatList/{MVCPFlatList.tsx => index.tsx} | 0 src/components/FlatList/index.web.ts | 3 --- src/components/FlatList/types.ts | 13 +++++++++++++ 5 files changed, 16 insertions(+), 5 deletions(-) rename src/components/FlatList/{index.ts => index.ios.ts} (100%) rename src/components/FlatList/{MVCPFlatList.tsx => index.tsx} (100%) delete mode 100644 src/components/FlatList/index.web.ts create mode 100644 src/components/FlatList/types.ts diff --git a/src/components/FlatList/index.android.tsx b/src/components/FlatList/index.android.tsx index 1246367d29e8..901ec92e1773 100644 --- a/src/components/FlatList/index.android.tsx +++ b/src/components/FlatList/index.android.tsx @@ -1,13 +1,14 @@ import {useFocusEffect} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useContext} from 'react'; -import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; +import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; import {FlatList} from 'react-native'; import {ActionListContext} from '@pages/home/ReportScreenContext'; +import type CustomFlatListProps from './types'; // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android). // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen. -function CustomFlatList(props: FlatListProps, ref: ForwardedRef) { +function CustomFlatList(props: CustomFlatListProps, ref: ForwardedRef) { const {scrollPosition, setScrollPosition} = useContext(ActionListContext); const onScreenFocus = useCallback(() => { diff --git a/src/components/FlatList/index.ts b/src/components/FlatList/index.ios.ts similarity index 100% rename from src/components/FlatList/index.ts rename to src/components/FlatList/index.ios.ts diff --git a/src/components/FlatList/MVCPFlatList.tsx b/src/components/FlatList/index.tsx similarity index 100% rename from src/components/FlatList/MVCPFlatList.tsx rename to src/components/FlatList/index.tsx diff --git a/src/components/FlatList/index.web.ts b/src/components/FlatList/index.web.ts deleted file mode 100644 index 7299776db9bc..000000000000 --- a/src/components/FlatList/index.web.ts +++ /dev/null @@ -1,3 +0,0 @@ -import MVCPFlatList from './MVCPFlatList'; - -export default MVCPFlatList; diff --git a/src/components/FlatList/types.ts b/src/components/FlatList/types.ts new file mode 100644 index 000000000000..40a2f2d3cc9d --- /dev/null +++ b/src/components/FlatList/types.ts @@ -0,0 +1,13 @@ +import type {FlatListProps} from 'react-native'; + +type MaintainVisibleContentPositionProps = { + minIndexForVisible: number; + autoscrollToTopThreshold?: number; +}; + +type CustomFlatListProps = FlatListProps & { + maintainVisibleContentPosition: MaintainVisibleContentPositionProps | null; + horizontal?: boolean; +}; + +export default CustomFlatListProps; From 3951ad99d190843a0d45ec4a4ee829a45b1348e4 Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 26 Mar 2024 14:33:39 +0100 Subject: [PATCH 05/10] remove unused types --- src/components/FlatList/index.tsx | 15 +++------------ src/components/FlatList/types.ts | 2 +- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index f3a7e6fc796c..1d7c95d8dd26 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -1,8 +1,9 @@ /* eslint-disable es/no-optional-chaining, es/no-nullish-coalescing-operators, react/prop-types */ import type {ForwardedRef, MutableRefObject} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; -import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; +import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; import {FlatList} from 'react-native'; +import type CustomFlatListProps from './types'; function mergeRefs(...args: Array | ForwardedRef | null>) { return function forwardRef(node: FlatList) { @@ -32,17 +33,7 @@ function useMergeRefs(...args: Array | ForwardedRef = FlatListProps & { - maintainVisibleContentPosition: MaintainVisibleContentPositionProps | null; - horizontal?: boolean; -}; - -function MVCPFlatList({maintainVisibleContentPosition, horizontal = false, onScroll, ...props}: MVCPFlatListProps, ref: ForwardedRef) { +function MVCPFlatList({maintainVisibleContentPosition, horizontal = false, onScroll, ...props}: CustomFlatListProps, ref: ForwardedRef) { const {minIndexForVisible: mvcpMinIndexForVisible, autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold} = maintainVisibleContentPosition ?? {}; const scrollRef = useRef(null); const prevFirstVisibleOffsetRef = useRef(0); diff --git a/src/components/FlatList/types.ts b/src/components/FlatList/types.ts index 40a2f2d3cc9d..30a30a670b8d 100644 --- a/src/components/FlatList/types.ts +++ b/src/components/FlatList/types.ts @@ -6,7 +6,7 @@ type MaintainVisibleContentPositionProps = { }; type CustomFlatListProps = FlatListProps & { - maintainVisibleContentPosition: MaintainVisibleContentPositionProps | null; + maintainVisibleContentPosition?: MaintainVisibleContentPositionProps; horizontal?: boolean; }; From c253a1a4d3b2ab2bca086b9cc34ef70b8c2eb74c Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 26 Mar 2024 15:50:41 +0100 Subject: [PATCH 06/10] add null type --- src/components/FlatList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FlatList/types.ts b/src/components/FlatList/types.ts index 30a30a670b8d..b52d2e0e10e6 100644 --- a/src/components/FlatList/types.ts +++ b/src/components/FlatList/types.ts @@ -2,7 +2,7 @@ import type {FlatListProps} from 'react-native'; type MaintainVisibleContentPositionProps = { minIndexForVisible: number; - autoscrollToTopThreshold?: number; + autoscrollToTopThreshold?: number | null; }; type CustomFlatListProps = FlatListProps & { From c14233a3baed252f525ad1d01be5d0518b470513 Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 26 Mar 2024 16:07:47 +0100 Subject: [PATCH 07/10] fix import FlatList --- src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx index 9ee465369be1..3e01afa523cf 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx +++ b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx @@ -1,7 +1,6 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useMemo} from 'react'; -import type {FlatListProps, ScrollViewProps} from 'react-native'; -import FlatList from '@components/FlatList'; +import {FlatList, FlatListProps, ScrollViewProps} from 'react-native'; type BaseInvertedFlatListProps = FlatListProps & { shouldEnableAutoScrollToTopThreshold?: boolean; From 0cbb5886e0a752fe942217cc280a04e0cc561a7a Mon Sep 17 00:00:00 2001 From: war-in Date: Tue, 26 Mar 2024 16:12:33 +0100 Subject: [PATCH 08/10] fix lint --- src/components/FlatList/types.ts | 2 +- src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/FlatList/types.ts b/src/components/FlatList/types.ts index b52d2e0e10e6..30a30a670b8d 100644 --- a/src/components/FlatList/types.ts +++ b/src/components/FlatList/types.ts @@ -2,7 +2,7 @@ import type {FlatListProps} from 'react-native'; type MaintainVisibleContentPositionProps = { minIndexForVisible: number; - autoscrollToTopThreshold?: number | null; + autoscrollToTopThreshold?: number; }; type CustomFlatListProps = FlatListProps & { diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx index 3e01afa523cf..f514334a97be 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx +++ b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx @@ -1,6 +1,7 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useMemo} from 'react'; -import {FlatList, FlatListProps, ScrollViewProps} from 'react-native'; +import {FlatList} from 'react-native'; +import type {FlatListProps, ScrollViewProps} from 'react-native'; type BaseInvertedFlatListProps = FlatListProps & { shouldEnableAutoScrollToTopThreshold?: boolean; From 918a06e8492e48cb37f682730e2371d174defc66 Mon Sep 17 00:00:00 2001 From: war-in Date: Wed, 27 Mar 2024 09:14:18 +0100 Subject: [PATCH 09/10] suggested changes --- src/components/FlatList/index.android.tsx | 5 ++--- src/components/FlatList/index.tsx | 19 +++++++++++-------- src/components/FlatList/types.ts | 13 ------------- 3 files changed, 13 insertions(+), 24 deletions(-) delete mode 100644 src/components/FlatList/types.ts diff --git a/src/components/FlatList/index.android.tsx b/src/components/FlatList/index.android.tsx index 901ec92e1773..1246367d29e8 100644 --- a/src/components/FlatList/index.android.tsx +++ b/src/components/FlatList/index.android.tsx @@ -1,14 +1,13 @@ import {useFocusEffect} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useContext} from 'react'; -import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; +import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; import {FlatList} from 'react-native'; import {ActionListContext} from '@pages/home/ReportScreenContext'; -import type CustomFlatListProps from './types'; // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android). // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen. -function CustomFlatList(props: CustomFlatListProps, ref: ForwardedRef) { +function CustomFlatList(props: FlatListProps, ref: ForwardedRef) { const {scrollPosition, setScrollPosition} = useContext(ActionListContext); const onScreenFocus = useCallback(() => { diff --git a/src/components/FlatList/index.tsx b/src/components/FlatList/index.tsx index 1d7c95d8dd26..9f42e9597c79 100644 --- a/src/components/FlatList/index.tsx +++ b/src/components/FlatList/index.tsx @@ -1,9 +1,8 @@ /* eslint-disable es/no-optional-chaining, es/no-nullish-coalescing-operators, react/prop-types */ import type {ForwardedRef, MutableRefObject} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; -import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; +import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; import {FlatList} from 'react-native'; -import type CustomFlatListProps from './types'; function mergeRefs(...args: Array | ForwardedRef | null>) { return function forwardRef(node: FlatList) { @@ -33,7 +32,11 @@ function useMergeRefs(...args: Array | ForwardedRef({maintainVisibleContentPosition, horizontal = false, onScroll, ...props}: CustomFlatListProps, ref: ForwardedRef) { +function getScrollableNode(flatList: FlatList | null): HTMLElement | undefined { + return flatList?.getScrollableNode() as HTMLElement | undefined; +} + +function MVCPFlatList({maintainVisibleContentPosition, horizontal = false, onScroll, ...props}: FlatListProps, ref: ForwardedRef) { const {minIndexForVisible: mvcpMinIndexForVisible, autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold} = maintainVisibleContentPosition ?? {}; const scrollRef = useRef(null); const prevFirstVisibleOffsetRef = useRef(0); @@ -43,19 +46,19 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false const isListRenderedRef = useRef(false); const getScrollOffset = useCallback((): number => { - if (scrollRef.current == null) { + if (!scrollRef.current) { return 0; } - return horizontal ? Number(scrollRef.current?.getScrollableNode()?.scrollLeft) : Number(scrollRef.current?.getScrollableNode()?.scrollTop); + return horizontal ? getScrollableNode(scrollRef.current)?.scrollLeft ?? 0 : getScrollableNode(scrollRef.current)?.scrollTop ?? 0; }, [horizontal]); // eslint-disable-next-line @typescript-eslint/no-unsafe-return - const getContentView = useCallback(() => scrollRef.current?.getScrollableNode()?.childNodes[0], []); + const getContentView = useCallback(() => getScrollableNode(scrollRef.current)?.childNodes[0], []); const scrollToOffset = useCallback( (offset: number, animated: boolean) => { const behavior = animated ? 'smooth' : 'instant'; - scrollRef.current?.getScrollableNode()?.scroll(horizontal ? {left: offset, behavior} : {top: offset, behavior}); + getScrollableNode(scrollRef.current)?.scroll(horizontal ? {left: offset, behavior} : {top: offset, behavior}); }, [horizontal], ); @@ -75,7 +78,7 @@ function MVCPFlatList({maintainVisibleContentPosition, horizontal = false const contentViewLength = contentView.childNodes.length; for (let i = mvcpMinIndexForVisible; i < contentViewLength; i++) { - const subview = contentView.childNodes[i]; + const subview = contentView.childNodes[i] as HTMLElement; const subviewOffset = horizontal ? subview.offsetLeft : subview.offsetTop; if (subviewOffset > scrollOffset) { prevFirstVisibleOffsetRef.current = subviewOffset; diff --git a/src/components/FlatList/types.ts b/src/components/FlatList/types.ts deleted file mode 100644 index 30a30a670b8d..000000000000 --- a/src/components/FlatList/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {FlatListProps} from 'react-native'; - -type MaintainVisibleContentPositionProps = { - minIndexForVisible: number; - autoscrollToTopThreshold?: number; -}; - -type CustomFlatListProps = FlatListProps & { - maintainVisibleContentPosition?: MaintainVisibleContentPositionProps; - horizontal?: boolean; -}; - -export default CustomFlatListProps; From 6890742dd72d980bb960f0e96bb9462e1e128ab1 Mon Sep 17 00:00:00 2001 From: war-in Date: Wed, 27 Mar 2024 10:11:05 +0100 Subject: [PATCH 10/10] use appropriate FlatList in BaseInvertedFlatList --- .../InvertedFlatList/BaseInvertedFlatList/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx index f514334a97be..54f6748986f4 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx +++ b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx @@ -1,7 +1,7 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useMemo} from 'react'; -import {FlatList} from 'react-native'; -import type {FlatListProps, ScrollViewProps} from 'react-native'; +import type {FlatListProps, FlatList as RNFlatList, ScrollViewProps} from 'react-native'; +import FlatList from '@components/FlatList'; type BaseInvertedFlatListProps = FlatListProps & { shouldEnableAutoScrollToTopThreshold?: boolean; @@ -9,7 +9,7 @@ type BaseInvertedFlatListProps = FlatListProps & { const AUTOSCROLL_TO_TOP_THRESHOLD = 128; -function BaseInvertedFlatList(props: BaseInvertedFlatListProps, ref: ForwardedRef) { +function BaseInvertedFlatList(props: BaseInvertedFlatListProps, ref: ForwardedRef) { const {shouldEnableAutoScrollToTopThreshold, ...rest} = props; const maintainVisibleContentPosition = useMemo(() => {