From 9029577951432081cd31d1b4829417b6b5b0c8a6 Mon Sep 17 00:00:00 2001 From: FRIN Yvonnick Date: Tue, 23 Apr 2019 14:15:28 +0200 Subject: [PATCH 1/5] :sparkles: Make fadeIn prop in Img component accept number --- packages/gatsby-image/README.md | 2 +- packages/gatsby-image/src/index.js | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index 7c92202251ed1..c9bc76b3672c4 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -337,7 +337,7 @@ You will need to add it in your graphql query as is shown in the following snipp | ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | | `fixed` | `object` | Data returned from the `fixed` query | | `fluid` | `object` | Data returned from the `fluid` query | -| `fadeIn` | `bool` | Defaults to fading in the image on load | +| `fadeIn` | `number` | Defaults to fading in the image on load in 500ms | | `title` | `string` | Passed to the `img` element | | `alt` | `string` | Passed to the `img` element | | `crossOrigin` | `string` | Passed to the `img` element | diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 6d82b4d0e1900..bab9dbfe69e75 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -260,9 +260,13 @@ class Image extends React.Component { itemProp, } = convertProps(this.props) - const shouldReveal = this.state.imgLoaded || this.state.fadeIn === false - const shouldFadeIn = this.state.fadeIn === true && !this.state.imgCached - const durationFadeIn = `0.5s` + const shouldReveal = + this.state.imgLoaded || Boolean(this.state.fadeIn) === false + const shouldFadeIn = + Boolean(this.state.fadeIn) === true && !this.state.imgCached + const durationFadeIn = Number.isInteger(this.state.fadeIn) + ? `${this.state.fadeIn}ms` + : `0.5s` const imageStyle = { opacity: shouldReveal ? 1 : 0, From 83f4cc2dcf2c300d447c772f9185d63f47bf38ef Mon Sep 17 00:00:00 2001 From: FRIN Yvonnick Date: Tue, 23 Apr 2019 15:26:48 +0200 Subject: [PATCH 2/5] Revert ":sparkles: Make fadeIn prop in Img component accept number" This reverts commit 9029577951432081cd31d1b4829417b6b5b0c8a6. --- packages/gatsby-image/README.md | 2 +- packages/gatsby-image/src/index.js | 10 +++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index c9bc76b3672c4..7c92202251ed1 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -337,7 +337,7 @@ You will need to add it in your graphql query as is shown in the following snipp | ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | | `fixed` | `object` | Data returned from the `fixed` query | | `fluid` | `object` | Data returned from the `fluid` query | -| `fadeIn` | `number` | Defaults to fading in the image on load in 500ms | +| `fadeIn` | `bool` | Defaults to fading in the image on load | | `title` | `string` | Passed to the `img` element | | `alt` | `string` | Passed to the `img` element | | `crossOrigin` | `string` | Passed to the `img` element | diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index bab9dbfe69e75..6d82b4d0e1900 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -260,13 +260,9 @@ class Image extends React.Component { itemProp, } = convertProps(this.props) - const shouldReveal = - this.state.imgLoaded || Boolean(this.state.fadeIn) === false - const shouldFadeIn = - Boolean(this.state.fadeIn) === true && !this.state.imgCached - const durationFadeIn = Number.isInteger(this.state.fadeIn) - ? `${this.state.fadeIn}ms` - : `0.5s` + const shouldReveal = this.state.imgLoaded || this.state.fadeIn === false + const shouldFadeIn = this.state.fadeIn === true && !this.state.imgCached + const durationFadeIn = `0.5s` const imageStyle = { opacity: shouldReveal ? 1 : 0, From 3b7cc5a75bc6c6efff08ba97b1c4e27d87b6ed27 Mon Sep 17 00:00:00 2001 From: FRIN Yvonnick Date: Tue, 23 Apr 2019 15:38:09 +0200 Subject: [PATCH 3/5] :ok_hand: Take care of @sidharthachatterjee review --- packages/gatsby-image/README.md | 1 + packages/gatsby-image/src/index.js | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index 7c92202251ed1..5078188cb448b 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -338,6 +338,7 @@ You will need to add it in your graphql query as is shown in the following snipp | `fixed` | `object` | Data returned from the `fixed` query | | `fluid` | `object` | Data returned from the `fluid` query | | `fadeIn` | `bool` | Defaults to fading in the image on load | +| `durationFadeIn` | `number` | fading duration is set up to 500ms by default | | `title` | `string` | Passed to the `img` element | | `alt` | `string` | Passed to the `img` element | | `crossOrigin` | `string` | Passed to the `img` element | diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 6d82b4d0e1900..7e2e33a8c86b8 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -256,17 +256,17 @@ class Image extends React.Component { fluid, fixed, backgroundColor, + durationFadeIn, Tag, itemProp, } = convertProps(this.props) const shouldReveal = this.state.imgLoaded || this.state.fadeIn === false const shouldFadeIn = this.state.fadeIn === true && !this.state.imgCached - const durationFadeIn = `0.5s` const imageStyle = { opacity: shouldReveal ? 1 : 0, - transition: shouldFadeIn ? `opacity ${durationFadeIn}` : `none`, + transition: shouldFadeIn ? `opacity ${durationFadeIn}ms` : `none`, ...imgStyle, } @@ -477,6 +477,7 @@ class Image extends React.Component { Image.defaultProps = { critical: false, fadeIn: true, + durationFadeIn: 500, alt: ``, Tag: `div`, } @@ -509,6 +510,7 @@ Image.propTypes = { fixed: fixedObject, fluid: fluidObject, fadeIn: PropTypes.bool, + durationFadeIn: PropTypes.number, title: PropTypes.string, alt: PropTypes.string, className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), // Support Glamor's css prop. From cf6e750c4e7d0d2adc93fd562e9f63c3a199199e Mon Sep 17 00:00:00 2001 From: FRIN Yvonnick Date: Tue, 23 Apr 2019 16:32:59 +0200 Subject: [PATCH 4/5] :white_check_mark: Update snapshots and tests --- .../src/__tests__/__snapshots__/index.js.snap | 12 ++++++------ packages/gatsby-image/src/__tests__/index.js | 2 +- packages/gatsby-image/src/index.js | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap index 5853ce8f46f16..5dd975a870315 100644 --- a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap @@ -7,14 +7,14 @@ exports[` should render fixed size images 1`] = ` style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;" >
@@ -29,7 +29,7 @@ exports[` should render fixed size images 1`] = ` itemprop="item-prop-for-the-image" src="test_image.jpg" srcset="some srcSet" - style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.5s;" + style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;" title="Title for the image" width="100" /> @@ -51,14 +51,14 @@ exports[` should render fluid images 1`] = ` style="width: 100%; padding-bottom: 66.66666666666667%;" />
@@ -74,7 +74,7 @@ exports[` should render fluid images 1`] = ` sizes="(max-width: 600px) 100vw, 600px" src="test_image.jpg" srcset="some srcSet" - style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.5s;" + style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 500ms;" title="Title for the image" /> diff --git a/packages/gatsby-image/src/__tests__/index.js b/packages/gatsby-image/src/__tests__/index.js index 546a602d9d08c..5ba04b4caa7a3 100644 --- a/packages/gatsby-image/src/__tests__/index.js +++ b/packages/gatsby-image/src/__tests__/index.js @@ -73,7 +73,7 @@ describe(``, () => { ) // No Intersection Observer in JSDOM, so placeholder img will be visible (opacity 1) by default expect(placeholderImageTag.getAttribute(`style`)).toEqual( - `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;` + `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 500ms; color: red;` ) expect(placeholderImageTag.getAttribute(`class`)).toEqual(`placeholder`) }) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 7e2e33a8c86b8..84ae8f40aee85 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -274,7 +274,7 @@ class Image extends React.Component { typeof backgroundColor === `boolean` ? `lightgray` : backgroundColor const delayHideStyle = { - transitionDelay: durationFadeIn, + transitionDelay: `${durationFadeIn}ms`, } const imagePlaceholderStyle = { From 1155bf9a2f1ee2e337046d0e9e119d4aa2d844c2 Mon Sep 17 00:00:00 2001 From: FRIN Yvonnick Date: Tue, 23 Apr 2019 18:57:32 +0200 Subject: [PATCH 5/5] :white_check_mark: Add snapshot testing about durationFadeIn property --- .../src/__tests__/__snapshots__/index.js.snap | 41 +++++++++++++++++++ packages/gatsby-image/src/__tests__/index.js | 15 ++++++- 2 files changed, 54 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap index 5dd975a870315..892ff4ffca341 100644 --- a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap @@ -1,5 +1,46 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` should have a transition-delay of 1sec 1`] = ` +
+
+
+ + + + Alt text for the image + + +
+
+`; + exports[` should render fixed size images 1`] = `
{}, onError = () => {}) => { +const setup = ( + fluid = false, + props = {}, + onLoad = () => {}, + onError = () => {} +) => { const { container } = render( {}, onError = () => {}) => { itemProp={`item-prop-for-the-image`} placeholderStyle={{ color: `red` }} placeholderClassName={`placeholder`} + {...props} /> ) @@ -78,10 +84,15 @@ describe(``, () => { expect(placeholderImageTag.getAttribute(`class`)).toEqual(`placeholder`) }) + it(`should have a transition-delay of 1sec`, () => { + const component = setup(false, { durationFadeIn: `1000` }) + expect(component).toMatchSnapshot() + }) + it(`should call onLoad and onError image events`, () => { const onLoadMock = jest.fn() const onErrorMock = jest.fn() - const imageTag = setup(true, onLoadMock, onErrorMock).querySelector( + const imageTag = setup(true, {}, onLoadMock, onErrorMock).querySelector( `picture img` ) fireEvent.load(imageTag)