@pagopa/io-app-design-system 4.2.0 → 4.3.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/alert/Alert.js +10 -31
- package/lib/commonjs/components/alert/Alert.js.map +1 -1
- package/lib/commonjs/components/alert/AlertEdgeToEdge.js +9 -29
- package/lib/commonjs/components/alert/AlertEdgeToEdge.js.map +1 -1
- package/lib/commonjs/components/banner/Banner.js +10 -34
- package/lib/commonjs/components/banner/Banner.js.map +1 -1
- package/lib/commonjs/components/banner/__test__/__snapshots__/banner.test.tsx.snap +1 -1
- package/lib/commonjs/components/buttons/ButtonLink.js +20 -53
- package/lib/commonjs/components/buttons/ButtonLink.js.map +1 -1
- package/lib/commonjs/components/buttons/ButtonOutline.js +24 -44
- package/lib/commonjs/components/buttons/ButtonOutline.js.map +1 -1
- package/lib/commonjs/components/buttons/ButtonSolid.js +14 -39
- package/lib/commonjs/components/buttons/ButtonSolid.js.map +1 -1
- package/lib/commonjs/components/buttons/IconButton.js +13 -32
- package/lib/commonjs/components/buttons/IconButton.js.map +1 -1
- package/lib/commonjs/components/buttons/IconButtonContained.js +19 -42
- package/lib/commonjs/components/buttons/IconButtonContained.js.map +1 -1
- package/lib/commonjs/components/buttons/IconButtonSolid.js +15 -31
- package/lib/commonjs/components/buttons/IconButtonSolid.js.map +1 -1
- package/lib/commonjs/components/buttons/__test__/__snapshots__/button.test.tsx.snap +34 -10
- package/lib/commonjs/components/layout/index.js +0 -11
- package/lib/commonjs/components/layout/index.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemAction.js +16 -41
- package/lib/commonjs/components/listitems/ListItemAction.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemCheckbox.js +13 -41
- package/lib/commonjs/components/listitems/ListItemCheckbox.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemHeader.js +2 -2
- package/lib/commonjs/components/listitems/ListItemHeader.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemInfoCopy.js +15 -43
- package/lib/commonjs/components/listitems/ListItemInfoCopy.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemNav.js +17 -48
- package/lib/commonjs/components/listitems/ListItemNav.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemNavAlert.js +19 -50
- package/lib/commonjs/components/listitems/ListItemNavAlert.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemRadio.js +20 -50
- package/lib/commonjs/components/listitems/ListItemRadio.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemRadioWithAmount.js +13 -25
- package/lib/commonjs/components/listitems/ListItemRadioWithAmount.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemTransaction.js +4 -5
- package/lib/commonjs/components/listitems/ListItemTransaction.js.map +1 -1
- package/lib/commonjs/components/listitems/{PressableListItemsBase.js → PressableListItemBase.js} +7 -7
- package/lib/commonjs/components/listitems/PressableListItemBase.js.map +1 -0
- package/lib/commonjs/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +45 -81
- package/lib/commonjs/components/listitems/__test__/listitem.test.js +3 -3
- package/lib/commonjs/components/listitems/__test__/listitem.test.js.map +1 -1
- package/lib/commonjs/components/listitems/index.js +11 -11
- package/lib/commonjs/components/listitems/index.js.map +1 -1
- package/lib/commonjs/components/modules/ModuleCredential.js +35 -28
- package/lib/commonjs/components/modules/ModuleCredential.js.map +1 -1
- package/lib/commonjs/components/modules/PressableModuleBase.js +17 -11
- package/lib/commonjs/components/modules/PressableModuleBase.js.map +1 -1
- package/lib/commonjs/components/modules/index.js +8 -8
- package/lib/commonjs/components/modules/index.js.map +1 -1
- package/lib/commonjs/components/numberpad/NumberButton.js +12 -28
- package/lib/commonjs/components/numberpad/NumberButton.js.map +1 -1
- package/lib/commonjs/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap +20 -0
- package/lib/commonjs/components/stack/Stack.js +4 -3
- package/lib/commonjs/components/stack/Stack.js.map +1 -1
- package/lib/commonjs/components/tabs/TabItem.js +15 -21
- package/lib/commonjs/components/tabs/TabItem.js.map +1 -1
- package/lib/commonjs/components/typography/H6.js +1 -1
- package/lib/commonjs/components/typography/__test__/__snapshots__/typography.test.tsx.snap +1 -1
- package/lib/commonjs/core/IOAnimations.js +6 -12
- package/lib/commonjs/core/IOAnimations.js.map +1 -1
- package/lib/commonjs/hooks/index.js +28 -0
- package/lib/commonjs/hooks/index.js.map +1 -0
- package/lib/commonjs/hooks/useListItemAnimation.js +40 -0
- package/lib/commonjs/hooks/useListItemAnimation.js.map +1 -0
- package/lib/commonjs/hooks/useScaleAnimation.js +36 -0
- package/lib/commonjs/hooks/useScaleAnimation.js.map +1 -0
- package/lib/commonjs/index.js +11 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/utils/fonts.js +1 -1
- package/lib/commonjs/utils/hooks/index.js +28 -0
- package/lib/commonjs/utils/hooks/index.js.map +1 -0
- package/lib/commonjs/utils/hooks/useSpringPressProgressValue.js +5 -7
- package/lib/commonjs/utils/hooks/useSpringPressProgressValue.js.map +1 -1
- package/lib/module/components/alert/Alert.js +10 -32
- package/lib/module/components/alert/Alert.js.map +1 -1
- package/lib/module/components/alert/AlertEdgeToEdge.js +10 -31
- package/lib/module/components/alert/AlertEdgeToEdge.js.map +1 -1
- package/lib/module/components/banner/Banner.js +10 -33
- package/lib/module/components/banner/Banner.js.map +1 -1
- package/lib/module/components/banner/__test__/__snapshots__/banner.test.tsx.snap +1 -1
- package/lib/module/components/buttons/ButtonLink.js +23 -56
- package/lib/module/components/buttons/ButtonLink.js.map +1 -1
- package/lib/module/components/buttons/ButtonOutline.js +27 -47
- package/lib/module/components/buttons/ButtonOutline.js.map +1 -1
- package/lib/module/components/buttons/ButtonSolid.js +17 -42
- package/lib/module/components/buttons/ButtonSolid.js.map +1 -1
- package/lib/module/components/buttons/IconButton.js +16 -35
- package/lib/module/components/buttons/IconButton.js.map +1 -1
- package/lib/module/components/buttons/IconButtonContained.js +21 -45
- package/lib/module/components/buttons/IconButtonContained.js.map +1 -1
- package/lib/module/components/buttons/IconButtonSolid.js +17 -34
- package/lib/module/components/buttons/IconButtonSolid.js.map +1 -1
- package/lib/module/components/buttons/__test__/__snapshots__/button.test.tsx.snap +34 -10
- package/lib/module/components/layout/index.js +0 -1
- package/lib/module/components/layout/index.js.map +1 -1
- package/lib/module/components/listitems/ListItemAction.js +17 -43
- package/lib/module/components/listitems/ListItemAction.js.map +1 -1
- package/lib/module/components/listitems/ListItemCheckbox.js +15 -43
- package/lib/module/components/listitems/ListItemCheckbox.js.map +1 -1
- package/lib/module/components/listitems/ListItemHeader.js +2 -2
- package/lib/module/components/listitems/ListItemHeader.js.map +1 -1
- package/lib/module/components/listitems/ListItemInfoCopy.js +16 -45
- package/lib/module/components/listitems/ListItemInfoCopy.js.map +1 -1
- package/lib/module/components/listitems/ListItemNav.js +17 -47
- package/lib/module/components/listitems/ListItemNav.js.map +1 -1
- package/lib/module/components/listitems/ListItemNavAlert.js +19 -49
- package/lib/module/components/listitems/ListItemNavAlert.js.map +1 -1
- package/lib/module/components/listitems/ListItemRadio.js +22 -52
- package/lib/module/components/listitems/ListItemRadio.js.map +1 -1
- package/lib/module/components/listitems/ListItemRadioWithAmount.js +14 -26
- package/lib/module/components/listitems/ListItemRadioWithAmount.js.map +1 -1
- package/lib/module/components/listitems/ListItemTransaction.js +3 -4
- package/lib/module/components/listitems/ListItemTransaction.js.map +1 -1
- package/lib/module/components/listitems/{PressableListItemsBase.js → PressableListItemBase.js} +7 -7
- package/lib/module/components/listitems/PressableListItemBase.js.map +1 -0
- package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +45 -81
- package/lib/module/components/listitems/__test__/listitem.test.js +1 -1
- package/lib/module/components/listitems/__test__/listitem.test.js.map +1 -1
- package/lib/module/components/listitems/index.js +1 -1
- package/lib/module/components/listitems/index.js.map +1 -1
- package/lib/module/components/modules/ModuleCredential.js +36 -29
- package/lib/module/components/modules/ModuleCredential.js.map +1 -1
- package/lib/module/components/modules/PressableModuleBase.js +17 -10
- package/lib/module/components/modules/PressableModuleBase.js.map +1 -1
- package/lib/module/components/modules/index.js +1 -1
- package/lib/module/components/modules/index.js.map +1 -1
- package/lib/module/components/numberpad/NumberButton.js +14 -30
- package/lib/module/components/numberpad/NumberButton.js.map +1 -1
- package/lib/module/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap +20 -0
- package/lib/module/components/stack/Stack.js +4 -3
- package/lib/module/components/stack/Stack.js.map +1 -1
- package/lib/module/components/tabs/TabItem.js +18 -24
- package/lib/module/components/tabs/TabItem.js.map +1 -1
- package/lib/module/components/typography/H6.js +1 -1
- package/lib/module/components/typography/__test__/__snapshots__/typography.test.tsx.snap +1 -1
- package/lib/module/core/IOAnimations.js +4 -10
- package/lib/module/core/IOAnimations.js.map +1 -1
- package/lib/module/hooks/index.js +3 -0
- package/lib/module/hooks/index.js.map +1 -0
- package/lib/module/hooks/useListItemAnimation.js +33 -0
- package/lib/module/hooks/useListItemAnimation.js.map +1 -0
- package/lib/module/hooks/useScaleAnimation.js +29 -0
- package/lib/module/hooks/useScaleAnimation.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/fonts.js +1 -1
- package/lib/module/utils/hooks/index.js +3 -0
- package/lib/module/utils/hooks/index.js.map +1 -0
- package/lib/module/utils/hooks/useSpringPressProgressValue.js +5 -5
- package/lib/module/utils/hooks/useSpringPressProgressValue.js.map +1 -1
- package/lib/typescript/components/alert/Alert.d.ts.map +1 -1
- package/lib/typescript/components/alert/AlertEdgeToEdge.d.ts.map +1 -1
- package/lib/typescript/components/banner/Banner.d.ts.map +1 -1
- package/lib/typescript/components/buttons/ButtonLink.d.ts.map +1 -1
- package/lib/typescript/components/buttons/ButtonOutline.d.ts.map +1 -1
- package/lib/typescript/components/buttons/ButtonSolid.d.ts.map +1 -1
- package/lib/typescript/components/buttons/IconButton.d.ts.map +1 -1
- package/lib/typescript/components/buttons/IconButtonContained.d.ts.map +1 -1
- package/lib/typescript/components/buttons/IconButtonSolid.d.ts.map +1 -1
- package/lib/typescript/components/layout/index.d.ts +0 -1
- package/lib/typescript/components/layout/index.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemAction.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemCheckbox.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemInfoCopy.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemNav.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemNavAlert.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemRadio.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemRadioWithAmount.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemTransaction.d.ts +1 -1
- package/lib/typescript/components/listitems/ListItemTransaction.d.ts.map +1 -1
- package/lib/typescript/components/listitems/{PressableListItemsBase.d.ts → PressableListItemBase.d.ts} +3 -2
- package/lib/typescript/components/listitems/PressableListItemBase.d.ts.map +1 -0
- package/lib/typescript/components/listitems/index.d.ts +1 -1
- package/lib/typescript/components/listitems/index.d.ts.map +1 -1
- package/lib/typescript/components/modules/ModuleCredential.d.ts +2 -2
- package/lib/typescript/components/modules/ModuleCredential.d.ts.map +1 -1
- package/lib/typescript/components/modules/PressableModuleBase.d.ts.map +1 -1
- package/lib/typescript/components/modules/index.d.ts +1 -1
- package/lib/typescript/components/modules/index.d.ts.map +1 -1
- package/lib/typescript/components/numberpad/NumberButton.d.ts.map +1 -1
- package/lib/typescript/components/stack/Stack.d.ts +4 -3
- package/lib/typescript/components/stack/Stack.d.ts.map +1 -1
- package/lib/typescript/components/tabs/TabItem.d.ts.map +1 -1
- package/lib/typescript/core/IOAnimations.d.ts +6 -10
- package/lib/typescript/core/IOAnimations.d.ts.map +1 -1
- package/lib/typescript/hooks/index.d.ts +3 -0
- package/lib/typescript/hooks/index.d.ts.map +1 -0
- package/lib/typescript/hooks/useListItemAnimation.d.ts +10 -0
- package/lib/typescript/hooks/useListItemAnimation.d.ts.map +1 -0
- package/lib/typescript/hooks/useScaleAnimation.d.ts +10 -0
- package/lib/typescript/hooks/useScaleAnimation.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/utils/fonts.d.ts +1 -1
- package/lib/typescript/utils/hooks/index.d.ts +3 -0
- package/lib/typescript/utils/hooks/index.d.ts.map +1 -0
- package/lib/typescript/utils/hooks/useSpringPressProgressValue.d.ts +7 -8
- package/lib/typescript/utils/hooks/useSpringPressProgressValue.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/alert/Alert.tsx +7 -46
- package/src/components/alert/AlertEdgeToEdge.tsx +6 -46
- package/src/components/banner/Banner.tsx +6 -52
- package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap +1 -1
- package/src/components/buttons/ButtonLink.tsx +32 -89
- package/src/components/buttons/ButtonOutline.tsx +26 -60
- package/src/components/buttons/ButtonSolid.tsx +11 -58
- package/src/components/buttons/IconButton.tsx +10 -47
- package/src/components/buttons/IconButtonContained.tsx +21 -57
- package/src/components/buttons/IconButtonSolid.tsx +15 -46
- package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap +34 -10
- package/src/components/layout/index.tsx +0 -1
- package/src/components/listitems/ListItemAction.tsx +11 -67
- package/src/components/listitems/ListItemCheckbox.tsx +10 -68
- package/src/components/listitems/ListItemHeader.tsx +2 -2
- package/src/components/listitems/ListItemInfoCopy.tsx +11 -71
- package/src/components/listitems/ListItemNav.tsx +13 -74
- package/src/components/listitems/ListItemNavAlert.tsx +18 -92
- package/src/components/listitems/ListItemRadio.tsx +14 -75
- package/src/components/listitems/ListItemRadioWithAmount.tsx +16 -31
- package/src/components/listitems/ListItemTransaction.tsx +3 -7
- package/src/components/listitems/{PressableListItemsBase.tsx → PressableListItemBase.tsx} +7 -6
- package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +45 -81
- package/src/components/listitems/__test__/listitem.test.tsx +1 -1
- package/src/components/listitems/index.tsx +1 -1
- package/src/components/modules/ModuleCredential.tsx +49 -39
- package/src/components/modules/PressableModuleBase.tsx +15 -8
- package/src/components/modules/index.tsx +1 -1
- package/src/components/numberpad/NumberButton.tsx +12 -43
- package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap +20 -0
- package/src/components/stack/Stack.tsx +11 -3
- package/src/components/tabs/TabItem.tsx +15 -29
- package/src/components/typography/H6.tsx +1 -1
- package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap +1 -1
- package/src/core/IOAnimations.ts +8 -10
- package/src/hooks/index.tsx +2 -0
- package/src/hooks/useListItemAnimation.tsx +59 -0
- package/src/hooks/useScaleAnimation.tsx +41 -0
- package/src/index.tsx +1 -0
- package/src/utils/fonts.ts +1 -1
- package/src/utils/hooks/index.tsx +2 -0
- package/src/utils/hooks/useSpringPressProgressValue.ts +14 -8
- package/lib/commonjs/components/layout/FooterWithButtons.js +0 -84
- package/lib/commonjs/components/layout/FooterWithButtons.js.map +0 -1
- package/lib/commonjs/components/listitems/PressableListItemsBase.js.map +0 -1
- package/lib/commonjs/components/listitems/hooks/useListItemSpringAnimation.js +0 -56
- package/lib/commonjs/components/listitems/hooks/useListItemSpringAnimation.js.map +0 -1
- package/lib/commonjs/components/modules/hooks/useModuleSpringAnimation.js +0 -41
- package/lib/commonjs/components/modules/hooks/useModuleSpringAnimation.js.map +0 -1
- package/lib/module/components/layout/FooterWithButtons.js +0 -75
- package/lib/module/components/layout/FooterWithButtons.js.map +0 -1
- package/lib/module/components/listitems/PressableListItemsBase.js.map +0 -1
- package/lib/module/components/listitems/hooks/useListItemSpringAnimation.js +0 -47
- package/lib/module/components/listitems/hooks/useListItemSpringAnimation.js.map +0 -1
- package/lib/module/components/modules/hooks/useModuleSpringAnimation.js +0 -34
- package/lib/module/components/modules/hooks/useModuleSpringAnimation.js.map +0 -1
- package/lib/typescript/components/layout/FooterWithButtons.d.ts +0 -16
- package/lib/typescript/components/layout/FooterWithButtons.d.ts.map +0 -1
- package/lib/typescript/components/listitems/PressableListItemsBase.d.ts.map +0 -1
- package/lib/typescript/components/listitems/hooks/useListItemSpringAnimation.d.ts +0 -13
- package/lib/typescript/components/listitems/hooks/useListItemSpringAnimation.d.ts.map +0 -1
- package/lib/typescript/components/modules/hooks/useModuleSpringAnimation.d.ts +0 -10
- package/lib/typescript/components/modules/hooks/useModuleSpringAnimation.d.ts.map +0 -1
- package/src/components/layout/FooterWithButtons.tsx +0 -90
- package/src/components/listitems/hooks/useListItemSpringAnimation.ts +0 -72
- package/src/components/modules/hooks/useModuleSpringAnimation.ts +0 -49
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
import React, { memo, useCallback, useMemo } from "react";
|
|
2
2
|
import { Pressable } from "react-native";
|
|
3
3
|
import Animated, {
|
|
4
|
-
Extrapolate,
|
|
5
|
-
interpolate,
|
|
6
4
|
interpolateColor,
|
|
7
5
|
useAnimatedStyle,
|
|
8
|
-
|
|
9
|
-
useSharedValue,
|
|
10
|
-
withSpring
|
|
6
|
+
useReducedMotion
|
|
11
7
|
} from "react-native-reanimated";
|
|
12
8
|
import {
|
|
13
9
|
IOColors,
|
|
14
10
|
IONumberPadButtonStyles,
|
|
15
|
-
IOScaleValues,
|
|
16
|
-
IOSpringValues,
|
|
17
11
|
hexToRgba,
|
|
18
12
|
useIOExperimentalDesign
|
|
19
13
|
} from "../../core";
|
|
14
|
+
import { useScaleAnimation } from "../../hooks";
|
|
20
15
|
import { H3 } from "../typography";
|
|
21
16
|
|
|
22
17
|
type NumberButtonVariantType = "light" | "dark";
|
|
@@ -76,51 +71,24 @@ const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
|
|
|
76
71
|
*/
|
|
77
72
|
export const NumberButton = memo(
|
|
78
73
|
({ number, variant, onPress }: NumberButtonProps) => {
|
|
74
|
+
const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
|
|
75
|
+
useScaleAnimation("slight");
|
|
76
|
+
const reducedMotion = useReducedMotion();
|
|
79
77
|
const { isExperimental } = useIOExperimentalDesign();
|
|
80
78
|
|
|
81
79
|
const colors = useMemo(
|
|
82
80
|
() => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
|
|
83
81
|
[variant, isExperimental]
|
|
84
82
|
);
|
|
85
|
-
const isPressed = useSharedValue(0);
|
|
86
|
-
// Scaling transformation applied when the button is pressed
|
|
87
|
-
const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
|
|
88
|
-
// Using a spring-based animation for our interpolations
|
|
89
|
-
const progressPressed = useDerivedValue(() =>
|
|
90
|
-
withSpring(isPressed.value, IOSpringValues.button)
|
|
91
|
-
);
|
|
92
83
|
|
|
93
84
|
// Interpolate animation values from `isPressed` values
|
|
94
|
-
const pressedAnimationStyle = useAnimatedStyle(() => {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
progressPressed.value,
|
|
85
|
+
const pressedAnimationStyle = useAnimatedStyle(() => ({
|
|
86
|
+
backgroundColor: interpolateColor(
|
|
87
|
+
progress.value,
|
|
98
88
|
[0, 1],
|
|
99
89
|
[colors.background, colors.pressed]
|
|
100
|
-
)
|
|
101
|
-
|
|
102
|
-
// Scale down button slightly when pressed
|
|
103
|
-
const scale = interpolate(
|
|
104
|
-
progressPressed.value,
|
|
105
|
-
[0, 1],
|
|
106
|
-
[1, animationScaleValue],
|
|
107
|
-
Extrapolate.CLAMP
|
|
108
|
-
);
|
|
109
|
-
|
|
110
|
-
return {
|
|
111
|
-
backgroundColor: bgColor,
|
|
112
|
-
transform: [{ scale }]
|
|
113
|
-
};
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
const onPressIn = useCallback(() => {
|
|
117
|
-
// eslint-disable-next-line functional/immutable-data
|
|
118
|
-
isPressed.value = 1;
|
|
119
|
-
}, [isPressed]);
|
|
120
|
-
const onPressOut = useCallback(() => {
|
|
121
|
-
// eslint-disable-next-line functional/immutable-data
|
|
122
|
-
isPressed.value = 0;
|
|
123
|
-
}, [isPressed]);
|
|
90
|
+
)
|
|
91
|
+
}));
|
|
124
92
|
|
|
125
93
|
const handleOnPress = useCallback(() => {
|
|
126
94
|
onPress(number);
|
|
@@ -139,7 +107,8 @@ export const NumberButton = memo(
|
|
|
139
107
|
IONumberPadButtonStyles.button,
|
|
140
108
|
IONumberPadButtonStyles.circularShape,
|
|
141
109
|
IONumberPadButtonStyles.buttonSize,
|
|
142
|
-
pressedAnimationStyle
|
|
110
|
+
pressedAnimationStyle,
|
|
111
|
+
!reducedMotion && scaleAnimatedStyle
|
|
143
112
|
]}
|
|
144
113
|
>
|
|
145
114
|
<H3 color={colors.foreground}>{number}</H3>
|
|
@@ -80,6 +80,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
82
|
"backgroundColor": undefined,
|
|
83
|
+
},
|
|
84
|
+
{
|
|
83
85
|
"transform": [
|
|
84
86
|
{
|
|
85
87
|
"scale": undefined,
|
|
@@ -159,6 +161,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
159
161
|
},
|
|
160
162
|
{
|
|
161
163
|
"backgroundColor": undefined,
|
|
164
|
+
},
|
|
165
|
+
{
|
|
162
166
|
"transform": [
|
|
163
167
|
{
|
|
164
168
|
"scale": undefined,
|
|
@@ -238,6 +242,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
238
242
|
},
|
|
239
243
|
{
|
|
240
244
|
"backgroundColor": undefined,
|
|
245
|
+
},
|
|
246
|
+
{
|
|
241
247
|
"transform": [
|
|
242
248
|
{
|
|
243
249
|
"scale": undefined,
|
|
@@ -333,6 +339,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
333
339
|
},
|
|
334
340
|
{
|
|
335
341
|
"backgroundColor": undefined,
|
|
342
|
+
},
|
|
343
|
+
{
|
|
336
344
|
"transform": [
|
|
337
345
|
{
|
|
338
346
|
"scale": undefined,
|
|
@@ -412,6 +420,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
412
420
|
},
|
|
413
421
|
{
|
|
414
422
|
"backgroundColor": undefined,
|
|
423
|
+
},
|
|
424
|
+
{
|
|
415
425
|
"transform": [
|
|
416
426
|
{
|
|
417
427
|
"scale": undefined,
|
|
@@ -491,6 +501,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
491
501
|
},
|
|
492
502
|
{
|
|
493
503
|
"backgroundColor": undefined,
|
|
504
|
+
},
|
|
505
|
+
{
|
|
494
506
|
"transform": [
|
|
495
507
|
{
|
|
496
508
|
"scale": undefined,
|
|
@@ -586,6 +598,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
586
598
|
},
|
|
587
599
|
{
|
|
588
600
|
"backgroundColor": undefined,
|
|
601
|
+
},
|
|
602
|
+
{
|
|
589
603
|
"transform": [
|
|
590
604
|
{
|
|
591
605
|
"scale": undefined,
|
|
@@ -665,6 +679,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
665
679
|
},
|
|
666
680
|
{
|
|
667
681
|
"backgroundColor": undefined,
|
|
682
|
+
},
|
|
683
|
+
{
|
|
668
684
|
"transform": [
|
|
669
685
|
{
|
|
670
686
|
"scale": undefined,
|
|
@@ -744,6 +760,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
744
760
|
},
|
|
745
761
|
{
|
|
746
762
|
"backgroundColor": undefined,
|
|
763
|
+
},
|
|
764
|
+
{
|
|
747
765
|
"transform": [
|
|
748
766
|
{
|
|
749
767
|
"scale": undefined,
|
|
@@ -980,6 +998,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
|
|
|
980
998
|
},
|
|
981
999
|
{
|
|
982
1000
|
"backgroundColor": undefined,
|
|
1001
|
+
},
|
|
1002
|
+
{
|
|
983
1003
|
"transform": [
|
|
984
1004
|
{
|
|
985
1005
|
"scale": undefined,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from "react";
|
|
2
|
-
import { View, ViewStyle } from "react-native";
|
|
2
|
+
import { View, ViewProps, ViewStyle } from "react-native";
|
|
3
3
|
import { IOSpacer } from "../../core";
|
|
4
4
|
|
|
5
5
|
type AllowedStyleProps = Pick<
|
|
@@ -7,10 +7,16 @@ type AllowedStyleProps = Pick<
|
|
|
7
7
|
"alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
|
|
8
8
|
>;
|
|
9
9
|
|
|
10
|
+
type A11YRelatedProps = Pick<
|
|
11
|
+
ViewProps,
|
|
12
|
+
"pointerEvents" | "accessibilityElementsHidden" | "importantForAccessibility"
|
|
13
|
+
>;
|
|
14
|
+
|
|
10
15
|
type Stack = PropsWithChildren<{
|
|
11
16
|
space?: IOSpacer;
|
|
12
17
|
style?: AllowedStyleProps;
|
|
13
|
-
}
|
|
18
|
+
}> &
|
|
19
|
+
A11YRelatedProps;
|
|
14
20
|
|
|
15
21
|
type BaseStack = Stack & {
|
|
16
22
|
orientation: "vertical" | "horizontal";
|
|
@@ -25,9 +31,11 @@ const Stack = ({
|
|
|
25
31
|
space,
|
|
26
32
|
style,
|
|
27
33
|
orientation = "vertical",
|
|
28
|
-
children
|
|
34
|
+
children,
|
|
35
|
+
...props
|
|
29
36
|
}: BaseStack) => (
|
|
30
37
|
<View
|
|
38
|
+
{...props}
|
|
31
39
|
style={{
|
|
32
40
|
display: "flex",
|
|
33
41
|
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import React, { useMemo } from "react";
|
|
1
|
+
import React, { useEffect, useMemo } from "react";
|
|
2
2
|
import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
|
|
3
3
|
import Animated, {
|
|
4
|
-
|
|
5
|
-
interpolate,
|
|
4
|
+
SharedValue,
|
|
6
5
|
interpolateColor,
|
|
7
6
|
useAnimatedStyle,
|
|
8
7
|
useDerivedValue,
|
|
8
|
+
useReducedMotion,
|
|
9
9
|
useSharedValue,
|
|
10
10
|
withSpring
|
|
11
11
|
} from "react-native-reanimated";
|
|
12
12
|
import {
|
|
13
13
|
IOColors,
|
|
14
|
-
IOScaleValues,
|
|
15
14
|
IOSpringValues,
|
|
16
15
|
hexToRgba,
|
|
17
16
|
useIOExperimentalDesign
|
|
18
17
|
} from "../../core";
|
|
19
|
-
import {
|
|
18
|
+
import { useScaleAnimation } from "../../hooks";
|
|
20
19
|
import { WithTestID } from "../../utils/types";
|
|
21
20
|
import { IOIcons, Icon } from "../icons";
|
|
22
|
-
import { HSpacer } from "../spacer";
|
|
23
21
|
import { BodySmall } from "../typography";
|
|
24
22
|
|
|
25
23
|
type ColorMode = "light" | "dark";
|
|
@@ -148,11 +146,9 @@ const TabItem = ({
|
|
|
148
146
|
icon,
|
|
149
147
|
iconSelected
|
|
150
148
|
}: TabItem) => {
|
|
151
|
-
const {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
onPressOut
|
|
155
|
-
} = useSpringPressProgressValue(IOSpringValues.selection);
|
|
149
|
+
const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
|
|
150
|
+
useScaleAnimation();
|
|
151
|
+
const reducedMotion = useReducedMotion();
|
|
156
152
|
|
|
157
153
|
const { isExperimental } = useIOExperimentalDesign();
|
|
158
154
|
const colors = useMemo(
|
|
@@ -180,12 +176,12 @@ const TabItem = ({
|
|
|
180
176
|
0.1
|
|
181
177
|
);
|
|
182
178
|
|
|
183
|
-
const isSelected:
|
|
179
|
+
const isSelected: SharedValue<number> = useSharedValue(0);
|
|
184
180
|
const progressSelected = useDerivedValue(() =>
|
|
185
181
|
withSpring(isSelected.value, IOSpringValues.selection)
|
|
186
182
|
);
|
|
187
183
|
|
|
188
|
-
|
|
184
|
+
useEffect(() => {
|
|
189
185
|
// eslint-disable-next-line functional/immutable-data
|
|
190
186
|
isSelected.value = selected ? 1 : 0;
|
|
191
187
|
}, [isSelected, selected]);
|
|
@@ -194,7 +190,7 @@ const TabItem = ({
|
|
|
194
190
|
const animatedStyle = useAnimatedStyle(() => {
|
|
195
191
|
// Link color states to the pressed states
|
|
196
192
|
const pressedBackgroundColor = interpolateColor(
|
|
197
|
-
|
|
193
|
+
progress.value,
|
|
198
194
|
[0, 1],
|
|
199
195
|
[colors.background.default, opaquePressedBackgroundColor]
|
|
200
196
|
);
|
|
@@ -211,22 +207,13 @@ const TabItem = ({
|
|
|
211
207
|
[colors.border.default, colors.border.selected]
|
|
212
208
|
);
|
|
213
209
|
|
|
214
|
-
// Scale down button slightly when pressed
|
|
215
|
-
const scale = interpolate(
|
|
216
|
-
progressPressed.value,
|
|
217
|
-
[0, 1],
|
|
218
|
-
[1, IOScaleValues?.basicButton?.pressedState],
|
|
219
|
-
Extrapolate.CLAMP
|
|
220
|
-
);
|
|
221
|
-
|
|
222
210
|
return {
|
|
223
211
|
backgroundColor: selected
|
|
224
212
|
? selectedBackgroundColor
|
|
225
213
|
: pressedBackgroundColor,
|
|
226
|
-
borderColor: selected ? selectedBorderColor : borderColor
|
|
227
|
-
transform: [{ scale }]
|
|
214
|
+
borderColor: selected ? selectedBorderColor : borderColor
|
|
228
215
|
};
|
|
229
|
-
}, [
|
|
216
|
+
}, [progress, progressSelected, selected]);
|
|
230
217
|
|
|
231
218
|
const activeIcon = selected ? iconSelected ?? icon : icon;
|
|
232
219
|
|
|
@@ -246,16 +233,15 @@ const TabItem = ({
|
|
|
246
233
|
<Animated.View
|
|
247
234
|
style={[
|
|
248
235
|
styles.container,
|
|
236
|
+
{ columnGap: 4 },
|
|
237
|
+
!reducedMotion && scaleAnimatedStyle,
|
|
249
238
|
animatedStyle,
|
|
250
239
|
fullWidth && styles.fullWidth,
|
|
251
240
|
disabled && styles.disabled
|
|
252
241
|
]}
|
|
253
242
|
>
|
|
254
243
|
{activeIcon && (
|
|
255
|
-
|
|
256
|
-
<Icon name={activeIcon} color={foregroundColor} size={16} />
|
|
257
|
-
<HSpacer size={4} />
|
|
258
|
-
</>
|
|
244
|
+
<Icon name={activeIcon} color={foregroundColor} size={16} />
|
|
259
245
|
)}
|
|
260
246
|
<BodySmall weight="Semibold" color={foregroundColor}>
|
|
261
247
|
{label}
|
|
@@ -11,7 +11,7 @@ export const h6LineHeight = 24;
|
|
|
11
11
|
const fontName: IOFontFamily = "Titillio";
|
|
12
12
|
|
|
13
13
|
// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
|
|
14
|
-
const legacyFontSize: IOFontSize =
|
|
14
|
+
const legacyFontSize: IOFontSize = 17;
|
|
15
15
|
const legacyFontName: IOFontFamily = "TitilliumSansPro";
|
|
16
16
|
|
|
17
17
|
/**
|
package/src/core/IOAnimations.ts
CHANGED
|
@@ -27,17 +27,15 @@ export const IOSpringValues = {
|
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
export
|
|
30
|
+
export type IOSpringValues = keyof typeof IOSpringValues;
|
|
31
|
+
|
|
32
|
+
export const IOScaleEffect = {
|
|
31
33
|
// Slight scale effect
|
|
32
|
-
|
|
33
|
-
pressedState: 0.99
|
|
34
|
-
},
|
|
34
|
+
slight: 0.99,
|
|
35
35
|
// Medium scale effect
|
|
36
|
-
|
|
37
|
-
pressedState: 0.97
|
|
38
|
-
},
|
|
36
|
+
medium: 0.97,
|
|
39
37
|
// Exaggerated scale effect
|
|
40
|
-
|
|
41
|
-
pressedState: 0.95
|
|
42
|
-
}
|
|
38
|
+
exaggerated: 0.95
|
|
43
39
|
};
|
|
40
|
+
|
|
41
|
+
export type IOScaleEffect = keyof typeof IOScaleEffect;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { GestureResponderEvent, ViewStyle } from "react-native";
|
|
2
|
+
import {
|
|
3
|
+
AnimatedStyle,
|
|
4
|
+
Extrapolation,
|
|
5
|
+
interpolate,
|
|
6
|
+
interpolateColor,
|
|
7
|
+
SharedValue,
|
|
8
|
+
useAnimatedStyle
|
|
9
|
+
} from "react-native-reanimated";
|
|
10
|
+
import { hexToRgba, IOColors, IOScaleEffect, useIOTheme } from "../core";
|
|
11
|
+
import { useSpringPressProgressValue } from "../utils/hooks";
|
|
12
|
+
|
|
13
|
+
export const useListItemAnimation = (): {
|
|
14
|
+
progress: SharedValue<number>;
|
|
15
|
+
onPressIn: (event: GestureResponderEvent) => void;
|
|
16
|
+
onPressOut: (event: GestureResponderEvent) => void;
|
|
17
|
+
scaleAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
18
|
+
backgroundAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
19
|
+
} => {
|
|
20
|
+
const { progress, onPressIn, onPressOut } =
|
|
21
|
+
useSpringPressProgressValue("button");
|
|
22
|
+
|
|
23
|
+
const theme = useIOTheme();
|
|
24
|
+
|
|
25
|
+
const mapBackgroundStates: Record<string, string> = {
|
|
26
|
+
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
|
|
27
|
+
pressed: IOColors[theme["listItem-pressed"]]
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// Interpolate animation values from `isPressed` values
|
|
31
|
+
const scaleAnimatedStyle = useAnimatedStyle(() => ({
|
|
32
|
+
transform: [
|
|
33
|
+
{
|
|
34
|
+
scale: interpolate(
|
|
35
|
+
progress.value,
|
|
36
|
+
[0, 1],
|
|
37
|
+
[1, IOScaleEffect.slight],
|
|
38
|
+
Extrapolation.CLAMP
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
}));
|
|
43
|
+
|
|
44
|
+
const backgroundAnimatedStyle = useAnimatedStyle(() => ({
|
|
45
|
+
backgroundColor: interpolateColor(
|
|
46
|
+
progress.value,
|
|
47
|
+
[0, 1],
|
|
48
|
+
[mapBackgroundStates.default, mapBackgroundStates.pressed]
|
|
49
|
+
)
|
|
50
|
+
}));
|
|
51
|
+
|
|
52
|
+
return {
|
|
53
|
+
progress,
|
|
54
|
+
onPressIn,
|
|
55
|
+
onPressOut,
|
|
56
|
+
scaleAnimatedStyle,
|
|
57
|
+
backgroundAnimatedStyle
|
|
58
|
+
};
|
|
59
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { GestureResponderEvent, ViewStyle } from "react-native";
|
|
2
|
+
import {
|
|
3
|
+
AnimatedStyle,
|
|
4
|
+
Extrapolation,
|
|
5
|
+
interpolate,
|
|
6
|
+
SharedValue,
|
|
7
|
+
useAnimatedStyle
|
|
8
|
+
} from "react-native-reanimated";
|
|
9
|
+
import { IOScaleEffect } from "../core";
|
|
10
|
+
import { useSpringPressProgressValue } from "../utils/hooks";
|
|
11
|
+
|
|
12
|
+
export const useScaleAnimation = (
|
|
13
|
+
magnitude: IOScaleEffect = "slight"
|
|
14
|
+
): {
|
|
15
|
+
progress: SharedValue<number>;
|
|
16
|
+
onPressIn: (event: GestureResponderEvent) => void;
|
|
17
|
+
onPressOut: (event: GestureResponderEvent) => void;
|
|
18
|
+
scaleAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
19
|
+
} => {
|
|
20
|
+
const { progress, onPressIn, onPressOut } =
|
|
21
|
+
useSpringPressProgressValue("button");
|
|
22
|
+
|
|
23
|
+
// Scaling transformation applied when the button is pressed
|
|
24
|
+
const animationScaleValue = IOScaleEffect[magnitude];
|
|
25
|
+
|
|
26
|
+
const scaleAnimatedStyle = useAnimatedStyle(() => {
|
|
27
|
+
// Scale down button slightly when pressed
|
|
28
|
+
const scale = interpolate(
|
|
29
|
+
progress.value,
|
|
30
|
+
[0, 1],
|
|
31
|
+
[1, animationScaleValue],
|
|
32
|
+
Extrapolation.CLAMP
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
return {
|
|
36
|
+
transform: [{ scale }]
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
return { progress, onPressIn, onPressOut, scaleAnimatedStyle };
|
|
41
|
+
};
|
package/src/index.tsx
CHANGED
package/src/utils/fonts.ts
CHANGED
|
@@ -36,7 +36,7 @@ export type IOFontFamily = keyof typeof fonts;
|
|
|
36
36
|
* Font Sizes
|
|
37
37
|
*/
|
|
38
38
|
const fontSizes = [12, 14, 16, 20, 22, 26, 28, 32] as const;
|
|
39
|
-
const fontSizesLegacy = [
|
|
39
|
+
const fontSizesLegacy = [17, 28, 31, 35] as const;
|
|
40
40
|
const allFontSizes = [...new Set([...fontSizes, ...fontSizesLegacy])];
|
|
41
41
|
export type IOFontSize = (typeof allFontSizes)[number];
|
|
42
42
|
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
import { GestureResponderEvent } from "react-native";
|
|
3
|
+
import {
|
|
4
|
+
SharedValue,
|
|
3
5
|
useDerivedValue,
|
|
4
6
|
useSharedValue,
|
|
5
7
|
withSpring
|
|
@@ -7,19 +9,23 @@ import Animated, {
|
|
|
7
9
|
import { IOSpringValues } from "../../core";
|
|
8
10
|
|
|
9
11
|
export const useSpringPressProgressValue = (
|
|
10
|
-
springValue =
|
|
11
|
-
)
|
|
12
|
-
|
|
12
|
+
springValue: IOSpringValues = "button"
|
|
13
|
+
): {
|
|
14
|
+
progress: SharedValue<number>;
|
|
15
|
+
onPressIn: (event: GestureResponderEvent) => void;
|
|
16
|
+
onPressOut: (event: GestureResponderEvent) => void;
|
|
17
|
+
} => {
|
|
18
|
+
const isPressed: SharedValue<number> = useSharedValue(0);
|
|
13
19
|
|
|
14
20
|
const progress = useDerivedValue(() =>
|
|
15
|
-
withSpring(isPressed.value, springValue)
|
|
21
|
+
withSpring(isPressed.value, IOSpringValues[springValue])
|
|
16
22
|
);
|
|
17
23
|
|
|
18
|
-
const onPressIn =
|
|
24
|
+
const onPressIn = useCallback(() => {
|
|
19
25
|
// eslint-disable-next-line functional/immutable-data
|
|
20
26
|
isPressed.value = 1;
|
|
21
27
|
}, [isPressed]);
|
|
22
|
-
const onPressOut =
|
|
28
|
+
const onPressOut = useCallback(() => {
|
|
23
29
|
// eslint-disable-next-line functional/immutable-data
|
|
24
30
|
isPressed.value = 0;
|
|
25
31
|
}, [isPressed]);
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.FooterWithButtons = void 0;
|
|
7
|
-
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
10
|
-
var _core = require("../../core");
|
|
11
|
-
var _BlockButtons = require("./BlockButtons");
|
|
12
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
-
// TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze
|
|
15
|
-
const styles = _reactNative.StyleSheet.create({
|
|
16
|
-
container: {
|
|
17
|
-
overflow: "hidden",
|
|
18
|
-
width: "100%",
|
|
19
|
-
// This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction`
|
|
20
|
-
marginTop: -50,
|
|
21
|
-
paddingTop: 50
|
|
22
|
-
},
|
|
23
|
-
sticky: {
|
|
24
|
-
position: "absolute",
|
|
25
|
-
bottom: 0
|
|
26
|
-
},
|
|
27
|
-
footerShadow: {
|
|
28
|
-
backgroundColor: _core.IOColors.white,
|
|
29
|
-
paddingHorizontal: _core.IOVisualCostants.appMarginDefault,
|
|
30
|
-
// iOS shadow
|
|
31
|
-
shadowColor: _core.IOColors.black,
|
|
32
|
-
shadowOffset: {
|
|
33
|
-
width: 0,
|
|
34
|
-
height: 50
|
|
35
|
-
},
|
|
36
|
-
shadowOpacity: 0.5,
|
|
37
|
-
shadowRadius: 37,
|
|
38
|
-
elevation: 20 // Prop supported on Android only
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
const verticalSpacing = 16;
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Implements a component that show buttons as sticky footer
|
|
46
|
-
* It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf or the inlineOneThird style
|
|
47
|
-
* @deprecated This component is deprecated. Use `FooterActions` or `FooterActionsInline` instead.
|
|
48
|
-
* `FooterActionsInline` is the official replacement for `FooterWithButtons`, but use it only
|
|
49
|
-
* if explicitly required.
|
|
50
|
-
*/
|
|
51
|
-
const FooterWithButtons = ({
|
|
52
|
-
sticky = false,
|
|
53
|
-
onLayoutChange,
|
|
54
|
-
...rest
|
|
55
|
-
}) => {
|
|
56
|
-
const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
57
|
-
const onLayout = event => {
|
|
58
|
-
onLayoutChange === null || onLayoutChange === void 0 || onLayoutChange(event.nativeEvent.layout.height);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
/* Check if the iPhone bottom handle is present.
|
|
62
|
-
If not add a default margin to prevent the
|
|
63
|
-
button from sticking to the bottom. */
|
|
64
|
-
const bottomMargin = (0, React.useMemo)(() => insets.bottom === 0 ? verticalSpacing : insets.bottom, [insets]);
|
|
65
|
-
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
66
|
-
style: {
|
|
67
|
-
...styles.container,
|
|
68
|
-
...(sticky ? styles.sticky : {})
|
|
69
|
-
},
|
|
70
|
-
accessible: rest.accessible,
|
|
71
|
-
pointerEvents: "box-none",
|
|
72
|
-
testID: "FooterWithButtons"
|
|
73
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
74
|
-
onLayout: onLayout,
|
|
75
|
-
style: [styles.footerShadow, {
|
|
76
|
-
paddingBottom: bottomMargin,
|
|
77
|
-
paddingTop: verticalSpacing
|
|
78
|
-
}]
|
|
79
|
-
}, /*#__PURE__*/React.createElement(_BlockButtons.BlockButtons, rest)));
|
|
80
|
-
};
|
|
81
|
-
exports.FooterWithButtons = FooterWithButtons;
|
|
82
|
-
var _default = FooterWithButtons;
|
|
83
|
-
exports.default = _default;
|
|
84
|
-
//# sourceMappingURL=FooterWithButtons.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeSafeAreaContext","_core","_BlockButtons","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","styles","StyleSheet","create","container","overflow","width","marginTop","paddingTop","sticky","position","bottom","footerShadow","backgroundColor","IOColors","white","paddingHorizontal","IOVisualCostants","appMarginDefault","shadowColor","black","shadowOffset","height","shadowOpacity","shadowRadius","elevation","verticalSpacing","FooterWithButtons","onLayoutChange","rest","insets","useSafeAreaInsets","onLayout","event","nativeEvent","layout","bottomMargin","useMemo","createElement","View","style","accessible","pointerEvents","testID","paddingBottom","BlockButtons","exports","_default"],"sourceRoot":"../../../../src","sources":["components/layout/FooterWithButtons.tsx"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_core","_useListItemSpringAnimation","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","PressableListItemBase","onPress","testID","children","accessibilityRole","props","onPressIn","onPressOut","animatedScaleStyle","animatedBackgroundStyle","useListItemSpringAnimation","createElement","Pressable","accessible","onTouchEnd","View","style","IOListItemStyles","listItem","listItemInner","columnGap","IOListItemVisualParams","iconMargin","exports"],"sourceRoot":"../../../../src","sources":["components/listitems/PressableListItemsBase.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,IAAAK,2BAAA,GAAAL,OAAA;AAAgF,SAAAG,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAazE,MAAMI,qBAAqB,GAAGA,CAAC;EACpCC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRC,iBAAiB;EACjB,GAAGC;AACwC,CAAC,KAAK;EACjD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,kBAAkB;IAAEC;EAAwB,CAAC,GAC1E,IAAAC,sDAA0B,EAAC,CAAC;EAC9B,oBACEjD,KAAA,CAAAkD,aAAA,CAAC/C,YAAA,CAAAgD,SAAS,EAAArB,QAAA;IACRU,OAAO,EAAEA,OAAQ;IACjBC,MAAM,EAAEA,MAAO;IACfW,UAAU,EAAE,IAAK;IACjBP,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBO,UAAU,EAAEP,UAAW;IACvBH,iBAAiB,EAAEA,iBAAiB,IAAI;EAAS,GAC7CC,KAAK,gBAET5C,KAAA,CAAAkD,aAAA,CAAC9C,sBAAA,CAAAM,OAAQ,CAAC4C,IAAI;IACZC,KAAK,EAAE,CAACC,sBAAgB,CAACC,QAAQ,EAAET,uBAAuB;EAAE,gBAE5DhD,KAAA,CAAAkD,aAAA,CAAC9C,sBAAA,CAAAM,OAAQ,CAAC4C,IAAI;IACZC,KAAK,EAAE,CACLC,sBAAgB,CAACE,aAAa,EAC9B;MAAEC,SAAS,EAAEC,4BAAsB,CAACC;IAAW,CAAC,EAChDd,kBAAkB;EAClB,GAEDL,QACY,CACF,CACN,CAAC;AAEhB,CAAC;AAACoB,OAAA,CAAAvB,qBAAA,GAAAA,qBAAA"}
|