@ovotech/element-native 4.4.4 → 4.4.5-canary-7a3ddf3-320

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -79,12 +79,11 @@ var SegmentedControls = function (_a) {
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     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) {
                 var _a, _b;
-                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) {
-                        setActiveSegment(segment);
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, setAnimatedValues: function (x, y, width) {
                         animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
                         animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
                         animatedWidth.value = width;
-                    }, onLayout: function (width, height, x, y) {
+                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
                         if (activeSegment.key === segment.key) {
                             animatedX.value = x;
                             // (adrian.pop) - I couldn't figure out how to make the positioning work once the

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -1,7 +1,8 @@
 type SegmentButtonProps = {
     isSelected: boolean;
     label: string;
-    onPress: (x: number, y: number, width: number) => void;
+    setAnimatedValues: (x: number, y: number, width: number) => void;
+    onPress: (...args: any[]) => void;
     onLayout: (width: number, height: number, x: number, y: number) => void;
     accessibilityLabel?: string;
     inline?: boolean;
@@ -10,5 +11,5 @@ type SegmentButtonProps = {
     testID?: string;
     segmentCount: number;
 };
-export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
+export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
 export {};

package/dist/components/SegmentedControls/components/SegmentButton.js

@@ -35,7 +35,7 @@ var styled_native_1 = __importDefault(require("../../../styled.native"));
 var P_1 = require("../../P");
 var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
 var SegmentButton = function (_a) {
-    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;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
     var xRef = (0, react_1.useRef)(0);
     var yRef = (0, react_1.useRef)(0);
     var widthRef = (0, react_1.useRef)(0);
@@ -57,6 +57,17 @@ var SegmentButton = function (_a) {
     (0, react_1.useEffect)(function () {
         fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
+    (0, react_1.useEffect)(function () {
+        if (!isSelected) {
+            return;
+        }
+        setAnimatedValues(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // choices go on the second row. The only way I could get it to work
+        // was to hardcode the denominator to 3 for the single row ones
+        // and 1.1 for the multiple row ones.
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    }, [isSelected]);
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
@@ -65,15 +76,7 @@ var SegmentButton = function (_a) {
         widthRef.current = width;
         onLayout(width, height, x, y);
     };
-    var handlePress = function () {
-        onPress(xRef.current, 
-        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-        // choices go on the second row. The only way I could get it to work
-        // was to hardcode the denominator to 3 for the single row ones
-        // and 1.1 for the multiple row ones.
-        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
-    };
-    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: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: {

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -53,12 +53,11 @@ export var SegmentedControls = function (_a) {
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
                 var _a, _b;
-                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
-                        setActiveSegment(segment);
+                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, setAnimatedValues: function (x, y, width) {
                         animatedX.value = withSpring(x, springSettings);
                         animatedY.value = withSpring(y, springSettings);
                         animatedWidth.value = width;
-                    }, onLayout: function (width, height, x, y) {
+                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
                         if (activeSegment.key === segment.key) {
                             animatedX.value = x;
                             // (adrian.pop) - I couldn't figure out how to make the positioning work once the

package/dist/esm/components/SegmentedControls/components/SegmentButton.js

@@ -6,7 +6,7 @@ import styled from '../../../styled.native';
 import { P } from '../../P';
 var AnimatedP = Animated.createAnimatedComponent(P);
 export var SegmentButton = function (_a) {
-    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;
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
     var xRef = useRef(0);
     var yRef = useRef(0);
     var widthRef = useRef(0);
@@ -28,6 +28,17 @@ export var SegmentButton = function (_a) {
     useEffect(function () {
         fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
+    useEffect(function () {
+        if (!isSelected) {
+            return;
+        }
+        setAnimatedValues(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // choices go on the second row. The only way I could get it to work
+        // was to hardcode the denominator to 3 for the single row ones
+        // and 1.1 for the multiple row ones.
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    }, [isSelected]);
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
@@ -36,15 +47,7 @@ export var SegmentButton = function (_a) {
         widthRef.current = width;
         onLayout(width, height, x, y);
     };
-    var handlePress = function () {
-        onPress(xRef.current, 
-        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-        // choices go on the second row. The only way I could get it to work
-        // was to hardcode the denominator to 3 for the single row ones
-        // and 1.1 for the multiple row ones.
-        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
-    };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.4.4",
+  "version": "4.4.5-canary-7a3ddf3-320",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "3.2.0-canary-7a3ddf3-320",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.2.0"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",