From b48e2bcf71191aefff0fe0361951f56997e5d012 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] Text Summary: _typescript_ Reviewed By: priteshrnandgaonkar Differential Revision: D16830059 fbshipit-source-id: 6dab58d19d679d748f82543a3a4b2424adff6052 --- src/ui/components/Text.js | 35 ------------ src/ui/components/Text.tsx | 56 +++++++++++++++++++ src/ui/components/ToggleSwitch.js | 2 +- .../components/elements-inspector/elements.js | 2 +- src/ui/components/searchable/FilterToken.js | 2 +- src/ui/components/searchable/Searchable.js | 2 +- .../table/TypeBasedValueRenderer.js | 2 +- src/ui/index.js | 2 +- 8 files changed, 62 insertions(+), 41 deletions(-) delete mode 100644 src/ui/components/Text.js create mode 100644 src/ui/components/Text.tsx diff --git a/src/ui/components/Text.js b/src/ui/components/Text.js deleted file mode 100644 index 3ae957413..000000000 --- a/src/ui/components/Text.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright 2018-present Facebook. - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * @format - */ - -import styled from '../styled/index.js'; - -/** - * A Text component. - */ -const Text = styled('span')(props => ({ - color: props.color ? props.color : 'inherit', - display: 'inline', - fontWeight: props.bold ? 'bold' : 'inherit', - fontStyle: props.italic ? 'italic' : 'normal', - textAlign: props.align || 'left', - fontSize: props.size == null && props.code ? 12 : props.size, - fontFamily: props.code - ? 'SF Mono, Monaco, Andale Mono, monospace' - : props.family, - overflow: props.code ? 'auto' : 'visible', - userSelect: - props.selectable || (props.code && typeof props.selectable === 'undefined') - ? 'text' - : 'none', - wordWrap: props.code ? 'break-word' : props.wordWrap, - whiteSpace: - props.code && typeof props.whiteSpace === 'undefined' - ? 'pre' - : props.whiteSpace, -})); - -export default Text; diff --git a/src/ui/components/Text.tsx b/src/ui/components/Text.tsx new file mode 100644 index 000000000..ecf338b89 --- /dev/null +++ b/src/ui/components/Text.tsx @@ -0,0 +1,56 @@ +/** + * Copyright 2018-present Facebook. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * @format + */ + +import styled from 'react-emotion'; +import { + ColorProperty, + FontSizeProperty, + TextAlignProperty, + FontFamilyProperty, + WhiteSpaceProperty, +} from 'csstype'; + +/** + * A Text component. + */ +const Text = styled('span')( + (props: { + color?: ColorProperty; + bold?: boolean; + italic?: boolean; + align?: TextAlignProperty; + size?: FontSizeProperty; + code?: boolean; + family?: FontFamilyProperty; + selectable?: boolean; + wordWrap?; + whiteSpace?: WhiteSpaceProperty; + }) => ({ + color: props.color ? props.color : 'inherit', + display: 'inline', + fontWeight: props.bold ? 'bold' : 'inherit', + fontStyle: props.italic ? 'italic' : 'normal', + textAlign: props.align || 'left', + fontSize: props.size == null && props.code ? 12 : props.size, + fontFamily: props.code + ? 'SF Mono, Monaco, Andale Mono, monospace' + : props.family, + overflow: props.code ? 'auto' : 'visible', + userSelect: + props.selectable || + (props.code && typeof props.selectable === 'undefined') + ? 'text' + : 'none', + wordWrap: props.code ? 'break-word' : props.wordWrap, + whiteSpace: + props.code && typeof props.whiteSpace === 'undefined' + ? 'pre' + : props.whiteSpace, + }), +); + +export default Text; diff --git a/src/ui/components/ToggleSwitch.js b/src/ui/components/ToggleSwitch.js index 0cf94f596..e1d776430 100644 --- a/src/ui/components/ToggleSwitch.js +++ b/src/ui/components/ToggleSwitch.js @@ -8,7 +8,7 @@ import React from 'react'; import styled from '../styled/index.js'; import {colors} from './colors.tsx'; -import Text from './Text'; +import Text from './Text.tsx'; export const StyledButton = styled('div')(props => ({ cursor: 'pointer', diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js index 47acb5ccf..b0705cfff 100644 --- a/src/ui/components/elements-inspector/elements.js +++ b/src/ui/components/elements-inspector/elements.js @@ -17,7 +17,7 @@ import FlexRow from '../FlexRow.js'; import FlexColumn from '../FlexColumn.js'; import Glyph from '../Glyph.js'; import {colors} from '../colors.tsx'; -import Text from '../Text.js'; +import Text from '../Text.tsx'; import styled from '../../styled/index.js'; import {clipboard} from 'electron'; diff --git a/src/ui/components/searchable/FilterToken.js b/src/ui/components/searchable/FilterToken.js index 903a956bd..e35713e8d 100644 --- a/src/ui/components/searchable/FilterToken.js +++ b/src/ui/components/searchable/FilterToken.js @@ -7,7 +7,7 @@ import type {Filter} from 'flipper'; import {PureComponent} from 'react'; -import Text from '../Text.js'; +import Text from '../Text.tsx'; import styled from '../../styled/index.js'; import {findDOMNode} from 'react-dom'; import {colors} from '../colors.tsx'; diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js index ece0b5fd3..f4c127001 100644 --- a/src/ui/components/searchable/Searchable.js +++ b/src/ui/components/searchable/Searchable.js @@ -12,7 +12,7 @@ import Toolbar from '../Toolbar.js'; import FlexRow from '../FlexRow.js'; import Input from '../Input.js'; import {colors} from '../colors.tsx'; -import Text from '../Text.js'; +import Text from '../Text.tsx'; import FlexBox from '../FlexBox.js'; import Glyph from '../Glyph.js'; import FilterToken from './FilterToken.js'; diff --git a/src/ui/components/table/TypeBasedValueRenderer.js b/src/ui/components/table/TypeBasedValueRenderer.js index e90b07aeb..d6ae66557 100644 --- a/src/ui/components/table/TypeBasedValueRenderer.js +++ b/src/ui/components/table/TypeBasedValueRenderer.js @@ -6,7 +6,7 @@ */ import {default as styled} from 'react-emotion'; import {colors} from '../colors.tsx'; -import {default as Text} from '../Text'; +import {default as Text} from '../Text.tsx'; export type Value = | { diff --git a/src/ui/index.js b/src/ui/index.js index 676025013..d9ea90586 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -125,7 +125,7 @@ export {default as FlexColumn} from './components/FlexColumn.js'; export {default as FlexCenter} from './components/FlexCenter.js'; export {default as Toolbar, Spacer} from './components/Toolbar.js'; export {default as Panel} from './components/Panel.tsx'; -export {default as Text} from './components/Text.js'; +export {default as Text} from './components/Text.tsx'; export {default as TextParagraph} from './components/TextParagraph.js'; export {default as Link} from './components/Link.js'; export {default as PathBreadcrumbs} from './components/PathBreadcrumbs.tsx';