@ovotech/element-native 3.3.1 → 3.3.2-canary-51af19f-615

package/dist/components/Accordion/Accordion.js

@@ -53,12 +53,12 @@ exports.Accordion = exports.withAnimated = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var use_layout_1 = require("../../hooks/use-layout");
 var styled_native_1 = require("../../styled.native");
 var utils_1 = require("../../utils");
 var Heading_1 = require("../Heading");
 var Group_1 = require("./Group");
 var Icon_1 = require("./Icon");
-var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
 function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -85,7 +85,7 @@ var Accordion = function (_a) {
     var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(AccordionHeading); }, [
         AccordionHeading,
     ]);
-    var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
+    var _d = (0, use_layout_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
     var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,

package/dist/components/List/List.js

@@ -98,14 +98,14 @@ var Ul = function (_a) {
     var renderList = function (arrayChildren, level) {
         if (level === void 0) { level = 0; }
         return react_1.Children.map(arrayChildren, function (child) {
-            var _a, _b;
+            var _a, _b, _c;
             // @ts-ignore It complains that child props doesn't exist. Weird.
-            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children)) {
+            if (Array.isArray((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) && ((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ul') {
                 var lvl = level;
                 var PADDING = 3;
                 lvl = lvl + PADDING;
                 // @ts-ignore It complains that child props doesn't exist. Weird.
-                return renderList((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.children, lvl);
+                return renderList((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.children, lvl);
             }
             else {
                 return ((0, jsx_runtime_1.jsx)(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: child })));

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

@@ -1,16 +1,14 @@
-/// <reference types="react" />
-declare type NavHeaderProps = {
-    headline?: boolean;
-    options: NavHeaderOptions;
+import { IconNameExtended } from '../../providers';
+declare type RightActionConfig = {
+    iconName?: IconNameExtended;
+    onActionPress?: () => void;
 };
-declare type NavHeaderOptions = {
+declare type NavHeaderProps = {
     title?: string;
-    statusBarHeight?: number;
-    header?(): React.ReactNode;
-    headerLeft?(): React.ReactNode;
-    headerRight?(): React.ReactNode;
-    canGoBack(): boolean;
+    scrolled: boolean;
+    rightActionConfig?: RightActionConfig;
+    canGoBack: boolean;
     goBack(): void;
 };
-export declare const NavHeader: ({ options, headline }: NavHeaderProps) => JSX.Element;
+export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, goBack, }: NavHeaderProps) => JSX.Element;
 export {};

package/dist/components/NavHeader/NavHeader.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -40,51 +36,53 @@ var __importStar = (this && this.__importStar) || function (mod) {
 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_1 = require("react-native");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var react_native_svg_1 = require("react-native-svg");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Heading_1 = require("../Heading");
-var BackIcon = function () {
-    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.Svg, __assign({ width: "10", height: "16", viewBox: "0 0 10 16" }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" }) })));
-};
-var StyledText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), semantic.inverted.message.base, core.fontSize.small.small, core.fontFamily.body.native);
-});
-var LeftHeaderText = (0, styled_native_1.default)(StyledText)(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), core.space[2]);
-});
-var HeadlineView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), core.space[3], core.space[3]);
-});
-var RootView = styled_native_1.default.View(function (_a) {
-    var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), semantic.message.branded);
-});
-var StyledView = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var core = _a.theme.core, marginTop = _a.marginTop;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), core.space[3], core.space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
-});
-var StyledHeading4 = (0, styled_native_1.default)(Heading_1.Heading4)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, textAlign = _a.textAlign;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), core.fontFamily.bodyBold.native, semantic.inverted.message.base, textAlign);
-});
-var StyledHeading3 = (0, styled_native_1.default)(Heading_1.Heading3)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), semantic.inverted.message.base);
-});
+var use_layout_1 = require("../../hooks/use-layout");
+var ActionList_1 = require("../ActionList");
+var Icon_1 = require("../Icon");
+var NavHeader_styles_1 = require("./NavHeader.styles");
+// calculated based on layout with maximum possible height
+var INITIAL_HEADER_HEIGHT = 115;
+var FADE_ANIMATION_DURATION = 250; // ms
 var NavHeader = function (_a) {
-    var options = _a.options, headline = _a.headline;
-    return ((0, jsx_runtime_1.jsxs)(RootView, __assign({ layout: react_native_reanimated_1.Layout === null || react_native_reanimated_1.Layout === void 0 ? void 0 : react_native_reanimated_1.Layout.duration(150) }, { children: [(0, jsx_runtime_1.jsxs)(StyledView, __assign({ marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight }, { children: [(options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, __assign({ style: {
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            flex: 1,
-                            flexGrow: 1,
-                            flexShrink: 1,
-                        }, onPress: options === null || options === void 0 ? void 0 : options.goBack }, { children: [(0, jsx_runtime_1.jsx)(BackIcon, {}), (0, jsx_runtime_1.jsx)(LeftHeaderText, { children: "Back" })] }))) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } }, { children: (0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, { children: !headline ? options === null || options === void 0 ? void 0 : options.title : ' ' })) })), (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, { children: options.headerRight ? options.headerRight() : null }))] })), headline ? ((0, jsx_runtime_1.jsx)(HeadlineView, __assign({ entering: react_native_reanimated_1.FadeIn, exiting: react_native_reanimated_1.FadeOut }, { children: (options === null || options === void 0 ? void 0 : options.title) ? ((0, jsx_runtime_1.jsx)(StyledHeading3, { children: options.title })) : null }))) : null] })));
+    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
+    var _b = (0, use_layout_1.useLayout)(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
+    var navHeight = (0, react_native_reanimated_1.useSharedValue)(layout.height); // initial value
+    var animatedNavHeight = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            height: navHeight.value,
+        };
+    });
+    // take children calculated height and change NavContainer height accordingly but with animation
+    (0, react_1.useEffect)(function () {
+        (0, react_native_reanimated_1.runOnUI)(function () {
+            'worklet';
+            navHeight.value = (0, react_native_reanimated_1.withTiming)(Math.floor(layout.height), {
+                duration: FADE_ANIMATION_DURATION,
+            });
+        })();
+    }, [layout.height]);
+    // NavContainer is animated view, height transition will be smooth
+    // in order to tell NavContainer which height it children have we need another NavWrapper
+    // back-button, title and right-action has wrappers with 33.3% and they are always rendered
+    // we need it for correct placing of the title when either back-button or right-action missing
+    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavContainer, __assign({ style: animatedNavHeight }, { children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavWrapper, __assign({ onLayout: onLayout }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
+                        width: scrolled ? '33.3%' : '100%',
+                        height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
+                    }, layout: react_native_reanimated_1.Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), 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, { 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, __assign({ fullWidth: !scrolled && !rightActionConfig, 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, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
 };
 exports.NavHeader = NavHeader;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+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;
+    if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, __assign({ hitSlop: 44, pressRetentionOffset: 44, onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress }, { children: function (_a) {
+            var pressed = _a.pressed;
+            return ((0, jsx_runtime_1.jsx)(ButtonStyled, __assign({ entering: animation, "$pressed": pressed }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: element_core_1.theme.semantic.inverted.message.base }) })));
+        } })));
+};