@ovotech/element-native 3.8.0 → 3.8.1-canary-a8563d8-232

package/dist/utils/utils.d.ts

@@ -3,8 +3,6 @@ import { ViewProps, View } from 'react-native';
 import { BreakpointNames, Breakpoints } from '../hooks';
 declare function mergeRefs<T>(ref1: undefined | Ref<T>, ref2: undefined | Ref<T>): (element: T) => void;
 declare function getText(children: ReactNode): string;
-declare function pxToNumber(px: string): number;
-declare function numToPx(num: number): string;
 declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Omit<T, BreakpointNames>> & import("react").RefAttributes<C>>;
 declare function responsiveStyle(property: string, value: any, breakpoints: Breakpoints, formatter?: (v: any) => string): any;
 declare function getErrorMessage(id: string, errors: Array<{
@@ -13,4 +11,4 @@ declare function getErrorMessage(id: string, errors: Array<{
 }>): null | ReactNode;
 declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
 declare function filterChildrenByType(children: ReactNode, type: ComponentType): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
-export { styledComponentWithBreakpoints, responsiveStyle, pxToNumber, numToPx, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };
+export { styledComponentWithBreakpoints, responsiveStyle, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };

package/dist/utils/utils.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.numToPx = exports.pxToNumber = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
+exports.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var hooks_1 = require("../hooks");
@@ -43,14 +43,6 @@ function getText(children) {
     return String(children);
 }
 exports.getText = getText;
-function pxToNumber(px) {
-    return parseFloat(px);
-}
-exports.pxToNumber = pxToNumber;
-function numToPx(num) {
-    return "".concat(num, "px");
-}
-exports.numToPx = numToPx;
 function styledComponentWithBreakpoints(Component) {
     return (0, react_1.forwardRef)(function (props, ref) {
         var breakpoints = (0, hooks_1.useBreakpoint)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.8.0",
+  "version": "3.8.1-canary-a8563d8-232",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,9 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
-    "@ovotech/element-core": "^2.2.0",
+    "@ovotech/element-core": "*-canary-a8563d8-232",
     "deepmerge": "^4.2.2",
-    "lodash.groupby": "^4.6.0"
+    "lodash.groupby": "^4.6.0",
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
@@ -45,7 +46,7 @@
     "react-native-reanimated": "^2.10.0",
     "react-native-safe-area-context": "^4.7.4",
     "react-native-svg": "9.2.4",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^6.0.0",
     "react-test-renderer": "^18.2.0",
     "styled-components": "^5.1.3",
     "ts-jest": "^28.0.5",

package/dist/components/HorizontalCarousel/HorizontalCarousel.js

@@ -1,92 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalCarousel = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var react_native_reanimated_1 = require("react-native-reanimated");
-var react_native_reanimated_carousel_1 = __importDefault(require("react-native-reanimated-carousel"));
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Icon_1 = require("../Icon");
-var NavigationDots_1 = require("./NavigationDots");
-function HorizontalCarousel(_a) {
-    var data = _a.data, children = _a.children, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, _b = _a.showArrows, showArrows = _b === void 0 ? true : _b, _c = _a.showDots, showDots = _c === void 0 ? true : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
-    var theme = (0, styled_native_1.useTheme)();
-    var carouselRef = (0, react_1.useRef)(null);
-    var progressValue = (0, react_native_reanimated_1.useSharedValue)(0);
-    var windowWidth = (0, react_native_1.useWindowDimensions)().width;
-    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
-    return ((0, jsx_runtime_1.jsxs)(SCarouselContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_carousel_1.default, { ref: carouselRef, data: data, renderItem: function (_a) {
-                    var item = _a.item;
-                    return ((0, jsx_runtime_1.jsx)(SItemContainer, __assign({ "$itemWidth": carouselWidth }, { children: children(item) })));
-                }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
-                    return (progressValue.value = absoluteProgress);
-                }, panGestureHandlerProps: {
-                    activeOffsetX: [-20, 20],
-                }, loop: loop, testID: "carousel" }), showArrows && data.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 16, color: theme.core.color.brand.white }) })), (0, jsx_runtime_1.jsx)(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 16, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] }));
-}
-exports.HorizontalCarousel = HorizontalCarousel;
-var SCarouselContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n"], ["\n  align-items: center;\n"])));
-var SItemContainer = styled_native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var $itemWidth = _a.$itemWidth;
-    return $itemWidth;
-});
-var SActionPressable = styled_native_1.default.Pressable(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  ", ";\n"])), function (_a) {
-    var $top = _a.$top;
-    return ($top ? "".concat($top, "px") : '50%');
-}, function (_a) {
-    var theme = _a.theme, $next = _a.$next;
-    return $next ? "right: ".concat(theme.core.space[6]) : "left: ".concat(theme.core.space[6]);
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/HorizontalCarousel/index.d.ts

@@ -1 +0,0 @@
-export * from './HorizontalCarousel';

package/dist/components/HorizontalCarousel/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./HorizontalCarousel"), exports);

package/dist/esm/components/HorizontalCarousel/HorizontalCarousel.js

@@ -1,62 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useWindowDimensions } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
-import Carousel from 'react-native-reanimated-carousel';
-import styled, { useTheme } from '../../styled.native';
-import { Icon } from '../Icon';
-import { NavigationDots } from './NavigationDots';
-export function HorizontalCarousel(_a) {
-    var data = _a.data, children = _a.children, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, _b = _a.showArrows, showArrows = _b === void 0 ? true : _b, _c = _a.showDots, showDots = _c === void 0 ? true : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
-    var theme = useTheme();
-    var carouselRef = useRef(null);
-    var progressValue = useSharedValue(0);
-    var windowWidth = useWindowDimensions().width;
-    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
-    return (_jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: function (_a) {
-                    var item = _a.item;
-                    return (_jsx(SItemContainer, __assign({ "$itemWidth": carouselWidth }, { children: children(item) })));
-                }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
-                    return (progressValue.value = absoluteProgress);
-                }, panGestureHandlerProps: {
-                    activeOffsetX: [-20, 20],
-                }, loop: loop, testID: "carousel" }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: _jsx(Icon, { name: "arrow-left", size: 16, color: theme.core.color.brand.white }) })), _jsx(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, hitSlop: {
-                            top: 32,
-                            bottom: 32,
-                            left: 16,
-                            right: 16,
-                        } }, { children: _jsx(Icon, { name: "arrow-right", size: 16, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] }));
-}
-var SCarouselContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n"], ["\n  align-items: center;\n"])));
-var SItemContainer = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var $itemWidth = _a.$itemWidth;
-    return $itemWidth;
-});
-var SActionPressable = styled.Pressable(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  ", ";\n"])), function (_a) {
-    var $top = _a.$top;
-    return ($top ? "".concat($top, "px") : '50%');
-}, function (_a) {
-    var theme = _a.theme, $next = _a.$next;
-    return $next ? "right: ".concat(theme.core.space[6]) : "left: ".concat(theme.core.space[6]);
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/HorizontalCarousel/index.js

@@ -1 +0,0 @@
-export * from './HorizontalCarousel';