@ovotech/element-native 4.1.5 → 4.1.6-canary-6c04f99-279

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 (8) hide show
  1. package/dist/components/SegmentedControls/SegmentedControls.js +7 -6
  2. package/dist/components/SegmentedControls/components/SegmentButton.d.ts +3 -2
  3. package/dist/components/SegmentedControls/components/SegmentButton.js +10 -8
  4. package/dist/components/Toggle/styles.js +3 -3
  5. package/dist/esm/components/SegmentedControls/SegmentedControls.js +7 -6
  6. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +10 -8
  7. package/dist/esm/components/Toggle/styles.js +3 -3
  8. package/package.json +3 -3
package/dist/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -62,6 +62,7 @@ var SegmentedControls = function (_a) {
62
62
  var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
63
63
  var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
64
64
  var theme = (0, styled_native_1.useTheme)();
65
+ var gapSizePercent = inline ? 0 : 1;
65
66
  var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
66
67
  transform: [
67
68
  {
@@ -77,9 +78,9 @@ var SegmentedControls = function (_a) {
77
78
  borderRadius: theme.core.radius.max,
78
79
  backgroundColor: theme.semantic.surface.elevated,
79
80
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
80
- return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
81
- var _a;
82
- return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, isLast: segments[segments.length - 1].key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
81
+ return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$gapSize": gapSizePercent, "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
82
+ var _a, _b, _c;
83
+ return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
83
84
  setActiveSegment(segment);
84
85
  animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
85
86
  animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
@@ -95,11 +96,11 @@ var SegmentedControls = function (_a) {
95
96
  animatedHeight.value = height;
96
97
  animatedWidth.value = width;
97
98
  }
98
- }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
99
+ }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key), segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0, gapsTotal: (_c = segments.length - 1 * gapSizePercent) !== null && _c !== void 0 ? _c : 0 }, segment.key));
99
100
  })] })));
100
101
  };
101
102
  exports.SegmentedControls = SegmentedControls;
102
103
  var SegmentsContainer = styled_native_1.default.View(function (_a) {
103
- var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
104
- return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n align-items: center;\n gap: ").concat($inline ? 0 : core.space[1], "px;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
104
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, $gapSize = _a.$gapSize, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
105
+ return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n align-items: center;\n gap: ").concat($gapSize, "%;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
105
106
  });
package/dist/components/SegmentedControls/components/SegmentButton.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  type SegmentButtonProps = {
2
- isLast: boolean;
3
2
  isSelected: boolean;
4
3
  label: string;
5
4
  onPress: (x: number, y: number, width: number) => void;
@@ -9,6 +8,8 @@ type SegmentButtonProps = {
9
8
  multipleRows?: boolean;
10
9
  size?: 'small' | 'large';
11
10
  testID?: string;
11
+ segmentCount: number;
12
+ gapsTotal: number;
12
13
  };
13
- export declare const SegmentButton: ({ accessibilityLabel, inline, isLast, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
14
+ export declare const SegmentButton: ({ accessibilityLabel, gapsTotal, inline, isSelected, label, multipleRows, onLayout, onPress, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
14
15
  export {};
package/dist/components/SegmentedControls/components/SegmentButton.js CHANGED
@@ -35,7 +35,7 @@ var styled_native_1 = __importDefault(require("../../../styled.native"));
35
35
  var P_1 = require("../../P");
36
36
  var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
37
37
  var SegmentButton = function (_a) {
38
- var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isLast = _a.isLast, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
38
+ var accessibilityLabel = _a.accessibilityLabel, gapsTotal = _a.gapsTotal, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
39
39
  var xRef = (0, react_1.useRef)(0);
40
40
  var yRef = (0, react_1.useRef)(0);
41
41
  var widthRef = (0, react_1.useRef)(0);
@@ -57,16 +57,12 @@ var SegmentButton = function (_a) {
57
57
  (0, react_1.useEffect)(function () {
58
58
  fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
59
59
  }, [fontWeightAnim, isSelected]);
60
- // strange discrepancy with the last segment not reaching the end of the container
61
- var adjustLastSegmentWidth = function (width) {
62
- return isLast && size === 'large' ? width + 2 : width;
63
- };
64
60
  var handleLayout = function (event) {
65
61
  var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
66
62
  xRef.current = x;
67
63
  yRef.current = y;
68
64
  heightRef.current = height;
69
- widthRef.current = adjustLastSegmentWidth(width);
65
+ widthRef.current = width;
70
66
  onLayout(width, height, x, y);
71
67
  };
72
68
  var handlePress = function () {
@@ -75,12 +71,18 @@ var SegmentButton = function (_a) {
75
71
  // choices go on the second row. The only way I could get it to work
76
72
  // was to hardcode the denominator to 3 for the single row ones
77
73
  // and 1.1 for the multiple row ones.
78
- yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), adjustLastSegmentWidth(widthRef.current));
74
+ yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
79
75
  };
80
76
  return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
81
77
  top: hitslopVal,
82
78
  bottom: hitslopVal,
83
- }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
79
+ }, style: {
80
+ flexGrow: inline || multipleRows ? undefined : 1,
81
+ // width is 100% divided by the number of segments minus gaps
82
+ width: inline || multipleRows
83
+ ? 'auto'
84
+ : "".concat(100 / segmentCount - gapsTotal, "%"),
85
+ }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
84
86
  opacity: 0,
85
87
  fontWeight: '900',
86
88
  }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
package/dist/components/Toggle/styles.js CHANGED
@@ -20,10 +20,10 @@ exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
20
20
  : null, "\n ");
21
21
  });
