From aaacb421d25d1a183d6f3e6da5f89d7e66a86964 Mon Sep 17 00:00:00 2001 From: Josh Date: Wed, 2 Oct 2019 18:19:24 -0400 Subject: [PATCH 1/6] :construction: WIP image hook --- source/components/StyledImage/README.md | 11 + .../__snapshots__/index.spec.js.snap | 4035 +++++++++++++++++ source/components/StyledImage/index.js | 103 + source/components/StyledImage/index.spec.js | 43 + 4 files changed, 4192 insertions(+) create mode 100644 source/components/StyledImage/README.md create mode 100644 source/components/StyledImage/__snapshots__/index.spec.js.snap create mode 100644 source/components/StyledImage/index.js create mode 100644 source/components/StyledImage/index.spec.js diff --git a/source/components/StyledImage/README.md b/source/components/StyledImage/README.md new file mode 100644 index 00000000..c103ad86 --- /dev/null +++ b/source/components/StyledImage/README.md @@ -0,0 +1,11 @@ +Click the theme buttons to re-initialize examples. + +```js + console.log("Countdown: ", value)} /> +``` + +This timer is always stopped: + +```js + console.log("Stopped countdown: ", value)} /> +``` diff --git a/source/components/StyledImage/__snapshots__/index.spec.js.snap b/source/components/StyledImage/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000..a961c973 --- /dev/null +++ b/source/components/StyledImage/__snapshots__/index.spec.js.snap @@ -0,0 +1,4035 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StyledCountdown calls callback 10 times with proper values Callback #0 1`] = ` + + + + +
+ + + + 9 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #1 1`] = ` + + + + +
+ + + + 8 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #2 1`] = ` + + + + +
+ + + + 7 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #3 1`] = ` + + + + +
+ + + + 6 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #4 1`] = ` + + + + +
+ + + + 5 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #5 1`] = ` + + + + +
+ + + + 4 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #6 1`] = ` + + + + +
+ + + + 3 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #7 1`] = ` + + + + +
+ + + + 2 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #8 1`] = ` + + + + +
+ + + + 1 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown calls callback 10 times with proper values Callback #9 1`] = ` + + + + +
+ + + + 0 + + + +
+ + + + +`; + +exports[`StyledCountdown renders correctly 1`] = ` + + + + +
+ + + + 10 + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`StyledCountdown renders correctly when stopped 1`] = ` + + + + +
+ + + + 10 + + + + + + + + + + + + + + +
+ + + + +`; diff --git a/source/components/StyledImage/index.js b/source/components/StyledImage/index.js new file mode 100644 index 00000000..6e1bb581 --- /dev/null +++ b/source/components/StyledImage/index.js @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +import { vignette } from '../../utils/vignette'; + +const LOADING_STATES = Object.freeze({ + PENDING: 'pending', + SUCCESS: 'success', + ERROR: 'error', + INITIAL: 'initial', +}); + +function usePreloadedImage(src, srcSet) { + const [loadStatus, setLoadStatus] = React.useState(LOADING_STATES.INITIAL); + const [requestId, setRequestId] = React.useState(null); + + const handleSuccess = () => { + setLoadStatus(LOADING_STATES.SUCCESS); + setRequestId(null); + }; + + const handleError = () => { + setLoadStatus(LOADING_STATES.ERROR); + setRequestId(null); + }; + + React.useEffect(() => { + if (requestId) { + cancelAnimationFrame(requestId); + } + + const newRequestId = requestAnimationFrame(() => { + const image = document.createElement('img'); + + image.onload = handleSuccess; + image.onerror = handleError; + image.src = src; + image.srcset = srcSet || src; + + if (image.complete) { + handleSuccess(); + } + + this.image = image; + }); + + setRequestId(newRequestId); + }, [src]); + + + return { + loadStatus, + }; +} + +const LAZY_IMAGE_SIZE = 5; +function createLowResolutionSrc(src) { + return vignette(src).withSmart(LAZY_IMAGE_SIZE, LAZY_IMAGE_SIZE).get(); +} + +// todo: get a placeholder image to swap out instead of empty string +const LIMBO_IMAGE = ''; + +const StyledImage = ({ src, srcSet, disableLazy, alt, className, ...rest }) => { + const [isLimbo, setIsLimbo] = useState(false); + const { loadStatus } = usePreloadedImage(src, srcSet); + + // limbo is intended to remove the image when the src changes but the image is not yet loaded. + React.useEffect(() => { + setIsLimbo(true); + }, [src]); + // this is odd but it allows us to quickly flush the src when an image src is swapped but react is able to use + // the same DOM element. The other option would be to use keys but then react can't be as efficient. + setIsLimbo(false); + + // Show low resolution image + if (loadStatus === LOADING_STATES.PENDING) { + const lowResolutionSrc = createLowResolutionSrc(src); + return {alt}; + } + + return ( + + {alt} + + ); +}; + +StyledImage.propTypes = { + alt: PropTypes.string.isRequired, + className: PropTypes.string, + disableLazy: PropTypes.bool, + src: PropTypes.string.isRequired, + srcSet: PropTypes.string, +}; + +StyledImage.defaultProps = { + className: undefined, + disableLazy: false, + srcSet: undefined, +}; + +export default StyledCountdown; diff --git a/source/components/StyledImage/index.spec.js b/source/components/StyledImage/index.spec.js new file mode 100644 index 00000000..cc79949c --- /dev/null +++ b/source/components/StyledImage/index.spec.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { act } from 'react-dom/test-utils'; +import sinon from 'sinon'; + +import StyledCountdown from './index'; + +jest.useFakeTimers(); + +test('StyledCountdown renders correctly', () => { + const callback = sinon.spy(); + const component = mountWithThemeProvider( + + ); + expect(component).toMatchSnapshot(); +}); + +test('StyledCountdown renders correctly when stopped', () => { + const callback = sinon.spy(); + const component = mountWithThemeProvider( + + ); + expect(component).toMatchSnapshot(); +}); + + +describe('StyledCountdown calls callback 10 times with proper values', () => { + const callback = sinon.spy(); + const component = mountWithThemeProvider(); + + for (let value = 9; value >= 0; value -= 1) { + const index = 9 - value; + test(`Callback #${index}`, () => { + act(() => { + jest.advanceTimersByTime(1000); + }); + component.update(); + + expect(callback.callCount).toEqual(index + 1); + expect(callback.getCall(index).args[0]).toEqual(value); + expect(component).toMatchSnapshot(); + }); + } +}); From 22764ab8584430dd4d4e4b2c011e0573adbe9d37 Mon Sep 17 00:00:00 2001 From: Josh Date: Wed, 2 Oct 2019 18:20:17 -0400 Subject: [PATCH 2/6] :ok_hand: CR --- source/components/StyledImage/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/source/components/StyledImage/index.js b/source/components/StyledImage/index.js index 6e1bb581..0cffe96e 100644 --- a/source/components/StyledImage/index.js +++ b/source/components/StyledImage/index.js @@ -80,9 +80,7 @@ const StyledImage = ({ src, srcSet, disableLazy, alt, className, ...rest }) => { } return ( - - {alt} - + {alt} ); }; From 7aa2bbdfb33744db5fca1b32a67920075da091b4 Mon Sep 17 00:00:00 2001 From: Josh Date: Wed, 2 Oct 2019 18:27:21 -0400 Subject: [PATCH 3/6] :ok_hand: CR --- source/components/StyledImage/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/components/StyledImage/index.js b/source/components/StyledImage/index.js index 0cffe96e..53548eea 100644 --- a/source/components/StyledImage/index.js +++ b/source/components/StyledImage/index.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { vignette } from '../../utils/vignette'; From 6b0bec56dee146ab47f1a661d8734b060a43f5ea Mon Sep 17 00:00:00 2001 From: Josh Date: Wed, 2 Oct 2019 18:28:41 -0400 Subject: [PATCH 4/6] :bug: Import bug --- source/components/StyledImage/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/components/StyledImage/index.js b/source/components/StyledImage/index.js index 53548eea..58d510a8 100644 --- a/source/components/StyledImage/index.js +++ b/source/components/StyledImage/index.js @@ -62,7 +62,7 @@ function createLowResolutionSrc(src) { const LIMBO_IMAGE = ''; const StyledImage = ({ src, srcSet, disableLazy, alt, className, ...rest }) => { - const [isLimbo, setIsLimbo] = useState(false); + const [isLimbo, setIsLimbo] = React.useState(false); const { loadStatus } = usePreloadedImage(src, srcSet); // limbo is intended to remove the image when the src changes but the image is not yet loaded. From c672e56af34d0e86ef35096cb03cea6fa12ae9e7 Mon Sep 17 00:00:00 2001 From: Josh Date: Wed, 2 Oct 2019 18:30:31 -0400 Subject: [PATCH 5/6] :bulb: add todo --- source/components/StyledImage/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/source/components/StyledImage/index.js b/source/components/StyledImage/index.js index 58d510a8..ee2d6738 100644 --- a/source/components/StyledImage/index.js +++ b/source/components/StyledImage/index.js @@ -71,6 +71,7 @@ const StyledImage = ({ src, srcSet, disableLazy, alt, className, ...rest }) => { }, [src]); // this is odd but it allows us to quickly flush the src when an image src is swapped but react is able to use // the same DOM element. The other option would be to use keys but then react can't be as efficient. + // todo maybe wrap in a timeout to make sure it doesn't get batched setIsLimbo(false); // Show low resolution image From bbce9a66a626fe43b695b82bd3582ccd5c763263 Mon Sep 17 00:00:00 2001 From: Josh Date: Wed, 2 Oct 2019 18:31:49 -0400 Subject: [PATCH 6/6] :bug: clarity --- source/components/StyledImage/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/components/StyledImage/index.js b/source/components/StyledImage/index.js index ee2d6738..c3a21609 100644 --- a/source/components/StyledImage/index.js +++ b/source/components/StyledImage/index.js @@ -25,7 +25,7 @@ function usePreloadedImage(src, srcSet) { }; React.useEffect(() => { - if (requestId) { + if (requestId !== null) { cancelAnimationFrame(requestId); }