@ovotech/element-native 4.1.0-canary-9534c0a-267 → 4.1.0

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 (12) hide show
  1. package/dist/components/SegmentedControls/SegmentedControls.js +1 -1
  2. package/dist/components/SegmentedControls/components/SegmentButton.d.ts +1 -2
  3. package/dist/components/SegmentedControls/components/SegmentButton.js +4 -8
  4. package/dist/components/Toggle/Toggle.d.ts +1 -1
  5. package/dist/components/Toggle/Toggle.js +4 -4
  6. package/dist/components/Toggle/styles.d.ts +0 -1
  7. package/dist/components/Toggle/styles.js +2 -2
  8. package/dist/esm/components/SegmentedControls/SegmentedControls.js +1 -1
  9. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +4 -8
  10. package/dist/esm/components/Toggle/Toggle.js +4 -4
  11. package/dist/esm/components/Toggle/styles.js +2 -2
  12. package/package.json +3 -3
package/dist/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -79,7 +79,7 @@ var SegmentedControls = function (_a) {
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
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) {
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);
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;
@@ -10,5 +9,5 @@ type SegmentButtonProps = {
10
9
  size?: 'small' | 'large';
11
10
  testID?: string;
12
11
  };
13
- export declare const SegmentButton: ({ accessibilityLabel, inline, isLast, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
12
+ export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
14
13
  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, _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,9 +71,9 @@ 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
- 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: {
76
+ return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
81
77
  top: hitslopVal,
82
78
  bottom: hitslopVal,
83
79
  }, 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: {
package/dist/components/Toggle/Toggle.d.ts CHANGED
@@ -4,7 +4,7 @@ export type HorizontalPosition = 'left' | 'right';
4
4
  export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
5
5
  label?: string | ReactNode;
6
6
  checked?: boolean | undefined;
7
- inline?: boolean | undefined;
8
7
  hint?: ReactNode;
9
8
  labelPosition?: HorizontalPosition | undefined;
9
+ onChange?: (() => void) | undefined;
10
10
  } & import("react").RefAttributes<TouchableOpacity>>;
package/dist/components/Toggle/Toggle.js CHANGED
@@ -46,11 +46,11 @@ var Input = function (_a) {
46
46
  }, checked: checked }) }) })));
47
47
  };
48
48
  exports.Toggle = (0, react_1.forwardRef)(function (_a, ref) {
49
- var
49
+ var label = _a.label, hint = _a.hint, _b = _a.checked, checked = _b === void 0 ? false : _b,
50
50
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
51
- _b = _a.activeOpacity,
51
+ _c = _a.activeOpacity,
52
52
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
53
- activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
53
+ activeOpacity = _c === void 0 ? 0.8 : _c, testID = _a.testID, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, rest = __rest(_a, ["label", "hint", "checked", "activeOpacity", "testID", "labelPosition"]);
54
54
  var hasLabel = label !== undefined;
55
- return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
55
+ return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
56
56
  });
package/dist/components/Toggle/styles.d.ts CHANGED
@@ -487,7 +487,6 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
487
487
  }, {
488
488
  hasLabel?: boolean | undefined;
489
489
  labelPosition?: HorizontalPosition | undefined;
490
- inline?: boolean | undefined;
491
490
  }, never>;
492
491
  export declare const StyledToggleInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, {
493
492
  core: {
package/dist/components/Toggle/styles.js CHANGED
@@ -8,8 +8,8 @@ var element_core_1 = require("@ovotech/element-core");
8
8
  var react_native_1 = require("react-native");
9
9
  var styled_native_1 = __importDefault(require("../../styled.native"));
10
10
  exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
11
- var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
12
- return "\n width: ".concat(hasLabel ? (inline ? undefined : '100%') : (0, element_core_1.numToPx)(core.space[11]), ";\n display: flex;\n flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n justify-content: space-between;\n position: relative;\n ");
11
+ var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
12
+ return "\n width: ".concat(hasLabel ? '100%' : (0, element_core_1.numToPx)(core.space[11]), ";\n display: flex;\n flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n justify-content: space-between;\n position: relative;\n ");
13
13
  });
14
14
  exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
15
15
  var core = _a.theme.core, labelPosition = _a.labelPosition;
package/dist/esm/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -53,7 +53,7 @@ export var SegmentedControls = function (_a) {
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
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) {
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);
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, _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,9 +42,9 @@ 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
- return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
47
+ return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
52
48
  top: hitslopVal,
53
49
  bottom: hitslopVal,
54
50
  }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
package/dist/esm/components/Toggle/Toggle.js CHANGED
@@ -43,11 +43,11 @@ var Input = function (_a) {
43
43
  }, checked: checked }) }) })));
44
44
  };
45
45
  export var Toggle = forwardRef(function (_a, ref) {
46
- var
46
+ var label = _a.label, hint = _a.hint, _b = _a.checked, checked = _b === void 0 ? false : _b,
47
47
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
48
- _b = _a.activeOpacity,
48
+ _c = _a.activeOpacity,
49
49
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
50
- activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
50
+ activeOpacity = _c === void 0 ? 0.8 : _c, testID = _a.testID, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, rest = __rest(_a, ["label", "hint", "checked", "activeOpacity", "testID", "labelPosition"]);
51
51
  var hasLabel = label !== undefined;
52
- return (_jsxs(StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
52
+ return (_jsxs(StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
53
53
  });
package/dist/esm/components/Toggle/styles.js CHANGED
@@ -2,8 +2,8 @@ import { numToPx } from '@ovotech/element-core';
2
2
  import { Animated } from 'react-native';
3
3
  import styled from '../../styled.native';
4
4
  export var StyledWrapper = styled.TouchableOpacity(function (_a) {
5
- var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
6
- return "\n width: ".concat(hasLabel ? (inline ? undefined : '100%') : numToPx(core.space[11]), ";\n display: flex;\n flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n justify-content: space-between;\n position: relative;\n ");
5
+ var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
6
+ return "\n width: ".concat(hasLabel ? '100%' : numToPx(core.space[11]), ";\n display: flex;\n flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n justify-content: space-between;\n position: relative;\n ");
7
7
  });
8
8
  export var StyledToggleInputWrapper = styled.View(function (_a) {
9
9
  var core = _a.theme.core, labelPosition = _a.labelPosition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.1.0-canary-9534c0a-267",
3
+ "version": "4.1.0",
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-9534c0a-267",
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",