ContextMenu components

Summary: _typescript_

Reviewed By: passy

Differential Revision: D16830535

fbshipit-source-id: 77e36626f722c64ab85ee6e176d0ba05a6849a99

src/init.tsx

@@ -8,7 +8,7 @@
 import {Provider} from 'react-redux';
 import ReactDOM from 'react-dom';
 import {useState, useEffect} from 'react';
-import ContextMenuProvider from './ui/components/ContextMenuProvider.js';
+import ContextMenuProvider from './ui/components/ContextMenuProvider';
 import GK from './fb-stubs/GK';
 import {init as initLogger} from './fb-stubs/Logger';
 import App from './App';

src/ui/components/ContextMenu.tsx

@@ -6,20 +6,21 @@
  */
 
 import * as React from 'react';
-import FlexColumn from './FlexColumn.tsx';
+import FlexColumn from './FlexColumn';
 import PropTypes from 'prop-types';
+import {MenuItemConstructorOptions} from 'electron';
 
 export type MenuTemplate = Array<MenuItemConstructorOptions>;
 
 type Props = {
   /** List of items in the context menu. Used for static menus. */
-  items?: MenuTemplate,
+  items?: MenuTemplate;
   /** Function to generate the menu. Called right before the menu is showed. Used for dynamic menus. */
-  buildItems?: () => MenuTemplate,
+  buildItems?: () => MenuTemplate;
   /** Nodes that should have a context menu */
-  children: React$Node,
+  children: React.ReactNode;
   /** The component that is used to wrap the children. Defaults to `FlexColumn`. */
-  component: React.ComponentType<any> | string,
+  component: React.ComponentType<any> | string;
 };
 
 /**
@@ -38,7 +39,7 @@ export default class ContextMenu extends React.Component<Props> {
     appendToContextMenu: PropTypes.func,
   };
 
-  onContextMenu = (e: SyntheticMouseEvent<>) => {
+  onContextMenu = () => {
     if (typeof this.context.appendToContextMenu === 'function') {
       if (this.props.items != null) {
         this.context.appendToContextMenu(this.props.items);
@@ -50,7 +51,7 @@ export default class ContextMenu extends React.Component<Props> {
 
   render() {
     const {
-      items: _itesm,
+      items: _items,
       buildItems: _buildItems,
       component,
       ...props

src/ui/components/ContextMenuProvider.tsx

@@ -6,10 +6,10 @@
  */
 
 import {Component} from 'react';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
-import electron from 'electron';
+import electron, {MenuItemConstructorOptions} from 'electron';
-
+import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
 
 type MenuTemplate = Array<MenuItemConstructorOptions>;
 
@@ -21,9 +21,9 @@ const Container = styled('div')({
  * Flipper's root is already wrapped with this component, so plugins should not
  * need to use this. ContextMenu is what you probably want to use.
  */
-export default class ContextMenuProvider extends Component<{|
+export default class ContextMenuProvider extends Component<{
-  children: React$Node,
+  children: React.ReactNode;
-|}> {
+}> {
   static childContextTypes = {
     appendToContextMenu: PropTypes.func,
   };
@@ -41,6 +41,7 @@ export default class ContextMenuProvider extends Component<{|
   onContextMenu = () => {
     const menu = electron.remote.Menu.buildFromTemplate(this._menuTemplate);
     this._menuTemplate = [];
+    // @ts-ignore: async is private electron API
     menu.popup({window: electron.remote.getCurrentWindow(), async: true});
   };
 

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

@@ -7,7 +7,7 @@
 
 import DataDescription from './DataDescription.js';
 import {Component} from 'react';
-import ContextMenu from '../ContextMenu.js';
+import ContextMenu from '../ContextMenu.tsx';
 import Tooltip from '../Tooltip.tsx';
 import styled from '../../styled/index.js';
 import DataPreview from './DataPreview.js';

src/ui/components/elements-inspector/elements.js

@@ -11,7 +11,7 @@ import type {
   ElementSearchResultSet,
 } from './ElementsInspector.js';
 import {reportInteraction} from '../../../utils/InteractionTracker.tsx';
-import ContextMenu from '../ContextMenu.js';
+import ContextMenu from '../ContextMenu.tsx';
 import {PureComponent, type Element as ReactElement} from 'react';
 import FlexRow from '../FlexRow.tsx';
 import FlexColumn from '../FlexColumn.tsx';

src/ui/components/filter/FilterRow.js

@@ -7,7 +7,7 @@
 
 import type {Filter} from './types.js';
 import {PureComponent} from 'react';
-import ContextMenu from '../ContextMenu.js';
+import ContextMenu from '../ContextMenu.tsx';
 import textContent from '../../../utils/textContent.tsx';
 import styled from '../../styled/index.js';
 import {colors} from '../colors.tsx';

src/ui/components/table/ManagedTable.js

@@ -16,7 +16,7 @@ import type {
   TableOnAddFilter,
 } from './types.js';
 
-import type {MenuTemplate} from '../ContextMenu.js';
+import type {MenuTemplate} from '../ContextMenu.tsx';
 
 import React from 'react';
 import styled from '../../styled/index.js';
@@ -25,7 +25,7 @@ import {VariableSizeList as List} from 'react-window';
 import {clipboard} from 'electron';
 import TableHead from './TableHead.js';
 import TableRow from './TableRow.js';
-import ContextMenu from '../ContextMenu.js';
+import ContextMenu from '../ContextMenu.tsx';
 import FlexColumn from '../FlexColumn.tsx';
 import createPaste from '../../../fb-stubs/createPaste.tsx';
 import debounceRender from 'react-debounce-render';

src/ui/components/table/ManagedTable_immutable.js

@@ -16,7 +16,7 @@ import type {
   TableOnAddFilter,
 } from './types.js';
 
-import type {MenuTemplate} from '../ContextMenu.js';
+import type {MenuTemplate} from '../ContextMenu.tsx';
 
 import React from 'react';
 import styled from '../../styled/index.js';
@@ -25,7 +25,7 @@ import {VariableSizeList as List} from 'react-window';
 import {clipboard} from 'electron';
 import TableHead from './TableHead.js';
 import TableRow from './TableRow.js';
-import ContextMenu from '../ContextMenu.js';
+import ContextMenu from '../ContextMenu.tsx';
 import FlexColumn from '../FlexColumn.tsx';
 import createPaste from '../../../fb-stubs/createPaste.tsx';
 import debounceRender from 'react-debounce-render';

src/ui/components/table/TableHead.js

@@ -16,7 +16,7 @@ import type {
 
 import {normaliseColumnWidth, isPercentage} from './utils.js';
 import {PureComponent} from 'react';
-import ContextMenu from '../ContextMenu.js';
+import ContextMenu from '../ContextMenu.tsx';
 import Interactive from '../Interactive.tsx';
 import styled from '../../styled/index.js';
 import {colors} from '../colors.tsx';

src/ui/index.js

@@ -96,8 +96,8 @@ export {Component, PureComponent} from 'react';
 // context menus and dropdowns
 export {
   default as ContextMenuProvider,
-} from './components/ContextMenuProvider.js';
+} from './components/ContextMenuProvider.tsx';
-export {default as ContextMenu} from './components/ContextMenu.js';
+export {default as ContextMenu} from './components/ContextMenu.tsx';
 
 // file
 export type {FileListFile, FileListFiles} from './components/FileList.tsx';