Skip to content

Commit 6be1a67

Browse files
TheSharpieOneeddywashere
authored andcommitted
feat(TetherContent): Add tetherRef to TetherContent (#181)
* 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
1 parent ebdecb8 commit 6be1a67

4 files changed

Lines changed: 44 additions & 6 deletions

File tree

docs/lib/Components/TooltipsPage.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export default class TooltipsPage extends React.Component {
3636
// target div ID, popover is attached to this element
3737
tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
3838
// optionally overide tether config http://tether.io/#options
39+
tetherRef: PropType.function,
40+
// function which is passed a reference to the instance of tether for manually \`position()\`ing
3941
delay: PropTypes.oneOfType([
4042
PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
4143
PropTypes.number

src/TetherContent.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@ const propTypes = {
1010
isOpen: PropTypes.bool.isRequired,
1111
toggle: PropTypes.func.isRequired,
1212
tether: PropTypes.object.isRequired,
13+
tetherRef: PropTypes.func,
1314
style: PropTypes.node
1415
};
1516

1617
const defaultProps = {
17-
isOpen: false
18+
isOpen: false,
19+
tetherRef: function () {}
1820
};
1921

2022
class TetherContent extends React.Component {
@@ -89,6 +91,7 @@ class TetherContent extends React.Component {
8991
if (this._tether) {
9092
this._tether.destroy();
9193
this._tether = null;
94+
this.props.tetherRef(this._tether);
9295
}
9396
}
9497

@@ -106,6 +109,7 @@ class TetherContent extends React.Component {
106109
}
107110

108111
this._tether = new Tether(this.getTetherConfig());
112+
this.props.tetherRef(this._tether);
109113
this._tether.position();
110114
this._element.childNodes[0].focus();
111115
}

src/Tooltip.js

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { PropTypes } from 'react';
2+
import classNames from 'classnames';
3+
import omit from 'lodash.omit';
24
import TetherContent from './TetherContent';
35
import { getTetherAttachments, tetherAttachements } from './utils';
46

@@ -8,8 +10,9 @@ const propTypes = {
810
isOpen: PropTypes.bool,
911
disabled: PropTypes.bool,
1012
tether: PropTypes.object,
13+
tetherRef: PropTypes.func,
14+
classNames: PropTypes.string,
1115
toggle: PropTypes.func,
12-
children: PropTypes.node,
1316
autohide: PropTypes.bool,
1417
delay: PropTypes.oneOfType([
1518
PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
@@ -176,22 +179,28 @@ class Tooltip extends React.Component {
176179
return null;
177180
}
178181

182+
const attributes = omit(this.props, Object.keys(propTypes));
183+
const classes = classNames(
184+
'tooltip-inner',
185+
this.props.classNames
186+
);
187+
179188
let tetherConfig = this.getTetherConfig();
180189

181190
return (
182191
<TetherContent
183192
arrow="tooltip"
184193
tether={tetherConfig}
194+
tetherRef={this.props.tetherRef}
185195
isOpen={this.props.isOpen}
186196
toggle={this.toggle}
187197
>
188198
<div
189-
className="tooltip-inner"
199+
{...attributes}
200+
className={classes}
190201
onMouseOver={this.onMouseOverTooltipContent}
191202
onMouseLeave={this.onMouseLeaveTooltipContent}
192-
>
193-
{this.props.children}
194-
</div>
203+
/>
195204
</TetherContent>
196205
);
197206
}

src/__tests__/TetherContent.spec.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,20 @@ describe('TetherContent', () => {
7777
expect(instance._element).toBe(null);
7878
expect(instance._tether).toBe(null);
7979
});
80+
81+
82+
83+
it('should pass the new tether reference', () => {
84+
state = true;
85+
const tetherRef = jasmine.createSpy();
86+
const wrapper = mount(<TetherContent tetherRef={tetherRef} tether={tetherConfig} isOpen={state} toggle={toggle}><p>Content</p></TetherContent>);
87+
const instance = wrapper.instance();
88+
89+
wrapper.unmount();
90+
91+
expect(tetherRef.calls.count()).toBe(2);
92+
expect(tetherRef.calls.mostRecent().args[0]).toEqual(instance._tether);
93+
});
8094
});
8195

8296
describe('show', () => {
@@ -92,6 +106,15 @@ describe('TetherContent', () => {
92106
expect(instance._element.textContent).toBe('Content');
93107
expect(instance._tether.enabled).toBe(true);
94108
});
109+
110+
it('should pass the new tether reference', () => {
111+
state = true;
112+
const tetherRef = jasmine.createSpy();
113+
const wrapper = mount(<TetherContent tetherRef={tetherRef} tether={tetherConfig} isOpen={state} toggle={toggle}><p>Content</p></TetherContent>);
114+
const instance = wrapper.instance();
115+
expect(tetherRef.calls.count()).toBe(1);
116+
expect(tetherRef.calls.first().args[0]).toEqual(instance._tether);
117+
});
95118
});
96119

97120
describe('getTarget', () => {

0 commit comments

Comments
 (0)