scripts/core/ui/components/IconMix.tsx
import React from 'react';
import PropTypes from 'prop-types';
import {values} from 'lodash';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';
import classNames from 'classnames';
import {ICON_COLORS} from './constants';
import Icon from './Icon';
/**
* @ngdoc react
* @name IconMix
* @description Mixing two icons
*/
const IconMix: React.StatelessComponent<any> = ({icon, subIcon, big, doubleSize, className, tooltip, color}) => {
let iconElement;
if (subIcon) {
if (big) {
iconElement = (
<span className={classNames('icn-mix', className)}>
<Icon className="icn-mix__sub-icn" icon={subIcon} big={true} color={color} />
<span className="double-size-icn double-size-icn--light">
<Icon icon={icon} color={color} />
</span>
</span>
);
} else if (doubleSize) {
iconElement = (
<span className={classNames('icn-mix', 'icn-mix--2x', className)}>
<Icon icon={subIcon} className="icn-mix__sub-icn" color={color} />
<Icon icon={icon} doubleSize={doubleSize} big={big} color={color} />
</span>
);
} else {
iconElement = (
<span className={classNames('icn-mix', className)}>
<Icon icon={subIcon} className="icn-mix__sub-icn" color={color} />
<Icon icon={icon} doubleSize={doubleSize} big={big} color={color} />
</span>
);
}
} else if (big) {
iconElement = (
<div className={classNames('double-size-icn', 'double-size-icn--light', className)}>
<Icon icon={icon} color={color} />
</div>
);
} else {
iconElement = (
<Icon
className={className}
icon={icon}
doubleSize={doubleSize}
color={color}
/>
);
}
return tooltip
? (
<OverlayTrigger
overlay={
<Tooltip id="icon_list_item">{tooltip}</Tooltip>
}
>
{iconElement}
</OverlayTrigger>
)
: iconElement;
};
IconMix.propTypes = {
icon: PropTypes.string,
subIcon: PropTypes.string,
big: PropTypes.bool,
doubleSize: PropTypes.bool,
className: PropTypes.string,
tooltip: PropTypes.string,
color: PropTypes.oneOf(values(ICON_COLORS)),
};
IconMix.defaultProps = {
big: false,
doubleSize: false,
};
export default IconMix;