Fix errors and update for react 16.6. Fix #81

romainberger · Dec 18, 2018 · 9c47675 · 9c47675
1 parent b0ac079
commit 9c47675
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 74 deletions.
diff --git a/example/package.json b/example/package.json
@@ -13,8 +13,8 @@
     "babel-core": "^5.8.21",
     "babel-loader": "^5.3.2",
     "history": "^4.7.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "react-router": "3",
     "superagent": "^1.8.3",
     "webpack": "^1.11.0"

diff --git a/example/src/home.js b/example/src/home.js
@@ -101,8 +101,7 @@ export default class Home extends Component {
                 Result:
                 <span className="btn btn-default" id="result" onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip} style={{marginLeft: 10}}>Hover me!</span>
                 <ToolTip active={this.state.isTooltipActive} parent="#result" position={this.state.position} arrow={this.state.arrow} align={this.state.align} group="result">
-
-                { this.state.isTooltipLoading ? 'Loading...' : <div>Tooltip content here</div>}
+                  { this.state.isTooltipLoading ? 'Loading...' : <div>Tooltip content here</div>}
                 </ToolTip>
               </div>
             </div>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1809,14 +1809,22 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.6.0:
+prop-types@^15.5.4, prop-types@^15.5.6:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -1908,14 +1916,15 @@ react-deep-force-update@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
 
-react-dom@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+react-dom@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
 
 react-hot-loader@next:
   version "3.0.0-beta.7"
@@ -1946,14 +1955,15 @@ react-router@3:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+react@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
 
 [email protected]:
   version "1.0.27-1"
@@ -2149,6 +2159,14 @@ [email protected], safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
+scheduler@^0.11.2:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"
+  integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 semver@^5.3.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"

