Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 4x 4x 4x 4x 4x | import React, { useCallback, useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { RelativePortal } from "ui/layout/RelativePortal";
const Tooltip = styled.div`
color: #000;
background-color: #fff;
border-radius: 4px;
overflow: auto;
box-shadow:
0 0 0 1px rgba(150, 150, 150, 0.3),
0 4px 11px hsla(0, 0%, 0%, 0.1);
z-index: 10000;
font-size: 11px;
line-height: normal;
font-weight: normal;
padding: 10px;
max-width: 230px;
min-width: 150px;
transform: translateX(-10px);
white-space: pre-wrap;
p {
margin: 10px 0;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
`;
interface TooltipWrapperProps {
children: React.ReactNode;
tooltip: React.ReactNode;
open?: boolean;
}
export const TooltipWrapper = ({
children,
tooltip,
open,
}: TooltipWrapperProps) => {
const isControlled = open !== undefined;
const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
const isOpen = isControlled ? open : uncontrolledOpen;
const clearTimer = useCallback(() => {
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = undefined;
}
}, []);
useEffect(() => {
return clearTimer;
}, [clearTimer]);
const openTooltip = useCallback(() => {
if (!isControlled) {
setUncontrolledOpen(true);
}
}, [isControlled]);
const closeTooltip = useCallback(() => {
if (!isControlled) {
clearTimer();
setUncontrolledOpen(false);
}
}, [clearTimer, isControlled]);
const onClick = useCallback(() => {
openTooltip();
}, [openTooltip]);
const onMouseEnter = useCallback(() => {
if (!isControlled) {
clearTimer();
timerRef.current = setTimeout(() => {
setUncontrolledOpen(true);
timerRef.current = undefined;
}, 500);
}
}, [clearTimer, isControlled]);
const onMouseLeave = useCallback(() => {
closeTooltip();
}, [closeTooltip]);
return (
<div
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{isOpen && (
<RelativePortal pin="bottom-left" offsetX={5} offsetY={-5}>
<Tooltip>{tooltip}</Tooltip>
</RelativePortal>
)}
{children}
</div>
);
};
|