@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/Margin/Margin.js

@@ -32,8 +32,10 @@ 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]); };
+    var theme = _a.theme, 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)(theme.space[String(spaceKey * 100)]);
+    };
     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

package/dist/components/NavHeader/NavHeader.d.ts

@@ -1,4 +1,10 @@
-import { RightActionConfig } from './IconButton';
+import { IconNameExtended } from '../../providers';
+export type RightActionConfig = {
+    iconName?: IconNameExtended;
+    onActionPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+};
 export type NavHeaderProps = {
     title?: string;
     scrolled: boolean;

package/dist/components/NavHeader/NavHeader.js

@@ -26,16 +26,14 @@ 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 Button_1 = require("../Button");
 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 () {
         return {
@@ -58,14 +56,6 @@ var NavHeader = function (_a) {
     };
     // 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: {
-                        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
-                        // 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) }) })] }))] }) }));
+    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, hasTitle: hasTitle, onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.BackActionWrapper, { collapsed: scrolled, hasBackButton: canGoBack, children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, { standalone: true, iconLeft: "chevron-left-small", onPress: onBackButtonPress, children: backButtonText })) }), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION), children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", children: title }) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.HeaderGap, { hasRightAction: hasRightAction }), hasRightAction && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle, { hasRightAction: !hasRightAction, hasTitle: hasTitle, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), hasRightAction && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }))] }))] }) }));
 };
 exports.NavHeader = NavHeader;