diff --git a/assets/js/components/FeatureToursDesktop.js b/assets/js/components/FeatureToursDesktop.js index 6c3530cd695..26ce7a1ead9 100644 --- a/assets/js/components/FeatureToursDesktop.js +++ b/assets/js/components/FeatureToursDesktop.js @@ -19,7 +19,8 @@ /** * External dependencies */ -import { useWindowWidth } from '@react-hook/window-size/throttled'; +// import { useWindowWidth } from '@react-hook/window-size/throttled'; +import { useWindowWidth } from '../hooks/useWindowWidth'; /** * Internal dependencies diff --git a/assets/js/components/KeyMetrics/KeyMetricsCTAContent.js b/assets/js/components/KeyMetrics/KeyMetricsCTAContent.js index 5d0eeffffa4..39e1eb8dbc4 100644 --- a/assets/js/components/KeyMetrics/KeyMetricsCTAContent.js +++ b/assets/js/components/KeyMetrics/KeyMetricsCTAContent.js @@ -22,7 +22,8 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import { useIntersection } from 'react-use'; -import { useWindowWidth } from '@react-hook/window-size/throttled'; +// import { useWindowWidth } from '@react-hook/window-size/throttled'; +import { useWindowWidth } from '../../hooks/useWindowWidth'; /** * WordPress dependencies @@ -79,6 +80,17 @@ export default function KeyMetricsCTAContent( { isSmallDesktopBreakpoint = onlyWidth >= 800 && onlyWidth < 1280; } + // eslint-disable-next-line no-console + console.log( { + breakpoint, + onlyWidth, + ga4Connected, + isMobileBreakpoint, + isTabletBreakpoint, + isSmallDesktopBreakpoint, + isDesktopBreakpoint, + } ); + const intersectionEntry = useIntersection( trackingRef, { threshold: 0.25, } ); diff --git a/assets/js/components/notifications/BannerNotification/index.js b/assets/js/components/notifications/BannerNotification/index.js index ab6df1fa4be..00ef71c54ed 100644 --- a/assets/js/components/notifications/BannerNotification/index.js +++ b/assets/js/components/notifications/BannerNotification/index.js @@ -22,7 +22,8 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useMount, useMountedState, useIntersection } from 'react-use'; -import { useWindowWidth } from '@react-hook/window-size/throttled'; +// import { useWindowWidth } from '@react-hook/window-size/throttled'; +import { useWindowWidth } from '../../../hooks/useWindowWidth'; /* * WordPress dependencies diff --git a/assets/js/googlesitekit/widgets/components/WidgetAreaHeader.js b/assets/js/googlesitekit/widgets/components/WidgetAreaHeader.js index f2c44372488..f4c056430dc 100644 --- a/assets/js/googlesitekit/widgets/components/WidgetAreaHeader.js +++ b/assets/js/googlesitekit/widgets/components/WidgetAreaHeader.js @@ -20,7 +20,8 @@ * External dependencies */ import PropTypes from 'prop-types'; -import { useWindowWidth } from '@react-hook/window-size/throttled'; +// import { useWindowWidth } from '@react-hook/window-size/throttled'; +import { useWindowWidth } from '../../../hooks/useWindowWidth'; /** * WordPress dependencies diff --git a/assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js b/assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js index bd078d6a128..77bc2f9ce33 100644 --- a/assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js +++ b/assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js @@ -21,7 +21,8 @@ */ import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { useWindowWidth } from '@react-hook/window-size/throttled'; +// import { useWindowWidth } from '@react-hook/window-size/throttled'; +import { useWindowWidth } from '../../../hooks/useWindowWidth'; /** * WordPress dependencies diff --git a/assets/js/hooks/useBreakpoint.js b/assets/js/hooks/useBreakpoint.js index 83f67408ee0..0f8b060a42c 100644 --- a/assets/js/hooks/useBreakpoint.js +++ b/assets/js/hooks/useBreakpoint.js @@ -19,7 +19,8 @@ /** * External dependencies */ -import { useWindowWidth } from '@react-hook/window-size/throttled'; +// import { useWindowWidth } from '@react-hook/window-size/throttled'; +import { useWindowWidth } from './useWindowWidth'; export const BREAKPOINT_XLARGE = 'xlarge'; export const BREAKPOINT_DESKTOP = 'desktop'; diff --git a/assets/js/hooks/useWindowWidth.js b/assets/js/hooks/useWindowWidth.js new file mode 100644 index 00000000000..8120312009b --- /dev/null +++ b/assets/js/hooks/useWindowWidth.js @@ -0,0 +1,37 @@ +// Copied from https://github.com/jaredLunde/react-hook/blob/b8ac9515e26937e838a36a27001dc46c7f46a390/packages/window-size/throttled/src/index.tsx +// Modified to use global.innerWidth and global.innerHeight instead of document.documentElement.clientWidth and document.documentElement.clientHeight. + +import { useThrottle } from '@react-hook/throttle'; +import useEvent from '@react-hook/event'; + +const emptyObj = {}; + +const win = typeof global === 'undefined' ? null : global; +const getSize = () => [ + // document.documentElement.clientWidth, + // document.documentElement.clientHeight, + global.innerWidth, + global.innerHeight, +]; + +export const useWindowSize = ( options = emptyObj ) => { + const { fps, leading, initialWidth = 0, initialHeight = 0 } = options; + const [ size, setThrottledSize ] = useThrottle( + /* istanbul ignore next */ + typeof document === 'undefined' + ? [ initialWidth, initialHeight ] + : getSize, + fps, + leading + ); + const setSize = () => setThrottledSize( getSize ); + + useEvent( win, 'resize', setSize ); + useEvent( win, 'orientationchange', setSize ); + + return size; +}; + +export const useWindowHeight = ( options ) => useWindowSize( options )[ 1 ]; + +export const useWindowWidth = ( options ) => useWindowSize( options )[ 0 ];