@artsy/palette-mobile 11.2.12 → 11.2.13

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v11.2.13 (Tue Aug 01 2023)
+
+#### 🐛 Bug Fix
+
+- feat(Image): enable more styling on the Image element and more [#120](https://github.com/artsy/palette-mobile/pull/120) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v11.2.12 (Fri Jul 28 2023)
 
 #### 🐛 Bug Fix

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { FlexProps } from "../Flex";
-export interface ImageProps extends FlexProps {
+import { FastImageProps } from "react-native-fast-image";
+type CustomFastImageProps = Omit<FastImageProps, "onLoadStart" | "onLoadEnd" | "source">;
+export interface ImageProps extends CustomFastImageProps {
     /** Supplied aspect ratio of image. If none provided, defaults to 1 */
     aspectRatio?: number;
     /** Supplied width of image. If none provided, defaults to screen width */
@@ -13,3 +14,4 @@ export interface ImageProps extends FlexProps {
     src: string;
 }
 export declare const Image: React.FC<ImageProps>;
+export {};

package/dist/elements/Image/Image.js

@@ -11,12 +11,14 @@ const react_native_1 = require("react-native");
 const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
 const react_native_reanimated_1 = require("react-native-reanimated");
 const createGeminiUrl_1 = require("../../utils/createGeminiUrl");
+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, ...flexProps }) => {
+const Image = ({ aspectRatio, width, height, performResize = true, src, style, resizeMode, ...flexProps }) => {
     const [loading, setLoading] = (0, react_1.useState)(true);
     const dimensions = useImageDimensions({ aspectRatio, width, height });
+    const color = (0, hooks_1.useColor)();
     let uri = src;
     if (performResize) {
         uri = (0, createGeminiUrl_1.createGeminiUrl)({
@@ -25,7 +27,7 @@ const Image = ({ aspectRatio, width, height, performResize = true, src, ...flexP
             height: react_native_1.PixelRatio.getPixelSizeForLayoutSize(dimensions.height),
         });
     }
-    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, onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), source: {
+    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: {
                         priority: react_native_fast_image_1.default.priority.normal,
                         uri,
                     } }) })] }));
@@ -40,7 +42,7 @@ const useImageDimensions = (props) => {
     }
     else {
         if (!props.aspectRatio) {
-            console.error("[CachedImage] Error: `aspectRatio` is required if `height` is not provided.");
+            console.error("[Image] Error: `aspectRatio` is required if `height` is not provided.");
         }
         const aspectRatio = props.aspectRatio ?? 1;
         imageHeight = imageWidth / aspectRatio;

package/dist/elements/Image/Image.stories.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("@storybook/react-native");
 const Image_1 = require("./Image");
+const Flex_1 = require("../Flex");
 (0, react_native_1.storiesOf)("Image", module)
     .add("With default fallback screen width", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
     .add("With width and height", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
     .add("With aspect ratio", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
-    .add("Without automatic resizing", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })));
+    .add("Without automatic resizing", () => ((0, jsx_runtime_1.jsx)(Image_1.Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" })))
+    .add("With percentage width and height", () => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 0.69 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg", height: 260, width: 180, style: { width: "100%", height: "100%" } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 1 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { src: "https://i.imgur.com/b9IZinu.gif", width: 200, height: 200, style: { width: "100%", height: "100%" } }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, style: { aspectRatio: 1.2 }, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { width: 200, height: 240, src: "https://i.imgur.com/non-existing-image.gif", style: { width: "100%", height: "100%" } }) })] }));
+});

package/package.json

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