mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Force theming on tooltips for calling

Browse source
This commit is contained in:
Josh Perez 2020-11-19 18:38:59 -05:00 • committed by Josh Perez
parent 6a6f8e28ce
commit 8ff0ca9593
6 changed files with 60 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

41
ts/components/Tooltip.tsx
View file

@ -11,10 +11,17 @@ export enum TooltipPlacement {
Left = 'left',
}
export enum TooltipTheme {
System = 'system',
Light = 'light',
Dark = 'dark',
}
export type PropsType = {
content: string | JSX.Element;
direction?: TooltipPlacement;
sticky?: boolean;
theme?: TooltipTheme;
};
export const Tooltip: React.FC<PropsType> = ({
@ -22,10 +29,20 @@ export const Tooltip: React.FC<PropsType> = ({
content,
direction,
sticky,
theme = TooltipTheme.System,
}) => {
const isSticky = Boolean(sticky);
const [showTooltip, setShowTooltip] = React.useState(isSticky);
let tooltipTheme: string;
if (theme === TooltipTheme.Light) {
tooltipTheme = 'light-theme';
} else if (theme === TooltipTheme.Dark) {
tooltipTheme = 'dark-theme';
} else {
tooltipTheme = '';
}
return (
<Manager>
<Reference>
@ -60,18 +77,20 @@ export const Tooltip: React.FC<PropsType> = ({
<Popper placement={direction}>
{({ arrowProps, placement, ref, style }) =>
showTooltip && (
<div
className="module-tooltip"
ref={ref}
style={style}
data-placement={placement}
>
{content}
<div className={tooltipTheme}>
<div
className="module-tooltip-arrow"
ref={arrowProps.ref}
style={arrowProps.style}
/>
className="module-tooltip"
ref={ref}
style={style}
data-placement={placement}
>
{content}
<div
className="module-tooltip-arrow"
ref={arrowProps.ref}
style={arrowProps.style}
/>
</div>
</div>
)
}