@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

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

@@ -1,10 +1,18 @@
 import { RightActionConfig } from './IconButton';
-export declare type NavHeaderProps = {
+export 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

@@ -1,185 +1,69 @@
-import { jsxs as e, jsx as i, Fragment as l } from "react/jsx-runtime";
-import { t as N } from "../../theme-web-MrdqV6Ln.js";
-import { useEffect as E } from "react";
-import O, { useSharedValue as _, useAnimatedStyle as y, withTiming as d, Easing as s, FadeInDown as h, FadeOutDown as H, FadeInUp as u, FadeOutUp as v } from "react-native-reanimated";
-import { Action as x } from "../ActionList/ActionList.js";
-import { IconButton as c } from "./IconButton.js";
-import { NavContainer as C, ActionWrapper as F, CollapsedTitleWrapper as L, CollapsedTitle as w, IconButtonWrapper as I, ExpandedTitle as D } from "./NavHeader.styles.js";
-import "react-native";
-import "../../hooks/use-breakpoint.js";
-import "../../styled.native-KEscfVp7.js";
-import "../ActionList/styled.js";
-import "../../utils-HsZygzDh.js";
-import "../../utils/utils.js";
-import "../Icon/Icon.js";
-import "../../providers/IconsProvider.js";
-import "../../providers/icons/Address.js";
-import "react-native-svg";
-import "../../providers/icons/Advice.js";
-import "../../providers/icons/Archive.js";
-import "../../providers/icons/ArrowDown.js";
-import "../../providers/icons/ArrowLeft.js";
-import "../../providers/icons/ArrowRight.js";
-import "../../providers/icons/ArrowUp.js";
-import "../../providers/icons/Award.js";
-import "../../providers/icons/Battery.js";
-import "../../providers/icons/Cal.js";
-import "../../providers/icons/CalBook.js";
-import "../../providers/icons/CaretDown.js";
-import "../../providers/icons/CaretLeft.js";
-import "../../providers/icons/CaretRight.js";
-import "../../providers/icons/CaretUp.js";
-import "../../providers/icons/Chart.js";
-import "../../providers/icons/ChartFilled.js";
-import "../../providers/icons/Check.js";
-import "../../providers/icons/CheckCircle.js";
-import "../../providers/icons/ChevronDown.js";
-import "../../providers/icons/ChevronLeft.js";
-import "../../providers/icons/ChevronLeftSmall.js";
-import "../../providers/icons/ChevronLeftSmallFirst.js";
-import "../../providers/icons/ChevronRight.js";
-import "../../providers/icons/ChevronRightSmall.js";
-import "../../providers/icons/ChevronRightSmallLast.js";
-import "../../providers/icons/ChevronUp.js";
-import "../../providers/icons/Circle.js";
-import "../../providers/icons/CloseCircle.js";
-import "../../providers/icons/Cross.js";
-import "../../providers/icons/Doc.js";
-import "../../providers/icons/Dollar.js";
-import "../../providers/icons/Download.js";
-import "../../providers/icons/Eco.js";
-import "../../providers/icons/EcoHome.js";
-import "../../providers/icons/Edit.js";
-import "../../providers/icons/ElectricCar.js";
-import "../../providers/icons/ElectricHome.js";
-import "../../providers/icons/Electricity.js";
-import "../../providers/icons/EnergyAdvice.js";
-import "../../providers/icons/Equals.js";
-import "../../providers/icons/Euro.js";
-import "../../providers/icons/Gas.js";
-import "../../providers/icons/GlobeAddress.js";
-import "../../providers/icons/Help.js";
-import "../../providers/icons/Hide.js";
-import "../../providers/icons/Home.js";
-import "../../providers/icons/HomeFilled.js";
-import "../../providers/icons/HydroPower.js";
-import "../../providers/icons/Info.js";
-import "../../providers/icons/Link.js";
-import "../../providers/icons/Logo.js";
-import "../../providers/icons/Mail.js";
-import "../../providers/icons/MailOpen.js";
-import "../../providers/icons/Menu.js";
-import "../../providers/icons/Message.js";
-import "../../providers/icons/MessageFilled.js";
-import "../../providers/icons/Minus.js";
-import "../../providers/icons/Mobile.js";
-import "../../providers/icons/NewWindow.js";
-import "../../providers/icons/PaymentCard.js";
-import "../../providers/icons/Phone.js";
-import "../../providers/icons/Plus.js";
-import "../../providers/icons/Pound.js";
-import "../../providers/icons/Pricing.js";
-import "../../providers/icons/Search.js";
-import "../../providers/icons/Security.js";
-import "../../providers/icons/Show.js";
-import "../../providers/icons/SmartHome.js";
-import "../../providers/icons/SmartMeter.js";
-import "../../providers/icons/Solar.js";
-import "../../providers/icons/Star.js";
-import "../../providers/icons/Sun.js";
-import "../../providers/icons/Torch.js";
-import "../../providers/icons/Trees.js";
-import "../../providers/icons/Tune.js";
-import "../../providers/icons/User.js";
-import "../../providers/icons/UserFilled.js";
-import "../../providers/icons/Wallet.js";
-import "../../providers/icons/WalletFilled.js";
-import "../../providers/icons/WarmHome.js";
-import "../../providers/icons/Warning.js";
-import "../../providers/icons/WebAddress.js";
-import "../../providers/icons/WindPower.js";
-const t = 200, z = 108, R = 92, xt = ({
-  title: n,
-  scrolled: r,
-  rightActionConfig: m,
-  canGoBack: o,
-  backButtonText: T = "Back",
-  onBackButtonPress: f
-}) => {
-  const g = !!m, a = o ? R : z, p = _(a), A = y(() => ({
-    height: p.value
-  }));
-  return E(() => {
-    r ? p.value = d(56, {
-      duration: t,
-      easing: s.linear
-    }) : p.value = d(a, {
-      duration: t,
-      easing: s.linear
+"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 element_core_1 = require("@ovotech/element-core");
+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 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 layoutHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            height: layoutHeight.value,
+        };
     });
-  }, [r]), /* @__PURE__ */ e(C, { collapsed: r, style: [A], children: [
-    /* @__PURE__ */ i(
-      O.View,
-      {
-        style: {
-          width: r ? "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: o ? void 0 : parseInt(N.core.space[10])
-        },
-        children: o && /* @__PURE__ */ i(F, { collapsed: r, children: /* @__PURE__ */ i(
-          x,
-          {
-            iconLeft: "chevron-left-small",
-            inline: !0,
-            onPress: f,
-            children: T
-          }
-        ) })
-      }
-    ),
-    r ? /* @__PURE__ */ e(l, { children: [
-      /* @__PURE__ */ i(L, { children: /* @__PURE__ */ i(
-        w,
-        {
-          numberOfLines: 1,
-          ellipsizeMode: "tail",
-          entering: h.delay(t),
-          exiting: H.duration(t),
-          children: n
-        }
-      ) }),
-      /* @__PURE__ */ i(I, { children: /* @__PURE__ */ i(
-        c,
-        {
-          rightActionConfig: m,
-          size: "small",
-          animation: h.delay(t)
+    var onLayout = function (e) {
+        var height = e.nativeEvent.layout.height;
+        if (height === layoutHeight.value) {
+            return;
         }
-      ) })
-    ] }) : /* @__PURE__ */ e(l, { children: [
-      /* @__PURE__ */ i(
-        D,
-        {
-          fullWidth: !r && !g,
-          numberOfLines: 1,
-          ellipsizeMode: "tail",
-          hasBackButton: o,
-          entering: u.delay(t),
-          exiting: v.duration(t),
-          children: n
+        // 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);
         }
-      ),
-      /* @__PURE__ */ i(I, { children: /* @__PURE__ */ i(
-        c,
-        {
-          rightActionConfig: m,
-          size: "large",
-          animation: u.delay(t)
-        }
-      ) })
-    ] })
-  ] });
-};
-export {
-  xt as NavHeader
+        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, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { 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, { 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, { 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, 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;