fix(vx-responsive): fix enhancer parent/screen size checks

airbnb · Feb 3, 2020 · a8b974e · a8b974e
1 parent 7af8bc6
commit a8b974e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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} />
       );