From a8b974e27531f56219f92e17a7852efd9e32b558 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Mon, 3 Feb 2020 12:39:44 -0800
Subject: [PATCH] fix(vx-responsive): fix enhancer parent/screen size checks

---
 .../src/enhancers/withParentSize.tsx              | 15 ++++++++-------
 .../src/enhancers/withScreenSize.tsx              |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index a8b1e76fb..b5409330c 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import debounce from 'lodash/debounce';
 import ResizeObserver from 'resize-observer-polyfill';
 
+const CONTAINER_STYLES = { width: '100%', height: '100%' };
+
 export type WithParentSizeProps = {
   debounceTime?: number;
 };
@@ -58,6 +60,10 @@ export default function withParentSize<BaseComponentProps extends WithParentSize
       if (this.resizeObserver) this.resizeObserver.disconnect();
     }
 
+    setRef = (ref: HTMLDivElement) => {
+      this.container = ref;
+    };
+
     resize = ({ width, height }: { width: number; height: number }) => {
       this.setState({
         parentWidth: width,
@@ -68,13 +74,8 @@ export default function withParentSize<BaseComponentProps extends WithParentSize
     render() {
       const { parentWidth, parentHeight } = this.state;
       return (
-        <div
-          style={{ width: '100%', height: '100%' }}
-          ref={ref => {
-            this.container = ref;
-          }}
-        >
-          {parentWidth !== null && parentHeight !== null && (
+        <div style={CONTAINER_STYLES} ref={this.setRef}>
+          {parentWidth != null && parentHeight != null && (
             <BaseComponent parentWidth={parentWidth} parentHeight={parentHeight} {...this.props} />
           )}
         </div>
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.tsx b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
index 297a62bb5..88501c248 100644
--- a/packages/vx-responsive/src/enhancers/withScreenSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
@@ -54,7 +54,7 @@ export default function withScreenSize<BaseComponentProps extends WithScreenSize
 
     render() {
       const { screenWidth, screenHeight } = this.state;
-      if (!screenWidth && !screenHeight) return null;
+      if (screenWidth == null || screenHeight == null) return null;
       return (
         <BaseComponent screenWidth={screenWidth} screenHeight={screenHeight} {...this.props} />
       );