@legendapp/list 3.0.0-beta.1 → 3.0.0-beta.11
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/index.d.mts +3 -3
- package/index.d.ts +3 -3
- package/index.js +659 -447
- package/index.mjs +659 -447
- package/index.native.d.mts +3 -3
- package/index.native.d.ts +3 -3
- package/index.native.js +631 -392
- package/index.native.mjs +631 -392
- package/keyboard.d.mts +13 -0
- package/keyboard.d.ts +13 -0
- package/keyboard.js +221 -0
- package/keyboard.mjs +199 -0
- package/package.json +1 -1
- package/reanimated.d.mts +3 -3
- package/reanimated.d.ts +3 -3
- package/reanimated.js +16 -5
- package/reanimated.mjs +15 -4
- package/section-list.d.mts +1 -1
- package/section-list.d.ts +1 -1
- package/section-list.js +596 -415
- package/section-list.mjs +596 -415
- package/section-list.native.d.mts +1 -1
- package/section-list.native.d.ts +1 -1
- package/section-list.native.js +573 -366
- package/section-list.native.mjs +573 -366
- package/{types-YNdphn_A.d.mts → types-1Hgg1rTO.d.mts} +167 -113
- package/{types-YNdphn_A.d.ts → types-1Hgg1rTO.d.ts} +167 -113
- package/types-JPHClxiw.d.mts +0 -670
- package/types-JPHClxiw.d.ts +0 -670
package/keyboard.d.mts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Insets } from 'react-native';
|
|
3
|
+
import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
|
|
4
|
+
import { LegendListRef } from '@legendapp/list';
|
|
5
|
+
import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
|
|
6
|
+
|
|
7
|
+
declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "contentInset"> & {
|
|
8
|
+
onScroll?: (event: ReanimatedScrollEvent) => void;
|
|
9
|
+
contentInset?: Insets | undefined;
|
|
10
|
+
safeAreaInsetBottom?: number;
|
|
11
|
+
} & React.RefAttributes<LegendListRef>) => React.ReactNode;
|
|
12
|
+
|
|
13
|
+
export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };
|
package/keyboard.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Insets } from 'react-native';
|
|
3
|
+
import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
|
|
4
|
+
import { LegendListRef } from '@legendapp/list';
|
|
5
|
+
import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
|
|
6
|
+
|
|
7
|
+
declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "contentInset"> & {
|
|
8
|
+
onScroll?: (event: ReanimatedScrollEvent) => void;
|
|
9
|
+
contentInset?: Insets | undefined;
|
|
10
|
+
safeAreaInsetBottom?: number;
|
|
11
|
+
} & React.RefAttributes<LegendListRef>) => React.ReactNode;
|
|
12
|
+
|
|
13
|
+
export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };
|
package/keyboard.js
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var reactNative = require('react-native');
|
|
5
|
+
var reactNativeKeyboardController = require('react-native-keyboard-controller');
|
|
6
|
+
var reactNativeReanimated = require('react-native-reanimated');
|
|
7
|
+
var reanimated = require('@legendapp/list/reanimated');
|
|
8
|
+
|
|
9
|
+
function _interopNamespace(e) {
|
|
10
|
+
if (e && e.__esModule) return e;
|
|
11
|
+
var n = Object.create(null);
|
|
12
|
+
if (e) {
|
|
13
|
+
Object.keys(e).forEach(function (k) {
|
|
14
|
+
if (k !== 'default') {
|
|
15
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () { return e[k]; }
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
n.default = e;
|
|
24
|
+
return Object.freeze(n);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
|
+
|
|
29
|
+
// src/integrations/keyboard.tsx
|
|
30
|
+
|
|
31
|
+
// src/utils/helpers.ts
|
|
32
|
+
function isFunction(obj) {
|
|
33
|
+
return typeof obj === "function";
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// src/hooks/useCombinedRef.ts
|
|
37
|
+
var useCombinedRef = (...refs) => {
|
|
38
|
+
const callback = React.useCallback((element) => {
|
|
39
|
+
for (const ref of refs) {
|
|
40
|
+
if (!ref) {
|
|
41
|
+
continue;
|
|
42
|
+
}
|
|
43
|
+
if (isFunction(ref)) {
|
|
44
|
+
ref(element);
|
|
45
|
+
} else {
|
|
46
|
+
ref.current = element;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, refs);
|
|
50
|
+
return callback;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
// src/integrations/keyboard.tsx
|
|
54
|
+
var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
|
|
55
|
+
const {
|
|
56
|
+
contentInset: contentInsetProp,
|
|
57
|
+
horizontal,
|
|
58
|
+
onScroll: onScrollProp,
|
|
59
|
+
safeAreaInsetBottom = 0,
|
|
60
|
+
style: styleProp,
|
|
61
|
+
...rest
|
|
62
|
+
} = props;
|
|
63
|
+
const styleFlattened = reactNative.StyleSheet.flatten(styleProp);
|
|
64
|
+
const refLegendList = React.useRef(null);
|
|
65
|
+
const combinedRef = useCombinedRef(forwardedRef, refLegendList);
|
|
66
|
+
const isIos = reactNative.Platform.OS === "ios";
|
|
67
|
+
const isAndroid = reactNative.Platform.OS === "android";
|
|
68
|
+
const scrollViewRef = reactNativeReanimated.useAnimatedRef();
|
|
69
|
+
const scrollOffsetY = reactNativeReanimated.useSharedValue(0);
|
|
70
|
+
const animatedOffsetY = reactNativeReanimated.useSharedValue(null);
|
|
71
|
+
const scrollOffsetAtKeyboardStart = reactNativeReanimated.useSharedValue(0);
|
|
72
|
+
const mode = reactNativeReanimated.useSharedValue("idle");
|
|
73
|
+
const keyboardInset = reactNativeReanimated.useSharedValue(0);
|
|
74
|
+
const keyboardHeight = reactNativeReanimated.useSharedValue(0);
|
|
75
|
+
const isOpening = reactNativeReanimated.useSharedValue(false);
|
|
76
|
+
const didInteractive = reactNativeReanimated.useSharedValue(false);
|
|
77
|
+
const isKeyboardOpen = reactNativeReanimated.useSharedValue(false);
|
|
78
|
+
const scrollHandler = reactNativeReanimated.useAnimatedScrollHandler(
|
|
79
|
+
(event) => {
|
|
80
|
+
scrollOffsetY.set(event.contentOffset[horizontal ? "x" : "y"]);
|
|
81
|
+
if (onScrollProp) {
|
|
82
|
+
reactNativeReanimated.runOnJS(onScrollProp)(event);
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
[onScrollProp, horizontal]
|
|
86
|
+
);
|
|
87
|
+
const setScrollProcessingEnabled = React.useCallback(
|
|
88
|
+
(enabled) => {
|
|
89
|
+
var _a;
|
|
90
|
+
return (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
|
|
91
|
+
},
|
|
92
|
+
[refLegendList]
|
|
93
|
+
);
|
|
94
|
+
reactNativeKeyboardController.useKeyboardHandler(
|
|
95
|
+
// biome-ignore assist/source/useSortedKeys: prefer start/move/end
|
|
96
|
+
{
|
|
97
|
+
onStart: (event) => {
|
|
98
|
+
"worklet";
|
|
99
|
+
mode.set("running");
|
|
100
|
+
if (isKeyboardOpen.get() && event.progress === 1 && event.height > 0) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
if (!didInteractive.get()) {
|
|
104
|
+
if (event.height > 0) {
|
|
105
|
+
keyboardHeight.set(event.height - safeAreaInsetBottom);
|
|
106
|
+
}
|
|
107
|
+
isOpening.set(event.progress > 0);
|
|
108
|
+
scrollOffsetAtKeyboardStart.set(scrollOffsetY.get());
|
|
109
|
+
animatedOffsetY.set(scrollOffsetY.get());
|
|
110
|
+
reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
onInteractive: (event) => {
|
|
114
|
+
"worklet";
|
|
115
|
+
if (mode.get() !== "running") {
|
|
116
|
+
reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
|
|
117
|
+
}
|
|
118
|
+
mode.set("running");
|
|
119
|
+
if (!didInteractive.get()) {
|
|
120
|
+
didInteractive.set(true);
|
|
121
|
+
}
|
|
122
|
+
if (isAndroid && !horizontal) {
|
|
123
|
+
keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
onMove: (event) => {
|
|
127
|
+
"worklet";
|
|
128
|
+
if (!didInteractive.get()) {
|
|
129
|
+
const vIsOpening = isOpening.get();
|
|
130
|
+
const vKeyboardHeight = keyboardHeight.get();
|
|
131
|
+
const vProgress = vIsOpening ? event.progress : 1 - event.progress;
|
|
132
|
+
const targetOffset = Math.max(
|
|
133
|
+
0,
|
|
134
|
+
scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress
|
|
135
|
+
);
|
|
136
|
+
scrollOffsetY.set(targetOffset);
|
|
137
|
+
animatedOffsetY.set(targetOffset);
|
|
138
|
+
if (!horizontal) {
|
|
139
|
+
keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
onEnd: (event) => {
|
|
144
|
+
"worklet";
|
|
145
|
+
const wasInteractive = didInteractive.get();
|
|
146
|
+
const vMode = mode.get();
|
|
147
|
+
mode.set("idle");
|
|
148
|
+
if (vMode === "running") {
|
|
149
|
+
if (!wasInteractive) {
|
|
150
|
+
const vIsOpening = isOpening.get();
|
|
151
|
+
const vKeyboardHeight = keyboardHeight.get();
|
|
152
|
+
const targetOffset = Math.max(
|
|
153
|
+
0,
|
|
154
|
+
scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress)
|
|
155
|
+
);
|
|
156
|
+
scrollOffsetY.set(targetOffset);
|
|
157
|
+
animatedOffsetY.set(targetOffset);
|
|
158
|
+
}
|
|
159
|
+
reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(true);
|
|
160
|
+
didInteractive.set(false);
|
|
161
|
+
isKeyboardOpen.set(event.height > 0);
|
|
162
|
+
if (!horizontal) {
|
|
163
|
+
const newInset = Math.max(0, event.height - safeAreaInsetBottom);
|
|
164
|
+
if (newInset > 0) {
|
|
165
|
+
keyboardInset.set(newInset);
|
|
166
|
+
} else {
|
|
167
|
+
keyboardInset.set(newInset);
|
|
168
|
+
animatedOffsetY.set(scrollOffsetY.get());
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
[scrollViewRef, safeAreaInsetBottom]
|
|
175
|
+
);
|
|
176
|
+
const animatedProps = reactNativeReanimated.useAnimatedProps(() => {
|
|
177
|
+
"worklet";
|
|
178
|
+
var _a, _b, _c, _d;
|
|
179
|
+
const vAnimatedOffsetY = animatedOffsetY.get();
|
|
180
|
+
const baseProps = {
|
|
181
|
+
contentOffset: vAnimatedOffsetY === null ? void 0 : {
|
|
182
|
+
x: 0,
|
|
183
|
+
y: vAnimatedOffsetY
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
return isIos ? Object.assign(baseProps, {
|
|
187
|
+
contentInset: {
|
|
188
|
+
bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.get()),
|
|
189
|
+
left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
|
|
190
|
+
right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
|
|
191
|
+
top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
|
|
192
|
+
}
|
|
193
|
+
}) : baseProps;
|
|
194
|
+
});
|
|
195
|
+
const style = isAndroid ? reactNativeReanimated.useAnimatedStyle(
|
|
196
|
+
() => {
|
|
197
|
+
var _a;
|
|
198
|
+
return {
|
|
199
|
+
...styleFlattened || {},
|
|
200
|
+
marginBottom: (_a = keyboardInset.get()) != null ? _a : 0
|
|
201
|
+
};
|
|
202
|
+
},
|
|
203
|
+
[styleProp, keyboardInset]
|
|
204
|
+
) : void 0;
|
|
205
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
206
|
+
reanimated.AnimatedLegendList,
|
|
207
|
+
{
|
|
208
|
+
...rest,
|
|
209
|
+
animatedProps,
|
|
210
|
+
keyboardDismissMode: "interactive",
|
|
211
|
+
onScroll: scrollHandler,
|
|
212
|
+
ref: combinedRef,
|
|
213
|
+
refScrollView: scrollViewRef,
|
|
214
|
+
scrollIndicatorInsets: { bottom: 0, top: 0 },
|
|
215
|
+
style
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
exports.KeyboardAvoidingLegendList = KeyboardAvoidingLegendList;
|
|
221
|
+
exports.LegendList = KeyboardAvoidingLegendList;
|
package/keyboard.mjs
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { forwardRef, useRef, useCallback } from 'react';
|
|
3
|
+
import { StyleSheet, Platform } from 'react-native';
|
|
4
|
+
import { useKeyboardHandler } from 'react-native-keyboard-controller';
|
|
5
|
+
import { useAnimatedRef, useSharedValue, useAnimatedScrollHandler, runOnJS, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
|
|
6
|
+
import { AnimatedLegendList } from '@legendapp/list/reanimated';
|
|
7
|
+
|
|
8
|
+
// src/integrations/keyboard.tsx
|
|
9
|
+
|
|
10
|
+
// src/utils/helpers.ts
|
|
11
|
+
function isFunction(obj) {
|
|
12
|
+
return typeof obj === "function";
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// src/hooks/useCombinedRef.ts
|
|
16
|
+
var useCombinedRef = (...refs) => {
|
|
17
|
+
const callback = useCallback((element) => {
|
|
18
|
+
for (const ref of refs) {
|
|
19
|
+
if (!ref) {
|
|
20
|
+
continue;
|
|
21
|
+
}
|
|
22
|
+
if (isFunction(ref)) {
|
|
23
|
+
ref(element);
|
|
24
|
+
} else {
|
|
25
|
+
ref.current = element;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}, refs);
|
|
29
|
+
return callback;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// src/integrations/keyboard.tsx
|
|
33
|
+
var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
|
|
34
|
+
const {
|
|
35
|
+
contentInset: contentInsetProp,
|
|
36
|
+
horizontal,
|
|
37
|
+
onScroll: onScrollProp,
|
|
38
|
+
safeAreaInsetBottom = 0,
|
|
39
|
+
style: styleProp,
|
|
40
|
+
...rest
|
|
41
|
+
} = props;
|
|
42
|
+
const styleFlattened = StyleSheet.flatten(styleProp);
|
|
43
|
+
const refLegendList = useRef(null);
|
|
44
|
+
const combinedRef = useCombinedRef(forwardedRef, refLegendList);
|
|
45
|
+
const isIos = Platform.OS === "ios";
|
|
46
|
+
const isAndroid = Platform.OS === "android";
|
|
47
|
+
const scrollViewRef = useAnimatedRef();
|
|
48
|
+
const scrollOffsetY = useSharedValue(0);
|
|
49
|
+
const animatedOffsetY = useSharedValue(null);
|
|
50
|
+
const scrollOffsetAtKeyboardStart = useSharedValue(0);
|
|
51
|
+
const mode = useSharedValue("idle");
|
|
52
|
+
const keyboardInset = useSharedValue(0);
|
|
53
|
+
const keyboardHeight = useSharedValue(0);
|
|
54
|
+
const isOpening = useSharedValue(false);
|
|
55
|
+
const didInteractive = useSharedValue(false);
|
|
56
|
+
const isKeyboardOpen = useSharedValue(false);
|
|
57
|
+
const scrollHandler = useAnimatedScrollHandler(
|
|
58
|
+
(event) => {
|
|
59
|
+
scrollOffsetY.set(event.contentOffset[horizontal ? "x" : "y"]);
|
|
60
|
+
if (onScrollProp) {
|
|
61
|
+
runOnJS(onScrollProp)(event);
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
[onScrollProp, horizontal]
|
|
65
|
+
);
|
|
66
|
+
const setScrollProcessingEnabled = useCallback(
|
|
67
|
+
(enabled) => {
|
|
68
|
+
var _a;
|
|
69
|
+
return (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
|
|
70
|
+
},
|
|
71
|
+
[refLegendList]
|
|
72
|
+
);
|
|
73
|
+
useKeyboardHandler(
|
|
74
|
+
// biome-ignore assist/source/useSortedKeys: prefer start/move/end
|
|
75
|
+
{
|
|
76
|
+
onStart: (event) => {
|
|
77
|
+
"worklet";
|
|
78
|
+
mode.set("running");
|
|
79
|
+
if (isKeyboardOpen.get() && event.progress === 1 && event.height > 0) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
if (!didInteractive.get()) {
|
|
83
|
+
if (event.height > 0) {
|
|
84
|
+
keyboardHeight.set(event.height - safeAreaInsetBottom);
|
|
85
|
+
}
|
|
86
|
+
isOpening.set(event.progress > 0);
|
|
87
|
+
scrollOffsetAtKeyboardStart.set(scrollOffsetY.get());
|
|
88
|
+
animatedOffsetY.set(scrollOffsetY.get());
|
|
89
|
+
runOnJS(setScrollProcessingEnabled)(false);
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
onInteractive: (event) => {
|
|
93
|
+
"worklet";
|
|
94
|
+
if (mode.get() !== "running") {
|
|
95
|
+
runOnJS(setScrollProcessingEnabled)(false);
|
|
96
|
+
}
|
|
97
|
+
mode.set("running");
|
|
98
|
+
if (!didInteractive.get()) {
|
|
99
|
+
didInteractive.set(true);
|
|
100
|
+
}
|
|
101
|
+
if (isAndroid && !horizontal) {
|
|
102
|
+
keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
onMove: (event) => {
|
|
106
|
+
"worklet";
|
|
107
|
+
if (!didInteractive.get()) {
|
|
108
|
+
const vIsOpening = isOpening.get();
|
|
109
|
+
const vKeyboardHeight = keyboardHeight.get();
|
|
110
|
+
const vProgress = vIsOpening ? event.progress : 1 - event.progress;
|
|
111
|
+
const targetOffset = Math.max(
|
|
112
|
+
0,
|
|
113
|
+
scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress
|
|
114
|
+
);
|
|
115
|
+
scrollOffsetY.set(targetOffset);
|
|
116
|
+
animatedOffsetY.set(targetOffset);
|
|
117
|
+
if (!horizontal) {
|
|
118
|
+
keyboardInset.set(Math.max(0, event.height - safeAreaInsetBottom));
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
onEnd: (event) => {
|
|
123
|
+
"worklet";
|
|
124
|
+
const wasInteractive = didInteractive.get();
|
|
125
|
+
const vMode = mode.get();
|
|
126
|
+
mode.set("idle");
|
|
127
|
+
if (vMode === "running") {
|
|
128
|
+
if (!wasInteractive) {
|
|
129
|
+
const vIsOpening = isOpening.get();
|
|
130
|
+
const vKeyboardHeight = keyboardHeight.get();
|
|
131
|
+
const targetOffset = Math.max(
|
|
132
|
+
0,
|
|
133
|
+
scrollOffsetAtKeyboardStart.get() + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress)
|
|
134
|
+
);
|
|
135
|
+
scrollOffsetY.set(targetOffset);
|
|
136
|
+
animatedOffsetY.set(targetOffset);
|
|
137
|
+
}
|
|
138
|
+
runOnJS(setScrollProcessingEnabled)(true);
|
|
139
|
+
didInteractive.set(false);
|
|
140
|
+
isKeyboardOpen.set(event.height > 0);
|
|
141
|
+
if (!horizontal) {
|
|
142
|
+
const newInset = Math.max(0, event.height - safeAreaInsetBottom);
|
|
143
|
+
if (newInset > 0) {
|
|
144
|
+
keyboardInset.set(newInset);
|
|
145
|
+
} else {
|
|
146
|
+
keyboardInset.set(newInset);
|
|
147
|
+
animatedOffsetY.set(scrollOffsetY.get());
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
[scrollViewRef, safeAreaInsetBottom]
|
|
154
|
+
);
|
|
155
|
+
const animatedProps = useAnimatedProps(() => {
|
|
156
|
+
"worklet";
|
|
157
|
+
var _a, _b, _c, _d;
|
|
158
|
+
const vAnimatedOffsetY = animatedOffsetY.get();
|
|
159
|
+
const baseProps = {
|
|
160
|
+
contentOffset: vAnimatedOffsetY === null ? void 0 : {
|
|
161
|
+
x: 0,
|
|
162
|
+
y: vAnimatedOffsetY
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
return isIos ? Object.assign(baseProps, {
|
|
166
|
+
contentInset: {
|
|
167
|
+
bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.get()),
|
|
168
|
+
left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
|
|
169
|
+
right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
|
|
170
|
+
top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
|
|
171
|
+
}
|
|
172
|
+
}) : baseProps;
|
|
173
|
+
});
|
|
174
|
+
const style = isAndroid ? useAnimatedStyle(
|
|
175
|
+
() => {
|
|
176
|
+
var _a;
|
|
177
|
+
return {
|
|
178
|
+
...styleFlattened || {},
|
|
179
|
+
marginBottom: (_a = keyboardInset.get()) != null ? _a : 0
|
|
180
|
+
};
|
|
181
|
+
},
|
|
182
|
+
[styleProp, keyboardInset]
|
|
183
|
+
) : void 0;
|
|
184
|
+
return /* @__PURE__ */ React.createElement(
|
|
185
|
+
AnimatedLegendList,
|
|
186
|
+
{
|
|
187
|
+
...rest,
|
|
188
|
+
animatedProps,
|
|
189
|
+
keyboardDismissMode: "interactive",
|
|
190
|
+
onScroll: scrollHandler,
|
|
191
|
+
ref: combinedRef,
|
|
192
|
+
refScrollView: scrollViewRef,
|
|
193
|
+
scrollIndicatorInsets: { bottom: 0, top: 0 },
|
|
194
|
+
style
|
|
195
|
+
}
|
|
196
|
+
);
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@legendapp/list",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.11",
|
|
4
4
|
"description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"private": false,
|
package/reanimated.d.mts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import Reanimated from 'react-native-reanimated';
|
|
4
4
|
import { LegendListPropsBase, LegendListRef } from '@legendapp/list';
|
|
5
5
|
|
|
6
6
|
type KeysToOmit = "getEstimatedItemSize" | "getFixedItemSize" | "getItemType" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged" | "itemsAreEqual" | "ItemSeparatorComponent";
|
|
7
|
-
type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof
|
|
7
|
+
type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Reanimated.ScrollView>>;
|
|
8
8
|
interface AnimatedLegendListPropsBase<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
|
|
9
|
-
refScrollView?: React.Ref<
|
|
9
|
+
refScrollView?: React.Ref<Reanimated.ScrollView>;
|
|
10
10
|
}
|
|
11
11
|
type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
|
|
12
12
|
type AnimatedLegendListProps<ItemT> = Omit<AnimatedLegendListPropsBase<ItemT>, "refLegendList" | "ref"> & OtherAnimatedLegendListProps<ItemT>;
|
package/reanimated.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import Reanimated from 'react-native-reanimated';
|
|
4
4
|
import { LegendListPropsBase, LegendListRef } from '@legendapp/list';
|
|
5
5
|
|
|
6
6
|
type KeysToOmit = "getEstimatedItemSize" | "getFixedItemSize" | "getItemType" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged" | "itemsAreEqual" | "ItemSeparatorComponent";
|
|
7
|
-
type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof
|
|
7
|
+
type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Reanimated.ScrollView>>;
|
|
8
8
|
interface AnimatedLegendListPropsBase<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
|
|
9
|
-
refScrollView?: React.Ref<
|
|
9
|
+
refScrollView?: React.Ref<Reanimated.ScrollView>;
|
|
10
10
|
}
|
|
11
11
|
type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
|
|
12
12
|
type AnimatedLegendListProps<ItemT> = Omit<AnimatedLegendListPropsBase<ItemT>, "refLegendList" | "ref"> & OtherAnimatedLegendListProps<ItemT>;
|
package/reanimated.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var Reanimated = require('react-native-reanimated');
|
|
5
5
|
var list = require('@legendapp/list');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
|
-
var
|
|
28
|
+
var Reanimated__default = /*#__PURE__*/_interopDefault(Reanimated);
|
|
29
29
|
|
|
30
30
|
// src/integrations/reanimated.tsx
|
|
31
31
|
|
|
@@ -54,6 +54,7 @@ var useCombinedRef = (...refs) => {
|
|
|
54
54
|
// src/integrations/reanimated.tsx
|
|
55
55
|
var typedMemo = React.memo;
|
|
56
56
|
var LegendListForwardedRef = typedMemo(
|
|
57
|
+
// biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
|
|
57
58
|
React__namespace.forwardRef(function LegendListForwardedRef2(props, ref) {
|
|
58
59
|
const { refLegendList, ...rest } = props;
|
|
59
60
|
const refFn = React.useCallback(
|
|
@@ -65,13 +66,23 @@ var LegendListForwardedRef = typedMemo(
|
|
|
65
66
|
return /* @__PURE__ */ React__namespace.createElement(list.LegendList, { ref: refFn, refScrollView: ref, ...rest });
|
|
66
67
|
})
|
|
67
68
|
);
|
|
68
|
-
var AnimatedLegendListComponent =
|
|
69
|
+
var AnimatedLegendListComponent = Reanimated__default.default.createAnimatedComponent(LegendListForwardedRef);
|
|
69
70
|
var AnimatedLegendList = typedMemo(
|
|
71
|
+
// biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
|
|
70
72
|
React__namespace.forwardRef(function AnimatedLegendList2(props, ref) {
|
|
71
|
-
const { refScrollView, ...rest } = props;
|
|
73
|
+
const { refScrollView, animatedProps, ...rest } = props;
|
|
72
74
|
const refLegendList = React__namespace.useRef(null);
|
|
73
75
|
const combinedRef = useCombinedRef(refLegendList, ref);
|
|
74
|
-
return /* @__PURE__ */ React__namespace.createElement(
|
|
76
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
77
|
+
AnimatedLegendListComponent,
|
|
78
|
+
{
|
|
79
|
+
animatedProps,
|
|
80
|
+
animatedPropsInternal: animatedProps,
|
|
81
|
+
ref: refScrollView,
|
|
82
|
+
refLegendList: combinedRef,
|
|
83
|
+
...rest
|
|
84
|
+
}
|
|
85
|
+
);
|
|
75
86
|
})
|
|
76
87
|
);
|
|
77
88
|
|
package/reanimated.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useCallback, memo } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import Reanimated from 'react-native-reanimated';
|
|
4
4
|
import { LegendList } from '@legendapp/list';
|
|
5
5
|
|
|
6
6
|
// src/integrations/reanimated.tsx
|
|
@@ -30,6 +30,7 @@ var useCombinedRef = (...refs) => {
|
|
|
30
30
|
// src/integrations/reanimated.tsx
|
|
31
31
|
var typedMemo = memo;
|
|
32
32
|
var LegendListForwardedRef = typedMemo(
|
|
33
|
+
// biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
|
|
33
34
|
React.forwardRef(function LegendListForwardedRef2(props, ref) {
|
|
34
35
|
const { refLegendList, ...rest } = props;
|
|
35
36
|
const refFn = useCallback(
|
|
@@ -41,13 +42,23 @@ var LegendListForwardedRef = typedMemo(
|
|
|
41
42
|
return /* @__PURE__ */ React.createElement(LegendList, { ref: refFn, refScrollView: ref, ...rest });
|
|
42
43
|
})
|
|
43
44
|
);
|
|
44
|
-
var AnimatedLegendListComponent =
|
|
45
|
+
var AnimatedLegendListComponent = Reanimated.createAnimatedComponent(LegendListForwardedRef);
|
|
45
46
|
var AnimatedLegendList = typedMemo(
|
|
47
|
+
// biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
|
|
46
48
|
React.forwardRef(function AnimatedLegendList2(props, ref) {
|
|
47
|
-
const { refScrollView, ...rest } = props;
|
|
49
|
+
const { refScrollView, animatedProps, ...rest } = props;
|
|
48
50
|
const refLegendList = React.useRef(null);
|
|
49
51
|
const combinedRef = useCombinedRef(refLegendList, ref);
|
|
50
|
-
return /* @__PURE__ */ React.createElement(
|
|
52
|
+
return /* @__PURE__ */ React.createElement(
|
|
53
|
+
AnimatedLegendListComponent,
|
|
54
|
+
{
|
|
55
|
+
animatedProps,
|
|
56
|
+
animatedPropsInternal: animatedProps,
|
|
57
|
+
ref: refScrollView,
|
|
58
|
+
refLegendList: combinedRef,
|
|
59
|
+
...rest
|
|
60
|
+
}
|
|
61
|
+
);
|
|
51
62
|
})
|
|
52
63
|
);
|
|
53
64
|
|
package/section-list.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_native from 'react-native';
|
|
2
2
|
import { SectionListData, SectionBase, SectionListRenderItemInfo, SectionListScrollParams } from 'react-native';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { a as LegendListRef, L as LegendListProps } from './types-
|
|
4
|
+
import { a as LegendListRef, L as LegendListProps } from './types-1Hgg1rTO.mjs';
|
|
5
5
|
import 'react-native-reanimated';
|
|
6
6
|
|
|
7
7
|
type SectionListSeparatorProps<ItemT, SectionT> = {
|
package/section-list.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_native from 'react-native';
|
|
2
2
|
import { SectionListData, SectionBase, SectionListRenderItemInfo, SectionListScrollParams } from 'react-native';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { a as LegendListRef, L as LegendListProps } from './types-
|
|
4
|
+
import { a as LegendListRef, L as LegendListProps } from './types-1Hgg1rTO.js';
|
|
5
5
|
import 'react-native-reanimated';
|
|
6
6
|
|
|
7
7
|
type SectionListSeparatorProps<ItemT, SectionT> = {
|