fix(example): 'made dev' works again, small fixes.

Install react, so 'make dev' will launch the example. Fix issue #328 - use for loop instead of iterator, for IE. Fix issue #341 - propagate 'id' to the wrapper element, for assessibility.
CodeForked · Apr 9, 2018 · 7b286bb · 7b286bb
1 parent 6f615d5
commit 7b286bb
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 65 deletions.
diff --git a/example/src/index.js b/example/src/index.js
@@ -1,10 +1,10 @@
 'use strict'
 
-import React, { Component } from 'react'
-import {render, findDOMNode} from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import ReactTooltip from '../../src'
 
-class Test extends Component {
+class Test extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -157,8 +157,8 @@ class Test extends Component {
                 <ReactTooltip id='custom-off-event'/>
                 {/*
                   <div>
-                    <button onClick={() => { ReactTooltip.show(findDOMNode(this.refs.target)) }}>Show toolip</button>
-                    <button onClick={() => { ReactTooltip.hide(findDOMNode(this.refs.target)) }}>Hide toolip</button>
+                    <button onClick={() => { ReactTooltip.show(ReactDOM.findDOMNode(this.refs.target)) }}>Show toolip</button>
+                    <button onClick={() => { ReactTooltip.hide(ReactDOM.findDOMNode(this.refs.target)) }}>Hide toolip</button>
                   </div>
                 */}
               </div>
@@ -252,4 +252,4 @@ class Test extends Component {
   }
 }
 
-render(<Test />, document.getElementById('main'))
+ReactDOM.render(<Test />, document.getElementById('main'))
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "react tooltip component",
   "main": "dist/index.js",
   "scripts": {
@@ -73,6 +73,8 @@
     "jsdom": "^9.2.1",
     "mocha": "^2.5.3",
     "node-sass": "^3.7.0",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
     "react-addons-test-utils": "^15.1.0",
     "sinon": "^1.17.4",
     "snazzy": "^2.0.1",

diff --git a/src/decorators/trackRemoval.js b/src/decorators/trackRemoval.js
@@ -20,8 +20,10 @@ export default function (target) {
     if (MutationObserver == null) return
 
     const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const element of mutation.removedNodes) {
+      for (let m1 = 0; m1 < mutations.length; m1++) {
+        const mutation = mutations[m1]
+        for (let m2 = 0; m2 < mutation.removedNodes.length; m2++) {
+          const element = mutation.removedNodes[m2]
           if (element === this.state.currentTarget) {
             this.hideTooltip()
             return

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 'use strict'
 
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import classname from 'classnames'
@@ -28,7 +28,7 @@ import cssStyle from './style'
 @isCapture
 @getEffect
 @trackRemoval
-class ReactTooltip extends Component {
+class ReactTooltip extends React.Component {
 
   static propTypes = {
     children: PropTypes.any,
@@ -450,13 +450,15 @@ class ReactTooltip extends Component {
     if (html) {
       return (
         <Wrapper className={`${tooltipClass} ${extraClass}`}
+                 id={this.props.id}
                  {...ariaProps}
                  data-id='tooltip'
                  dangerouslySetInnerHTML={{__html: placeholder}}/>
       )
     } else {
       return (
         <Wrapper className={`${tooltipClass} ${extraClass}`}
+                 id={this.props.id}
                  {...ariaProps}
                  data-id='tooltip'>{placeholder}</Wrapper>
       )

diff --git a/standalone/react-tooltip.js b/standalone/react-tooltip.js
@@ -1427,52 +1427,13 @@ exports.default = function (target) {
     if (MutationObserver == null) return;
 
     var observer = new MutationObserver(function (mutations) {
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
-
-      try {
-        for (var _iterator = mutations[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var mutation = _step.value;
-          var _iteratorNormalCompletion2 = true;
-          var _didIteratorError2 = false;
-          var _iteratorError2 = undefined;
-
-          try {
-            for (var _iterator2 = mutation.removedNodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var element = _step2.value;
-
-              if (element === _this.state.currentTarget) {
-                _this.hideTooltip();
-                return;
-              }
-            }
-          } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                _iterator2.return();
-              }
-            } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
-              }
-            }
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
+      for (var m1 = 0; m1 < mutations.length; m1++) {
+        var mutation = mutations[m1];
+        for (var m2 = 0; m2 < mutation.removedNodes.length; m2++) {
+          var element = mutation.removedNodes[m2];
+          if (element === _this.state.currentTarget) {
+            _this.hideTooltip();
+            return;
           }
         }
       }
@@ -1640,8 +1601,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.default)(_class = (0, _customEvent2.default)(_class = (0, _isCapture2.default)(_class = (0, _getEffect2.default)(_class = (0, _trackRemoval2.default)(_class = (_temp = _class2 = function (_Component) {
-  _inherits(ReactTooltip, _Component);
+var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.default)(_class = (0, _customEvent2.default)(_class = (0, _isCapture2.default)(_class = (0, _getEffect2.default)(_class = (0, _trackRemoval2.default)(_class = (_temp = _class2 = function (_React$Component) {
+  _inherits(ReactTooltip, _React$Component);
 
   function ReactTooltip(props) {
     _classCallCheck(this, ReactTooltip);
@@ -2097,14 +2058,16 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
       }
 
       if (html) {
-        return _react2.default.createElement(Wrapper, _extends({ className: tooltipClass + ' ' + extraClass
+        return _react2.default.createElement(Wrapper, _extends({ className: tooltipClass + ' ' + extraClass,
+          id: this.props.id
         }, ariaProps, {
           'data-id': 'tooltip',
           dangerouslySetInnerHTML: { __html: placeholder } }));
       } else {
         return _react2.default.createElement(
           Wrapper,
-          _extends({ className: tooltipClass + ' ' + extraClass
+          _extends({ className: tooltipClass + ' ' + extraClass,
+            id: this.props.id
           }, ariaProps, {
             'data-id': 'tooltip' }),
           placeholder
@@ -2114,7 +2077,7 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
   }]);
 
   return ReactTooltip;
-}(_react.Component), _class2.propTypes = {
+}(_react2.default.Component), _class2.propTypes = {
   children: _propTypes2.default.any,
   place: _propTypes2.default.string,
   type: _propTypes2.default.string,

diff --git a/standalone/react-tooltip.min.js b/standalone/react-tooltip.min.js