/
PoolPopOver.js
105 lines (100 loc) · 3.51 KB
/
PoolPopOver.js
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
// @flow
import React, { useRef, useState } from 'react';
import type { Node } from 'react';
import { PopOver } from 'react-polymorph/lib/components/PopOver';
import { STAKE_POOL_TOOLTIP_HOVER_WAIT } from '../../../config/timingConfig';
import StakePool from '../../../domains/StakePool';
import TooltipPool from './TooltipPool';
import styles from './PoolPopOver.scss';
/**
* Stake pool tooltip component that can be wrapped around
* any trigger component (e.g: our pool thumbs and pool tickers) by
* passing them as children of this component.
*
* By default it opens on "click" events on the trigger components
* but can also be configured to openOnHover=true.
*/
export function PoolPopOver(props: {
children: Node,
color: string,
currentTheme: string,
onOpen?: (poolId: string) => void,
onClose?: () => void,
onOpenExternalLink: (string) => void,
onSelect?: (poolId: string) => void,
openOnHover?: boolean,
openWithDelay?: boolean,
showWithSelectButton?: boolean,
stakePool: StakePool,
containerClassName: string,
numberOfRankedStakePools: number,
isGridRewardsView?: boolean,
}) {
// Track hover state manually to optimize performance by lazy init pop overs
const [isHovered, setIsHovered] = useState(false);
// The ref passed to Tippy.js as trigger target
const popOverTargetRef = useRef(null);
const poolId = props.stakePool.id;
const close = (isStillHovered: boolean = false) => {
setIsHovered(isStillHovered);
props.onClose?.();
};
return (
<>
<div
className={styles.triggerTarget}
onMouseEnter={() => setIsHovered(true)}
ref={popOverTargetRef}
>
{props.children}
</div>
{isHovered ? ( // Init the pop over only when the target is hovered
<PopOver
interactive
className="PoolPopOver"
delay={props.openWithDelay ? STAKE_POOL_TOOLTIP_HOVER_WAIT : 0}
duration={0}
appendTo={document.body}
trigger={props.openOnHover ? 'mouseenter' : 'click'}
placement="auto"
onShow={() => props.onOpen && props.onOpen(poolId)}
onHide={() => close(true)}
onClickOutside={close}
themeVariables={{
'--rp-pop-over-bg-color':
'var(--theme-staking-stake-pool-tooltip-background-color)',
'--rp-pop-over-box-shadow':
'0 5px 20px 0 var(--theme-staking-stake-pool-tooltip-shadow-color)',
'--rp-pop-over-border-color':
'var(--theme-staking-stake-pool-tooltip-border-color)',
'--rp-pop-over-border-radius': '5px',
'--rp-pop-over-border-style': 'solid',
'--rp-pop-over-padding': 0,
}}
// Passing in the trigger element allows lazy initialization
reference={popOverTargetRef}
content={
<TooltipPool
color={props.color}
containerClassName={props.containerClassName}
currentTheme={props.currentTheme}
numberOfRankedStakePools={props.numberOfRankedStakePools}
onClose={close}
onOpenExternalLink={props.onOpenExternalLink}
onSelect={() => {
close();
props.onSelect?.(poolId);
}}
showWithSelectButton={props.showWithSelectButton}
stakePool={props.stakePool}
isGridRewardsView={props.isGridRewardsView}
/>
}
/>
) : null}
</>
);
}
PoolPopOver.defaultProps = {
openWithDelay: false,
};