@pagopa/io-app-design-system 4.2.1 → 4.3.1
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/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 +14 -40
- 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 +2 -2
- package/lib/commonjs/components/listitems/ListItemRadioWithAmount.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemTransaction.js +2 -2
- 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 +13 -7
- 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/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/otpInput/OTPInput.js +2 -1
- package/lib/commonjs/components/otpInput/OTPInput.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/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/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/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 +15 -42
- 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 +1 -1
- package/lib/module/components/listitems/ListItemRadioWithAmount.js.map +1 -1
- package/lib/module/components/listitems/ListItemTransaction.js +1 -1
- 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 +13 -7
- 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/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/otpInput/OTPInput.js +2 -1
- package/lib/module/components/otpInput/OTPInput.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/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/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/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/otpInput/OTPInput.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/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/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 +10 -66
- 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 +2 -1
- package/src/components/listitems/ListItemTransaction.tsx +1 -1
- package/src/components/listitems/{PressableListItemsBase.tsx → PressableListItemBase.tsx} +7 -6
- package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +13 -7
- package/src/components/listitems/__test__/listitem.test.tsx +1 -1
- package/src/components/listitems/index.tsx +1 -1
- 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/otpInput/OTPInput.tsx +1 -0
- package/src/components/tabs/TabItem.tsx +15 -29
- 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/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,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { useCallback } from "react";
|
|
3
2
|
import { Pressable } from "react-native";
|
|
4
|
-
import Animated, {
|
|
5
|
-
import { IOButtonStyles, IOIconButtonStyles,
|
|
3
|
+
import Animated, { interpolateColor, useAnimatedStyle, useReducedMotion } from "react-native-reanimated";
|
|
4
|
+
import { IOButtonStyles, IOIconButtonStyles, useIOExperimentalDesign } from "../../core";
|
|
6
5
|
import { IOColors, hexToRgba } from "../../core/IOColors";
|
|
6
|
+
import { useScaleAnimation } from "../../hooks";
|
|
7
7
|
import { AnimatedIcon } from "../icons";
|
|
8
8
|
const mapColorStates = {
|
|
9
9
|
// Primary button
|
|
@@ -66,38 +66,21 @@ export const IconButtonSolid = ({
|
|
|
66
66
|
accessibilityHint,
|
|
67
67
|
testID
|
|
68
68
|
}) => {
|
|
69
|
-
var
|
|
70
|
-
const isPressed = useSharedValue(0);
|
|
69
|
+
var _colorMap$color, _colorMap$color2, _colorMap$color3, _colorMap$color4;
|
|
71
70
|
const {
|
|
72
71
|
isExperimental
|
|
73
72
|
} = useIOExperimentalDesign();
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
73
|
+
const {
|
|
74
|
+
progress,
|
|
75
|
+
onPressIn,
|
|
76
|
+
onPressOut,
|
|
77
|
+
scaleAnimatedStyle
|
|
78
|
+
} = useScaleAnimation("exaggerated");
|
|
79
|
+
const reducedMotion = useReducedMotion();
|
|
79
80
|
const colorMap = React.useMemo(() => isExperimental ? mapColorStates : mapLegacyColorStates, [isExperimental]);
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
// Scale down button slightly when pressed
|
|
85
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
86
|
-
return {
|
|
87
|
-
backgroundColor,
|
|
88
|
-
transform: [{
|
|
89
|
-
scale
|
|
90
|
-
}]
|
|
91
|
-
};
|
|
92
|
-
});
|
|
93
|
-
const handlePressIn = useCallback(() => {
|
|
94
|
-
// eslint-disable-next-line functional/immutable-data
|
|
95
|
-
isPressed.value = 1;
|
|
96
|
-
}, [isPressed]);
|
|
97
|
-
const handlePressOut = useCallback(() => {
|
|
98
|
-
// eslint-disable-next-line functional/immutable-data
|
|
99
|
-
isPressed.value = 0;
|
|
100
|
-
}, [isPressed]);
|
|
81
|
+
const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
|
|
82
|
+
backgroundColor: interpolateColor(progress.value, [0, 1], [colorMap[color].background.default, colorMap[color].background.pressed])
|
|
83
|
+
}));
|
|
101
84
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
102
85
|
accessibilityLabel: accessibilityLabel,
|
|
103
86
|
accessibilityHint: accessibilityHint,
|
|
@@ -107,13 +90,13 @@ export const IconButtonSolid = ({
|
|
|
107
90
|
},
|
|
108
91
|
testID: testID,
|
|
109
92
|
onPress: onPress,
|
|
110
|
-
onPressIn:
|
|
111
|
-
onPressOut:
|
|
93
|
+
onPressIn: onPressIn,
|
|
94
|
+
onPressOut: onPressOut,
|
|
112
95
|
accessible: true,
|
|
113
96
|
disabled: disabled,
|
|
114
97
|
style: IOButtonStyles.dimensionsDefault
|
|
115
98
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
116
|
-
style: [IOIconButtonStyles.button, IOIconButtonStyles.buttonSizeLarge, !disabled &&
|
|
99
|
+
style: [IOIconButtonStyles.button, IOIconButtonStyles.buttonSizeLarge, !disabled && !reducedMotion && scaleAnimatedStyle, !disabled && backgroundColorAnimationStyle, disabled ? {
|
|
117
100
|
backgroundColor: (_colorMap$color = colorMap[color]) === null || _colorMap$color === void 0 || (_colorMap$color = _colorMap$color.background) === null || _colorMap$color === void 0 ? void 0 : _colorMap$color.disabled
|
|
118
101
|
} : {
|
|
119
102
|
backgroundColor: (_colorMap$color2 = colorMap[color]) === null || _colorMap$color2 === void 0 || (_colorMap$color2 = _colorMap$color2.background) === null || _colorMap$color2 === void 0 ? void 0 : _colorMap$color2.default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","Pressable","Animated","interpolateColor","useAnimatedStyle","useReducedMotion","IOButtonStyles","IOIconButtonStyles","useIOExperimentalDesign","IOColors","hexToRgba","useScaleAnimation","AnimatedIcon","mapColorStates","primary","background","default","pressed","disabled","icon","white","contrast","mapLegacyColorStates","blue","IconButtonSolid","color","onPress","accessibilityLabel","accessibilityHint","testID","_colorMap$color","_colorMap$color2","_colorMap$color3","_colorMap$color4","isExperimental","progress","onPressIn","onPressOut","scaleAnimatedStyle","reducedMotion","colorMap","useMemo","backgroundColorAnimationStyle","backgroundColor","value","createElement","accessibilityRole","accessibilityState","accessible","style","dimensionsDefault","View","button","buttonSizeLarge","name"],"sourceRoot":"../../../../src","sources":["components/buttons/IconButtonSolid.tsx"],"mappings":"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"}
|
|
@@ -59,6 +59,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
|
|
|
59
59
|
"textAlignVertical": "center",
|
|
60
60
|
},
|
|
61
61
|
false,
|
|
62
|
+
{
|
|
63
|
+
"columnGap": 8,
|
|
64
|
+
},
|
|
62
65
|
{},
|
|
63
66
|
{
|
|
64
67
|
"transform": [
|
|
@@ -166,14 +169,16 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
|
|
|
166
169
|
"borderColor": "#0B3EE3",
|
|
167
170
|
},
|
|
168
171
|
{
|
|
169
|
-
"backgroundColor": undefined,
|
|
170
|
-
"borderColor": undefined,
|
|
171
172
|
"transform": [
|
|
172
173
|
{
|
|
173
174
|
"scale": undefined,
|
|
174
175
|
},
|
|
175
176
|
],
|
|
176
177
|
},
|
|
178
|
+
{
|
|
179
|
+
"backgroundColor": undefined,
|
|
180
|
+
"borderColor": undefined,
|
|
181
|
+
},
|
|
177
182
|
]
|
|
178
183
|
}
|
|
179
184
|
>
|
|
@@ -276,17 +281,20 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
|
|
|
276
281
|
"backgroundColor": "#0B3EE3",
|
|
277
282
|
},
|
|
278
283
|
{
|
|
279
|
-
"backgroundColor": undefined,
|
|
280
284
|
"transform": [
|
|
281
285
|
{
|
|
282
286
|
"scale": undefined,
|
|
283
287
|
},
|
|
284
288
|
],
|
|
285
289
|
},
|
|
290
|
+
{
|
|
291
|
+
"backgroundColor": undefined,
|
|
292
|
+
},
|
|
286
293
|
]
|
|
287
294
|
}
|
|
288
295
|
>
|
|
289
296
|
<View
|
|
297
|
+
entering={[Function]}
|
|
290
298
|
style={
|
|
291
299
|
[
|
|
292
300
|
{
|
|
@@ -510,13 +518,15 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
|
|
|
510
518
|
"width": 48,
|
|
511
519
|
},
|
|
512
520
|
{
|
|
513
|
-
"backgroundColor": undefined,
|
|
514
521
|
"transform": [
|
|
515
522
|
{
|
|
516
523
|
"scale": undefined,
|
|
517
524
|
},
|
|
518
525
|
],
|
|
519
526
|
},
|
|
527
|
+
{
|
|
528
|
+
"backgroundColor": undefined,
|
|
529
|
+
},
|
|
520
530
|
]
|
|
521
531
|
}
|
|
522
532
|
>
|
|
@@ -642,13 +652,15 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
|
|
|
642
652
|
"width": 56,
|
|
643
653
|
},
|
|
644
654
|
{
|
|
645
|
-
"backgroundColor": undefined,
|
|
646
655
|
"transform": [
|
|
647
656
|
{
|
|
648
657
|
"scale": undefined,
|
|
649
658
|
},
|
|
650
659
|
],
|
|
651
660
|
},
|
|
661
|
+
{
|
|
662
|
+
"backgroundColor": undefined,
|
|
663
|
+
},
|
|
652
664
|
{
|
|
653
665
|
"backgroundColor": "#0B3EE3",
|
|
654
666
|
},
|
|
@@ -778,6 +790,9 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
|
|
|
778
790
|
"textAlignVertical": "center",
|
|
779
791
|
},
|
|
780
792
|
false,
|
|
793
|
+
{
|
|
794
|
+
"columnGap": 8,
|
|
795
|
+
},
|
|
781
796
|
{},
|
|
782
797
|
{
|
|
783
798
|
"transform": [
|
|
@@ -884,14 +899,16 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
|
|
|
884
899
|
"borderColor": "#0073E6",
|
|
885
900
|
},
|
|
886
901
|
{
|
|
887
|
-
"backgroundColor": undefined,
|
|
888
|
-
"borderColor": undefined,
|
|
889
902
|
"transform": [
|
|
890
903
|
{
|
|
891
904
|
"scale": undefined,
|
|
892
905
|
},
|
|
893
906
|
],
|
|
894
907
|
},
|
|
908
|
+
{
|
|
909
|
+
"backgroundColor": undefined,
|
|
910
|
+
"borderColor": undefined,
|
|
911
|
+
},
|
|
895
912
|
]
|
|
896
913
|
}
|
|
897
914
|
>
|
|
@@ -993,17 +1010,20 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
|
|
|
993
1010
|
"backgroundColor": "#0073E6",
|
|
994
1011
|
},
|
|
995
1012
|
{
|
|
996
|
-
"backgroundColor": undefined,
|
|
997
1013
|
"transform": [
|
|
998
1014
|
{
|
|
999
1015
|
"scale": undefined,
|
|
1000
1016
|
},
|
|
1001
1017
|
],
|
|
1002
1018
|
},
|
|
1019
|
+
{
|
|
1020
|
+
"backgroundColor": undefined,
|
|
1021
|
+
},
|
|
1003
1022
|
]
|
|
1004
1023
|
}
|
|
1005
1024
|
>
|
|
1006
1025
|
<View
|
|
1026
|
+
entering={[Function]}
|
|
1007
1027
|
style={
|
|
1008
1028
|
[
|
|
1009
1029
|
{
|
|
@@ -1227,13 +1247,15 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
|
|
|
1227
1247
|
"width": 48,
|
|
1228
1248
|
},
|
|
1229
1249
|
{
|
|
1230
|
-
"backgroundColor": undefined,
|
|
1231
1250
|
"transform": [
|
|
1232
1251
|
{
|
|
1233
1252
|
"scale": undefined,
|
|
1234
1253
|
},
|
|
1235
1254
|
],
|
|
1236
1255
|
},
|
|
1256
|
+
{
|
|
1257
|
+
"backgroundColor": undefined,
|
|
1258
|
+
},
|
|
1237
1259
|
]
|
|
1238
1260
|
}
|
|
1239
1261
|
>
|
|
@@ -1359,13 +1381,15 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
|
|
|
1359
1381
|
"width": 56,
|
|
1360
1382
|
},
|
|
1361
1383
|
{
|
|
1362
|
-
"backgroundColor": undefined,
|
|
1363
1384
|
"transform": [
|
|
1364
1385
|
{
|
|
1365
1386
|
"scale": undefined,
|
|
1366
1387
|
},
|
|
1367
1388
|
],
|
|
1368
1389
|
},
|
|
1390
|
+
{
|
|
1391
|
+
"backgroundColor": undefined,
|
|
1392
|
+
},
|
|
1369
1393
|
{
|
|
1370
1394
|
"backgroundColor": "#0073E6",
|
|
1371
1395
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/layout/index.tsx"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/layout/index.tsx"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,SAAS"}
|
|
@@ -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 { IOColors, IOListItemStyles, IOListItemVisualParams,
|
|
3
|
+
import Animated from "react-native-reanimated";
|
|
4
|
+
import { IOColors, IOListItemStyles, IOListItemVisualParams, useIOTheme } from "../../core";
|
|
5
|
+
import { useListItemAnimation } from "../../hooks";
|
|
5
6
|
import { AnimatedIcon } from "../icons";
|
|
6
7
|
import { ButtonText } from "../typography/ButtonText";
|
|
7
8
|
export const ListItemAction = ({
|
|
@@ -13,62 +14,34 @@ export const ListItemAction = ({
|
|
|
13
14
|
accessibilityHint,
|
|
14
15
|
testID
|
|
15
16
|
}) => {
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
const {
|
|
18
|
+
onPressIn,
|
|
19
|
+
onPressOut,
|
|
20
|
+
scaleAnimatedStyle,
|
|
21
|
+
backgroundAnimatedStyle
|
|
22
|
+
} = useListItemAnimation();
|
|
18
23
|
const theme = useIOTheme();
|
|
19
24
|
const listItemAccessibilityLabel = useMemo(() => accessibilityLabel ? accessibilityLabel : `${label}`, [label, accessibilityLabel]);
|
|
20
|
-
const mapBackgroundStates = {
|
|
21
|
-
default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
|
|
22
|
-
pressed: IOColors[theme["listItem-pressed"]]
|
|
23
|
-
};
|
|
24
25
|
const mapForegroundColor = {
|
|
25
26
|
primary: theme["interactiveElem-default"],
|
|
26
27
|
danger: theme.errorText
|
|
27
28
|
};
|
|
28
|
-
|
|
29
|
-
// Scaling transformation applied when the button is pressed
|
|
30
|
-
const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
|
|
31
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
32
|
-
|
|
33
|
-
// Interpolate animation values from `isPressed` values
|
|
34
|
-
const animatedScaleStyle = useAnimatedStyle(() => {
|
|
35
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
36
|
-
return {
|
|
37
|
-
transform: [{
|
|
38
|
-
scale
|
|
39
|
-
}]
|
|
40
|
-
};
|
|
41
|
-
});
|
|
42
|
-
const animatedBackgroundStyle = useAnimatedStyle(() => {
|
|
43
|
-
const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
|
|
44
|
-
return {
|
|
45
|
-
backgroundColor
|
|
46
|
-
};
|
|
47
|
-
});
|
|
48
|
-
const handlePressIn = useCallback(() => {
|
|
49
|
-
// eslint-disable-next-line functional/immutable-data
|
|
50
|
-
isPressed.value = 1;
|
|
51
|
-
}, [isPressed]);
|
|
52
|
-
const handlePressOut = useCallback(() => {
|
|
53
|
-
// eslint-disable-next-line functional/immutable-data
|
|
54
|
-
isPressed.value = 0;
|
|
55
|
-
}, [isPressed]);
|
|
56
29
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
57
30
|
onPress: onPress,
|
|
58
|
-
onPressIn:
|
|
59
|
-
onPressOut:
|
|
60
|
-
onTouchEnd:
|
|
31
|
+
onPressIn: onPressIn,
|
|
32
|
+
onPressOut: onPressOut,
|
|
33
|
+
onTouchEnd: onPressOut,
|
|
61
34
|
accessible: true,
|
|
62
35
|
accessibilityLabel: listItemAccessibilityLabel,
|
|
63
36
|
accessibilityHint: accessibilityHint,
|
|
64
37
|
accessibilityRole: "button",
|
|
65
38
|
testID: testID
|
|
66
39
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
67
|
-
style: [IOListItemStyles.listItem,
|
|
40
|
+
style: [IOListItemStyles.listItem, backgroundAnimatedStyle],
|
|
68
41
|
importantForAccessibility: "no-hide-descendants",
|
|
69
42
|
accessibilityElementsHidden: true
|
|
70
43
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
71
|
-
style: [IOListItemStyles.listItemInner,
|
|
44
|
+
style: [IOListItemStyles.listItemInner, scaleAnimatedStyle]
|
|
72
45
|
}, icon && /*#__PURE__*/React.createElement(View, {
|
|
73
46
|
style: {
|
|
74
47
|
marginRight: IOListItemVisualParams.iconMargin
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useMemo","Pressable","View","Animated","IOColors","IOListItemStyles","IOListItemVisualParams","useIOTheme","useListItemAnimation","AnimatedIcon","ButtonText","ListItemAction","variant","label","onPress","icon","accessibilityLabel","accessibilityHint","testID","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","theme","listItemAccessibilityLabel","mapForegroundColor","primary","danger","errorText","createElement","onTouchEnd","accessible","accessibilityRole","style","listItem","importantForAccessibility","accessibilityElementsHidden","listItemInner","marginRight","iconMargin","name","color","size","iconSize","flexGrow","flexShrink"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemAction.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAoBC,OAAO,QAAQ,OAAO;AACtD,SAAgCC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AACrE,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SACEC,QAAQ,EACRC,gBAAgB,EAChBC,sBAAsB,EACtBC,UAAU,QACL,YAAY;AACnB,SAASC,oBAAoB,QAAQ,aAAa;AAElD,SAASC,YAAY,QAAiB,UAAU;AAChD,SAASC,UAAU,QAAQ,0BAA0B;AAarD,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,OAAO;EACPC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACc,CAAC,KAAK;EACpB,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,kBAAkB;IAAEC;EAAwB,CAAC,GAC1Ed,oBAAoB,CAAC,CAAC;EAExB,MAAMe,KAAK,GAAGhB,UAAU,CAAC,CAAC;EAE1B,MAAMiB,0BAA0B,GAAGxB,OAAO,CACxC,MAAOgB,kBAAkB,GAAGA,kBAAkB,GAAI,GAAEH,KAAM,EAAE,EAC5D,CAACA,KAAK,EAAEG,kBAAkB,CAC5B,CAAC;EAED,MAAMS,kBAGL,GAAG;IACFC,OAAO,EAAEH,KAAK,CAAC,yBAAyB,CAAC;IACzCI,MAAM,EAAEJ,KAAK,CAACK;EAChB,CAAC;EAED,oBACE7B,KAAA,CAAA8B,aAAA,CAAC5B,SAAS;IACRa,OAAO,EAAEA,OAAQ;IACjBK,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBU,UAAU,EAAEV,UAAW;IACvBW,UAAU,EAAE,IAAK;IACjBf,kBAAkB,EAAEQ,0BAA2B;IAC/CP,iBAAiB,EAAEA,iBAAkB;IACrCe,iBAAiB,EAAC,QAAQ;IAC1Bd,MAAM,EAAEA;EAAO,gBAEfnB,KAAA,CAAA8B,aAAA,CAAC1B,QAAQ,CAACD,IAAI;IACZ+B,KAAK,EAAE,CAAC5B,gBAAgB,CAAC6B,QAAQ,EAAEZ,uBAAuB,CAAE;IAC5Da,yBAAyB,EAAC,qBAAqB;IAC/CC,2BAA2B;EAAA,gBAE3BrC,KAAA,CAAA8B,aAAA,CAAC1B,QAAQ,CAACD,IAAI;IACZ+B,KAAK,EAAE,CAAC5B,gBAAgB,CAACgC,aAAa,EAAEhB,kBAAkB;EAAE,GAE3DN,IAAI,iBACHhB,KAAA,CAAA8B,aAAA,CAAC3B,IAAI;IAAC+B,KAAK,EAAE;MAAEK,WAAW,EAAEhC,sBAAsB,CAACiC;IAAW;EAAE,gBAC9DxC,KAAA,CAAA8B,aAAA,CAACpB,YAAY;IACX+B,IAAI,EAAEzB,IAAK;IACX0B,KAAK,EAAErC,QAAQ,CAACqB,kBAAkB,CAACb,OAAO,CAAC,CAAE;IAC7C8B,IAAI,EAAEpC,sBAAsB,CAACqC;EAAS,CACvC,CACG,CACP,eACD5C,KAAA,CAAA8B,aAAA,CAAC3B,IAAI;IAAC+B,KAAK,EAAE;MAAEW,QAAQ,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAE;EAAE,gBAC1C9C,KAAA,CAAA8B,aAAA,CAACnB,UAAU;IAAC+B,KAAK,EAAEhB,kBAAkB,CAACb,OAAO;EAAE,GAAEC,KAAkB,CAC/D,CACO,CACF,CACN,CAAC;AAEhB,CAAC;AAED,eAAeF,cAAc"}
|
|
@@ -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":";AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnE,SAASC,IAAI,QAAQ,cAAc;AACnC,SACEC,gBAAgB,EAChBC,sBAAsB,EAEtBC,QAAQ,EACRC,UAAU,QACL,YAAY;AAEnB,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,UAAU,EAAEC,UAAU,QAAQ,YAAY;AACnD,SAAkBC,IAAI,QAAQ,UAAU;AACxC,SAASC,EAAE,QAAQ,eAAe;AAsClC,MAAMC,UAA0B,GAAG,CAAC;AAEpC,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,KAAK;EACLC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,kBAAkB;EAClBC;AACc,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGd,UAAU,CAAC,CAAC;EAE1B,MAAMe,0BAA0B,GAAGpB,OAAO,CACxC,MAAOiB,kBAAkB,GAAGA,kBAAkB,GAAI,GAAEJ,KAAM,EAAE,EAC5D,CAACA,KAAK,EAAEI,kBAAkB,CAC5B,CAAC;EAED,MAAMI,qBAAqB,GAAGrB,OAAO,CACnC,mBACEF,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IACHsB,UAAU,EAAEP,UAAU,KAAKQ,SAAS,GAAG,IAAI,GAAG,KAAM;IACpDC,yBAAyB,EACvBT,UAAU,KAAKQ,SAAS,IAAIR,UAAU,CAACU,IAAI,KAAK,OAAO,GACnD,qBAAqB,GACrB,KACL;IACDC,2BAA2B,EACzBX,UAAU,KAAKQ,SAAS,IAAIR,UAAU,CAACU,IAAI,KAAK;EACjD,gBAED5B,KAAA,CAAAwB,aAAA,CAACZ,EAAE;IAACkB,IAAI,EAAC,SAAS;IAACC,KAAK,EAAEV,KAAK,CAAC,mBAAmB;EAAE,GAClDN,KACC,CACA,CACP,EACD,CAACA,KAAK,EAAEM,KAAK,EAAEH,UAAU,CAC3B,CAAC;EAED,MAAMc,cAAc,GAAG/B,WAAW,CAAC,MAAM;IACvC,IAAIiB,UAAU,EAAE;MACd,MAAM;QAAEU,IAAI;QAAEK;MAAe,CAAC,GAAGf,UAAU;MAE3C,QAAQU,IAAI;QACV,KAAK,YAAY;UACf,MAAMM,4BAA4B,GAAI,GAAEZ,0BAA2B,KAAIW,cAAc,CAACd,kBAAmB,EAAC;UAE1G,oBACEnB,KAAA,CAAAwB,aAAA,CAACf,UAAU,EAAA0B,QAAA,KACLF,cAAc;YAClBd,kBAAkB,EAAEe;UAA6B,EAClD,CAAC;QAEN,KAAK,YAAY;UACf,MAAME,4BAA4B,GAAI,GAAEd,0BAA2B,KAAIW,cAAc,CAACd,kBAAmB,EAAC;UAC1G,oBACEnB,KAAA,CAAAwB,aAAA,CAACd,UAAU,EAAAyB,QAAA,KACLF,cAAc;YAClBd,kBAAkB,EAAEiB;UAA6B,EAClD,CAAC;QAEN,KAAK,OAAO;UACV,oBAAOpC,KAAA,CAAAwB,aAAA,CAAChB,KAAK,EAAKyB,cAAiB,CAAC;QACtC;UACE,oBAAOjC,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAqC,QAAA,MAAI,CAAC;MAChB;IACF;IACA,oBAAOrC,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAqC,QAAA,MAAI,CAAC;EACd,CAAC,EAAE,CAACnB,UAAU,EAAEI,0BAA0B,CAAC,CAAC;EAE5C,oBACEtB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IACHmC,KAAK,EAAElC,gBAAgB,CAACmC,QAAS;IACjCnB,MAAM,EAAEA,MAAO;IACfK,UAAU,EAAEP,UAAU,KAAKQ,SAAS,GAAG,IAAI,GAAG,KAAM;IACpDP,kBAAkB,EAAEG;EAA2B,gBAE/CtB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IACHmC,KAAK,EAAElC,gBAAgB,CAACoC,aAAc;IACtCb,yBAAyB,EAAET,UAAU,GAAG,MAAM,GAAG;EAAsB,GAEtEF,QAAQ,iBACPhB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACmC,KAAK,EAAE;MAAEG,WAAW,EAAE5B;IAAW;EAAE,gBACvCb,KAAA,CAAAwB,aAAA,CAACb,IAAI;IACH+B,IAAI,EAAE1B,QAAS;IACfe,KAAK,EAAEd,SAAS,IAAII,KAAK,CAAC,iBAAiB,CAAE;IAC7CsB,IAAI,EAAEtC,sBAAsB,CAACuC;EAAS,CACvC,CACG,CACP,eACD5C,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACmC,KAAK,EAAEhC,QAAQ,CAACuC;EAAK,GAAEtB,qBAA4B,CAAC,EACzDL,UAAU,iBACTlB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACmC,KAAK,EAAE;MAAEQ,UAAU,EAAEzC,sBAAsB,CAAC0C;IAAa;EAAE,GAC9Df,cAAc,CAAC,CACZ,CAEJ,CACF,CAAC;AAEX,CAAC;AAED,eAAelB,cAAc"}
|