Text

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16830059

fbshipit-source-id: 6dab58d19d679d748f82543a3a4b2424adff6052

src/ui/components/Text.js

@@ -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;

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<number>;
+    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;

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',

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';
 

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';

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';

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 =
   | {

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';