feat(TetherContent): Add tetherRef to TetherContent (#181)

TheSharpieOne · eddywashere · commit 6be1a6755da7 · 2016-10-17T20:17:24.000-07:00
* feat(tether): add ability to get tether ref Fixes #174 Add `tetherRef` to TetherContent which works similarly to `ref` * pass additional props to the inner div
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
@@ -36,6 +36,8 @@ export default class TooltipsPage extends React.Component {
   // target div ID, popover is attached to this element
   tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   // optionally overide tether config http://tether.io/#options
+  tetherRef: PropType.function,
+  // function which is passed a reference to the instance of tether for manually \`position()\`ing
   delay: PropTypes.oneOfType([
     PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
     PropTypes.number
diff --git a/src/TetherContent.js b/src/TetherContent.js
@@ -10,11 +10,13 @@ const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   toggle: PropTypes.func.isRequired,
   tether: PropTypes.object.isRequired,
+  tetherRef: PropTypes.func,
   style: PropTypes.node
 };
 
 const defaultProps = {
-  isOpen: false
+  isOpen: false,
+  tetherRef: function () {}
 };
 
 class TetherContent extends React.Component {
@@ -89,6 +91,7 @@ class TetherContent extends React.Component {
     if (this._tether) {
       this._tether.destroy();
       this._tether = null;
+      this.props.tetherRef(this._tether);
     }
   }
 
@@ -106,6 +109,7 @@ class TetherContent extends React.Component {
     }
 
     this._tether = new Tether(this.getTetherConfig());
+    this.props.tetherRef(this._tether);
     this._tether.position();
     this._element.childNodes[0].focus();
   }
diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -1,4 +1,6 @@
 import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import omit from 'lodash.omit';
 import TetherContent from './TetherContent';
 import { getTetherAttachments, tetherAttachements } from './utils';
 
@@ -8,8 +10,9 @@ const propTypes = {
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   tether: PropTypes.object,
+  tetherRef: PropTypes.func,
+  classNames: PropTypes.string,
   toggle: PropTypes.func,
-  children: PropTypes.node,
   autohide: PropTypes.bool,
   delay: PropTypes.oneOfType([
     PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
@@ -176,22 +179,28 @@ class Tooltip extends React.Component {
       return null;
     }
 
+    const attributes = omit(this.props, Object.keys(propTypes));
+    const classes = classNames(
+      'tooltip-inner',
+      this.props.classNames
+    );
+
     let tetherConfig = this.getTetherConfig();
 
     return (
       <TetherContent
         arrow="tooltip"
         tether={tetherConfig}
+        tetherRef={this.props.tetherRef}
         isOpen={this.props.isOpen}
         toggle={this.toggle}
       >
         <div
-          className="tooltip-inner"
+          {...attributes}
+          className={classes}
           onMouseOver={this.onMouseOverTooltipContent}
           onMouseLeave={this.onMouseLeaveTooltipContent}
-        >
-          {this.props.children}
-        </div>
+        />
       </TetherContent>
     );
   }
diff --git a/src/__tests__/TetherContent.spec.js b/src/__tests__/TetherContent.spec.js
@@ -77,6 +77,20 @@ describe('TetherContent', () => {
       expect(instance._element).toBe(null);
       expect(instance._tether).toBe(null);
     });
+
+
+
+    it('should pass the new tether reference', () => {
+      state = true;
+      const tetherRef = jasmine.createSpy();
+      const wrapper = mount(<TetherContent tetherRef={tetherRef} tether={tetherConfig} isOpen={state} toggle={toggle}><p>Content</p></TetherContent>);
+      const instance = wrapper.instance();
+
+      wrapper.unmount();
+
+      expect(tetherRef.calls.count()).toBe(2);
+      expect(tetherRef.calls.mostRecent().args[0]).toEqual(instance._tether);
+    });
   });
 
   describe('show', () => {
@@ -92,6 +106,15 @@ describe('TetherContent', () => {
       expect(instance._element.textContent).toBe('Content');
       expect(instance._tether.enabled).toBe(true);
     });
+
+    it('should pass the new tether reference', () => {
+      state = true;
+      const tetherRef = jasmine.createSpy();
+      const wrapper = mount(<TetherContent tetherRef={tetherRef} tether={tetherConfig} isOpen={state} toggle={toggle}><p>Content</p></TetherContent>);
+      const instance = wrapper.instance();
+      expect(tetherRef.calls.count()).toBe(1);
+      expect(tetherRef.calls.first().args[0]).toEqual(instance._tether);
+    });
   });
 
   describe('getTarget', () => {
