Flex components

Summary: _typescript_

Reviewed By: passy

Differential Revision: D16830540

fbshipit-source-id: 43741df5844a9f33930af8846cfcb2b28c9c6278

src/ui/components/Box.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import FlexBox from './FlexBox.js';
+import FlexBox from './FlexBox.tsx';
 import styled from '../styled/index.js';
 
 export default styled(FlexBox)({

src/ui/components/ContextMenu.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import FlexColumn from './FlexColumn.js';
+import FlexColumn from './FlexColumn.tsx';
 import PropTypes from 'prop-types';
 
 export type MenuTemplate = Array<MenuItemConstructorOptions>;

src/ui/components/FlexBox.tsx

@@ -5,12 +5,12 @@
  * @format
  */
 
-import View from './View.tsx';
-import styled from '../styled/index.js';
+import View from './View';
+import styled from 'react-emotion';
 
 type Props = {
   /** Flexbox's shrink property. Set to `0`, to disable shrinking. */
-  shrink: number,
+  shrink?: boolean;
 };
 
 /**

src/ui/components/FlexCenter.tsx

@@ -5,8 +5,8 @@
  * @format
  */
 
-import View from './View.tsx';
-import styled from '../styled/index.js';
+import View from './View';
+import styled from 'react-emotion';
 
 /**
  * A container displaying its children horizontally and vertically centered.

src/ui/components/FlexColumn.tsx

@@ -5,8 +5,8 @@
  * @format
  */
 
-import FlexBox from './FlexBox.js';
-import styled from '../styled/index.js';
+import FlexBox from './FlexBox';
+import styled from 'react-emotion';
 
 /**
  * A container displaying its children in a column

src/ui/components/FlexRow.tsx

@@ -5,8 +5,8 @@
  * @format
  */
 
-import FlexBox from './FlexBox.js';
-import styled from '../styled/index.js';
+import FlexBox from './FlexBox';
+import styled from 'react-emotion';
 
 /**
  * A container displaying its children in a row

src/ui/components/Panel.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import styled from 'react-emotion';
-import FlexColumn from './FlexColumn.js';
-import FlexBox from './FlexBox.js';
+import FlexColumn from './FlexColumn';
+import FlexBox from './FlexBox';
 import {colors} from './colors';
 import Glyph from './Glyph';
 

src/ui/components/Popover.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, {PureComponent} from 'react';
-import FlexColumn from './FlexColumn.js';
+import FlexColumn from './FlexColumn';
 import styled from 'react-emotion';
 import {colors} from './colors';
 

src/ui/components/Sidebar.tsx

@@ -6,7 +6,7 @@
  */
 
 import Interactive from './Interactive';
-import FlexColumn from './FlexColumn.js';
+import FlexColumn from './FlexColumn';
 import {colors} from './colors';
 import {Component} from 'react';
 import styled from 'react-emotion';

src/ui/components/Tabs.tsx

@@ -5,10 +5,10 @@
  * @format
  */
 
-import FlexColumn from './FlexColumn.js';
+import FlexColumn from './FlexColumn';
 import styled from 'react-emotion';
 import Orderable from './Orderable';
-import FlexRow from './FlexRow.js';
+import FlexRow from './FlexRow';
 import {colors} from './colors';
 import Tab, {Props as TabProps} from './Tab';
 import {WidthProperty} from 'csstype';

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

@@ -6,7 +6,7 @@
  */
 
 import {Component} from 'react';
-import FlexRow from '../FlexRow.js';
+import FlexRow from '../FlexRow.tsx';
 import {Elements, type DecorateRow} from './elements.js';
 import type {ContextMenuExtension} from 'flipper';
 

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

@@ -13,8 +13,8 @@ import type {
 import {reportInteraction} from '../../../utils/InteractionTracker.tsx';
 import ContextMenu from '../ContextMenu.js';
 import {PureComponent, type Element as ReactElement} from 'react';
-import FlexRow from '../FlexRow.js';
-import FlexColumn from '../FlexColumn.js';
+import FlexRow from '../FlexRow.tsx';
+import FlexColumn from '../FlexColumn.tsx';
 import Glyph from '../Glyph.tsx';
 import {colors} from '../colors.tsx';
 import Text from '../Text.tsx';

src/ui/components/searchable/Searchable.js

@@ -9,11 +9,11 @@ import type {Filter} from 'flipper';
 import type {TableColumns} from '../table/types';
 import {PureComponent} from 'react';
 import Toolbar from '../Toolbar.tsx';
-import FlexRow from '../FlexRow.js';
+import FlexRow from '../FlexRow.tsx';
 import Input from '../Input.tsx';
 import {colors} from '../colors.tsx';
 import Text from '../Text.tsx';
-import FlexBox from '../FlexBox.js';
+import FlexBox from '../FlexBox.tsx';
 import Glyph from '../Glyph.tsx';
 import FilterToken from './FilterToken.js';
 import styled from '../../styled/index.js';

src/ui/components/table/ManagedTable.js

@@ -26,7 +26,7 @@ import {clipboard} from 'electron';
 import TableHead from './TableHead.js';
 import TableRow from './TableRow.js';
 import ContextMenu from '../ContextMenu.js';
-import FlexColumn from '../FlexColumn.js';
+import FlexColumn from '../FlexColumn.tsx';
 import createPaste from '../../../fb-stubs/createPaste.tsx';
 import debounceRender from 'react-debounce-render';
 import debounce from 'lodash.debounce';

src/ui/components/table/ManagedTable_immutable.js

@@ -26,7 +26,7 @@ import {clipboard} from 'electron';
 import TableHead from './TableHead.js';
 import TableRow from './TableRow.js';
 import ContextMenu from '../ContextMenu.js';
-import FlexColumn from '../FlexColumn.js';
+import FlexColumn from '../FlexColumn.tsx';
 import createPaste from '../../../fb-stubs/createPaste.tsx';
 import debounceRender from 'react-debounce-render';
 import debounce from 'lodash.debounce';

src/ui/components/table/TableHead.js

@@ -21,7 +21,7 @@ import Interactive from '../Interactive.tsx';
 import styled from '../../styled/index.js';
 import {colors} from '../colors.tsx';
 
-import FlexRow from '../FlexRow.js';
+import FlexRow from '../FlexRow.tsx';
 
 import invariant from 'invariant';
 

src/ui/components/table/TableRow.js

@@ -15,7 +15,7 @@ import type {
 import React from 'react';
 import FilterRow from '../filter/FilterRow.js';
 import styled from '../../styled/index.js';
-import FlexRow from '../FlexRow.js';
+import FlexRow from '../FlexRow.tsx';
 import {colors} from '../colors.tsx';
 import {normaliseColumnWidth} from './utils.js';
 import {DEFAULT_ROW_HEIGHT} from './types';

src/ui/index.js

@@ -119,10 +119,10 @@ export {default as FocusableBox} from './components/FocusableBox.tsx';
 export {default as Sidebar} from './components/Sidebar.tsx';
 export {default as SidebarLabel} from './components/SidebarLabel.tsx';
 export {default as Box} from './components/Box.js';
-export {default as FlexBox} from './components/FlexBox.js';
-export {default as FlexRow} from './components/FlexRow.js';
-export {default as FlexColumn} from './components/FlexColumn.js';
-export {default as FlexCenter} from './components/FlexCenter.js';
+export {default as FlexBox} from './components/FlexBox.tsx';
+export {default as FlexRow} from './components/FlexRow.tsx';
+export {default as FlexColumn} from './components/FlexColumn.tsx';
+export {default as FlexCenter} from './components/FlexCenter.tsx';
 export {default as Toolbar, Spacer} from './components/Toolbar.tsx';
 export {default as Panel} from './components/Panel.tsx';
 export {default as Text} from './components/Text.tsx';