All files / src/components/ui/tooltips Tooltip.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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(() => {
    Iif (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = undefined;
    }
  }, []);
 
  useEffect(() => {
    return clearTimer;
  }, [clearTimer]);
 
  const openTooltip = useCallback(() => {
    Iif (!isControlled) {
      setUncontrolledOpen(true);
    }
  }, [isControlled]);
 
  const closeTooltip = useCallback(() => {
    Iif (!isControlled) {
      clearTimer();
      setUncontrolledOpen(false);
    }
  }, [clearTimer, isControlled]);
 
  const onClick = useCallback(() => {
    openTooltip();
  }, [openTooltip]);
 
  const onMouseEnter = useCallback(() => {
    Iif (!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>
  );
};