Glyph

Summary: _typescript_

Reviewed By: bnelo12

Differential Revision: D16830545

fbshipit-source-id: d2fbbe76e4aaf36d8558a2e793d782f184e1da54

src/ui/components/Button.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import Glyph from './Glyph.js';
+import Glyph from './Glyph.tsx';
 import PropTypes from 'prop-types';
 import electron from 'electron';
 import styled from '../styled/index.js';

src/ui/components/ButtonGroupChain.js

@@ -8,7 +8,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
 import styled from '../styled/index.js';
-import Glyph from './Glyph.js';
+import Glyph from './Glyph.tsx';
 
 const IconContainer = styled('div')({
   width: 0,

src/ui/components/Glyph.tsx

@@ -6,18 +6,21 @@
  */
 
 import React from 'react';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 import PropTypes from 'prop-types';
 import {getIconURL} from '../../utils/icons.js';
 
-const ColoredIconBlack = styled('img')(({size}) => ({
+export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32;
+
+const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
   height: size,
   verticalAlign: 'middle',
   width: size,
   flexShrink: 0,
 }));
 
-const ColoredIconCustom = styled('div')(props => ({
+const ColoredIconCustom = styled('div')(
+  (props: {size: number; color: string; src: string}) => ({
     height: props.size,
     verticalAlign: 'middle',
     width: props.size,
@@ -28,19 +31,20 @@ const ColoredIconCustom = styled('div')(props => ({
     WebkitMaskImage: `url('${props.src}')`,
     WebkitMaskSize: '100% 100%',
     flexShrink: 0,
-}));
+  }),
+);
 
 function ColoredIcon(
-  props: {|
+  props: {
-    name: string,
+    name: string;
-    src: string,
+    src: string;
-    size?: number,
+    size?: number;
-    className?: string,
+    className?: string;
-    color?: string,
+    color?: string;
-  |},
+  },
-  context: {|
+  context: {
-    glyphColor?: string,
+    glyphColor?: string;
-  |},
+  },
 ) {
   const {color = context.glyphColor, name, size = 16, src} = props;
 
@@ -76,11 +80,11 @@ ColoredIcon.contextTypes = {
 };
 
 export default class Glyph extends React.Component<{
-  name: string,
+  name: string;
-  size?: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
+  size?: IconSize;
-  variant?: 'filled' | 'outline',
+  variant?: 'filled' | 'outline';
-  className?: string,
+  className?: string;
-  color?: string,
+  color?: string;
 }> {
   render() {
     const {name, size, variant, color, className} = this.props;

src/ui/components/Panel.tsx

@@ -10,7 +10,7 @@ import styled from 'react-emotion';
 import FlexColumn from './FlexColumn.js';
 import FlexBox from './FlexBox.js';
 import {colors} from './colors';
-import Glyph from './Glyph.js';
+import Glyph from './Glyph';
 
 const BORDER = '1px solid #dddfe2';
 

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

@@ -15,7 +15,7 @@ import ContextMenu from '../ContextMenu.js';
 import {PureComponent, type Element as ReactElement} from 'react';
 import FlexRow from '../FlexRow.js';
 import FlexColumn from '../FlexColumn.js';
-import Glyph from '../Glyph.js';
+import Glyph from '../Glyph.tsx';
 import {colors} from '../colors.tsx';
 import Text from '../Text.tsx';
 import styled from '../../styled/index.js';

src/ui/components/searchable/Searchable.js

@@ -14,7 +14,7 @@ import Input from '../Input.tsx';
 import {colors} from '../colors.tsx';
 import Text from '../Text.tsx';
 import FlexBox from '../FlexBox.js';
-import Glyph from '../Glyph.js';
+import Glyph from '../Glyph.tsx';
 import FilterToken from './FilterToken.js';
 import styled from '../../styled/index.js';
 import debounce from 'lodash.debounce';

src/ui/index.js

@@ -18,7 +18,7 @@ export {default as ButtonGroupChain} from './components/ButtonGroupChain.js';
 export {colors, darkColors, brandColors} from './components/colors.tsx';
 
 //
-export {default as Glyph} from './components/Glyph.js';
+export {default as Glyph} from './components/Glyph.tsx';
 
 //
 export {default as LoadingIndicator} from './components/LoadingIndicator.tsx';