lbry-desktop/src/renderer/component/common/icon.jsx

74 lines
1.5 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
import * as FeatherIcons from 'react-feather';
import * as icons from 'constants/icons';
import Tooltip from 'component/common/tooltip';
2018-03-26 23:32:43 +02:00
const RED_COLOR = '#e2495e';
2018-05-21 22:30:00 +02:00
const PURPLE_COLOR = '#8165b0';
2018-03-26 23:32:43 +02:00
type Props = {
icon: string,
tooltip?: string, // tooltip direction
iconColor?: string,
2018-03-26 23:32:43 +02:00
};
class IconComponent extends React.PureComponent<Props> {
getTooltip = (icon: string) => {
switch (icon) {
case icons.FEATURED:
return __('Featured content. Earn rewards for watching.');
case icons.LOCAL:
return __('This file is downloaded.');
default:
return null;
}
};
getIconColor = (color: string) => {
switch (color) {
case 'red':
return RED_COLOR;
case 'purple':
return PURPLE_COLOR;
default:
return null;
}
};
2018-03-26 23:32:43 +02:00
render() {
const { icon, tooltip, iconColor } = this.props;
2018-03-26 23:32:43 +02:00
const Icon = FeatherIcons[icon];
if (!Icon) {
return null;
}
2018-03-26 23:32:43 +02:00
let color;
if (iconColor) {
color = this.getIconColor(iconColor);
2018-03-26 23:32:43 +02:00
}
let size = 14;
if (icon === icons.ARROW_LEFT || icon === icons.ARROW_RIGHT) {
size = 20;
2018-03-26 23:32:43 +02:00
}
let tooltipText;
if (tooltip) {
tooltipText = this.getTooltip(icon);
}
const inner = <Icon size={size} className="icon" color={color} />;
return tooltip ? (
<Tooltip icon body={tooltipText} direction={tooltip}>
{inner}
</Tooltip>
) : (
inner
);
2018-03-26 23:32:43 +02:00
}
}
export default IconComponent;