Skip to content

Commit 1c9c570

Browse files
kuykuy
committed
Bump 0.4.5
1 parent 3d026a4 commit 1c9c570

File tree

3 files changed

+73
-53
lines changed

3 files changed

+73
-53
lines changed

‎lib/tooltip.js

+53-37
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ var _react = require('react');
1212

1313
var _react2 = _interopRequireDefault(_react);
1414

15+
var _reactDom = require('react-dom');
16+
17+
var _reactDom2 = _interopRequireDefault(_reactDom);
18+
1519
var _reactRedux = require('react-redux');
1620

1721
var _utils = require('./utils');
@@ -81,74 +85,86 @@ var Tooltip = function (_Component) {
8185
}
8286

8387
_createClass(Tooltip, [{
84-
key: 'componentWillUpdate',
85-
value: function componentWillUpdate(nextProps) {
88+
key: 'componentWillReceiveProps',
89+
value: function componentWillReceiveProps(nextProps) {
8690
var el = nextProps.el;
8791
var place = nextProps.place;
92+
var content = nextProps.content;
8893

89-
if (el && (this.props.el != el || this.props.place !== place)) {
94+
if (el && (this.props.el != el || this.props.place !== place || this.props.content !== content)) {
9095
this.updatePosition(nextProps);
9196
}
9297
}
9398
}, {
94-
key: 'componentDidUpdate',
95-
value: function componentDidUpdate(prevProps) {
96-
var content = prevProps.content;
99+
key: 'updatePosition',
100+
value: function updatePosition(props) {
101+
var _this2 = this;
97102

98-
if (this.props.content !== content) {
99-
this.updatePosition(this.props);
100-
}
103+
// Setup hidden DOM element to determine size of the content
104+
var content = this.children(props);
105+
_reactDom2.default.render(_react2.default.createElement(
106+
'div',
107+
null,
108+
content
109+
), this.refs.shadow, function () {
110+
var state = (0, _utils.adjust)(_this2.refs.shadow, props);
111+
_this2.setState(state);
112+
});
101113
}
102114
}, {
103-
key: 'updatePosition',
104-
value: function updatePosition(props) {
105-
var state = (0, _utils.adjust)(this.refs.tooltip, props);
106-
this.setState(state);
115+
key: 'children',
116+
value: function children(props) {
117+
if (typeof props === 'undefined') {
118+
props = this.props;
119+
}
120+
var _props = props;
121+
var content = _props.content;
122+
123+
return content ? content : props.children;
107124
}
108125
}, {
109126
key: 'render',
110127
value: function render() {
111-
var _props = this.props;
112-
var content = _props.content;
113-
var onHover = _props.onHover;
114-
var onLeave = _props.onLeave;
128+
var _props2 = this.props;
129+
var onHover = _props2.onHover;
130+
var onLeave = _props2.onLeave;
115131
var _state = this.state;
116132
var place = _state.place;
117133
var offset = _state.offset;
118134

135+
var content = this.children();
119136
var visibility = this.props.el && this.props.show ? 'visible' : 'hidden';
120137
var style = {
121138
base: _extends({}, styles.base, themes.simple.base, { visibility: visibility }, offset),
122139
content: _extends({}, styles.content, themes.simple.content),
123140
arrow: _extends({}, styles.arrow),
124141
border: _extends({}, styles.border.base, styles.border[place], themes.simple.border)
125142
};
126-
127-
var children = undefined;
128-
if (content) {
129-
children = content;
130-
} else {
131-
children = this.props.children;
132-
}
143+
style.shadow = _extends({}, style.content, { visibility: 'hidden', position: 'absolute' });
133144

134145
return _react2.default.createElement(
135146
'div',
136-
{
137-
ref: 'tooltip',
138-
style: style.base,
139-
onMouseEnter: onHover,
140-
onMouseLeave: onLeave
141-
},
147+
null,
142148
_react2.default.createElement(
143149
'div',
144-
{ ref: 'content', style: style.content },
145-
children
150+
{
151+
ref: 'tooltip',
152+
style: style.base,
153+
onMouseEnter: onHover,
154+
onMouseLeave: onLeave
155+
},
156+
_react2.default.createElement(
157+
'div',
158+
{ ref: 'content', style: style.content },
159+
content
160+
),
161+
_react2.default.createElement(
162+
'div',
163+
{ style: style.arrow, key: 'a-' + place },
164+
_react2.default.createElement('span', { ref: 'border', style: style.border, key: 'b-' + place })
165+
)
146166
),
147-
_react2.default.createElement(
148-
'div',
149-
{ style: style.arrow, key: 'a-' + place },
150-
_react2.default.createElement('span', { ref: 'border', style: style.border, key: 'b-' + place })
151-
)
167+
_react2.default.createElement('div', { ref: 'shadow', style: style.shadow })
152168
);
153169
}
154170
}]);

‎lib/utils.js

+17-13
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ exports.resolve = resolve;
1919

2020
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
2121

22+
function dimension(el) {
23+
var rect = el.getBoundingClientRect();
24+
return { width: rect.width, height: rect.height };
25+
}
26+
2227
/**
2328
* Returns a position of given DOM element.
2429
*
@@ -53,29 +58,29 @@ function position(el) {
5358
* Calculates a position of the tooltip.
5459
*
5560
* @param {string} place - 'top', 'right', 'bottom', or 'left'.
56-
* @param {Object} tooltip - DOM element.
61+
* @param {Object} content - DOM element that contains a content.
5762
* @param {Object} origin - DOM element.
5863
* @return {Object} contains 'top', 'left', and extra keys.
5964
*/
60-
function placement(place, tooltip, origin) {
65+
function placement(place, content, origin) {
6166
var gap = 12;
62-
var tip = position(tooltip);
67+
var dim = dimension(content);
6368
var pos = position(origin);
6469

65-
var offset = { width: tip.width, height: tip.height };
70+
var offset = { width: dim.width, height: dim.height };
6671

6772
switch (place) {
6873
case 'top':case 'bottom':
69-
offset.left = pos.left + pos.width * 0.5 - tip.width * 0.5 + 'px';
74+
offset.left = pos.left + pos.width * 0.5 - dim.width * 0.5 + 'px';
7075
break;
7176
case 'left':case 'right':
72-
offset.top = pos.top + pos.height * 0.5 - tip.height * 0.5 + 'px';
77+
offset.top = pos.top + pos.height * 0.5 - dim.height * 0.5 + 'px';
7378
break;
7479
}
7580

7681
switch (place) {
7782
case 'top':
78-
offset.top = pos.top - tip.height - gap + 'px';
83+
offset.top = pos.top - dim.height - gap + 'px';
7984
break;
8085
case 'right':
8186
offset.left = pos.right + gap + 'px';
@@ -84,7 +89,7 @@ function placement(place, tooltip, origin) {
8489
offset.top = pos.top + pos.height + gap + 'px';
8590
break;
8691
case 'left':
87-
offset.left = pos.left - tip.width - gap + 'px';
92+
offset.left = pos.left - dim.width - gap + 'px';
8893
break;
8994
}
9095

@@ -220,12 +225,11 @@ function overDirs(tip, el) {
220225
/**
221226
* Places and adjusts a tooltip.
222227
*
223-
* @param {Object} tooltip - DOM element.
224-
* @param {string|Array} place
225-
* @param {Object} origin - DOM element.
228+
* @param {Object} content - DOM element which contans a content.
229+
* @param {Object} props
226230
* @return {Object} 'offset': style data to locate, 'place': final direction of the tooltip
227231
*/
228-
function adjust(tooltip, props) {
232+
function adjust(content, props) {
229233
var origin = props.el;
230234
var auto = props.auto;
231235
var within = props.within;
@@ -247,7 +251,7 @@ function adjust(tooltip, props) {
247251
var tries = [].concat(_toConsumableArray(place));
248252
while (0 < tries.length) {
249253
current = tries.shift();
250-
pos = placement(current, tooltip, origin);
254+
pos = placement(current, content, origin);
251255
if (typeof first === 'undefined') {
252256
first = { offset: pos, place: current };
253257
}

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "redux-tooltip",
3-
"version": "0.4.4",
3+
"version": "0.4.5",
44
"description": "A tooltip React component for Redux",
55
"main": "./lib/index.js",
66
"repository": {
@@ -53,13 +53,13 @@
5353
"karma-sinon": "^1.0.4",
5454
"karma-webpack": "^1.7.0",
5555
"mocha": "^2.4.5",
56-
"phantomjs-prebuilt": "^2.1.3",
56+
"phantomjs-prebuilt": "^2.1.4",
5757
"power-assert": "^1.2.0",
5858
"react": "^0.14.7",
5959
"react-addons-test-utils": "^0.14.7",
6060
"react-dom": "^0.14.7",
6161
"react-redux": "^4.4.0",
62-
"redux": "^3.3.0",
62+
"redux": "^3.3.1",
6363
"redux-logger": "^2.5.0",
6464
"rimraf": "^2.5.1",
6565
"sinon": "^1.17.3",

0 commit comments

Comments
 (0)