11import React , { Component } from 'react' ;
2- import { findDOMNode } from 'react-dom' ;
32import { GetArrowPropsArg , GetTooltipPropsArg , TooltipProps } from './types' ;
43import { callAll , TooltipContext } from './utils' ;
54
@@ -9,22 +8,23 @@ const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
98} ;
109
1110class Tooltip extends Component < TooltipProps > {
12- private mounted ?: boolean ;
11+ public static contextType = TooltipContext ;
12+
1313 private observer ?: MutationObserver ;
14+ private tooltipRef = React . createRef < HTMLElement > ( ) ;
1415
1516 public componentDidMount ( ) {
16- this . mounted = true ;
1717 const { trigger} = this . props ;
1818 const observer = ( this . observer = new MutationObserver ( ( ) => {
1919 this . props . scheduleUpdate ( ) ;
2020 } ) ) ;
21- observer . observe ( findDOMNode ( this ) ! , MUTATION_OBSERVER_CONFIG ) ;
21+ observer . observe ( this . tooltipRef . current ! , MUTATION_OBSERVER_CONFIG ) ;
2222
23- if ( trigger === 'click' || trigger === 'right-click ') {
23+ if ( trigger !== 'none ') {
2424 const {
2525 removeParentOutsideClickHandler,
2626 removeParentOutsideRightClickHandler
27- } = this . props ;
27+ } = this . context ;
2828 this . addOutsideClickHandler ( ) ;
2929 this . addOutsideRightClickHandler ( ) ;
3030 if ( removeParentOutsideClickHandler ) {
@@ -43,64 +43,53 @@ class Tooltip extends Component<TooltipProps> {
4343 }
4444
4545 public componentWillUnmount ( ) {
46- this . mounted = false ;
4746 const { trigger} = this . props ;
4847 if ( this . observer ) {
4948 this . observer . disconnect ( ) ;
5049 }
5150
52- if ( trigger === 'click' || trigger === 'right-click ') {
51+ if ( trigger !== 'none ') {
5352 const {
53+ isParentNoneTriggered,
5454 addParentOutsideClickHandler,
5555 addParentOutsideRightClickHandler
56- } = this . props ;
56+ } = this . context ;
5757 this . removeOutsideClickHandler ( ) ;
5858 this . removeOutsideRightClickHandler ( ) ;
5959 this . handleOutsideClick = undefined ;
6060 this . handleOutsideRightClick = undefined ;
61- if ( addParentOutsideClickHandler ) {
61+ if ( ! isParentNoneTriggered && addParentOutsideClickHandler ) {
6262 addParentOutsideClickHandler ( ) ;
6363 }
64- if ( addParentOutsideRightClickHandler ) {
64+ if ( ! isParentNoneTriggered && addParentOutsideRightClickHandler ) {
6565 addParentOutsideRightClickHandler ( ) ;
6666 }
6767 }
6868 }
6969
7070 public render ( ) {
71- const { arrowProps, placement, tooltip, innerRef } = this . props ;
71+ const { arrowProps, placement, tooltip} = this . props ;
7272
7373 return (
74- < TooltipContext . Provider
75- value = { {
76- addParentOutsideClickHandler : this . addOutsideClickHandler ,
77- addParentOutsideRightClickHandler : this . addOutsideRightClickHandler ,
78- parentOutsideClickHandler : this . handleOutsideClick ,
79- parentOutsideRightClickHandler : this . handleOutsideRightClick ,
80- removeParentOutsideClickHandler : this . removeOutsideClickHandler ,
81- removeParentOutsideRightClickHandler : this
82- . removeOutsideRightClickHandler
83- } }
84- >
74+ < TooltipContext . Provider value = { this . contextValue } >
8575 { tooltip ( {
8676 arrowRef : arrowProps . ref ,
8777 getArrowProps : this . getArrowProps ,
8878 getTooltipProps : this . getTooltipProps ,
8979 placement,
90- tooltipRef : innerRef
80+ tooltipRef : this . getTooltipRef
9181 } ) }
9282 </ TooltipContext . Provider >
9383 ) ;
9484 }
9585
9686 private handleOutsideClick ?: EventListener = event => {
97- event . stopPropagation ( ) ;
98- if ( this . mounted && ! findDOMNode ( this ) ! . contains ( event . target as Node ) ) {
99- const {
100- hideTooltip,
101- clearScheduled,
102- parentOutsideClickHandler
103- } = this . props ;
87+ if (
88+ this . tooltipRef . current &&
89+ ! this . tooltipRef . current . contains ( event . target as Node )
90+ ) {
91+ const { parentOutsideClickHandler} = this . context ;
92+ const { hideTooltip, clearScheduled} = this . props ;
10493
10594 clearScheduled ( ) ;
10695 hideTooltip ( ) ;
@@ -111,12 +100,12 @@ class Tooltip extends Component<TooltipProps> {
111100 } ;
112101
113102 private handleOutsideRightClick ?: EventListener = event => {
114- if ( this . mounted && ! findDOMNode ( this ) ! . contains ( event . target as Node ) ) {
115- const {
116- hideTooltip ,
117- clearScheduled ,
118- parentOutsideRightClickHandler
119- } = this . props ;
103+ if (
104+ this . tooltipRef . current &&
105+ ! this . tooltipRef . current . contains ( event . target as Node )
106+ ) {
107+ const { parentOutsideRightClickHandler} = this . context ;
108+ const { hideTooltip , clearScheduled } = this . props ;
120109
121110 clearScheduled ( ) ;
122111 hideTooltip ( ) ;
@@ -127,20 +116,32 @@ class Tooltip extends Component<TooltipProps> {
127116 } ;
128117
129118 private addOutsideClickHandler = ( ) => {
130- document . addEventListener ( 'touchend' , this . handleOutsideClick ! ) ;
131- document . addEventListener ( 'click' , this . handleOutsideClick ! ) ;
119+ document . body . addEventListener ( 'touchend' , this . handleOutsideClick ! ) ;
120+ document . body . addEventListener ( 'click' , this . handleOutsideClick ! ) ;
132121 } ;
133122
134123 private removeOutsideClickHandler = ( ) => {
135- document . removeEventListener ( 'touchend' , this . handleOutsideClick ! ) ;
136- document . removeEventListener ( 'click' , this . handleOutsideClick ! ) ;
124+ document . body . removeEventListener ( 'touchend' , this . handleOutsideClick ! ) ;
125+ document . body . removeEventListener ( 'click' , this . handleOutsideClick ! ) ;
137126 } ;
138127
139128 private addOutsideRightClickHandler = ( ) =>
140- document . addEventListener ( 'contextmenu' , this . handleOutsideRightClick ! ) ;
129+ document . body . addEventListener (
130+ 'contextmenu' ,
131+ this . handleOutsideRightClick !
132+ ) ;
141133
142134 private removeOutsideRightClickHandler = ( ) =>
143- document . removeEventListener ( 'contextmenu' , this . handleOutsideRightClick ! ) ;
135+ document . body . removeEventListener (
136+ 'contextmenu' ,
137+ this . handleOutsideRightClick !
138+ ) ;
139+
140+ private getTooltipRef = ( ref : HTMLElement | null ) => {
141+ // @ts -ignore
142+ this . tooltipRef . current = ref ;
143+ this . props . innerRef ( ref ) ;
144+ } ;
144145
145146 private getArrowProps = ( props : GetArrowPropsArg = { } ) => ( {
146147 ...props ,
@@ -153,14 +154,22 @@ class Tooltip extends Component<TooltipProps> {
153154 return {
154155 ...props ,
155156 ...( isHoverTriggered && {
156- onMouseEnter : callAll ( this . props . clearScheduled , props . onMouseEnter )
157- } ) ,
158- ...( isHoverTriggered && {
157+ onMouseEnter : callAll ( this . props . clearScheduled , props . onMouseEnter ) ,
159158 onMouseLeave : callAll ( this . props . hideTooltip , props . onMouseLeave )
160159 } ) ,
161160 style : { ...props . style , ...this . props . style }
162161 } ;
163162 } ;
163+
164+ private contextValue = {
165+ isParentNoneTriggered : this . props . trigger === 'none' ,
166+ addParentOutsideClickHandler : this . addOutsideClickHandler ,
167+ addParentOutsideRightClickHandler : this . addOutsideRightClickHandler ,
168+ parentOutsideClickHandler : this . handleOutsideClick ,
169+ parentOutsideRightClickHandler : this . handleOutsideRightClick ,
170+ removeParentOutsideClickHandler : this . removeOutsideClickHandler ,
171+ removeParentOutsideRightClickHandler : this . removeOutsideRightClickHandler
172+ } ;
164173}
165174
166175export default Tooltip ;
0 commit comments