lbry-desktop/ui/component/common/icon.jsx

84 lines
2.1 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2018-11-26 02:21:25 +01:00
import * as ICONS from 'constants/icons';
2018-03-26 23:32:43 +02:00
import React from 'react';
import Tooltip from 'component/common/tooltip';
2019-04-01 01:04:01 +02:00
import classnames from 'classnames';
import { icons } from './icon-custom';
2018-03-26 23:32:43 +02:00
// It would be nice to standardize this somehow
// These are copied from `scss/vars`, can they both come from the same source?
2018-03-26 23:32:43 +02:00
const RED_COLOR = '#e2495e';
const GREEN_COLOR = '#44b098';
2018-09-12 18:42:15 +02:00
const BLUE_COLOR = '#49b2e2';
2018-03-26 23:32:43 +02:00
type Props = {
icon: string,
tooltip?: boolean,
2020-01-20 17:47:03 +01:00
customTooltipText?: string,
iconColor?: string,
2018-10-09 17:01:54 +02:00
size?: number,
2019-04-01 01:04:01 +02:00
className?: string,
2019-09-26 18:07:11 +02:00
sectionIcon?: boolean,
2018-03-26 23:32:43 +02:00
};
class IconComponent extends React.PureComponent<Props> {
getTooltip = (icon: string) => {
switch (icon) {
2018-11-26 02:21:25 +01:00
case ICONS.FEATURED:
return __('Featured content. Earn rewards for watching.');
2019-05-13 08:05:38 +02:00
case ICONS.DOWNLOAD:
2019-08-14 20:09:45 +02:00
return __('This file is in your library.');
2019-06-28 09:33:07 +02:00
case ICONS.SUBSCRIBE:
return __('You are subscribed to this channel.');
case ICONS.SETTINGS:
return __('Your settings.');
default:
return null;
}
};
getIconColor = (color: string) => {
switch (color) {
case 'red':
return RED_COLOR;
case 'green':
return GREEN_COLOR;
2018-09-12 18:42:15 +02:00
case 'blue':
return BLUE_COLOR;
default:
return undefined;
}
};
2018-03-26 23:32:43 +02:00
render() {
2020-01-20 17:47:03 +01:00
const { icon, tooltip, customTooltipText, iconColor, size, className, sectionIcon = false } = this.props;
const Icon = icons[this.props.icon];
2019-03-27 05:40:02 +01:00
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
}
const iconSize = size || 14;
2018-03-26 23:32:43 +02:00
let tooltipText;
if (tooltip) {
2020-01-20 17:47:03 +01:00
tooltipText = customTooltipText || this.getTooltip(icon);
}
2019-09-26 18:07:11 +02:00
const component = (
<Icon size={sectionIcon ? 20 : iconSize} className={classnames(`icon icon--${icon}`, className)} color={color} />
);
const inner = sectionIcon ? <span className="icon__wrapper">{component}</span> : component;
return tooltipText ? <Tooltip label={tooltipText}>{inner}</Tooltip> : inner;
2018-03-26 23:32:43 +02:00
}
}
export default IconComponent;