@artsy/palette-mobile 13.0.5 → 13.0.7

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v13.0.7 (Tue Sep 12 2023)
+
+#### 🐛 Bug Fix
+
+- feat(Image): expose gemini resize mode from Image [#148](https://github.com/artsy/palette-mobile/pull/148) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
+# v13.0.6 (Mon Sep 11 2023)
+
+#### 🐛 Bug Fix
+
+- feat(tabs): adds scroll offsets to the tabs when checking scroll position [#147](https://github.com/artsy/palette-mobile/pull/147) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v13.0.5 (Mon Sep 11 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Image/Image.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { FastImageProps } from "react-native-fast-image";
+import { GeminiResizeMode } from "../../utils/createGeminiUrl";
 type CustomFastImageProps = Omit<FastImageProps, "onLoadStart" | "onLoadEnd" | "source">;
 export interface ImageProps extends CustomFastImageProps {
     /** Supplied aspect ratio of image. If none provided, defaults to 1 */
@@ -12,6 +13,8 @@ export interface ImageProps extends CustomFastImageProps {
     performResize?: boolean;
     /** Source url to the image  */
     src: string;
+    /** Gemini resize_to param  */
+    geminiResizeMode?: GeminiResizeMode;
 }
 export declare const Image: React.FC<ImageProps>;
 export {};

package/dist/elements/Image/Image.js

@@ -15,7 +15,7 @@ const hooks_1 = require("../../utils/hooks");
 const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
 const Flex_1 = require("../Flex");
 const Skeleton_1 = require("../Skeleton");
-const Image = ({ aspectRatio, width, height, performResize = true, src, style, resizeMode, ...flexProps }) => {
+const Image = ({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, ...flexProps }) => {
     const [loading, setLoading] = (0, react_1.useState)(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
     const color = (0, hooks_1.useColor)();
@@ -25,6 +25,7 @@ const Image = ({ aspectRatio, width, height, performResize = true, src, style, r
             imageURL: src,
             width: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.width),
             height: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
+            resizeMode: geminiResizeMode,
         });
     }
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "relative", ...flexProps, children: [!!loading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", zIndex: 1, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { ...dimensions }) }) })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: { opacity: loading ? 0 : 1 }, transition: { type: "timing", duration: 400, easing: react_native_reanimated_1.Easing.sin }, children: (0, jsx_runtime_1.jsx)(react_native_fast_image_1.default, { style: [dimensions, style, { backgroundColor: color("black30") }], resizeMode: resizeMode, onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), source: {

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

@@ -9,6 +9,7 @@ export interface HeaderProps {
     onBack?: () => void;
     rightElements?: React.ReactNode;
     scrollY?: number;
+    scrollYOffset?: number;
     title?: string;
     titleProps?: FlexProps;
     titleShown?: boolean;

package/dist/elements/Screen/Header.js

@@ -35,11 +35,11 @@ const Spacer_1 = require("../Spacer");
 const Text_1 = require("../Text");
 const Touchable_1 = require("../Touchable");
 const AnimatedHeader = (props) => {
-    const { currentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    return (0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, animated: true, ...props });
+    const { currentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    return ((0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, scrollYOffset: scrollYOffset, animated: true, ...props }));
 };
 exports.AnimatedHeader = AnimatedHeader;
-const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, title, titleProps = {}, }) => {
+const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, scrollYOffset = 0, title, titleProps = {}, }) => {
     const Left = () => {
         if (hideLeftElements) {
             return null;
@@ -56,7 +56,7 @@ const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTit
             return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", width: "100%", ...titleProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }) }) }));
         }
         // Show / hide the title to avoid rerenders, which retrigger the animation
-        const display = scrollY < constants_1.NAVBAR_HEIGHT ? "none" : "flex";
+        const display = scrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), exiting: react_native_reanimated_1.FadeOut.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), style: {
                     display,
                     flex: 1,

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

@@ -2,6 +2,8 @@
 export interface ScreenScrollContextProps {
     currentScrollY: number;
     updateCurrentScrollY: (scrollY: number) => void;
+    scrollYOffset?: number;
+    updateScrollYOffset: (offset: number) => void;
 }
 export declare const ScreenScrollContextProvider: React.FC<React.PropsWithChildren>;
 export declare const useScreenScrollContext: () => ScreenScrollContextProps;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -6,14 +6,21 @@ const react_1 = require("react");
 const ScreenScrollContext = (0, react_1.createContext)({
     currentScrollY: 0,
     updateCurrentScrollY: () => { },
+    scrollYOffset: undefined,
+    updateScrollYOffset: () => { },
 });
 const ScreenScrollContextProvider = ({ children }) => {
     const [currentScrollY, setCurrentScrollY] = (0, react_1.useState)(0);
+    const [scrollYOffset, setScrollYOffset] = (0, react_1.useState)(undefined);
     const providerValue = {
         currentScrollY,
+        scrollYOffset,
         updateCurrentScrollY: (scrollY) => {
             setCurrentScrollY(scrollY);
         },
+        updateScrollYOffset: (yOffset) => {
+            setScrollYOffset(yOffset);
+        },
     };
     return ((0, jsx_runtime_1.jsx)(ScreenScrollContext.Provider, { value: providerValue, children: children }));
 };

package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.d.ts

@@ -1,2 +1,2 @@
 import { SharedValue } from "react-native-reanimated";
-export declare const useAnimatedHeaderScrolling: (scrollY: SharedValue<number>) => number;
+export declare const useAnimatedHeaderScrolling: (scrollY: SharedValue<number>, scrollYOffset?: number) => number;

package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.js

@@ -4,9 +4,10 @@ exports.useAnimatedHeaderScrolling = void 0;
 const react_1 = require("react");
 const react_native_reanimated_1 = require("react-native-reanimated");
 const constants_1 = require("../constants");
-const useAnimatedHeaderScrolling = (scrollY) => {
+const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
     const listenForScroll = (0, react_native_reanimated_1.useSharedValue)(true);
     const [currScrollY, setCurrScrollY] = (0, react_1.useState)(scrollY.value);
+    const HEADER_HEIGHT = (0, react_1.useMemo)(() => constants_1.NAVBAR_HEIGHT + scrollYOffset, [scrollYOffset]);
     // Needed to run on JS thread
     const update = (y) => {
         setCurrScrollY(y);
@@ -25,17 +26,17 @@ const useAnimatedHeaderScrolling = (scrollY) => {
         const [prevScrollY] = previousScroll ?? [0, false];
         // Hacky way to avoid some weird header behavior.
         // look at HACKS.md for more info.
-        const suddenlyScrolled = Math.abs(animatedScrollY - prevScrollY) > constants_1.NAVBAR_HEIGHT;
+        const suddenlyScrolled = Math.abs(animatedScrollY - prevScrollY) > HEADER_HEIGHT;
         if (isListeningForScroll && suddenlyScrolled) {
             return;
         }
-        const prevTitleShown = prevScrollY >= constants_1.NAVBAR_HEIGHT;
-        const currTitleShown = animatedScrollY >= constants_1.NAVBAR_HEIGHT;
+        const prevTitleShown = prevScrollY >= HEADER_HEIGHT;
+        const currTitleShown = animatedScrollY >= HEADER_HEIGHT;
         if (prevTitleShown === currTitleShown) {
             return;
         }
         (0, react_native_reanimated_1.runOnJS)(update)(Math.floor(animatedScrollY));
-    }, [scrollY]);
+    }, [scrollY, HEADER_HEIGHT]);
     return currScrollY;
 };
 exports.useAnimatedHeaderScrolling = useAnimatedHeaderScrolling;

package/dist/elements/Screen/hooks/useListenForScreenScroll.js

@@ -6,9 +6,9 @@ const react_native_reanimated_1 = require("react-native-reanimated");
 const useAnimatedHeaderScrolling_1 = require("./useAnimatedHeaderScrolling");
 const ScreenScrollContext_1 = require("../ScreenScrollContext");
 const useListenForScreenScroll = () => {
-    const { updateCurrentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
     const animatedScrollY = (0, react_native_reanimated_1.useSharedValue)(0);
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY);
+    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)(animatedScrollY, scrollYOffset);
     const scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
         onScroll: (event) => {
             animatedScrollY.value = event.contentOffset.y;

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -6,8 +6,8 @@ const react_native_collapsible_tab_view_1 = require("react-native-collapsible-ta
 const ScreenScrollContext_1 = require("../../Screen/ScreenScrollContext");
 const useAnimatedHeaderScrolling_1 = require("../../Screen/hooks/useAnimatedHeaderScrolling");
 const useListenForTabContentScroll = () => {
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)());
-    const { updateCurrentScrollY } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
+    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)(), scrollYOffset);
     (0, react_1.useEffect)(() => {
         updateCurrentScrollY(scrollY);
     }, [scrollY, updateCurrentScrollY]);

package/dist/utils/createGeminiUrl.d.ts

@@ -1,8 +1,9 @@
+export type GeminiResizeMode = "fit" | "fill";
 export declare function createGeminiUrl({ imageURL, width, height, geminiHost, imageQuality, resizeMode, }: {
     imageURL: string;
     width: number;
     height: number;
     geminiHost?: string;
     imageQuality?: number;
-    resizeMode?: "fit" | "fill";
+    resizeMode?: GeminiResizeMode;
 }): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.5",
+  "version": "13.0.7",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",