From b03338da863bd9930138ab227248ea8ce018a77c Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Mon, 11 May 2020 21:04:12 +0200 Subject: [PATCH 1/3] New hook: useGlobalEvent --- .../block-library/src/image/image-size.js | 53 ++++++++++--------- packages/compose/README.md | 4 ++ .../src/hooks/use-global-event/index.js | 18 +++++++ packages/compose/src/index.js | 1 + 4 files changed, 51 insertions(+), 25 deletions(-) create mode 100644 packages/compose/src/hooks/use-global-event/index.js diff --git a/packages/block-library/src/image/image-size.js b/packages/block-library/src/image/image-size.js index b7897284b13dd1..f006ee5bff4b89 100644 --- a/packages/block-library/src/image/image-size.js +++ b/packages/block-library/src/image/image-size.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { withGlobalEvents } from '@wordpress/compose'; +import { useGlobalEvent } from '@wordpress/compose'; import { useRef, useState, useEffect } from '@wordpress/element'; /** @@ -9,8 +9,9 @@ import { useRef, useState, useEffect } from '@wordpress/element'; */ import { calculatePreferedImageSize } from './utils'; -function ImageSize( { src, dirtynessTrigger, children } ) { +export default function ImageSize( { src, dirtynessTrigger, children } ) { const ref = useRef(); + const image = useRef(); const [ state, setState ] = useState( { imageWidth: null, imageHeight: null, @@ -20,35 +21,37 @@ function ImageSize( { src, dirtynessTrigger, children } ) { imageHeightWithinContainer: null, } ); + function calculateSize() { + const { width, height } = calculatePreferedImageSize( + image.current, + ref.current + ); + + setState( { + imageWidth: image.current.width, + imageHeight: image.current.height, + containerWidth: ref.current.clientWidth, + containerHeight: ref.current.clientHeight, + imageWidthWithinContainer: width, + imageHeightWithinContainer: height, + } ); + } + useEffect( () => { - const image = new window.Image(); - - image.onload = () => { - const { width, height } = calculatePreferedImageSize( - image, - ref.current - ); - - setState( { - imageWidth: image.width, - imageHeight: image.height, - containerWidth: ref.current.clientWidth, - containerHeight: ref.current.clientHeight, - imageWidthWithinContainer: width, - imageHeightWithinContainer: height, - } ); - }; + if ( ! image.current ) { + const { defaultView } = ref.current.ownerDocument; + image.current = new defaultView.Image(); + } - image.src = src; + image.current.onload = calculateSize; + image.current.src = src; return () => { - image.onload = undefined; + image.current.onload = undefined; }; }, [ src, dirtynessTrigger ] ); + useGlobalEvent( ref, 'resize', calculateSize, [] ); + return
{ children( state ) }
; } - -export default withGlobalEvents( { - resize: 'calculateSize', -} )( ImageSize ); diff --git a/packages/compose/README.md b/packages/compose/README.md index 66e6d5dab88206..d5ae134d284e64 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -119,6 +119,10 @@ _Returns_ - `WPComponent`: Component class with generated display name assigned. +# **useGlobalEvent** + +Undocumented declaration. + # **useInstanceId** Provides a unique instance ID. diff --git a/packages/compose/src/hooks/use-global-event/index.js b/packages/compose/src/hooks/use-global-event/index.js new file mode 100644 index 00000000000000..2bcaba11a96b18 --- /dev/null +++ b/packages/compose/src/hooks/use-global-event/index.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { useEffect } from '@wordpress/element'; + +export default function useGlobalEvent( ref, ...args ) { + const dependencies = args.pop(); + + useEffect( () => { + const { defaultView } = ref.current.ownerDocument; + + defaultView.addEventListener( ...args ); + + return () => { + defaultView.removeEventListener( ...args ); + }; + }, dependencies ); +} diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js index 083d41c3f92693..b5e4844704c90d 100644 --- a/packages/compose/src/index.js +++ b/packages/compose/src/index.js @@ -14,6 +14,7 @@ export { default as withState } from './higher-order/with-state'; // Hooks export { default as __experimentalUseDragging } from './hooks/use-dragging'; +export { default as useGlobalEvent } from './hooks/use-global-event'; export { default as useInstanceId } from './hooks/use-instance-id'; export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut'; export { default as useMediaQuery } from './hooks/use-media-query'; From b572a38dc8ad4b182f117a5b39ca09a22fb879d3 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Tue, 12 May 2020 08:56:13 +0200 Subject: [PATCH 2/3] Add docs --- packages/block-library/src/image/image-size.js | 2 +- packages/compose/README.md | 8 +++++++- packages/compose/src/hooks/use-global-event/index.js | 12 +++++++++--- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/image-size.js b/packages/block-library/src/image/image-size.js index f006ee5bff4b89..10f65f000d2db1 100644 --- a/packages/block-library/src/image/image-size.js +++ b/packages/block-library/src/image/image-size.js @@ -51,7 +51,7 @@ export default function ImageSize( { src, dirtynessTrigger, children } ) { }; }, [ src, dirtynessTrigger ] ); - useGlobalEvent( ref, 'resize', calculateSize, [] ); + useGlobalEvent( ref, [ 'resize', calculateSize ], [] ); return
{ children( state ) }
; } diff --git a/packages/compose/README.md b/packages/compose/README.md index d5ae134d284e64..0bfa913c0b3e99 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -121,7 +121,13 @@ _Returns_ # **useGlobalEvent** -Undocumented declaration. +Adds a listener to the containing window. + +_Parameters_ + +- _ref_ `Object`: A reference with a node that is contained by the window. +- _args_ `Array`: `addEventListener` arguments. +- _dependencies_ `Array`: Hook dependencies. # **useInstanceId** diff --git a/packages/compose/src/hooks/use-global-event/index.js b/packages/compose/src/hooks/use-global-event/index.js index 2bcaba11a96b18..e9a7daaa668e3e 100644 --- a/packages/compose/src/hooks/use-global-event/index.js +++ b/packages/compose/src/hooks/use-global-event/index.js @@ -3,9 +3,15 @@ */ import { useEffect } from '@wordpress/element'; -export default function useGlobalEvent( ref, ...args ) { - const dependencies = args.pop(); - +/** + * Adds a listener to the containing window. + * + * @param {Object} ref A reference with a node that is contained by the + * window. + * @param {Array} args `addEventListener` arguments. + * @param {Array} dependencies Hook dependencies. + */ +export default function useGlobalEvent( ref, args, dependencies ) { useEffect( () => { const { defaultView } = ref.current.ownerDocument; From 353fa553bdd24c238b6b2009d6c80b1162536162 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Wed, 13 May 2020 16:44:24 +0200 Subject: [PATCH 3/3] Remove useGlobalEvent --- .../block-library/src/image/image-size.js | 48 +++++++++---------- packages/compose/README.md | 10 ---- .../src/hooks/use-global-event/index.js | 24 ---------- packages/compose/src/index.js | 1 - 4 files changed, 22 insertions(+), 61 deletions(-) delete mode 100644 packages/compose/src/hooks/use-global-event/index.js diff --git a/packages/block-library/src/image/image-size.js b/packages/block-library/src/image/image-size.js index 10f65f000d2db1..8409c8b8632b83 100644 --- a/packages/block-library/src/image/image-size.js +++ b/packages/block-library/src/image/image-size.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useGlobalEvent } from '@wordpress/compose'; import { useRef, useState, useEffect } from '@wordpress/element'; /** @@ -11,7 +10,6 @@ import { calculatePreferedImageSize } from './utils'; export default function ImageSize( { src, dirtynessTrigger, children } ) { const ref = useRef(); - const image = useRef(); const [ state, setState ] = useState( { imageWidth: null, imageHeight: null, @@ -21,37 +19,35 @@ export default function ImageSize( { src, dirtynessTrigger, children } ) { imageHeightWithinContainer: null, } ); - function calculateSize() { - const { width, height } = calculatePreferedImageSize( - image.current, - ref.current - ); - - setState( { - imageWidth: image.current.width, - imageHeight: image.current.height, - containerWidth: ref.current.clientWidth, - containerHeight: ref.current.clientHeight, - imageWidthWithinContainer: width, - imageHeightWithinContainer: height, - } ); - } - useEffect( () => { - if ( ! image.current ) { - const { defaultView } = ref.current.ownerDocument; - image.current = new defaultView.Image(); + const { defaultView } = ref.current.ownerDocument; + const image = new defaultView.Image(); + + function calculateSize() { + const { width, height } = calculatePreferedImageSize( + image, + ref.current + ); + + setState( { + imageWidth: image.width, + imageHeight: image.height, + containerWidth: ref.current.clientWidth, + containerHeight: ref.current.clientHeight, + imageWidthWithinContainer: width, + imageHeightWithinContainer: height, + } ); } - image.current.onload = calculateSize; - image.current.src = src; + defaultView.addEventListener( 'resize', calculateSize ); + image.addEventListener( 'load', calculateSize ); + image.src = src; return () => { - image.current.onload = undefined; + defaultView.removeEventListener( 'resize', calculateSize ); + image.removeEventListener( 'load', calculateSize ); }; }, [ src, dirtynessTrigger ] ); - useGlobalEvent( ref, [ 'resize', calculateSize ], [] ); - return
{ children( state ) }
; } diff --git a/packages/compose/README.md b/packages/compose/README.md index 0bfa913c0b3e99..66e6d5dab88206 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -119,16 +119,6 @@ _Returns_ - `WPComponent`: Component class with generated display name assigned. -# **useGlobalEvent** - -Adds a listener to the containing window. - -_Parameters_ - -- _ref_ `Object`: A reference with a node that is contained by the window. -- _args_ `Array`: `addEventListener` arguments. -- _dependencies_ `Array`: Hook dependencies. - # **useInstanceId** Provides a unique instance ID. diff --git a/packages/compose/src/hooks/use-global-event/index.js b/packages/compose/src/hooks/use-global-event/index.js deleted file mode 100644 index e9a7daaa668e3e..00000000000000 --- a/packages/compose/src/hooks/use-global-event/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEffect } from '@wordpress/element'; - -/** - * Adds a listener to the containing window. - * - * @param {Object} ref A reference with a node that is contained by the - * window. - * @param {Array} args `addEventListener` arguments. - * @param {Array} dependencies Hook dependencies. - */ -export default function useGlobalEvent( ref, args, dependencies ) { - useEffect( () => { - const { defaultView } = ref.current.ownerDocument; - - defaultView.addEventListener( ...args ); - - return () => { - defaultView.removeEventListener( ...args ); - }; - }, dependencies ); -} diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js index b5e4844704c90d..083d41c3f92693 100644 --- a/packages/compose/src/index.js +++ b/packages/compose/src/index.js @@ -14,7 +14,6 @@ export { default as withState } from './higher-order/with-state'; // Hooks export { default as __experimentalUseDragging } from './hooks/use-dragging'; -export { default as useGlobalEvent } from './hooks/use-global-event'; export { default as useInstanceId } from './hooks/use-instance-id'; export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut'; export { default as useMediaQuery } from './hooks/use-media-query';