@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,9 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { useState } from "react";
|
|
3
3
|
import { Pressable, View } from "react-native";
|
|
4
4
|
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
|
|
5
|
-
import Animated
|
|
6
|
-
import {
|
|
5
|
+
import Animated from "react-native-reanimated";
|
|
6
|
+
import { IOSelectionListItemStyles, IOSelectionListItemVisualParams, IOStyles, useIOTheme } from "../../core";
|
|
7
|
+
import { useListItemAnimation } from "../../hooks";
|
|
7
8
|
import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
|
|
8
9
|
import { Icon } from "../icons";
|
|
9
10
|
import { HSpacer, VSpacer } from "../spacer";
|
|
@@ -26,14 +27,13 @@ export const ListItemCheckbox = ({
|
|
|
26
27
|
disabled,
|
|
27
28
|
onValueChange
|
|
28
29
|
}) => {
|
|
29
|
-
var _IOScaleValues$basicB;
|
|
30
30
|
const [toggleValue, setToggleValue] = useState(selected ?? false);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
const {
|
|
32
|
+
onPressIn,
|
|
33
|
+
onPressOut,
|
|
34
|
+
scaleAnimatedStyle,
|
|
35
|
+
backgroundAnimatedStyle
|
|
36
|
+
} = useListItemAnimation();
|
|
37
37
|
|
|
38
38
|
// Theme
|
|
39
39
|
const theme = useIOTheme();
|
|
@@ -41,34 +41,6 @@ export const ListItemCheckbox = ({
|
|
|
41
41
|
// Accessibility
|
|
42
42
|
// Comma = Small pause when announcing content
|
|
43
43
|
const fallbackAccessibilityLabel = description ? `${value}, ${description}` : value;
|
|
44
|
-
const mapBackgroundStates = {
|
|
45
|
-
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
|
|
46
|
-
pressed: IOColors[theme["listItem-pressed"]]
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
// Interpolate animation values from `isPressed` values
|
|
50
|
-
const animatedScaleStyle = useAnimatedStyle(() => {
|
|
51
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
52
|
-
return {
|
|
53
|
-
transform: [{
|
|
54
|
-
scale
|
|
55
|
-
}]
|
|
56
|
-
};
|
|
57
|
-
});
|
|
58
|
-
const handlePressIn = useCallback(() => {
|
|
59
|
-
// eslint-disable-next-line functional/immutable-data
|
|
60
|
-
isPressed.value = 1;
|
|
61
|
-
}, [isPressed]);
|
|
62
|
-
const handlePressOut = useCallback(() => {
|
|
63
|
-
// eslint-disable-next-line functional/immutable-data
|
|
64
|
-
isPressed.value = 0;
|
|
65
|
-
}, [isPressed]);
|
|
66
|
-
const animatedBackgroundStyle = useAnimatedStyle(() => {
|
|
67
|
-
const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
|
|
68
|
-
return {
|
|
69
|
-
backgroundColor
|
|
70
|
-
};
|
|
71
|
-
});
|
|
72
44
|
const toggleCheckbox = () => {
|
|
73
45
|
ReactNativeHapticFeedback.trigger("impactLight");
|
|
74
46
|
setToggleValue(!toggleValue);
|
|
@@ -78,9 +50,9 @@ export const ListItemCheckbox = ({
|
|
|
78
50
|
};
|
|
79
51
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
80
52
|
onPress: toggleCheckbox,
|
|
81
|
-
onPressIn:
|
|
82
|
-
onPressOut:
|
|
83
|
-
onTouchEnd:
|
|
53
|
+
onPressIn: onPressIn,
|
|
54
|
+
onPressOut: onPressOut,
|
|
55
|
+
onTouchEnd: onPressOut,
|
|
84
56
|
testID: "ListItemCheckbox",
|
|
85
57
|
accessible: true,
|
|
86
58
|
accessibilityLabel: accessibilityLabel || fallbackAccessibilityLabel,
|
|
@@ -92,7 +64,7 @@ export const ListItemCheckbox = ({
|
|
|
92
64
|
},
|
|
93
65
|
disabled: disabled
|
|
94
66
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
95
|
-
style: [IOSelectionListItemStyles.listItem,
|
|
67
|
+
style: [IOSelectionListItemStyles.listItem, backgroundAnimatedStyle, {
|
|
96
68
|
opacity: disabled ? DISABLED_OPACITY : 1
|
|
97
69
|
}]
|
|
98
70
|
// This is required to avoid opacity
|
|
@@ -100,7 +72,7 @@ export const ListItemCheckbox = ({
|
|
|
100
72
|
,
|
|
101
73
|
needsOffscreenAlphaCompositing: true
|
|
102
74
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
103
|
-
style:
|
|
75
|
+
style: scaleAnimatedStyle
|
|
104
76
|
}, /*#__PURE__*/React.createElement(View, {
|
|
105
77
|
style: IOSelectionListItemStyles.listItemInner
|
|
106
78
|
}, /*#__PURE__*/React.createElement(View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","View","ReactNativeHapticFeedback","Animated","IOSelectionListItemStyles","IOSelectionListItemVisualParams","IOStyles","useIOTheme","useListItemAnimation","AnimatedCheckbox","Icon","HSpacer","VSpacer","H6","BodySmall","DISABLED_OPACITY","ListItemCheckbox","value","description","icon","selected","accessibilityLabel","accessibilityHint","disabled","onValueChange","toggleValue","setToggleValue","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","theme","fallbackAccessibilityLabel","toggleCheckbox","trigger","undefined","createElement","onPress","onTouchEnd","testID","accessible","accessibilityRole","accessibilityState","checked","style","listItem","opacity","needsOffscreenAlphaCompositing","listItemInner","row","flexShrink","marginRight","iconMargin","name","color","size","iconSize","pointerEvents","accessibilityElementsHidden","importantForAccessibility","descriptionMargin","weight"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemCheckbox.tsx"],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ export const ListItemHeader = ({
|
|
|
25
25
|
role: "heading",
|
|
26
26
|
color: theme["textBody-tertiary"]
|
|
27
27
|
}, label)), [label, theme, endElement]);
|
|
28
|
-
const
|
|
28
|
+
const listItemAction = useCallback(() => {
|
|
29
29
|
if (endElement) {
|
|
30
30
|
const {
|
|
31
31
|
type,
|
|
@@ -72,7 +72,7 @@ export const ListItemHeader = ({
|
|
|
72
72
|
style: {
|
|
73
73
|
marginLeft: IOListItemVisualParams.actionMargin
|
|
74
74
|
}
|
|
75
|
-
},
|
|
75
|
+
}, listItemAction())));
|
|
76
76
|
};
|
|
77
77
|
export default ListItemHeader;
|
|
78
78
|
//# sourceMappingURL=ListItemHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","View","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","Badge","ButtonLink","IconButton","Icon","H6","iconMargin","ListItemHeader","label","iconName","iconColor","endElement","accessibilityLabel","testID","theme","listItemAccessibilityLabel","itemInfoTextComponent","createElement","accessible","undefined","importantForAccessibility","type","accessibilityElementsHidden","role","color","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","View","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","Badge","ButtonLink","IconButton","Icon","H6","iconMargin","ListItemHeader","label","iconName","iconColor","endElement","accessibilityLabel","testID","theme","listItemAccessibilityLabel","itemInfoTextComponent","createElement","accessible","undefined","importantForAccessibility","type","accessibilityElementsHidden","role","color","listItemAction","componentProps","buttonLinkAccessibilityLabel","_extends","iconButtonAccessibilityLabel","Fragment","style","listItem","listItemInner","marginRight","name","size","iconSize","flex","marginLeft","actionMargin"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemHeader.tsx"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
2
|
import { Pressable, View } from "react-native";
|
|
3
|
-
import Animated
|
|
4
|
-
import {
|
|
3
|
+
import Animated from "react-native-reanimated";
|
|
4
|
+
import { IOListItemStyles, IOListItemVisualParams, IOStyles, useIOTheme } from "../../core";
|
|
5
|
+
import { useListItemAnimation } from "../../hooks";
|
|
5
6
|
import { Icon } from "../icons";
|
|
6
7
|
import { BodySmall, H6 } from "../typography";
|
|
7
8
|
export const ListItemInfoCopy = ({
|
|
@@ -14,15 +15,16 @@ export const ListItemInfoCopy = ({
|
|
|
14
15
|
accessibilityHint,
|
|
15
16
|
testID
|
|
16
17
|
}) => {
|
|
17
|
-
var _IOScaleValues$basicB;
|
|
18
|
-
const isPressed = useSharedValue(0);
|
|
19
|
-
const {
|
|
20
|
-
isExperimental
|
|
21
|
-
} = useIOExperimentalDesign();
|
|
22
18
|
const theme = useIOTheme();
|
|
19
|
+
const {
|
|
20
|
+
onPressIn,
|
|
21
|
+
onPressOut,
|
|
22
|
+
scaleAnimatedStyle,
|
|
23
|
+
backgroundAnimatedStyle
|
|
24
|
+
} = useListItemAnimation();
|
|
23
25
|
const componentValueToAccessibility = useMemo(() => typeof value === "string" ? value : "", [value]);
|
|
24
26
|
const listItemAccessibilityLabel = useMemo(() => accessibilityLabel ? accessibilityLabel : `${label}; ${componentValueToAccessibility}`, [label, componentValueToAccessibility, accessibilityLabel]);
|
|
25
|
-
const foregroundColor =
|
|
27
|
+
const foregroundColor = theme["interactiveElem-default"];
|
|
26
28
|
const listItemInfoCopyContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BodySmall, {
|
|
27
29
|
weight: "Regular",
|
|
28
30
|
color: theme["textBody-tertiary"]
|
|
@@ -32,42 +34,11 @@ export const ListItemInfoCopy = ({
|
|
|
32
34
|
}, value) : {
|
|
33
35
|
value
|
|
34
36
|
});
|
|
35
|
-
const mapBackgroundStates = {
|
|
36
|
-
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
|
|
37
|
-
pressed: IOColors[theme["listItem-pressed"]]
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// Scaling transformation applied when the button is pressed
|
|
41
|
-
const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
|
|
42
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
43
|
-
|
|
44
|
-
// Interpolate animation values from `isPressed` values
|
|
45
|
-
const animatedScaleStyle = useAnimatedStyle(() => {
|
|
46
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
47
|
-
return {
|
|
48
|
-
transform: [{
|
|
49
|
-
scale
|
|
50
|
-
}]
|
|
51
|
-
};
|
|
52
|
-
});
|
|
53
|
-
const animatedBackgroundStyle = useAnimatedStyle(() => {
|
|
54
|
-
const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
|
|
55
|
-
return {
|
|
56
|
-
backgroundColor
|
|
57
|
-
};
|
|
58
|
-
});
|
|
59
|
-
const handlePressIn = useCallback(() => {
|
|
60
|
-
// eslint-disable-next-line functional/immutable-data
|
|
61
|
-
isPressed.value = 1;
|
|
62
|
-
}, [isPressed]);
|
|
63
|
-
const handlePressOut = useCallback(() => {
|
|
64
|
-
// eslint-disable-next-line functional/immutable-data
|
|
65
|
-
isPressed.value = 0;
|
|
66
|
-
}, [isPressed]);
|
|
67
37
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
68
38
|
onPress: onPress,
|
|
69
|
-
onPressIn:
|
|
70
|
-
onPressOut:
|
|
39
|
+
onPressIn: onPressIn,
|
|
40
|
+
onPressOut: onPressOut,
|
|
41
|
+
onTouchEnd: onPressOut,
|
|
71
42
|
accessible: true,
|
|
72
43
|
accessibilityLabel: listItemAccessibilityLabel,
|
|
73
44
|
accessibilityHint: accessibilityHint,
|
|
@@ -76,9 +47,9 @@ export const ListItemInfoCopy = ({
|
|
|
76
47
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
77
48
|
importantForAccessibility: "no-hide-descendants",
|
|
78
49
|
accessibilityElementsHidden: true,
|
|
79
|
-
style: [IOListItemStyles.listItem,
|
|
50
|
+
style: [IOListItemStyles.listItem, backgroundAnimatedStyle]
|
|
80
51
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
81
|
-
style: [IOListItemStyles.listItemInner,
|
|
52
|
+
style: [IOListItemStyles.listItemInner, scaleAnimatedStyle]
|
|
82
53
|
}, icon && /*#__PURE__*/React.createElement(View, {
|
|
83
54
|
style: {
|
|
84
55
|
marginRight: IOListItemVisualParams.iconMargin
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useMemo","Pressable","View","Animated","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","useListItemAnimation","Icon","BodySmall","H6","ListItemInfoCopy","label","value","numberOfLines","onPress","icon","accessibilityLabel","accessibilityHint","testID","theme","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","componentValueToAccessibility","listItemAccessibilityLabel","foregroundColor","listItemInfoCopyContent","createElement","Fragment","weight","color","onTouchEnd","accessible","accessibilityRole","importantForAccessibility","accessibilityElementsHidden","style","listItem","listItemInner","marginRight","iconMargin","name","size","iconSize","flex","marginLeft","chevronSize"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemInfoCopy.tsx"],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
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); }
|
|
2
|
-
import React
|
|
2
|
+
import React from "react";
|
|
3
3
|
import { Image, Pressable, StyleSheet, View } from "react-native";
|
|
4
|
-
import Animated
|
|
5
|
-
import {
|
|
4
|
+
import Animated from "react-native-reanimated";
|
|
5
|
+
import { IOListItemStyles, IOListItemVisualParams, IOSelectionListItemVisualParams, IOStyles, useIOTheme } from "../../core";
|
|
6
|
+
import { useListItemAnimation } from "../../hooks";
|
|
6
7
|
import { Avatar } from "../avatar";
|
|
7
8
|
import { Badge } from "../badge";
|
|
8
9
|
import { Icon } from "../icons";
|
|
@@ -31,11 +32,12 @@ export const ListItemNav = ({
|
|
|
31
32
|
loading,
|
|
32
33
|
numberOfLines
|
|
33
34
|
}) => {
|
|
34
|
-
var _IOScaleValues$basicB;
|
|
35
|
-
const isPressed = useSharedValue(0);
|
|
36
35
|
const {
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
onPressIn,
|
|
37
|
+
onPressOut,
|
|
38
|
+
scaleAnimatedStyle,
|
|
39
|
+
backgroundAnimatedStyle
|
|
40
|
+
} = useListItemAnimation();
|
|
39
41
|
const theme = useIOTheme();
|
|
40
42
|
const withMargin = GraphicalAsset => /*#__PURE__*/React.createElement(View, {
|
|
41
43
|
style: {
|
|
@@ -70,49 +72,17 @@ export const ListItemNav = ({
|
|
|
70
72
|
weight: "Regular",
|
|
71
73
|
color: theme["textBody-tertiary"]
|
|
72
74
|
}, description) : description));
|
|
73
|
-
const
|
|
74
|
-
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
|
|
75
|
-
pressed: IOColors[theme["listItem-pressed"]]
|
|
76
|
-
};
|
|
77
|
-
const navIconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
|
|
78
|
-
|
|
79
|
-
// Scaling transformation applied when the button is pressed
|
|
80
|
-
const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
|
|
81
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
82
|
-
|
|
83
|
-
// Interpolate animation values from `isPressed` values
|
|
84
|
-
const animatedScaleStyle = useAnimatedStyle(() => {
|
|
85
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
86
|
-
return {
|
|
87
|
-
transform: [{
|
|
88
|
-
scale
|
|
89
|
-
}]
|
|
90
|
-
};
|
|
91
|
-
});
|
|
92
|
-
const animatedBackgroundStyle = useAnimatedStyle(() => {
|
|
93
|
-
const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
|
|
94
|
-
return {
|
|
95
|
-
backgroundColor
|
|
96
|
-
};
|
|
97
|
-
});
|
|
98
|
-
const handlePressIn = useCallback(() => {
|
|
99
|
-
// eslint-disable-next-line functional/immutable-data
|
|
100
|
-
isPressed.value = 1;
|
|
101
|
-
}, [isPressed]);
|
|
102
|
-
const handlePressOut = useCallback(() => {
|
|
103
|
-
// eslint-disable-next-line functional/immutable-data
|
|
104
|
-
isPressed.value = 0;
|
|
105
|
-
}, [isPressed]);
|
|
75
|
+
const interactiveColor = theme["interactiveElem-default"];
|
|
106
76
|
const handleOnPress = event => {
|
|
107
77
|
if (!loading) {
|
|
108
78
|
onPress(event);
|
|
109
79
|
}
|
|
110
80
|
};
|
|
111
|
-
const primaryColor = isExperimental ? "blueIO-500" : "blue";
|
|
112
81
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
113
82
|
onPress: handleOnPress,
|
|
114
|
-
onPressIn:
|
|
115
|
-
onPressOut:
|
|
83
|
+
onPressIn: onPressIn,
|
|
84
|
+
onPressOut: onPressOut,
|
|
85
|
+
onTouchEnd: onPressOut,
|
|
116
86
|
accessible: true,
|
|
117
87
|
accessibilityState: {
|
|
118
88
|
busy: loading
|
|
@@ -122,9 +92,9 @@ export const ListItemNav = ({
|
|
|
122
92
|
accessibilityRole: "button",
|
|
123
93
|
testID: testID
|
|
124
94
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
125
|
-
style: [IOListItemStyles.listItem,
|
|
95
|
+
style: [IOListItemStyles.listItem, backgroundAnimatedStyle]
|
|
126
96
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
127
|
-
style: [IOListItemStyles.listItemInner,
|
|
97
|
+
style: [IOListItemStyles.listItemInner, scaleAnimatedStyle]
|
|
128
98
|
}, icon && withMargin( /*#__PURE__*/React.createElement(Icon, {
|
|
129
99
|
name: icon,
|
|
130
100
|
color: iconColor,
|
|
@@ -140,10 +110,10 @@ export const ListItemNav = ({
|
|
|
140
110
|
}, avatar))), /*#__PURE__*/React.createElement(View, {
|
|
141
111
|
style: IOStyles.flex
|
|
142
112
|
}, listItemNavContent), loading && /*#__PURE__*/React.createElement(LoadingSpinner, {
|
|
143
|
-
color:
|
|
113
|
+
color: interactiveColor
|
|
144
114
|
}), !loading && !hideChevron && /*#__PURE__*/React.createElement(Icon, {
|
|
145
115
|
name: "chevronRightListItem",
|
|
146
|
-
color:
|
|
116
|
+
color: interactiveColor,
|
|
147
117
|
size: IOListItemVisualParams.chevronSize
|
|
148
118
|
}))));
|
|
149
119
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","Image","Pressable","StyleSheet","View","Animated","IOListItemStyles","IOListItemVisualParams","IOSelectionListItemVisualParams","IOStyles","useIOTheme","useListItemAnimation","Avatar","Badge","Icon","LoadingSpinner","HSpacer","VSpacer","Caption","H6","BodySmall","styles","create","paymentLogoSize","width","iconSize","height","ListItemNav","value","description","onPress","icon","iconColor","avatarProps","avatar","paymentLogoUri","accessibilityLabel","accessibilityHint","testID","hideChevron","topElement","loading","numberOfLines","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","theme","withMargin","GraphicalAsset","createElement","style","marginRight","iconMargin","listItemNavContent","Fragment","badgeProps","alignSelf","size","dateValue","flexDirection","name","color","weight","interactiveColor","handleOnPress","event","onTouchEnd","accessible","accessibilityState","busy","accessibilityRole","listItem","listItemInner","accessibilityIgnoresInvertColors","source","uri","_extends","flex","chevronSize"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNav.tsx"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { Pressable, View } from "react-native";
|
|
3
|
-
import Animated
|
|
4
|
-
import {
|
|
3
|
+
import Animated from "react-native-reanimated";
|
|
4
|
+
import { IOListItemStyles, IOListItemVisualParams, IOStyles, useIOTheme } from "../../core";
|
|
5
|
+
import { useListItemAnimation } from "../../hooks";
|
|
5
6
|
import { Icon } from "../icons";
|
|
6
7
|
import { H6, BodySmall } from "../typography";
|
|
7
8
|
export const ListItemNavAlert = ({
|
|
@@ -13,15 +14,16 @@ export const ListItemNavAlert = ({
|
|
|
13
14
|
accessibilityHint,
|
|
14
15
|
testID
|
|
15
16
|
}) => {
|
|
16
|
-
var _IOScaleValues$basicB;
|
|
17
|
-
const isPressed = useSharedValue(0);
|
|
18
|
-
const {
|
|
19
|
-
isExperimental
|
|
20
|
-
} = useIOExperimentalDesign();
|
|
21
|
-
const componentValueToAccessibility = useMemo(() => typeof value === "string" ? value : "", [value]);
|
|
22
|
-
const componentDescriptionToAccessibility = useMemo(() => typeof description === "string" ? description : "", [description]);
|
|
23
|
-
const listItemAccessibilityLabel = useMemo(() => accessibilityLabel ? accessibilityLabel : `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`, [componentDescriptionToAccessibility, componentValueToAccessibility, accessibilityLabel]);
|
|
24
17
|
const theme = useIOTheme();
|
|
18
|
+
const {
|
|
19
|
+
onPressIn,
|
|
20
|
+
onPressOut,
|
|
21
|
+
scaleAnimatedStyle,
|
|
22
|
+
backgroundAnimatedStyle
|
|
23
|
+
} = useListItemAnimation();
|
|
24
|
+
const componentValueToAccessibility = typeof value === "string" ? value : "";
|
|
25
|
+
const componentDescriptionToAccessibility = typeof description === "string" ? description : "";
|
|
26
|
+
const listItemAccessibilityLabel = accessibilityLabel ?? `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`;
|
|
25
27
|
|
|
26
28
|
// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
|
|
27
29
|
const listItemNavAlertContent = /*#__PURE__*/React.createElement(React.Fragment, null, typeof value === "string" ? /*#__PURE__*/React.createElement(H6, {
|
|
@@ -30,54 +32,22 @@ export const ListItemNavAlert = ({
|
|
|
30
32
|
weight: "Semibold",
|
|
31
33
|
color: theme.errorText
|
|
32
34
|
}, description) : description));
|
|
33
|
-
const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
|
|
34
|
-
const mapBackgroundStates = {
|
|
35
|
-
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
|
|
36
|
-
pressed: IOColors[theme["listItem-pressed"]]
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// Scaling transformation applied when the button is pressed
|
|
40
|
-
const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
|
|
41
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
42
|
-
|
|
43
|
-
// Interpolate animation values from `isPressed` values
|
|
44
|
-
const animatedScaleStyle = useAnimatedStyle(() => {
|
|
45
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
46
|
-
return {
|
|
47
|
-
transform: [{
|
|
48
|
-
scale
|
|
49
|
-
}]
|
|
50
|
-
};
|
|
51
|
-
});
|
|
52
|
-
const animatedBackgroundStyle = useAnimatedStyle(() => {
|
|
53
|
-
const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
|
|
54
|
-
return {
|
|
55
|
-
backgroundColor
|
|
56
|
-
};
|
|
57
|
-
});
|
|
58
|
-
const handlePressIn = useCallback(() => {
|
|
59
|
-
// eslint-disable-next-line functional/immutable-data
|
|
60
|
-
isPressed.value = 1;
|
|
61
|
-
}, [isPressed]);
|
|
62
|
-
const handlePressOut = useCallback(() => {
|
|
63
|
-
// eslint-disable-next-line functional/immutable-data
|
|
64
|
-
isPressed.value = 0;
|
|
65
|
-
}, [isPressed]);
|
|
66
35
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
67
36
|
onPress: onPress,
|
|
68
|
-
onPressIn:
|
|
69
|
-
onPressOut:
|
|
37
|
+
onPressIn: onPressIn,
|
|
38
|
+
onPressOut: onPressOut,
|
|
39
|
+
onTouchEnd: onPressOut,
|
|
70
40
|
accessible: true,
|
|
71
41
|
accessibilityLabel: listItemAccessibilityLabel,
|
|
72
42
|
accessibilityHint: accessibilityHint,
|
|
73
43
|
accessibilityRole: "button",
|
|
74
44
|
testID: testID
|
|
75
45
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
76
|
-
style: [IOListItemStyles.listItem,
|
|
46
|
+
style: [IOListItemStyles.listItem, backgroundAnimatedStyle],
|
|
77
47
|
importantForAccessibility: "no-hide-descendants",
|
|
78
48
|
accessibilityElementsHidden: true
|
|
79
49
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
80
|
-
style: [IOListItemStyles.listItemInner,
|
|
50
|
+
style: [IOListItemStyles.listItemInner, scaleAnimatedStyle]
|
|
81
51
|
}, !withoutIcon && /*#__PURE__*/React.createElement(View, {
|
|
82
52
|
style: {
|
|
83
53
|
marginRight: IOListItemVisualParams.iconMargin
|
|
@@ -94,7 +64,7 @@ export const ListItemNavAlert = ({
|
|
|
94
64
|
}
|
|
95
65
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
96
66
|
name: "chevronRightListItem",
|
|
97
|
-
color:
|
|
67
|
+
color: theme["interactiveElem-default"],
|
|
98
68
|
size: IOListItemVisualParams.chevronSize
|
|
99
69
|
})))));
|
|
100
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","Pressable","View","Animated","IOListItemStyles","IOListItemVisualParams","IOStyles","useIOTheme","useListItemAnimation","Icon","H6","BodySmall","ListItemNavAlert","value","description","withoutIcon","onPress","accessibilityLabel","accessibilityHint","testID","theme","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","componentValueToAccessibility","componentDescriptionToAccessibility","listItemAccessibilityLabel","listItemNavAlertContent","createElement","Fragment","color","weight","errorText","onTouchEnd","accessible","accessibilityRole","style","listItem","importantForAccessibility","accessibilityElementsHidden","listItemInner","marginRight","iconMargin","name","errorIcon","size","iconSize","flex","marginLeft","chevronSize"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNavAlert.tsx"],"mappings":"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"}
|