Popover

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828816

fbshipit-source-id: e90852fcebd02416c3d5cfd8011bb96d2ea0d672

src/ui/components/Popover.tsx

@@ -5,10 +5,10 @@
  * @format
  */
 
-import {PureComponent} from 'react';
+import React, {PureComponent} from 'react';
 import FlexColumn from './FlexColumn.js';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
-import {colors} from './colors.tsx';
+import {colors} from './colors';
 
 const Anchor = styled('img')({
   zIndex: 6,
@@ -18,7 +18,12 @@ const Anchor = styled('img')({
   transform: 'translate(-50%, calc(100% + 2px))',
 });
 
-const PopoverContainer = styled(FlexColumn)(props => ({
+type Opts = {
+  minWidth?: number;
+  skewLeft?: boolean;
+};
+
+const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({
   backgroundColor: colors.white,
   borderRadius: 7,
   border: '1px solid rgba(0,0,0,0.3)',
@@ -48,14 +53,14 @@ const PopoverContainer = styled(FlexColumn)(props => ({
   },
 }));
 
-type Props = {|
+type Props = {
-  children: React.Node,
+  children: React.ReactNode;
-  onDismiss: Function,
+  onDismiss: Function;
-  forceOpts?: Object,
+  forceOpts?: Opts;
-|};
+};
 
 export default class Popover extends PureComponent<Props> {
-  _ref: ?Element;
+  _ref: Element | undefined;
 
   componentDidMount() {
     window.document.addEventListener('click', this.handleClick);
@@ -67,30 +72,25 @@ export default class Popover extends PureComponent<Props> {
     window.document.addEventListener('keydown', this.handleKeydown);
   }
 
-  handleClick = (e: SyntheticMouseEvent<>) => {
+  handleClick = (e: KeyboardEvent) => {
-    // $FlowFixMe
+    if (this._ref && !this._ref.contains(e.target as Node)) {
-    if (this._ref && !this._ref.contains(e.target)) {
       this.props.onDismiss();
     }
   };
 
-  handleKeydown = (e: SyntheticKeyboardEvent<>) => {
+  handleKeydown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       this.props.onDismiss();
     }
   };
 
-  _setRef = (ref: ?Element) => {
+  _setRef = (ref: Element | undefined) => {
     this._ref = ref;
   };
 
   render() {
     return [
-      <Anchor
+      <Anchor src="./anchor.svg" key="anchor" />,
-        src="./anchor.svg"
-        key="anchor"
-        opts={this.props.forceOpts || {}}
-      />,
       <PopoverContainer
         innerRef={this._setRef}
         key="popup"

src/ui/components/data-inspector/DataDescription.js

@@ -10,7 +10,7 @@ import {PureComponent} from 'react';
 import styled from '../../styled/index.js';
 import {SketchPicker} from 'react-color';
 import {Component, Fragment} from 'react';
-import Popover from '../Popover.js';
+import Popover from '../Popover.tsx';
 import {colors} from '../colors.tsx';
 import Input from '../Input.js';
 

src/ui/index.js

@@ -24,7 +24,7 @@ export {default as Glyph} from './components/Glyph.js';
 export {default as LoadingIndicator} from './components/LoadingIndicator.js';
 
 //
-export {default as Popover} from './components/Popover.js';
+export {default as Popover} from './components/Popover.tsx';
 
 // tables
 export type {