diff --git a/gatsby-image-gallery/src/__snapshots__/index.test.js.snap b/gatsby-image-gallery/src/__snapshots__/index.test.js.snap index 765d83f5..b1d704b3 100644 --- a/gatsby-image-gallery/src/__snapshots__/index.test.js.snap +++ b/gatsby-image-gallery/src/__snapshots__/index.test.js.snap @@ -532,484 +532,7 @@ exports[`Gallery component lightboxOptions props that the Lightbox options are a `; -exports[`Gallery component that it renders with a custom column class 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Gallery component that it renders with data in fullImages & thumbs 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Gallery component that it renders with data in images & thumbs 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - exports[`Gallery component that it renders with data in images 1`] = ` - - - -`; - -exports[`Gallery component that it renders with data in thumbs 1`] = ` - - - - - @@ -1086,18 +567,6 @@ exports[`Gallery component that it renders with data in thumbs 1`] = ` className="" durationFadeIn={500} fadeIn={true} - fluid={ - Object { - "fluid": Object { - "aspectRatio": 1.5, - "base64": "string_of_base64", - "sizes": "(max-width: 600px) 100vw, 600px", - "src": "/thumb/image003.jpg", - "srcSet": "some srcSet", - "srcSetWebp": "some srcSetWebp", - }, - } - } loading="lazy" /> @@ -1116,18 +585,6 @@ exports[`Gallery component that it renders with data in thumbs 1`] = ` className="" durationFadeIn={500} fadeIn={true} - fluid={ - Object { - "fluid": Object { - "aspectRatio": 1.5, - "base64": "string_of_base64", - "sizes": "(max-width: 600px) 100vw, 600px", - "src": "/thumb/image004.jpg", - "srcSet": "some srcSet", - "srcSetWebp": "some srcSetWebp", - }, - } - } loading="lazy" /> @@ -1146,18 +603,6 @@ exports[`Gallery component that it renders with data in thumbs 1`] = ` className="" durationFadeIn={500} fadeIn={true} - fluid={ - Object { - "fluid": Object { - "aspectRatio": 1.5, - "base64": "string_of_base64", - "sizes": "(max-width: 600px) 100vw, 600px", - "src": "/thumb/image005.jpg", - "srcSet": "some srcSet", - "srcSetWebp": "some srcSetWebp", - }, - } - } loading="lazy" /> diff --git a/gatsby-image-gallery/src/index.js b/gatsby-image-gallery/src/index.js index b1c047ce..18e971e0 100644 --- a/gatsby-image-gallery/src/index.js +++ b/gatsby-image-gallery/src/index.js @@ -11,8 +11,6 @@ import 'react-image-lightbox/style.css' const Gallery = ({ images = null, - thumbs = null, - fullImages = null, colWidth = 100 / 3, mdColWidth = 100 / 4, gutter = '0.25rem', @@ -20,30 +18,15 @@ const Gallery = ({ lightboxOptions = {}, }) => { let thumbsArray, fullArray, thumbAltArray - if (thumbs === null && fullImages === null) { - // New style with all images in one prop - thumbsArray = images.map(({ thumb }) => thumb) - fullArray = images.map(({ full }) => full.src) - thumbAltArray = images.map(({ thumbAlt }) => thumbAlt) - } 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 images as a single array in the "images" - prop instead.` - ) - fullArray = images - } else { - fullArray = fullImages - } - } + + // New style with all images in one prop + thumbsArray = images + .filter((thumb) => thumb !== undefined) + .map(({ thumb }) => thumb) + thumbAltArray = images.map(({ thumbAlt }) => thumbAlt) + fullArray = images + .filter((image) => image.full !== undefined) + .map(({ full }) => full.src) const [index, setIndex] = useState(0) const [isOpen, setIsOpen] = useState(false) @@ -111,8 +94,6 @@ Gallery.propTypes = { caption: PropTypes.node, }) ), - thumbs: PropTypes.array, - fullImages: PropTypes.array, colWidth: PropTypes.number, mdColWidth: PropTypes.number, gutter: PropTypes.string, diff --git a/gatsby-image-gallery/src/index.test.js b/gatsby-image-gallery/src/index.test.js index 9fd8c497..cb340dfe 100644 --- a/gatsby-image-gallery/src/index.test.js +++ b/gatsby-image-gallery/src/index.test.js @@ -20,7 +20,7 @@ const unifiedImageShapeMock = (path, alt) => ({ describe('Gallery component', () => { test('that it renders with empty props', () => { const renderer = new ShallowRenderer() - renderer.render() + renderer.render() const result = renderer.getRenderOutput() expect(result).toMatchSnapshot() }) @@ -35,95 +35,6 @@ describe('Gallery component', () => { '/images/image003.jpg', '/images/image004.jpg', ]} - thumbs={[]} - /> - ) - const result = renderer.getRenderOutput() - expect(result).toMatchSnapshot() - }) - - test('that it renders with data in thumbs', () => { - const renderer = new ShallowRenderer() - renderer.render( - - ) - const result = renderer.getRenderOutput() - expect(result).toMatchSnapshot() - }) - - test('that it renders with data in images & thumbs', () => { - const renderer = new ShallowRenderer() - renderer.render( - - ) - const result = renderer.getRenderOutput() - expect(result).toMatchSnapshot() - }) - - test('that it renders with data in fullImages & thumbs', () => { - const renderer = new ShallowRenderer() - renderer.render( - - ) - const result = renderer.getRenderOutput() - expect(result).toMatchSnapshot() - }) - - test('that it renders with a custom column class', () => { - const renderer = new ShallowRenderer() - renderer.render( - ) const result = renderer.getRenderOutput()