@rific/scroll-view 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/index.d.mts +23 -17
- package/dist/index.d.ts +23 -17
- package/dist/index.js +720 -1960
- package/dist/index.mjs +697 -1939
- package/package.json +10 -10
- package/src/CustomList.tsx +32 -8
- package/src/FlatList.tsx +102 -20
- package/src/PullSearch.tsx +4 -3
- package/src/ScrollView.tsx +28 -8
- package/src/ScrollViewContext.ts +17 -4
- package/src/ScrollViewHeader.tsx +34 -31
- package/src/ScrollViewProvider.tsx +22 -6
- package/src/SectionList.tsx +31 -10
- package/src/internal/useScrollHandler.ts +19 -21
- package/src/internal/useScrollHandlerJS.ts +141 -0
- package/src/internal/useScrollList.ts +16 -11
- package/src/redux/scrollViewSlice.ts +19 -11
- package/src/useScrollInit.ts +200 -19
- package/src/__mocks__/auto-paper.ts +0 -9
- package/src/__mocks__/flash-list.ts +0 -20
- package/src/__mocks__/react-native-gesture-handler.ts +0 -13
- package/src/__mocks__/react-native-keyboard-controller.ts +0 -11
- package/src/__mocks__/react-native-paper.ts +0 -22
- package/src/__mocks__/react-native-reanimated.ts +0 -30
- package/src/__mocks__/react-native-safe-area-context.ts +0 -2
- package/src/__mocks__/react-native.ts +0 -30
- package/src/__tests__/CustomList.test.tsx +0 -61
- package/src/__tests__/FlatList.test.tsx +0 -52
- package/src/__tests__/PullSearch.test.tsx +0 -38
- package/src/__tests__/ScrollView.test.tsx +0 -23
- package/src/__tests__/ScrollViewHeader.test.tsx +0 -28
- package/src/__tests__/ScrollViewProvider.test.tsx +0 -65
- package/src/__tests__/SectionList.test.tsx +0 -88
- package/src/out.txt +0 -61
package/README.md
CHANGED
|
@@ -14,6 +14,8 @@ npm install @rific/scroll-view
|
|
|
14
14
|
npm install @rific/auto-paper react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-paper react-native-keyboard-controller
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
+
The exported Redux slice has no dependency on `@reduxjs/toolkit` — it works with RTK stores, vanilla Redux, or no Redux at all.
|
|
18
|
+
|
|
17
19
|
## Quick start
|
|
18
20
|
|
|
19
21
|
Wrap your screen in `ScrollViewProvider`, add a `ScrollViewHeader`, then drop in one of the scroll components.
|
package/dist/index.d.mts
CHANGED
|
@@ -3,9 +3,6 @@ import { ReactNode, ComponentType, RefObject } from 'react';
|
|
|
3
3
|
import { NativeSyntheticEvent, NativeScrollEvent, StyleProp, ViewStyle, FlatListProps as FlatListProps$1, FlatList as FlatList$1, ScrollViewProps as ScrollViewProps$1, ScrollView as ScrollView$1, SectionListProps as SectionListProps$1, SectionList as SectionList$1 } from 'react-native';
|
|
4
4
|
import { GestureType } from 'react-native-gesture-handler';
|
|
5
5
|
import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
|
|
6
|
-
import * as redux from 'redux';
|
|
7
|
-
import * as _reduxjs_toolkit from '@reduxjs/toolkit';
|
|
8
|
-
import { PayloadAction } from '@reduxjs/toolkit';
|
|
9
6
|
import * as react_native_reanimated from 'react-native-reanimated';
|
|
10
7
|
import { SharedValue } from 'react-native-reanimated';
|
|
11
8
|
|
|
@@ -56,7 +53,7 @@ type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
|
|
|
56
53
|
pullSearchHeight?: number;
|
|
57
54
|
ref?: RefObject<FlatList$1 | null>;
|
|
58
55
|
};
|
|
59
|
-
declare const FlatListInner: <T>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
|
|
56
|
+
declare const FlatListInner: <T>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, keyExtractor, maxToRenderPerBatch, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
|
|
60
57
|
declare const FlatList: typeof FlatListInner;
|
|
61
58
|
|
|
62
59
|
type PullSearchHandle = {
|
|
@@ -87,17 +84,22 @@ type ScrollViewSettingsContextType = {
|
|
|
87
84
|
};
|
|
88
85
|
declare const ScrollViewSettingsContext: react.Context<ScrollViewSettingsContextType>;
|
|
89
86
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
87
|
+
type PayloadAction<P> = {
|
|
88
|
+
payload: P;
|
|
89
|
+
type: string;
|
|
90
|
+
};
|
|
91
|
+
declare const scrollViewActions: {
|
|
92
|
+
initialize: {
|
|
93
|
+
(payload: ScrollViewSettings): PayloadAction<ScrollViewSettings>;
|
|
94
|
+
type: string;
|
|
95
|
+
match(action: {
|
|
96
|
+
type: string;
|
|
97
|
+
}): action is PayloadAction<ScrollViewSettings>;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
declare const scrollViewReducer: (state: ScrollViewSettings | undefined, action: {
|
|
101
|
+
type: string;
|
|
102
|
+
}) => ScrollViewSettings;
|
|
101
103
|
|
|
102
104
|
type ScrollViewProps = ScrollViewProps$1 & {
|
|
103
105
|
chipProps?: ChipProps;
|
|
@@ -123,10 +125,14 @@ type ScrollViewContextType = {
|
|
|
123
125
|
footerHeightShared: SharedValue<number>;
|
|
124
126
|
footerFixed: boolean;
|
|
125
127
|
footerOffset: SharedValue<number>;
|
|
126
|
-
headerHeight: number;
|
|
128
|
+
headerHeight: number | null;
|
|
127
129
|
headerHeightShared: SharedValue<number>;
|
|
128
130
|
headerFixed: boolean;
|
|
129
131
|
headerOffset: SharedValue<number>;
|
|
132
|
+
jsListGeneration: RefObject<number>;
|
|
133
|
+
listGeneration: SharedValue<number>;
|
|
134
|
+
onJsListUnmount: () => void;
|
|
135
|
+
onListUnmount: () => void;
|
|
130
136
|
progress: number | null;
|
|
131
137
|
pullSearchHeightShared: SharedValue<number>;
|
|
132
138
|
snapBackFooterShared: SharedValue<boolean>;
|
|
@@ -135,7 +141,7 @@ type ScrollViewContextType = {
|
|
|
135
141
|
scrollHeight: number;
|
|
136
142
|
scrollPosition: SharedValue<number>;
|
|
137
143
|
setFooterHeight: (h: number) => void;
|
|
138
|
-
setHeaderHeight: (h: number) => void;
|
|
144
|
+
setHeaderHeight: (h: number | null) => void;
|
|
139
145
|
setProgress: (p: number | null) => void;
|
|
140
146
|
setProgressing: (b: boolean) => void;
|
|
141
147
|
tabBarHeight: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,9 +3,6 @@ import { ReactNode, ComponentType, RefObject } from 'react';
|
|
|
3
3
|
import { NativeSyntheticEvent, NativeScrollEvent, StyleProp, ViewStyle, FlatListProps as FlatListProps$1, FlatList as FlatList$1, ScrollViewProps as ScrollViewProps$1, ScrollView as ScrollView$1, SectionListProps as SectionListProps$1, SectionList as SectionList$1 } from 'react-native';
|
|
4
4
|
import { GestureType } from 'react-native-gesture-handler';
|
|
5
5
|
import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
|
|
6
|
-
import * as redux from 'redux';
|
|
7
|
-
import * as _reduxjs_toolkit from '@reduxjs/toolkit';
|
|
8
|
-
import { PayloadAction } from '@reduxjs/toolkit';
|
|
9
6
|
import * as react_native_reanimated from 'react-native-reanimated';
|
|
10
7
|
import { SharedValue } from 'react-native-reanimated';
|
|
11
8
|
|
|
@@ -56,7 +53,7 @@ type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
|
|
|
56
53
|
pullSearchHeight?: number;
|
|
57
54
|
ref?: RefObject<FlatList$1 | null>;
|
|
58
55
|
};
|
|
59
|
-
declare const FlatListInner: <T>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
|
|
56
|
+
declare const FlatListInner: <T>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, keyExtractor, maxToRenderPerBatch, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
|
|
60
57
|
declare const FlatList: typeof FlatListInner;
|
|
61
58
|
|
|
62
59
|
type PullSearchHandle = {
|
|
@@ -87,17 +84,22 @@ type ScrollViewSettingsContextType = {
|
|
|
87
84
|
};
|
|
88
85
|
declare const ScrollViewSettingsContext: react.Context<ScrollViewSettingsContextType>;
|
|
89
86
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
87
|
+
type PayloadAction<P> = {
|
|
88
|
+
payload: P;
|
|
89
|
+
type: string;
|
|
90
|
+
};
|
|
91
|
+
declare const scrollViewActions: {
|
|
92
|
+
initialize: {
|
|
93
|
+
(payload: ScrollViewSettings): PayloadAction<ScrollViewSettings>;
|
|
94
|
+
type: string;
|
|
95
|
+
match(action: {
|
|
96
|
+
type: string;
|
|
97
|
+
}): action is PayloadAction<ScrollViewSettings>;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
declare const scrollViewReducer: (state: ScrollViewSettings | undefined, action: {
|
|
101
|
+
type: string;
|
|
102
|
+
}) => ScrollViewSettings;
|
|
101
103
|
|
|
102
104
|
type ScrollViewProps = ScrollViewProps$1 & {
|
|
103
105
|
chipProps?: ChipProps;
|
|
@@ -123,10 +125,14 @@ type ScrollViewContextType = {
|
|
|
123
125
|
footerHeightShared: SharedValue<number>;
|
|
124
126
|
footerFixed: boolean;
|
|
125
127
|
footerOffset: SharedValue<number>;
|
|
126
|
-
headerHeight: number;
|
|
128
|
+
headerHeight: number | null;
|
|
127
129
|
headerHeightShared: SharedValue<number>;
|
|
128
130
|
headerFixed: boolean;
|
|
129
131
|
headerOffset: SharedValue<number>;
|
|
132
|
+
jsListGeneration: RefObject<number>;
|
|
133
|
+
listGeneration: SharedValue<number>;
|
|
134
|
+
onJsListUnmount: () => void;
|
|
135
|
+
onListUnmount: () => void;
|
|
130
136
|
progress: number | null;
|
|
131
137
|
pullSearchHeightShared: SharedValue<number>;
|
|
132
138
|
snapBackFooterShared: SharedValue<boolean>;
|
|
@@ -135,7 +141,7 @@ type ScrollViewContextType = {
|
|
|
135
141
|
scrollHeight: number;
|
|
136
142
|
scrollPosition: SharedValue<number>;
|
|
137
143
|
setFooterHeight: (h: number) => void;
|
|
138
|
-
setHeaderHeight: (h: number) => void;
|
|
144
|
+
setHeaderHeight: (h: number | null) => void;
|
|
139
145
|
setProgress: (p: number | null) => void;
|
|
140
146
|
setProgressing: (b: boolean) => void;
|
|
141
147
|
tabBarHeight: number;
|