From 4edb97603633214361b71d4046247b303fc2b195 Mon Sep 17 00:00:00 2001 From: Endi Modric Date: Thu, 7 Mar 2019 15:36:29 +0100 Subject: [PATCH 1/3] refactor(src/index.js): remove use of deprecated findDOMNode and string ref fix #430 --- src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 077ad8529..cf93f6f81 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import React from 'react' import PropTypes from 'prop-types' -import ReactDOM from 'react-dom' import classname from 'classnames' /* Decoraters */ @@ -309,7 +308,7 @@ class ReactTooltip extends React.Component { let desiredPlace = e.currentTarget.getAttribute('data-place') || this.props.place || 'top' let effect = switchToSolid && 'solid' || this.getEffect(e.currentTarget) let offset = e.currentTarget.getAttribute('data-offset') || this.props.offset || {} - let result = getPosition(e, e.currentTarget, ReactDOM.findDOMNode(this), desiredPlace, desiredPlace, effect, offset) + let result = getPosition(e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset) let place = result.isNewState ? result.newState.place : desiredPlace // To prevent previously created timers from triggering @@ -480,7 +479,7 @@ class ReactTooltip extends React.Component { // Calculation the position updatePosition () { const {currentEvent, currentTarget, place, desiredPlace, effect, offset} = this.state - const node = ReactDOM.findDOMNode(this) + const node = this.tooltipRef const result = getPosition(currentEvent, currentTarget, node, place, desiredPlace, effect, offset) if (result.isNewState) { From 795f534159344561cb0e812c53343481355f999e Mon Sep 17 00:00:00 2001 From: Endi Modric Date: Thu, 7 Mar 2019 15:39:37 +0100 Subject: [PATCH 2/3] refactor(example/src/index.js): replace deprecated string ref with callback ref --- example/src/index.js | 212 +++++++++++++++++++++---------------------- 1 file changed, 106 insertions(+), 106 deletions(-) diff --git a/example/src/index.js b/example/src/index.js index fb1aa69c9..dcae3aaef 100755 --- a/example/src/index.js +++ b/example/src/index.js @@ -47,7 +47,7 @@ class Test extends React.Component {

React Tooltip

- ◕‿‿◕ + ◕‿‿◕
@@ -104,13 +104,13 @@ class Test extends React.Component { 
               

                 
{" d(`･∀･)b \n" +
-                "\n" +
+                  "\n" +
                   " " + " " + "Show happy face\n" +
-                "\n" +
-                " இдஇ \n" +
-                "\n" +
+                  "\n" +
+                  " இдஇ \n" +
+                  "\n" +
                   " " + " " + "Show sad face\n" +
-                ""}

+                  ""}
@@ -131,13 +131,13 @@ class Test extends React.Component {

{" σ`∀´)σ \n" + " (〃∀〃) \n" + "\n" + - "

This is a global react component tooltip

\n" + - "

You can put every thing here

\n" + - "
    \n" + - " " + " " + "
  • Word
    • \n" + - " " + " " + "
  • Chart
    • \n" + - " " + " " + "
  • Else
    • \n" + - "
\n" + + "

This is a global react component tooltip

\n" + + "

You can put every thing here

\n" + + "
    \n" + + " " + " " + "
  • Word
    • \n" + + " " + " " + "
  • Chart
    • \n" + + " " + " " + "
  • Else
    • \n" + + "
\n" + ""}

@@ -153,12 +153,12 @@ class Test extends React.Component {
- ( •̀д•́) - + this.targetRef = ref} data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́) + {/*
- - + +
*/}
@@ -167,11 +167,11 @@ class Test extends React.Component { 
               

                 
{"( •̀д•́)\n" +
-                ""}

+                  ""}

               

               

                 
{"( •̀д•́)\n" +
-                ""}

+                  ""}
@@ -193,30 +193,30 @@ class Test extends React.Component { 
               

                 
{"(･ω´･ )́)\n" +
-                "\n" +
-                ".extraClass {\n" +
+                  "\n" +
+                  ".extraClass {\n" +
                   " font-size: 20px !important;\n" +
                   " pointer-events: auto !important;\n" +
                   " &:hover {\n" +
-                    "visibility: visible !important;\n" +
-                    "opacity: 1 !important;\n" +
+                  "visibility: visible !important;\n" +
+                  "opacity: 1 !important;\n" +
                   " }\n" +
-                "}"}

+                  "}"}

               

               

                 
{"(･ω´･ )́)\n" +
-                "\n" +
-                " .customeTheme {\n" +
+                  "\n" +
+                  " .customeTheme {\n" +
                   " color: #ff6e00 !important;\n" +
                   " background-color: orange !important;\n" +
                   " &.place-top {\n" +
-                    " &:after {\n" +
-                      " border-top-color: orange !important;\n" +
-                      " border-top-style: solid !important;\n" +
-                      " border-top-width: 6px !important;\n" +
-                    " }\n" +
+                  " &:after {\n" +
+                  " border-top-color: orange !important;\n" +
+                  " border-top-style: solid !important;\n" +
+                  " border-top-width: 6px !important;\n" +
+                  " }\n" +
                   " }\n" +
-                "}"}

