@ovotech/element-native 4.1.7 → 4.1.8-canary-eca6da8-282

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 (6) hide show
  1. package/dist/components/SegmentedControls/SegmentedControls.js +6 -7
  2. package/dist/components/SegmentedControls/components/SegmentButton.d.ts +2 -3
  3. package/dist/components/SegmentedControls/components/SegmentButton.js +8 -10
  4. package/dist/esm/components/SegmentedControls/SegmentedControls.js +6 -7
  5. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +8 -10
  6. package/package.json +3 -3
package/dist/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -62,7 +62,6 @@ 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;
66
65
  var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
67
66
  transform: [
68
67
  {
@@ -78,9 +77,9 @@ var SegmentedControls = function (_a) {
78
77
  borderRadius: theme.core.radius.max,
79
78
  backgroundColor: theme.semantic.surface.elevated,
80
79
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
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) {
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) {
84
83
  setActiveSegment(segment);
85
84
  animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
86
85
  animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
@@ -96,11 +95,11 @@ var SegmentedControls = function (_a) {
96
95
  animatedHeight.value = height;
97
96
  animatedWidth.value = width;
98
97
  }
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));
98
+ }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
100
99
  })] })));
101
100
  };
102
101
  exports.SegmentedControls = SegmentedControls;
103
102
  var SegmentsContainer = styled_native_1.default.View(function (_a) {
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");
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");
106
105
  });
package/dist/components/SegmentedControls/components/SegmentButton.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type SegmentButtonProps = {
2
+ isLast: boolean;
2
3
  isSelected: boolean;
3
4
  label: string;
4
5
  onPress: (x: number, y: number, width: number) => void;
@@ -8,8 +9,6 @@ type SegmentButtonProps = {
8
9
  multipleRows?: boolean;
9
10
  size?: 'small' | 'large';
10
11
  testID?: string;
11
- segmentCount: number;
12
- gapsTotal: number;
13
12
  };
14
- export declare const SegmentButton: ({ accessibilityLabel, gapsTotal, inline, isSelected, label, multipleRows, onLayout, onPress, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
13
+ export declare const SegmentButton: ({ accessibilityLabel, inline, isLast, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
15
14
  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, 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;
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;
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,12 +57,16 @@ 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
+ };
60
64
  var handleLayout = function (event) {
61
65
  var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
62
66
  xRef.current = x;
63
67
  yRef.current = y;
64
68
  heightRef.current = height;
65
- widthRef.current = width;
69
+ widthRef.current = adjustLastSegmentWidth(width);
66
70
  onLayout(width, height, x, y);
67
71
  };
68
72
  var handlePress = function () {
@@ -71,18 +75,12 @@ var SegmentButton = function (_a) {
71
75
  // choices go on the second row. The only way I could get it to work
72
76
  // was to hardcode the denominator to 3 for the single row ones
73
77
  // and 1.1 for the multiple row ones.
74
- yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
78
+ yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), adjustLastSegmentWidth(widthRef.current));
75
79
  };
76
80
  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: {
77
81
  top: hitslopVal,
78
82
  bottom: hitslopVal,
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: {
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: {
86
84
  opacity: 0,
87
85
  fontWeight: '900',
88
86
  }, "$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/esm/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -36,7 +36,6 @@ 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;
40
39
  var animatedBackgroundStyle = useAnimatedStyle(function () { return ({
41
40
  transform: [
42
41
  {
@@ -52,9 +51,9 @@ export var SegmentedControls = function (_a) {
52
51
  borderRadius: theme.core.radius.max,
53
52
  backgroundColor: theme.semantic.surface.elevated,
54
53
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
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) {
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) {
58
57
  setActiveSegment(segment);
59
58
  animatedX.value = withSpring(x, springSettings);
60
59
  animatedY.value = withSpring(y, springSettings);
@@ -70,10 +69,10 @@ export var SegmentedControls = function (_a) {
70
69
  animatedHeight.value = height;
71
70
  animatedWidth.value = width;
72
71
  }
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));
72
+ }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
74
73
  })] })));
75
74
  };
76
75
  var SegmentsContainer = styled.View(function (_a) {
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");
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");
79
78
  });
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, 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;
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;
10
10
  var xRef = useRef(0);
11
11
  var yRef = useRef(0);
12
12
  var widthRef = useRef(0);
@@ -28,12 +28,16 @@ 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
+ };
31
35
  var handleLayout = function (event) {
32
36
  var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
33
37
  xRef.current = x;
34
38
  yRef.current = y;
35
39
  heightRef.current = height;
36
- widthRef.current = width;
40
+ widthRef.current = adjustLastSegmentWidth(width);
37
41
  onLayout(width, height, x, y);
38
42
  };
39
43
  var handlePress = function () {
@@ -42,18 +46,12 @@ export var SegmentButton = function (_a) {
42
46
  // choices go on the second row. The only way I could get it to work
43
47
  // was to hardcode the denominator to 3 for the single row ones
44
48
  // and 1.1 for the multiple row ones.
45
- yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
49
+ yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), adjustLastSegmentWidth(widthRef.current));
46
50
  };
47
51
  return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
48
52
  top: hitslopVal,
49
53
  bottom: hitslopVal,
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: {
54
+ }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
57
55
  opacity: 0,
58
56
  fontWeight: '900',
59
57
  }, "$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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.1.7",
3
+ "version": "4.1.8-canary-eca6da8-282",
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-eca6da8-282",
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",