ResizeSensor

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828871

fbshipit-source-id: d88c65178f0728b40414c9eab66d0402d7d51edd

src/ui/components/ResizeSensor.tsx

@@ -5,8 +5,9 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 import {Component} from 'react';
+import React from 'react';
 
 const IFrame = styled('iframe')({
   height: '100%',
@@ -24,11 +25,11 @@ const IFrame = styled('iframe')({
  */
 export default class ResizeSensor extends Component<{
   /** Callback when resize happened */
-  onResize: (e: UIEvent) => void,
+  onResize: (e: UIEvent) => void;
 }> {
-  iframe: ?HTMLIFrameElement;
+  iframe: HTMLIFrameElement | undefined;
 
-  setRef = (ref: ?HTMLIFrameElement) => {
+  setRef = (ref: HTMLIFrameElement | undefined) => {
     this.iframe = ref;
   };
 
@@ -50,7 +51,7 @@ export default class ResizeSensor extends Component<{
     }
   }
 
-  handleResize = () => {
-    window.requestAnimationFrame(this.props.onResize);
+  handleResize = (e: UIEvent) => {
+    window.requestAnimationFrame(() => this.props.onResize(e));
   };
 }

src/ui/index.js

@@ -132,7 +132,7 @@ export {default as PathBreadcrumbs} from './components/PathBreadcrumbs.tsx';
 export {default as ModalOverlay} from './components/ModalOverlay.tsx';
 export {default as Tooltip} from './components/Tooltip.js';
 export {default as TooltipProvider} from './components/TooltipProvider.js';
-export {default as ResizeSensor} from './components/ResizeSensor.js';
+export {default as ResizeSensor} from './components/ResizeSensor.tsx';
 export {default as StatusIndicator} from './components/StatusIndicator.js';
 
 // typography