c540fe5529
Summary: Adding a style for `primary` buttons Reviewed By: priteshrnandgaonkar Differential Revision: D13417284 fbshipit-source-id: 8ef46092d79ee0f9d39167aa2662a84caca9aa11
99 lines
2.0 KiB
JavaScript
99 lines
2.0 KiB
JavaScript
/**
|
|
* 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 '../styled/index.js';
|
|
const PropTypes = require('prop-types');
|
|
import {getIconUrl} from '../../utils/icons.js';
|
|
|
|
const ColoredIconBlack = styled('img')(({size}) => ({
|
|
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,
|
|
}));
|
|
|
|
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?: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
|
|
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(name, size, variant)}
|
|
/>
|
|
);
|
|
}
|
|
}
|