9970c50daf
Summary: Adding type declaration for glyphs Reviewed By: passy Differential Revision: D17096295 fbshipit-source-id: e8994e0c81c3668fa909479dbaea613ec2b86dc4
107 lines
2.2 KiB
TypeScript
107 lines
2.2 KiB
TypeScript
/**
|
|
* 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 React from 'react';
|
|
import styled from 'react-emotion';
|
|
import PropTypes from 'prop-types';
|
|
import {getIconURL} from '../../utils/icons.js';
|
|
|
|
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: {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;
|
|
},
|
|
) {
|
|
const {color = context.glyphColor, name, size = 16, src} = props;
|
|
|
|
const isBlack =
|
|
color == null ||
|
|
color === '#000' ||
|
|
color === 'black' ||
|
|
color === '#000000';
|
|
|
|
if (isBlack) {
|
|
return (
|
|
<ColoredIconBlack
|
|
alt={name}
|
|
src={src}
|
|
size={size}
|
|
className={props.className}
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<ColoredIconCustom
|
|
color={color}
|
|
size={size}
|
|
src={src}
|
|
className={props.className}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
ColoredIcon.contextTypes = {
|
|
glyphColor: PropTypes.string,
|
|
};
|
|
|
|
export default class Glyph extends React.Component<{
|
|
name: string;
|
|
size?: IconSize;
|
|
variant?: 'filled' | 'outline';
|
|
className?: string;
|
|
color?: string;
|
|
}> {
|
|
render() {
|
|
const {name, size, variant, color, className} = this.props;
|
|
|
|
return (
|
|
<ColoredIcon
|
|
name={name}
|
|
className={className}
|
|
color={color}
|
|
size={size}
|
|
src={getIconURL(
|
|
variant === 'outline' ? `${name}-outline` : name,
|
|
size,
|
|
typeof window !== 'undefined' ? window.devicePixelRatio : 1,
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
}
|