7d2c7a61f1
Close #1866
Squashed commit of the following:
commit 3347832caa33b01a0155b212987f02dc4824ab08
Merge: 7766502d d794b11e
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Jul 17 15:12:45 2020 +0300
Merge branch 'master' into fix/1866
commit 7766502d4a904ad0a4d240481f7eabf0e25cfb62
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Jul 17 12:16:59 2020 +0300
Fix icon color classes
commit 90191bf74b5eb1855c733c226f7acb4e906c7ad9
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Jul 17 11:46:22 2020 +0300
Use logs icons, use pointer cursor, fix review markup formatting
commit 0ba50fcd956101f5054ce38c2329df3e8abdfcd2
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Jul 16 18:05:30 2020 +0300
Use help cursor on tooltips
commit bf4e14afe69f874d29be73d8cd4cfbe240ca0304
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Jul 16 17:41:47 2020 +0300
Use tooltip in logs, rename tooltip classes
commit 00568fdc8e8484c5bae67c51ee8189a3a558e219
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Jul 16 17:01:49 2020 +0300
- client: Use the same tooltip style everywhere
63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Trans } from 'react-i18next';
|
|
import classNames from 'classnames';
|
|
import { processContent } from '../../../helpers/helpers';
|
|
import Tooltip from '../../ui/Tooltip';
|
|
import 'react-popper-tooltip/dist/styles.css';
|
|
import './IconTooltip.css';
|
|
|
|
const getIconTooltip = ({
|
|
className,
|
|
contentItemClass,
|
|
columnClass,
|
|
canShowTooltip = true,
|
|
xlinkHref,
|
|
title,
|
|
placement,
|
|
tooltipClass,
|
|
content,
|
|
renderContent = content ? React.Children.map(
|
|
processContent(content),
|
|
(item, idx) => <div key={idx} className={contentItemClass}>
|
|
<Trans>{item || '—'}</Trans>
|
|
</div>,
|
|
) : null,
|
|
}) => {
|
|
const tooltipContent = <>
|
|
{title
|
|
&& <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
|
|
<div className={classNames(columnClass)}>{renderContent}</div>
|
|
</>;
|
|
|
|
const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
|
|
|
|
return <Tooltip
|
|
className={tooltipClassName}
|
|
content={tooltipContent}
|
|
placement={placement}
|
|
>
|
|
{xlinkHref && <svg className={className}>
|
|
<use xlinkHref={`#${xlinkHref}`} />
|
|
</svg>}
|
|
</Tooltip>;
|
|
};
|
|
|
|
getIconTooltip.propTypes = {
|
|
className: PropTypes.string,
|
|
contentItemClass: PropTypes.string,
|
|
columnClass: PropTypes.string,
|
|
tooltipClass: PropTypes.string,
|
|
title: PropTypes.string,
|
|
placement: PropTypes.string,
|
|
canShowTooltip: PropTypes.string,
|
|
xlinkHref: PropTypes.string,
|
|
content: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.array,
|
|
]),
|
|
renderContent: PropTypes.arrayOf(PropTypes.element),
|
|
};
|
|
|
|
export default getIconTooltip;
|