From 4eff1dc073a354e4fe7cebd32baea0eb6f40be68 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] Glyph Summary: _typescript_ Reviewed By: bnelo12 Differential Revision: D16830545 fbshipit-source-id: d2fbbe76e4aaf36d8558a2e793d782f184e1da54 --- src/ui/components/Button.js | 2 +- src/ui/components/ButtonGroupChain.js | 2 +- src/ui/components/{Glyph.js => Glyph.tsx} | 62 ++++++++++--------- src/ui/components/Panel.tsx | 2 +- .../components/elements-inspector/elements.js | 2 +- src/ui/components/searchable/Searchable.js | 2 +- src/ui/index.js | 2 +- 7 files changed, 39 insertions(+), 35 deletions(-) rename src/ui/components/{Glyph.js => Glyph.tsx} (63%) diff --git a/src/ui/components/Button.js b/src/ui/components/Button.js index 4eab3d50f..0654de532 100644 --- a/src/ui/components/Button.js +++ b/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'; diff --git a/src/ui/components/ButtonGroupChain.js b/src/ui/components/ButtonGroupChain.js index 0cbfa4789..c5a318bf9 100644 --- a/src/ui/components/ButtonGroupChain.js +++ b/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, diff --git a/src/ui/components/Glyph.js b/src/ui/components/Glyph.tsx similarity index 63% rename from src/ui/components/Glyph.js rename to src/ui/components/Glyph.tsx index 461152536..04c2193f8 100644 --- a/src/ui/components/Glyph.js +++ b/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; diff --git a/src/ui/components/Panel.tsx b/src/ui/components/Panel.tsx index 311c7f26c..220e273b2 100644 --- a/src/ui/components/Panel.tsx +++ b/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'; diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js index b0705cfff..57c2e9959 100644 --- a/src/ui/components/elements-inspector/elements.js +++ b/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'; diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js index 2b7534265..3b86590fa 100644 --- a/src/ui/components/searchable/Searchable.js +++ b/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'; diff --git a/src/ui/index.js b/src/ui/index.js index 5e13465f1..ff4539e6a 100644 --- a/src/ui/index.js +++ b/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';