react-datocms 4.0.3 → 4.0.5

package/dist/esm/useQuerySubscription/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useQuerySubscription/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,gBAAgB,GAKjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,2BAA2B,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAyB9F,MAAM,UAAU,oBAAoB,CAGlC,OAA0D;IAClD,IAAA,OAAO,GAA4B,OAAO,QAAnC,EAAE,WAAW,GAAe,OAAO,YAAtB,EAAK,KAAK,UAAK,OAAO,EAA5C,0BAAkC,CAAF,CAAa;IAE7C,IAAA,KAAoB,QAAQ,CAA0B,IAAI,CAAC,EAA1D,KAAK,QAAA,EAAE,QAAQ,QAA2C,CAAC;IAC5D,IAAA,KAAkB,QAAQ,CAAqB,IAAI,CAAC,EAAnD,IAAI,QAAA,EAAE,OAAO,QAAsC,CAAC;IACrD,IAAA,KAAsB,QAAQ,CAClC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAClC,EAFM,MAAM,QAAA,EAAE,SAAS,QAEvB,CAAC;IAEF,IAAM,uBAAuB,GAAG,KAG/B,CAAC;IAEF,oBAAoB,CAAC;QACnB,IAAI,OAAO,KAAK,KAAK,EAAE;YACrB,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,OAAO;gBACL,yCAAyC;YAC3C,CAAC,CAAC;SACH;QAED,IAAI,WAAiC,CAAC;QAEtC,SAAe,SAAS;;;;gCACR,qBAAM,gBAAgB,uBAC/B,uBAAuB,KAC1B,cAAc,EAAE,UAAC,MAAM;oCACrB,SAAS,CAAC,MAAM,CAAC,CAAC;gCACpB,CAAC,EACD,QAAQ,EAAE,UAAC,UAAU;oCACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;oCACf,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gCACpC,CAAC,EACD,cAAc,EAAE,UAAC,SAAS;oCACxB,OAAO,CAAC,IAAI,CAAC,CAAC;oCACd,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,IACD,EAAA;;4BAbF,WAAW,GAAG,SAaZ,CAAC;;;;;SACJ;QAED,SAAS,EAAE,CAAC;QAEZ,OAAO;YACL,IAAI,WAAW,EAAE;gBACf,WAAW,EAAE,CAAC;aACf;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,IAAI,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AACtD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useQuerySubscription/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,gBAAgB,GAKjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,2BAA2B,IAAI,oBAAoB,GACpD,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,UAAU,oBAAoB,CAGlC,OAA0D;IAClD,IAAA,OAAO,GAA4B,OAAO,QAAnC,EAAE,WAAW,GAAe,OAAO,YAAtB,EAAK,KAAK,UAAK,OAAO,EAA5C,0BAAkC,CAAF,CAAa;IAE7C,IAAA,KAAoB,QAAQ,CAA0B,IAAI,CAAC,EAA1D,KAAK,QAAA,EAAE,QAAQ,QAA2C,CAAC;IAC5D,IAAA,KAAkB,QAAQ,CAAqB,IAAI,CAAC,EAAnD,IAAI,QAAA,EAAE,OAAO,QAAsC,CAAC;IACrD,IAAA,KAAsB,QAAQ,CAClC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAClC,EAFM,MAAM,QAAA,EAAE,SAAS,QAEvB,CAAC;IAEF,IAAM,uBAAuB,GAAG,KAG/B,CAAC;IAEF,oBAAoB,CAAC;QACnB,IAAI,OAAO,KAAK,KAAK,EAAE;YACrB,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,OAAO;gBACL,yCAAyC;YAC3C,CAAC,CAAC;SACH;QAED,IAAI,WAAiC,CAAC;QAEtC,SAAe,SAAS;;;;gCACR,qBAAM,gBAAgB,uBAC/B,uBAAuB,KAC1B,cAAc,EAAE,UAAC,MAAM;oCACrB,SAAS,CAAC,MAAM,CAAC,CAAC;gCACpB,CAAC,EACD,QAAQ,EAAE,UAAC,UAAU;oCACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;oCACf,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gCACpC,CAAC,EACD,cAAc,EAAE,UAAC,SAAS;oCACxB,OAAO,CAAC,IAAI,CAAC,CAAC;oCACd,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,IACD,EAAA;;4BAbF,WAAW,GAAG,SAaZ,CAAC;;;;;SACJ;QAED,SAAS,EAAE,CAAC;QAEZ,OAAO;YACL,IAAI,WAAW,EAAE;gBACf,WAAW,EAAE,CAAC;aACf;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,IAAI,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AACtD,CAAC"}

package/dist/types/Image/index.d.ts

