Merge branch 'master' into current_target_fix

jafin · Jun 4, 2018 · 99bf5ec · 99bf5ec
2 parents 4f89a2d + 871b77c
commit 99bf5ec
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ className	|   data-class  |  String  |   | extra custom class, can use !importan
  delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
  insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
- getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
+ getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically
  afterShow | null | Func | () => {} | Function that will be called after tooltip show
  afterHide | null | Func | () => {} | Function that will be called after tooltip hide
  disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false

diff --git a/example/src/index.js b/example/src/index.js
@@ -248,6 +248,27 @@ class Test extends React.Component {
               </div>
             </pre>
           </div>
+          <div className="section">
+            <h4 className='title'>Compute or enrich tip content</h4>
+            <p className="sub-title"></p>
+            <div className="example-jsx">
+              <div className="side">
+                <a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>
+              </div>
+              <div className="side">
+                <a data-for='enrich' data-tip='really high'>(❂‿❂)</a>
+              </div>
+              <ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{"<a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>\n" +
+                "<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" + 
+                "<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>"}</p>
+              </div>
+            </pre>
+          </div>
           <div className="section">
             <h4 className='title'>Test Scrolling</h4>
             <p className="sub-title"></p>

diff --git a/src/decorators/customEvent.js b/src/decorators/customEvent.js
@@ -33,7 +33,27 @@ const setUntargetItems = function (currentTarget, targetArray) {
   }
 }
 
-let customListener
+const customListeners = {
+  id: '9b69f92e-d3fe-498b-b1b4-c5e63a51b0cf',
+  set (target, event, listener) {
+    if (this.id in target) {
+      const map = target[this.id]
+      map[event] = listener
+    } else {
+      // this is workaround for WeakMap, which is not supported in older browsers, such as IE
+      Object.defineProperty(target, this.id, {
+        configurable: true,
+        value: { [event]: listener }
+      })
+    }
+  },
+  get (target, event) {
+    const map = target[this.id]
+    if (map !== undefined) {
+      return map[event]
+    }
+  }
+}
 
 export default function (target) {
   target.prototype.isCustomEvent = function (ele) {
@@ -48,8 +68,9 @@ export default function (target) {
     const dataEventOff = ele.getAttribute('data-event-off') || eventOff
 
     dataEvent.split(' ').forEach(event => {
-      ele.removeEventListener(event, customListener)
-      customListener = checkStatus.bind(this, dataEventOff)
+      ele.removeEventListener(event, customListeners.get(ele, event))
+      const customListener = checkStatus.bind(this, dataEventOff)
+      customListeners.set(ele, event, customListener)
       ele.addEventListener(event, customListener, false)
     })
     if (dataEventOff) {
@@ -66,7 +87,7 @@ export default function (target) {
     const dataEvent = event || ele.getAttribute('data-event')
     const dataEventOff = eventOff || ele.getAttribute('data-event-off')
 
-    ele.removeEventListener(dataEvent, customListener)
+    ele.removeEventListener(dataEvent, customListeners.get(ele, event))
     if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip)
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -237,9 +237,9 @@ class ReactTooltip extends React.Component {
     let content
     if (getContent) {
       if (Array.isArray(getContent)) {
-        content = getContent[0] && getContent[0]()
+        content = getContent[0] && getContent[0](this.state.originTooltip)
       } else {
-        content = getContent()
+        content = getContent(this.state.originTooltip)
       }
     }
 

diff --git a/standalone/react-tooltip.js b/standalone/react-tooltip.js
@@ -1240,8 +1240,9 @@ exports.default = function (target) {
     var dataEventOff = ele.getAttribute('data-event-off') || eventOff;
 
     dataEvent.split(' ').forEach(function (event) {
-      ele.removeEventListener(event, customListener);
-      customListener = checkStatus.bind(_this, dataEventOff);
+      ele.removeEventListener(event, customListeners.get(ele, event));
+      var customListener = checkStatus.bind(_this, dataEventOff);
+      customListeners.set(ele, event, customListener);
       ele.addEventListener(event, customListener, false);
     });
     if (dataEventOff) {
@@ -1261,11 +1262,13 @@ exports.default = function (target) {
     var dataEvent = event || ele.getAttribute('data-event');
     var dataEventOff = eventOff || ele.getAttribute('data-event-off');
 
-    ele.removeEventListener(dataEvent, customListener);
+    ele.removeEventListener(dataEvent, customListeners.get(ele, event));
     if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip);
   };
 };
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
  * Custom events to control showing and hiding of tooltip
  *
@@ -1302,7 +1305,26 @@ var setUntargetItems = function setUntargetItems(currentTarget, targetArray) {
   }
 };
 
-var customListener = void 0;
+var customListeners = {
+  id: '9b69f92e-d3fe-498b-b1b4-c5e63a51b0cf',
+  set: function set(target, event, listener) {
+    if (this.id in target) {
+      var map = target[this.id];
+      map[event] = listener;
+    } else {
+      Object.defineProperty(target, this.id, {
+        configurable: true,
+        value: _defineProperty({}, event, listener)
+      });
+    }
+  },
+  get: function get(target, event) {
+    var map = target[this.id];
+    if (map !== undefined) {
+      return map[event];
+    }
+  }
+};
 
 },{}],14:[function(require,module,exports){
 'use strict';
@@ -1807,9 +1829,9 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
       var content = void 0;
       if (getContent) {
         if (Array.isArray(getContent)) {
-          content = getContent[0] && getContent[0]();
+          content = getContent[0] && getContent[0](this.state.originTooltip);
         } else {
-          content = getContent();
+          content = getContent(this.state.originTooltip);
         }
       }