diff --git a/src/init.tsx b/src/init.tsx index 5058b58e1..e3ddf10f3 100644 --- a/src/init.tsx +++ b/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'; diff --git a/src/ui/components/ContextMenu.js b/src/ui/components/ContextMenu.tsx similarity index 85% rename from src/ui/components/ContextMenu.js rename to src/ui/components/ContextMenu.tsx index 7e7b876d7..466a5cc17 100644 --- a/src/ui/components/ContextMenu.js +++ b/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; 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 | string, + component: React.ComponentType | string; }; /** @@ -38,7 +39,7 @@ export default class ContextMenu extends React.Component { 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 { render() { const { - items: _itesm, + items: _items, buildItems: _buildItems, component, ...props diff --git a/src/ui/components/ContextMenuProvider.js b/src/ui/components/ContextMenuProvider.tsx similarity index 79% rename from src/ui/components/ContextMenuProvider.js rename to src/ui/components/ContextMenuProvider.tsx index 1f8c5e7f2..d1edee01f 100644 --- a/src/ui/components/ContextMenuProvider.js +++ b/src/ui/components/ContextMenuProvider.tsx @@ -6,10 +6,10 @@ */ import {Component} from 'react'; -import styled from '../styled/index.js'; -import electron from 'electron'; - -const PropTypes = require('prop-types'); +import styled from 'react-emotion'; +import electron, {MenuItemConstructorOptions} from 'electron'; +import React from 'react'; +import PropTypes from 'prop-types'; type MenuTemplate = Array; @@ -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<{| - children: React$Node, -|}> { +export default class ContextMenuProvider extends Component<{ + 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}); }; diff --git a/src/ui/components/data-inspector/DataInspector.js b/src/ui/components/data-inspector/DataInspector.js index e453b6609..cef9a6084 100644 --- a/src/ui/components/data-inspector/DataInspector.js +++ b/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'; diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js index 3a1b0ef88..b981c694c 100644 --- a/src/ui/components/elements-inspector/elements.js +++ b/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'; diff --git a/src/ui/components/filter/FilterRow.js b/src/ui/components/filter/FilterRow.js index e1df8647d..08abe231a 100644 --- a/src/ui/components/filter/FilterRow.js +++ b/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'; diff --git a/src/ui/components/table/ManagedTable.js b/src/ui/components/table/ManagedTable.js index f7b5f53fb..36a9dd782 100644 --- a/src/ui/components/table/ManagedTable.js +++ b/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'; diff --git a/src/ui/components/table/ManagedTable_immutable.js b/src/ui/components/table/ManagedTable_immutable.js index fc308f221..d45459668 100644 --- a/src/ui/components/table/ManagedTable_immutable.js +++ b/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'; diff --git a/src/ui/components/table/TableHead.js b/src/ui/components/table/TableHead.js index b708582e8..45c5d4b86 100644 --- a/src/ui/components/table/TableHead.js +++ b/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'; diff --git a/src/ui/index.js b/src/ui/index.js index 20b572a78..20fb06950 100644 --- a/src/ui/index.js +++ b/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'; -export {default as ContextMenu} from './components/ContextMenu.js'; +} from './components/ContextMenuProvider.tsx'; +export {default as ContextMenu} from './components/ContextMenu.tsx'; // file export type {FileListFile, FileListFiles} from './components/FileList.tsx';