1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.default = undefined;
|
5 |
|
6 | var _extends2 = require('babel-runtime/helpers/extends');
|
7 |
|
8 | var _extends3 = _interopRequireDefault(_extends2);
|
9 |
|
10 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
11 |
|
12 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
13 |
|
14 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
15 |
|
16 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
17 |
|
18 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
19 |
|
20 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
21 |
|
22 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
23 |
|
24 | var _inherits3 = _interopRequireDefault(_inherits2);
|
25 |
|
26 | var _class, _temp;
|
27 |
|
28 | var _react = require('react');
|
29 |
|
30 | var _react2 = _interopRequireDefault(_react);
|
31 |
|
32 | var _propTypes = require('prop-types');
|
33 |
|
34 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
35 |
|
36 | var _overlay = require('../overlay');
|
37 |
|
38 | var _overlay2 = _interopRequireDefault(_overlay);
|
39 |
|
40 | var _inner = require('./inner');
|
41 |
|
42 | var _inner2 = _interopRequireDefault(_inner);
|
43 |
|
44 | var _alignMap = require('./alignMap');
|
45 |
|
46 | var _util = require('./util');
|
47 |
|
48 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
49 |
|
50 | var Popup = _overlay2.default.Popup;
|
51 |
|
52 |
|
53 | var alignMap = _alignMap.normalMap;
|
54 |
|
55 | var Tooltip = (_temp = _class = function (_React$Component) {
|
56 | (0, _inherits3.default)(Tooltip, _React$Component);
|
57 |
|
58 | function Tooltip(props) {
|
59 | (0, _classCallCheck3.default)(this, Tooltip);
|
60 |
|
61 | var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
|
62 |
|
63 | _this.beforePosition = function (result, obj) {
|
64 | var placement = result.config.placement;
|
65 |
|
66 | if (placement !== _this.state.align) {
|
67 | _this.setState({
|
68 | align: placement,
|
69 | innerAlign: true
|
70 | });
|
71 | }
|
72 |
|
73 | if (_this.props.arrowPointToCenter) {
|
74 | var _obj$target = obj.target,
|
75 | width = _obj$target.width,
|
76 | height = _obj$target.height;
|
77 |
|
78 | if (placement.length === 2) {
|
79 | var offset = _alignMap.normalMap[placement].offset;
|
80 | switch (placement[0]) {
|
81 | case 'b':
|
82 | case 't':
|
83 | {
|
84 | var plus = offset[0] > 0 ? 1 : -1;
|
85 | result.style.left = result.style.left + plus * width / 2 - offset[0];
|
86 | }
|
87 | break;
|
88 | case 'l':
|
89 | case 'r':
|
90 | {
|
91 | var _plus = offset[0] > 0 ? 1 : -1;
|
92 | result.style.top = result.style.top + _plus * height / 2 - offset[1];
|
93 | }
|
94 | break;
|
95 | }
|
96 | }
|
97 | }
|
98 |
|
99 | return result;
|
100 | };
|
101 |
|
102 | _this.state = {
|
103 | align: props.placement || props.align,
|
104 | innerAlign: false
|
105 | };
|
106 | return _this;
|
107 | }
|
108 |
|
109 | Tooltip.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
110 | if (nextProps.v2 && !prevState.innerAlign && 'align' in nextProps && nextProps.align !== prevState.align) {
|
111 | return {
|
112 | align: nextProps.align,
|
113 | innerAlign: false
|
114 | };
|
115 | }
|
116 |
|
117 | return null;
|
118 | };
|
119 |
|
120 | Tooltip.prototype.render = function render() {
|
121 | var _props = this.props,
|
122 | id = _props.id,
|
123 | className = _props.className,
|
124 | palign = _props.align,
|
125 | style = _props.style,
|
126 | prefix = _props.prefix,
|
127 | trigger = _props.trigger,
|
128 | children = _props.children,
|
129 | popupContainer = _props.popupContainer,
|
130 | popupProps = _props.popupProps,
|
131 | popupClassName = _props.popupClassName,
|
132 | popupStyle = _props.popupStyle,
|
133 | followTrigger = _props.followTrigger,
|
134 | triggerType = _props.triggerType,
|
135 | autoFocus = _props.autoFocus,
|
136 | alignEdge = _props.alignEdge,
|
137 | autoAdjust = _props.autoAdjust,
|
138 | rtl = _props.rtl,
|
139 | delay = _props.delay,
|
140 | v2 = _props.v2,
|
141 | arrowPointToCenter = _props.arrowPointToCenter,
|
142 | others = (0, _objectWithoutProperties3.default)(_props, ['id', 'className', 'align', 'style', 'prefix', 'trigger', 'children', 'popupContainer', 'popupProps', 'popupClassName', 'popupStyle', 'followTrigger', 'triggerType', 'autoFocus', 'alignEdge', 'autoAdjust', 'rtl', 'delay', 'v2', 'arrowPointToCenter']);
|
143 |
|
144 |
|
145 | var trOrigin = 'trOrigin';
|
146 | if (rtl) {
|
147 | others.rtl = true;
|
148 | trOrigin = 'rtlTrOrigin';
|
149 | }
|
150 |
|
151 | alignMap = alignEdge || v2 ? _alignMap.edgeMap : _alignMap.normalMap;
|
152 | var align = v2 ? this.state.align : palign;
|
153 |
|
154 | var transformOrigin = alignMap[align][trOrigin];
|
155 | var _offset = alignMap[align].offset;
|
156 | var _style = (0, _extends3.default)({ transformOrigin: transformOrigin }, style);
|
157 |
|
158 | var content = _react2.default.createElement(
|
159 | _inner2.default,
|
160 | (0, _extends3.default)({}, others, {
|
161 | id: id,
|
162 | prefix: prefix,
|
163 | closable: false,
|
164 | isTooltip: true,
|
165 | className: className,
|
166 | style: _style,
|
167 | align: align,
|
168 | rtl: rtl,
|
169 | alignEdge: alignEdge,
|
170 | v2: v2
|
171 | }),
|
172 | children
|
173 | );
|
174 |
|
175 | var triggerProps = {};
|
176 | triggerProps['aria-describedby'] = id;
|
177 | triggerProps.tabIndex = '0';
|
178 |
|
179 | var newTriggerType = triggerType;
|
180 |
|
181 | if (triggerType === 'hover' && id) {
|
182 | newTriggerType = ['focus', 'hover'];
|
183 | }
|
184 |
|
185 | var ariaTrigger = id ? _react2.default.cloneElement(trigger, triggerProps) : trigger;
|
186 |
|
187 | var newTrigger = (0, _util.getDisabledCompatibleTrigger)(_react2.default.isValidElement(ariaTrigger) ? ariaTrigger : _react2.default.createElement(
|
188 | 'span',
|
189 | null,
|
190 | ariaTrigger
|
191 | ));
|
192 |
|
193 | var otherProps = {
|
194 | delay: delay,
|
195 | shouldUpdatePosition: true,
|
196 | needAdjust: false,
|
197 | align: alignMap[align].align,
|
198 | offset: _offset
|
199 | };
|
200 |
|
201 | if (v2) {
|
202 | delete otherProps.align;
|
203 | delete otherProps.shouldUpdatePosition;
|
204 | delete otherProps.needAdjust;
|
205 | delete otherProps.offset;
|
206 |
|
207 | (0, _extends3.default)(otherProps, {
|
208 | placement: align,
|
209 | placementOffset: 12,
|
210 | v2: true,
|
211 | beforePosition: this.beforePosition,
|
212 | autoAdjust: autoAdjust
|
213 | });
|
214 | }
|
215 |
|
216 | return _react2.default.createElement(
|
217 | Popup,
|
218 | (0, _extends3.default)({
|
219 | role: 'tooltip',
|
220 | animation: {
|
221 | in: 'zoomIn',
|
222 | out: 'zoomOut'
|
223 | },
|
224 | className: popupClassName,
|
225 | container: popupContainer,
|
226 | followTrigger: followTrigger,
|
227 | trigger: newTrigger,
|
228 | triggerType: newTriggerType,
|
229 | style: popupStyle,
|
230 | rtl: rtl,
|
231 | autoFocus: triggerType === 'focus' ? false : autoFocus
|
232 | }, otherProps, popupProps),
|
233 | content
|
234 | );
|
235 | };
|
236 |
|
237 | return Tooltip;
|
238 | }(_react2.default.Component), _class.propTypes = {
|
239 | |
240 |
|
241 |
|
242 | prefix: _propTypes2.default.string,
|
243 | |
244 |
|
245 |
|
246 | className: _propTypes2.default.string,
|
247 | |
248 |
|
249 |
|
250 | style: _propTypes2.default.object,
|
251 | |
252 |
|
253 |
|
254 | children: _propTypes2.default.any,
|
255 | |
256 |
|
257 |
|
258 |
|
259 | align: _propTypes2.default.oneOf(['t', 'r', 'b', 'l', 'tl', 'tr', 'bl', 'br', 'lt', 'lb', 'rt', 'rb']),
|
260 | |
261 |
|
262 |
|
263 | trigger: _propTypes2.default.any,
|
264 | |
265 |
|
266 |
|
267 |
|
268 | triggerType: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
|
269 | |
270 |
|
271 |
|
272 | popupStyle: _propTypes2.default.object,
|
273 | |
274 |
|
275 |
|
276 | popupClassName: _propTypes2.default.string,
|
277 | |
278 |
|
279 |
|
280 | popupProps: _propTypes2.default.object,
|
281 | |
282 |
|
283 |
|
284 | pure: _propTypes2.default.bool,
|
285 | |
286 |
|
287 |
|
288 | popupContainer: _propTypes2.default.any,
|
289 | |
290 |
|
291 |
|
292 | followTrigger: _propTypes2.default.bool,
|
293 | |
294 |
|
295 |
|
296 | id: _propTypes2.default.string,
|
297 | |
298 |
|
299 |
|
300 | delay: _propTypes2.default.number,
|
301 | |
302 |
|
303 |
|
304 | v2: _propTypes2.default.bool,
|
305 | |
306 |
|
307 |
|
308 | arrowPointToCenter: _propTypes2.default.bool
|
309 | }, _class.defaultProps = {
|
310 | triggerType: 'hover',
|
311 | prefix: 'next-',
|
312 | align: 'b',
|
313 | delay: 50,
|
314 | trigger: _react2.default.createElement('span', null),
|
315 | arrowPointToCenter: false
|
316 | }, _temp);
|
317 | Tooltip.displayName = 'Tooltip';
|
318 | exports.default = Tooltip;
|
319 | module.exports = exports['default']; |
\ | No newline at end of file |