@pagopa/io-app-design-system 4.5.5 → 4.5.6

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.
Files changed (104) hide show
  1. package/lib/commonjs/components/banner/Banner.js +3 -2
  2. package/lib/commonjs/components/banner/Banner.js.map +1 -1
  3. package/lib/commonjs/components/banner/__test__/__snapshots__/banner.test.tsx.snap +56 -0
  4. package/lib/commonjs/components/buttons/ButtonLink.js +1 -1
  5. package/lib/commonjs/components/buttons/ButtonSolid.js +1 -1
  6. package/lib/commonjs/components/buttons/ButtonSolid.js.map +1 -1
  7. package/lib/commonjs/components/checkbox/AnimatedCheckbox.js +8 -5
  8. package/lib/commonjs/components/checkbox/AnimatedCheckbox.js.map +1 -1
  9. package/lib/commonjs/components/checkbox/AnimatedMessageCheckbox.js +4 -2
  10. package/lib/commonjs/components/checkbox/AnimatedMessageCheckbox.js.map +1 -1
  11. package/lib/commonjs/components/listitems/ListItemCheckbox.js +1 -1
  12. package/lib/commonjs/components/listitems/ListItemCheckbox.js.map +1 -1
  13. package/lib/commonjs/components/listitems/ListItemRadio.js +1 -1
  14. package/lib/commonjs/components/listitems/ListItemRadio.js.map +1 -1
  15. package/lib/commonjs/components/listitems/ListItemSwitch.js +1 -1
  16. package/lib/commonjs/components/listitems/ListItemSwitch.js.map +1 -1
  17. package/lib/commonjs/components/radio/AnimatedRadio.js +8 -5
  18. package/lib/commonjs/components/radio/AnimatedRadio.js.map +1 -1
  19. package/lib/commonjs/components/switch/NativeSwitch.js +5 -5
  20. package/lib/commonjs/components/switch/NativeSwitch.js.map +1 -1
  21. package/lib/commonjs/components/switch/index.js +0 -22
  22. package/lib/commonjs/components/switch/index.js.map +1 -1
  23. package/lib/commonjs/core/IOColors.js +27 -5
  24. package/lib/commonjs/core/IOColors.js.map +1 -1
  25. package/lib/commonjs/core/IOStyles.js +2 -16
  26. package/lib/commonjs/core/IOStyles.js.map +1 -1
  27. package/lib/module/components/banner/Banner.js +3 -2
  28. package/lib/module/components/banner/Banner.js.map +1 -1
  29. package/lib/module/components/banner/__test__/__snapshots__/banner.test.tsx.snap +56 -0
  30. package/lib/module/components/buttons/ButtonLink.js +1 -1
  31. package/lib/module/components/buttons/ButtonSolid.js +1 -1
  32. package/lib/module/components/buttons/ButtonSolid.js.map +1 -1
  33. package/lib/module/components/checkbox/AnimatedCheckbox.js +9 -6
  34. package/lib/module/components/checkbox/AnimatedCheckbox.js.map +1 -1
  35. package/lib/module/components/checkbox/AnimatedMessageCheckbox.js +6 -4
  36. package/lib/module/components/checkbox/AnimatedMessageCheckbox.js.map +1 -1
  37. package/lib/module/components/listitems/ListItemCheckbox.js +1 -1
  38. package/lib/module/components/listitems/ListItemCheckbox.js.map +1 -1
  39. package/lib/module/components/listitems/ListItemRadio.js +1 -1
  40. package/lib/module/components/listitems/ListItemRadio.js.map +1 -1
  41. package/lib/module/components/listitems/ListItemSwitch.js +1 -1
  42. package/lib/module/components/listitems/ListItemSwitch.js.map +1 -1
  43. package/lib/module/components/radio/AnimatedRadio.js +9 -6
  44. package/lib/module/components/radio/AnimatedRadio.js.map +1 -1
  45. package/lib/module/components/switch/NativeSwitch.js +6 -6
  46. package/lib/module/components/switch/NativeSwitch.js.map +1 -1
  47. package/lib/module/components/switch/index.js +0 -2
  48. package/lib/module/components/switch/index.js.map +1 -1
  49. package/lib/module/core/IOColors.js +27 -5
  50. package/lib/module/core/IOColors.js.map +1 -1
  51. package/lib/module/core/IOStyles.js +1 -14
  52. package/lib/module/core/IOStyles.js.map +1 -1
  53. package/lib/typescript/components/banner/Banner.d.ts.map +1 -1
  54. package/lib/typescript/components/checkbox/AnimatedCheckbox.d.ts.map +1 -1
  55. package/lib/typescript/components/checkbox/AnimatedMessageCheckbox.d.ts.map +1 -1
  56. package/lib/typescript/components/switch/NativeSwitch.d.ts.map +1 -1
  57. package/lib/typescript/components/switch/index.d.ts +0 -2
  58. package/lib/typescript/components/switch/index.d.ts.map +1 -1
  59. package/lib/typescript/components/typography/BodyMonospace.d.ts +1 -1
  60. package/lib/typescript/components/typography/ButtonText.d.ts +1 -1
  61. package/lib/typescript/components/typography/Caption.d.ts +1 -1
  62. package/lib/typescript/components/typography/H1.d.ts +1 -1
  63. package/lib/typescript/components/typography/H2.d.ts +1 -1
  64. package/lib/typescript/components/typography/H3.d.ts +1 -1
  65. package/lib/typescript/components/typography/H4.d.ts +1 -1
  66. package/lib/typescript/components/typography/H5.d.ts +1 -1
  67. package/lib/typescript/components/typography/H6.d.ts +1 -1
  68. package/lib/typescript/components/typography/Hero.d.ts +1 -1
  69. package/lib/typescript/components/typography/markdown/MdH1.d.ts +1 -1
  70. package/lib/typescript/components/typography/markdown/MdH2.d.ts +1 -1
  71. package/lib/typescript/components/typography/markdown/MdH3.d.ts +1 -1
  72. package/lib/typescript/core/IOColors.d.ts +4 -1
  73. package/lib/typescript/core/IOColors.d.ts.map +1 -1
  74. package/lib/typescript/core/IOStyles.d.ts +0 -13
  75. package/lib/typescript/core/IOStyles.d.ts.map +1 -1
  76. package/package.json +1 -1
  77. package/src/components/banner/Banner.tsx +3 -2
  78. package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap +56 -0
  79. package/src/components/buttons/ButtonLink.tsx +1 -1
  80. package/src/components/buttons/ButtonSolid.tsx +1 -1
  81. package/src/components/checkbox/AnimatedCheckbox.tsx +9 -10
  82. package/src/components/checkbox/AnimatedMessageCheckbox.tsx +5 -5
  83. package/src/components/listitems/ListItemCheckbox.tsx +1 -1
  84. package/src/components/listitems/ListItemRadio.tsx +1 -1
  85. package/src/components/listitems/ListItemSwitch.tsx +1 -1
  86. package/src/components/radio/AnimatedRadio.tsx +10 -10
  87. package/src/components/switch/NativeSwitch.tsx +6 -6
  88. package/src/components/switch/index.tsx +0 -2
  89. package/src/core/IOColors.ts +32 -4
  90. package/src/core/IOStyles.ts +1 -28
  91. package/lib/commonjs/components/switch/AnimatedSwitch.js +0 -94
  92. package/lib/commonjs/components/switch/AnimatedSwitch.js.map +0 -1
  93. package/lib/commonjs/components/switch/SwitchLabel.js +0 -76
  94. package/lib/commonjs/components/switch/SwitchLabel.js.map +0 -1
  95. package/lib/module/components/switch/AnimatedSwitch.js +0 -85
  96. package/lib/module/components/switch/AnimatedSwitch.js.map +0 -1
  97. package/lib/module/components/switch/SwitchLabel.js +0 -68
  98. package/lib/module/components/switch/SwitchLabel.js.map +0 -1
  99. package/lib/typescript/components/switch/AnimatedSwitch.d.ts +0 -13
  100. package/lib/typescript/components/switch/AnimatedSwitch.d.ts.map +0 -1
  101. package/lib/typescript/components/switch/SwitchLabel.d.ts +0 -18
  102. package/lib/typescript/components/switch/SwitchLabel.d.ts.map +0 -1
  103. package/src/components/switch/AnimatedSwitch.tsx +0 -126
  104. package/src/components/switch/SwitchLabel.tsx +0 -80
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
2
  import { Platform, Switch, SwitchProps } from "react-native";
