@pagopa/io-app-design-system 5.2.1 → 5.2.3
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/listitems/__test__/__snapshots__/listitem.test.tsx.snap +72 -96
- package/lib/commonjs/components/modules/ModuleCheckout.js +2 -1
- package/lib/commonjs/components/modules/ModuleCheckout.js.map +1 -1
- package/lib/commonjs/components/skeleton/IOSkeleton.js +20 -20
- package/lib/commonjs/components/skeleton/IOSkeleton.js.map +1 -1
- package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +72 -96
- package/lib/module/components/modules/ModuleCheckout.js +2 -1
- package/lib/module/components/modules/ModuleCheckout.js.map +1 -1
- package/lib/module/components/skeleton/IOSkeleton.js +20 -20
- package/lib/module/components/skeleton/IOSkeleton.js.map +1 -1
- package/lib/typescript/components/modules/ModuleCheckout.d.ts.map +1 -1
- package/lib/typescript/components/skeleton/IOSkeleton.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +72 -96
- package/src/components/modules/ModuleCheckout.tsx +6 -1
- package/src/components/skeleton/IOSkeleton.tsx +25 -35
|
@@ -1395,19 +1395,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1395
1395
|
}
|
|
1396
1396
|
>
|
|
1397
1397
|
<View
|
|
1398
|
+
collapsable={false}
|
|
1398
1399
|
style={
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
{
|
|
1408
|
-
"opacity": 0.75,
|
|
1409
|
-
},
|
|
1410
|
-
]
|
|
1400
|
+
{
|
|
1401
|
+
"backgroundColor": "#E8EBF1",
|
|
1402
|
+
"borderCurve": "continuous",
|
|
1403
|
+
"borderRadius": 8,
|
|
1404
|
+
"height": 44,
|
|
1405
|
+
"opacity": 0.75,
|
|
1406
|
+
"width": 44,
|
|
1407
|
+
}
|
|
1411
1408
|
}
|
|
1412
1409
|
/>
|
|
1413
1410
|
</View>
|
|
@@ -1422,35 +1419,29 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1422
1419
|
}
|
|
1423
1420
|
>
|
|
1424
1421
|
<View
|
|
1422
|
+
collapsable={false}
|
|
1425
1423
|
style={
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
{
|
|
1435
|
-
"opacity": 0.75,
|
|
1436
|
-
},
|
|
1437
|
-
]
|
|
1424
|
+
{
|
|
1425
|
+
"backgroundColor": "#E8EBF1",
|
|
1426
|
+
"borderCurve": "continuous",
|
|
1427
|
+
"borderRadius": 8,
|
|
1428
|
+
"height": 16,
|
|
1429
|
+
"opacity": 0.75,
|
|
1430
|
+
"width": 62,
|
|
1431
|
+
}
|
|
1438
1432
|
}
|
|
1439
1433
|
/>
|
|
1440
1434
|
<View
|
|
1435
|
+
collapsable={false}
|
|
1441
1436
|
style={
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
{
|
|
1451
|
-
"opacity": 0.75,
|
|
1452
|
-
},
|
|
1453
|
-
]
|
|
1437
|
+
{
|
|
1438
|
+
"backgroundColor": "#E8EBF1",
|
|
1439
|
+
"borderCurve": "continuous",
|
|
1440
|
+
"borderRadius": 8,
|
|
1441
|
+
"height": 16,
|
|
1442
|
+
"opacity": 0.75,
|
|
1443
|
+
"width": 107,
|
|
1444
|
+
}
|
|
1454
1445
|
}
|
|
1455
1446
|
/>
|
|
1456
1447
|
</View>
|
|
@@ -1462,19 +1453,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1462
1453
|
}
|
|
1463
1454
|
>
|
|
1464
1455
|
<View
|
|
1456
|
+
collapsable={false}
|
|
1465
1457
|
style={
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
{
|
|
1475
|
-
"opacity": 0.75,
|
|
1476
|
-
},
|
|
1477
|
-
]
|
|
1458
|
+
{
|
|
1459
|
+
"backgroundColor": "#E8EBF1",
|
|
1460
|
+
"borderCurve": "continuous",
|
|
1461
|
+
"borderRadius": 8,
|
|
1462
|
+
"height": 24,
|
|
1463
|
+
"opacity": 0.75,
|
|
1464
|
+
"width": 70,
|
|
1465
|
+
}
|
|
1478
1466
|
}
|
|
1479
1467
|
/>
|
|
1480
1468
|
</View>
|
|
@@ -2950,19 +2938,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
2950
2938
|
}
|
|
2951
2939
|
>
|
|
2952
2940
|
<View
|
|
2941
|
+
collapsable={false}
|
|
2953
2942
|
style={
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
{
|
|
2963
|
-
"opacity": 0.75,
|
|
2964
|
-
},
|
|
2965
|
-
]
|
|
2943
|
+
{
|
|
2944
|
+
"backgroundColor": "#E8EBF1",
|
|
2945
|
+
"borderCurve": "continuous",
|
|
2946
|
+
"borderRadius": 8,
|
|
2947
|
+
"height": 44,
|
|
2948
|
+
"opacity": 0.75,
|
|
2949
|
+
"width": 44,
|
|
2950
|
+
}
|
|
2966
2951
|
}
|
|
2967
2952
|
/>
|
|
2968
2953
|
</View>
|
|
@@ -2977,35 +2962,29 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
2977
2962
|
}
|
|
2978
2963
|
>
|
|
2979
2964
|
<View
|
|
2965
|
+
collapsable={false}
|
|
2980
2966
|
style={
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
{
|
|
2990
|
-
"opacity": 0.75,
|
|
2991
|
-
},
|
|
2992
|
-
]
|
|
2967
|
+
{
|
|
2968
|
+
"backgroundColor": "#E8EBF1",
|
|
2969
|
+
"borderCurve": "continuous",
|
|
2970
|
+
"borderRadius": 8,
|
|
2971
|
+
"height": 16,
|
|
2972
|
+
"opacity": 0.75,
|
|
2973
|
+
"width": 62,
|
|
2974
|
+
}
|
|
2993
2975
|
}
|
|
2994
2976
|
/>
|
|
2995
2977
|
<View
|
|
2978
|
+
collapsable={false}
|
|
2996
2979
|
style={
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
{
|
|
3006
|
-
"opacity": 0.75,
|
|
3007
|
-
},
|
|
3008
|
-
]
|
|
2980
|
+
{
|
|
2981
|
+
"backgroundColor": "#E8EBF1",
|
|
2982
|
+
"borderCurve": "continuous",
|
|
2983
|
+
"borderRadius": 8,
|
|
2984
|
+
"height": 16,
|
|
2985
|
+
"opacity": 0.75,
|
|
2986
|
+
"width": 107,
|
|
2987
|
+
}
|
|
3009
2988
|
}
|
|
3010
2989
|
/>
|
|
3011
2990
|
</View>
|
|
@@ -3017,19 +2996,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
3017
2996
|
}
|
|
3018
2997
|
>
|
|
3019
2998
|
<View
|
|
2999
|
+
collapsable={false}
|
|
3020
3000
|
style={
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
{
|
|
3030
|
-
"opacity": 0.75,
|
|
3031
|
-
},
|
|
3032
|
-
]
|
|
3001
|
+
{
|
|
3002
|
+
"backgroundColor": "#E8EBF1",
|
|
3003
|
+
"borderCurve": "continuous",
|
|
3004
|
+
"borderRadius": 8,
|
|
3005
|
+
"height": 24,
|
|
3006
|
+
"opacity": 0.75,
|
|
3007
|
+
"width": 70,
|
|
3008
|
+
}
|
|
3033
3009
|
}
|
|
3034
3010
|
/>
|
|
3035
3011
|
</View>
|
|
@@ -58,7 +58,8 @@ const ModuleCheckout = props => {
|
|
|
58
58
|
color: theme["textBody-tertiary"]
|
|
59
59
|
}, subtitle)));
|
|
60
60
|
return ctaText ? /*#__PURE__*/React.createElement(_PressableModuleBase.PressableModuleBase, {
|
|
61
|
-
onPress: onPress
|
|
61
|
+
onPress: onPress,
|
|
62
|
+
accessibilityLabel: subtitle ? `${title}, ${subtitle}, ${ctaText}` : `${title}, ${ctaText}`
|
|
62
63
|
}, /*#__PURE__*/React.createElement(_stack.HStack, {
|
|
63
64
|
space: 4,
|
|
64
65
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_core","_buttons","_logos","_skeleton","_stack","_typography","_ModuleStatic","_PressableModuleBase","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ModuleCheckout","props","theme","useIOTheme","imageMargin","isLoading","createElement","ModuleCheckoutSkeleton","loadingAccessibilityLabel","paymentLogo","image","title","subtitle","ctaText","onPress","paymentLogoComponent","LogoPayment","name","imageComponent","Image","source","style","styles","accessibilityIgnoresInvertColors","ModuleBaseContent","HStack","space","alignItems","flexShrink","View","flexGrow","H6","color","BodySmall","weight","PressableModuleBase","pointerEvents","accessibilityElementsHidden","importantForAccessibility","ButtonLink","label","ModuleStatic","exports","accessible","
|
|
1
|
+
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_core","_buttons","_logos","_skeleton","_stack","_typography","_ModuleStatic","_PressableModuleBase","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ModuleCheckout","props","theme","useIOTheme","imageMargin","isLoading","createElement","ModuleCheckoutSkeleton","loadingAccessibilityLabel","paymentLogo","image","title","subtitle","ctaText","onPress","paymentLogoComponent","LogoPayment","name","imageComponent","Image","source","style","styles","accessibilityIgnoresInvertColors","ModuleBaseContent","HStack","space","alignItems","flexShrink","View","flexGrow","H6","color","BodySmall","weight","PressableModuleBase","accessibilityLabel","pointerEvents","accessibilityElementsHidden","importantForAccessibility","ButtonLink","label","ModuleStatic","exports","accessible","accessibilityState","busy","startBlock","IOSkeleton","shape","size","radius","VStack","width","height","endBlock","StyleSheet","create","IOSelectionListItemVisualParams","iconSize","resizeMode"],"sourceRoot":"../../../../src","sources":["components/modules/ModuleCheckout.tsx"],"mappings":"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"}
|
|
@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.IOSkeleton = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
10
|
var _core = require("../../core");
|
|
10
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -23,7 +24,7 @@ const IOSkeleton = ({
|
|
|
23
24
|
}) => {
|
|
24
25
|
const reduceMotion = (0, _reactNativeReanimated.useReducedMotion)();
|
|
25
26
|
const theme = (0, _core.useIOTheme)();
|
|
26
|
-
const opacity = (0,
|
|
27
|
+
const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(OPACITY_MAX)).current;
|
|
27
28
|
const backgroundColor = color ?? _core.IOColors[theme["skeleton-background"]];
|
|
28
29
|
const baseStyle = (0, _react.useMemo)(() => ({
|
|
29
30
|
backgroundColor,
|
|
@@ -34,31 +35,30 @@ const IOSkeleton = ({
|
|
|
34
35
|
}), [backgroundColor, shape, size, width, height, borderRadius]);
|
|
35
36
|
(0, _react.useEffect)(() => {
|
|
36
37
|
if (reduceMotion) {
|
|
37
|
-
|
|
38
|
-
opacity.value = OPACITY_REDUCED_MOTION;
|
|
38
|
+
opacity.setValue(OPACITY_REDUCED_MOTION);
|
|
39
39
|
return;
|
|
40
40
|
}
|
|
41
|
-
const
|
|
41
|
+
const animation = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(opacity, {
|
|
42
|
+
toValue: OPACITY_MIN,
|
|
42
43
|
duration: ANIMATION_DURATION / 2,
|
|
43
|
-
easing:
|
|
44
|
-
|
|
44
|
+
easing: _reactNative.Easing.inOut(_reactNative.Easing.sin),
|
|
45
|
+
useNativeDriver: true
|
|
46
|
+
}), _reactNative.Animated.timing(opacity, {
|
|
47
|
+
toValue: OPACITY_MAX,
|
|
45
48
|
duration: ANIMATION_DURATION / 2,
|
|
46
|
-
easing:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
opacity.value = animationSequence;
|
|
49
|
+
easing: _reactNative.Easing.inOut(_reactNative.Easing.sin),
|
|
50
|
+
useNativeDriver: true
|
|
51
|
+
})]));
|
|
52
|
+
animation.start();
|
|
51
53
|
return () => {
|
|
52
|
-
|
|
54
|
+
animation.stop();
|
|
53
55
|
};
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
57
|
-
opacity: opacity.value
|
|
58
|
-
}));
|
|
59
|
-
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
56
|
+
}, [opacity, reduceMotion]);
|
|
57
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
60
58
|
testID: testID,
|
|
61
|
-
style: [baseStyle,
|
|
59
|
+
style: [baseStyle, {
|
|
60
|
+
opacity
|
|
61
|
+
}]
|
|
62
62
|
});
|
|
63
63
|
};
|
|
64
64
|
exports.IOSkeleton = IOSkeleton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","useReducedMotion","theme","useIOTheme","opacity","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","useReducedMotion","theme","useIOTheme","opacity","useRef","Animated","Value","current","backgroundColor","IOColors","baseStyle","useMemo","borderCurve","useEffect","setValue","animation","loop","sequence","timing","toValue","duration","easing","Easing","inOut","sin","useNativeDriver","start","stop","createElement","View","style","exports"],"sourceRoot":"../../../../src","sources":["components/skeleton/IOSkeleton.tsx"],"mappings":"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"}
|
|
@@ -1395,19 +1395,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1395
1395
|
}
|
|
1396
1396
|
>
|
|
1397
1397
|
<View
|
|
1398
|
+
collapsable={false}
|
|
1398
1399
|
style={
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
{
|
|
1408
|
-
"opacity": 0.75,
|
|
1409
|
-
},
|
|
1410
|
-
]
|
|
1400
|
+
{
|
|
1401
|
+
"backgroundColor": "#E8EBF1",
|
|
1402
|
+
"borderCurve": "continuous",
|
|
1403
|
+
"borderRadius": 8,
|
|
1404
|
+
"height": 44,
|
|
1405
|
+
"opacity": 0.75,
|
|
1406
|
+
"width": 44,
|
|
1407
|
+
}
|
|
1411
1408
|
}
|
|
1412
1409
|
/>
|
|
1413
1410
|
</View>
|
|
@@ -1422,35 +1419,29 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1422
1419
|
}
|
|
1423
1420
|
>
|
|
1424
1421
|
<View
|
|
1422
|
+
collapsable={false}
|
|
1425
1423
|
style={
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
{
|
|
1435
|
-
"opacity": 0.75,
|
|
1436
|
-
},
|
|
1437
|
-
]
|
|
1424
|
+
{
|
|
1425
|
+
"backgroundColor": "#E8EBF1",
|
|
1426
|
+
"borderCurve": "continuous",
|
|
1427
|
+
"borderRadius": 8,
|
|
1428
|
+
"height": 16,
|
|
1429
|
+
"opacity": 0.75,
|
|
1430
|
+
"width": 62,
|
|
1431
|
+
}
|
|
1438
1432
|
}
|
|
1439
1433
|
/>
|
|
1440
1434
|
<View
|
|
1435
|
+
collapsable={false}
|
|
1441
1436
|
style={
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
{
|
|
1451
|
-
"opacity": 0.75,
|
|
1452
|
-
},
|
|
1453
|
-
]
|
|
1437
|
+
{
|
|
1438
|
+
"backgroundColor": "#E8EBF1",
|
|
1439
|
+
"borderCurve": "continuous",
|
|
1440
|
+
"borderRadius": 8,
|
|
1441
|
+
"height": 16,
|
|
1442
|
+
"opacity": 0.75,
|
|
1443
|
+
"width": 107,
|
|
1444
|
+
}
|
|
1454
1445
|
}
|
|
1455
1446
|
/>
|
|
1456
1447
|
</View>
|
|
@@ -1462,19 +1453,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1462
1453
|
}
|
|
1463
1454
|
>
|
|
1464
1455
|
<View
|
|
1456
|
+
collapsable={false}
|
|
1465
1457
|
style={
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
{
|
|
1475
|
-
"opacity": 0.75,
|
|
1476
|
-
},
|
|
1477
|
-
]
|
|
1458
|
+
{
|
|
1459
|
+
"backgroundColor": "#E8EBF1",
|
|
1460
|
+
"borderCurve": "continuous",
|
|
1461
|
+
"borderRadius": 8,
|
|
1462
|
+
"height": 24,
|
|
1463
|
+
"opacity": 0.75,
|
|
1464
|
+
"width": 70,
|
|
1465
|
+
}
|
|
1478
1466
|
}
|
|
1479
1467
|
/>
|
|
1480
1468
|
</View>
|
|
@@ -2950,19 +2938,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
2950
2938
|
}
|
|
2951
2939
|
>
|
|
2952
2940
|
<View
|
|
2941
|
+
collapsable={false}
|
|
2953
2942
|
style={
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
{
|
|
2963
|
-
"opacity": 0.75,
|
|
2964
|
-
},
|
|
2965
|
-
]
|
|
2943
|
+
{
|
|
2944
|
+
"backgroundColor": "#E8EBF1",
|
|
2945
|
+
"borderCurve": "continuous",
|
|
2946
|
+
"borderRadius": 8,
|
|
2947
|
+
"height": 44,
|
|
2948
|
+
"opacity": 0.75,
|
|
2949
|
+
"width": 44,
|
|
2950
|
+
}
|
|
2966
2951
|
}
|
|
2967
2952
|
/>
|
|
2968
2953
|
</View>
|
|
@@ -2977,35 +2962,29 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
2977
2962
|
}
|
|
2978
2963
|
>
|
|
2979
2964
|
<View
|
|
2965
|
+
collapsable={false}
|
|
2980
2966
|
style={
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
{
|
|
2990
|
-
"opacity": 0.75,
|
|
2991
|
-
},
|
|
2992
|
-
]
|
|
2967
|
+
{
|
|
2968
|
+
"backgroundColor": "#E8EBF1",
|
|
2969
|
+
"borderCurve": "continuous",
|
|
2970
|
+
"borderRadius": 8,
|
|
2971
|
+
"height": 16,
|
|
2972
|
+
"opacity": 0.75,
|
|
2973
|
+
"width": 62,
|
|
2974
|
+
}
|
|
2993
2975
|
}
|
|
2994
2976
|
/>
|
|
2995
2977
|
<View
|
|
2978
|
+
collapsable={false}
|
|
2996
2979
|
style={
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
{
|
|
3006
|
-
"opacity": 0.75,
|
|
3007
|
-
},
|
|
3008
|
-
]
|
|
2980
|
+
{
|
|
2981
|
+
"backgroundColor": "#E8EBF1",
|
|
2982
|
+
"borderCurve": "continuous",
|
|
2983
|
+
"borderRadius": 8,
|
|
2984
|
+
"height": 16,
|
|
2985
|
+
"opacity": 0.75,
|
|
2986
|
+
"width": 107,
|
|
2987
|
+
}
|
|
3009
2988
|
}
|
|
3010
2989
|
/>
|
|
3011
2990
|
</View>
|
|
@@ -3017,19 +2996,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
3017
2996
|
}
|
|
3018
2997
|
>
|
|
3019
2998
|
<View
|
|
2999
|
+
collapsable={false}
|
|
3020
3000
|
style={
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
{
|
|
3030
|
-
"opacity": 0.75,
|
|
3031
|
-
},
|
|
3032
|
-
]
|
|
3001
|
+
{
|
|
3002
|
+
"backgroundColor": "#E8EBF1",
|
|
3003
|
+
"borderCurve": "continuous",
|
|
3004
|
+
"borderRadius": 8,
|
|
3005
|
+
"height": 24,
|
|
3006
|
+
"opacity": 0.75,
|
|
3007
|
+
"width": 70,
|
|
3008
|
+
}
|
|
3033
3009
|
}
|
|
3034
3010
|
/>
|
|
3035
3011
|
</View>
|
|
@@ -50,7 +50,8 @@ export const ModuleCheckout = props => {
|
|
|
50
50
|
color: theme["textBody-tertiary"]
|
|
51
51
|
}, subtitle)));
|
|
52
52
|
return ctaText ? /*#__PURE__*/React.createElement(PressableModuleBase, {
|
|
53
|
-
onPress: onPress
|
|
53
|
+
onPress: onPress,
|
|
54
|
+
accessibilityLabel: subtitle ? `${title}, ${subtitle}, ${ctaText}` : `${title}, ${ctaText}`
|
|
54
55
|
}, /*#__PURE__*/React.createElement(HStack, {
|
|
55
56
|
space: 4,
|
|
56
57
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Image","StyleSheet","View","IOSelectionListItemVisualParams","useIOTheme","ButtonLink","LogoPayment","IOSkeleton","HStack","VStack","BodySmall","H6","ModuleStatic","PressableModuleBase","ModuleCheckout","props","theme","imageMargin","isLoading","createElement","ModuleCheckoutSkeleton","loadingAccessibilityLabel","paymentLogo","image","title","subtitle","ctaText","onPress","paymentLogoComponent","name","imageComponent","source","style","styles","accessibilityIgnoresInvertColors","ModuleBaseContent","space","alignItems","flexShrink","flexGrow","color","weight","pointerEvents","accessibilityElementsHidden","importantForAccessibility","label","accessible","
|
|
1
|
+
{"version":3,"names":["React","Image","StyleSheet","View","IOSelectionListItemVisualParams","useIOTheme","ButtonLink","LogoPayment","IOSkeleton","HStack","VStack","BodySmall","H6","ModuleStatic","PressableModuleBase","ModuleCheckout","props","theme","imageMargin","isLoading","createElement","ModuleCheckoutSkeleton","loadingAccessibilityLabel","paymentLogo","image","title","subtitle","ctaText","onPress","paymentLogoComponent","name","imageComponent","source","style","styles","accessibilityIgnoresInvertColors","ModuleBaseContent","space","alignItems","flexShrink","flexGrow","color","weight","accessibilityLabel","pointerEvents","accessibilityElementsHidden","importantForAccessibility","label","accessible","accessibilityState","busy","startBlock","shape","size","radius","width","height","endBlock","create","iconSize","resizeMode"],"sourceRoot":"../../../../src","sources":["components/modules/ModuleCheckout.tsx"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React, { useEffect, useMemo } from "react";
|
|
2
|
-
import
|
|
1
|
+
import React, { useEffect, useMemo, useRef } from "react";
|
|
2
|
+
import { Animated, Easing } from "react-native";
|
|
3
|
+
import { useReducedMotion } from "react-native-reanimated";
|
|
3
4
|
import { IOColors, useIOTheme } from "../../core";
|
|
4
5
|
const ANIMATION_DURATION = 1250;
|
|
5
6
|
const [OPACITY_MIN, OPACITY_MAX] = [0.35, 0.75];
|
|
@@ -15,7 +16,7 @@ export const IOSkeleton = ({
|
|
|
15
16
|
}) => {
|
|
16
17
|
const reduceMotion = useReducedMotion();
|
|
17
18
|
const theme = useIOTheme();
|
|
18
|
-
const opacity =
|
|
19
|
+
const opacity = useRef(new Animated.Value(OPACITY_MAX)).current;
|
|
19
20
|
const backgroundColor = color ?? IOColors[theme["skeleton-background"]];
|
|
20
21
|
const baseStyle = useMemo(() => ({
|
|
21
22
|
backgroundColor,
|
|
@@ -26,31 +27,30 @@ export const IOSkeleton = ({
|
|
|
26
27
|
}), [backgroundColor, shape, size, width, height, borderRadius]);
|
|
27
28
|
useEffect(() => {
|
|
28
29
|
if (reduceMotion) {
|
|
29
|
-
|
|
30
|
-
opacity.value = OPACITY_REDUCED_MOTION;
|
|
30
|
+
opacity.setValue(OPACITY_REDUCED_MOTION);
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
const
|
|
33
|
+
const animation = Animated.loop(Animated.sequence([Animated.timing(opacity, {
|
|
34
|
+
toValue: OPACITY_MIN,
|
|
34
35
|
duration: ANIMATION_DURATION / 2,
|
|
35
|
-
easing: Easing.inOut(Easing.sin)
|
|
36
|
-
|
|
36
|
+
easing: Easing.inOut(Easing.sin),
|
|
37
|
+
useNativeDriver: true
|
|
38
|
+
}), Animated.timing(opacity, {
|
|
39
|
+
toValue: OPACITY_MAX,
|
|
37
40
|
duration: ANIMATION_DURATION / 2,
|
|
38
|
-
easing: Easing.inOut(Easing.sin)
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
opacity.value = animationSequence;
|
|
41
|
+
easing: Easing.inOut(Easing.sin),
|
|
42
|
+
useNativeDriver: true
|
|
43
|
+
})]));
|
|
44
|
+
animation.start();
|
|
43
45
|
return () => {
|
|
44
|
-
|
|
46
|
+
animation.stop();
|
|
45
47
|
};
|
|
46
|
-
|
|
47
|
-
}, [reduceMotion]);
|
|
48
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
49
|
-
opacity: opacity.value
|
|
50
|
-
}));
|
|
48
|
+
}, [opacity, reduceMotion]);
|
|
51
49
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
52
50
|
testID: testID,
|
|
53
|
-
style: [baseStyle,
|
|
51
|
+
style: [baseStyle, {
|
|
52
|
+
opacity
|
|
53
|
+
}]
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
56
|
//# sourceMappingURL=IOSkeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useMemo","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useMemo","useRef","Animated","Easing","useReducedMotion","IOColors","useIOTheme","ANIMATION_DURATION","OPACITY_MIN","OPACITY_MAX","OPACITY_REDUCED_MOTION","IOSkeleton","shape","size","width","height","radius","borderRadius","color","testID","reduceMotion","theme","opacity","Value","current","backgroundColor","baseStyle","borderCurve","setValue","animation","loop","sequence","timing","toValue","duration","easing","inOut","sin","useNativeDriver","start","stop","createElement","View","style"],"sourceRoot":"../../../../src","sources":["components/skeleton/IOSkeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACzD,SACEC,QAAQ,EAGRC,MAAM,QAED,cAAc;AACrB,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,QAAQ,EAAEC,UAAU,QAAQ,YAAY;AAGjD,MAAMC,kBAAkB,GAAG,IAAI;AAC/B,MAAM,CAACC,WAAW,EAAEC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C,MAAMC,sBAAsB,GAAG,CAACD,WAAW,GAAGD,WAAW,IAAI,CAAC;AAwB9D,OAAO,MAAMG,UAAU,GAAGA,CAAC;EACzBC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,MAAM,EAAEC,YAAY;EACpBC,KAAK;EACLC;AACU,CAAC,KAAK;EAChB,MAAMC,YAAY,GAAGhB,gBAAgB,CAAC,CAAC;EACvC,MAAMiB,KAAK,GAAGf,UAAU,CAAC,CAAC;EAE1B,MAAMgB,OAAO,GAAGrB,MAAM,CAAC,IAAIC,QAAQ,CAACqB,KAAK,CAACd,WAAW,CAAC,CAAC,CAACe,OAAO;EAE/D,MAAMC,eAAe,GAAGP,KAAK,IAAIb,QAAQ,CAACgB,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAEvE,MAAMK,SAAoB,GAAG1B,OAAO,CAClC,OAAO;IACLyB,eAAe;IACfX,KAAK,EAAEF,KAAK,KAAK,QAAQ,GAAGC,IAAI,GAAGC,KAAK;IACxCC,MAAM,EAAEH,KAAK,KAAK,QAAQ,GAAGC,IAAI,GAAGE,MAAM;IAC1CE,YAAY;IACZU,WAAW,EAAE;EACf,CAAC,CAAC,EACF,CAACF,eAAe,EAAEb,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEE,YAAY,CAC5D,CAAC;EAEDlB,SAAS,CAAC,MAAM;IACd,IAAIqB,YAAY,EAAE;MAChBE,OAAO,CAACM,QAAQ,CAAClB,sBAAsB,CAAC;MACxC;IACF;IAEA,MAAMmB,SAAS,GAAG3B,QAAQ,CAAC4B,IAAI,CAC7B5B,QAAQ,CAAC6B,QAAQ,CAAC,CAChB7B,QAAQ,CAAC8B,MAAM,CAACV,OAAO,EAAE;MACvBW,OAAO,EAAEzB,WAAW;MACpB0B,QAAQ,EAAE3B,kBAAkB,GAAG,CAAC;MAChC4B,MAAM,EAAEhC,MAAM,CAACiC,KAAK,CAACjC,MAAM,CAACkC,GAAG,CAAC;MAChCC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFpC,QAAQ,CAAC8B,MAAM,CAACV,OAAO,EAAE;MACvBW,OAAO,EAAExB,WAAW;MACpByB,QAAQ,EAAE3B,kBAAkB,GAAG,CAAC;MAChC4B,MAAM,EAAEhC,MAAM,CAACiC,KAAK,CAACjC,MAAM,CAACkC,GAAG,CAAC;MAChCC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CACH,CAAC;IAEDT,SAAS,CAACU,KAAK,CAAC,CAAC;IAEjB,OAAO,MAAM;MACXV,SAAS,CAACW,IAAI,CAAC,CAAC;IAClB,CAAC;EACH,CAAC,EAAE,CAAClB,OAAO,EAAEF,YAAY,CAAC,CAAC;EAE3B,oBAAOtB,KAAA,CAAA2C,aAAA,CAACvC,QAAQ,CAACwC,IAAI;IAACvB,MAAM,EAAEA,MAAO;IAACwB,KAAK,EAAE,CAACjB,SAAS,EAAE;MAAEJ;IAAQ,CAAC;EAAE,CAAE,CAAC;AAC3E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModuleCheckout.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/ModuleCheckout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,mBAAmB,EACnB,cAAc,EAGf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,iBAAiB,EAAe,MAAM,UAAU,CAAC;AAO1D,KAAK,YAAY,GAAG;IAClB,SAAS,EAAE,IAAI,CAAC;IAChB,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GACX;IAAE,WAAW,EAAE,iBAAiB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,cAAc,GAAG,mBAAmB,CAAA;CAAE,GACpE;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE3C,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,UAAU,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE3D,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ModuleCheckout.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/ModuleCheckout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,mBAAmB,EACnB,cAAc,EAGf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,iBAAiB,EAAe,MAAM,UAAU,CAAC;AAO1D,KAAK,YAAY,GAAG;IAClB,SAAS,EAAE,IAAI,CAAC;IAChB,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GACX;IAAE,WAAW,EAAE,iBAAiB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,cAAc,GAAG,mBAAmB,CAAA;CAAE,GACpE;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE3C,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,UAAU,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE3D,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBAkExD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IOSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/IOSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"IOSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/IOSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAEL,UAAU,EACV,cAAc,EAGf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM/C,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,UAAU,CACjC,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CACF,CAAC;AAEF,eAAO,MAAM,UAAU,wEAQpB,UAAU,sBAkDZ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1395,19 +1395,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1395
1395
|
}
|
|
1396
1396
|
>
|
|
1397
1397
|
<View
|
|
1398
|
+
collapsable={false}
|
|
1398
1399
|
style={
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
{
|
|
1408
|
-
"opacity": 0.75,
|
|
1409
|
-
},
|
|
1410
|
-
]
|
|
1400
|
+
{
|
|
1401
|
+
"backgroundColor": "#E8EBF1",
|
|
1402
|
+
"borderCurve": "continuous",
|
|
1403
|
+
"borderRadius": 8,
|
|
1404
|
+
"height": 44,
|
|
1405
|
+
"opacity": 0.75,
|
|
1406
|
+
"width": 44,
|
|
1407
|
+
}
|
|
1411
1408
|
}
|
|
1412
1409
|
/>
|
|
1413
1410
|
</View>
|
|
@@ -1422,35 +1419,29 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1422
1419
|
}
|
|
1423
1420
|
>
|
|
1424
1421
|
<View
|
|
1422
|
+
collapsable={false}
|
|
1425
1423
|
style={
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
{
|
|
1435
|
-
"opacity": 0.75,
|
|
1436
|
-
},
|
|
1437
|
-
]
|
|
1424
|
+
{
|
|
1425
|
+
"backgroundColor": "#E8EBF1",
|
|
1426
|
+
"borderCurve": "continuous",
|
|
1427
|
+
"borderRadius": 8,
|
|
1428
|
+
"height": 16,
|
|
1429
|
+
"opacity": 0.75,
|
|
1430
|
+
"width": 62,
|
|
1431
|
+
}
|
|
1438
1432
|
}
|
|
1439
1433
|
/>
|
|
1440
1434
|
<View
|
|
1435
|
+
collapsable={false}
|
|
1441
1436
|
style={
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
{
|
|
1451
|
-
"opacity": 0.75,
|
|
1452
|
-
},
|
|
1453
|
-
]
|
|
1437
|
+
{
|
|
1438
|
+
"backgroundColor": "#E8EBF1",
|
|
1439
|
+
"borderCurve": "continuous",
|
|
1440
|
+
"borderRadius": 8,
|
|
1441
|
+
"height": 16,
|
|
1442
|
+
"opacity": 0.75,
|
|
1443
|
+
"width": 107,
|
|
1444
|
+
}
|
|
1454
1445
|
}
|
|
1455
1446
|
/>
|
|
1456
1447
|
</View>
|
|
@@ -1462,19 +1453,16 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S
|
|
|
1462
1453
|
}
|
|
1463
1454
|
>
|
|
1464
1455
|
<View
|
|
1456
|
+
collapsable={false}
|
|
1465
1457
|
style={
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
{
|
|
1475
|
-
"opacity": 0.75,
|
|
1476
|
-
},
|
|
1477
|
-
]
|
|
1458
|
+
{
|
|
1459
|
+
"backgroundColor": "#E8EBF1",
|
|
1460
|
+
"borderCurve": "continuous",
|
|
1461
|
+
"borderRadius": 8,
|
|
1462
|
+
"height": 24,
|
|
1463
|
+
"opacity": 0.75,
|
|
1464
|
+
"width": 70,
|
|
1465
|
+
}
|
|
1478
1466
|
}
|
|
1479
1467
|
/>
|
|
1480
1468
|
</View>
|
|
@@ -2950,19 +2938,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
2950
2938
|
}
|
|
2951
2939
|
>
|
|
2952
2940
|
<View
|
|
2941
|
+
collapsable={false}
|
|
2953
2942
|
style={
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
{
|
|
2963
|
-
"opacity": 0.75,
|
|
2964
|
-
},
|
|
2965
|
-
]
|
|
2943
|
+
{
|
|
2944
|
+
"backgroundColor": "#E8EBF1",
|
|
2945
|
+
"borderCurve": "continuous",
|
|
2946
|
+
"borderRadius": 8,
|
|
2947
|
+
"height": 44,
|
|
2948
|
+
"opacity": 0.75,
|
|
2949
|
+
"width": 44,
|
|
2950
|
+
}
|
|
2966
2951
|
}
|
|
2967
2952
|
/>
|
|
2968
2953
|
</View>
|
|
@@ -2977,35 +2962,29 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
2977
2962
|
}
|
|
2978
2963
|
>
|
|
2979
2964
|
<View
|
|
2965
|
+
collapsable={false}
|
|
2980
2966
|
style={
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
{
|
|
2990
|
-
"opacity": 0.75,
|
|
2991
|
-
},
|
|
2992
|
-
]
|
|
2967
|
+
{
|
|
2968
|
+
"backgroundColor": "#E8EBF1",
|
|
2969
|
+
"borderCurve": "continuous",
|
|
2970
|
+
"borderRadius": 8,
|
|
2971
|
+
"height": 16,
|
|
2972
|
+
"opacity": 0.75,
|
|
2973
|
+
"width": 62,
|
|
2974
|
+
}
|
|
2993
2975
|
}
|
|
2994
2976
|
/>
|
|
2995
2977
|
<View
|
|
2978
|
+
collapsable={false}
|
|
2996
2979
|
style={
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
{
|
|
3006
|
-
"opacity": 0.75,
|
|
3007
|
-
},
|
|
3008
|
-
]
|
|
2980
|
+
{
|
|
2981
|
+
"backgroundColor": "#E8EBF1",
|
|
2982
|
+
"borderCurve": "continuous",
|
|
2983
|
+
"borderRadius": 8,
|
|
2984
|
+
"height": 16,
|
|
2985
|
+
"opacity": 0.75,
|
|
2986
|
+
"width": 107,
|
|
2987
|
+
}
|
|
3009
2988
|
}
|
|
3010
2989
|
/>
|
|
3011
2990
|
</View>
|
|
@@ -3017,19 +2996,16 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
|
|
|
3017
2996
|
}
|
|
3018
2997
|
>
|
|
3019
2998
|
<View
|
|
2999
|
+
collapsable={false}
|
|
3020
3000
|
style={
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
{
|
|
3030
|
-
"opacity": 0.75,
|
|
3031
|
-
},
|
|
3032
|
-
]
|
|
3001
|
+
{
|
|
3002
|
+
"backgroundColor": "#E8EBF1",
|
|
3003
|
+
"borderCurve": "continuous",
|
|
3004
|
+
"borderRadius": 8,
|
|
3005
|
+
"height": 24,
|
|
3006
|
+
"opacity": 0.75,
|
|
3007
|
+
"width": 70,
|
|
3008
|
+
}
|
|
3033
3009
|
}
|
|
3034
3010
|
/>
|
|
3035
3011
|
</View>
|
|
@@ -84,7 +84,12 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
|
|
|
84
84
|
);
|
|
85
85
|
|
|
86
86
|
return ctaText ? (
|
|
87
|
-
<PressableModuleBase
|
|
87
|
+
<PressableModuleBase
|
|
88
|
+
onPress={onPress}
|
|
89
|
+
accessibilityLabel={
|
|
90
|
+
subtitle ? `${title}, ${subtitle}, ${ctaText}` : `${title}, ${ctaText}`
|
|
91
|
+
}
|
|
92
|
+
>
|
|
88
93
|
<HStack space={4} style={{ alignItems: "center" }}>
|
|
89
94
|
<ModuleBaseContent />
|
|
90
95
|
<View
|
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import React, { useEffect, useMemo } from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import React, { useEffect, useMemo, useRef } from "react";
|
|
2
|
+
import {
|
|
3
|
+
Animated,
|
|
4
|
+
ColorValue,
|
|
5
|
+
DimensionValue,
|
|
5
6
|
Easing,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
withRepeat,
|
|
10
|
-
withSequence,
|
|
11
|
-
withTiming
|
|
12
|
-
} from "react-native-reanimated";
|
|
7
|
+
ViewStyle
|
|
8
|
+
} from "react-native";
|
|
9
|
+
import { useReducedMotion } from "react-native-reanimated";
|
|
13
10
|
import { IOColors, useIOTheme } from "../../core";
|
|
14
11
|
import { WithTestID } from "../../utils/types";
|
|
15
12
|
|
|
@@ -51,9 +48,7 @@ export const IOSkeleton = ({
|
|
|
51
48
|
const reduceMotion = useReducedMotion();
|
|
52
49
|
const theme = useIOTheme();
|
|
53
50
|
|
|
54
|
-
const opacity =
|
|
55
|
-
reduceMotion ? OPACITY_REDUCED_MOTION : OPACITY_MAX
|
|
56
|
-
);
|
|
51
|
+
const opacity = useRef(new Animated.Value(OPACITY_MAX)).current;
|
|
57
52
|
|
|
58
53
|
const backgroundColor = color ?? IOColors[theme["skeleton-background"]];
|
|
59
54
|
|
|
@@ -70,38 +65,33 @@ export const IOSkeleton = ({
|
|
|
70
65
|
|
|
71
66
|
useEffect(() => {
|
|
72
67
|
if (reduceMotion) {
|
|
73
|
-
|
|
74
|
-
opacity.value = OPACITY_REDUCED_MOTION;
|
|
68
|
+
opacity.setValue(OPACITY_REDUCED_MOTION);
|
|
75
69
|
return;
|
|
76
70
|
}
|
|
77
71
|
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
72
|
+
const animation = Animated.loop(
|
|
73
|
+
Animated.sequence([
|
|
74
|
+
Animated.timing(opacity, {
|
|
75
|
+
toValue: OPACITY_MIN,
|
|
81
76
|
duration: ANIMATION_DURATION / 2,
|
|
82
|
-
easing: Easing.inOut(Easing.sin)
|
|
77
|
+
easing: Easing.inOut(Easing.sin),
|
|
78
|
+
useNativeDriver: true
|
|
83
79
|
}),
|
|
84
|
-
|
|
80
|
+
Animated.timing(opacity, {
|
|
81
|
+
toValue: OPACITY_MAX,
|
|
85
82
|
duration: ANIMATION_DURATION / 2,
|
|
86
|
-
easing: Easing.inOut(Easing.sin)
|
|
83
|
+
easing: Easing.inOut(Easing.sin),
|
|
84
|
+
useNativeDriver: true
|
|
87
85
|
})
|
|
88
|
-
)
|
|
89
|
-
-1,
|
|
90
|
-
true
|
|
86
|
+
])
|
|
91
87
|
);
|
|
92
88
|
|
|
93
|
-
|
|
94
|
-
opacity.value = animationSequence;
|
|
89
|
+
animation.start();
|
|
95
90
|
|
|
96
91
|
return () => {
|
|
97
|
-
|
|
92
|
+
animation.stop();
|
|
98
93
|
};
|
|
99
|
-
|
|
100
|
-
}, [reduceMotion]);
|
|
101
|
-
|
|
102
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
103
|
-
opacity: opacity.value
|
|
104
|
-
}));
|
|
94
|
+
}, [opacity, reduceMotion]);
|
|
105
95
|
|
|
106
|
-
return <Animated.View testID={testID} style={[baseStyle,
|
|
96
|
+
return <Animated.View testID={testID} style={[baseStyle, { opacity }]} />;
|
|
107
97
|
};
|