From a555060cd9e208e5af64148f8d8e84523a5d785e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?rogger=20andr=C3=A9=20valverde=20flores?= Date: Sat, 13 Jun 2020 19:45:11 -0500 Subject: [PATCH] fix: skip warning in example --- example/src/App.js | 1717 ++++++++++++++++++++++---------------------- 1 file changed, 859 insertions(+), 858 deletions(-) diff --git a/example/src/App.js b/example/src/App.js index 52d58641c..a633680bb 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,858 +1,859 @@ -import React, { Component } from "react"; - -import ReactTooltip from "react-tooltip"; - -export default class App extends Component { - constructor(props) { - super(props); - this.state = { - place: "top", - type: "dark", - effect: "float", - condition: false - }; - } - - changePlace(place) { - this.setState({ - place: place - }); - } - - changeType(type) { - this.setState({ - type: type - }); - } - - changeEffect(effect) { - this.setState({ - effect: effect - }); - } - - _onClick() { - this.setState({ - condition: true - }); - } - - render() { - const { place, type, effect } = this.state; - return ( -
-
-

React Tooltip

-
- - ◕‿‿◕ - -
-
-
- - - -
-
-              
-

Code

-
-

{' ◕‿‿◕ '}

-

- {''} -

-
-
-
- -
-
-
-

Advance features

-

Use everything as tooltip

- -
-
- - d(`・∀・)b - - - Show happy face - -
-
- - இдஇ - - - Show sad face - -
-
-
-
-              
-

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

-
-
-
- - - -

This is a global react component tooltip

-

You can put every thing here

-
    -
  • Word
  • -
  • Chart
  • -
  • Else
  • -
-
-
-
-              
-

- {" σ`∀´)σ \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" + - ""} -

-
-
-
-
-
-
-

Custom event

-

-

- - -
-
-
-              
-

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

-
-
-

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

-
-
-
- -
-

Custom colors

-

-

- - -
-
-
-              
-

- {"ㅇㅅㅇ\n" + - ""} -

-
-
-

- {"V(^-^)V\n" + - ""} -

-
-
-
- -
-

Theme and delay

-

-

- - -
-
-
-              
-

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

-
-
-

- {"(・ω´・ )\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" + - " }\n" + - "}"} -

-
-
-
- -
-

Update tip content over time

-

-

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

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

-
-
-

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

-
-
-
- -
-

Compute or enrich tip content

-

-

- - - "This little buddy is " + dataTip} - /> -
-
-
-              
-

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

-
-
-
- -
-

Test Scrolling

-

-

-
-
- Scroll me with the mouse wheel. -
- The tooltip will hide. -
- Make sure you set data-iscapture="true" -
- Math.floor(Math.random() * 100)} - /> -
-
-
- Scroll me with the mouse wheel. -
- The tooltip will stay visible. -
- { - return new Date().toISOString(); - }, - 1000 - ]} - /> -
-
-
-
-              
-