+                  "}"}
@@ -238,13 +238,13 @@ class Test extends React.Component { 
               

                 
{"=( •̀д•́)\n" +
-                " Math.floor(Math.random() * 100)} />"}

+                  " Math.floor(Math.random() * 100)} />"}

               

               

                 
{"=( •̀д•́)\n" +
-                " {\n" +
-                " return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
-                "}, 1000]}/>"}

+                  " {\n" +
+                  " return 'Random length content'.slice(0, Math.floor(Math.random() * 21) + 1)\n" +
+                  "}, 1000]}/>"}
@@ -264,8 +264,8 @@ class Test extends React.Component { 
               

                 
{"(❂‿❂)\n" +
-                "(❂‿❂)\n" +
-                " `This little buddy is ${dataTip}`}/>"}

+                  "(❂‿❂)\n" +
+                  " `This little buddy is ${dataTip}`}/>"}
@@ -294,11 +294,11 @@ class Test extends React.Component { 
               

                 
{"
...
\n" +
-                " Math.floor(Math.random() * 100)}/>"}

+                  " Math.floor(Math.random() * 100)}/>"}

               

               

                 
{"
...
\n" +
-                " {return new Date().toISOString()}, 1000]}/>"}

+                  " {return new Date().toISOString()}, 1000]}/>"}
@@ -306,10 +306,10 @@ class Test extends React.Component {

Test SVG

Note: if you dynamically change elements in the SVG, add:

-            {"  componentDidUpdate() {\n" +
-             "    ReactTooltip.rebuild()\n" +
-             "  }"
-            }
+              {"  componentDidUpdate() {\n" +
+                "    ReactTooltip.rebuild()\n" +
+                "  }"
+              }

@@ -329,79 +329,79 @@ class Test extends React.Component { 

-               

-                 
{"\n" +
-                 "  \n" +
-                 "\n" +
-                 ""}

-                 
{"\n" +
+              

+                
{"\n" +
+                  "  \n" +
+                  "\n" +
+                  ""}

+                
{"\n" +
                   "\n" +
                   "\n" +
-                "\n" +
-                ""}

-               

-
+ "\n" + + ""}

+ + -
-

Demonstrate using mouse in tooltip.

-

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.

-

-
- - - - - - - - +
+

Demonstrate using mouse in tooltip.

+

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.

+

+
+ + + + + + + + -

This little buddy is {dataTip}

Put mouse here

} - effect='solid' - delayHide={500} - delayShow={500} - delayUpdate={500} - place={'right'} - border={true} - type={'light'} +

This little buddy is {dataTip}

Put mouse here

} + effect='solid' + delayHide={500} + delayShow={500} + delayUpdate={500} + place={'right'} + border={true} + type={'light'} - /> -
-
- 
+              />
+
+
+ 
               

                 
{"1 (❂‿❂)"}

                 
{"2 (❂‿❂)..."}

                 
{"8 (❂‿❂)"}

                 
{" \n" +
-                "  
This little buddy is {dataTip}
Put mouse here
 }\n" +
-                " effect='solid'\n" +
-                " delayHide={500}\n" +
-                " delayShow={500}\n" +
-                " delayUpdate={500}\n" +
-                " place={'right'}\n" +
-                " border={true}\n" +
-                " type={'light'}"}

+                  " getContent={(dataTip) => \n" +
+                  "  
This little buddy is {dataTip}
Put mouse here
 }\n" +
+                  " effect='solid'\n" +
+                  " delayHide={500}\n" +
+                  " delayShow={500}\n" +
+                  " delayUpdate={500}\n" +
+                  " place={'right'}\n" +
+                  " border={true}\n" +
+                  " type={'light'}"}
@@ -425,7 +425,7 @@ class Test extends React.Component { ""}

-
+ From d53942a0c5ab88db828a781281cf0b9b94e2986e Mon Sep 17 00:00:00 2001 From: Endi Modric Date: Thu, 7 Mar 2019 15:42:46 +0100 Subject: [PATCH 3/3] docs(README.md): replace deprecated findDOMNode with callback ref example --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1b911dc55..0022254b4 100644 --- a/README.md +++ b/README.md @@ -97,11 +97,10 @@ Check the example [React-tooltip Test](https://react-tooltip.netlify.com/) > Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden ```js -import {findDOMNode} from 'react-dom' import ReactTooltip from 'react-tooltip' -

- +

this.fooRef = ref} data-tip='tooltip'>

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

- +

this.fooRef = ref} data-tip='tooltip'>

+ ```