Skip to content

Commit a2e8af5

Browse files
aronhelseraronhelser
authored
Merge pull request #475 from EndiM/refactor/remove-deprecated-findDOMNode-and-string-ref-use
Refactor(findDOMNode, string ref): replace deprecated findDOMNode and string ref
2 parents b21e4cb + d53942a commit a2e8af5

File tree

3 files changed

+112
-115
lines changed

3 files changed

+112
-115
lines changed

‎README.md

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,10 @@ Check the example [React-tooltip Test](https://react-tooltip.netlify.com/)
9797
> Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
9898
9999
```js
100-
import {findDOMNode} from 'react-dom'
101100
import ReactTooltip from 'react-tooltip'
102101

103-
<p ref='foo' data-tip='tooltip'></p>
104-
<button onClick={() => { ReactTooltip.hide(findDOMNode(this.refs.foo)) }}></button>
102+
<p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
103+
<button onClick={() => { ReactTooltip.hide(this.fooRef) }}></button>
105104
<ReactTooltip />
106105
```
107106

@@ -114,11 +113,10 @@ import ReactTooltip from 'react-tooltip'
114113
> Show specific tooltip manually, for example:
115114
116115
```js
117-
import {findDOMNode} from 'react-dom'
118116
import ReactTooltip from 'react-tooltip'
119117

120-
<p ref='foo' data-tip='tooltip'></p>
121-
<button onClick={() => { ReactTooltip.show(findDOMNode(this.refs.foo)) }}></button>
118+
<p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
119+
<button onClick={() => { ReactTooltip.show(this.fooRef) }}></button>
122120
<ReactTooltip />
123121
```
124122

‎example/src/index.js

Lines changed: 106 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class Test extends React.Component {
4747
<h4 className='title'>React Tooltip</h4>
4848
<div className='demonstration'>
4949
<a data-for='main' data-tip="Hello<br />multiline<br />tooltip" data-iscapture="true">
50-
◕‿‿◕
50+
◕‿‿◕
5151
</a>
5252
</div>
5353
<div className='control-panel'>
@@ -104,13 +104,13 @@ class Test extends React.Component {
104104
<pre className='example-pre'>
105105
<div>
106106
<p>{"<a data-tip data-for='happyFace'> d(`･∀･)b </a>\n" +
107-
"<ReactTooltip id='happyFace' type='error'>\n" +
107+
"<ReactTooltip id='happyFace' type='error'>\n" +
108108
" " + " " + "<span>Show happy face</span>\n" +
109-
"</ReactTooltip>\n" +
110-
"<a data-tip data-for='sadFace'> இдஇ </a>\n" +
111-
"<ReactTooltip id='sadFace' type='warning' effect='solid'>\n" +
109+
"</ReactTooltip>\n" +
110+
"<a data-tip data-for='sadFace'> இдஇ </a>\n" +
111+
"<ReactTooltip id='sadFace' type='warning' effect='solid'>\n" +
112112
" " + " " + "<span>Show sad face</span>\n" +
113-
"</ReactTooltip>"}</p>
113+
"</ReactTooltip>"}</p>
114114
</div>
115115
</pre>
116116
<div className="example-jsx">
@@ -131,13 +131,13 @@ class Test extends React.Component {
131131
<p>{"<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
132132
"<a data-tip data-for='global'> (〃∀〃) </a>\n" +
133133
"<ReactTooltip id='global' aria-haspopup='true' role='example'>\n" +
134-
" <p>This is a global react component tooltip</p>\n" +
135-
" <p>You can put every thing here</p>\n" +
136-
" <ul>\n" +
137-
" " + " " + " <li>Word</li>\n" +
138-
" " + " " + " <li>Chart</li>\n" +
139-
" " + " " + " <li>Else</li>\n" +
140-
" </ul>\n" +
134+
" <p>This is a global react component tooltip</p>\n" +
135+
" <p>You can put every thing here</p>\n" +
136+
" <ul>\n" +
137+
" " + " " + " <li>Word</li>\n" +
138+
" " + " " + " <li>Chart</li>\n" +
139+
" " + " " + " <li>Else</li>\n" +
140+
" </ul>\n" +
141141
"</ReactTooltip>"}</p>
142142
</div>
143143
</pre>
@@ -153,12 +153,12 @@ class Test extends React.Component {
153153
<ReactTooltip id='custom-event' globalEventOff='click' />
154154
</div>
155155
<div className="side">
156-
<a data-for='custom-off-event' ref='target' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
157-
<ReactTooltip id='custom-off-event'/>
156+
<a data-for='custom-off-event' ref={ref => this.targetRef = ref} data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
157+
<ReactTooltip id='custom-off-event' />
158158
{/*
159159
<div>
160-
<button onClick={() => { ReactTooltip.show(ReactDOM.findDOMNode(this.refs.target)) }}>Show toolip</button>
161-
<button onClick={() => { ReactTooltip.hide(ReactDOM.findDOMNode(this.refs.target)) }}>Hide toolip</button>
160+
<button onClick={() => { ReactTooltip.show(this.targetRef) }}>Show toolip</button>
161+
<button onClick={() => { ReactTooltip.hide(this.targetRef) }}>Hide toolip</button>
162162
</div>
163163
*/}
164164
</div>
@@ -167,11 +167,11 @@ class Test extends React.Component {
167167
<pre className='example-pre'>
168168
<div>
169169
<p>{"<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
170-
"<ReactTooltip globalEventOff='click' />"}</p>
170+
"<ReactTooltip globalEventOff='click' />"}</p>
171171
</div>
172172
<div>
173173
<p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
174-
"<ReactTooltip/>"}</p>
174+
"<ReactTooltip/>"}</p>
175175
</div>
176176
</pre>
177177
</div>
@@ -193,30 +193,30 @@ class Test extends React.Component {
193193
<pre className='example-pre'>
194194
<div>
195195
<p>{"<a data-tip='hover on me will keep the tooltip'>(･ω´･ )́)</a>\n" +
196-
"<ReactTooltip className='extraClass' delayHide={1000} effect='solid'/>\n" +
197-
".extraClass {\n" +
196+
"<ReactTooltip className='extraClass' delayHide={1000} effect='solid'/>\n" +
197+
".extraClass {\n" +
198198
" font-size: 20px !important;\n" +
199199
" pointer-events: auto !important;\n" +
200200
" &:hover {\n" +
201-
"visibility: visible !important;\n" +
202-
"opacity: 1 !important;\n" +
201+
"visibility: visible !important;\n" +
202+
"opacity: 1 !important;\n" +
203203
" }\n" +
204-
"}"}</p>
204+
"}"}</p>
205205
</div>
206206
<div>
207207
<p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
208-
"<ReactTooltip className='customeTheme'/>\n" +
209-
" .customeTheme {\n" +
208+
"<ReactTooltip className='customeTheme'/>\n" +
209+
" .customeTheme {\n" +
210210
" color: #ff6e00 !important;\n" +
211211
" background-color: orange !important;\n" +
212212
" &.place-top {\n" +
213-
" &:after {\n" +
214-
" border-top-color: orange !important;\n" +
215-
" border-top-style: solid !important;\n" +
216-
" border-top-width: 6px !important;\n" +
217-
" }\n" +
213+
" &:after {\n" +
214+
" border-top-color: orange !important;\n" +
215+
" border-top-style: solid !important;\n" +
216+
" border-top-width: 6px !important;\n" +
217+
" }\n" +
218218
" }\n" +
219-
"}"}</p>
219+
"}"}</p>
220220
</div>
221221
</pre>
222222
</div>
@@ -238,13 +238,13 @@ class Test extends React.Component {
238238
<pre className='example-pre'>
239239
<div>
240240
<p>{"<a data-for='getContent' data-tip>=( •̀д•́)</a>\n" +
241-
"<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
241+
"<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
242242
</div>
243243
<div>
244244
<p>{"<a data-for='overTime' data-tip>=( •̀д•́)</a>\n" +
245-
"<ReactTooltip id='overTime' getContent={[() => {\n" +
246-
" return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
247-
"}, 1000]}/>"}</p>
245+
"<ReactTooltip id='overTime' getContent={[() => {\n" +
246+
" return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
247+
"}, 1000]}/>"}</p>
248248
</div>
249249
</pre>
250250
</div>
@@ -264,8 +264,8 @@ class Test extends React.Component {
264264
<pre className='example-pre'>
265265
<div>
266266
<p>{"<a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>\n" +
267-
"<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" +
268-
"<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>"}</p>
267+
"<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" +
268+
"<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>"}</p>
269269
</div>
270270
</pre>
271271
</div>
@@ -294,22 +294,22 @@ class Test extends React.Component {
294294
<pre className='example-pre'>
295295
<div>
296296
<p>{"<div data-for='scrollContent' data-tip data-iscapture='true'\n style={{ width: '5000px', height: '5000px' }}>...</div>\n" +
297-
"<ReactTooltip id='scrollContent' getContent={() => Math.floor(Math.random() * 100)}/>"}</p>
297+
"<ReactTooltip id='scrollContent' getContent={() => Math.floor(Math.random() * 100)}/>"}</p>
298298
</div>
299299
<div>
300300
<p>{"<div data-for='scrollTime' data-tip data-iscapture='true' data-scroll-hide='false'\n style={{ width: '5000px', height: '5000px' }}>...</div>\n" +
301-
"<ReactTooltip id='scrollTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
301+
"<ReactTooltip id='scrollTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
302302
</div>
303303
</pre>
304304
</div>
305305
<div className="section">
306306
<h4 className='title'>Test SVG</h4>
307307
<p>Note: if you dynamically change elements in the SVG, add:</p>
308308
<pre>
309-
{" componentDidUpdate() {\n" +
310-
" ReactTooltip.rebuild()\n" +
311-
" }"
312-
}
309+
{" componentDidUpdate() {\n" +
310+
" ReactTooltip.rebuild()\n" +
311+
" }"
312+
}
313313
</pre>
314314
<p className="sub-title"></p>
315315
<div className="example-jsx">
@@ -329,79 +329,79 @@ class Test extends React.Component {
329329
</div>
330330
<br/>
331331
<pre className='example-pre'>
332-
<div>
333-
<p>{"<svg data-tip='=( •̀д•́)' data-for='svgTooltip' width='50' height='50'>\n" +
334-
" <circle cx='25' cy='25' r='22' fill='#fff' stroke='#000' strokeWidth='8'/>\n" +
335-
"</svg>\n" +
336-
"<ReactTooltip id='svgTooltip' />"}</p>
337-
<p>{"<svg width='75' height='50'>\n" +
332+
<div>
333+
<p>{"<svg data-tip='=( •̀д•́)' data-for='svgTooltip' width='50' height='50'>\n" +
334+
" <circle cx='25' cy='25' r='22' fill='#fff' stroke='#000' strokeWidth='8'/>\n" +
335+
"</svg>\n" +
336+
"<ReactTooltip id='svgTooltip' />"}</p>
337+
<p>{"<svg width='75' height='50'>\n" +
338338
"<circle data-tip='=( •̀‿•́)' data-for='svgTooltip2'\n" +
339339
" cx='25' cy='25' r='22' fill='#fff' stroke='#000' strokeWidth='4'/>\n" +
340340
"<circle data-tip='=( ❂‿❂)' data-for='svgTooltip2'\n" +
341341
" cx='50' cy='25' r='16' fill='#fdf' stroke='#404' strokeWidth='4'/>\n" +
342-
"</svg>\n" +
343-
"<ReactTooltip id='svgTooltip2'/>"}</p>
344-
</div>
345-
</pre>
342+
"</svg>\n" +
343+
"<ReactTooltip id='svgTooltip2'/>"}</p>
344+
</div>
345+
</pre>
346346
</div>
347-
<div className="section">
348-
<h4 className='title'>Demonstrate using mouse in tooltip. </h4>
349-
<p>Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.</p>
350-
<p className="sub-title"></p>
351-
<div className="example-jsx">
352-
<div className="block" >
353-
<a data-for='soclose' data-tip='1'>1 (❂‿❂)</a>
354-
</div>
355-
<div className="block">
356-
<a data-for='soclose' data-tip='2'>2 (❂‿❂)</a>
357-
</div>
358-
<div className="block" >
359-
<a data-for='soclose' data-tip='3'>3 (❂‿❂)</a>
360-
</div>
361-
<div className="block">
362-
<a data-for='soclose' data-tip='4'>4 (❂‿❂)</a>
363-
</div>
364-
<div className="block" >
365-
<a data-for='soclose' data-tip='5'>5 (❂‿❂)</a>
366-
</div>
367-
<div className="block">
368-
<a data-for='soclose' data-tip='6'>6 (❂‿❂)</a>
369-
</div>
370-
<div className="block" >
371-
<a data-for='soclose' data-tip='7'>7 (❂‿❂)</a>
372-
</div>
373-
<div className="block">
374-
<a data-for='soclose' data-tip='8'>8 (❂‿❂)</a>
375-
</div>
347+
<div className="section">
348+
<h4 className='title'>Demonstrate using mouse in tooltip. </h4>
349+
<p>Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.</p>
350+
<p className="sub-title"></p>
351+
<div className="example-jsx">
352+
<div className="block" >
353+
<a data-for='soclose' data-tip='1'>1 (❂‿❂)</a>
354+
</div>
355+
<div className="block">
356+
<a data-for='soclose' data-tip='2'>2 (❂‿❂)</a>
357+
</div>
358+
<div className="block" >
359+
<a data-for='soclose' data-tip='3'>3 (❂‿❂)</a>
360+
</div>
361+
<div className="block">
362+
<a data-for='soclose' data-tip='4'>4 (❂‿❂)</a>
363+
</div>
364+
<div className="block" >
365+
<a data-for='soclose' data-tip='5'>5 (❂‿❂)</a>
366+
</div>
367+
<div className="block">
368+
<a data-for='soclose' data-tip='6'>6 (❂‿❂)</a>
369+
</div>
370+
<div className="block" >
371+
<a data-for='soclose' data-tip='7'>7 (❂‿❂)</a>
372+
</div>
373+
<div className="block">
374+
<a data-for='soclose' data-tip='8'>8 (❂‿❂)</a>
375+
</div>
376376

377-
<ReactTooltip id='soclose'
378-
getContent={(dataTip) => <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }
379-
effect='solid'
380-
delayHide={500}
381-
delayShow={500}
382-
delayUpdate={500}
383-
place={'right'}
384-
border={true}
385-
type={'light'}
377+
<ReactTooltip id='soclose'
378+
getContent={(dataTip) => <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }
379+
effect='solid'
380+
delayHide={500}
381+
delayShow={500}
382+
delayUpdate={500}
383+
place={'right'}
384+
border={true}
385+
type={'light'}
386386

387-
/>
388-
</div>
389-
<br />
390-
<pre className='example-pre'>
387+
/>
388+
</div>
389+
<br />
390+
<pre className='example-pre'>
391391
<div>
392392
<p>{"<a data-for='soclose' data-tip='1'>1 (❂‿❂)</a>"}</p>
393393
<p>{"<a data-for='soclose' data-tip='2'>2 (❂‿❂)</a>..."}</p>
394394
<p>{"<a data-for='soclose' data-tip='8'>8 (❂‿❂)</a>"}</p>
395395
<p>{"<ReactTooltip id='soclose'\n" +
396-
" getContent={(dataTip) => \n" +
397-
" <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }\n" +
398-
" effect='solid'\n" +
399-
" delayHide={500}\n" +
400-
" delayShow={500}\n" +
401-
" delayUpdate={500}\n" +
402-
" place={'right'}\n" +
403-
" border={true}\n" +
404-
" type={'light'}"}</p>
396+
" getContent={(dataTip) => \n" +
397+
" <div><h3>This little buddy is {dataTip}</h3><p>Put mouse here</p></div> }\n" +
398+
" effect='solid'\n" +
399+
" delayHide={500}\n" +
400+
" delayShow={500}\n" +
401+
" delayUpdate={500}\n" +
402+
" place={'right'}\n" +
403+
" border={true}\n" +
404+
" type={'light'}"}</p>
405405
</div>
406406
</pre>
407407

@@ -425,7 +425,7 @@ class Test extends React.Component {
425425
"</ReactTooltip>"}</p>
426426
</div>
427427
</pre>
428-
</div>
428+
</div>
429429

430430
</section>
431431
</div>

‎src/index.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import React from 'react'
44
import PropTypes from 'prop-types'
5-
import ReactDOM from 'react-dom'
65
import classname from 'classnames'
76

87
/* Decoraters */
@@ -309,7 +308,7 @@ class ReactTooltip extends React.Component {
309308
let desiredPlace = e.currentTarget.getAttribute('data-place') || this.props.place || 'top'
310309
let effect = switchToSolid && 'solid' || this.getEffect(e.currentTarget)
311310
let offset = e.currentTarget.getAttribute('data-offset') || this.props.offset || {}
312-
let result = getPosition(e, e.currentTarget, ReactDOM.findDOMNode(this), desiredPlace, desiredPlace, effect, offset)
311+
let result = getPosition(e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset)
313312
let place = result.isNewState ? result.newState.place : desiredPlace
314313

315314
// To prevent previously created timers from triggering
@@ -480,7 +479,7 @@ class ReactTooltip extends React.Component {
480479
// Calculation the position
481480
updatePosition () {
482481
const {currentEvent, currentTarget, place, desiredPlace, effect, offset} = this.state
483-
const node = ReactDOM.findDOMNode(this)
482+
const node = this.tooltipRef
484483
const result = getPosition(currentEvent, currentTarget, node, place, desiredPlace, effect, offset)
485484

486485
if (result.isNewState) {

0 commit comments

Comments
 (0)