@ovotech/element-native 4.1.8 → 4.1.9-canary-80bcef2-284

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 +7 -8
  4. package/dist/esm/components/SegmentedControls/SegmentedControls.js +4 -4
  5. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +7 -8
  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;
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
+ 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) {
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) }, segment.key));
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));
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 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
+ 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");
105
105
  });
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,7 @@ type SegmentButtonProps = {
9
8
  multipleRows?: boolean;
10
9
  size?: 'small' | 'large';
11
10
  testID?: string;
11
+ segmentCount: number;
12
12
  };
13
- export declare const SegmentButton: ({ accessibilityLabel, inline, isLast, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
13
+ export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, segmentCount, 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, 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, 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,15 @@ 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: 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: {
84
83
  opacity: 0,
85
84
  fontWeight: '900',
86
85
  }, "$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;
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
+ var _a, _b;
56
+ return (_jsx(SegmentButton, { isSelected: activeSegment.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) }, segment.key));
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));
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 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
+ 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");
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, 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, 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,15 @@ 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: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
53
+ }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
55
54
  opacity: 0,
56
55
  fontWeight: '900',
57
56
  }, "$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",
3
+ "version": "4.1.9-canary-80bcef2-284",
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-80bcef2-284",
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",