only call onResize observer once when mounting

souporserious · Apr 13, 2019 · dea8f0c · dea8f0c
1 parent 8a6abd9
commit dea8f0c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 27 deletions.
diff --git a/src/__tests__/Measure.test.js b/src/__tests__/Measure.test.js
@@ -32,7 +32,7 @@ describe('Measure', () => {
     container = document.createElement('div')
   })
 
-  it('should handel entry', () => {
+  it('should handle entry', () => {
     const ref = createRef()
     render(<MeasureWith innerRef={ref} />, container)
     expect(container.firstChild).toMatchSnapshot()
@@ -42,18 +42,18 @@ describe('Measure', () => {
     ])
     jest.runAllTimers()
 
-    expect(defaultChildrenFn).toHaveBeenCalledTimes(2)
+    expect(defaultChildrenFn).toHaveBeenCalledTimes(1)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  it('should handel bounds', () => {
+  it('should handle bounds', () => {
     render(<MeasureWith bounds />, container)
     expect(container.firstChild).toMatchSnapshot()
 
     resizeObserver.callback()
     jest.runAllTimers()
 
-    expect(defaultChildrenFn).toHaveBeenCalledTimes(2)
+    expect(defaultChildrenFn).toHaveBeenCalledTimes(1)
     expect(container.firstChild).toMatchSnapshot()
   })
 
@@ -62,7 +62,7 @@ describe('Measure', () => {
       render(<MeasureWith />, container)
       expect(resizeObserver.observe).toHaveBeenCalledTimes(1)
     })
-    it('should always un observer before observing next one', () => {
+    it('should always unobserve before observing next one', () => {
       const ref = createRef()
 
       render(<MeasureWith innerRef={ref} children={() => null} />, container)
@@ -101,7 +101,7 @@ describe('Measure', () => {
       resizeObserver.callback()
       jest.runAllTimers()
 
-      expect(onResize).toHaveBeenCalledTimes(2)
+      expect(onResize).toHaveBeenCalledTimes(1)
     })
   })
 })
diff --git a/src/__tests__/__snapshots__/Measure.test.js.snap b/src/__tests__/__snapshots__/Measure.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Measure should handel bounds 1`] = `
+exports[`Measure should handle bounds 1`] = `
 <div>
   {
   "contentRect": {
@@ -15,24 +15,22 @@ exports[`Measure should handel bounds 1`] = `
 </div>
 `;
 
-exports[`Measure should handel bounds 2`] = `
+exports[`Measure should handle bounds 2`] = `
 <div>
   {
   "contentRect": {
-    "bounds": {
-      "top": 0,
-      "right": 0,
-      "bottom": 0,
-      "left": 0,
-      "width": 0,
-      "height": 0
-    }
+    "entry": {},
+    "client": {},
+    "offset": {},
+    "scroll": {},
+    "bounds": {},
+    "margin": {}
   }
 }
 </div>
 `;
 
-exports[`Measure should handel entry 1`] = `
+exports[`Measure should handle entry 1`] = `
 <div>
   {
   "contentRect": {
@@ -47,14 +45,16 @@ exports[`Measure should handel entry 1`] = `
 </div>
 `;
 
-exports[`Measure should handel entry 2`] = `
+exports[`Measure should handle entry 2`] = `
 <div>
   {
   "contentRect": {
-    "entry": {
-      "width": 0,
-      "height": 0
-    }
+    "entry": {},
+    "client": {},
+    "offset": {},
+    "scroll": {},
+    "bounds": {},
+    "margin": {}
   }
 }
 </div>

diff --git a/src/with-content-rect.js b/src/with-content-rect.js
@@ -35,17 +35,16 @@ function withContentRect(types) {
 
       _node = null
 
+      _firstResize = true
+
       componentDidMount() {
         this._resizeObserver = new ResizeObserver(this.measure)
         if (this._node !== null) {
           this._resizeObserver.observe(this._node)
 
           if (typeof this.props.onResize === 'function') {
             this.props.onResize(
-              getContentRect(
-                this._node,
-                types || getTypes(this.props)
-              )
+              getContentRect(this._node, types || getTypes(this.props))
             )
           }
         }
@@ -70,12 +69,13 @@ function withContentRect(types) {
         }
 
         this._animationFrameID = window.requestAnimationFrame(() => {
-          if (this._resizeObserver !== null) {
+          if (this._resizeObserver !== null && !this._firstResize) {
             this.setState({ contentRect })
             if (typeof this.props.onResize === 'function') {
               this.props.onResize(contentRect)
             }
           }
+          this._firstResize = false
         })
       }