portainer/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx

84 lines
1.9 KiB
TypeScript

import ReactTooltip from 'react-tooltip';
import clsx from 'clsx';
import _ from 'lodash';
import ReactDOMServer from 'react-dom/server';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
import styles from './TooltipWithChildren.module.css';
type Position = 'top' | 'right' | 'bottom' | 'left';
export interface Props {
position?: Position;
message: string;
className?: string;
children: React.ReactNode;
heading?: string;
BEFeatureID?: FeatureId;
}
export function TooltipWithChildren({
message,
position = 'bottom',
className,
children,
heading,
BEFeatureID,
}: Props) {
const id = _.uniqueId('tooltip-');
const { url, limitedToBE } = BEFeatureID
? getFeatureDetails(BEFeatureID)
: { url: '', limitedToBE: false };
const messageHTML = (
<div className={styles.tooltipContainer}>
<div
className={clsx(
'w-full mb-2 inline-flex justify-between',
styles.tooltipHeading
)}
>
{heading && <span>{heading}</span>}
{BEFeatureID && limitedToBE && (
<a
href={url}
target="_blank"
rel="noreferrer"
className={styles.tooltipBeteaser}
>
Business Edition Only
</a>
)}
</div>
<div>{message}</div>
</div>
);
return (
<span
data-html
data-multiline
data-tip={ReactDOMServer.renderToString(messageHTML)}
data-for={id}
className={clsx(styles.icon, 'inline-flex text-base')}
>
{children}
<ReactTooltip
id={id}
multiline
type="info"
place={position}
effect="solid"
className={clsx(styles.tooltip, className)}
arrowColor="var(--bg-tooltip-color)"
delayHide={400}
clickable
/>
</span>
);
}