From 035e8bda1c441b5061465189c525ff6bc849dde0 Mon Sep 17 00:00:00 2001 From: Dylan Mozlowski Date: Mon, 8 Nov 2021 19:50:35 -0800 Subject: [PATCH 1/4] Fix shallow equality check on default array value for ParentSize --- .../src/components/ParentSize.tsx | 16 ++++++++++---- .../src/components/ParentSizeModern.tsx | 22 +++++++++++-------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/visx-responsive/src/components/ParentSize.tsx b/packages/visx-responsive/src/components/ParentSize.tsx index d0743b635..6a93dd27d 100644 --- a/packages/visx-responsive/src/components/ParentSize.tsx +++ b/packages/visx-responsive/src/components/ParentSize.tsx @@ -31,11 +31,13 @@ type ParentSizeState = { export type ParentSizeProvidedProps = ParentSizeState; +const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = []; + export default function ParentSize({ className, children, debounceTime = 300, - ignoreDimensions = [], + ignoreDimensions = defaultIgnoreDimensions, parentSizeStyles = { width: '100%', height: '100%' }, enableDebounceLeadingCall = true, ...restProps @@ -43,14 +45,20 @@ export default function ParentSize({ const target = useRef(null); const animationFrameID = useRef(0); - const [state, setState] = useState({ width: 0, height: 0, top: 0, left: 0 }); + const [state, setState] = useState(null); const resize = useMemo(() => { const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { - setState((existing) => { + setState((existingState) => { + const existing = existingState || { + width: 0, + height: 0, + top: 0, + left: 0, + }; const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); @@ -83,7 +91,7 @@ export default function ParentSize({ return (
- {children({ + {state && children({ ...state, ref: target.current, resize, diff --git a/packages/visx-responsive/src/components/ParentSizeModern.tsx b/packages/visx-responsive/src/components/ParentSizeModern.tsx index 9f2d3590f..5b5e4fb74 100644 --- a/packages/visx-responsive/src/components/ParentSizeModern.tsx +++ b/packages/visx-responsive/src/components/ParentSizeModern.tsx @@ -38,11 +38,13 @@ type ParentSizeState = { export type ParentSizeProvidedProps = ParentSizeState; +const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = []; + export default function ParentSize({ className, children, debounceTime = 300, - ignoreDimensions = [], + ignoreDimensions = defaultIgnoreDimensions, parentSizeStyles = { width: '100%', height: '100%' }, enableDebounceLeadingCall = true, ...restProps @@ -50,19 +52,21 @@ export default function ParentSize({ const target = useRef(null); const animationFrameID = useRef(0); - const [state, setState] = useState({ - width: 0, - height: 0, - top: 0, - left: 0, - }); + const [state, setState] = useState(null); const resize = useMemo(() => { const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { - setState((existing) => { + setState((existingState) => { + const existing = existingState || { + width: 0, + height: 0, + top: 0, + left: 0, + }; + const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); @@ -95,7 +99,7 @@ export default function ParentSize({ return (
- {children({ + {state && children({ ...state, ref: target.current, resize, From 5d71efca1267ea061573a19dd438a2d35f4c5ba3 Mon Sep 17 00:00:00 2001 From: Dylan Mozlowski Date: Tue, 9 Nov 2021 07:42:47 -0800 Subject: [PATCH 2/4] lint --- .../src/components/ParentSize.tsx | 47 ++++++++++++------- .../src/components/ParentSizeModern.tsx | 47 ++++++++++++------- 2 files changed, 60 insertions(+), 34 deletions(-) diff --git a/packages/visx-responsive/src/components/ParentSize.tsx b/packages/visx-responsive/src/components/ParentSize.tsx index 6a93dd27d..e66e6ab28 100644 --- a/packages/visx-responsive/src/components/ParentSize.tsx +++ b/packages/visx-responsive/src/components/ParentSize.tsx @@ -1,6 +1,6 @@ -import debounce from 'lodash/debounce'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; -import ResizeObserver from 'resize-observer-polyfill'; +import debounce from "lodash/debounce"; +import React, { useEffect, useMemo, useRef, useState } from "react"; +import ResizeObserver from "resize-observer-polyfill"; export type ParentSizeProps = { /** Optional `className` to add to the parent `div` wrapper used for size measurement. */ @@ -18,7 +18,7 @@ export type ParentSizeProps = { args: { ref: HTMLDivElement | null; resize: (state: ParentSizeState) => void; - } & ParentSizeState, + } & ParentSizeState ) => React.ReactNode; }; @@ -31,24 +31,27 @@ type ParentSizeState = { export type ParentSizeProvidedProps = ParentSizeState; -const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = []; +const defaultIgnoreDimensions: ParentSizeProps["ignoreDimensions"] = []; export default function ParentSize({ className, children, debounceTime = 300, ignoreDimensions = defaultIgnoreDimensions, - parentSizeStyles = { width: '100%', height: '100%' }, + parentSizeStyles = { width: "100%", height: "100%" }, enableDebounceLeadingCall = true, ...restProps -}: ParentSizeProps & Omit) { +}: ParentSizeProps & + Omit) { const target = useRef(null); const animationFrameID = useRef(0); const [state, setState] = useState(null); const resize = useMemo(() => { - const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; + const normalized = Array.isArray(ignoreDimensions) + ? ignoreDimensions + : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { @@ -60,14 +63,18 @@ export default function ParentSize({ left: 0, }; const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; - const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); - const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); + const keysWithChanges = stateKeys.filter( + (key) => existing[key] !== incoming[key] + ); + const shouldBail = keysWithChanges.every((key) => + normalized.includes(key) + ); return shouldBail ? existing : incoming; }); }, debounceTime, - { leading: enableDebounceLeadingCall }, + { leading: enableDebounceLeadingCall } ); }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]); @@ -90,12 +97,18 @@ export default function ParentSize({ }, [resize]); return ( -
- {state && children({ - ...state, - ref: target.current, - resize, - })} +
+ {state && + children({ + ...state, + ref: target.current, + resize, + })}
); } diff --git a/packages/visx-responsive/src/components/ParentSizeModern.tsx b/packages/visx-responsive/src/components/ParentSizeModern.tsx index 5b5e4fb74..aa33b1938 100644 --- a/packages/visx-responsive/src/components/ParentSizeModern.tsx +++ b/packages/visx-responsive/src/components/ParentSizeModern.tsx @@ -1,6 +1,6 @@ -import debounce from 'lodash/debounce'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; -import { ResizeObserver } from '../types'; +import debounce from "lodash/debounce"; +import React, { useEffect, useMemo, useRef, useState } from "react"; +import { ResizeObserver } from "../types"; // This can be deleted once https://git.io/Jk9FD lands in TypeScript declare global { @@ -25,7 +25,7 @@ export type ParentSizeProps = { args: { ref: HTMLDivElement | null; resize: (state: ParentSizeState) => void; - } & ParentSizeState, + } & ParentSizeState ) => React.ReactNode; }; @@ -38,24 +38,27 @@ type ParentSizeState = { export type ParentSizeProvidedProps = ParentSizeState; -const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = []; +const defaultIgnoreDimensions: ParentSizeProps["ignoreDimensions"] = []; export default function ParentSize({ className, children, debounceTime = 300, ignoreDimensions = defaultIgnoreDimensions, - parentSizeStyles = { width: '100%', height: '100%' }, + parentSizeStyles = { width: "100%", height: "100%" }, enableDebounceLeadingCall = true, ...restProps -}: ParentSizeProps & Omit) { +}: ParentSizeProps & + Omit) { const target = useRef(null); const animationFrameID = useRef(0); const [state, setState] = useState(null); const resize = useMemo(() => { - const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; + const normalized = Array.isArray(ignoreDimensions) + ? ignoreDimensions + : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { @@ -68,14 +71,18 @@ export default function ParentSize({ }; const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; - const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); - const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); + const keysWithChanges = stateKeys.filter( + (key) => existing[key] !== incoming[key] + ); + const shouldBail = keysWithChanges.every((key) => + normalized.includes(key) + ); return shouldBail ? existing : incoming; }); }, debounceTime, - { leading: enableDebounceLeadingCall }, + { leading: enableDebounceLeadingCall } ); }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]); @@ -98,12 +105,18 @@ export default function ParentSize({ }, [resize]); return ( -
- {state && children({ - ...state, - ref: target.current, - resize, - })} +
+ {state && + children({ + ...state, + ref: target.current, + resize, + })}
); } From e21b9b7bdf58d75b32436849aa8d022c4a8431be Mon Sep 17 00:00:00 2001 From: Dylan Mozlowski Date: Tue, 9 Nov 2021 08:29:27 -0800 Subject: [PATCH 3/4] lint --- .../src/components/ParentSize.tsx | 36 +++++++------------ .../src/components/ParentSizeModern.tsx | 36 +++++++------------ 2 files changed, 24 insertions(+), 48 deletions(-) diff --git a/packages/visx-responsive/src/components/ParentSize.tsx b/packages/visx-responsive/src/components/ParentSize.tsx index e66e6ab28..002bcffb1 100644 --- a/packages/visx-responsive/src/components/ParentSize.tsx +++ b/packages/visx-responsive/src/components/ParentSize.tsx @@ -1,6 +1,6 @@ -import debounce from "lodash/debounce"; -import React, { useEffect, useMemo, useRef, useState } from "react"; -import ResizeObserver from "resize-observer-polyfill"; +import debounce from 'lodash/debounce'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import ResizeObserver from 'resize-observer-polyfill'; export type ParentSizeProps = { /** Optional `className` to add to the parent `div` wrapper used for size measurement. */ @@ -18,7 +18,7 @@ export type ParentSizeProps = { args: { ref: HTMLDivElement | null; resize: (state: ParentSizeState) => void; - } & ParentSizeState + } & ParentSizeState, ) => React.ReactNode; }; @@ -31,27 +31,24 @@ type ParentSizeState = { export type ParentSizeProvidedProps = ParentSizeState; -const defaultIgnoreDimensions: ParentSizeProps["ignoreDimensions"] = []; +const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = []; export default function ParentSize({ className, children, debounceTime = 300, ignoreDimensions = defaultIgnoreDimensions, - parentSizeStyles = { width: "100%", height: "100%" }, + parentSizeStyles = { width: '100%', height: '100%' }, enableDebounceLeadingCall = true, ...restProps -}: ParentSizeProps & - Omit) { +}: ParentSizeProps & Omit) { const target = useRef(null); const animationFrameID = useRef(0); const [state, setState] = useState(null); const resize = useMemo(() => { - const normalized = Array.isArray(ignoreDimensions) - ? ignoreDimensions - : [ignoreDimensions]; + const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { @@ -63,18 +60,14 @@ export default function ParentSize({ left: 0, }; const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; - const keysWithChanges = stateKeys.filter( - (key) => existing[key] !== incoming[key] - ); - const shouldBail = keysWithChanges.every((key) => - normalized.includes(key) - ); + const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); + const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); return shouldBail ? existing : incoming; }); }, debounceTime, - { leading: enableDebounceLeadingCall } + { leading: enableDebounceLeadingCall }, ); }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]); @@ -97,12 +90,7 @@ export default function ParentSize({ }, [resize]); return ( -
+
{state && children({ ...state, diff --git a/packages/visx-responsive/src/components/ParentSizeModern.tsx b/packages/visx-responsive/src/components/ParentSizeModern.tsx index aa33b1938..d2c7cec0f 100644 --- a/packages/visx-responsive/src/components/ParentSizeModern.tsx +++ b/packages/visx-responsive/src/components/ParentSizeModern.tsx @@ -1,6 +1,6 @@ -import debounce from "lodash/debounce"; -import React, { useEffect, useMemo, useRef, useState } from "react"; -import { ResizeObserver } from "../types"; +import debounce from 'lodash/debounce'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { ResizeObserver } from '../types'; // This can be deleted once https://git.io/Jk9FD lands in TypeScript declare global { @@ -25,7 +25,7 @@ export type ParentSizeProps = { args: { ref: HTMLDivElement | null; resize: (state: ParentSizeState) => void; - } & ParentSizeState + } & ParentSizeState, ) => React.ReactNode; }; @@ -38,27 +38,24 @@ type ParentSizeState = { export type ParentSizeProvidedProps = ParentSizeState; -const defaultIgnoreDimensions: ParentSizeProps["ignoreDimensions"] = []; +const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = []; export default function ParentSize({ className, children, debounceTime = 300, ignoreDimensions = defaultIgnoreDimensions, - parentSizeStyles = { width: "100%", height: "100%" }, + parentSizeStyles = { width: '100%', height: '100%' }, enableDebounceLeadingCall = true, ...restProps -}: ParentSizeProps & - Omit) { +}: ParentSizeProps & Omit) { const target = useRef(null); const animationFrameID = useRef(0); const [state, setState] = useState(null); const resize = useMemo(() => { - const normalized = Array.isArray(ignoreDimensions) - ? ignoreDimensions - : [ignoreDimensions]; + const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { @@ -71,18 +68,14 @@ export default function ParentSize({ }; const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; - const keysWithChanges = stateKeys.filter( - (key) => existing[key] !== incoming[key] - ); - const shouldBail = keysWithChanges.every((key) => - normalized.includes(key) - ); + const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); + const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); return shouldBail ? existing : incoming; }); }, debounceTime, - { leading: enableDebounceLeadingCall } + { leading: enableDebounceLeadingCall }, ); }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]); @@ -105,12 +98,7 @@ export default function ParentSize({ }, [resize]); return ( -
+
{state && children({ ...state, From bf43b8fe4b9b9f02e15859337ac5c0e91bcbc1af Mon Sep 17 00:00:00 2001 From: Dylan Mozlowski Date: Thu, 11 Nov 2021 07:17:36 -0800 Subject: [PATCH 4/4] PR updates --- .../src/components/ParentSize.tsx | 26 +++++++++--------- .../src/components/ParentSizeModern.tsx | 27 +++++++++---------- 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/packages/visx-responsive/src/components/ParentSize.tsx b/packages/visx-responsive/src/components/ParentSize.tsx index 002bcffb1..085c55add 100644 --- a/packages/visx-responsive/src/components/ParentSize.tsx +++ b/packages/visx-responsive/src/components/ParentSize.tsx @@ -45,20 +45,19 @@ export default function ParentSize({ const target = useRef(null); const animationFrameID = useRef(0); - const [state, setState] = useState(null); + const [state, setState] = useState({ + width: 0, + height: 0, + top: 0, + left: 0, + }); const resize = useMemo(() => { const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { - setState((existingState) => { - const existing = existingState || { - width: 0, - height: 0, - top: 0, - left: 0, - }; + setState((existing) => { const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); @@ -91,12 +90,11 @@ export default function ParentSize({ return (
- {state && - children({ - ...state, - ref: target.current, - resize, - })} + {children({ + ...state, + ref: target.current, + resize, + })}
); } diff --git a/packages/visx-responsive/src/components/ParentSizeModern.tsx b/packages/visx-responsive/src/components/ParentSizeModern.tsx index d2c7cec0f..3d590bcae 100644 --- a/packages/visx-responsive/src/components/ParentSizeModern.tsx +++ b/packages/visx-responsive/src/components/ParentSizeModern.tsx @@ -52,21 +52,19 @@ export default function ParentSize({ const target = useRef(null); const animationFrameID = useRef(0); - const [state, setState] = useState(null); + const [state, setState] = useState({ + width: 0, + height: 0, + top: 0, + left: 0, + }); const resize = useMemo(() => { const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions]; return debounce( (incoming: ParentSizeState) => { - setState((existingState) => { - const existing = existingState || { - width: 0, - height: 0, - top: 0, - left: 0, - }; - + setState((existing) => { const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[]; const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]); const shouldBail = keysWithChanges.every((key) => normalized.includes(key)); @@ -99,12 +97,11 @@ export default function ParentSize({ return (
- {state && - children({ - ...state, - ref: target.current, - resize, - })} + {children({ + ...state, + ref: target.current, + resize, + })}
); }