@artsy/palette-mobile 13.0.31 → 13.0.32

package/dist/elements/Screen/StickySubHeader.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 export interface StickySubHeaderProps extends React.PropsWithChildren<{}> {
     title: string;
+    subTitle?: string;
 }
 export declare const StickySubHeader: React.FC<StickySubHeaderProps>;

package/dist/elements/Screen/StickySubHeader.js

@@ -3,22 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StickySubHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const moti_1 = require("moti");
+const react_1 = require("react");
 const ScreenScrollContext_1 = require("./ScreenScrollContext");
 const constants_1 = require("./constants");
+const hooks_1 = require("../../utils/hooks");
 const Flex_1 = require("../Flex");
 const Separator_1 = require("../Separator");
 const Text_1 = require("../Text");
-const STICKY_BAR_HEIGHT = 60;
-const StickySubHeader = ({ title, children }) => {
+const STICKY_BAR_HEIGHT = 52;
+const StickySubHeader = ({ title, subTitle, children }) => {
     const { currentScrollY, scrollYOffset = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const space = (0, hooks_1.useSpace)();
+    const [stickyBarHeight, setStickyHeaderHeight] = (0, react_1.useState)(null);
     const visible = currentScrollY >= constants_1.NAVBAR_HEIGHT + scrollYOffset ? false : true;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
-                    height: visible ? STICKY_BAR_HEIGHT : 0,
-                    opacity: visible ? 1 : 0,
-                    transform: [{ translateY: visible ? 0 : -STICKY_BAR_HEIGHT }],
-                }, transition: {
+    const handleLayout = (event) => {
+        setStickyHeaderHeight(event.nativeEvent.layout.height);
+    };
+    // The styles are kept in a variable to make sure they're always in sync with the hidden text component
+    const styles = {
+        paddingVertical: space(1),
+        paddingHorizontal: space(2),
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [stickyBarHeight === null && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: styles, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
+                    height: visible ? stickyBarHeight || undefined : 0,
+                    transform: [{ translateY: visible ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT) }],
+                }, style: styles, transition: {
                     type: "timing",
-                    duration: 200,
-                }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 1, px: 2, children: title }) }), children, (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black10" })] }));
+                    duration: 100,
+                }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: { height: stickyBarHeight }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: title }), subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }), children, (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black10" })] }));
 };
 exports.StickySubHeader = StickySubHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.31",
+  "version": "13.0.32",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",