Merge pull request #747 from sirkrisp/zero-width

Set initial values to null
wellyshen · Oct 31, 2022 · 878c0c6 · 878c0c6
2 parents 727eefa + 2423b9c
commit 878c0c6
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 35 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@
 node_modules
 dist
 coverage
-.size-snapshot.json
+.size-snapshot.json
diff --git a/README.md b/README.md
@@ -225,14 +225,14 @@ const returnObj = useDimensions(options?: object);
 
 It's returned with the following properties.
 
-| Key                 | Type     | Default | Description                                                                                                            |
-| ------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `observe`           | function |         | To set a target element for measuring or re-start observing the current target element.                                |
-| `unobserve`         | function |         | To stop observing the current target element.                                                                          |
-| `width`             | number   |         | The width of the target element in pixel.                                                                              |
-| `height`            | number   |         | The height of the target element in pixel.                                                                             |
-| `currentBreakpoint` | string   |         | Indicates the current breakpoint of the [responsive components](#responsive-components).                               |
-| `entry`             | object   |         | The [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) of the target element. |
+| Key                 | Type           | Default | Description                                                                                                            |
+| ------------------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `observe`           | function       |         | To set a target element for measuring or re-start observing the current target element.                                |
+| `unobserve`         | function       |         | To stop observing the current target element.                                                                          |
+| `width`             | number or null | null    | The width of the target element in pixel. Null while target has not mounted.                                           |
+| `height`            | number or null | null    | The height of the target element in pixel. Null while target has not mounted.Z                                         |
+| `currentBreakpoint` | string         |         | Indicates the current breakpoint of the [responsive components](#responsive-components).                               |
+| `entry`             | object         |         | The [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) of the target element. |
 
 ### Parameter
 

diff --git a/src/__tests__/useDimensions.ts b/src/__tests__/useDimensions.ts
@@ -43,29 +43,41 @@ describe("useDimensions", () => {
     const { result } = renderHelper();
     expect(observe).not.toHaveBeenCalled();
 
-    result.current.observe();
+    act(() => {
+      result.current.observe();
+    });
     expect(observe).not.toHaveBeenCalled();
   });
 
   it("should return workable observe method", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(disconnect).toHaveBeenCalledTimes(1);
     expect(observe).toHaveBeenCalledTimes(1);
 
-    result.current.observe();
+    act(() => {
+      result.current.observe();
+    });
     expect(observe).toHaveBeenCalledTimes(2);
   });
 
   it("should not observe repeatedly", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(disconnect).toHaveBeenCalledTimes(1);
 
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(disconnect).toHaveBeenCalledTimes(1);
 
-    result.current.observe(document.createElement("div"));
+    act(() => {
+      result.current.observe(document.createElement("div"));
+    });
     expect(disconnect).toHaveBeenCalledTimes(2);
   });
 
