From c9260cca334f04104e9a65fd65637507d6acb2ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Tue, 20 Aug 2019 03:18:32 -0700 Subject: [PATCH] Flex components Summary: _typescript_ Reviewed By: passy Differential Revision: D16830540 fbshipit-source-id: 43741df5844a9f33930af8846cfcb2b28c9c6278 --- src/ui/components/Box.js | 2 +- src/ui/components/ContextMenu.js | 2 +- src/ui/components/{FlexBox.js => FlexBox.tsx} | 6 +++--- src/ui/components/{FlexCenter.js => FlexCenter.tsx} | 4 ++-- src/ui/components/{FlexColumn.js => FlexColumn.tsx} | 4 ++-- src/ui/components/{FlexRow.js => FlexRow.tsx} | 4 ++-- src/ui/components/Panel.tsx | 4 ++-- src/ui/components/Popover.tsx | 2 +- src/ui/components/Sidebar.tsx | 2 +- src/ui/components/Tabs.tsx | 4 ++-- src/ui/components/elements-inspector/ElementsInspector.js | 2 +- src/ui/components/elements-inspector/elements.js | 4 ++-- src/ui/components/searchable/Searchable.js | 4 ++-- src/ui/components/table/ManagedTable.js | 2 +- src/ui/components/table/ManagedTable_immutable.js | 2 +- src/ui/components/table/TableHead.js | 2 +- src/ui/components/table/TableRow.js | 2 +- src/ui/index.js | 8 ++++---- 18 files changed, 30 insertions(+), 30 deletions(-) rename src/ui/components/{FlexBox.js => FlexBox.tsx} (83%) rename src/ui/components/{FlexCenter.js => FlexCenter.tsx} (83%) rename src/ui/components/{FlexColumn.js => FlexColumn.tsx} (79%) rename src/ui/components/{FlexRow.js => FlexRow.tsx} (79%) diff --git a/src/ui/components/Box.js b/src/ui/components/Box.js index 6009eced1..64b5b79e3 100644 --- a/src/ui/components/Box.js +++ b/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)({ diff --git a/src/ui/components/ContextMenu.js b/src/ui/components/ContextMenu.js index 88dceb743..7e7b876d7 100644 --- a/src/ui/components/ContextMenu.js +++ b/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; diff --git a/src/ui/components/FlexBox.js b/src/ui/components/FlexBox.tsx similarity index 83% rename from src/ui/components/FlexBox.js rename to src/ui/components/FlexBox.tsx index 0d00933e1..52951af88 100644 --- a/src/ui/components/FlexBox.js +++ b/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; }; /** diff --git a/src/ui/components/FlexCenter.js b/src/ui/components/FlexCenter.tsx similarity index 83% rename from src/ui/components/FlexCenter.js rename to src/ui/components/FlexCenter.tsx index 285c34167..170e7a1ed 100644 --- a/src/ui/components/FlexCenter.js +++ b/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. diff --git a/src/ui/components/FlexColumn.js b/src/ui/components/FlexColumn.tsx similarity index 79% rename from src/ui/components/FlexColumn.js rename to src/ui/components/FlexColumn.tsx index b9add6c77..dec51cd45 100644 --- a/src/ui/components/FlexColumn.js +++ b/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 diff --git a/src/ui/components/FlexRow.js b/src/ui/components/FlexRow.tsx similarity index 79% rename from src/ui/components/FlexRow.js rename to src/ui/components/FlexRow.tsx index d35f418a7..96ff0994d 100644 --- a/src/ui/components/FlexRow.js +++ b/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 diff --git a/src/ui/components/Panel.tsx b/src/ui/components/Panel.tsx index 220e273b2..7920b6bf1 100644 --- a/src/ui/components/Panel.tsx +++ b/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'; diff --git a/src/ui/components/Popover.tsx b/src/ui/components/Popover.tsx index f326354ca..bd0824cef 100644 --- a/src/ui/components/Popover.tsx +++ b/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'; diff --git a/src/ui/components/Sidebar.tsx b/src/ui/components/Sidebar.tsx index 79aa17155..4de96ba60 100644 --- a/src/ui/components/Sidebar.tsx +++ b/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'; diff --git a/src/ui/components/Tabs.tsx b/src/ui/components/Tabs.tsx index 44e2ea113..6739004c9 100644 --- a/src/ui/components/Tabs.tsx +++ b/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'; diff --git a/src/ui/components/elements-inspector/ElementsInspector.js b/src/ui/components/elements-inspector/ElementsInspector.js index e7f3a8271..4f4cda8d2 100644 --- a/src/ui/components/elements-inspector/ElementsInspector.js +++ b/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'; diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js index 57c2e9959..3a1b0ef88 100644 --- a/src/ui/components/elements-inspector/elements.js +++ b/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'; diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js index 3b86590fa..d0858830a 100644 --- a/src/ui/components/searchable/Searchable.js +++ b/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'; diff --git a/src/ui/components/table/ManagedTable.js b/src/ui/components/table/ManagedTable.js index 52cfb4c27..f7b5f53fb 100644 --- a/src/ui/components/table/ManagedTable.js +++ b/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'; diff --git a/src/ui/components/table/ManagedTable_immutable.js b/src/ui/components/table/ManagedTable_immutable.js index 54e78859c..fc308f221 100644 --- a/src/ui/components/table/ManagedTable_immutable.js +++ b/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'; diff --git a/src/ui/components/table/TableHead.js b/src/ui/components/table/TableHead.js index 4efc09c33..b708582e8 100644 --- a/src/ui/components/table/TableHead.js +++ b/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'; diff --git a/src/ui/components/table/TableRow.js b/src/ui/components/table/TableRow.js index 279d75712..72947ecbb 100644 --- a/src/ui/components/table/TableRow.js +++ b/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'; diff --git a/src/ui/index.js b/src/ui/index.js index fa1f3847e..2775561d9 100644 --- a/src/ui/index.js +++ b/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';