@@ -31,6 +31,8 @@ export declare type ImagePropTypes = {
     className?: string;
     /** Additional CSS class for the image inside the `<picture />` tag */
     pictureClassName?: string;
+    /** Additional CSS class for the placeholder image */
+    placeholderClassName?: string;
     /** Duration (in ms) of the fade-in transition effect upoad image loading */
     fadeInDuration?: number;
     /** @deprecated Use the intersectionThreshold prop */
@@ -45,6 +47,8 @@ export declare type ImagePropTypes = {
     style?: React.CSSProperties;
     /** Additional CSS rules to add to the image inside the `<picture />` tag */
     pictureStyle?: React.CSSProperties;
+    /** Additional CSS rules to add to the placeholder image */
+    placeholderStyle?: React.CSSProperties;
     /**
      * The layout behavior of the image as the viewport changes size
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datocms",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "types": "dist/types/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -35,11 +35,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "rome": "^10.0.1",
     "ts-jest": "^26.5.5",
     "typescript": "^4.5.5"
   },
   "scripts": {
     "build": "rimraf dist && tsc && tsc --project ./tsconfig.esnext.json",
+    "format": "rome format --write src",
     "watch": "rimraf dist && tsc --watch",
     "prepare": "npm run test && npm run build",
     "test": "jest --coverage",

package/src/Image/index.tsx

@@ -1,4 +1,11 @@
-import React, { useState, forwardRef, useCallback, CSSProperties } from 'react';
+import React, {
+  useState,
+  forwardRef,
+  useCallback,
+  CSSProperties,
+  useRef,
+  useEffect,
+} from 'react';
 import { useInView } from 'react-intersection-observer';
 import { encode } from 'universal-base64';
 
@@ -42,6 +49,8 @@ export type ImagePropTypes = {
   className?: string;
   /** Additional CSS class for the image inside the `<picture />` tag */
   pictureClassName?: string;
+  /** Additional CSS class for the placeholder image */
+  placeholderClassName?: string;
   /** Duration (in ms) of the fade-in transition effect upoad image loading */
   fadeInDuration?: number;
   /** @deprecated Use the intersectionThreshold prop */
@@ -56,6 +65,8 @@ export type ImagePropTypes = {
   style?: React.CSSProperties;
   /** Additional CSS rules to add to the image inside the `<picture />` tag */
   pictureStyle?: React.CSSProperties;
+  /** Additional CSS rules to add to the placeholder image */
+  placeholderStyle?: React.CSSProperties;
   /**
    * The layout behavior of the image as the viewport changes size
    *
@@ -140,7 +151,7 @@ const buildSrcSet = (
   width: number | undefined,
   candidateMultipliers: number[],
 ) => {
-  if (!src || !width) {
+  if (!(src && width)) {
     return undefined;
   }
 
@@ -199,6 +210,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
       priority = false,
       sizes,
       srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
+      placeholderClassName,
+      placeholderStyle,
     },
     ref,
   ) => {
@@ -206,11 +219,24 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
 
     const [loaded, setLoaded] = useState(false);
 
+    const imageRef = useRef<HTMLImageElement>(null);
+
     const handleLoad = () => {
       onLoad?.();
       setLoaded(true);
     };
 
+    // https://stackoverflow.com/q/39777833/266535
+    useEffect(() => {
+      if (!imageRef.current) {
+        return;
+      }
+
+      if (imageRef.current.complete && imageRef.current.naturalWidth) {
+        handleLoad();
+      }
+    }, []);
+
     const [viewRef, inView] = useInView({
       threshold: intersectionThreshold || intersectionTreshold || 0,
       rootMargin: intersectionMargin || '0px 0px 0px 0px',
@@ -221,7 +247,9 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
     const callbackRef = useCallback(
       (_ref: HTMLDivElement) => {
         viewRef(_ref);
-        if (ref) (ref as React.MutableRefObject<HTMLDivElement>).current = _ref;
+        if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement>).current = _ref;
+        }
       },
       [viewRef],
     );
@@ -272,6 +300,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
           aria-hidden="true"
           alt=""
           src={data.base64 ?? undefined}
+          className={placeholderClassName}
           style={{
             backgroundColor: data.bgColor ?? undefined,
             objectFit,
@@ -287,6 +316,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
             top: '-5%',
             width: '110%',
             height: '110%',
+            ...placeholderStyle,
           }}
         />
       ) : null;
@@ -334,6 +364,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
             {regularSource}
             {data.src && (
               <img
+                ref={imageRef}
                 src={data.src}
                 alt={data.alt ?? ''}
                 title={data.title ?? undefined}
@@ -362,7 +393,12 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
                 alt={data.alt ?? ''}
                 title={data.title ?? undefined}
                 className={pictureClassName}
-                style={{ ...absolutePositioning, ...pictureStyle }}
+                style={{
+                  ...absolutePositioning,
+                  objectFit,
+                  objectPosition,
+                  ...pictureStyle,
+                }}
                 loading={lazyLoad ? 'lazy' : undefined}
                 fetchpriority={priority ? 'high' : undefined}
               />