@@ -77,7 +89,9 @@ describe("useDimensions", () => {
 
   it("should return width and height correctly", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
 
     expect(result.current.width).toBe(0);
     expect(result.current.height).toBe(0);
@@ -96,7 +110,9 @@ describe("useDimensions", () => {
   it("should use border-box size", () => {
     console.warn = jest.fn();
     let { result } = renderHelper({ useBorderBoxSize: true });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const contentBoxSize = { blockSize: 100, inlineSize: 100 };
     act(() => {
       triggerObserverCb({ contentBoxSize });
@@ -109,7 +125,9 @@ describe("useDimensions", () => {
 
     console.warn = jest.fn();
     result = renderHelper({ useBorderBoxSize: true }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const borderBoxSize = { blockSize: 110, inlineSize: 110 };
     act(() => triggerObserverCb({ contentBoxSize, borderBoxSize }));
     expect(console.warn).not.toHaveBeenCalledWith(borderBoxWarn);
@@ -119,18 +137,24 @@ describe("useDimensions", () => {
 
   it("should return currentBreakpoint correctly", () => {
     let { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(result.current.currentBreakpoint).toBe("");
 
     result = renderHelper({ breakpoints: { T1: 100 } }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 0 } }));
     expect(result.current.currentBreakpoint).toBe("");
     act(() => triggerObserverCb({ contentRect: { width: 99 } }));
     expect(result.current.currentBreakpoint).toBe("");
 
     result = renderHelper({ breakpoints: { T0: 0, T1: 100 } }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 0 } }));
     expect(result.current.currentBreakpoint).toBe("T0");
     act(() => triggerObserverCb({ contentRect: { width: 99 } }));
@@ -144,7 +168,9 @@ describe("useDimensions", () => {
 
   it("should return entry correctly", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(result.current.entry).toBeUndefined();
 
     const e = { contentRect: { width: 100, height: 100 } };
@@ -161,7 +187,9 @@ describe("useDimensions", () => {
   it("should trigger onResize without breakpoints", () => {
     const onResize = jest.fn();
     const { result } = renderHelper({ onResize });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const contentRect = { width: 100, height: 100 };
     act(() => triggerObserverCb({ contentRect }));
     expect(onResize).toHaveBeenCalledWith({
@@ -180,7 +208,9 @@ describe("useDimensions", () => {
       breakpoints: { T0: 0, T1: 100 },
       onResize,
     });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const contentRect = { width: 50, height: 100 };
     act(() => {
       triggerObserverCb({ contentRect });
@@ -202,7 +232,9 @@ describe("useDimensions", () => {
       breakpoints: { T0: 100, T1: 200 },
       updateOnBreakpointChange: true,
     });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 50 } }));
     expect(result.current.width).toBe(0);
     act(() => triggerObserverCb({ contentRect: { width: 100 } }));
@@ -211,9 +243,11 @@ describe("useDimensions", () => {
 
   it("should update state conditionally", () => {
     const { result } = renderHelper({
-      shouldUpdate: ({ width }) => width > 300,
+      shouldUpdate: ({ width }) => (width ?? 0) > 300,
+    });
+    act(() => {
+      result.current.observe(target);
     });
-    result.current.observe(target);
     act(() => triggerObserverCb({ contentRect: { width: 100 } }));
     expect(result.current.width).toBe(0);
     act(() => triggerObserverCb({ contentRect: { width: 400 } }));
@@ -226,16 +260,20 @@ describe("useDimensions", () => {
     let { result } = renderHelper({
       updateOnBreakpointChange: true,
     });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 50 } }));
     expect(result.current.width).toBe(50);
 
     result = renderHelper({
       breakpoints: { T0: 100, T1: 200 },
       updateOnBreakpointChange: true,
-      shouldUpdate: ({ width }) => width > 300,
+      shouldUpdate: ({ width }) => (width ?? 0) > 300,
     }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 100 } }));
     expect(result.current.width).toBe(0);
     act(() => triggerObserverCb({ contentRect: { width: 400 } }));
@@ -271,7 +309,9 @@ describe("useDimensions", () => {
     // @ts-ignore
     delete global.ResizeObserverEntry;
     const { result } = renderHelper({ polyfill: mockResizeObserver });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(observe).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/index.ts b/src/index.ts
@@ -9,8 +9,8 @@ export const borderBoxWarn =
 
 interface State {
   readonly currentBreakpoint: string;
-  readonly width: number;
-  readonly height: number;
+  readonly width: number | null;
+  readonly height: number | null;
   readonly entry?: ResizeObserverEntry;
 }
 interface Observe<T> {
@@ -66,8 +66,8 @@ const useDimensions = <T extends HTMLElement | null>({
 }: Options<T> = {}): Return<T> => {
   const [state, setState] = useState<State>({
     currentBreakpoint: "",
-    width: 0,
-    height: 0,
+    width: null,
+    height: null,
   });
   const prevSizeRef = useRef<{ width?: number; height?: number }>({});
   const prevBreakpointRef = useRef<string>();
@@ -86,6 +86,11 @@ const useDimensions = <T extends HTMLElement | null>({
       if (element && element !== ref.current) {
         unobserve();
         ref.current = element;
+        setState({
+          currentBreakpoint: "",
+          width: element.clientWidth,
+          height: element.clientHeight,
+        });
       }
       if (observerRef.current && ref.current)
         observerRef.current.observe(ref.current as HTMLElement);