@ovotech/element-native 3.8.0 → 3.8.1-canary-dff71b6-233

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

@@ -2,9 +2,17 @@ import { RightActionConfig } from './IconButton';
 export declare type NavHeaderProps = {
     title?: string;
     scrolled: boolean;
-    rightActionConfig?: RightActionConfig;
     canGoBack?: boolean;
     backButtonText?: string;
+    topOffset?: number;
+    rightActionConfig?: RightActionConfig;
     onBackButtonPress?: () => void;
+    /**
+     * This callback is used to send the height of the NavContainer
+     * to the app side. It will be used to set content offset
+     * because NavHeader is absolutely positioned.
+     * @param height - height of the expanded NavHeader
+     */
+    onHeaderHeightChange?: (height: number) => void;
 };
-export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, backButtonText, onBackButtonPress, }: NavHeaderProps) => JSX.Element;
+export declare const NavHeader: ({ title, scrolled, canGoBack, rightActionConfig, topOffset, backButtonText, onHeaderHeightChange, onBackButtonPress, }: NavHeaderProps) => JSX.Element;

package/dist/components/NavHeader/NavHeader.js

@@ -37,48 +37,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var ActionList_1 = require("../ActionList");
 var IconButton_1 = require("./IconButton");
 var NavHeader_styles_1 = require("./NavHeader.styles");
 var FADE_ANIMATION_DURATION = 200;
-var ONLY_TITLE_CONTAINER_HEIGHT = 108;
-var TITLE_AND_BACK_CONTAINER_HEIGHT = 92;
 var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, _b = _a.backButtonText, backButtonText = _b === void 0 ? 'Back' : _b, onBackButtonPress = _a.onBackButtonPress;
+    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 initialContainerHeight = canGoBack
-        ? TITLE_AND_BACK_CONTAINER_HEIGHT
-        : ONLY_TITLE_CONTAINER_HEIGHT;
-    var animatedContainerHeight = (0, react_native_reanimated_1.useSharedValue)(initialContainerHeight);
+    var layoutHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
-            height: animatedContainerHeight.value,
+            height: layoutHeight.value,
         };
     });
-    (0, react_1.useEffect)(function () {
-        if (scrolled) {
-            animatedContainerHeight.value = (0, react_native_reanimated_1.withTiming)(56, {
-                duration: FADE_ANIMATION_DURATION,
-                easing: react_native_reanimated_1.Easing.linear,
-            });
+    var onLayout = function (e) {
+        var height = e.nativeEvent.layout.height;
+        if (height === layoutHeight.value) {
+            return;
         }
-        else {
-            animatedContainerHeight.value = (0, react_native_reanimated_1.withTiming)(initialContainerHeight, {
-                duration: FADE_ANIMATION_DURATION,
-                easing: react_native_reanimated_1.Easing.linear,
-            });
+        // 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);
         }
-    }, [scrolled]);
-    return ((0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, __assign({ collapsed: scrolled, style: [animatedHeightStyle] }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
-                    width: scrolled ? '33.3%' : '100%',
-                    // when back button is off we have small margin top for title, to write less code we can just set height
-                    height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
-                } }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, __assign({ collapsed: scrolled }, { children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ 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, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ 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
-                    , __assign({ 
+        layoutHeight.value = (0, react_native_reanimated_1.withTiming)(height, {
+            duration: FADE_ANIMATION_DURATION,
+            easing: react_native_reanimated_1.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, __assign({ collapsed: scrolled, style: animatedHeightStyle }, { children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, __assign({ topOffset: topOffset, onLayout: onLayout }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
+                        width: scrolled ? '33.3%' : '100%',
+                        // when back button is off we have small margin top for title, to write less code we can just set height
+                        height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
+                    } }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, __assign({ collapsed: scrolled }, { children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ 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, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ 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
-                        fullWidth: !scrolled && !hasRightAction, numberOfLines: 1, 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 })), (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) }) })] }))] })));
+                        , __assign({ 
+                            // 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, 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) }) })] }))] })) })));
 };
 exports.NavHeader = NavHeader;