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