@pagopa/io-app-design-system 4.2.1 → 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/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/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/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/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/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,7 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { forwardRef } from "react";
|
|
2
2
|
import { Pressable, StyleSheet } from "react-native";
|
|
3
|
-
import Animated, {
|
|
4
|
-
import { IOButtonLegacyStyles, IOButtonStyles, IOColors,
|
|
3
|
+
import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, useReducedMotion } from "react-native-reanimated";
|
|
4
|
+
import { IOButtonLegacyStyles, IOButtonStyles, IOColors, hexToRgba, useIOExperimentalDesign } from "../../core/";
|
|
5
|
+
import { useScaleAnimation } from "../../hooks";
|
|
5
6
|
import { AnimatedIcon, IconClassComponent } from "../icons";
|
|
6
7
|
import { HSpacer } from "../spacer/Spacer";
|
|
7
8
|
import { IOText, buttonTextFontSize } from "../typography";
|
|
@@ -120,22 +121,22 @@ const mapLegacyColorStates = {
|
|
|
120
121
|
}
|
|
121
122
|
};
|
|
122
123
|
|
|
124
|
+
// Icon size
|
|
125
|
+
const iconSize = 20;
|
|
126
|
+
const DISABLED_OPACITY = 0.5;
|
|
127
|
+
|
|
123
128
|
// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
|
|
124
129
|
const IOButtonLegacyStylesLocal = StyleSheet.create({
|
|
125
130
|
buttonWithBorder: {
|
|
126
131
|
borderWidth: 1
|
|
127
132
|
}
|
|
128
133
|
});
|
|
129
|
-
|
|
130
|
-
// Icon size
|
|
131
|
-
const iconSize = 20;
|
|
132
|
-
const DISABLED_OPACITY = 0.5;
|
|
133
134
|
const IOButtonStylesLocal = StyleSheet.create({
|
|
134
135
|
buttonWithBorder: {
|
|
135
136
|
borderWidth: 2
|
|
136
137
|
}
|
|
137
138
|
});
|
|
138
|
-
export const ButtonOutline = /*#__PURE__*/
|
|
139
|
+
export const ButtonOutline = /*#__PURE__*/forwardRef(({
|
|
139
140
|
color = "primary",
|
|
140
141
|
label,
|
|
141
142
|
fullWidth = false,
|
|
@@ -147,62 +148,41 @@ export const ButtonOutline = /*#__PURE__*/React.forwardRef(({
|
|
|
147
148
|
accessibilityHint,
|
|
148
149
|
testID
|
|
149
150
|
}, ref) => {
|
|
150
|
-
var
|
|
151
|
+
var _colorMap$color, _colorMap$color2, _colorMap$color3, _colorMap$color4, _colorMap$color5, _colorMap$color6, _colorMap$color7;
|
|
151
152
|
const {
|
|
152
153
|
isExperimental
|
|
153
154
|
} = useIOExperimentalDesign();
|
|
154
|
-
const
|
|
155
|
+
const {
|
|
156
|
+
progress,
|
|
157
|
+
onPressIn,
|
|
158
|
+
onPressOut,
|
|
159
|
+
scaleAnimatedStyle
|
|
160
|
+
} = useScaleAnimation();
|
|
161
|
+
const reducedMotion = useReducedMotion();
|
|
155
162
|
const AnimatedIOText = Animated.createAnimatedComponent(IOText);
|
|
156
163
|
const colorMap = React.useMemo(() => isExperimental ? mapColorStates : mapLegacyColorStates, [isExperimental]);
|
|
157
164
|
const buttonStyles = React.useMemo(() => isExperimental ? IOButtonStyles : IOButtonLegacyStyles, [isExperimental]);
|
|
158
165
|
const buttonStylesLocal = React.useMemo(() => isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal, [isExperimental]);
|
|
159
|
-
// Scaling transformation applied when the button is pressed
|
|
160
|
-
const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
|
|
161
|
-
|
|
162
|
-
// Using a spring-based animation for our interpolations
|
|
163
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
164
166
|
|
|
165
167
|
// Interpolate animation values from `isPressed` values
|
|
166
168
|
const pressedAnimationStyle = useAnimatedStyle(() => {
|
|
167
169
|
// Link color states to the pressed states
|
|
168
|
-
const backgroundColor = interpolateColor(
|
|
169
|
-
const borderColor = interpolateColor(
|
|
170
|
-
|
|
171
|
-
// Scale down button slightly when pressed
|
|
172
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
170
|
+
const backgroundColor = interpolateColor(progress.value, [0, 1], [colorMap[color].background.default, colorMap[color].background.pressed]);
|
|
171
|
+
const borderColor = interpolateColor(progress.value, [0, 1], [colorMap[color].border.default, colorMap[color].border.pressed]);
|
|
173
172
|
return {
|
|
174
173
|
borderColor,
|
|
175
|
-
backgroundColor
|
|
176
|
-
transform: [{
|
|
177
|
-
scale
|
|
178
|
-
}]
|
|
179
|
-
};
|
|
180
|
-
});
|
|
181
|
-
const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
|
|
182
|
-
// Link color states to the pressed states
|
|
183
|
-
|
|
184
|
-
const labelColor = interpolateColor(progressPressed.value, [0, 1], [colorMap[color].border.default, colorMap[color].border.pressed]);
|
|
185
|
-
return {
|
|
186
|
-
color: labelColor
|
|
174
|
+
backgroundColor
|
|
187
175
|
};
|
|
188
176
|
});
|
|
177
|
+
const pressedColorLabelAnimationStyle = useAnimatedStyle(() => ({
|
|
178
|
+
color: interpolateColor(progress.value, [0, 1], [colorMap[color].border.default, colorMap[color].border.pressed])
|
|
179
|
+
}));
|
|
189
180
|
|
|
190
181
|
// Animate the <Icon> color prop
|
|
191
|
-
const pressedColorIconAnimationStyle = useAnimatedProps(() => {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
color: iconColor
|
|
195
|
-
};
|
|
196
|
-
});
|
|
182
|
+
const pressedColorIconAnimationStyle = useAnimatedProps(() => ({
|
|
183
|
+
color: interpolateColor(progress.value, [0, 1], [colorMap[color].label.default, colorMap[color].label.pressed])
|
|
184
|
+
}));
|
|
197
185
|
const AnimatedIconClassComponent = Animated.createAnimatedComponent(IconClassComponent);
|
|
198
|
-
const onPressIn = useCallback(() => {
|
|
199
|
-
// eslint-disable-next-line functional/immutable-data
|
|
200
|
-
isPressed.value = 1;
|
|
201
|
-
}, [isPressed]);
|
|
202
|
-
const onPressOut = useCallback(() => {
|
|
203
|
-
// eslint-disable-next-line functional/immutable-data
|
|
204
|
-
isPressed.value = 0;
|
|
205
|
-
}, [isPressed]);
|
|
206
186
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
207
187
|
ref: ref,
|
|
208
188
|
accessibilityLabel: accessibilityLabel || label,
|
|
@@ -233,7 +213,7 @@ export const ButtonOutline = /*#__PURE__*/React.forwardRef(({
|
|
|
233
213
|
},
|
|
234
214
|
/* Prevent Reanimated from overriding background colors
|
|
235
215
|
if button is disabled */
|
|
236
|
-
!disabled && pressedAnimationStyle]
|
|
216
|
+
!reducedMotion && !disabled && scaleAnimatedStyle, !disabled && pressedAnimationStyle]
|
|
237
217
|
}, icon && /*#__PURE__*/React.createElement(React.Fragment, null, !disabled ? /*#__PURE__*/React.createElement(AnimatedIconClassComponent, {
|
|
238
218
|
name: icon,
|
|
239
219
|
animatedProps: pressedColorIconAnimationStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","Pressable","StyleSheet","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedProps","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOButtonLegacyStyles","IOButtonStyles","IOColors","IOScaleValues","IOSpringValues","hexToRgba","useIOExperimentalDesign","AnimatedIcon","IconClassComponent","HSpacer","IOText","buttonTextFontSize","mapColorStates","primary","border","default","pressed","disabled","background","label","contrast","white","danger","red","bluegreyLight","grey","mapLegacyColorStates","blue","IOButtonLegacyStylesLocal","create","buttonWithBorder","borderWidth","iconSize","DISABLED_OPACITY","IOButtonStylesLocal","ButtonOutline","forwardRef","color","fullWidth","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","testID","ref","_IOScaleValues$basicB","_colorMap$color","_colorMap$color2","_colorMap$color3","_colorMap$color4","_colorMap$color5","_colorMap$color6","_colorMap$color7","isExperimental","isPressed","AnimatedIOText","createAnimatedComponent","colorMap","useMemo","buttonStyles","buttonStylesLocal","animationScaleValue","basicButton","pressedState","progressPressed","value","button","pressedAnimationStyle","backgroundColor","borderColor","scale","CLAMP","transform","pressedColorLabelAnimationStyle","labelColor","pressedColorIconAnimationStyle","iconColor","AnimatedIconClassComponent","onPressIn","onPressOut","createElement","accessibilityRole","accessibilityState","accessible","style","dimensionsDefault","View","paddingHorizontal","buttonSizeDefault","flexDirection","opacity","Fragment","name","animatedProps","size","font","weight","accessibilityElementsHidden","importantForAccessibility","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonOutline.tsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","forwardRef","Pressable","StyleSheet","Animated","interpolateColor","useAnimatedProps","useAnimatedStyle","useReducedMotion","IOButtonLegacyStyles","IOButtonStyles","IOColors","hexToRgba","useIOExperimentalDesign","useScaleAnimation","AnimatedIcon","IconClassComponent","HSpacer","IOText","buttonTextFontSize","mapColorStates","primary","border","default","pressed","disabled","background","label","contrast","white","danger","red","bluegreyLight","grey","mapLegacyColorStates","blue","iconSize","DISABLED_OPACITY","IOButtonLegacyStylesLocal","create","buttonWithBorder","borderWidth","IOButtonStylesLocal","ButtonOutline","color","fullWidth","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","testID","ref","_colorMap$color","_colorMap$color2","_colorMap$color3","_colorMap$color4","_colorMap$color5","_colorMap$color6","_colorMap$color7","isExperimental","progress","onPressIn","onPressOut","scaleAnimatedStyle","reducedMotion","AnimatedIOText","createAnimatedComponent","colorMap","useMemo","buttonStyles","buttonStylesLocal","pressedAnimationStyle","backgroundColor","value","borderColor","pressedColorLabelAnimationStyle","pressedColorIconAnimationStyle","AnimatedIconClassComponent","createElement","accessibilityRole","accessibilityState","accessible","style","dimensionsDefault","View","button","paddingHorizontal","buttonSizeDefault","flexDirection","opacity","Fragment","name","animatedProps","size","font","weight","accessibilityElementsHidden","importantForAccessibility","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonOutline.tsx"],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React, { useCallback
|
|
1
|
+
import React, { useCallback } from "react";
|
|
2
2
|
import { Pressable, StyleSheet } from "react-native";
|
|
3
3
|
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
|
|
4
|
-
import Animated, {
|
|
5
|
-
import { IOButtonLegacyStyles, IOButtonStyles, IOColors,
|
|
4
|
+
import Animated, { interpolateColor, useAnimatedStyle, useReducedMotion } from "react-native-reanimated";
|
|
5
|
+
import { IOButtonLegacyStyles, IOButtonStyles, IOColors, enterTransitionInnerContent, enterTransitionInnerContentSmall, exitTransitionInnerContent, useIOExperimentalDesign } from "../../core";
|
|
6
|
+
import { useScaleAnimation } from "../../hooks";
|
|
6
7
|
import { Icon } from "../icons";
|
|
7
8
|
import { LoadingSpinner } from "../loadingSpinner";
|
|
8
9
|
import { HSpacer } from "../spacer/Spacer";
|
|
@@ -99,51 +100,28 @@ export const ButtonSolid = /*#__PURE__*/React.forwardRef(({
|
|
|
99
100
|
accessibilityHint,
|
|
100
101
|
testID
|
|
101
102
|
}, ref) => {
|
|
102
|
-
var
|
|
103
|
-
const isPressed = useSharedValue(0);
|
|
103
|
+
var _colorMap$color, _colorMap$color2, _colorMap$color3;
|
|
104
104
|
const {
|
|
105
105
|
isExperimental
|
|
106
106
|
} = useIOExperimentalDesign();
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const isMounted = useRef(false);
|
|
115
|
-
useEffect(() => {
|
|
116
|
-
// eslint-disable-next-line functional/immutable-data
|
|
117
|
-
isMounted.current = true;
|
|
118
|
-
}, []);
|
|
107
|
+
const {
|
|
108
|
+
progress,
|
|
109
|
+
onPressIn,
|
|
110
|
+
onPressOut,
|
|
111
|
+
scaleAnimatedStyle
|
|
112
|
+
} = useScaleAnimation();
|
|
113
|
+
const reducedMotion = useReducedMotion();
|
|
119
114
|
const colorMap = React.useMemo(() => isExperimental ? mapColorStates : mapLegacyColorStates, [isExperimental]);
|
|
120
115
|
const buttonStyles = React.useMemo(() => isExperimental ? IOButtonStyles : IOButtonLegacyStyles, [isExperimental]);
|
|
121
116
|
|
|
122
|
-
// Using a spring-based animation for our interpolations
|
|
123
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
124
|
-
|
|
125
117
|
// Interpolate animation values from `isPressed` values
|
|
126
118
|
const pressedAnimationStyle = useAnimatedStyle(() => {
|
|
127
119
|
// Link color states to the pressed states
|
|
128
|
-
const backgroundColor = interpolateColor(
|
|
129
|
-
|
|
130
|
-
// Scale down button slightly when pressed
|
|
131
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
120
|
+
const backgroundColor = interpolateColor(progress.value, [0, 1], [colorMap[color].default, colorMap[color].pressed]);
|
|
132
121
|
return {
|
|
133
|
-
backgroundColor
|
|
134
|
-
transform: [{
|
|
135
|
-
scale
|
|
136
|
-
}]
|
|
122
|
+
backgroundColor
|
|
137
123
|
};
|
|
138
124
|
});
|
|
139
|
-
const onPressIn = useCallback(() => {
|
|
140
|
-
// eslint-disable-next-line functional/immutable-data
|
|
141
|
-
isPressed.value = 1;
|
|
142
|
-
}, [isPressed]);
|
|
143
|
-
const onPressOut = useCallback(() => {
|
|
144
|
-
// eslint-disable-next-line functional/immutable-data
|
|
145
|
-
isPressed.value = 0;
|
|
146
|
-
}, [isPressed]);
|
|
147
125
|
const handleOnPress = useCallback(event => {
|
|
148
126
|
/* Don't call `onPress` if the button is
|
|
149
127
|
in loading state */
|
|
@@ -184,10 +162,10 @@ export const ButtonSolid = /*#__PURE__*/React.forwardRef(({
|
|
|
184
162
|
},
|
|
185
163
|
/* Prevent Reanimated from overriding background colors
|
|
186
164
|
if button is disabled */
|
|
187
|
-
!disabled && pressedAnimationStyle]
|
|
165
|
+
!disabled && !reducedMotion && scaleAnimatedStyle, !disabled && pressedAnimationStyle]
|
|
188
166
|
}, loading && /*#__PURE__*/React.createElement(Animated.View, {
|
|
189
167
|
style: buttonStyles.buttonInner,
|
|
190
|
-
entering:
|
|
168
|
+
entering: enterTransitionInnerContentSmall,
|
|
191
169
|
exiting: exitTransitionInnerContent
|
|
192
170
|
}, /*#__PURE__*/React.createElement(LoadingSpinner, {
|
|
193
171
|
color: foregroundColor
|
|
@@ -195,10 +173,7 @@ export const ButtonSolid = /*#__PURE__*/React.forwardRef(({
|
|
|
195
173
|
style: [buttonStyles.buttonInner, iconPosition === "end" && {
|
|
196
174
|
flexDirection: "row-reverse"
|
|
197
175
|
}],
|
|
198
|
-
entering:
|
|
199
|
-
/* Temporarily disable the exiting transition because it caused
|
|
200
|
-
a weird glitch on page exit */
|
|
201
|
-
// exiting={exitTransitionInnerContent}
|
|
176
|
+
entering: enterTransitionInnerContent
|
|
202
177
|
}, icon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
|
|
203
178
|
name: icon,
|
|
204
179
|
size: iconSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","
|
|
1
|
+
{"version":3,"names":["React","useCallback","Pressable","StyleSheet","ReactNativeHapticFeedback","Animated","interpolateColor","useAnimatedStyle","useReducedMotion","IOButtonLegacyStyles","IOButtonStyles","IOColors","enterTransitionInnerContent","enterTransitionInnerContentSmall","exitTransitionInnerContent","useIOExperimentalDesign","useScaleAnimation","Icon","LoadingSpinner","HSpacer","ButtonText","colorPrimaryLegacyButtonDisabled","legacyStyles","create","backgroundDisabled","backgroundColor","colorPrimaryButtonDisabled","DISABLED_OPACITY","iconSize","styles","opacity","mapColorStates","primary","default","pressed","label","disabled","danger","contrast","white","mapLegacyColorStates","blue","ButtonSolid","forwardRef","color","fullWidth","loading","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","testID","ref","_colorMap$color","_colorMap$color2","_colorMap$color3","isExperimental","progress","onPressIn","onPressOut","scaleAnimatedStyle","reducedMotion","colorMap","useMemo","buttonStyles","pressedAnimationStyle","value","handleOnPress","event","trigger","foregroundColor","createElement","accessible","accessibilityState","busy","accessibilityRole","style","dimensionsDefault","View","button","overflow","paddingHorizontal","buttonSizeDefault","buttonInner","entering","exiting","flexDirection","Fragment","name","size","numberOfLines","ellipsizeMode","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonSolid.tsx"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
2
|
import { Pressable } from "react-native";
|
|
3
|
-
import Animated, {
|
|
4
|
-
import { IOColors, IOIconButtonStyles,
|
|
3
|
+
import Animated, { interpolateColor, useAnimatedProps, useReducedMotion } from "react-native-reanimated";
|
|
4
|
+
import { IOColors, IOIconButtonStyles, IOStyles, hexToRgba, useIOExperimentalDesign } from "../../core";
|
|
5
|
+
import { useScaleAnimation } from "../../hooks";
|
|
5
6
|
import { AnimatedIcon, IconClassComponent } from "../icons";
|
|
6
7
|
// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
|
|
7
8
|
const mapLegacyColorStates = {
|
|
@@ -67,53 +68,33 @@ export const IconButton = ({
|
|
|
67
68
|
accessibilityHint,
|
|
68
69
|
testID
|
|
69
70
|
}) => {
|
|
70
|
-
var
|
|
71
|
-
const
|
|
71
|
+
var _colorMap$color, _colorMap$color2;
|
|
72
|
+
const {
|
|
73
|
+
progress,
|
|
74
|
+
onPressIn,
|
|
75
|
+
onPressOut,
|
|
76
|
+
scaleAnimatedStyle
|
|
77
|
+
} = useScaleAnimation("exaggerated");
|
|
78
|
+
const reducedMotion = useReducedMotion();
|
|
72
79
|
const {
|
|
73
80
|
isExperimental
|
|
74
81
|
} = useIOExperimentalDesign();
|
|
75
82
|
const colorMap = useMemo(() => isExperimental ? mapColorStates : mapLegacyColorStates, [isExperimental]);
|
|
76
83
|
|
|
77
|
-
// Scaling transformation applied when the button is pressed
|
|
78
|
-
const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 || (_IOScaleValues$exagge = IOScaleValues.exaggeratedButton) === null || _IOScaleValues$exagge === void 0 ? void 0 : _IOScaleValues$exagge.pressedState;
|
|
79
|
-
|
|
80
|
-
// Using a spring-based animation for our interpolations
|
|
81
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
82
|
-
|
|
83
|
-
// Interpolate animation values from `isPressed` values
|
|
84
|
-
|
|
85
|
-
const pressedAnimationStyle = useAnimatedStyle(() => {
|
|
86
|
-
// Scale down button slightly when pressed
|
|
87
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
88
|
-
return {
|
|
89
|
-
transform: [{
|
|
90
|
-
scale
|
|
91
|
-
}]
|
|
92
|
-
};
|
|
93
|
-
});
|
|
94
|
-
|
|
95
84
|
// Animate the <Icon> color prop
|
|
96
85
|
const animatedColor = useAnimatedProps(() => {
|
|
97
|
-
const iconColor = interpolateColor(
|
|
86
|
+
const iconColor = interpolateColor(progress.value, [0, 1], [colorMap[color].icon.default, colorMap[color].icon.pressed]);
|
|
98
87
|
return {
|
|
99
88
|
color: iconColor
|
|
100
89
|
};
|
|
101
90
|
});
|
|
102
|
-
const handlePressIn = useCallback(() => {
|
|
103
|
-
// eslint-disable-next-line functional/immutable-data
|
|
104
|
-
isPressed.value = 1;
|
|
105
|
-
}, [isPressed]);
|
|
106
|
-
const handlePressOut = useCallback(() => {
|
|
107
|
-
// eslint-disable-next-line functional/immutable-data
|
|
108
|
-
isPressed.value = 0;
|
|
109
|
-
}, [isPressed]);
|
|
110
91
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
111
92
|
disabled: disabled
|
|
112
93
|
// Events
|
|
113
94
|
,
|
|
114
95
|
onPress: onPress,
|
|
115
|
-
onPressIn:
|
|
116
|
-
onPressOut:
|
|
96
|
+
onPressIn: onPressIn,
|
|
97
|
+
onPressOut: onPressOut
|
|
117
98
|
// Accessibility
|
|
118
99
|
,
|
|
119
100
|
accessible: true,
|
|
@@ -131,7 +112,7 @@ export const IconButton = ({
|
|
|
131
112
|
,
|
|
132
113
|
testID: testID
|
|
133
114
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
134
|
-
style: [IOIconButtonStyles.buttonSizeSmall, IOStyles.alignCenter, IOStyles.centerJustified, !disabled &&
|
|
115
|
+
style: [IOIconButtonStyles.buttonSizeSmall, IOStyles.alignCenter, IOStyles.centerJustified, !disabled && !reducedMotion && scaleAnimatedStyle]
|
|
135
116
|
}, !disabled ? /*#__PURE__*/React.createElement(AnimatedIconClassComponent, {
|
|
136
117
|
name: icon,
|
|
137
118
|
size: iconSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useMemo","Pressable","Animated","interpolateColor","useAnimatedProps","useReducedMotion","IOColors","IOIconButtonStyles","IOStyles","hexToRgba","useIOExperimentalDesign","useScaleAnimation","AnimatedIcon","IconClassComponent","mapLegacyColorStates","primary","icon","default","blue","pressed","disabled","neutral","black","bluegreyDark","grey","contrast","white","mapColorStates","AnimatedIconClassComponent","createAnimatedComponent","IconButton","color","iconSize","onPress","accessibilityLabel","accessibilityHint","testID","_colorMap$color","_colorMap$color2","progress","onPressIn","onPressOut","scaleAnimatedStyle","reducedMotion","isExperimental","colorMap","animatedColor","iconColor","value","createElement","accessible","accessibilityRole","accessibilityState","hitSlop","View","style","buttonSizeSmall","alignCenter","centerJustified","name","size","animatedProps"],"sourceRoot":"../../../../src","sources":["components/buttons/IconButton.tsx"],"mappings":"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"}
|
|
@@ -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, {
|
|
3
|
+
import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, useReducedMotion } from "react-native-reanimated";
|
|
5
4
|
import { AnimatedIcon, IconClassComponent } from "../../components/icons";
|
|
6
|
-
import { IOButtonStyles, IOColors, IOIconButtonStyles,
|
|
5
|
+
import { IOButtonStyles, IOColors, IOIconButtonStyles, hexToRgba, useIOExperimentalDesign } from "../../core";
|
|
6
|
+
import { useScaleAnimation } from "../../hooks";
|
|
7
7
|
const mapColorStates = {
|
|
8
8
|
// Primary button
|
|
9
9
|
primary: {
|
|
@@ -96,50 +96,26 @@ export const IconButtonContained = ({
|
|
|
96
96
|
accessibilityHint,
|
|
97
97
|
testID
|
|
98
98
|
}) => {
|
|
99
|
-
var
|
|
100
|
-
const isPressed = useSharedValue(0);
|
|
99
|
+
var _colorMap$color, _colorMap$color2;
|
|
101
100
|
const {
|
|
102
101
|
isExperimental
|
|
103
102
|
} = useIOExperimentalDesign();
|
|
103
|
+
const {
|
|
104
|
+
progress,
|
|
105
|
+
onPressIn,
|
|
106
|
+
onPressOut,
|
|
107
|
+
scaleAnimatedStyle
|
|
108
|
+
} = useScaleAnimation("exaggerated");
|
|
109
|
+
const reducedMotion = useReducedMotion();
|
|
104
110
|
const colorMap = React.useMemo(() => isExperimental ? mapColorStates : mapLegacyColorStates, [isExperimental]);
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
// Using a spring-based animation for our interpolations
|
|
110
|
-
const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
|
|
111
|
-
|
|
112
|
-
// Interpolate animation values from `isPressed` values
|
|
113
|
-
|
|
114
|
-
const pressedAnimationStyle = useAnimatedStyle(() => {
|
|
115
|
-
// Link color states to the pressed states
|
|
116
|
-
const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [colorMap[color].background.default, colorMap[color].background.pressed]);
|
|
117
|
-
|
|
118
|
-
// Scale down button slightly when pressed
|
|
119
|
-
const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
|
|
120
|
-
return {
|
|
121
|
-
backgroundColor,
|
|
122
|
-
transform: [{
|
|
123
|
-
scale
|
|
124
|
-
}]
|
|
125
|
-
};
|
|
126
|
-
});
|
|
111
|
+
const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
|
|
112
|
+
backgroundColor: interpolateColor(progress.value, [0, 1], [colorMap[color].background.default, colorMap[color].background.pressed])
|
|
113
|
+
}));
|
|
127
114
|
|
|
128
115
|
// Animate the <Icon> color prop
|
|
129
|
-
const
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
color: iconColor
|
|
133
|
-
};
|
|
134
|
-
});
|
|
135
|
-
const handlePressIn = useCallback(() => {
|
|
136
|
-
// eslint-disable-next-line functional/immutable-data
|
|
137
|
-
isPressed.value = 1;
|
|
138
|
-
}, [isPressed]);
|
|
139
|
-
const handlePressOut = useCallback(() => {
|
|
140
|
-
// eslint-disable-next-line functional/immutable-data
|
|
141
|
-
isPressed.value = 0;
|
|
142
|
-
}, [isPressed]);
|
|
116
|
+
const iconColorAnimationStyle = useAnimatedProps(() => ({
|
|
117
|
+
color: interpolateColor(progress.value, [0, 1], [colorMap[color].icon.default, colorMap[color].icon.pressed])
|
|
118
|
+
}));
|
|
143
119
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
144
120
|
accessibilityLabel: accessibilityLabel,
|
|
145
121
|
accessibilityHint: accessibilityHint,
|
|
@@ -149,16 +125,16 @@ export const IconButtonContained = ({
|
|
|
149
125
|
},
|
|
150
126
|
testID: testID,
|
|
151
127
|
onPress: onPress,
|
|
152
|
-
onPressIn:
|
|
153
|
-
onPressOut:
|
|
128
|
+
onPressIn: onPressIn,
|
|
129
|
+
onPressOut: onPressOut,
|
|
154
130
|
accessible: true,
|
|
155
131
|
disabled: disabled,
|
|
156
132
|
style: IOButtonStyles.dimensionsDefault
|
|
157
133
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
158
|
-
style: [IOIconButtonStyles.button, IOIconButtonStyles.buttonSizeDefault, !disabled &&
|
|
134
|
+
style: [IOIconButtonStyles.button, IOIconButtonStyles.buttonSizeDefault, !disabled && !reducedMotion && scaleAnimatedStyle, !disabled && backgroundColorAnimationStyle]
|
|
159
135
|
}, !disabled ? /*#__PURE__*/React.createElement(AnimatedIconClassComponent, {
|
|
160
136
|
name: icon,
|
|
161
|
-
animatedProps:
|
|
137
|
+
animatedProps: iconColorAnimationStyle,
|
|
162
138
|
color: (_colorMap$color = colorMap[color]) === null || _colorMap$color === void 0 || (_colorMap$color = _colorMap$color.icon) === null || _colorMap$color === void 0 ? void 0 : _colorMap$color.default
|
|
163
139
|
}) : /*#__PURE__*/React.createElement(AnimatedIcon, {
|
|
164
140
|
name: icon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","Pressable","Animated","interpolateColor","useAnimatedProps","useAnimatedStyle","useReducedMotion","AnimatedIcon","IconClassComponent","IOButtonStyles","IOColors","IOIconButtonStyles","hexToRgba","useIOExperimentalDesign","useScaleAnimation","mapColorStates","primary","background","default","pressed","disabled","icon","neutral","white","greyUltraLight","bluegrey","black","grey","contrast","mapLegacyColorStates","blue","AnimatedIconClassComponent","createAnimatedComponent","IconButtonContained","color","onPress","accessibilityLabel","accessibilityHint","testID","_colorMap$color","_colorMap$color2","isExperimental","progress","onPressIn","onPressOut","scaleAnimatedStyle","reducedMotion","colorMap","useMemo","backgroundColorAnimationStyle","backgroundColor","value","iconColorAnimationStyle","createElement","accessibilityRole","accessibilityState","accessible","style","dimensionsDefault","View","button","buttonSizeDefault","name","animatedProps"],"sourceRoot":"../../../../src","sources":["components/buttons/IconButtonContained.tsx"],"mappings":"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"}
|