Merge pull request #132 from wwayne/enhance-getContent

Make getContent to support dynamical generate content while hover
ReactTooltip · Jul 12, 2016 · 547158b · 547158b
2 parents 7f6b50f + 1257d1f
commit 547158b
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 10 deletions.
diff --git a/.npmignore b/.npmignore
@@ -9,6 +9,7 @@ example/
 test/
 bin/
 CHANGELOG.md
+src/
 
 // setting files
 .babelrc

diff --git a/README.md b/README.md
@@ -61,6 +61,7 @@ class	|   data-class  |  String  |   | extra custom class, can use !important to
  delayHide	|   data-delay-hide  |  Number  |   | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
  delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
+ getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
 
 ## Using react component as tooltip
 Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

diff --git a/example/src/index.js b/example/src/index.js
@@ -221,6 +221,36 @@ const Test = React.createClass({
               </div>
             </pre>
           </div>
+
+          <div className="section">
+            <h4 className='title'>Update tip content over time</h4>
+            <p className="sub-title"></p>
+
+            <div className="example-jsx">
+              <div className="side">
+                <a data-for='getContent' data-tip>=͟͟͞͞( •̀д•́)</a>
+                <ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)}/>
+              </div>
+
+              <div className="side">
+                <a data-for='overTime' data-tip>=͟͟͞͞( •̀д•́)</a>
+                <ReactTooltip id='overTime'
+                  getContent={[() => {return new Date().toISOString()}, 1000]}/>
+              </div>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{"<a data-for='getContent' data-tip>=͟͟͞͞( •̀д•́)</a>\n" +
+                "<ReactTooltip id='getContent' getContent={() => Math.floor(Math.random() * 100)} />"}</p>
+              </div>
+
+              <div>
+                <p>{"<a data-for='overTime' data-tip>=͟͟͞͞( •̀д•́)</a>\n" +
+                "<ReactTooltip id='overTime' getContent={[() => {return new Date().toISOString()}, 1000]}/>"}</p>
+              </div>
+            </pre>
+          </div>
         </section>
       </div>
     )

diff --git a/src/index.js b/src/index.js
@@ -38,7 +38,7 @@ class ReactTooltip extends Component {
     watchWindow: PropTypes.bool,
     isCapture: PropTypes.bool,
     globalEventOff: PropTypes.string,
-    getContent: PropTypes.func
+    getContent: PropTypes.any
   }
 
   constructor (props) {
@@ -64,6 +64,7 @@ class ReactTooltip extends Component {
     this.mount = true
     this.delayShowLoop = null
     this.delayHideLoop = null
+    this.intervalUpdateContent = null
   }
 
   componentDidMount () {
@@ -75,8 +76,7 @@ class ReactTooltip extends Component {
   componentWillUnmount () {
     this.mount = false
 
-    clearTimeout(this.delayShowLoop)
-    clearTimeout(this.delayHideLoop)
+    this.clearTimer()
 
     this.unbindListener()
     this.removeScrollListener()
@@ -170,11 +170,13 @@ class ReactTooltip extends Component {
     const originTooltip = e.currentTarget.getAttribute('data-tip')
     const isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false
 
-    let content
-    if (children) {
-      content = children
-    } else if (getContent) {
-      content = getContent()
+    let content = children
+    if (getContent) {
+      if (Array.isArray(getContent)) {
+        content = getContent[0] && getContent[0]()
+      } else {
+        content = getContent()
+      }
     }
 
     const placeholder = getTipContent(originTooltip, content, isMultiline)
@@ -193,6 +195,16 @@ class ReactTooltip extends Component {
     }, () => {
       this.addScrollListener(e)
       this.updateTooltip(e)
+
+      if (getContent && Array.isArray(getContent)) {
+        this.intervalUpdateContent = setInterval(() => {
+          const {getContent} = this.props
+          const placeholder = getTipContent(originTooltip, getContent[0](), isMultiline)
+          this.setState({
+            placeholder
+          })
+        }, getContent[1])
+      }
     })
   }
 
@@ -228,8 +240,7 @@ class ReactTooltip extends Component {
 
     if (!this.mount) return
 
-    clearTimeout(this.delayShowLoop)
-    clearTimeout(this.delayHideLoop)
+    this.clearTimer()
     this.delayHideLoop = setTimeout(() => {
       this.setState({
         show: false
@@ -282,6 +293,15 @@ class ReactTooltip extends Component {
     }
   }
 
+  /**
+   * CLear all kinds of timeout of interval
+   */
+  clearTimer () {
+    clearTimeout(this.delayShowLoop)
+    clearTimeout(this.delayHideLoop)
+    clearInterval(this.intervalUpdateContent)
+  }
+
   render () {
     const {placeholder, extraClass, html} = this.state
     let tooltipClass = classname(
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ example/ @@
     test/
     bin/
     CHANGELOG.md
+    src/
     // setting files
     .babelrc
@@ Expand Down @@