diff --git a/package.json b/package.json
@@ -27,14 +27,14 @@
   "author": "Romain Berger <[email protected]>",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
   },
   "devDependencies": {
     "babel": "^5.8.21",
     "mocha": "^2.3.3",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
     "react-test-renderer": "^16.0.0"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
+import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
-import ReactDOM, {unstable_renderSubtreeIntoContainer as renderSubtreeIntoContainer} from 'react-dom'
 
 const FG_SIZE = 8
 const BG_SIZE = 9
@@ -31,6 +31,7 @@ class Card extends Component {
     style: PropTypes.object,
     useHover: PropTypes.bool
   }
+
   static defaultProps = {
     active: false,
     position: 'right',
@@ -39,17 +40,23 @@ class Card extends Component {
     style: {style: {}, arrowStyle: {}},
     useHover: true
   }
+
   state = {
     hover: false,
     transition: 'opacity',
     width: 0,
-    height: 0
+    height: 0,
   }
+
   margin = 15
+
   defaultArrowStyle = {
     color: '#fff',
     borderColor: 'rgba(0,0,0,.4)'
   }
+
+  rootRef = React.createRef()
+
   getGlobalStyle() {
     if (!this.props.parentEl) {
       return {display: 'none'}
@@ -70,13 +77,15 @@ class Card extends Component {
 
     return this.mergeStyle(style, this.props.style.style)
   }
+
   getBaseArrowStyle() {
     return {
       position: 'absolute',
       content: '""',
       transition: 'all .3s ease-in-out'
     }
   }
+
   getArrowStyle() {
     let fgStyle = this.getBaseArrowStyle()
     let bgStyle = this.getBaseArrowStyle()
@@ -170,6 +179,7 @@ class Card extends Component {
       bgStyle: this.mergeStyle(bgStyle, propsArrowStyle)
     }
   }
+
   mergeStyle(style, theme) {
     if (theme) {
       let { position, top, left, right, bottom, marginLeft, marginRight, ...validTheme } = theme
@@ -182,10 +192,11 @@ class Card extends Component {
 
     return style
   }
+
   getStyle(position, arrow) {
-    let alignOffset = 0;
+    let alignOffset = 0
     let parent = this.props.parentEl
-    let align = this.props.align;
+    let align = this.props.align
     let tooltipPosition = parent.getBoundingClientRect()
     let scrollY = (window.scrollY !== undefined) ? window.scrollY : window.pageYOffset
     let scrollX = (window.scrollX !== undefined) ? window.scrollX : window.pageXOffset
@@ -205,10 +216,10 @@ class Card extends Component {
     }
 
     if (align === 'left') {
-      alignOffset = - parentSize.width / 2 + FG_SIZE;
+      alignOffset = - parentSize.width / 2 + FG_SIZE
     }
     else if (align === 'right') {
-      alignOffset = parentSize.width / 2 - FG_SIZE;
+      alignOffset = parentSize.width / 2 - FG_SIZE
     }
 
     const stylesFromPosition = {
@@ -250,6 +261,7 @@ class Card extends Component {
 
     return style
   }
+
   checkWindowPosition(style, arrowStyle) {
     if (this.props.position === 'top' || this.props.position === 'bottom') {
       if (style.left < 0) {
@@ -291,32 +303,46 @@ class Card extends Component {
 
     return {style, arrowStyle}
   }
+
   handleMouseEnter = () => {
     this.props.active && this.props.useHover && this.setState({hover: true})
   }
+
   handleMouseLeave = () => {
     this.setState({hover: false})
   }
+
+  static getDerivedStateFromProps(props, state) {
+    return {
+      transition: state.hover || props.active ? 'all' : 'opacity',
+    }
+  }
+
   componentDidMount() {
     this.updateSize()
   }
-  componentWillReceiveProps() {
-    this.setState({transition: this.state.hover || this.props.active ? 'all' : 'opacity'}, () => {
-      this.updateSize()
-    })
+
+  componentDidUpdate() {
+    this.updateSize()
   }
+
   updateSize() {
-    let self = ReactDOM.findDOMNode(this)
-    this.setState({
-      width: self.offsetWidth,
-      height: self.offsetHeight
-    })
+    const newWidth = this.rootRef.current.offsetWidth
+    const newHeight = this.rootRef.current.offsetHeight
+
+    if (newWidth !== this.state.width || newHeight !== this.state.height) {
+      this.setState({
+        width: newWidth,
+        height: newHeight,
+      })
+    }
   }
+
   render() {
     let {style, arrowStyle} = this.checkWindowPosition(this.getGlobalStyle(), this.getArrowStyle())
 
     return (
-      <div style={style} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <div style={style} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} ref={ this.rootRef }>
         {this.props.arrow ? (
           <div>
             <span style={arrowStyle.fgStyle}/>
@@ -342,18 +368,39 @@ export default class ToolTip extends Component {
     group: PropTypes.string,
     tooltipTimeout: PropTypes.number
   }
+
   static defaultProps = {
     active: false,
     group: 'main',
     tooltipTimeout: 500
   }
+
+  createPortal() {
+    portalNodes[this.props.group] = {
+      node: document.createElement('div'),
+      timeout: false
+    }
+    portalNodes[this.props.group].node.className = 'ToolTipPortal'
+    document.body.appendChild(portalNodes[this.props.group].node)
+  }
+
+  renderPortal(props) {
+    if (!portalNodes[this.props.group]) {
+      this.createPortal()
+    }
+    let {parent, ...other} = props
+    let parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent
+    ReactDOM.render(<Card parentEl={parentEl} {...other}/>, portalNodes[this.props.group].node)
+  }
+
   componentDidMount() {
     if (!this.props.active) {
       return
     }
 
     this.renderPortal(this.props)
   }
+
   componentWillReceiveProps(nextProps) {
     if ((!portalNodes[this.props.group] && !nextProps.active) ||
       (!this.props.active && !nextProps.active)) {
@@ -377,32 +424,21 @@ export default class ToolTip extends Component {
 
     this.renderPortal(newProps)
   }
+
   componentWillUnmount() {
     if (portalNodes[this.props.group]) {
       ReactDOM.unmountComponentAtNode(portalNodes[this.props.group].node)
       clearTimeout(portalNodes[this.props.group].timeout)
-      document.body.removeChild(portalNodes[this.props.group].node);
-    }
-  }
-  createPortal() {
-    portalNodes[this.props.group] = {
-      node: document.createElement('div'),
-      timeout: false
-    }
-    portalNodes[this.props.group].node.className = 'ToolTipPortal'
-    document.body.appendChild(portalNodes[this.props.group].node)
-  }
-  renderPortal(props) {
-    if (!portalNodes[this.props.group]) {
-      this.createPortal()
+
+      try {
+        document.body.removeChild(portalNodes[this.props.group].node)
+      }
+      catch(e) {}
+
+      portalNodes[this.props.group] = null
     }
-    let {parent, ...other} = props
-    let parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent
-    renderSubtreeIntoContainer(this, <Card parentEl={parentEl} {...other}/>, portalNodes[this.props.group].node)
-  }
-  shouldComponentUpdate() {
-    return false
   }
+
   render() {
     return null
   }
@@ -443,9 +479,15 @@ export class StatefulToolTip extends Component {
       ...props
     } = this.props
 
-    return [
-      <span className={ className } onMouseEnter={ this.onMouseEnter } onMouseLeave={ this.onMouseLeave } ref={ p => this.parent = p } key="parent">{ this.props.parent }</span>,
-      this.parent ? <ToolTip { ...props } active={ this.state.tooltipVisible } parent={ this.parent } key="tooltip">{ this.props.children }</ToolTip> : null,
-    ]
+    return (
+      <Fragment>
+        <span className={ className } onMouseEnter={ this.onMouseEnter } onMouseLeave={ this.onMouseLeave } ref={ p => this.parent = p } key="parent">{ this.props.parent }</span>
+        {
+          this.parent ?
+            <ToolTip { ...props } active={ this.state.tooltipVisible } parent={ this.parent } key="tooltip">{ this.props.children }</ToolTip>
+            : null
+        }
+      </Fragment>
+    )
   }
 }