1 | "use strict";
|
2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
4 | return cooked;
|
5 | };
|
6 | var __extends = (this && this.__extends) || (function () {
|
7 | var extendStatics = function (d, b) {
|
8 | extendStatics = Object.setPrototypeOf ||
|
9 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
10 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
11 | return extendStatics(d, b);
|
12 | };
|
13 | return function (d, b) {
|
14 | extendStatics(d, b);
|
15 | function __() { this.constructor = d; }
|
16 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
17 | };
|
18 | })();
|
19 | var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
20 | if (k2 === undefined) k2 = k;
|
21 | Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
22 | }) : (function(o, m, k, k2) {
|
23 | if (k2 === undefined) k2 = k;
|
24 | o[k2] = m[k];
|
25 | }));
|
26 | var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
27 | Object.defineProperty(o, "default", { enumerable: true, value: v });
|
28 | }) : function(o, v) {
|
29 | o["default"] = v;
|
30 | });
|
31 | var __importStar = (this && this.__importStar) || function (mod) {
|
32 | if (mod && mod.__esModule) return mod;
|
33 | var result = {};
|
34 | if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
35 | __setModuleDefault(result, mod);
|
36 | return result;
|
37 | };
|
38 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
39 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
40 | };
|
41 | Object.defineProperty(exports, "__esModule", { value: true });
|
42 | exports.Tooltips = void 0;
|
43 | var merge_1 = __importDefault(require("lodash/merge"));
|
44 | var noop_1 = __importDefault(require("lodash/noop"));
|
45 | var pick_1 = __importDefault(require("lodash/pick"));
|
46 | var React = __importStar(require("react"));
|
47 | var ReactDOM = __importStar(require("react-dom"));
|
48 | var styled_components_1 = __importDefault(require("styled-components"));
|
49 | var TARGET_OFFSET = 3;
|
50 | var CLICK_TIMEOUT = 1000;
|
51 | var createOnRemoveObserver = function (element, onDetachCallback) {
|
52 | var observer = new MutationObserver(function () {
|
53 | if (!document.contains(element)) {
|
54 | observer.disconnect();
|
55 | onDetachCallback();
|
56 | }
|
57 | });
|
58 | observer.observe(document, {
|
59 | childList: true,
|
60 | subtree: true,
|
61 | });
|
62 | return observer;
|
63 | };
|
64 | var arrowStyle = "\n\tposition: absolute;\n\twidth: 0;\n\theight: 0;\n\tborder-color: transparent;\n\tborder-style: solid;\n";
|
65 | var TooltipTopArrow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", " bottom: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 5px 5px 0;\n\tborder-top-color: #000;\n"], ["\n\t", " bottom: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 5px 5px 0;\n\tborder-top-color: #000;\n"])), arrowStyle);
|
66 | var TooltipRightArrow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", " top: 50%;\n\tleft: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 5px 5px 0;\n\tborder-right-color: #000;\n"], ["\n\t", " top: 50%;\n\tleft: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 5px 5px 0;\n\tborder-right-color: #000;\n"])), arrowStyle);
|
67 | var TooltipLeftArrow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t", " top: 50%;\n\tright: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 0 5px 5px;\n\tborder-left-color: #000;\n"], ["\n\t", " top: 50%;\n\tright: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 0 5px 5px;\n\tborder-left-color: #000;\n"])), arrowStyle);
|
68 | var TooltipBottomArrow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t", " top: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 0 5px 5px;\n\tborder-bottom-color: #000;\n"], ["\n\t", " top: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 0 5px 5px;\n\tborder-bottom-color: #000;\n"])), arrowStyle);
|
69 | var getArrowElement = function (placement) {
|
70 | switch (placement) {
|
71 | case 'right':
|
72 | return TooltipRightArrow;
|
73 | case 'bottom':
|
74 | return TooltipBottomArrow;
|
75 | case 'left':
|
76 | return TooltipLeftArrow;
|
77 | default:
|
78 | return TooltipTopArrow;
|
79 | }
|
80 | };
|
81 | var TooltipElement = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-style: normal;\n\tfont-weight: 400;\n\tletter-spacing: normal;\n\tline-break: auto;\n\tline-height: 1.42857143;\n\tpadding: 5px;\n\tposition: absolute;\n\tmax-width: 300px;\n\ttext-align: left;\n\ttext-align: start;\n\ttext-decoration: none;\n\ttext-shadow: none;\n\ttext-transform: none;\n\tvisibility: hidden;\n\twhite-space: normal;\n\tword-break: normal;\n\tword-spacing: normal;\n\tword-wrap: normal;\n\tz-index: 10000;\n\tcolor: white;\n"], ["\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-style: normal;\n\tfont-weight: 400;\n\tletter-spacing: normal;\n\tline-break: auto;\n\tline-height: 1.42857143;\n\tpadding: 5px;\n\tposition: absolute;\n\tmax-width: 300px;\n\ttext-align: left;\n\ttext-align: start;\n\ttext-decoration: none;\n\ttext-shadow: none;\n\ttext-transform: none;\n\tvisibility: hidden;\n\twhite-space: normal;\n\tword-break: normal;\n\tword-spacing: normal;\n\tword-wrap: normal;\n\tz-index: 10000;\n\tcolor: white;\n"])));
|
82 | var TooltipElementInner = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tbackground: black;\n\tborder-radius: 4px;\n\tpadding: 3px 8px;\n\ttext-align: center;\n"], ["\n\tbackground: black;\n\tborder-radius: 4px;\n\tpadding: 3px 8px;\n\ttext-align: center;\n"])));
|
83 | var TooltipComponent = (function (_super) {
|
84 | __extends(TooltipComponent, _super);
|
85 | function TooltipComponent(props) {
|
86 | var _this = _super.call(this, props) || this;
|
87 | _this.state = {
|
88 | show: false,
|
89 | placement: 'top',
|
90 | coordinates: {
|
91 | top: 0,
|
92 | left: 0,
|
93 | },
|
94 | };
|
95 | return _this;
|
96 | }
|
97 | TooltipComponent.prototype.observe = function (target) {
|
98 | var _this = this;
|
99 | if (this.observer) {
|
100 | this.observer.disconnect();
|
101 | }
|
102 | this.observer = createOnRemoveObserver(target, function () {
|
103 | _this.hide();
|
104 | });
|
105 | };
|
106 | TooltipComponent.prototype.show = function (e, tooltipText, options) {
|
107 | if (options === void 0) { options = {}; }
|
108 | var top = 0;
|
109 | var left = 0;
|
110 | var target = e.target;
|
111 | this.observe(target);
|
112 | var boundingClientRect = target.getBoundingClientRect();
|
113 | var boundingRect = pick_1.default(boundingClientRect, ['top', 'left', 'width', 'height']);
|
114 | boundingRect.top += window.scrollY;
|
115 | boundingRect.left += window.scrollX;
|
116 | var placement = options.placement, containerStyle = options.containerStyle, innerStyle = options.innerStyle, arrowStyle = options.arrowStyle;
|
117 | if (this.tooltipElementInner) {
|
118 | this.tooltipElementInner.innerText = tooltipText;
|
119 | }
|
120 | if (!placement || placement === 'top') {
|
121 | top = boundingRect.top - this.tooltipElement.clientHeight - TARGET_OFFSET;
|
122 | left =
|
123 | boundingRect.left +
|
124 | boundingRect.width / 2 -
|
125 | this.tooltipElement.clientWidth / 2;
|
126 | }
|
127 | if (placement === 'right') {
|
128 | top =
|
129 | boundingRect.top +
|
130 | boundingRect.height / 2 -
|
131 | this.tooltipElement.clientHeight / 2;
|
132 | left = boundingRect.left + boundingRect.width + TARGET_OFFSET;
|
133 | }
|
134 | if (placement === 'bottom') {
|
135 | top = boundingRect.top + boundingRect.height + TARGET_OFFSET;
|
136 | left =
|
137 | boundingRect.left +
|
138 | boundingRect.width / 2 -
|
139 | this.tooltipElement.clientWidth / 2;
|
140 | }
|
141 | if (placement === 'left') {
|
142 | top =
|
143 | boundingRect.top +
|
144 | boundingRect.height / 2 -
|
145 | this.tooltipElement.clientHeight / 2;
|
146 | left =
|
147 | boundingRect.left - this.tooltipElement.clientWidth - TARGET_OFFSET;
|
148 | }
|
149 | this.setState({
|
150 | coordinates: { top: top, left: left },
|
151 | show: true,
|
152 | placement: placement,
|
153 | containerStyle: containerStyle,
|
154 | innerStyle: innerStyle,
|
155 | arrowStyle: arrowStyle,
|
156 | });
|
157 | };
|
158 | TooltipComponent.prototype.hide = function () {
|
159 | if (this.observer) {
|
160 | this.observer.disconnect();
|
161 | this.observer = undefined;
|
162 | }
|
163 | this.setState({
|
164 | show: false,
|
165 | coordinates: {
|
166 | top: 0,
|
167 | left: 0,
|
168 | },
|
169 | });
|
170 | };
|
171 | TooltipComponent.prototype.render = function () {
|
172 | var _this = this;
|
173 | var _a = this.state, placement = _a.placement, containerStyle = _a.containerStyle, innerStyle = _a.innerStyle, arrowStyle = _a.arrowStyle;
|
174 | var Arrow = getArrowElement(placement);
|
175 | var tooltipStyle = merge_1.default({
|
176 | top: this.state.coordinates.top,
|
177 | left: this.state.coordinates.left,
|
178 | visibility: this.state.show ? 'visible' : 'hidden',
|
179 | }, containerStyle);
|
180 | return (React.createElement(TooltipElement, { style: tooltipStyle, ref: function (el) { return (_this.tooltipElement = el); } },
|
181 | React.createElement(TooltipElementInner, { ref: function (el) { return (_this.tooltipElementInner = el); }, style: innerStyle }),
|
182 | React.createElement(Arrow, { style: arrowStyle })));
|
183 | };
|
184 | return TooltipComponent;
|
185 | }(React.Component));
|
186 | var Tooltips = (function () {
|
187 | function Tooltips() {
|
188 | this.initialised = false;
|
189 | this.hideOnMouseOut = null;
|
190 | }
|
191 | Tooltips.prototype.initialiseElements = function () {
|
192 | var _this = this;
|
193 | if (this.initialised || !document || !document.body) {
|
194 | return;
|
195 | }
|
196 | var tooltipRoot = document.createElement('div');
|
197 | tooltipRoot.id = 'rendition-tooltip-root';
|
198 | document.body.appendChild(tooltipRoot);
|
199 | document.addEventListener('mouseover', function (e) {
|
200 | var target = e.target;
|
201 | if (!_this.hideOnMouseOut ||
|
202 | _this.hideOnMouseOut === target) {
|
203 | return;
|
204 | }
|
205 | if (_this.hideOnMouseOut.firstElementChild &&
|
206 | _this.hideOnMouseOut.contains &&
|
207 | _this.hideOnMouseOut.contains(target)) {
|
208 | return;
|
209 | }
|
210 | _this.hide();
|
211 | _this.hideOnMouseOut = null;
|
212 | });
|
213 | this.component = ReactDOM.render(React.createElement(TooltipComponent, null), tooltipRoot);
|
214 | this.initialised = true;
|
215 | };
|
216 | Tooltips.prototype.bindProps = function (props) {
|
217 | var _this = this;
|
218 | if (props.tooltip) {
|
219 | var options_1 = {};
|
220 | var trigger = 'hover';
|
221 | var tooltipText_1;
|
222 | if (typeof props.tooltip === 'string') {
|
223 | tooltipText_1 = props.tooltip;
|
224 | }
|
225 | else {
|
226 | tooltipText_1 = props.tooltip.text;
|
227 | options_1.placement = props.tooltip.placement;
|
228 | options_1.containerStyle = props.tooltip.containerStyle;
|
229 | options_1.innerStyle = props.tooltip.innerStyle;
|
230 | options_1.arrowStyle = props.tooltip.arrowStyle;
|
231 | if (props.tooltip.trigger) {
|
232 | trigger = props.tooltip.trigger;
|
233 | }
|
234 | }
|
235 | if (tooltipText_1) {
|
236 | var showFn_1 = function (e) { return _this.show(e, tooltipText_1, options_1); };
|
237 | if (trigger === 'click') {
|
238 | var oldFn_1 = props.onClick || noop_1.default;
|
239 | var hideFn_1 = function () {
|
240 | clearTimeout(_this.hideTimeout);
|
241 | _this.hideTimeout = window.setTimeout(function () { return _this.hide(); }, CLICK_TIMEOUT);
|
242 | };
|
243 | props.onClick = function (e) {
|
244 | showFn_1(e);
|
245 | hideFn_1();
|
246 | oldFn_1(e);
|
247 | };
|
248 | }
|
249 | else {
|
250 | var oldMEFn_1 = props.onMouseEnter || noop_1.default;
|
251 | props.onMouseEnter = function (e) {
|
252 | showFn_1(e);
|
253 | oldMEFn_1(e);
|
254 | if (e.target.disabled) {
|
255 | _this.hideOnMouseOut = e.target;
|
256 | }
|
257 | };
|
258 | var oldMLFn_1 = props.onMouseLeave || noop_1.default;
|
259 | props.onMouseLeave = function (e) {
|
260 | _this.hide();
|
261 | oldMLFn_1(e);
|
262 | };
|
263 | }
|
264 | }
|
265 | }
|
266 | return props;
|
267 | };
|
268 | Tooltips.prototype.show = function (e, tooltipText, options) {
|
269 | this.initialiseElements();
|
270 | this.component.show(e, tooltipText, options);
|
271 | };
|
272 | Tooltips.prototype.hide = function () {
|
273 | this.initialiseElements();
|
274 | this.component.hide();
|
275 | };
|
276 | return Tooltips;
|
277 | }());
|
278 | exports.Tooltips = Tooltips;
|
279 | var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|