- {"

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

-
-
-

- {"

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

-
-
-
- -
-

Test SVG

-

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

-
-              {"  componentDidUpdate() {\n" +
-                "    ReactTooltip.rebuild()\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. -

-

-

- - - - - - - - - - ( -
-

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'}\n" + - "/>"} -

-
-
- -

- When clickable property is set to true, tooltip - can respond to mouse (or touch) events. -

-

-

- - - - - -
-
-
-              
-

- { - " (❂‿❂) " - } -

-

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

-
-
-
- -
-

Override position

-

- Try to resize/zoom in window - tooltip in this sample will try to - magnet to window borders, top left border is priority here. Idea - is following: sometimes you have custom border cases, like custom - scrolls, small windows, iframes, react-tooltip itself can not - cover everything, so up to you if you want to customize default - behavior, or may be just limit it like in this example. -

-
-
- - ( •̀д•́) override - - { - const d = document.documentElement; - - left = Math.min(d.clientWidth - node.clientWidth, left); - top = Math.min(d.clientHeight - node.clientHeight, top); - - left = Math.max(0, left); - top = Math.max(0, top); - - return { top, left }; - }} - > -
header
- lorem 100x1500 -
footer
-
- - ( •̀д•́) noOverride - - -
header
- lorem 100x1500 -
footer
-
-
-
-
-
-              
-

- {"( •̀д•́) override\n" + - " {\n" + - " const d = document.documentElement;\n" + - " left = Math.min(d.clientWidth - node.clientWidth, left);\n" + - " top = Math.min(d.clientHeight - node.clientHeight, top);\n" + - " left = Math.max(0, left);\n" + - " top = Math.max(0, top);\n" + - " return { top, left }\n" + - "} }>\n" + - "

header
\n" + - ' lorem image 100x1500\n' + - "
footer
\n" + - "\n" + - "( •̀д•́) noOverride\n" + - "\n" + - "
header
\n" + - ' lorem image 100x1500\n' + - "
footer
\n" + - "
"} -

-
-
-
-
-
- ); - } -} +import React, { Component } from "react"; + +import ReactTooltip from "react-tooltip"; + +export default class App extends Component { + constructor(props) { + super(props); + this.state = { + place: "top", + type: "dark", + effect: "float", + condition: false + }; + } + + changePlace(place) { + this.setState({ + place: place + }); + } + + changeType(type) { + this.setState({ + type: type + }); + } + + changeEffect(effect) { + this.setState({ + effect: effect + }); + } + + _onClick() { + this.setState({ + condition: true + }); + } + + render() { + const { place, type, effect } = this.state; + return ( +
+
+

React Tooltip

+
+ + ◕‿‿◕ + +
+
+
+ + + +
+
+              
+

Code

+
+

{' ◕‿‿◕ '}

+

+ {''} +

+
+
+
+ +
+
+
+

Advance features

+

Use everything as tooltip

+ +
+
+ + d(`・∀・)b + + + Show happy face + +
+
+ + இдஇ + + + Show sad face + +
+
+
+
+              
+

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

+
+
+
+ + + +

This is a global react component tooltip

+

You can put every thing here

+
    +
  • Word
  • +
  • Chart
  • +
  • Else
  • +
+
+
+
+              
+

+ {" σ`∀´)σ \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" + + ""} +

+
+
+
+
+
+
+

Custom event

+

+

+ + +
+
+
+              
+

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

+
+
+

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

+
+
+
+ +
+

Custom colors

+

+

+ + +
+
+
+              
+

+ {"ㅇㅅㅇ\n" + + ""} +

+
+
+

+ {"V(^-^)V\n" + + ""} +

+
+
+
+ +
+

Theme and delay

+

+

+ + +
+
+
+              
+

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

+
+
+

+ {"(・ω´・ )\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" + + " }\n" + + "}"} +

+
+
+
+ +
+

Update tip content over time

+

+

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

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

+
+
+

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

+
+
+
+ +
+

Compute or enrich tip content

+

+

+ + + "This little buddy is " + dataTip} + /> +
+
+
+              
+

+ {"(❂‿❂)\n" + + "(❂‿❂)\n" + + /* eslint-disable no-template-curly-in-string */ + " `This little buddy is ${dataTip}`}/>"} +

+
+
+
+ +
+

Test Scrolling

+

+

+
+
+ Scroll me with the mouse wheel. +
+ The tooltip will hide. +
+ Make sure you set data-iscapture="true" +
+ Math.floor(Math.random() * 100)} + /> +
+
+
+ Scroll me with the mouse wheel. +
+ The tooltip will stay visible. +
+ { + return new Date().toISOString(); + }, + 1000 + ]} + /> +
+
+
+
+              
+

+ {"

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

+
+
+

+ {"

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

+
+
+
+ +
+

Test SVG

+

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

+
+              {"  componentDidUpdate() {\n" +
+                "    ReactTooltip.rebuild()\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. +

+

+

+ + + + + + + + + + ( +
+

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'}\n" + + "/>"} +

+
+
+ +

+ When clickable property is set to true, tooltip + can respond to mouse (or touch) events. +

+

+

+ + + + + +
+
+
+              
+

+ { + " (❂‿❂) " + } +

+

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

+
+
+
+ +
+

Override position

+

+ Try to resize/zoom in window - tooltip in this sample will try to + magnet to window borders, top left border is priority here. Idea + is following: sometimes you have custom border cases, like custom + scrolls, small windows, iframes, react-tooltip itself can not + cover everything, so up to you if you want to customize default + behavior, or may be just limit it like in this example. +

+
+
+ + ( •̀д•́) override + + { + const d = document.documentElement; + + left = Math.min(d.clientWidth - node.clientWidth, left); + top = Math.min(d.clientHeight - node.clientHeight, top); + + left = Math.max(0, left); + top = Math.max(0, top); + + return { top, left }; + }} + > +
header
+ lorem 100x1500 +
footer
+
+ + ( •̀д•́) noOverride + + +
header
+ lorem 100x1500 +
footer
+
+
+
+
+
+              
+

+ {"( •̀д•́) override\n" + + " {\n" + + " const d = document.documentElement;\n" + + " left = Math.min(d.clientWidth - node.clientWidth, left);\n" + + " top = Math.min(d.clientHeight - node.clientHeight, top);\n" + + " left = Math.max(0, left);\n" + + " top = Math.max(0, top);\n" + + " return { top, left }\n" + + "} }>\n" + + "

header
\n" + + ' lorem image 100x1500\n' + + "
footer
\n" + + "\n" + + "( •̀д•́) noOverride\n" + + "\n" + + "
header
\n" + + ' lorem image 100x1500\n' + + "
footer
\n" + + "
"} +

+
+
+
+
+
+ ); + } +}