@artsy/palette-mobile 13.1.3 → 13.1.4

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

@@ -15,6 +15,8 @@ export interface ImageProps extends CustomFastImageProps {
     src: string;
     /** Gemini resize_to param  */
     geminiResizeMode?: GeminiResizeMode;
+    /** Show loading state  */
+    showLoadingState?: boolean;
 }
 export declare const Image: React.FC<ImageProps>;
 export {};

package/dist/elements/Image/Image.js

@@ -15,10 +15,13 @@ 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, geminiResizeMode, ...flexProps }) => {
+const Image = ({ aspectRatio, width, height, performResize = true, src, style, resizeMode, geminiResizeMode, showLoadingState = false, ...flexProps }) => {
     const [loading, setLoading] = (0, react_1.useState)(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
     const color = (0, hooks_1.useColor)();
+    if (showLoadingState) {
+        return ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { ...dimensions }) }));
+    }
     let uri = src;
     if (performResize) {
         uri = (0, createGeminiUrl_1.createGeminiUrl)({

package/dist/elements/LazyFlatlist/LazyFlatlist.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+export declare function LazyFlatlist<T>(props: {
+    keyExtractor: (item: T) => string;
+    children: (props: {
+        viewedItems: Set<string>;
+        viewabilityConfig: any;
+        onViewableItemsChanged: any;
+        hasSeenItem: (item: T) => boolean;
+    }) => React.ReactNode | null | undefined;
+}): ReactElement;

package/dist/elements/LazyFlatlist/LazyFlatlist.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyFlatlist = void 0;
+const useHasSeenItem_1 = require("./useHasSeenItem");
+function LazyFlatlist(props) {
+    const { viewabilityConfig, onViewableItemsChanged, hasSeenItem, viewedItems } = (0, useHasSeenItem_1.useHasSeenItem)({
+        keyExtractor: props.keyExtractor,
+    });
+    if (!props.children || typeof props.children !== "function") {
+        throw new Error("LazyScrollContext requires children");
+    }
+    return props.children({
+        viewedItems,
+        viewabilityConfig,
+        onViewableItemsChanged,
+        hasSeenItem,
+    });
+}
+exports.LazyFlatlist = LazyFlatlist;

package/dist/elements/LazyFlatlist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./LazyFlatlist";
+export * from "./useHasSeenItem";

package/dist/elements/LazyFlatlist/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LazyFlatlist"), exports);
+__exportStar(require("./useHasSeenItem"), exports);

package/dist/elements/LazyFlatlist/useHasSeenItem.d.ts

@@ -0,0 +1,12 @@
+import { ViewToken, ViewabilityConfig } from "react-native";
+export declare const useHasSeenItem: <T>({ keyExtractor }: {
+    keyExtractor: (item: T) => string;
+}) => {
+    onViewableItemsChanged: ({ viewableItems }: {
+        viewableItems: ViewToken[];
+        changed: ViewToken[];
+    }) => void;
+    viewabilityConfig: ViewabilityConfig;
+    hasSeenItem: (item: T) => boolean;
+    viewedItems: Set<string>;
+};

package/dist/elements/LazyFlatlist/useHasSeenItem.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHasSeenItem = void 0;
+const react_1 = require("react");
+// This is a custom hook that is used to determine if a user has seen an item in a list or not
+const useHasSeenItem = ({ keyExtractor }) => {
+    const [viewedItems, setViewedItems] = (0, react_1.useState)(new Set());
+    const viewabilityConfig = (0, react_1.useRef)({
+        // Percent of of the item that is visible for a partially occluded item to count as "viewable"
+        itemVisiblePercentThreshold: 80,
+        minimumViewTime: 300,
+        waitForInteraction: false,
+    }).current;
+    const viewedItemsRef = (0, react_1.useRef)(new Set()).current;
+    const onViewableItemsChanged = (0, react_1.useRef)(({ viewableItems }) => {
+        viewableItems.forEach(({ item }) => {
+            viewedItemsRef.add(keyExtractor(item));
+        });
+        setViewedItems(new Set(viewedItemsRef));
+    }).current;
+    const hasSeenItem = (item) => {
+        return viewedItems.has(keyExtractor(item));
+    };
+    return {
+        onViewableItemsChanged,
+        viewabilityConfig,
+        hasSeenItem,
+        viewedItems,
+    };
+};
+exports.useHasSeenItem = useHasSeenItem;

package/dist/elements/index.d.ts

@@ -26,6 +26,7 @@ export * from "./MeasuredView";
 export * from "./MenuItem";
 export * from "./Pill";
 export * from "./PopIn";
+export * from "./LazyFlatlist";
 export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./Radio";

package/dist/elements/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./MeasuredView"), exports);
 __exportStar(require("./MenuItem"), exports);
 __exportStar(require("./Pill"), exports);
 __exportStar(require("./PopIn"), exports);
+__exportStar(require("./LazyFlatlist"), exports);
 __exportStar(require("./Popover"), exports);
 __exportStar(require("./ProgressBar"), exports);
 __exportStar(require("./Radio"), exports);

package/package.json

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