From 7a1eda95071df7c53a4381e901f00dcbfd81eeed Mon Sep 17 00:00:00 2001 From: Slava Date: Tue, 6 Oct 2020 20:20:24 +0300 Subject: [PATCH 1/2] Remove deprecated props (#542) --- .../src/__snapshots__/index.test.js.snap | 476 ------------------ gatsby-image-gallery/src/index.js | 37 +- gatsby-image-gallery/src/index.test.js | 74 +-- 3 files changed, 10 insertions(+), 577 deletions(-) diff --git a/gatsby-image-gallery/src/__snapshots__/index.test.js.snap b/gatsby-image-gallery/src/__snapshots__/index.test.js.snap index 765d83f5..47d7bafc 100644 --- a/gatsby-image-gallery/src/__snapshots__/index.test.js.snap +++ b/gatsby-image-gallery/src/__snapshots__/index.test.js.snap @@ -549,48 +549,6 @@ exports[`Gallery component that it renders with a custom column class 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/image001.jpg", - "srcSet": "some srcSet", - "srcSetWebp": "some srcSetWebp", - }, - } - } - loading="lazy" - /> - - - - - @@ -609,18 +567,6 @@ exports[`Gallery component that it renders with a custom column class 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" /> @@ -639,18 +585,6 @@ exports[`Gallery component that it renders with a custom column class 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" /> @@ -669,332 +603,6 @@ exports[`Gallery component that it renders with a custom column class 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" - /> - - - - -`; - -exports[`Gallery component that it renders with data in fullImages & thumbs 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Gallery component that it renders with data in images & thumbs 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1004,12 +612,6 @@ 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`] = ` @@ -1056,18 +646,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/image002.jpg", - "srcSet": "some srcSet", - "srcSetWebp": "some srcSetWebp", - }, - } - } loading="lazy" /> @@ -1086,18 +664,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,48 +682,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" - /> - - - - - 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..edca30d7 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,71 +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() @@ -117,13 +52,6 @@ describe('Gallery component', () => { '/images/image003.jpg', '/images/image004.jpg', ]} - thumbs={[ - { fluid: fluidShapeMock('/thumb/image001.jpg') }, - { fluid: fluidShapeMock('/thumb/image002.jpg') }, - { fluid: fluidShapeMock('/thumb/image003.jpg') }, - { fluid: fluidShapeMock('/thumb/image004.jpg') }, - { fluid: fluidShapeMock('/thumb/image005.jpg') }, - ]} /> ) const result = renderer.getRenderOutput() From 594e79b2644e0043770c89edc45c1724965d1e49 Mon Sep 17 00:00:00 2001 From: Slava Date: Tue, 6 Oct 2020 20:35:02 +0300 Subject: [PATCH 2/2] Removed deprecated test --- .../src/__snapshots__/index.test.js.snap | 79 ------------------- gatsby-image-gallery/src/index.test.js | 17 ---- 2 files changed, 96 deletions(-) diff --git a/gatsby-image-gallery/src/__snapshots__/index.test.js.snap b/gatsby-image-gallery/src/__snapshots__/index.test.js.snap index 47d7bafc..b1d704b3 100644 --- a/gatsby-image-gallery/src/__snapshots__/index.test.js.snap +++ b/gatsby-image-gallery/src/__snapshots__/index.test.js.snap @@ -532,85 +532,6 @@ 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 images 1`] = ` diff --git a/gatsby-image-gallery/src/index.test.js b/gatsby-image-gallery/src/index.test.js index edca30d7..cb340dfe 100644 --- a/gatsby-image-gallery/src/index.test.js +++ b/gatsby-image-gallery/src/index.test.js @@ -41,23 +41,6 @@ describe('Gallery component', () => { expect(result).toMatchSnapshot() }) - test('that it renders with a custom column class', () => { - const renderer = new ShallowRenderer() - renderer.render( - - ) - const result = renderer.getRenderOutput() - expect(result).toMatchSnapshot() - }) - describe('Unified image prop', () => { test('that it renders image prop when no alt property is used', () => { const renderer = new ShallowRenderer()