@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/Margin/Margin.d.ts

@@ -228,9 +228,9 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             large: number;
         };
         customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
         };
         opacity: {
             solid: number;
@@ -244,22 +244,22 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             max: number;
         };
         space: {
-            '0': number;
-            '1': number;
-            '2': number;
-            '3': number;
-            '4': number;
-            '5': number;
-            '6': number;
-            '7': number;
-            '8': number;
-            '9': number;
-            '10': number;
-            '11': number;
-            '12': number;
-            '13': number;
-            '14': number;
-            '15': number;
+            "0": number;
+            "1": number;
+            "2": number;
+            "3": number;
+            "4": number;
+            "5": number;
+            "6": number;
+            "7": number;
+            "8": number;
+            "9": number;
+            "10": number;
+            "11": number;
+            "12": number;
+            "13": number;
+            "14": number;
+            "15": number;
         };
         transition: {
             slow: number;
@@ -315,22 +315,22 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
         };
         data: {
             branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
         };
         focus: {

package/dist/components/Margin/Margin.js

@@ -1,52 +1,36 @@
-"use strict";
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Margin = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importDefault(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledMargin = styled_native_1.default.View(function (_a) {
-    var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
-    var formatter = function (spaceKey) { return (0, element_core_1.numToPx)(space[spaceKey]); };
-    return "\n    ".concat(horizontal
-        ? "\n            ".concat((0, utils_1.responsiveStyle)('margin-left', horizontal, breakpoints, formatter), "\n            ").concat((0, utils_1.responsiveStyle)('margin-right', horizontal, breakpoints, formatter), "\n          ")
-        : '', "\n    ").concat(vertical
-        ? "\n            ".concat((0, utils_1.responsiveStyle)('margin-top', vertical, breakpoints, formatter), "\n            ").concat((0, utils_1.responsiveStyle)('margin-bottom', vertical, breakpoints, formatter), "\n          ")
-        : '', "\n    ").concat(mTop ? (0, utils_1.responsiveStyle)('margin-top', mTop, breakpoints, formatter) : '', "\n    ").concat(mBottom
-        ? (0, utils_1.responsiveStyle)('margin-bottom', mBottom, breakpoints, formatter)
-        : '', "\n    ").concat(mLeft ? (0, utils_1.responsiveStyle)('margin-left', mLeft, breakpoints, formatter) : '', "\n    ").concat(mRight
-        ? (0, utils_1.responsiveStyle)('margin-right', mRight, breakpoints, formatter)
-        : '', "\n    ").concat(all ? (0, utils_1.responsiveStyle)('margin', all, breakpoints, formatter) : '', "\n  ");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+const StyledMargin = styled.View(({ theme: { core: { space }, }, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    return `
+    ${horizontal
+        ? `
+            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
+            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
+          `
+        : ''}
+    ${vertical
+        ? `
+            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
+            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
+          `
+        : ''}
+    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
+    ${mBottom
+        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        : ''}
+    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
+    ${mRight
+        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        : ''}
+    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
+  `;
 });
-var Margin = function (_a) {
-    var top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, rest = __rest(_a, ["top", "bottom", "left", "right"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
+const Margin = ({ top, bottom, left, right, ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
 };
-exports.Margin = Margin;
+export { Margin };

package/dist/components/Margin/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Margin = void 0;
-var Margin_1 = require("./Margin");
-Object.defineProperty(exports, "Margin", { enumerable: true, get: function () { return Margin_1.Margin; } });
+export { Margin } from './Margin';

package/dist/components/NavHeader/IconButton.js

@@ -1,21 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_1 = require("react-native");
-var styled_native_1 = require("../../styled.native");
-var Icon_1 = require("../Icon");
-var NavHeader_styles_1 = require("./NavHeader.styles");
-var IconButton = function (_a) {
-    var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
-    var ButtonStyled = size === 'small' ? NavHeader_styles_1.StyledIconButtonS : NavHeader_styles_1.StyledIconButtonL;
-    var theme = (0, styled_native_1.useTheme)();
-    if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
+export const IconButton = ({ size, animation, rightActionConfig, }) => {
+    const ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    const theme = useTheme();
+    if (!rightActionConfig || !rightActionConfig?.iconName) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: function (_a) {
-            var pressed = _a.pressed;
-            return ((0, jsx_runtime_1.jsx)(ButtonStyled, { entering: animation, "$pressed": pressed, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
-        } }));
+    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig?.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: ({ pressed }) => (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) })) }));
 };
-exports.IconButton = IconButton;

package/dist/components/NavHeader/NavHeader.js

@@ -1,71 +1,43 @@
-"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 __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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var styled_native_1 = require("../../styled.native");
-var ActionList_1 = require("../ActionList");
-var IconButton_1 = require("./IconButton");
-var NavHeader_styles_1 = require("./NavHeader.styles");
-var FADE_ANIMATION_DURATION = 200;
-var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
-    var hasRightAction = !!rightActionConfig;
-    var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
-    var theme = (0, styled_native_1.useTheme)();
-    var layoutHeight = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../styled.native';
+import { Action } from '../ActionList';
+import { IconButton } from './IconButton';
+import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
+const FADE_ANIMATION_DURATION = 200;
+export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOffset = 0, backButtonText = 'Back', onHeaderHeightChange, onBackButtonPress, }) => {
+    const hasRightAction = !!rightActionConfig;
+    const hasTitle = title !== undefined && title?.length > 0;
+    const theme = useTheme();
+    const layoutHeight = useSharedValue(0);
+    const animatedHeightStyle = useAnimatedStyle(() => {
         return {
             height: layoutHeight.value,
         };
     });
-    var onLayout = function (e) {
-        var height = e.nativeEvent.layout.height;
+    const onLayout = (e) => {
+        const { height } = e.nativeEvent.layout;
         if (height === layoutHeight.value) {
             return;
         }
         // we want to only update height of the expanded header to set content offset on the client side
         if (!scrolled) {
-            onHeaderHeightChange === null || onHeaderHeightChange === void 0 ? void 0 : onHeaderHeightChange(height);
+            onHeaderHeightChange?.(height);
         }
-        layoutHeight.value = (0, react_native_reanimated_1.withTiming)(height, {
+        layoutHeight.value = withTiming(height, {
             duration: FADE_ANIMATION_DURATION,
-            easing: react_native_reanimated_1.Easing.linear,
+            easing: Easing.linear,
         });
     };
     // NavWrapper will recieve height of the NavContainer and animate it
     // content inside NavContainer is the only dynamic part of NavHeader
-    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
+    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [_jsx(Animated.View, { style: {
                         width: scrolled ? '33.3%' : '100%',
                         // Important for maintaining white space above the title on main app screens.
                         height: !canGoBack ? theme.core.space[10] : undefined,
-                    }, children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, { collapsed: scrolled, children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { titleVisible: hasTitle, children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
+                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { titleVisible: hasTitle, children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
                         // if we don't have right action leave more space for the title text in expanded state
                         , { 
                             // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
+                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
 };
-exports.NavHeader = NavHeader;