diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx index b44fc68..39133fb 100644 --- a/src/components/Resizable.tsx +++ b/src/components/Resizable.tsx @@ -4,6 +4,7 @@ import cx from 'utils/cx' import { useWindowSize, useMediaStyleSheet } from 'utils/hooks' import { bodySpacingClassName } from 'utils/DOMHelper' import configHelper, { configKeys } from 'utils/configHelper' +import * as features from 'utils/features' export type Size = number type Props = { @@ -53,12 +54,14 @@ export default function Resizable({ return (
{children}
- { - if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size) - }} - size={size} - /> + {features.resize && ( + { + if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size) + }} + size={size} + /> + )}
) } diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx index 7e63657..d7a633d 100644 --- a/src/components/SizeObserver.tsx +++ b/src/components/SizeObserver.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import * as features from 'utils/features' type Size = { width: number @@ -23,24 +24,37 @@ export default function SizeObserver({ }) React.useEffect(() => { - const observer = new window.ResizeObserver(entries => { - const entry = entries[0] - if (!entry) return - const rect = entry.contentRect - // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error - requestAnimationFrame(() => - setSize({ - width: rect.width, - height: rect.height, - }), - ) - }) + if (features.resize) { + const observer = new window.ResizeObserver(entries => { + const entry = entries[0] + if (!entry) return + const rect = entry.contentRect + safeSetSize(rect) + }) - if (ref.current) observer.observe(ref.current) - return () => observer.disconnect() + if (ref.current) observer.observe(ref.current) + return () => observer.disconnect() + } else { + if (ref.current) { + if ('getBoundingClientRect' in ref.current) { + const rect = ref.current.getBoundingClientRect() + setSize(rect) + } + } + } }, []) const props: any = { ...rest, ref } // :) return React.createElement(type, props, children(size)) + + function safeSetSize(rect: DOMRectReadOnly) { + // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error + requestAnimationFrame(() => + setSize({ + width: rect.width, + height: rect.height, + }), + ) + } } diff --git a/src/utils/features.ts b/src/utils/features.ts new file mode 100644 index 0000000..fb1df66 --- /dev/null +++ b/src/utils/features.ts @@ -0,0 +1 @@ +export const resize = Boolean(window.ResizeObserver)