3
- import { useIOExperimentalDesign } from "../../core";
3
+ import { useIOExperimentalDesign, useIOTheme } from "../../core";
4
4
  import { IOColors } from "../../core/IOColors";
5
- import { IOSwitchVisualParams } from "../../core/IOStyles";
6
5
 
7
6
  type OwnProps = Pick<
8
7
  SwitchProps,
@@ -25,10 +24,11 @@ export const NativeSwitch = ({
25
24
  value,
26
25
  ...accessibility
27
26
  }: OwnProps) => {
27
+ const theme = useIOTheme();
28
28
  const { isExperimental } = useIOExperimentalDesign();
29
29
  const trackColor = {
30
- false: IOColors[IOSwitchVisualParams.bgColorOffState],
31
- true: IOColors[IOSwitchVisualParams.bgColorOnState]
30
+ false: IOColors[theme["switch-background-off"]],
31
+ true: IOColors[theme["switch-background-on"]]
32
32
  };
33
33
 
34
34
  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
@@ -45,10 +45,10 @@ export const NativeSwitch = ({
45
45
  accessibilityRole="switch"
46
46
  accessibilityState={{ checked: value, disabled: accessibility.disabled }}
47
47
  trackColor={trackColorComponent}
48
- thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
48
+ thumbColor={IOColors[theme["switch-thumb-color"]]}
49
49
  ios_backgroundColor={
50
50
  isExperimental
51
- ? IOColors[IOSwitchVisualParams.bgColorOffState]
51
+ ? IOColors[theme["switch-background-off"]]
52
52
  : bgLegacyTrackColorAndroid
53
53
  }
54
54
  onValueChange={onValueChange}
@@ -1,3 +1 @@
1
- export * from "./SwitchLabel";
2
- export * from "./AnimatedSwitch";
3
1
  export * from "./NativeSwitch";
@@ -40,6 +40,7 @@ export const IOColors = asIOColors({
40
40
  "blueIO-600": "#0932B6",
41
41
  "blueIO-500": "#0B3EE3",
42
42
  "blueIO-400": "#3C65E9",
43
+ "blueIO-300": "#6D8BEE",
43
44
  "blueIO-200": "#9DB2F4",
44
45
  "blueIO-150": "#B6C5F7",
45
46
  "blueIO-100": "#CED8F9",
@@ -152,6 +153,8 @@ export const IOColorsTints = asIOColors({
152
153
  "blueIO-850": IOColors["blueIO-850"],
153
154
  "blueIO-600": IOColors["blueIO-600"],
154
155
  "blueIO-500": IOColors["blueIO-500"],
156
+ "blueIO-400": IOColors["blueIO-400"],
157
+ "blueIO-300": IOColors["blueIO-300"],
155
158
  "blueIO-200": IOColors["blueIO-200"],
156
159
  "blueIO-150": IOColors["blueIO-150"],
157
160
  "blueIO-100": IOColors["blueIO-100"],
@@ -227,6 +230,7 @@ const themeKeys = [
227
230
  "neutralButton-pressed",
228
231
  "neutralButton-disabled",
229
232
  "buttonText-default",
233
+ "buttonText-danger",
230
234
  "buttonText-disabled",
231
235
  "listItem-pressed",
232
236
  // Typography
@@ -246,6 +250,13 @@ const themeKeys = [
246
250
  "textInputLabel-default",
247
251
  "textInputValue-default",
248
252
  "textInputValue-disabled",
253
+ // Selection (Radio, Checkbox, Switch)
254
+ "switch-background-off",
255
+ "switch-background-on",
256
+ "switch-thumb-color",
257
+ "selection-border-off",
258
+ "selection-background-on",
259
+ "selection-tick",
249
260
  // Layout
250
261
  "divider-header",
251
262
  "divider-default",
@@ -289,6 +300,7 @@ export const IOThemeLight: IOTheme = {
289
300
  "neutralButton-pressed": "grey-850",
290
301
  "neutralButton-disabled": "grey-450",
291
302
  "buttonText-default": "white",
303
+ "buttonText-danger": "white",
292
304
  "buttonText-disabled": "grey-700",
293
305
  "listItem-pressed": "grey-50",
294
306
  // Typography
@@ -307,6 +319,13 @@ export const IOThemeLight: IOTheme = {
307
319
  "textInputLabel-default": "grey-700",
308
320
  "textInputValue-default": "black",
309
321
  "textInputValue-disabled": "grey-850",
322
+ // Selection (Radio, Checkbox, Switch)
323
+ "switch-background-off": "grey-700",
324
+ "switch-background-on": "blueIO-500",
325
+ "switch-thumb-color": "white",
326
+ "selection-border-off": "grey-650",
327
+ "selection-background-on": "blueIO-500",
328
+ "selection-tick": "white",
310
329
  // Layout
311
330
  "divider-header": "grey-100",
312
331
  "divider-default": "grey-200",
@@ -335,7 +354,8 @@ export const IOThemeLightLegacy: IOTheme = {
335
354
  ...IOThemeLight,
336
355
  "appBackground-accent": "blue-500",
337
356
  "interactiveElem-default": "blue-500",
338
- "pictogram-hands": "blue-500"
357
+ "pictogram-hands": "blue-500",
358
+ "selection-tick": "white"
339
359
  };
340
360
 
341
361
  export const IOThemeDark: IOTheme = {
@@ -344,14 +364,15 @@ export const IOThemeDark: IOTheme = {
344
364
  "appBackground-primary": "black",
345
365
  "appBackground-secondary": "grey-850",
346
366
  "appBackground-tertiary": "grey-700",
347
- "interactiveElem-default": "blueIO-400",
348
- "interactiveElem-pressed": "blueIO-500",
367
+ "interactiveElem-default": "blueIO-300",
368
+ "interactiveElem-pressed": "blueIO-400",
349
369
  "interactiveElem-disabled": "grey-700",
350
370
  "interactiveOutline-disabled": "grey-450",
351
371
  "neutralButton-default": "white",
352
372
  "neutralButton-pressed": "grey-100",
353
373
  "neutralButton-disabled": "grey-850",
354
- "buttonText-default": "white",
374
+ "buttonText-default": "black",
375
+ "buttonText-danger": "white",
355
376
  "buttonText-disabled": "grey-300",
356
377
  "listItem-pressed": "grey-850",
357
378
  // Typography
@@ -370,6 +391,13 @@ export const IOThemeDark: IOTheme = {
370
391
  "textInputLabel-default": "grey-450",
371
392
  "textInputValue-default": "white",
372
393
  "textInputValue-disabled": "grey-100",
394
+ // Selection (Radio, Checkbox, Switch)
395
+ "switch-background-off": "grey-850",
396
+ "switch-background-on": "blueIO-300",
397
+ "switch-thumb-color": "white",
398
+ "selection-border-off": "grey-450",
399
+ "selection-background-on": "blueIO-300",
400
+ "selection-tick": "black",
373
401
  // Tab Item
374
402
  "tab-item-border-default": "grey-700",
375
403
  "tab-item-foreground-default": "grey-200",
@@ -311,19 +311,6 @@ export const IOModuleStyles = StyleSheet.create({
311
311
  interface IOSelectionTickVisualParams {
312
312
  size: IOIconSizeScale;
313
313
  borderWidth: number;
314
- borderColorOffState: IOColors;
315
- bgColorOnState: IOColors;
316
- tickColor: IOColors;
317
- }
318
-
319
- interface IOSwitchVisualParams {
320
- width: number;
321
- height: number;
322
- bgColorOffState: IOColors;
323
- bgColorOnState: IOColors;
324
- tickColor: IOColors;
325
- bgCircle: IOColors;
326
- padding: number;
327
314
  }
328
315
 
329
316
  interface IOSelectionTickLegacyVisualParams {
@@ -333,21 +320,7 @@ interface IOSelectionTickLegacyVisualParams {
333
320
 
334
321
  export const IOSelectionTickVisualParams: IOSelectionTickVisualParams = {
335
322
  size: 24,
336
- borderWidth: 2,
337
- borderColorOffState: "grey-650",
338
- bgColorOnState: "blueIO-500",
339
- tickColor: "white"
340
- };
341
-
342
- export const IOSwitchVisualParams: IOSwitchVisualParams = {
343
- width: 40,
344
- height: 28,
345
- bgColorOffState: "grey-700",
346
- bgColorOnState: "blueIO-500",
347
- tickColor: "blueIO-500",
348
- bgCircle: "white",
349
- // Space between the circle and the main shape
350
- padding: 2
323
+ borderWidth: 2
351
324
  };
352
325
 
353
326
  export const IOSelectionTickLegacyVisualParams: IOSelectionTickLegacyVisualParams =
@@ -1,94 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.AnimatedSwitch = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _reactNative = require("react-native");
9
- var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
10
- var _IOAnimations = require("../../core/IOAnimations");
11
- var _IOColors = require("../../core/IOColors");
12
- var _IOStyles = require("../../core/IOStyles");
13
- var _AnimatedTick = require("../common/AnimatedTick");
14
- 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); }
15
- 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; }
16
- const SWITCH_CIRCLE_SIZE = _IOStyles.IOSwitchVisualParams.height - _IOStyles.IOSwitchVisualParams.padding * 2;
17
- const styles = _reactNative.StyleSheet.create({
18
- switchWrapper: {
19
- width: _IOStyles.IOSwitchVisualParams.width,
20
- height: _IOStyles.IOSwitchVisualParams.height
21
- },
22
- switchBackground: {
23
- position: "absolute",
24
- left: 0,
25
- top: 0,
26
- width: "100%",
27
- height: "100%",
28
- borderRadius: _IOStyles.IOSwitchVisualParams.width,
29
- backgroundColor: _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgColorOffState]
30
- },
31
- switchCircle: {
32
- position: "absolute",
33
- left: _IOStyles.IOSwitchVisualParams.padding,
34
- top: _IOStyles.IOSwitchVisualParams.padding,
35
- backgroundColor: _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgCircle],
36
- width: SWITCH_CIRCLE_SIZE,
37
- height: SWITCH_CIRCLE_SIZE,
38
- borderRadius: _IOStyles.IOSwitchVisualParams.width
39
- }
40
- });
41
-
42
- /**
43
- * An animated checkbox. This can be used to implement a
44
- * standard {@link CheckBox} or other composite components.
45
- */
46
- const AnimatedSwitch = ({
47
- checked,
48
- onPress,
49
- disabled
50
- }) => {
51
- const squareAnimationProgress = (0, _reactNativeReanimated.useSharedValue)(checked ? 1 : 0);
52
- const tickAnimationProgress = (0, _reactNativeReanimated.useSharedValue)(checked ? 1 : 0);
53
- (0, _react.useEffect)(() => {
54
- // eslint-disable-next-line functional/immutable-data
55
- squareAnimationProgress.value = (0, _reactNativeReanimated.withSpring)(checked ? 1 : 0, _IOAnimations.IOSpringValues.selection);
56
- // eslint-disable-next-line functional/immutable-data
57
- tickAnimationProgress.value = (0, _reactNativeReanimated.withTiming)(checked ? 1 : 0, {
58
- duration: 400,
59
- easing: _reactNativeReanimated.Easing.elastic(1)
60
- });
61
- }, [checked, squareAnimationProgress, tickAnimationProgress]);
62
- const animatedSwitchBg = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
63
- backgroundColor: (0, _reactNativeReanimated.interpolateColor)(squareAnimationProgress.value, [0, 1], [_IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgColorOffState], _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.bgColorOnState]])
64
- }), [squareAnimationProgress]);
65
- const animatedSwitchCircle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
66
- const translateX = (0, _reactNativeReanimated.interpolate)(squareAnimationProgress.value, [0, 1], [0, _IOStyles.IOSwitchVisualParams.width - SWITCH_CIRCLE_SIZE - 2 * _IOStyles.IOSwitchVisualParams.padding]);
67
- return {
68
- transform: [{
69
- translateX
70
- }]
71
- };
72
- });
73
- const animatedSwitchTick = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
74
- opacity: tickAnimationProgress.value
75
- }));
76
- return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
77
- accessibilityRole: "switch",
78
- disabled: disabled,
79
- testID: "AnimatedSwitch",
80
- onPress: onPress,
81
- style: styles.switchWrapper
82
- }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
83
- style: [styles.switchBackground, animatedSwitchBg]
84
- }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
85
- style: [styles.switchCircle, animatedSwitchCircle]
86
- }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
87
- style: animatedSwitchTick
88
- }, /*#__PURE__*/_react.default.createElement(_AnimatedTick.AnimatedTick, {
89
- progress: tickAnimationProgress,
90
- stroke: _IOColors.IOColors[_IOStyles.IOSwitchVisualParams.tickColor]
91
- }))));
92
- };
93
- exports.AnimatedSwitch = AnimatedSwitch;
94
- //# sourceMappingURL=AnimatedSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_IOAnimations","_IOColors","_IOStyles","_AnimatedTick","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SWITCH_CIRCLE_SIZE","IOSwitchVisualParams","height","padding","styles","StyleSheet","create","switchWrapper","width","switchBackground","position","left","top","borderRadius","backgroundColor","IOColors","bgColorOffState","switchCircle","bgCircle","AnimatedSwitch","checked","onPress","disabled","squareAnimationProgress","useSharedValue","tickAnimationProgress","useEffect","value","withSpring","IOSpringValues","selection","withTiming","duration","easing","Easing","elastic","animatedSwitchBg","useAnimatedStyle","interpolateColor","bgColorOnState","animatedSwitchCircle","translateX","interpolate","transform","animatedSwitchTick","opacity","createElement","Pressable","accessibilityRole","testID","style","View","AnimatedTick","progress","stroke","tickColor","exports"],"sourceRoot":"../../../../src","sources":["components/switch/AnimatedSwitch.tsx"],"mappings":"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"}
@@ -1,76 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SwitchLabel = void 0;
7
- var React = _interopRequireWildcard(require("react"));
8
- var _reactNative = require("react-native");
9
- var _core = require("../../core");
10
- var _IOStyles = require("../../core/IOStyles");
11
- var _hapticFeedback = require("../../functions/haptic-feedback/hapticFeedback");
12
- var _Spacer = require("../spacer/Spacer");
13
- var _H = require("../typography/H6");
14
- var _AnimatedSwitch = require("./AnimatedSwitch");
15
- 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); }
16
- 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; }
17
- const DISABLED_OPACITY = 0.5;
18
-
19
- // disabled: the component is no longer touchable
20
- // onPress:
21
- /**
22
- * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
23
- * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
24
- *
25
- * @param props
26
- * @constructor
27
- */
28
- const SwitchLabel = ({
29
- label,
30
- checked,
31
- disabled,
32
- onValueChange
33
- }) => {
34
- const theme = (0, _core.useIOTheme)();
35
- const [toggleValue, setToggleValue] = (0, React.useState)(checked ?? false);
36
- const toggleCheckbox = () => {
37
- (0, _hapticFeedback.triggerHaptic)("impactLight");
38
- setToggleValue(!toggleValue);
39
- if (onValueChange !== undefined) {
40
- onValueChange(!toggleValue);
41
- }
42
- };
43
- return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
44
- disabled: disabled,
45
- onPress: toggleCheckbox,
46
- accessibilityRole: "switch",
47
- accessibilityState: {
48
- checked: checked ?? toggleValue,
49
- disabled: !!disabled
50
- },
51
- style: {
52
- alignSelf: "flex-start",
53
- opacity: disabled ? DISABLED_OPACITY : 1
54
- },
55
- testID: "SwitchLabel"
56
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
57
- style: [_IOStyles.IOStyles.row, {
58
- alignItems: "flex-start",
59
- flexShrink: 1,
60
- width: "100%"
61
- }]
62
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
63
- pointerEvents: "none"
64
- }, /*#__PURE__*/React.createElement(_AnimatedSwitch.AnimatedSwitch, {
65
- checked: checked ?? toggleValue
66
- })), /*#__PURE__*/React.createElement(_Spacer.HSpacer, {
67
- size: 8
68
- }), /*#__PURE__*/React.createElement(_H.H6, {
69
- style: {
70
- flexShrink: 1
71
- },
72
- color: theme["textBody-default"]
73
- }, label)));
74
- };
75
- exports.SwitchLabel = SwitchLabel;
76
- //# sourceMappingURL=SwitchLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_core","_IOStyles","_hapticFeedback","_Spacer","_H","_AnimatedSwitch","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","DISABLED_OPACITY","SwitchLabel","label","checked","disabled","onValueChange","theme","useIOTheme","toggleValue","setToggleValue","useState","toggleCheckbox","triggerHaptic","undefined","createElement","Pressable","onPress","accessibilityRole","accessibilityState","style","alignSelf","opacity","testID","View","IOStyles","row","alignItems","flexShrink","width","pointerEvents","AnimatedSwitch","HSpacer","size","H6","color","exports"],"sourceRoot":"../../../../src","sources":["components/switch/SwitchLabel.tsx"],"mappings":"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"}
@@ -1,85 +0,0 @@
1
- import React, { useEffect } from "react";
2
- import { Pressable, StyleSheet } from "react-native";
3
- import Animated, { Easing, interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
4
- import { IOSpringValues } from "../../core/IOAnimations";
5
- import { IOColors } from "../../core/IOColors";
6
- import { IOSwitchVisualParams } from "../../core/IOStyles";
7
- import { AnimatedTick } from "../common/AnimatedTick";
8
- const SWITCH_CIRCLE_SIZE = IOSwitchVisualParams.height - IOSwitchVisualParams.padding * 2;
9
- const styles = StyleSheet.create({
10
- switchWrapper: {
11
- width: IOSwitchVisualParams.width,
12
- height: IOSwitchVisualParams.height
13
- },
14
- switchBackground: {
15
- position: "absolute",
16
- left: 0,
17
- top: 0,
18
- width: "100%",
19
- height: "100%",
20
- borderRadius: IOSwitchVisualParams.width,
21
- backgroundColor: IOColors[IOSwitchVisualParams.bgColorOffState]
22
- },
23
- switchCircle: {
24
- position: "absolute",
25
- left: IOSwitchVisualParams.padding,
26
- top: IOSwitchVisualParams.padding,
27
- backgroundColor: IOColors[IOSwitchVisualParams.bgCircle],
28
- width: SWITCH_CIRCLE_SIZE,
29
- height: SWITCH_CIRCLE_SIZE,
30
- borderRadius: IOSwitchVisualParams.width
31
- }
32
- });
33
-
34
- /**
35
- * An animated checkbox. This can be used to implement a
36
- * standard {@link CheckBox} or other composite components.
37
- */
38
- export const AnimatedSwitch = ({
39
- checked,
40
- onPress,
41
- disabled
42
- }) => {
43
- const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
44
- const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
45
- useEffect(() => {
46
- // eslint-disable-next-line functional/immutable-data
47
- squareAnimationProgress.value = withSpring(checked ? 1 : 0, IOSpringValues.selection);
48
- // eslint-disable-next-line functional/immutable-data
49
- tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
50
- duration: 400,
51
- easing: Easing.elastic(1)
52
- });
53
- }, [checked, squareAnimationProgress, tickAnimationProgress]);
54
- const animatedSwitchBg = useAnimatedStyle(() => ({
55
- backgroundColor: interpolateColor(squareAnimationProgress.value, [0, 1], [IOColors[IOSwitchVisualParams.bgColorOffState], IOColors[IOSwitchVisualParams.bgColorOnState]])
56
- }), [squareAnimationProgress]);
57
- const animatedSwitchCircle = useAnimatedStyle(() => {
58
- const translateX = interpolate(squareAnimationProgress.value, [0, 1], [0, IOSwitchVisualParams.width - SWITCH_CIRCLE_SIZE - 2 * IOSwitchVisualParams.padding]);
59
- return {
60
- transform: [{
61
- translateX
62
- }]
63
- };
64
- });
65
- const animatedSwitchTick = useAnimatedStyle(() => ({
66
- opacity: tickAnimationProgress.value
67
- }));
68
- return /*#__PURE__*/React.createElement(Pressable, {
69
- accessibilityRole: "switch",
70
- disabled: disabled,
71
- testID: "AnimatedSwitch",
72
- onPress: onPress,
73
- style: styles.switchWrapper
74
- }, /*#__PURE__*/React.createElement(Animated.View, {
75
- style: [styles.switchBackground, animatedSwitchBg]
76
- }), /*#__PURE__*/React.createElement(Animated.View, {
77
- style: [styles.switchCircle, animatedSwitchCircle]
78
- }, /*#__PURE__*/React.createElement(Animated.View, {
79
- style: animatedSwitchTick
80
- }, /*#__PURE__*/React.createElement(AnimatedTick, {
81
- progress: tickAnimationProgress,
82
- stroke: IOColors[IOSwitchVisualParams.tickColor]
83
- }))));
84
- };
85
- //# sourceMappingURL=AnimatedSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","useEffect","Pressable","StyleSheet","Animated","Easing","interpolate","interpolateColor","useAnimatedStyle","useSharedValue","withSpring","withTiming","IOSpringValues","IOColors","IOSwitchVisualParams","AnimatedTick","SWITCH_CIRCLE_SIZE","height","padding","styles","create","switchWrapper","width","switchBackground","position","left","top","borderRadius","backgroundColor","bgColorOffState","switchCircle","bgCircle","AnimatedSwitch","checked","onPress","disabled","squareAnimationProgress","tickAnimationProgress","value","selection","duration","easing","elastic","animatedSwitchBg","bgColorOnState","animatedSwitchCircle","translateX","transform","animatedSwitchTick","opacity","createElement","accessibilityRole","testID","style","View","progress","stroke","tickColor"],"sourceRoot":"../../../../src","sources":["components/switch/AnimatedSwitch.tsx"],"mappings":"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"}
@@ -1,68 +0,0 @@
1
- import * as React from "react";
2
- import { useState } from "react";
3
- import { Pressable, View } from "react-native";
4
- import { useIOTheme } from "../../core";
5
- import { IOStyles } from "../../core/IOStyles";
6
- import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
7
- import { HSpacer } from "../spacer/Spacer";
8
- import { H6 } from "../typography/H6";
9
- import { AnimatedSwitch } from "./AnimatedSwitch";
10
- const DISABLED_OPACITY = 0.5;
11
-
12
- // disabled: the component is no longer touchable
13
- // onPress:
14
- /**
15
- * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
16
- * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
17
- *
18
- * @param props
19
- * @constructor
20
- */
21
- export const SwitchLabel = ({
22
- label,
23
- checked,
24
- disabled,
25
- onValueChange
26
- }) => {
27
- const theme = useIOTheme();
28
- const [toggleValue, setToggleValue] = useState(checked ?? false);
29
- const toggleCheckbox = () => {
30
- triggerHaptic("impactLight");
31
- setToggleValue(!toggleValue);
32
- if (onValueChange !== undefined) {
33
- onValueChange(!toggleValue);
34
- }
35
- };
36
- return /*#__PURE__*/React.createElement(Pressable, {
37
- disabled: disabled,
38
- onPress: toggleCheckbox,
39
- accessibilityRole: "switch",
40
- accessibilityState: {
41
- checked: checked ?? toggleValue,
42
- disabled: !!disabled
43
- },
44
- style: {
45
- alignSelf: "flex-start",
46
- opacity: disabled ? DISABLED_OPACITY : 1
47
- },
48
- testID: "SwitchLabel"
49
- }, /*#__PURE__*/React.createElement(View, {
50
- style: [IOStyles.row, {
51
- alignItems: "flex-start",
52
- flexShrink: 1,
53
- width: "100%"
54
- }]
55
- }, /*#__PURE__*/React.createElement(View, {
56
- pointerEvents: "none"
57
- }, /*#__PURE__*/React.createElement(AnimatedSwitch, {
58
- checked: checked ?? toggleValue
59
- })), /*#__PURE__*/React.createElement(HSpacer, {
60
- size: 8
61
- }), /*#__PURE__*/React.createElement(H6, {
62
- style: {
63
- flexShrink: 1
64
- },
65
- color: theme["textBody-default"]
66
- }, label)));
67
- };
68
- //# sourceMappingURL=SwitchLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","useState","Pressable","View","useIOTheme","IOStyles","triggerHaptic","HSpacer","H6","AnimatedSwitch","DISABLED_OPACITY","SwitchLabel","label","checked","disabled","onValueChange","theme","toggleValue","setToggleValue","toggleCheckbox","undefined","createElement","onPress","accessibilityRole","accessibilityState","style","alignSelf","opacity","testID","row","alignItems","flexShrink","width","pointerEvents","size","color"],"sourceRoot":"../../../../src","sources":["components/switch/SwitchLabel.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAChC,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,gDAAgD;AAC9E,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,EAAE,QAAQ,kBAAkB;AACrC,SAASC,cAAc,QAAQ,kBAAkB;AAQjD,MAAMC,gBAAgB,GAAG,GAAG;;AAE5B;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC;AACQ,CAAC,KAAK;EACd,MAAMC,KAAK,GAAGZ,UAAU,CAAC,CAAC;EAC1B,MAAM,CAACa,WAAW,EAAEC,cAAc,CAAC,GAAGjB,QAAQ,CAACY,OAAO,IAAI,KAAK,CAAC;EAEhE,MAAMM,cAAc,GAAGA,CAAA,KAAM;IAC3Bb,aAAa,CAAC,aAAa,CAAC;IAC5BY,cAAc,CAAC,CAACD,WAAW,CAAC;IAC5B,IAAIF,aAAa,KAAKK,SAAS,EAAE;MAC/BL,aAAa,CAAC,CAACE,WAAW,CAAC;IAC7B;EACF,CAAC;EAED,oBACEjB,KAAA,CAAAqB,aAAA,CAACnB,SAAS;IACRY,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAEH,cAAe;IACxBI,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE;MAClBX,OAAO,EAAEA,OAAO,IAAII,WAAW;MAC/BH,QAAQ,EAAE,CAAC,CAACA;IACd,CAAE;IACFW,KAAK,EAAE;MACLC,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAEb,QAAQ,GAAGJ,gBAAgB,GAAG;IACzC,CAAE;IACFkB,MAAM,EAAC;EAAa,gBAEpB5B,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IACHsB,KAAK,EAAE,CACLpB,QAAQ,CAACwB,GAAG,EACZ;MAAEC,UAAU,EAAE,YAAY;MAAEC,UAAU,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAO,CAAC;EAC1D,gBAEFhC,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAAC8B,aAAa,EAAC;EAAM,gBACxBjC,KAAA,CAAAqB,aAAA,CAACZ,cAAc;IAACI,OAAO,EAAEA,OAAO,IAAII;EAAY,CAAE,CAC9C,CAAC,eACPjB,KAAA,CAAAqB,aAAA,CAACd,OAAO;IAAC2B,IAAI,EAAE;EAAE,CAAE,CAAC,eACpBlC,KAAA,CAAAqB,aAAA,CAACb,EAAE;IAACiB,KAAK,EAAE;MAAEM,UAAU,EAAE;IAAE,CAAE;IAACI,KAAK,EAAEnB,KAAK,CAAC,kBAAkB;EAAE,GAC5DJ,KACC,CACA,CACG,CAAC;AAEhB,CAAC"}
@@ -1,13 +0,0 @@
1
- import React from "react";
2
- import { PressableProps } from "react-native";
3
- type Props = {
4
- checked?: boolean;
5
- };
6
- type OwnProps = Props & Pick<PressableProps, "disabled" | "onPress">;
7
- /**
8
- * An animated checkbox. This can be used to implement a
9
- * standard {@link CheckBox} or other composite components.
10
- */
11
- export declare const AnimatedSwitch: ({ checked, onPress, disabled }: OwnProps) => React.JSX.Element;
12
- export {};
13
- //# sourceMappingURL=AnimatedSwitch.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AnimatedSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/AnimatedSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAa,cAAc,EAAc,MAAM,cAAc,CAAC;AAerE,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AA8BrE;;;GAGG;AACH,eAAO,MAAM,cAAc,mCAAoC,QAAQ,sBAuEtE,CAAC"}
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
- import { Pressable } from "react-native";
3
- import { AnimatedSwitch } from "./AnimatedSwitch";
4
- type Props = {
5
- label: string;
6
- onValueChange?: (newValue: boolean) => void;
7
- };
8
- type OwnProps = Props & Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> & Pick<React.ComponentProps<typeof Pressable>, "onPress">;
9
- /**
10
- * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
11
- * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
12
- *
13
- * @param props
14
- * @constructor
15
- */
16
- export declare const SwitchLabel: ({ label, checked, disabled, onValueChange }: OwnProps) => React.JSX.Element;
17
- export {};
18
- //# sourceMappingURL=SwitchLabel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SwitchLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/SwitchLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAM/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IAEd,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,CAAC;AAMF,KAAK,QAAQ,GAAG,KAAK,GACnB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GACzE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,gDAKrB,QAAQ,sBA2CV,CAAC"}