From 4dab06555c026f7c2992d349dce7471ec98a1b43 Mon Sep 17 00:00:00 2001 From: Jerry Date: Sat, 25 Feb 2023 16:35:34 +0900 Subject: [PATCH 1/5] fix: add missing FlatList method types for Animated FlatList --- Libraries/Animated/Animated.d.ts | 75 +++++++++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/Libraries/Animated/Animated.d.ts b/Libraries/Animated/Animated.d.ts index 3301ff377246ff..8f7e0bc19f48c8 100644 --- a/Libraries/Animated/Animated.d.ts +++ b/Libraries/Animated/Animated.d.ts @@ -8,7 +8,10 @@ */ import type * as React from 'react'; -import {ScrollView} from '../Components/ScrollView/ScrollView'; +import { + ScrollView, + ScrollViewComponent, +} from '../Components/ScrollView/ScrollView'; import {View} from '../Components/View/View'; import {Image} from '../Image/Image'; import {FlatListProps} from '../Lists/FlatList'; @@ -600,7 +603,75 @@ export namespace Animated { */ export class FlatList extends React.Component< AnimatedProps> - > {} + > { + /** + * Scrolls to the end of the content. May be janky without `getItemLayout` prop. + */ + scrollToEnd: (params?: {animated?: boolean | null | undefined}) => void; + + /** + * Scrolls to the item at the specified index such that it is positioned in the viewable area + * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. + * Cannot scroll to locations outside the render window without specifying the getItemLayout prop. + */ + scrollToIndex: (params: { + animated?: boolean | null | undefined; + index: number; + viewOffset?: number | undefined; + viewPosition?: number | undefined; + }) => void; + + /** + * Requires linear scan through data - use `scrollToIndex` instead if possible. + * May be janky without `getItemLayout` prop. + */ + scrollToItem: (params: { + animated?: boolean | null | undefined; + item: ItemT; + viewOffset?: number | undefined; + viewPosition?: number | undefined; + }) => void; + + /** + * Scroll to a specific content pixel offset, like a normal `ScrollView`. + */ + scrollToOffset: (params: { + animated?: boolean | null | undefined; + offset: number; + }) => void; + + /** + * Tells the list an interaction has occurred, which should trigger viewability calculations, + * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called + * by taps on items or by navigation actions. + */ + recordInteraction: () => void; + + /** + * Displays the scroll indicators momentarily. + */ + flashScrollIndicators: () => void; + + /** + * Provides a handle to the underlying scroll responder. + */ + getScrollResponder: () => JSX.Element | null | undefined; + + /** + * Provides a reference to the underlying host component + */ + getNativeScrollRef: () => + | React.ElementRef + | React.ElementRef + | null + | undefined; + + getScrollableNode: () => any; + + // TODO: use `unknown` instead of `any` for Typescript >= 3.0 + setNativeProps: (props: {[key: string]: any}) => void; + } + export class SectionList< ItemT = any, SectionT = DefaultSectionT, From fa14c14bba64494b2e307e07eb4b58b1f1181163 Mon Sep 17 00:00:00 2001 From: Jerry Date: Sat, 25 Feb 2023 16:36:50 +0900 Subject: [PATCH 2/5] fix: add missing SectionList method types for Animated SectionList --- Libraries/Animated/Animated.d.ts | 40 ++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/Libraries/Animated/Animated.d.ts b/Libraries/Animated/Animated.d.ts index 8f7e0bc19f48c8..b82b0304e13692 100644 --- a/Libraries/Animated/Animated.d.ts +++ b/Libraries/Animated/Animated.d.ts @@ -15,7 +15,12 @@ import { import {View} from '../Components/View/View'; import {Image} from '../Image/Image'; import {FlatListProps} from '../Lists/FlatList'; -import {DefaultSectionT, SectionListProps} from '../Lists/SectionList'; +import { + DefaultSectionT, + SectionListProps, + SectionListScrollParams, +} from '../Lists/SectionList'; +import {NodeHandle} from '../ReactNative/RendererProxy'; import {ColorValue} from '../StyleSheet/StyleSheet'; import {Text} from '../Text/Text'; import {NativeSyntheticEvent} from '../Types/CoreEventTypes'; @@ -675,7 +680,38 @@ export namespace Animated { export class SectionList< ItemT = any, SectionT = DefaultSectionT, - > extends React.Component>> {} + > extends React.Component>> { + /** + * Scrolls to the item at the specified sectionIndex and itemIndex (within the section) + * positioned in the viewable area such that viewPosition 0 places it at the top + * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. + */ + scrollToLocation(params: SectionListScrollParams): void; + + /** + * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. + * if `waitForInteractions` is true and the user has not scrolled. This is typically called by + * taps on items or by navigation actions. + */ + recordInteraction(): void; + + /** + * Displays the scroll indicators momentarily. + * + * @platform ios + */ + flashScrollIndicators(): void; + + /** + * Provides a handle to the underlying scroll responder. + */ + getScrollResponder(): ScrollView | undefined; + + /** + * Provides a handle to the underlying scroll node. + */ + getScrollableNode(): NodeHandle | undefined; + } } // We need to alias these views so we can reference them in the Animated From f95dfffb37911ce7afe46ca7185e6255a118d3de Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 28 Feb 2023 01:06:35 +0900 Subject: [PATCH 3/5] refactor: refactor types of FlatList and SectionList to share method with Animated --- Libraries/Animated/Animated.d.ts | 116 +++---------------------------- Libraries/Lists/FlatList.d.ts | 12 +++- Libraries/Lists/SectionList.d.ts | 12 ++-- 3 files changed, 27 insertions(+), 113 deletions(-) diff --git a/Libraries/Animated/Animated.d.ts b/Libraries/Animated/Animated.d.ts index b82b0304e13692..6bf5c0e37f59b8 100644 --- a/Libraries/Animated/Animated.d.ts +++ b/Libraries/Animated/Animated.d.ts @@ -8,15 +8,13 @@ */ import type * as React from 'react'; -import { - ScrollView, - ScrollViewComponent, -} from '../Components/ScrollView/ScrollView'; +import {ScrollView} from '../Components/ScrollView/ScrollView'; import {View} from '../Components/View/View'; import {Image} from '../Image/Image'; -import {FlatListProps} from '../Lists/FlatList'; +import {FlatListComponent, FlatListProps} from '../Lists/FlatList'; import { DefaultSectionT, + SectionListComponent, SectionListProps, SectionListScrollParams, } from '../Lists/SectionList'; @@ -606,112 +604,18 @@ export namespace Animated { /** * FlatList and SectionList infer generic Type defined under their `data` and `section` props. */ - export class FlatList extends React.Component< - AnimatedProps> - > { - /** - * Scrolls to the end of the content. May be janky without `getItemLayout` prop. - */ - scrollToEnd: (params?: {animated?: boolean | null | undefined}) => void; - - /** - * Scrolls to the item at the specified index such that it is positioned in the viewable area - * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. - * Cannot scroll to locations outside the render window without specifying the getItemLayout prop. - */ - scrollToIndex: (params: { - animated?: boolean | null | undefined; - index: number; - viewOffset?: number | undefined; - viewPosition?: number | undefined; - }) => void; - - /** - * Requires linear scan through data - use `scrollToIndex` instead if possible. - * May be janky without `getItemLayout` prop. - */ - scrollToItem: (params: { - animated?: boolean | null | undefined; - item: ItemT; - viewOffset?: number | undefined; - viewPosition?: number | undefined; - }) => void; - - /** - * Scroll to a specific content pixel offset, like a normal `ScrollView`. - */ - scrollToOffset: (params: { - animated?: boolean | null | undefined; - offset: number; - }) => void; - - /** - * Tells the list an interaction has occurred, which should trigger viewability calculations, - * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called - * by taps on items or by navigation actions. - */ - recordInteraction: () => void; - - /** - * Displays the scroll indicators momentarily. - */ - flashScrollIndicators: () => void; - - /** - * Provides a handle to the underlying scroll responder. - */ - getScrollResponder: () => JSX.Element | null | undefined; - /** - * Provides a reference to the underlying host component - */ - getNativeScrollRef: () => - | React.ElementRef - | React.ElementRef - | null - | undefined; - - getScrollableNode: () => any; - - // TODO: use `unknown` instead of `any` for Typescript >= 3.0 - setNativeProps: (props: {[key: string]: any}) => void; - } + export class FlatList extends FlatListComponent< + ItemT, + AnimatedProps> + > {} export class SectionList< ItemT = any, SectionT = DefaultSectionT, - > extends React.Component>> { - /** - * Scrolls to the item at the specified sectionIndex and itemIndex (within the section) - * positioned in the viewable area such that viewPosition 0 places it at the top - * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. - */ - scrollToLocation(params: SectionListScrollParams): void; - - /** - * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. - * if `waitForInteractions` is true and the user has not scrolled. This is typically called by - * taps on items or by navigation actions. - */ - recordInteraction(): void; - - /** - * Displays the scroll indicators momentarily. - * - * @platform ios - */ - flashScrollIndicators(): void; - - /** - * Provides a handle to the underlying scroll responder. - */ - getScrollResponder(): ScrollView | undefined; - - /** - * Provides a handle to the underlying scroll node. - */ - getScrollableNode(): NodeHandle | undefined; - } + > extends SectionListComponent< + AnimatedProps> + > {} } // We need to alias these views so we can reference them in the Animated diff --git a/Libraries/Lists/FlatList.d.ts b/Libraries/Lists/FlatList.d.ts index 8676fb4d28b4f8..d3e350c01971a7 100644 --- a/Libraries/Lists/FlatList.d.ts +++ b/Libraries/Lists/FlatList.d.ts @@ -166,9 +166,10 @@ export interface FlatListProps extends VirtualizedListProps { fadingEdgeLength?: number | undefined; } -export class FlatList extends React.Component< - FlatListProps -> { +export abstract class FlatListComponent< + ItemT, + Props, +> extends React.Component { /** * Scrolls to the end of the content. May be janky without `getItemLayout` prop. */ @@ -236,3 +237,8 @@ export class FlatList extends React.Component< // TODO: use `unknown` instead of `any` for Typescript >= 3.0 setNativeProps: (props: {[key: string]: any}) => void; } + +export class FlatList extends FlatListComponent< + ItemT, + FlatListProps +> {} diff --git a/Libraries/Lists/SectionList.d.ts b/Libraries/Lists/SectionList.d.ts index 7ff5bbb0a3cbe1..0e2313702d6cca 100644 --- a/Libraries/Lists/SectionList.d.ts +++ b/Libraries/Lists/SectionList.d.ts @@ -210,10 +210,9 @@ export interface SectionListScrollParams { viewPosition?: number | undefined; } -export class SectionList< - ItemT = any, - SectionT = DefaultSectionT, -> extends React.Component> { +export abstract class SectionListComponent< + Props, +> extends React.Component { /** * Scrolls to the item at the specified sectionIndex and itemIndex (within the section) * positioned in the viewable area such that viewPosition 0 places it at the top @@ -246,6 +245,11 @@ export class SectionList< getScrollableNode(): NodeHandle | undefined; } +export class SectionList< + ItemT = any, + SectionT = DefaultSectionT, +> extends SectionListComponent> {} + /* This definition is deprecated because it extends the wrong base type */ export interface SectionListStatic extends React.ComponentClass> { From 9e841753695e66f4cfa2c36fedfa927a3e0ef0fa Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 28 Feb 2023 01:07:44 +0900 Subject: [PATCH 4/5] chore: remove unused type imports --- Libraries/Animated/Animated.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/Libraries/Animated/Animated.d.ts b/Libraries/Animated/Animated.d.ts index 6bf5c0e37f59b8..992282c16e82f8 100644 --- a/Libraries/Animated/Animated.d.ts +++ b/Libraries/Animated/Animated.d.ts @@ -16,7 +16,6 @@ import { DefaultSectionT, SectionListComponent, SectionListProps, - SectionListScrollParams, } from '../Lists/SectionList'; import {NodeHandle} from '../ReactNative/RendererProxy'; import {ColorValue} from '../StyleSheet/StyleSheet'; From 45ebc1d08f78911cc1c4b7f5c56c7d6c6f8a1bb8 Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 28 Feb 2023 07:18:16 +0900 Subject: [PATCH 5/5] chore: remove unused type imports --- Libraries/Animated/Animated.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/Libraries/Animated/Animated.d.ts b/Libraries/Animated/Animated.d.ts index 992282c16e82f8..fb2aeafc5eaca7 100644 --- a/Libraries/Animated/Animated.d.ts +++ b/Libraries/Animated/Animated.d.ts @@ -17,7 +17,6 @@ import { SectionListComponent, SectionListProps, } from '../Lists/SectionList'; -import {NodeHandle} from '../ReactNative/RendererProxy'; import {ColorValue} from '../StyleSheet/StyleSheet'; import {Text} from '../Text/Text'; import {NativeSyntheticEvent} from '../Types/CoreEventTypes';