22
22
  exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
23
- var core = _a.theme.core, checked = _a.checked;
24
- return "\n width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n justify-content: center;\n border-radius: ").concat((0, element_core_1.numToPx)(core.radius.large), ";\n background: ").concat(checked ? core.color.brand.ovo : core.color.neutral.lighter, ";\n ");
23
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked;
24
+ return "\n width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n justify-content: center;\n border-radius: ").concat((0, element_core_1.numToPx)(core.radius.large), ";\n background: ").concat(checked ? semantic.focus.outline : semantic.message.secondary, ";\n ");
25
25
  });
26
26
  exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
27
27
  var core = _a.theme.core, checked = _a.checked;
28
- return "\n position: absolute;\n width: ".concat((0, element_core_1.numToPx)(core.space[4]), ";\n height: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n border-radius: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.dark, ";\n");
28
+ return "\n position: absolute;\n width: ".concat((0, element_core_1.numToPx)(core.space[4]), ";\n height: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n border-radius: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.lighter, ";\n");
29
29
  });
package/dist/esm/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -36,6 +36,7 @@ export var SegmentedControls = function (_a) {
36
36
  var animatedHeight = useSharedValue(0);
37
37
  var animatedWidth = useSharedValue(0);
38
38
  var theme = useTheme();
39
+ var gapSizePercent = inline ? 0 : 1;
39
40
  var animatedBackgroundStyle = useAnimatedStyle(function () { return ({
40
41
  transform: [
41
42
  {
@@ -51,9 +52,9 @@ export var SegmentedControls = function (_a) {
51
52
  borderRadius: theme.core.radius.max,
52
53
  backgroundColor: theme.semantic.surface.elevated,
53
54
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
54
- return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
55
- var _a;
56
- return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, isLast: segments[segments.length - 1].key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
55
+ return (_jsxs(SegmentsContainer, __assign({ "$gapSize": gapSizePercent, "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
56
+ var _a, _b, _c;
57
+ return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
57
58
  setActiveSegment(segment);
58
59
  animatedX.value = withSpring(x, springSettings);
59
60
  animatedY.value = withSpring(y, springSettings);
@@ -69,10 +70,10 @@ export var SegmentedControls = function (_a) {
69
70
  animatedHeight.value = height;
70
71
  animatedWidth.value = width;
71
72
  }
72
- }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
73
+ }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key), segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0, gapsTotal: (_c = segments.length - 1 * gapSizePercent) !== null && _c !== void 0 ? _c : 0 }, segment.key));
73
74
  })] })));
74
75
  };
75
76
  var SegmentsContainer = styled.View(function (_a) {
76
- var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
77
- return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n align-items: center;\n gap: ").concat($inline ? 0 : core.space[1], "px;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
77
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, $gapSize = _a.$gapSize, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
78
+ return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n align-items: center;\n gap: ").concat($gapSize, "%;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
78
79
  });
package/dist/esm/components/SegmentedControls/components/SegmentButton.js CHANGED
@@ -6,7 +6,7 @@ import styled from '../../../styled.native';
6
6
  import { P } from '../../P';
