Merge pull request #463 from browniebroke/better-unified-image-shape

fix(api): Fix usage with non-native gatsby image source
browniebroke · Jun 1, 2020 · a1e1d32 · a1e1d32
2 parents 1e3e928 + b21e8c3
commit a1e1d32
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@
   </a>
 </p>
 
-Very basic gallery grid based on gatsby-image, styling powered by `styled-components`.
+Very basic gallery grid based on `gatsby-image` and `react-image-lightbox`, styling powered by `styled-components`.
 
 ## Install
 
@@ -25,19 +25,41 @@ npm install --save @browniebroke/gatsby-image-gallery
 
 ## Usage
 
-This component is built on top `react-image-lightbox`, the CSS should be imported from there.
+This component is built on top `react-image-lightbox`, the CSS that ships with `react-image-lightbox` is included in this library for convenience, but you may import it from there.
 
 ```jsx
-import React, { Component } from 'react'
+import { graphql } from 'gatsby'
+import React from 'react'
 
 import Gallery from '@browniebroke/gatsby-image-gallery'
 import '@browniebroke/gatsby-image-gallery/dist/style.css'
 
-class Example extends Component {
-  render() {
-    return <Gallery images={images}/>
-  }
+const MyPage = ({ data }) => {
+  const images = data.allFile.edges.map(({ node }) => node.childImageSharp)
+  // `images` is an array of objects with `thumb` and `full`
+  return <Gallery images={images} />
 }
+
+export const query = graphql`
+  query ImagesForGallery {
+    allFile {
+      edges {
+        node {
+          childImageSharp {
+            thumb: fluid(maxWidth: 270, maxHeight: 270) {
+              ...GatsbyImageSharpFluid
+            }
+            full: fluid(maxWidth: 1024) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export default MyPage
 ```
 
 For a full working example, there is one in [the example folder](https://github.com/browniebroke/gatsby-image-gallery/tree/master/example) which is [deployed to Netlify](https://gatsby-image-gallery.netlify.app/).

diff --git a/example/src/pages/index.js b/example/src/pages/index.js
@@ -6,7 +6,7 @@ import SEO from '../components/seo'
 import Gallery from '../../../gatsby-image-gallery/src'
 
 const IndexPage = ({ data }) => {
-  const images = data.images.edges
+  const images = data.images.edges.map(({ node }) => node.childImageSharp)
   return (
     <Layout>
       <SEO title="Example" />
@@ -29,7 +29,7 @@ export const query = graphql`
             thumb: fluid(maxWidth: 270, maxHeight: 270) {
               ...GatsbyImageSharpFluid
             }
-            fluid(maxWidth: 1024) {
+            full: fluid(maxWidth: 1024) {
               ...GatsbyImageSharpFluid
             }
           }

diff --git a/gatsby-image-gallery/src/index.js b/gatsby-image-gallery/src/index.js
@@ -2,11 +2,13 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import Img from 'gatsby-image'
 import Lightbox from 'react-image-lightbox'
-import 'react-image-lightbox/style.css'
+
 import Row from './row'
 import Col from './column'
 import ImgWrapper from './img-wrapper'
 
+import 'react-image-lightbox/style.css'
+
 const Gallery = ({
   images = null,
   thumbs = null,
@@ -16,33 +18,36 @@ const Gallery = ({
   gutter = '0.25rem',
   imgClass = '',
 }) => {
-  let thumbsArray, imagesArray
+  let thumbsArray, fullArray
   if (thumbs === null && fullImages === null) {
     // New style with all images in one prop
-    thumbsArray = images.map(({ node }) => node.childImageSharp.thumb)
-    imagesArray = images.map(({ node }) => node.childImageSharp.fluid.src)
+    thumbsArray = images.map(({ thumb }) => thumb)
+    fullArray = images.map(({ full }) => full.src)
   } else {
     // Compat with old props
     thumbsArray = thumbs
     if (fullImages === null && images !== null) {
       console.warn(
         `Using the images props with thumbs is deprecated and will not 
-        be supported in the next major version. If you need to pass 2 arrays 
-        separately, use the new prop "fullImages" instead which works exactly 
-        the same way as "images" used to. It's recommended to pass all data in 
-        the "images" prop instead.`
+        be supported in the next major version. 
+        
+        If you need to pass 2 arrays separately, use the new prop "fullImages" 
+        instead, which works exactly the same way as "images" used to. 
+        
+        It's recommended to pass all images as a single array in the "images"
+        prop instead.`
       )
-      imagesArray = images
+      fullArray = images
     } else {
-      imagesArray = fullImages
+      fullArray = fullImages
     }
   }
 
   const [index, setIndex] = useState(0)
   const [isOpen, setIsOpen] = useState(false)
 
-  const prevIndex = index - (1 % imagesArray.length)
-  const nextIndex = (index + imagesArray.length + 1) % imagesArray.length
+  const prevIndex = index - (1 % fullArray.length)
+  const nextIndex = (index + fullArray.length + 1) % fullArray.length
 
   return (
     <React.Fragment>
@@ -67,9 +72,9 @@ const Gallery = ({
       </Row>
       {isOpen && (
         <Lightbox
-          mainSrc={imagesArray[index]}
-          nextSrc={imagesArray[nextIndex]}
-          prevSrc={imagesArray[prevIndex]}
+          mainSrc={fullArray[index]}
+          nextSrc={fullArray[nextIndex]}
+          prevSrc={fullArray[prevIndex]}
           onCloseRequest={() => setIsOpen(false)}
           onMovePrevRequest={() => setIndex(prevIndex)}
           onMoveNextRequest={() => setIndex(nextIndex)}
@@ -88,7 +93,12 @@ const Gallery = ({
 export default Gallery
 
 Gallery.propTypes = {
-  images: PropTypes.array,
+  images: PropTypes.arrayOf(
+    PropTypes.shape({
+      full: PropTypes.object,
+      thumb: PropTypes.object,
+    })
+  ),
   thumbs: PropTypes.array,
   fullImages: PropTypes.array,
   colWidth: PropTypes.number,

diff --git a/gatsby-image-gallery/src/index.test.js b/gatsby-image-gallery/src/index.test.js
@@ -11,13 +11,9 @@ const fluidShapeMock = (path) => ({
   base64: `string_of_base64`,
 })
 
-const unifiedImageNodeShapeMock = (path) => ({
-  node: {
-    childImageSharp: {
-      thumb: fluidShapeMock(`/thumb${path}`),
-      fluid: fluidShapeMock(path),
-    },
-  },
+const unifiedImageShapeMock = (path) => ({
+  thumb: fluidShapeMock(`/thumb${path}`),
+  full: fluidShapeMock(path),
 })
 
 describe('Gallery component', () => {
@@ -114,11 +110,11 @@ describe('Gallery component', () => {
     renderer.render(
       <Gallery
         images={[
-          unifiedImageNodeShapeMock('/images/image001.jpg'),
-          unifiedImageNodeShapeMock('/images/image002.jpg'),
-          unifiedImageNodeShapeMock('/images/image003.jpg'),
-          unifiedImageNodeShapeMock('/images/image004.jpg'),
-          unifiedImageNodeShapeMock('/images/image005.jpg'),
+          unifiedImageShapeMock('/images/image001.jpg'),
+          unifiedImageShapeMock('/images/image002.jpg'),
+          unifiedImageShapeMock('/images/image003.jpg'),
+          unifiedImageShapeMock('/images/image004.jpg'),
+          unifiedImageShapeMock('/images/image005.jpg'),
         ]}
       />
     )