@pagopa/io-app-design-system 5.0.7 → 5.1.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/lib/commonjs/components/codeInput/CodeInput.js +8 -5
- package/lib/commonjs/components/codeInput/CodeInput.js.map +1 -1
- package/lib/commonjs/components/common/ScaleInOutAnimation.js +7 -5
- package/lib/commonjs/components/common/ScaleInOutAnimation.js.map +1 -1
- package/lib/commonjs/components/layout/ForceScrollDownView.js +27 -23
- package/lib/commonjs/components/layout/ForceScrollDownView.js.map +1 -1
- package/lib/commonjs/components/layout/__test__/ForceScrollDownView.test.js +12 -4
- package/lib/commonjs/components/layout/__test__/ForceScrollDownView.test.js.map +1 -1
- package/lib/commonjs/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap +1 -6
- package/lib/commonjs/components/layout/hooks/useFooterActionsInlineMeasurements.js +2 -2
- package/lib/commonjs/components/layout/hooks/useFooterActionsInlineMeasurements.js.map +1 -1
- package/lib/commonjs/components/layout/hooks/useFooterActionsMeasurements.js +2 -2
- package/lib/commonjs/components/layout/hooks/useFooterActionsMeasurements.js.map +1 -1
- package/lib/commonjs/components/numberpad/NumberButton.js +17 -14
- package/lib/commonjs/components/numberpad/NumberButton.js.map +1 -1
- package/lib/commonjs/components/numberpad/NumberPad.js +3 -3
- package/lib/commonjs/components/numberpad/NumberPad.js.map +1 -1
- package/lib/module/components/codeInput/CodeInput.js +8 -5
- package/lib/module/components/codeInput/CodeInput.js.map +1 -1
- package/lib/module/components/common/ScaleInOutAnimation.js +8 -6
- package/lib/module/components/common/ScaleInOutAnimation.js.map +1 -1
- package/lib/module/components/layout/ForceScrollDownView.js +27 -23
- package/lib/module/components/layout/ForceScrollDownView.js.map +1 -1
- package/lib/module/components/layout/__test__/ForceScrollDownView.test.js +12 -4
- package/lib/module/components/layout/__test__/ForceScrollDownView.test.js.map +1 -1
- package/lib/module/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap +1 -6
- package/lib/module/components/layout/hooks/useFooterActionsInlineMeasurements.js +3 -3
- package/lib/module/components/layout/hooks/useFooterActionsInlineMeasurements.js.map +1 -1
- package/lib/module/components/layout/hooks/useFooterActionsMeasurements.js +3 -3
- package/lib/module/components/layout/hooks/useFooterActionsMeasurements.js.map +1 -1
- package/lib/module/components/numberpad/NumberButton.js +18 -16
- package/lib/module/components/numberpad/NumberButton.js.map +1 -1
- package/lib/module/components/numberpad/NumberPad.js +3 -3
- package/lib/module/components/numberpad/NumberPad.js.map +1 -1
- package/lib/typescript/components/codeInput/CodeInput.d.ts +1 -1
- package/lib/typescript/components/codeInput/CodeInput.d.ts.map +1 -1
- package/lib/typescript/components/common/ScaleInOutAnimation.d.ts +1 -3
- package/lib/typescript/components/common/ScaleInOutAnimation.d.ts.map +1 -1
- package/lib/typescript/components/layout/ForceScrollDownView.d.ts +20 -8
- package/lib/typescript/components/layout/ForceScrollDownView.d.ts.map +1 -1
- package/lib/typescript/components/layout/hooks/useFooterActionsInlineMeasurements.d.ts.map +1 -1
- package/lib/typescript/components/layout/hooks/useFooterActionsMeasurements.d.ts.map +1 -1
- package/lib/typescript/components/numberpad/NumberButton.d.ts +2 -2
- package/lib/typescript/components/numberpad/NumberButton.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/codeInput/CodeInput.tsx +11 -7
- package/src/components/common/ScaleInOutAnimation.tsx +8 -10
- package/src/components/layout/ForceScrollDownView.tsx +67 -32
- package/src/components/layout/__test__/ForceScrollDownView.test.tsx +4 -4
- package/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap +1 -6
- package/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts +7 -6
- package/src/components/layout/hooks/useFooterActionsMeasurements.ts +7 -6
- package/src/components/numberpad/NumberButton.tsx +30 -18
- package/src/components/numberpad/NumberPad.tsx +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","StyleSheet","View","Animated","hexToRgba","IOColors","useIOThemeContext","triggerHaptic","useErrorShakeAnimation","HStack","DOT_SIZE","styles","create","dotShape","width","height","borderRadius","borderWidth","EmptyDot","color","borderColor","createElement","style","backgroundColor","FilledDot","CodeInput","length","value","onValueChange","variant","onValidate","status","setStatus","themeType","translate","animatedStyle","shakeAnimation","emptyDotColorLightBg","emptyDotColorDarkBg","white","emptyDotColorThemeBased","emptyDotColor","filledDotColorLightBg","black","filledDotColorDarkBg","filledDotColorThemeBased","filledDotColor","isValid","timer","setTimeout","clearTimeout","flexDirection","justifyContent","space","Array","map","_","i","key"],"sourceRoot":"../../../../src","sources":["components/codeInput/CodeInput.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAAqBC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC3D,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,QAAQ,YAAY;AACnE,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,sBAAsB,QAAQ,0CAA0C;AACjF,SAASC,MAAM,QAAQ,UAAU;AAUjC,MAAMC,QAAQ,GAAG,EAAE;AAEnB,MAAMC,MAAM,GAAGV,UAAU,CAACW,MAAM,CAAC;EAC/BC,QAAQ,EAAE;IACRC,KAAK,EAAEJ,QAAQ;IACfK,MAAM,EAAEL,QAAQ;IAChBM,YAAY,EAAEN,QAAQ,GAAG,CAAC;IAC1BO,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,KAAK,EAAEC;AAAmC,CAAC,kBAC7DtB,KAAA,CAAAuB,aAAA,CAACnB,IAAI;EACHoB,KAAK,EAAE,CACLX,MAAM,CAACE,QAAQ,EACf;IACEO,WAAW;IACXG,eAAe,EAAEnB,SAAS,CAACgB,WAAW,EAAE,CAAC;EAC3C,CAAC;AACD,CACH,CACF;AAED,MAAMI,SAAS,GAAGA,CAAC;EAAEL,KAAK,EAAEI;AAAuC,CAAC,kBAClEzB,KAAA,CAAAuB,aAAA,CAACnB,IAAI;EACHoB,KAAK,EAAE,CAACX,MAAM,CAACE,QAAQ,EAAE;IAAEU,eAAe;IAAEH,WAAW,EAAEG;EAAgB,CAAC;AAAE,CAC7E,CACF;AAED,OAAO,MAAME,SAAS,GAAGA,CAAC;EACxBC,MAAM;EACNC,KAAK;EACLC,aAAa;EACbC,OAAO,GAAG,
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","StyleSheet","View","Animated","hexToRgba","IOColors","useIOThemeContext","triggerHaptic","useErrorShakeAnimation","HStack","DOT_SIZE","styles","create","dotShape","width","height","borderRadius","borderWidth","EmptyDot","color","borderColor","createElement","style","backgroundColor","FilledDot","CodeInput","length","value","onValueChange","variant","onValidate","status","setStatus","themeType","theme","translate","animatedStyle","shakeAnimation","emptyDotColorLightBg","emptyDotColorDarkBg","emptyDotColorAccentBg","white","emptyDotColorThemeBased","emptyDotColor","filledDotColorLightBg","black","filledDotColorDarkBg","filledDotColorError","errorText","filledDotColorThemeBased","filledDotColor","isValid","timer","setTimeout","clearTimeout","flexDirection","justifyContent","space","Array","map","_","i","key"],"sourceRoot":"../../../../src","sources":["components/codeInput/CodeInput.tsx"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable functional/immutable-data */
|
|
2
2
|
import React from "react";
|
|
3
|
-
import Animated, {
|
|
3
|
+
import Animated, { withSpring } from "react-native-reanimated";
|
|
4
4
|
const ScaleInOutAnimation = ({
|
|
5
5
|
visible = true,
|
|
6
6
|
springConfig = {
|
|
@@ -8,8 +8,6 @@ const ScaleInOutAnimation = ({
|
|
|
8
8
|
mass: 3,
|
|
9
9
|
stiffness: 1000
|
|
10
10
|
},
|
|
11
|
-
delayOut = 0,
|
|
12
|
-
delayIn = 0,
|
|
13
11
|
children,
|
|
14
12
|
style
|
|
15
13
|
}) => {
|
|
@@ -18,13 +16,15 @@ const ScaleInOutAnimation = ({
|
|
|
18
16
|
|
|
19
17
|
return {
|
|
20
18
|
initialValues: {
|
|
19
|
+
opacity: 0,
|
|
21
20
|
transform: [{
|
|
22
|
-
scale: 0
|
|
21
|
+
scale: 0.5
|
|
23
22
|
}]
|
|
24
23
|
},
|
|
25
24
|
animations: {
|
|
25
|
+
opacity: withSpring(1, springConfig),
|
|
26
26
|
transform: [{
|
|
27
|
-
scale:
|
|
27
|
+
scale: withSpring(1, springConfig)
|
|
28
28
|
}]
|
|
29
29
|
}
|
|
30
30
|
};
|
|
@@ -34,13 +34,15 @@ const ScaleInOutAnimation = ({
|
|
|
34
34
|
|
|
35
35
|
return {
|
|
36
36
|
initialValues: {
|
|
37
|
+
opacity: 1,
|
|
37
38
|
transform: [{
|
|
38
39
|
scale: 1
|
|
39
40
|
}]
|
|
40
41
|
},
|
|
41
42
|
animations: {
|
|
43
|
+
opacity: withSpring(0, springConfig),
|
|
42
44
|
transform: [{
|
|
43
|
-
scale:
|
|
45
|
+
scale: withSpring(0.5, springConfig)
|
|
44
46
|
}]
|
|
45
47
|
}
|
|
46
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Animated","
|
|
1
|
+
{"version":3,"names":["React","Animated","withSpring","ScaleInOutAnimation","visible","springConfig","damping","mass","stiffness","children","style","enteringAnimation","initialValues","opacity","transform","scale","animations","exitingAnimation","createElement","View","entering","exiting"],"sourceRoot":"../../../../src","sources":["components/common/ScaleInOutAnimation.tsx"],"mappings":"AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,IAGbC,UAAU,QACL,yBAAyB;AAShC,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,OAAO,GAAG,IAAI;EACdC,YAAY,GAAG;IAAEC,OAAO,EAAE,GAAG;IAAEC,IAAI,EAAE,CAAC;IAAEC,SAAS,EAAE;EAAK,CAAC;EACzDC,QAAQ;EACRC;AACK,CAAC,KAAK;EACX,MAAMC,iBAAiB,GAAGA,CAAA,KAAuB;IAC/C,SAAS;;IACT,OAAO;MACLC,aAAa,EAAE;QACbC,OAAO,EAAE,CAAC;QACVC,SAAS,EAAE,CAAC;UAAEC,KAAK,EAAE;QAAI,CAAC;MAC5B,CAAC;MACDC,UAAU,EAAE;QACVH,OAAO,EAAEX,UAAU,CAAC,CAAC,EAAEG,YAAY,CAAC;QACpCS,SAAS,EAAE,CAAC;UAAEC,KAAK,EAAEb,UAAU,CAAC,CAAC,EAAEG,YAAY;QAAE,CAAC;MACpD;IACF,CAAC;EACH,CAAC;EAED,MAAMY,gBAAgB,GAAGA,CAAA,KAAuB;IAC9C,SAAS;;IACT,OAAO;MACLL,aAAa,EAAE;QACbC,OAAO,EAAE,CAAC;QACVC,SAAS,EAAE,CAAC;UAAEC,KAAK,EAAE;QAAE,CAAC;MAC1B,CAAC;MACDC,UAAU,EAAE;QACVH,OAAO,EAAEX,UAAU,CAAC,CAAC,EAAEG,YAAY,CAAC;QACpCS,SAAS,EAAE,CAAC;UAAEC,KAAK,EAAEb,UAAU,CAAC,GAAG,EAAEG,YAAY;QAAE,CAAC;MACtD;IACF,CAAC;EACH,CAAC;EAED,IAAI,CAACD,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACEJ,KAAA,CAAAkB,aAAA,CAACjB,QAAQ,CAACkB,IAAI;IACZT,KAAK,EAAEA,KAAM;IACbU,QAAQ,EAAET,iBAAkB;IAC5BU,OAAO,EAAEJ;EAAiB,GAEzBR,QACY,CAAC;AAEpB,CAAC;AAED,SAASN,mBAAmB"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
1
2
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
2
3
|
import { ScrollView, StyleSheet } from "react-native";
|
|
3
|
-
import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
|
|
4
4
|
import { IOSpringValues, IOVisualCostants } from "../../core";
|
|
5
5
|
import { IconButtonSolid } from "../buttons";
|
|
6
|
+
import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
|
|
7
|
+
import { FooterActions } from "./FooterActions";
|
|
8
|
+
import { useFooterActionsInlineMeasurements } from "./hooks";
|
|
6
9
|
/**
|
|
7
10
|
* A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
|
|
8
11
|
* when pressed. The button is hidden when the scroll view reaches a certain threshold from the bottom, which is
|
|
@@ -10,26 +13,32 @@ import { IconButtonSolid } from "../buttons";
|
|
|
10
13
|
* `scrollEnabled` prop to `false`.
|
|
11
14
|
*/
|
|
12
15
|
const ForceScrollDownView = ({
|
|
16
|
+
footerActions,
|
|
13
17
|
children,
|
|
14
|
-
threshold
|
|
18
|
+
threshold: customThreshold,
|
|
15
19
|
style,
|
|
16
20
|
contentContainerStyle,
|
|
17
21
|
scrollEnabled = true,
|
|
18
22
|
onThresholdCrossed
|
|
19
23
|
}) => {
|
|
20
24
|
const scrollViewRef = useRef(null);
|
|
25
|
+
const {
|
|
26
|
+
footerActionsInlineMeasurements,
|
|
27
|
+
handleFooterActionsInlineMeasurements
|
|
28
|
+
} = useFooterActionsInlineMeasurements();
|
|
29
|
+
const threshold = footerActions ? footerActionsInlineMeasurements.safeBottomAreaHeight : customThreshold;
|
|
21
30
|
|
|
22
31
|
/**
|
|
23
32
|
* The height of the scroll view, used to determine whether or not the scrollable content fits inside
|
|
24
33
|
* the scroll view and whether the "scroll to bottom" button should be displayed.
|
|
25
34
|
*/
|
|
26
|
-
const [scrollViewHeight, setScrollViewHeight] = useState();
|
|
35
|
+
const [scrollViewHeight, setScrollViewHeight] = useState(0);
|
|
27
36
|
|
|
28
37
|
/**
|
|
29
38
|
* The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
|
|
30
39
|
* should be displayed.
|
|
31
40
|
*/
|
|
32
|
-
const [contentHeight, setContentHeight] = useState();
|
|
41
|
+
const [contentHeight, setContentHeight] = useState(0);
|
|
33
42
|
|
|
34
43
|
/**
|
|
35
44
|
* Whether or not the scroll view has crossed the threshold from the bottom.
|
|
@@ -45,7 +54,7 @@ const ForceScrollDownView = ({
|
|
|
45
54
|
/**
|
|
46
55
|
* A callback that is called whenever the scroll view is scrolled. It checks whether or not the
|
|
47
56
|
* scroll view has crossed the threshold from the bottom and updates the state accordingly.
|
|
48
|
-
* The callback is designed to
|
|
57
|
+
* The callback is designed to update button visibility only when crossing the threshold.
|
|
49
58
|
*/
|
|
50
59
|
const handleScroll = useCallback(event => {
|
|
51
60
|
const {
|
|
@@ -53,17 +62,12 @@ const ForceScrollDownView = ({
|
|
|
53
62
|
contentOffset,
|
|
54
63
|
contentSize
|
|
55
64
|
} = event.nativeEvent;
|
|
56
|
-
const thresholdCrossed = layoutMeasurement.height + contentOffset.y >= contentSize.height - threshold;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
setButtonVisible(true);
|
|
63
|
-
}
|
|
64
|
-
return thresholdCrossed;
|
|
65
|
-
});
|
|
66
|
-
}, [threshold]);
|
|
65
|
+
const thresholdCrossed = layoutMeasurement.height + contentOffset.y >= contentSize.height - (threshold ?? 0);
|
|
66
|
+
if (isThresholdCrossed !== thresholdCrossed) {
|
|
67
|
+
setThresholdCrossed(thresholdCrossed);
|
|
68
|
+
setButtonVisible(!thresholdCrossed);
|
|
69
|
+
}
|
|
70
|
+
}, [threshold, isThresholdCrossed]);
|
|
67
71
|
|
|
68
72
|
/**
|
|
69
73
|
* A side effect that calls the `onThresholdCrossed` callback whenever the value of `isThresholdCrossed` changes.
|
|
@@ -103,7 +107,7 @@ const ForceScrollDownView = ({
|
|
|
103
107
|
* when the scrollable content cannot fit inside the scroll view and the button is enabled
|
|
104
108
|
* (`scrollEnabled` is `true`).
|
|
105
109
|
*/
|
|
106
|
-
const needsScroll = useMemo(() => scrollViewHeight
|
|
110
|
+
const needsScroll = useMemo(() => scrollViewHeight > 0 && contentHeight > 0 && scrollViewHeight < contentHeight, [scrollViewHeight, contentHeight]);
|
|
107
111
|
|
|
108
112
|
/**
|
|
109
113
|
* Whether or not to render the "scroll to bottom" button. It is only rendered when the scroll view
|
|
@@ -128,17 +132,17 @@ const ForceScrollDownView = ({
|
|
|
128
132
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollView, {
|
|
129
133
|
testID: "ScrollView",
|
|
130
134
|
ref: scrollViewRef,
|
|
131
|
-
scrollIndicatorInsets: {
|
|
132
|
-
right: 1
|
|
133
|
-
},
|
|
134
135
|
scrollEnabled: scrollEnabled,
|
|
135
|
-
onScroll: handleScroll,
|
|
136
|
-
scrollEventThrottle: 400,
|
|
137
136
|
style: style,
|
|
137
|
+
onScroll: handleScroll,
|
|
138
|
+
scrollEventThrottle: 8,
|
|
138
139
|
onLayout: handleLayout,
|
|
139
140
|
onContentSizeChange: handleContentSizeChange,
|
|
140
141
|
contentContainerStyle: contentContainerStyle
|
|
141
|
-
}, children
|
|
142
|
+
}, children, footerActions && /*#__PURE__*/React.createElement(FooterActions, _extends({}, footerActions, {
|
|
143
|
+
onMeasure: handleFooterActionsInlineMeasurements,
|
|
144
|
+
fixed: false
|
|
145
|
+
}))), scrollDownButton);
|
|
142
146
|
};
|
|
143
147
|
const styles = StyleSheet.create({
|
|
144
148
|
scrollDownButton: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","ScrollView","StyleSheet","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","ScrollView","StyleSheet","IOSpringValues","IOVisualCostants","IconButtonSolid","ScaleInOutAnimation","FooterActions","useFooterActionsInlineMeasurements","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","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","_scrollViewRef$curren","current","scrollToEnd","needsScroll","shouldRenderScrollButton","scrollDownButton","createElement","springConfig","button","styles","visible","testID","accessibilityLabel","icon","onPress","Fragment","ref","onScroll","scrollEventThrottle","onLayout","onContentSizeChange","_extends","onMeasure","fixed","create","position","zIndex","right","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/layout/ForceScrollDownView.tsx"],"mappings":"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"}
|
|
@@ -8,14 +8,18 @@ describe("ForceScrollDownView", () => {
|
|
|
8
8
|
jest.useFakeTimers();
|
|
9
9
|
it("should match snapshot", () => {
|
|
10
10
|
const tChildren = /*#__PURE__*/React.createElement(Text, null, tContent);
|
|
11
|
-
const component = render( /*#__PURE__*/React.createElement(ForceScrollDownView,
|
|
11
|
+
const component = render( /*#__PURE__*/React.createElement(ForceScrollDownView, {
|
|
12
|
+
threshold: 100
|
|
13
|
+
}, tChildren));
|
|
12
14
|
expect(component).toMatchSnapshot();
|
|
13
15
|
});
|
|
14
16
|
it("renders the content correctly", () => {
|
|
15
17
|
const tChildren = /*#__PURE__*/React.createElement(Text, null, tContent);
|
|
16
18
|
const {
|
|
17
19
|
getByText
|
|
18
|
-
} = render( /*#__PURE__*/React.createElement(ForceScrollDownView,
|
|
20
|
+
} = render( /*#__PURE__*/React.createElement(ForceScrollDownView, {
|
|
21
|
+
threshold: 100
|
|
22
|
+
}, tChildren));
|
|
19
23
|
expect(getByText(tContent)).toBeDefined();
|
|
20
24
|
});
|
|
21
25
|
it("displays the scroll down button when necessary", async () => {
|
|
@@ -24,7 +28,9 @@ describe("ForceScrollDownView", () => {
|
|
|
24
28
|
const {
|
|
25
29
|
getByTestId,
|
|
26
30
|
queryByTestId
|
|
27
|
-
} = render( /*#__PURE__*/React.createElement(ForceScrollDownView,
|
|
31
|
+
} = render( /*#__PURE__*/React.createElement(ForceScrollDownView, {
|
|
32
|
+
threshold: 100
|
|
33
|
+
}, tChildren));
|
|
28
34
|
const scrollView = getByTestId("ScrollView");
|
|
29
35
|
|
|
30
36
|
// Update scroll view height
|
|
@@ -57,7 +63,9 @@ describe("ForceScrollDownView", () => {
|
|
|
57
63
|
const {
|
|
58
64
|
getByTestId,
|
|
59
65
|
queryByTestId
|
|
60
|
-
} = render( /*#__PURE__*/React.createElement(ForceScrollDownView,
|
|
66
|
+
} = render( /*#__PURE__*/React.createElement(ForceScrollDownView, {
|
|
67
|
+
threshold: 100
|
|
68
|
+
}, tChildren));
|
|
61
69
|
const scrollView = getByTestId("ScrollView");
|
|
62
70
|
|
|
63
71
|
// Update scroll view height
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["fireEvent","render","React","Text","ForceScrollDownView","tContent","describe","jest","useFakeTimers","it","tChildren","createElement","component","expect","toMatchSnapshot","getByText","toBeDefined","tScreenHeight","getByTestId","queryByTestId","scrollView","nativeEvent","layout","height","buttonBefore","toBeNull","advanceTimersByTime","buttonAfter","not","press"],"sourceRoot":"../../../../../src","sources":["components/layout/__test__/ForceScrollDownView.test.tsx"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,+BAA+B;AACjE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,MAAMC,QAAQ,GAAG,cAAc;AAE/BC,QAAQ,CAAC,qBAAqB,EAAE,MAAM;EACpCC,IAAI,CAACC,aAAa,CAAC,CAAC;EAEpBC,EAAE,CAAC,uBAAuB,EAAE,MAAM;IAChC,MAAMC,SAAS,gBAAGR,KAAA,CAAAS,aAAA,CAACR,IAAI,QAAEE,QAAe,CAAC;IAEzC,MAAMO,SAAS,GAAGX,MAAM,eACtBC,KAAA,CAAAS,aAAA,CAACP,mBAAmB,
|
|
1
|
+
{"version":3,"names":["fireEvent","render","React","Text","ForceScrollDownView","tContent","describe","jest","useFakeTimers","it","tChildren","createElement","component","threshold","expect","toMatchSnapshot","getByText","toBeDefined","tScreenHeight","getByTestId","queryByTestId","scrollView","nativeEvent","layout","height","buttonBefore","toBeNull","advanceTimersByTime","buttonAfter","not","press"],"sourceRoot":"../../../../../src","sources":["components/layout/__test__/ForceScrollDownView.test.tsx"],"mappings":"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"}
|
package/lib/module/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap
CHANGED
|
@@ -6,12 +6,7 @@ exports[`ForceScrollDownView should match snapshot 1`] = `
|
|
|
6
6
|
onLayout={[Function]}
|
|
7
7
|
onScroll={[Function]}
|
|
8
8
|
scrollEnabled={true}
|
|
9
|
-
scrollEventThrottle={
|
|
10
|
-
scrollIndicatorInsets={
|
|
11
|
-
{
|
|
12
|
-
"right": 1,
|
|
13
|
-
}
|
|
14
|
-
}
|
|
9
|
+
scrollEventThrottle={8}
|
|
15
10
|
testID="ScrollView"
|
|
16
11
|
>
|
|
17
12
|
<View>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
1
|
+
import { useCallback, useState } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* Custom hook to handle the `FooterActions` measurements
|
|
4
4
|
* @returns
|
|
@@ -12,9 +12,9 @@ export const useFooterActionsInlineMeasurements = () => {
|
|
|
12
12
|
const [footerActionsInlineMeasurements, setFooterActionsInlineMeasurements] = useState({
|
|
13
13
|
safeBottomAreaHeight: 0
|
|
14
14
|
});
|
|
15
|
-
const handleFooterActionsInlineMeasurements = values => {
|
|
15
|
+
const handleFooterActionsInlineMeasurements = useCallback(values => {
|
|
16
16
|
setFooterActionsInlineMeasurements(values);
|
|
17
|
-
};
|
|
17
|
+
}, []);
|
|
18
18
|
return {
|
|
19
19
|
footerActionsInlineMeasurements,
|
|
20
20
|
handleFooterActionsInlineMeasurements
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useFooterActionsInlineMeasurements","footerActionsInlineMeasurements","setFooterActionsInlineMeasurements","safeBottomAreaHeight","handleFooterActionsInlineMeasurements","values"],"sourceRoot":"../../../../../src","sources":["components/layout/hooks/useFooterActionsInlineMeasurements.ts"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["useCallback","useState","useFooterActionsInlineMeasurements","footerActionsInlineMeasurements","setFooterActionsInlineMeasurements","safeBottomAreaHeight","handleFooterActionsInlineMeasurements","values"],"sourceRoot":"../../../../../src","sources":["components/layout/hooks/useFooterActionsInlineMeasurements.ts"],"mappings":"AAAA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAS7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,kCAAkC,GAC7CA,CAAA,KAA+C;EAC7C,MAAM,CACJC,+BAA+B,EAC/BC,kCAAkC,CACnC,GAAGH,QAAQ,CAAkC;IAC5CI,oBAAoB,EAAE;EACxB,CAAC,CAAC;EAEF,MAAMC,qCAAqC,GAAGN,WAAW,CACtDO,MAAuC,IAAK;IAC3CH,kCAAkC,CAACG,MAAM,CAAC;EAC5C,CAAC,EACD,EACF,CAAC;EAED,OAAO;IACLJ,+BAA+B;IAC/BG;EACF,CAAC;AACH,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
1
|
+
import { useCallback, useState } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* Custom hook to handle the `FooterActions` measurements
|
|
4
4
|
* @returns
|
|
@@ -13,9 +13,9 @@ export const useFooterActionsMeasurements = () => {
|
|
|
13
13
|
actionBlockHeight: 0,
|
|
14
14
|
safeBottomAreaHeight: 0
|
|
15
15
|
});
|
|
16
|
-
const handleFooterActionsMeasurements = values => {
|
|
16
|
+
const handleFooterActionsMeasurements = useCallback(values => {
|
|
17
17
|
setFooterActionsMeasurements(values);
|
|
18
|
-
};
|
|
18
|
+
}, []);
|
|
19
19
|
return {
|
|
20
20
|
footerActionsMeasurements,
|
|
21
21
|
handleFooterActionsMeasurements
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useFooterActionsMeasurements","footerActionsMeasurements","setFooterActionsMeasurements","actionBlockHeight","safeBottomAreaHeight","handleFooterActionsMeasurements","values"],"sourceRoot":"../../../../../src","sources":["components/layout/hooks/useFooterActionsMeasurements.ts"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["useCallback","useState","useFooterActionsMeasurements","footerActionsMeasurements","setFooterActionsMeasurements","actionBlockHeight","safeBottomAreaHeight","handleFooterActionsMeasurements","values"],"sourceRoot":"../../../../../src","sources":["components/layout/hooks/useFooterActionsMeasurements.ts"],"mappings":"AAAA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAO7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,4BAA4B,GACvCA,CAAA,KAAyC;EACvC,MAAM,CAACC,yBAAyB,EAAEC,4BAA4B,CAAC,GAC7DH,QAAQ,CAA4B;IAClCI,iBAAiB,EAAE,CAAC;IACpBC,oBAAoB,EAAE;EACxB,CAAC,CAAC;EAEJ,MAAMC,+BAA+B,GAAGP,WAAW,CAChDQ,MAAiC,IAAK;IACrCJ,4BAA4B,CAACI,MAAM,CAAC;EACtC,CAAC,EACD,EACF,CAAC;EAED,OAAO;IACLL,yBAAyB;IACzBI;EACF,CAAC;AACH,CAAC"}
|
|
@@ -1,22 +1,10 @@
|
|
|
1
|
-
import React, { memo, useCallback } from "react";
|
|
1
|
+
import React, { memo, useCallback, useMemo } from "react";
|
|
2
2
|
import { Pressable } from "react-native";
|
|
3
|
+
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
|
|
3
4
|
import Animated, { interpolateColor, useAnimatedStyle, useReducedMotion } from "react-native-reanimated";
|
|
4
|
-
import { IOColors, IONumberPadButtonStyles, useIONewTypeface } from "../../core";
|
|
5
|
+
import { hexToRgba, IOColors, IONumberPadButtonStyles, useIONewTypeface, useIOTheme } from "../../core";
|
|
5
6
|
import { useScaleAnimation } from "../../hooks";
|
|
6
7
|
import { IOText } from "../typography";
|
|
7
|
-
const colorMap = {
|
|
8
|
-
light: {
|
|
9
|
-
background: IOColors["grey-50"],
|
|
10
|
-
pressed: IOColors["grey-200"],
|
|
11
|
-
foreground: "blueIO-500"
|
|
12
|
-
},
|
|
13
|
-
dark: {
|
|
14
|
-
background: IOColors["blueIO-400"],
|
|
15
|
-
pressed: IOColors["blueIO-200"],
|
|
16
|
-
foreground: "white"
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
8
|
/**
|
|
21
9
|
* Based on a `Pressable` element, it displays a number button with animations on press In and Out.
|
|
22
10
|
*
|
|
@@ -27,22 +15,36 @@ export const NumberButton = /*#__PURE__*/memo(({
|
|
|
27
15
|
variant,
|
|
28
16
|
onPress
|
|
29
17
|
}) => {
|
|
18
|
+
const theme = useIOTheme();
|
|
30
19
|
const {
|
|
31
20
|
progress,
|
|
32
21
|
onPressIn,
|
|
33
22
|
onPressOut,
|
|
34
23
|
scaleAnimatedStyle
|
|
35
|
-
} = useScaleAnimation("
|
|
24
|
+
} = useScaleAnimation("medium");
|
|
36
25
|
const reducedMotion = useReducedMotion();
|
|
37
26
|
const {
|
|
38
27
|
newTypefaceEnabled
|
|
39
28
|
} = useIONewTypeface();
|
|
29
|
+
const colorMap = useMemo(() => ({
|
|
30
|
+
neutral: {
|
|
31
|
+
background: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.1),
|
|
32
|
+
pressed: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.35),
|
|
33
|
+
foreground: theme["interactiveElem-default"]
|
|
34
|
+
},
|
|
35
|
+
primary: {
|
|
36
|
+
background: hexToRgba(IOColors.white, 0.15),
|
|
37
|
+
pressed: hexToRgba(IOColors.white, 0.5),
|
|
38
|
+
foreground: "white"
|
|
39
|
+
}
|
|
40
|
+
}), [theme]);
|
|
40
41
|
|
|
41
42
|
// Interpolate animation values from `isPressed` values
|
|
42
43
|
const pressedAnimationStyle = useAnimatedStyle(() => ({
|
|
43
44
|
backgroundColor: interpolateColor(progress.value, [0, 1], [colorMap[variant].background, colorMap[variant].pressed])
|
|
44
45
|
}));
|
|
45
46
|
const handleOnPress = useCallback(() => {
|
|
47
|
+
ReactNativeHapticFeedback.trigger("impactLight");
|
|
46
48
|
onPress(number);
|
|
47
49
|
}, [number, onPress]);
|
|
48
50
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useCallback","Pressable","Animated","interpolateColor","useAnimatedStyle","useReducedMotion","IOColors","IONumberPadButtonStyles","useIONewTypeface","useScaleAnimation","IOText","
|
|
1
|
+
{"version":3,"names":["React","memo","useCallback","useMemo","Pressable","ReactNativeHapticFeedback","Animated","interpolateColor","useAnimatedStyle","useReducedMotion","hexToRgba","IOColors","IONumberPadButtonStyles","useIONewTypeface","useIOTheme","useScaleAnimation","IOText","NumberButton","number","variant","onPress","theme","progress","onPressIn","onPressOut","scaleAnimatedStyle","reducedMotion","newTypefaceEnabled","colorMap","neutral","background","pressed","foreground","primary","white","pressedAnimationStyle","backgroundColor","value","handleOnPress","trigger","createElement","accessible","accessibilityRole","View","style","button","circularShape","buttonSize","size","font","weight","color","textAlignVertical"],"sourceRoot":"../../../../src","sources":["components/numberpad/NumberButton.tsx"],"mappings":"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"}
|
|
@@ -26,7 +26,7 @@ const mapIconSpecByBiometric = {
|
|
|
26
26
|
* @returns {JSX.Element} The rendered numeric keyboard component.
|
|
27
27
|
*/
|
|
28
28
|
export const NumberPad = ({
|
|
29
|
-
variant = "
|
|
29
|
+
variant = "primary",
|
|
30
30
|
biometricType,
|
|
31
31
|
biometricAccessibilityLabel,
|
|
32
32
|
deleteAccessibilityLabel,
|
|
@@ -52,7 +52,7 @@ export const NumberPad = ({
|
|
|
52
52
|
key: item
|
|
53
53
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
54
54
|
icon: "cancel",
|
|
55
|
-
color: variant === "
|
|
55
|
+
color: variant === "primary" ? "contrast" : "primary",
|
|
56
56
|
onPress: onDeletePress,
|
|
57
57
|
accessibilityLabel: deleteAccessibilityLabel
|
|
58
58
|
}));
|
|
@@ -63,7 +63,7 @@ export const NumberPad = ({
|
|
|
63
63
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
64
64
|
icon: mapIconSpecByBiometric[biometricType].icon,
|
|
65
65
|
iconSize: mapIconSpecByBiometric[biometricType].size,
|
|
66
|
-
color: variant === "
|
|
66
|
+
color: variant === "primary" ? "contrast" : "primary",
|
|
67
67
|
onPress: onBiometricPress,
|
|
68
68
|
accessibilityLabel: biometricAccessibilityLabel
|
|
69
69
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","StyleSheet","View","IONumberPadButtonStyles","IOStyles","IconButton","VStack","NumberButton","mapIconSpecByBiometric","FACE_ID","icon","size","TOUCH_ID","BIOMETRICS","NumberPad","variant","biometricType","biometricAccessibilityLabel","deleteAccessibilityLabel","onNumberPress","onBiometricPress","onDeletePress","renderButtonsRow","row","map","item","createElement","key","number","onPress","ButtonWrapper","color","accessibilityLabel","iconSize","style","buttonSize","numberPad","space","i","rowSpaceBetween","styles","horizontalContentPadding","children","alignCenter","centerJustified","create","justifyContent","alignItems","flexGrow"],"sourceRoot":"../../../../src","sources":["components/numberpad/NumberPad.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnE,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,uBAAuB,EAAEC,QAAQ,QAAQ,YAAY;AAE9D,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,YAAY,QAAQ,gBAAgB;AAiD7C,MAAMC,sBAGL,GAAG;EACFC,OAAO,EAAE;IAAEC,IAAI,EAAE,YAAY;IAAEC,IAAI,EAAE;EAAG,CAAC;EACzCC,QAAQ,EAAE;IAAEF,IAAI,EAAE,aAAa;IAAEC,IAAI,EAAE;EAAG,CAAC;EAC3CE,UAAU,EAAE;IAAEH,IAAI,EAAE,aAAa;IAAEC,IAAI,EAAE;EAAG;AAC9C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,SAAS,GAAGA,CAAC;EACxBC,OAAO,GAAG,
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","StyleSheet","View","IONumberPadButtonStyles","IOStyles","IconButton","VStack","NumberButton","mapIconSpecByBiometric","FACE_ID","icon","size","TOUCH_ID","BIOMETRICS","NumberPad","variant","biometricType","biometricAccessibilityLabel","deleteAccessibilityLabel","onNumberPress","onBiometricPress","onDeletePress","renderButtonsRow","row","map","item","createElement","key","number","onPress","ButtonWrapper","color","accessibilityLabel","iconSize","style","buttonSize","numberPad","space","i","rowSpaceBetween","styles","horizontalContentPadding","children","alignCenter","centerJustified","create","justifyContent","alignItems","flexGrow"],"sourceRoot":"../../../../src","sources":["components/numberpad/NumberPad.tsx"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ type CodeInputProps = {
|
|
|
4
4
|
onValueChange: (value: string) => void;
|
|
5
5
|
length: number;
|
|
6
6
|
onValidate: (value: string) => boolean;
|
|
7
|
-
variant?: "
|
|
7
|
+
variant?: "primary" | "neutral";
|
|
8
8
|
};
|
|
9
9
|
export declare const CodeInput: ({ length, value, onValueChange, variant, onValidate }: CodeInputProps) => React.JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/codeInput/CodeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/codeInput/CodeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,CAAC;AA+BF,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBAyEhB,CAAC"}
|
|
@@ -4,11 +4,9 @@ import { WithSpringConfig } from "react-native-reanimated";
|
|
|
4
4
|
type Props = {
|
|
5
5
|
visible?: boolean;
|
|
6
6
|
springConfig?: WithSpringConfig;
|
|
7
|
-
delayOut?: number;
|
|
8
|
-
delayIn?: number;
|
|
9
7
|
children: React.ReactNode;
|
|
10
8
|
style?: ViewStyle;
|
|
11
9
|
};
|
|
12
|
-
declare const ScaleInOutAnimation: ({ visible, springConfig,
|
|
10
|
+
declare const ScaleInOutAnimation: ({ visible, springConfig, children, style }: Props) => React.JSX.Element | null;
|
|
13
11
|
export { ScaleInOutAnimation };
|
|
14
12
|
//# sourceMappingURL=ScaleInOutAnimation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScaleInOutAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/common/ScaleInOutAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAiB,EAEf,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ScaleInOutAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/common/ScaleInOutAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAiB,EAEf,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,mBAAmB,+CAKtB,KAAK,6BA0CP,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -1,27 +1,39 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { ComponentProps, ReactNode } from "react";
|
|
2
2
|
import { ScrollViewProps } from "react-native";
|
|
3
|
-
|
|
3
|
+
import { FooterActions } from "./FooterActions";
|
|
4
|
+
type ForceScrollDownViewActions = {
|
|
4
5
|
/**
|
|
5
|
-
* The
|
|
6
|
+
* The distance from the bottom is computed automatically based on the actions.
|
|
6
7
|
*/
|
|
7
|
-
|
|
8
|
+
threshold?: never;
|
|
9
|
+
footerActions: Omit<ComponentProps<typeof FooterActions>, "fixed" | "onMeasure">;
|
|
10
|
+
};
|
|
11
|
+
type ForceScrollDownViewCustomSlot = {
|
|
8
12
|
/**
|
|
9
13
|
* The distance from the bottom of the scrollable content at which the "scroll to bottom" button
|
|
10
|
-
* should become hidden.
|
|
14
|
+
* should become hidden.
|
|
15
|
+
*/
|
|
16
|
+
threshold: number;
|
|
17
|
+
footerActions?: never;
|
|
18
|
+
};
|
|
19
|
+
type ForceScrollDownViewSlot = ForceScrollDownViewActions | ForceScrollDownViewCustomSlot;
|
|
20
|
+
export type ForceScrollDownView = {
|
|
21
|
+
/**
|
|
22
|
+
* The content to display inside the scroll view.
|
|
11
23
|
*/
|
|
12
|
-
|
|
24
|
+
children: ReactNode;
|
|
13
25
|
/**
|
|
14
26
|
* A callback that will be called whenever the scroll view crosses the threshold. The callback
|
|
15
27
|
* is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
|
|
16
28
|
*/
|
|
17
29
|
onThresholdCrossed?: (crossed: boolean) => void;
|
|
18
|
-
} & Pick<ScrollViewProps, "style" | "contentContainerStyle" | "scrollEnabled" | "testID">;
|
|
30
|
+
} & ForceScrollDownViewSlot & Pick<ScrollViewProps, "style" | "contentContainerStyle" | "scrollEnabled" | "testID">;
|
|
19
31
|
/**
|
|
20
32
|
* A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
|
|
21
33
|
* when pressed. The button is hidden when the scroll view reaches a certain threshold from the bottom, which is
|
|
22
34
|
* configurable by the `threshold` prop. The button, and the scrolling, can also be disabled by setting the
|
|
23
35
|
* `scrollEnabled` prop to `false`.
|
|
24
36
|
*/
|
|
25
|
-
declare const ForceScrollDownView: ({ children, threshold, style, contentContainerStyle, scrollEnabled, onThresholdCrossed }:
|
|
37
|
+
declare const ForceScrollDownView: ({ footerActions, children, threshold: customThreshold, style, contentContainerStyle, scrollEnabled, onThresholdCrossed }: ForceScrollDownView) => React.JSX.Element;
|
|
26
38
|
export { ForceScrollDownView };
|
|
27
39
|
//# sourceMappingURL=ForceScrollDownView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForceScrollDownView.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ForceScrollDownView.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ForceScrollDownView.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ForceScrollDownView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,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;CACjD,GAAG,uBAAuB,GACzB,IAAI,CACF,eAAe,EACf,OAAO,GAAG,uBAAuB,GAAG,eAAe,GAAG,QAAQ,CAC/D,CAAC;AAEJ;;;;;GAKG;AACH,QAAA,MAAM,mBAAmB,6HAQtB,mBAAmB,sBA4JrB,CAAC;AAWF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFooterActionsInlineMeasurements.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/hooks/useFooterActionsInlineMeasurements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,+BAA+B,EAAE,MAAM,wBAAwB,CAAC;AAEzE,KAAK,uCAAuC,GAAG;IAC7C,+BAA+B,EAAE,+BAA+B,CAAC;IACjE,qCAAqC,EAAE,CACrC,MAAM,EAAE,+BAA+B,KACpC,IAAI,CAAC;CACX,CAAC;AACF;;;;;;;;GAQG;AACH,eAAO,MAAM,kCAAkC,QACzC,
|
|
1
|
+
{"version":3,"file":"useFooterActionsInlineMeasurements.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/hooks/useFooterActionsInlineMeasurements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,+BAA+B,EAAE,MAAM,wBAAwB,CAAC;AAEzE,KAAK,uCAAuC,GAAG;IAC7C,+BAA+B,EAAE,+BAA+B,CAAC;IACjE,qCAAqC,EAAE,CACrC,MAAM,EAAE,+BAA+B,KACpC,IAAI,CAAC;CACX,CAAC;AACF;;;;;;;;GAQG;AACH,eAAO,MAAM,kCAAkC,QACzC,uCAmBH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFooterActionsMeasurements.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/hooks/useFooterActionsMeasurements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,KAAK,iCAAiC,GAAG;IACvC,yBAAyB,EAAE,yBAAyB,CAAC;IACrD,+BAA+B,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC;CAC9E,CAAC;AACF;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B,QACnC,
|
|
1
|
+
{"version":3,"file":"useFooterActionsMeasurements.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/hooks/useFooterActionsMeasurements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,KAAK,iCAAiC,GAAG;IACvC,yBAAyB,EAAE,yBAAyB,CAAC;IACrD,+BAA+B,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC;CAC9E,CAAC;AACF;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B,QACnC,iCAkBH,CAAC"}
|