7
7
  var AnimatedP = Animated.createAnimatedComponent(P);
8
8
  export var SegmentButton = function (_a) {
9
- var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isLast = _a.isLast, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
9
+ var accessibilityLabel = _a.accessibilityLabel, gapsTotal = _a.gapsTotal, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
10
10
  var xRef = useRef(0);
11
11
  var yRef = useRef(0);
12
12
  var widthRef = useRef(0);
@@ -28,16 +28,12 @@ export var SegmentButton = function (_a) {
28
28
  useEffect(function () {
29
29
  fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
30
30
  }, [fontWeightAnim, isSelected]);
31
- // strange discrepancy with the last segment not reaching the end of the container
32
- var adjustLastSegmentWidth = function (width) {
33
- return isLast && size === 'large' ? width + 2 : width;
34
- };
35
31
  var handleLayout = function (event) {
36
32
  var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
37
33
  xRef.current = x;
38
34
  yRef.current = y;
39
35
  heightRef.current = height;
40
- widthRef.current = adjustLastSegmentWidth(width);
36
+ widthRef.current = width;
41
37
  onLayout(width, height, x, y);
42
38
  };
43
39
  var handlePress = function () {
@@ -46,12 +42,18 @@ export var SegmentButton = function (_a) {
46
42
  // choices go on the second row. The only way I could get it to work
47
43
  // was to hardcode the denominator to 3 for the single row ones
48
44
  // and 1.1 for the multiple row ones.
49
- yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), adjustLastSegmentWidth(widthRef.current));
45
+ yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
50
46
  };
51
47
  return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
52
48
  top: hitslopVal,
53
49
  bottom: hitslopVal,
54
- }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
50
+ }, style: {
51
+ flexGrow: inline || multipleRows ? undefined : 1,
52
+ // width is 100% divided by the number of segments minus gaps
53
+ width: inline || multipleRows
54
+ ? 'auto'
55
+ : "".concat(100 / segmentCount - gapsTotal, "%"),
56
+ }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
55
57
  opacity: 0,
56
58
  fontWeight: '900',
57
59
  }, "$isSelected": false, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
package/dist/esm/components/Toggle/styles.js CHANGED
@@ -14,10 +14,10 @@ export var StyledToggleInputWrapper = styled.View(function (_a) {
14
14
  : null, "\n ");
15
15
  });
16
16
  export var StyledToggleInput = styled.View(function (_a) {
17
- var core = _a.theme.core, checked = _a.checked;
18
- return "\n width: ".concat(numToPx(core.space[11]), ";\n height: ").concat(numToPx(core.space[6]), ";\n justify-content: center;\n border-radius: ").concat(numToPx(core.radius.large), ";\n background: ").concat(checked ? core.color.brand.ovo : core.color.neutral.lighter, ";\n ");
17
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked;
18
+ return "\n width: ".concat(numToPx(core.space[11]), ";\n height: ").concat(numToPx(core.space[6]), ";\n justify-content: center;\n border-radius: ").concat(numToPx(core.radius.large), ";\n background: ").concat(checked ? semantic.focus.outline : semantic.message.secondary, ";\n ");
19
19
  });
20
20
  export var StyledToggleDot = styled(Animated.View)(function (_a) {
21
21
  var core = _a.theme.core, checked = _a.checked;
22
- return "\n position: absolute;\n width: ".concat(numToPx(core.space[4]), ";\n height: ").concat(numToPx(core.space[4]), ";\n border-radius: ").concat(numToPx(core.space[4]), ";\n background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.dark, ";\n");
22
+ return "\n position: absolute;\n width: ".concat(numToPx(core.space[4]), ";\n height: ").concat(numToPx(core.space[4]), ";\n border-radius: ").concat(numToPx(core.space[4]), ";\n background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.lighter, ";\n");
23
23
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.1.5",
3
+ "version": "4.1.6-canary-6c04f99-279",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@backpackapp-io/react-native-toast": "^0.10.0",
17
+ "@ovotech/element-core": "3.0.1-canary-6c04f99-279",
17
18
  "deepmerge": "^4.2.2",
18
19
  "lodash.groupby": "^4.6.0",
19
- "react-native-reanimated-carousel": "^3.5.1",
20
- "@ovotech/element-core": "3.0.1"
20
+ "react-native-reanimated-carousel": "^3.5.1"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@babel/core": "^7.11.5",