@ovotech/element-native 5.4.0 → 5.4.1

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

@@ -0,0 +1,18 @@
+import { RightActionConfig } from './IconButton';
+export type NavHeaderProps = {
+    title?: string;
+    scrolled: boolean;
+    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, canGoBack, rightActionConfig, topOffset, backButtonText, onHeaderHeightChange, onBackButtonPress, }: NavHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NavHeader/NavHeader.js

@@ -0,0 +1,43 @@
+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,
+        };
+    });
+    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?.(height);
+        }
+        layoutHeight.value = withTiming(height, {
+            duration: FADE_ANIMATION_DURATION,
+            easing: Easing.linear,
+        });
+    };
+    // NavWrapper will recieve height of the NavContainer and animate it
+    // content inside NavContainer is the only dynamic part of NavHeader
+    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 && (_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: 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) }) })] }))] }) }));
+};