@pagopa/io-app-design-system 5.11.2 → 5.11.3
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/lib/commonjs/components/templates/ForceScrollDownView.js +13 -5
- package/lib/commonjs/components/templates/ForceScrollDownView.js.map +1 -1
- package/lib/commonjs/components/templates/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap +1 -0
- package/lib/module/components/templates/ForceScrollDownView.js +15 -7
- package/lib/module/components/templates/ForceScrollDownView.js.map +1 -1
- package/lib/module/components/templates/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap +1 -0
- package/lib/typescript/components/templates/ForceScrollDownView.d.ts +7 -1
- package/lib/typescript/components/templates/ForceScrollDownView.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/templates/ForceScrollDownView.tsx +23 -8
- package/src/components/templates/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap +1 -0
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.ForceScrollDownView = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
10
|
var _core = require("../../core");
|
|
10
11
|
var _buttons = require("../buttons");
|
|
11
12
|
var _ScaleInOutAnimation = require("../common/ScaleInOutAnimation");
|
|
@@ -25,9 +26,11 @@ const ForceScrollDownView = ({
|
|
|
25
26
|
style,
|
|
26
27
|
contentContainerStyle,
|
|
27
28
|
scrollEnabled = true,
|
|
28
|
-
onThresholdCrossed
|
|
29
|
+
onThresholdCrossed,
|
|
30
|
+
animatedRef
|
|
29
31
|
}) => {
|
|
30
|
-
const
|
|
32
|
+
const internalAnimatedRef = (0, _reactNativeReanimated.useAnimatedRef)();
|
|
33
|
+
const scrollViewRef = animatedRef ?? internalAnimatedRef;
|
|
31
34
|
const {
|
|
32
35
|
footerActionsInlineMeasurements,
|
|
33
36
|
handleFooterActionsInlineMeasurements
|
|
@@ -104,8 +107,13 @@ const ForceScrollDownView = ({
|
|
|
104
107
|
*/
|
|
105
108
|
const handleScrollDownPress = (0, _react.useCallback)(() => {
|
|
106
109
|
setButtonVisible(false);
|
|
107
|
-
|
|
108
|
-
|
|
110
|
+
const targetY = Math.max(0, contentHeight - scrollViewHeight);
|
|
111
|
+
(0, _reactNativeReanimated.runOnUI)(y => {
|
|
112
|
+
"worklet";
|
|
113
|
+
|
|
114
|
+
(0, _reactNativeReanimated.scrollTo)(scrollViewRef, 0, y, true);
|
|
115
|
+
})(targetY);
|
|
116
|
+
}, [scrollViewRef, contentHeight, scrollViewHeight]);
|
|
109
117
|
|
|
110
118
|
/**
|
|
111
119
|
* Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
|
|
@@ -136,7 +144,7 @@ const ForceScrollDownView = ({
|
|
|
136
144
|
})
|
|
137
145
|
});
|
|
138
146
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
139
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
147
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.ScrollView, {
|
|
140
148
|
testID: "ScrollView",
|
|
141
149
|
ref: scrollViewRef,
|
|
142
150
|
scrollEnabled: scrollEnabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_core","_buttons","_ScaleInOutAnimation","_layout","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_buttons","_ScaleInOutAnimation","_layout","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","animatedRef","internalAnimatedRef","useAnimatedRef","scrollViewRef","footerActionsInlineMeasurements","handleFooterActionsInlineMeasurements","useFooterActionsInlineMeasurements","safeBottomAreaHeight","scrollViewHeight","setScrollViewHeight","useState","contentHeight","setContentHeight","isThresholdCrossed","setThresholdCrossed","isButtonVisible","setButtonVisible","handleScroll","useCallback","event","layoutMeasurement","contentOffset","contentSize","nativeEvent","thresholdCrossed","height","y","useEffect","handleContentSizeChange","_contentWidth","handleLayout","layout","handleScrollDownPress","targetY","Math","max","runOnUI","scrollTo","needsScroll","useMemo","shouldRenderScrollButton","scrollDownButton","jsx","ScaleInOutAnimation","springConfig","IOSpringValues","button","styles","visible","IconButtonSolid","testID","accessibilityLabel","icon","onPress","jsxs","Fragment","ScrollView","ref","onScroll","scrollEventThrottle","onLayout","onContentSizeChange","FooterActions","onMeasure","fixed","exports","StyleSheet","create","position","zIndex","right","IOVisualCostants","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/templates/ForceScrollDownView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, { useCallback, useEffect, useMemo,
|
|
4
|
-
import {
|
|
3
|
+
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
4
|
+
import { StyleSheet } from "react-native";
|
|
5
|
+
import Animated, { runOnUI, scrollTo, useAnimatedRef } from "react-native-reanimated";
|
|
5
6
|
import { IOSpringValues, IOVisualCostants } from "../../core";
|
|
6
7
|
import { IconButtonSolid } from "../buttons";
|
|
7
8
|
import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
|
|
@@ -20,9 +21,11 @@ const ForceScrollDownView = ({
|
|
|
20
21
|
style,
|
|
21
22
|
contentContainerStyle,
|
|
22
23
|
scrollEnabled = true,
|
|
23
|
-
onThresholdCrossed
|
|
24
|
+
onThresholdCrossed,
|
|
25
|
+
animatedRef
|
|
24
26
|
}) => {
|
|
25
|
-
const
|
|
27
|
+
const internalAnimatedRef = useAnimatedRef();
|
|
28
|
+
const scrollViewRef = animatedRef ?? internalAnimatedRef;
|
|
26
29
|
const {
|
|
27
30
|
footerActionsInlineMeasurements,
|
|
28
31
|
handleFooterActionsInlineMeasurements
|
|
@@ -99,8 +102,13 @@ const ForceScrollDownView = ({
|
|
|
99
102
|
*/
|
|
100
103
|
const handleScrollDownPress = useCallback(() => {
|
|
101
104
|
setButtonVisible(false);
|
|
102
|
-
|
|
103
|
-
|
|
105
|
+
const targetY = Math.max(0, contentHeight - scrollViewHeight);
|
|
106
|
+
runOnUI(y => {
|
|
107
|
+
"worklet";
|
|
108
|
+
|
|
109
|
+
scrollTo(scrollViewRef, 0, y, true);
|
|
110
|
+
})(targetY);
|
|
111
|
+
}, [scrollViewRef, contentHeight, scrollViewHeight]);
|
|
104
112
|
|
|
105
113
|
/**
|
|
106
114
|
* Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
|
|
@@ -131,7 +139,7 @@ const ForceScrollDownView = ({
|
|
|
131
139
|
})
|
|
132
140
|
});
|
|
133
141
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
134
|
-
children: [/*#__PURE__*/_jsxs(ScrollView, {
|
|
142
|
+
children: [/*#__PURE__*/_jsxs(Animated.ScrollView, {
|
|
135
143
|
testID: "ScrollView",
|
|
136
144
|
ref: scrollViewRef,
|
|
137
145
|
scrollEnabled: scrollEnabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useMemo","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","StyleSheet","Animated","runOnUI","scrollTo","useAnimatedRef","IOSpringValues","IOVisualCostants","IconButtonSolid","ScaleInOutAnimation","FooterActions","useFooterActionsInlineMeasurements","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","animatedRef","internalAnimatedRef","scrollViewRef","footerActionsInlineMeasurements","handleFooterActionsInlineMeasurements","safeBottomAreaHeight","scrollViewHeight","setScrollViewHeight","contentHeight","setContentHeight","isThresholdCrossed","setThresholdCrossed","isButtonVisible","setButtonVisible","handleScroll","event","layoutMeasurement","contentOffset","contentSize","nativeEvent","thresholdCrossed","height","y","handleContentSizeChange","_contentWidth","handleLayout","layout","handleScrollDownPress","targetY","Math","max","needsScroll","shouldRenderScrollButton","scrollDownButton","springConfig","button","styles","visible","testID","accessibilityLabel","icon","onPress","ScrollView","ref","onScroll","scrollEventThrottle","onLayout","onContentSizeChange","onMeasure","fixed","create","position","zIndex","right","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/templates/ForceScrollDownView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ComponentProps, ReactNode } from "react";
|
|
2
2
|
import { ScrollViewProps } from "react-native";
|
|
3
|
+
import Animated, { type AnimatedRef } from "react-native-reanimated";
|
|
3
4
|
import { FooterActions } from "../layout";
|
|
4
5
|
type ForceScrollDownViewActions = {
|
|
5
6
|
/**
|
|
@@ -27,6 +28,11 @@ export type ForceScrollDownView = {
|
|
|
27
28
|
* is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
|
|
28
29
|
*/
|
|
29
30
|
onThresholdCrossed?: (crossed: boolean) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Optional Animated ref to be used with `useScrollViewOffset`
|
|
33
|
+
* (outside this component)
|
|
34
|
+
*/
|
|
35
|
+
animatedRef?: AnimatedRef<Animated.ScrollView>;
|
|
30
36
|
} & ForceScrollDownViewSlot & Pick<ScrollViewProps, "style" | "contentContainerStyle" | "scrollEnabled" | "testID">;
|
|
31
37
|
/**
|
|
32
38
|
* A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
|
|
@@ -34,6 +40,6 @@ export type ForceScrollDownView = {
|
|
|
34
40
|
* configurable by the `threshold` prop. The button, and the scrolling, can also be disabled by setting the
|
|
35
41
|
* `scrollEnabled` prop to `false`.
|
|
36
42
|
*/
|
|
37
|
-
declare const ForceScrollDownView: ({ footerActions, children, threshold: customThreshold, style, contentContainerStyle, scrollEnabled, onThresholdCrossed }: ForceScrollDownView) => React.JSX.Element;
|
|
43
|
+
declare const ForceScrollDownView: ({ footerActions, children, threshold: customThreshold, style, contentContainerStyle, scrollEnabled, onThresholdCrossed, animatedRef }: ForceScrollDownView) => React.JSX.Element;
|
|
38
44
|
export { ForceScrollDownView };
|
|
39
45
|
//# sourceMappingURL=ForceScrollDownView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForceScrollDownView.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ForceScrollDownView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,SAAS,
|
|
1
|
+
{"version":3,"file":"ForceScrollDownView.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ForceScrollDownView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,eAAe,EAEhB,MAAM,cAAc,CAAC;AACtB,OAAO,QAAQ,EAAE,EAIf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,aAAa,EAAsC,MAAM,WAAW,CAAC;AAE9E,KAAK,0BAA0B,GAAG;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,aAAa,EAAE,IAAI,CACjB,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,OAAO,GAAG,WAAW,CACtB,CAAC;CACH,CAAC;AAEF,KAAK,6BAA6B,GAAG;IACnC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,KAAK,uBAAuB,GACxB,0BAA0B,GAC1B,6BAA6B,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;CAChD,GAAG,uBAAuB,GACzB,IAAI,CACF,eAAe,EACf,OAAO,GAAG,uBAAuB,GAAG,eAAe,GAAG,QAAQ,CAC/D,CAAC;AAEJ;;;;;GAKG;AACH,QAAA,MAAM,mBAAmB,GAAI,uIAS1B,mBAAmB,sBAiKrB,CAAC;AAWF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,17 +4,21 @@ import React, {
|
|
|
4
4
|
useCallback,
|
|
5
5
|
useEffect,
|
|
6
6
|
useMemo,
|
|
7
|
-
useRef,
|
|
8
7
|
useState
|
|
9
8
|
} from "react";
|
|
10
9
|
import {
|
|
11
10
|
LayoutChangeEvent,
|
|
12
11
|
NativeScrollEvent,
|
|
13
12
|
NativeSyntheticEvent,
|
|
14
|
-
ScrollView,
|
|
15
13
|
ScrollViewProps,
|
|
16
14
|
StyleSheet
|
|
17
15
|
} from "react-native";
|
|
16
|
+
import Animated, {
|
|
17
|
+
runOnUI,
|
|
18
|
+
scrollTo,
|
|
19
|
+
useAnimatedRef,
|
|
20
|
+
type AnimatedRef
|
|
21
|
+
} from "react-native-reanimated";
|
|
18
22
|
import { IOSpringValues, IOVisualCostants } from "../../core";
|
|
19
23
|
import { IconButtonSolid } from "../buttons";
|
|
20
24
|
import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
|
|
@@ -54,6 +58,11 @@ export type ForceScrollDownView = {
|
|
|
54
58
|
* is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
|
|
55
59
|
*/
|
|
56
60
|
onThresholdCrossed?: (crossed: boolean) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Optional Animated ref to be used with `useScrollViewOffset`
|
|
63
|
+
* (outside this component)
|
|
64
|
+
*/
|
|
65
|
+
animatedRef?: AnimatedRef<Animated.ScrollView>;
|
|
57
66
|
} & ForceScrollDownViewSlot &
|
|
58
67
|
Pick<
|
|
59
68
|
ScrollViewProps,
|
|
@@ -73,9 +82,11 @@ const ForceScrollDownView = ({
|
|
|
73
82
|
style,
|
|
74
83
|
contentContainerStyle,
|
|
75
84
|
scrollEnabled = true,
|
|
76
|
-
onThresholdCrossed
|
|
85
|
+
onThresholdCrossed,
|
|
86
|
+
animatedRef
|
|
77
87
|
}: ForceScrollDownView) => {
|
|
78
|
-
const
|
|
88
|
+
const internalAnimatedRef = useAnimatedRef<Animated.ScrollView>();
|
|
89
|
+
const scrollViewRef = animatedRef ?? internalAnimatedRef;
|
|
79
90
|
|
|
80
91
|
const {
|
|
81
92
|
footerActionsInlineMeasurements,
|
|
@@ -163,8 +174,12 @@ const ForceScrollDownView = ({
|
|
|
163
174
|
*/
|
|
164
175
|
const handleScrollDownPress = useCallback(() => {
|
|
165
176
|
setButtonVisible(false);
|
|
166
|
-
|
|
167
|
-
|
|
177
|
+
const targetY = Math.max(0, contentHeight - scrollViewHeight);
|
|
178
|
+
runOnUI((y: number) => {
|
|
179
|
+
"worklet";
|
|
180
|
+
scrollTo(scrollViewRef, 0, y, true);
|
|
181
|
+
})(targetY);
|
|
182
|
+
}, [scrollViewRef, contentHeight, scrollViewHeight]);
|
|
168
183
|
|
|
169
184
|
/**
|
|
170
185
|
* Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
|
|
@@ -207,7 +222,7 @@ const ForceScrollDownView = ({
|
|
|
207
222
|
|
|
208
223
|
return (
|
|
209
224
|
<>
|
|
210
|
-
<ScrollView
|
|
225
|
+
<Animated.ScrollView
|
|
211
226
|
testID={"ScrollView"}
|
|
212
227
|
ref={scrollViewRef}
|
|
213
228
|
scrollEnabled={scrollEnabled}
|
|
@@ -226,7 +241,7 @@ const ForceScrollDownView = ({
|
|
|
226
241
|
fixed={false}
|
|
227
242
|
/>
|
|
228
243
|
)}
|
|
229
|
-
</ScrollView>
|
|
244
|
+
</Animated.ScrollView>
|
|
230
245
|
{scrollDownButton}
|
|
231
246
|
</>
|
|
232
247
|
);
|