@papyrus-sdk/ui-react-native 0.2.27 → 0.2.28
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/dist/index.js +90 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +190 -111
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -27137,6 +27137,17 @@ var Viewer = ({
|
|
|
27137
27137
|
},
|
|
27138
27138
|
[scaledListLayoutMetrics]
|
|
27139
27139
|
);
|
|
27140
|
+
const scrollToPendingTarget = (0, import_react5.useCallback)(
|
|
27141
|
+
(animated) => {
|
|
27142
|
+
const target = pendingScrollTargetRef.current;
|
|
27143
|
+
if (target === null || listRef.current === null) return;
|
|
27144
|
+
listRef.current.scrollToOffset({
|
|
27145
|
+
offset: Math.max(0, getFallbackOffsetForIndex(target.listIndex)),
|
|
27146
|
+
animated
|
|
27147
|
+
});
|
|
27148
|
+
},
|
|
27149
|
+
[getFallbackOffsetForIndex]
|
|
27150
|
+
);
|
|
27140
27151
|
const restoreOrientationScrollOffset = (0, import_react5.useCallback)(() => {
|
|
27141
27152
|
if (pendingOrientationRestoreWidthRef.current !== windowWidth || pageCount <= 0 || isSingle || isWebView) {
|
|
27142
27153
|
return;
|
|
@@ -27167,6 +27178,11 @@ var Viewer = ({
|
|
|
27167
27178
|
}
|
|
27168
27179
|
restoreOrientationScrollOffset();
|
|
27169
27180
|
}, [restoreOrientationScrollOffset, windowWidth]);
|
|
27181
|
+
(0, import_react5.useEffect)(() => {
|
|
27182
|
+
if (pendingScrollTargetRef.current !== null) {
|
|
27183
|
+
scrollToPendingTarget(false);
|
|
27184
|
+
}
|
|
27185
|
+
}, [layoutRevision, scrollToPendingTarget]);
|
|
27170
27186
|
const getItemLayout = (0, import_react5.useCallback)(
|
|
27171
27187
|
(_, index) => {
|
|
27172
27188
|
if (scaledListLayoutMetrics.itemCount === 0) {
|
|
@@ -27237,15 +27253,12 @@ var Viewer = ({
|
|
|
27237
27253
|
},
|
|
27238
27254
|
"scrollToPageSignal.flatList"
|
|
27239
27255
|
);
|
|
27240
|
-
|
|
27241
|
-
index: target.listIndex,
|
|
27242
|
-
animated: true,
|
|
27243
|
-
viewPosition: 0
|
|
27244
|
-
});
|
|
27256
|
+
scrollToPendingTarget(true);
|
|
27245
27257
|
}, [
|
|
27246
27258
|
clearPendingScrollRetry,
|
|
27247
27259
|
clearPendingScrollTarget,
|
|
27248
27260
|
ensurePageDimensions,
|
|
27261
|
+
scrollToPendingTarget,
|
|
27249
27262
|
scrollToPageSignal,
|
|
27250
27263
|
pageCount,
|
|
27251
27264
|
setDocumentStateTracked,
|
|
@@ -27637,9 +27650,11 @@ var Viewer = ({
|
|
|
27637
27650
|
onLayout: () => {
|
|
27638
27651
|
captureViewerFrame(listRef.current);
|
|
27639
27652
|
restoreOrientationScrollOffset();
|
|
27653
|
+
scrollToPendingTarget(false);
|
|
27640
27654
|
},
|
|
27641
27655
|
onContentSizeChange: (_, height) => {
|
|
27642
27656
|
viewerContentHeightRef.current = height;
|
|
27657
|
+
scrollToPendingTarget(false);
|
|
27643
27658
|
},
|
|
27644
27659
|
onScrollToIndexFailed: ({ index, averageItemLength }) => {
|
|
27645
27660
|
const dataLength = isDouble ? rows.length : pages.length;
|
|
@@ -27861,25 +27876,73 @@ function NativeSheet({
|
|
|
27861
27876
|
}) {
|
|
27862
27877
|
const insets = usePapyrusSafeAreaInsets();
|
|
27863
27878
|
const palette = getNativeSheetPalette(Boolean(isDark));
|
|
27879
|
+
const { height: windowHeight } = (0, import_react_native5.useWindowDimensions)();
|
|
27880
|
+
const [rendered, setRendered] = (0, import_react7.useState)(visible);
|
|
27881
|
+
const renderedRef = (0, import_react7.useRef)(visible);
|
|
27882
|
+
const motion = (0, import_react7.useRef)(new import_react_native5.Animated.Value(visible ? 0 : 1)).current;
|
|
27883
|
+
const backdropOpacity = (0, import_react7.useRef)(new import_react_native5.Animated.Value(visible ? 1 : 0)).current;
|
|
27884
|
+
(0, import_react7.useEffect)(() => {
|
|
27885
|
+
motion.stopAnimation();
|
|
27886
|
+
backdropOpacity.stopAnimation();
|
|
27887
|
+
if (visible) {
|
|
27888
|
+
renderedRef.current = true;
|
|
27889
|
+
setRendered(true);
|
|
27890
|
+
motion.setValue(1);
|
|
27891
|
+
backdropOpacity.setValue(0);
|
|
27892
|
+
import_react_native5.Animated.parallel([
|
|
27893
|
+
import_react_native5.Animated.spring(motion, {
|
|
27894
|
+
toValue: 0,
|
|
27895
|
+
damping: 22,
|
|
27896
|
+
stiffness: 220,
|
|
27897
|
+
mass: 0.8,
|
|
27898
|
+
useNativeDriver: true
|
|
27899
|
+
}),
|
|
27900
|
+
import_react_native5.Animated.timing(backdropOpacity, {
|
|
27901
|
+
toValue: 1,
|
|
27902
|
+
duration: 180,
|
|
27903
|
+
useNativeDriver: true
|
|
27904
|
+
})
|
|
27905
|
+
]).start();
|
|
27906
|
+
return;
|
|
27907
|
+
}
|
|
27908
|
+
if (!renderedRef.current) return;
|
|
27909
|
+
import_react_native5.Animated.parallel([
|
|
27910
|
+
import_react_native5.Animated.timing(motion, {
|
|
27911
|
+
toValue: 1,
|
|
27912
|
+
duration: 180,
|
|
27913
|
+
useNativeDriver: true
|
|
27914
|
+
}),
|
|
27915
|
+
import_react_native5.Animated.timing(backdropOpacity, {
|
|
27916
|
+
toValue: 0,
|
|
27917
|
+
duration: 140,
|
|
27918
|
+
useNativeDriver: true
|
|
27919
|
+
})
|
|
27920
|
+
]).start(({ finished }) => {
|
|
27921
|
+
if (!finished) return;
|
|
27922
|
+
renderedRef.current = false;
|
|
27923
|
+
setRendered(false);
|
|
27924
|
+
});
|
|
27925
|
+
}, [backdropOpacity, motion, visible]);
|
|
27926
|
+
if (!rendered) return null;
|
|
27864
27927
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
27865
27928
|
import_react_native5.Modal,
|
|
27866
27929
|
{
|
|
27867
|
-
animationType: "
|
|
27930
|
+
animationType: "none",
|
|
27868
27931
|
transparent: true,
|
|
27869
|
-
visible,
|
|
27932
|
+
visible: rendered,
|
|
27870
27933
|
onRequestClose: onClose,
|
|
27871
27934
|
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.root, children: [
|
|
27872
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
27935
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.Animated.View, { style: [styles5.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
27873
27936
|
import_react_native5.Pressable,
|
|
27874
27937
|
{
|
|
27875
27938
|
accessibilityRole: "button",
|
|
27876
27939
|
accessibilityLabel: closeAccessibilityLabel,
|
|
27877
|
-
style:
|
|
27940
|
+
style: import_react_native5.StyleSheet.absoluteFill,
|
|
27878
27941
|
onPress: onClose
|
|
27879
27942
|
}
|
|
27880
|
-
),
|
|
27943
|
+
) }),
|
|
27881
27944
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
27882
|
-
import_react_native5.View,
|
|
27945
|
+
import_react_native5.Animated.View,
|
|
27883
27946
|
{
|
|
27884
27947
|
style: [
|
|
27885
27948
|
styles5.sheet,
|
|
@@ -27890,7 +27953,17 @@ function NativeSheet({
|
|
|
27890
27953
|
backgroundColor: palette.backgroundColor,
|
|
27891
27954
|
borderTopColor: palette.borderColor
|
|
27892
27955
|
},
|
|
27893
|
-
sheetStyle
|
|
27956
|
+
sheetStyle,
|
|
27957
|
+
{
|
|
27958
|
+
transform: [
|
|
27959
|
+
{
|
|
27960
|
+
translateY: motion.interpolate({
|
|
27961
|
+
inputRange: [0, 1],
|
|
27962
|
+
outputRange: [0, windowHeight]
|
|
27963
|
+
})
|
|
27964
|
+
}
|
|
27965
|
+
]
|
|
27966
|
+
}
|
|
27894
27967
|
],
|
|
27895
27968
|
children: [
|
|
27896
27969
|
showHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.header, children: [
|
|
@@ -32871,7 +32944,11 @@ function ReadingShell({
|
|
|
32871
32944
|
setSearchResultsOpen(false);
|
|
32872
32945
|
closeMobileDestination();
|
|
32873
32946
|
},
|
|
32874
|
-
onOpenResults: () =>
|
|
32947
|
+
onOpenResults: () => {
|
|
32948
|
+
import_react_native20.Keyboard.dismiss();
|
|
32949
|
+
setSearchResultsOpen(true);
|
|
32950
|
+
closeMobileDestination();
|
|
32951
|
+
}
|
|
32875
32952
|
}
|
|
32876
32953
|
),
|
|
32877
32954
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|