@ovotech/element-native 4.1.8-canary-8eb5495-283 → 4.1.8

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 +4 -4
  2. package/dist/components/SegmentedControls/components/SegmentButton.d.ts +2 -2
  3. package/dist/components/SegmentedControls/components/SegmentButton.js +8 -7
  4. package/dist/esm/components/SegmentedControls/SegmentedControls.js +4 -4
  5. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +8 -7
  6. package/package.json +3 -3
package/dist/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -78,8 +78,8 @@ var SegmentedControls = function (_a) {
78
78
  backgroundColor: theme.semantic.surface.elevated,
79
79
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
80
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, _b;
82
- 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) {
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) {
83
83
  setActiveSegment(segment);
84
84
  animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
85
85
  animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
@@ -95,11 +95,11 @@ var SegmentedControls = function (_a) {
95
95
  animatedHeight.value = height;
96
96
  animatedWidth.value = width;
97
97
  }
98
- }, 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 }, 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));
99
99
  })] })));
100
100
  };
101
101
  exports.SegmentedControls = SegmentedControls;
102
102
  var SegmentsContainer = styled_native_1.default.View(function (_a) {
103
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 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
+ 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");
105
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,7 +9,6 @@ type SegmentButtonProps = {
8
9
  multipleRows?: boolean;
9
10
  size?: 'small' | 'large';
10
11
  testID?: string;
11
- segmentCount: number;
12
12
  };
13
- export declare const SegmentButton: ({ accessibilityLabel, 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;
14
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, 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,15 +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: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
82
- }, 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: {
83
84
  opacity: 0,
84
85
  fontWeight: '900',
85
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
@@ -52,8 +52,8 @@ export var SegmentedControls = function (_a) {
52
52
  backgroundColor: theme.semantic.surface.elevated,
53
53
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
54
54
  return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
55
- var _a, _b;
56
- return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
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) {
57
57
  setActiveSegment(segment);
58
58
  animatedX.value = withSpring(x, springSettings);
59
59
  animatedY.value = withSpring(y, springSettings);
@@ -69,10 +69,10 @@ export var SegmentedControls = function (_a) {
69
69
  animatedHeight.value = height;
70
70
  animatedWidth.value = width;
71
71
  }
72
- }, 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 }, 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));
73
73
  })] })));
74
74
  };
75
75
  var SegmentsContainer = styled.View(function (_a) {
76
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 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
+ 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");
78
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, 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,15 +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: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
53
- }, 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: {
54
55
  opacity: 0,
55
56
  fontWeight: '900',
56
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.8-canary-8eb5495-283",
3
+ "version": "4.1.8",
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-8eb5495-283",
18
17
  "deepmerge": "^4.2.2",
19
18
  "lodash.groupby": "^4.6.0",
20
- "react-native-reanimated-carousel": "^3.5.1"
19
+ "react-native-reanimated-carousel": "^3.5.1",
20
+ "@ovotech/element-core": "3.0.1"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@babel/core": "^7.11.5",