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,41 +6,45 @@
  */
 
 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 => ({
-  height: props.size,
-  verticalAlign: 'middle',
-  width: props.size,
-  backgroundColor: props.color,
-  display: 'inline-block',
-  maskImage: `url('${props.src}')`,
-  maskSize: '100% 100%',
-  WebkitMaskImage: `url('${props.src}')`,
-  WebkitMaskSize: '100% 100%',
-  flexShrink: 0,
-}));
+const ColoredIconCustom = styled('div')(
+  (props: {size: number; color: string; src: string}) => ({
+    height: props.size,
+    verticalAlign: 'middle',
+    width: props.size,
+    backgroundColor: props.color,
+    display: 'inline-block',
+    maskImage: `url('${props.src}')`,
+    maskSize: '100% 100%',
+    WebkitMaskImage: `url('${props.src}')`,
+    WebkitMaskSize: '100% 100%',
+    flexShrink: 0,
+  }),
+);
 
 function ColoredIcon(
-  props: {|
-    name: string,
-    src: string,
-    size?: number,
-    className?: string,
-    color?: string,
-  |},
-  context: {|
-    glyphColor?: string,
-  |},
+  props: {
+    name: string;
+    src: string;
+    size?: number;
+    className?: string;
+    color?: string;
+  },
+  context: {
+    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,
-  size?: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
-  variant?: 'filled' | 'outline',
-  className?: string,
-  color?: string,
+  name: string;
+  size?: IconSize;
+  variant?: 'filled' | 'outline';
+  className?: 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';