feat(gatsby-plugin-image): Add extra props to GatsbyImage (#28520)

gatsbyjs · Dec 10, 2020 · 2ab320a · 2ab320a
1 parent 50df3a4
commit 2ab320a
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 22 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -7,6 +7,7 @@ import React, {
   ImgHTMLAttributes,
   useState,
   RefObject,
+  CSSProperties,
 } from "react"
 import {
   getWrapperProps,
@@ -26,7 +27,12 @@ export interface GatsbyImageProps
   alt: string
   as?: ElementType
   className?: string
+  imgClassName?: string
   image: IGatsbyImageData
+  imgStyle?: CSSProperties
+  backgroundColor?: string
+  objectFit?: CSSProperties["objectFit"]
+  objectPosition?: CSSProperties["objectPosition"]
   onLoad?: () => void
   onError?: () => void
   onStartLoad?: Function
@@ -53,6 +59,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
   onStartLoad,
   image,
   onLoad: customOnLoad,
+  backgroundColor,
   ...props
 }) {
   if (!image) {
@@ -61,7 +68,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     }
     return null
   }
-  const { width, height, layout, images, backgroundColor } = image
+  const { width, height, layout, images } = image
 
   const root = useRef<HTMLElement>()
   const hydrated = useRef(false)
@@ -188,6 +195,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
       style={{
         ...wStyle,
         ...style,
+        backgroundColor,
       }}
       className={`${wClass}${className ? ` ${className}` : ``}`}
       ref={root}

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -21,6 +21,11 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
   style,
   image,
   loading = `lazy`,
+  imgClassName,
+  imgStyle,
+  backgroundColor,
+  objectFit,
+  objectPosition,
   ...props
 }) {
   if (!image) {
@@ -35,7 +40,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     images,
     placeholder,
     sizes,
-    backgroundColor,
+    backgroundColor: placeholderBackgroundColor,
   } = image
 
   const { style: wStyle, className: wClass, ...wrapperProps } = getWrapperProps(
@@ -73,6 +78,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
       style={{
         ...wStyle,
         ...style,
+        backgroundColor,
       }}
       className={`${wClass}${className ? ` ${className}` : ``}`}
     >
@@ -84,7 +90,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
             layout,
             width,
             height,
-            backgroundColor
+            placeholderBackgroundColor
           )}
         />
 

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -87,7 +87,8 @@ export function getMainProps(
   loading?: "eager" | "lazy",
   toggleLoaded?: any,
   cacheKey?: string,
-  ref?: any
+  ref?: any,
+  style: CSSProperties = {}
 ): MainImageProps {
   const onLoad: ReactEventHandler<HTMLImageElement> = function (e) {
     if (isLoaded) {
@@ -115,31 +116,34 @@ export function getMainProps(
     }
   }
 
+  // fallback when it's not configured in gatsby-config.
+  if (!global.GATSBY___IMAGE) {
+    style = {
+      height: `100%`,
+      left: 0,
+      position: `absolute`,
+      top: 0,
+      transform: `translateZ(0)`,
+      transition: `opacity 250ms linear`,
+      width: `100%`,
+      willChange: `opacity`,
+      ...style,
+    }
+  }
+
   const result = {
     ...images,
     loading,
     shouldLoad: isLoading,
     "data-main-image": ``,
     style: {
+      ...style,
       opacity: isLoaded ? 1 : 0,
     },
     onLoad,
     ref,
   }
 
-  // fallback when it's not configured in gatsby-config.
-  if (!global.GATSBY___IMAGE) {
-    result.style.height = `100%`
-    result.style.left = 0
-    result.style.position = `absolute`
-    result.style.top = 0
-    result.style.transform = `translateZ(0)`
-    result.style.transition = `opacity 250ms linear`
-    result.style.width = `100%`
-    result.style.willChange = `opacity`
-    result.style.objectFit = `cover`
-  }
-
   return result
 }
 

diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx
@@ -27,12 +27,24 @@ export function lazyHydrate(
     isLoaded,
     toggleIsLoaded,
     ref,
+    imgClassName,
+    imgStyle = {},
+    objectPosition,
+    backgroundColor,
+    objectFit = `cover`,
     ...props
   }: LazyHydrateProps,
   root: MutableRefObject<HTMLElement | undefined>,
   hydrated: MutableRefObject<boolean>
 ): (() => void) | null {
-  const { width, height, layout, images, placeholder, backgroundColor } = image
+  const {
+    width,
+    height,
+    layout,
+    images,
+    placeholder,
+    backgroundColor: wrapperBackgroundColor,
+  } = image
 
   if (!root.current) {
     return null
@@ -47,6 +59,13 @@ export function lazyHydrate(
   const cacheKey = JSON.stringify(images)
   const hasLoaded = !hydrated.current && hasImageLoaded(cacheKey)
 
+  imgStyle = {
+    objectFit,
+    objectPosition,
+    backgroundColor,
+    ...imgStyle,
+  }
+
   const component = (
     <LayoutWrapper layout={layout} width={width} height={height}>
       {!hasLoaded && (
@@ -57,20 +76,22 @@ export function lazyHydrate(
             layout,
             width,
             height,
-            backgroundColor
+            wrapperBackgroundColor
           )}
         />
       )}
       <MainImage
         {...(props as Omit<MainImageProps, "images" | "fallback">)}
+        className={imgClassName}
         {...getMainProps(
           isLoading,
           hasLoaded || isLoaded,
           images,
           loading,
           toggleIsLoaded,
           cacheKey,
-          ref
+          ref,
+          imgStyle
         )}
       />
     </LayoutWrapper>

diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
@@ -16,13 +16,13 @@ export interface IStaticImageProps extends Omit<GatsbyImageProps, "image"> {
   maxHeight?: number
   sizes?: string
   quality?: number
-  transformOptions: {
+  transformOptions?: {
     fit?: Fit
   }
   jpgOptions?: Record<string, unknown>
   pngOptions?: Record<string, unknown>
   webpOptions?: Record<string, unknown>
-  blurredOptions: Record<string, unknown>
+  blurredOptions?: Record<string, unknown>
 }
 
 // These values are added by Babel. Do not add them manually
@@ -38,6 +38,7 @@ export function _getStaticImage(
     src,
     __imageData: imageData,
     __error,
+    // We extract these because they're not meant to be passed-down to GatsbyImage
     /* eslint-disable @typescript-eslint/no-unused-vars */
     width,
     maxWidth,