UNPKG

react-tooltip

Version:
1,586 lines (1,337 loc) 85.3 kB
'use strict'; function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } var React = _interopDefault(require('react')); var PropTypes = _interopDefault(require('prop-types')); var uuid = require('uuid'); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } var CONSTANT = { GLOBAL: { HIDE: '__react_tooltip_hide_event', REBUILD: '__react_tooltip_rebuild_event', SHOW: '__react_tooltip_show_event' } }; /** * Static methods for react-tooltip */ var dispatchGlobalEvent = function dispatchGlobalEvent(eventName, opts) { // Compatible with IE // @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work // @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent var event; if (typeof window.CustomEvent === 'function') { event = new window.CustomEvent(eventName, { detail: opts }); } else { event = document.createEvent('Event'); event.initEvent(eventName, false, true, opts); } window.dispatchEvent(event); }; function staticMethods (target) { /** * Hide all tooltip * @trigger ReactTooltip.hide() */ target.hide = function (target) { dispatchGlobalEvent(CONSTANT.GLOBAL.HIDE, { target: target }); }; /** * Rebuild all tooltip * @trigger ReactTooltip.rebuild() */ target.rebuild = function () { dispatchGlobalEvent(CONSTANT.GLOBAL.REBUILD); }; /** * Show specific tooltip * @trigger ReactTooltip.show() */ target.show = function (target) { dispatchGlobalEvent(CONSTANT.GLOBAL.SHOW, { target: target }); }; target.prototype.globalRebuild = function () { if (this.mount) { this.unbindListener(); this.bindListener(); } }; target.prototype.globalShow = function (event) { if (this.mount) { var hasTarget = event && event.detail && event.detail.target && true || false; // Create a fake event, specific show will limit the type to `solid` // only `float` type cares e.clientX e.clientY this.showTooltip({ currentTarget: hasTarget && event.detail.target }, true); } }; target.prototype.globalHide = function (event) { if (this.mount) { var hasTarget = event && event.detail && event.detail.target && true || false; this.hideTooltip({ currentTarget: hasTarget && event.detail.target }, hasTarget); } }; } /** * Events that should be bound to the window */ function windowListener (target) { target.prototype.bindWindowEvents = function (resizeHide) { // ReactTooltip.hide window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide); window.addEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide, false); // ReactTooltip.rebuild window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild); window.addEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild, false); // ReactTooltip.show window.removeEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow); window.addEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow, false); // Resize if (resizeHide) { window.removeEventListener('resize', this.onWindowResize); window.addEventListener('resize', this.onWindowResize, false); } }; target.prototype.unbindWindowEvents = function () { window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.globalHide); window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild); window.removeEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow); window.removeEventListener('resize', this.onWindowResize); }; /** * invoked by resize event of window */ target.prototype.onWindowResize = function () { if (!this.mount) return; this.hideTooltip(); }; } /** * Custom events to control showing and hiding of tooltip * * @attributes * - `event` {String} * - `eventOff` {String} */ var checkStatus = function checkStatus(dataEventOff, e) { var show = this.state.show; var id = this.props.id; var isCapture = this.isCapture(e.currentTarget); var currentItem = e.currentTarget.getAttribute('currentItem'); if (!isCapture) e.stopPropagation(); if (show && currentItem === 'true') { if (!dataEventOff) this.hideTooltip(e); } else { e.currentTarget.setAttribute('currentItem', 'true'); setUntargetItems(e.currentTarget, this.getTargetArray(id)); this.showTooltip(e); } }; var setUntargetItems = function setUntargetItems(currentTarget, targetArray) { for (var i = 0; i < targetArray.length; i++) { if (currentTarget !== targetArray[i]) { targetArray[i].setAttribute('currentItem', 'false'); } else { targetArray[i].setAttribute('currentItem', 'true'); } } }; var customListeners = { id: '9b69f92e-d3fe-498b-b1b4-c5e63a51b0cf', set: function set(target, event, listener) { if (this.id in target) { var map = target[this.id]; map[event] = listener; } else { // this is workaround for WeakMap, which is not supported in older browsers, such as IE Object.defineProperty(target, this.id, { configurable: true, value: _defineProperty({}, event, listener) }); } }, get: function get(target, event) { var map = target[this.id]; if (map !== undefined) { return map[event]; } } }; function customEvent (target) { target.prototype.isCustomEvent = function (ele) { var event = this.state.event; return event || !!ele.getAttribute('data-event'); }; /* Bind listener for custom event */ target.prototype.customBindListener = function (ele) { var _this = this; var _this$state = this.state, event = _this$state.event, eventOff = _this$state.eventOff; var dataEvent = ele.getAttribute('data-event') || event; var dataEventOff = ele.getAttribute('data-event-off') || eventOff; dataEvent.split(' ').forEach(function (event) { ele.removeEventListener(event, customListeners.get(ele, event)); var customListener = checkStatus.bind(_this, dataEventOff); customListeners.set(ele, event, customListener); ele.addEventListener(event, customListener, false); }); if (dataEventOff) { dataEventOff.split(' ').forEach(function (event) { ele.removeEventListener(event, _this.hideTooltip); ele.addEventListener(event, _this.hideTooltip, false); }); } }; /* Unbind listener for custom event */ target.prototype.customUnbindListener = function (ele) { var _this$state2 = this.state, event = _this$state2.event, eventOff = _this$state2.eventOff; var dataEvent = event || ele.getAttribute('data-event'); var dataEventOff = eventOff || ele.getAttribute('data-event-off'); ele.removeEventListener(dataEvent, customListeners.get(ele, event)); if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip); }; } /** * Util method to judge if it should follow capture model */ function isCapture (target) { target.prototype.isCapture = function (currentTarget) { return currentTarget && currentTarget.getAttribute('data-iscapture') === 'true' || this.props.isCapture || false; }; } /** * Util method to get effect */ function getEffect (target) { target.prototype.getEffect = function (currentTarget) { var dataEffect = currentTarget.getAttribute('data-effect'); return dataEffect || this.props.effect || 'float'; }; } /** * Util method to get effect */ var makeProxy = function makeProxy(e) { var proxy = {}; for (var key in e) { if (typeof e[key] === 'function') { proxy[key] = e[key].bind(e); } else { proxy[key] = e[key]; } } return proxy; }; var bodyListener = function bodyListener(callback, options, e) { var _options$respectEffec = options.respectEffect, respectEffect = _options$respectEffec === void 0 ? false : _options$respectEffec, _options$customEvent = options.customEvent, customEvent = _options$customEvent === void 0 ? false : _options$customEvent; var id = this.props.id; var tip = e.target.getAttribute('data-tip') || null; var forId = e.target.getAttribute('data-for') || null; var target = e.target; if (this.isCustomEvent(target) && !customEvent) { return; } var isTargetBelongsToTooltip = id == null && forId == null || forId === id; if (tip != null && (!respectEffect || this.getEffect(target) === 'float') && isTargetBelongsToTooltip) { var proxy = makeProxy(e); proxy.currentTarget = target; callback(proxy); } }; var findCustomEvents = function findCustomEvents(targetArray, dataAttribute) { var events = {}; targetArray.forEach(function (target) { var event = target.getAttribute(dataAttribute); if (event) event.split(' ').forEach(function (event) { return events[event] = true; }); }); return events; }; var getBody = function getBody() { return document.getElementsByTagName('body')[0]; }; function bodyMode (target) { target.prototype.isBodyMode = function () { return !!this.props.bodyMode; }; target.prototype.bindBodyListener = function (targetArray) { var _this = this; var _this$state = this.state, event = _this$state.event, eventOff = _this$state.eventOff, possibleCustomEvents = _this$state.possibleCustomEvents, possibleCustomEventsOff = _this$state.possibleCustomEventsOff; var body = getBody(); var customEvents = findCustomEvents(targetArray, 'data-event'); var customEventsOff = findCustomEvents(targetArray, 'data-event-off'); if (event != null) customEvents[event] = true; if (eventOff != null) customEventsOff[eventOff] = true; possibleCustomEvents.split(' ').forEach(function (event) { return customEvents[event] = true; }); possibleCustomEventsOff.split(' ').forEach(function (event) { return customEventsOff[event] = true; }); this.unbindBodyListener(body); var listeners = this.bodyModeListeners = {}; if (event == null) { listeners.mouseover = bodyListener.bind(this, this.showTooltip, {}); listeners.mousemove = bodyListener.bind(this, this.updateTooltip, { respectEffect: true }); listeners.mouseout = bodyListener.bind(this, this.hideTooltip, {}); } for (var _event in customEvents) { listeners[_event] = bodyListener.bind(this, function (e) { var targetEventOff = e.currentTarget.getAttribute('data-event-off') || eventOff; checkStatus.call(_this, targetEventOff, e); }, { customEvent: true }); } for (var _event2 in customEventsOff) { listeners[_event2] = bodyListener.bind(this, this.hideTooltip, { customEvent: true }); } for (var _event3 in listeners) { body.addEventListener(_event3, listeners[_event3]); } }; target.prototype.unbindBodyListener = function (body) { body = body || getBody(); var listeners = this.bodyModeListeners; for (var event in listeners) { body.removeEventListener(event, listeners[event]); } }; } /** * Tracking target removing from DOM. * It's necessary to hide tooltip when it's target disappears. * Otherwise, the tooltip would be shown forever until another target * is triggered. * * If MutationObserver is not available, this feature just doesn't work. */ // https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ var getMutationObserverClass = function getMutationObserverClass() { return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; }; function trackRemoval (target) { target.prototype.bindRemovalTracker = function () { var _this = this; var MutationObserver = getMutationObserverClass(); if (MutationObserver == null) return; var observer = new MutationObserver(function (mutations) { for (var m1 = 0; m1 < mutations.length; m1++) { var mutation = mutations[m1]; for (var m2 = 0; m2 < mutation.removedNodes.length; m2++) { var element = mutation.removedNodes[m2]; if (element === _this.state.currentTarget) { _this.hideTooltip(); return; } } } }); observer.observe(window.document, { childList: true, subtree: true }); this.removalTracker = observer; }; target.prototype.unbindRemovalTracker = function () { if (this.removalTracker) { this.removalTracker.disconnect(); this.removalTracker = null; } }; } /** * Calculate the position of tooltip * * @params * - `e` {Event} the event of current mouse * - `target` {Element} the currentTarget of the event * - `node` {DOM} the react-tooltip object * - `place` {String} top / right / bottom / left * - `effect` {String} float / solid * - `offset` {Object} the offset to default position * * @return {Object} * - `isNewState` {Bool} required * - `newState` {Object} * - `position` {Object} {left: {Number}, top: {Number}} */ function getPosition (e, target, node, place, desiredPlace, effect, offset) { var _getDimensions = getDimensions(node), tipWidth = _getDimensions.width, tipHeight = _getDimensions.height; var _getDimensions2 = getDimensions(target), targetWidth = _getDimensions2.width, targetHeight = _getDimensions2.height; var _getCurrentOffset = getCurrentOffset(e, target, effect), mouseX = _getCurrentOffset.mouseX, mouseY = _getCurrentOffset.mouseY; var defaultOffset = getDefaultPosition(effect, targetWidth, targetHeight, tipWidth, tipHeight); var _calculateOffset = calculateOffset(offset), extraOffsetX = _calculateOffset.extraOffsetX, extraOffsetY = _calculateOffset.extraOffsetY; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; var _getParent = getParent(node), parentTop = _getParent.parentTop, parentLeft = _getParent.parentLeft; // Get the edge offset of the tooltip var getTipOffsetLeft = function getTipOffsetLeft(place) { var offsetX = defaultOffset[place].l; return mouseX + offsetX + extraOffsetX; }; var getTipOffsetRight = function getTipOffsetRight(place) { var offsetX = defaultOffset[place].r; return mouseX + offsetX + extraOffsetX; }; var getTipOffsetTop = function getTipOffsetTop(place) { var offsetY = defaultOffset[place].t; return mouseY + offsetY + extraOffsetY; }; var getTipOffsetBottom = function getTipOffsetBottom(place) { var offsetY = defaultOffset[place].b; return mouseY + offsetY + extraOffsetY; }; // // Functions to test whether the tooltip's sides are inside // the client window for a given orientation p // // _____________ // | | <-- Right side // | p = 'left' |\ // | |/ |\ // |_____________| |_\ <-- Mouse // / \ | // | // | // Bottom side // var outsideLeft = function outsideLeft(p) { return getTipOffsetLeft(p) < 0; }; var outsideRight = function outsideRight(p) { return getTipOffsetRight(p) > windowWidth; }; var outsideTop = function outsideTop(p) { return getTipOffsetTop(p) < 0; }; var outsideBottom = function outsideBottom(p) { return getTipOffsetBottom(p) > windowHeight; }; // Check whether the tooltip with orientation p is completely inside the client window var outside = function outside(p) { return outsideLeft(p) || outsideRight(p) || outsideTop(p) || outsideBottom(p); }; var inside = function inside(p) { return !outside(p); }; var placesList = ['top', 'bottom', 'left', 'right']; var insideList = []; for (var i = 0; i < 4; i++) { var p = placesList[i]; if (inside(p)) { insideList.push(p); } } var isNewState = false; var newPlace; var shouldUpdatePlace = desiredPlace !== place; if (inside(desiredPlace) && shouldUpdatePlace) { isNewState = true; newPlace = desiredPlace; } else if (insideList.length > 0 && outside(desiredPlace) && outside(place)) { isNewState = true; newPlace = insideList[0]; } if (isNewState) { return { isNewState: true, newState: { place: newPlace } }; } return { isNewState: false, position: { left: parseInt(getTipOffsetLeft(place) - parentLeft, 10), top: parseInt(getTipOffsetTop(place) - parentTop, 10) } }; } var getDimensions = function getDimensions(node) { var _node$getBoundingClie = node.getBoundingClientRect(), height = _node$getBoundingClie.height, width = _node$getBoundingClie.width; return { height: parseInt(height, 10), width: parseInt(width, 10) }; }; // Get current mouse offset var getCurrentOffset = function getCurrentOffset(e, currentTarget, effect) { var boundingClientRect = currentTarget.getBoundingClientRect(); var targetTop = boundingClientRect.top; var targetLeft = boundingClientRect.left; var _getDimensions3 = getDimensions(currentTarget), targetWidth = _getDimensions3.width, targetHeight = _getDimensions3.height; if (effect === 'float') { return { mouseX: e.clientX, mouseY: e.clientY }; } return { mouseX: targetLeft + targetWidth / 2, mouseY: targetTop + targetHeight / 2 }; }; // List all possibility of tooltip final offset // This is useful in judging if it is necessary for tooltip to switch position when out of window var getDefaultPosition = function getDefaultPosition(effect, targetWidth, targetHeight, tipWidth, tipHeight) { var top; var right; var bottom; var left; var disToMouse = 3; var triangleHeight = 2; var cursorHeight = 12; // Optimize for float bottom only, cause the cursor will hide the tooltip if (effect === 'float') { top = { l: -(tipWidth / 2), r: tipWidth / 2, t: -(tipHeight + disToMouse + triangleHeight), b: -disToMouse }; bottom = { l: -(tipWidth / 2), r: tipWidth / 2, t: disToMouse + cursorHeight, b: tipHeight + disToMouse + triangleHeight + cursorHeight }; left = { l: -(tipWidth + disToMouse + triangleHeight), r: -disToMouse, t: -(tipHeight / 2), b: tipHeight / 2 }; right = { l: disToMouse, r: tipWidth + disToMouse + triangleHeight, t: -(tipHeight / 2), b: tipHeight / 2 }; } else if (effect === 'solid') { top = { l: -(tipWidth / 2), r: tipWidth / 2, t: -(targetHeight / 2 + tipHeight + triangleHeight), b: -(targetHeight / 2) }; bottom = { l: -(tipWidth / 2), r: tipWidth / 2, t: targetHeight / 2, b: targetHeight / 2 + tipHeight + triangleHeight }; left = { l: -(tipWidth + targetWidth / 2 + triangleHeight), r: -(targetWidth / 2), t: -(tipHeight / 2), b: tipHeight / 2 }; right = { l: targetWidth / 2, r: tipWidth + targetWidth / 2 + triangleHeight, t: -(tipHeight / 2), b: tipHeight / 2 }; } return { top: top, bottom: bottom, left: left, right: right }; }; // Consider additional offset into position calculation var calculateOffset = function calculateOffset(offset) { var extraOffsetX = 0; var extraOffsetY = 0; if (Object.prototype.toString.apply(offset) === '[object String]') { offset = JSON.parse(offset.toString().replace(/'/g, '"')); } for (var key in offset) { if (key === 'top') { extraOffsetY -= parseInt(offset[key], 10); } else if (key === 'bottom') { extraOffsetY += parseInt(offset[key], 10); } else if (key === 'left') { extraOffsetX -= parseInt(offset[key], 10); } else if (key === 'right') { extraOffsetX += parseInt(offset[key], 10); } } return { extraOffsetX: extraOffsetX, extraOffsetY: extraOffsetY }; }; // Get the offset of the parent elements var getParent = function getParent(currentTarget) { var currentParent = currentTarget; while (currentParent) { var computedStyle = window.getComputedStyle(currentParent); // transform and will-change: transform change the containing block // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block if (computedStyle.getPropertyValue('transform') !== 'none' || computedStyle.getPropertyValue('will-change') === 'transform') break; currentParent = currentParent.parentElement; } var parentTop = currentParent && currentParent.getBoundingClientRect().top || 0; var parentLeft = currentParent && currentParent.getBoundingClientRect().left || 0; return { parentTop: parentTop, parentLeft: parentLeft }; }; /** * To get the tooltip content * it may comes from data-tip or this.props.children * it should support multiline * * @params * - `tip` {String} value of data-tip * - `children` {ReactElement} this.props.children * - `multiline` {Any} could be Bool(true/false) or String('true'/'false') * * @return * - String or react component */ function getTipContent (tip, children, getContent, multiline) { if (children) return children; if (getContent !== undefined && getContent !== null) return getContent; // getContent can be 0, '', etc. if (getContent === null) return null; // Tip not exist and children is null or undefined var regexp = /<br\s*\/?>/; if (!multiline || multiline === 'false' || !regexp.test(tip)) { // No trim(), so that user can keep their input return tip; } // Multiline tooltip content return tip.split(regexp).map(function (d, i) { return React.createElement("span", { key: i, className: "multi-line" }, d); }); } /** * Support aria- and role in ReactTooltip * * @params props {Object} * @return {Object} */ function parseAria(props) { var ariaObj = {}; Object.keys(props).filter(function (prop) { // aria-xxx and role is acceptable return /(^aria-\w+$|^role$)/.test(prop); }).forEach(function (prop) { ariaObj[prop] = props[prop]; }); return ariaObj; } /** * Convert nodelist to array * @see https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/core/createArrayFromMixed.js#L24 * NodeLists are functions in Safari */ function nodeListToArray (nodeList) { var length = nodeList.length; if (nodeList.hasOwnProperty) { return Array.prototype.slice.call(nodeList); } return new Array(length).fill().map(function (index) { return nodeList[index]; }); } function generateUUID() { return 't' + uuid.v4(); } var baseCss = ".__react_component_tooltip {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n left: -999em;\n opacity: 0;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n top: -999em;\n visibility: hidden;\n z-index: 999;\n}\n.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {\n pointer-events: auto;\n}\n.__react_component_tooltip::before, .__react_component_tooltip::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n}\n.__react_component_tooltip.show {\n opacity: 0.9;\n margin-top: 0;\n margin-left: 0;\n visibility: visible;\n}\n.__react_component_tooltip.place-top::before {\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n bottom: -8px;\n left: 50%;\n margin-left: -10px;\n}\n.__react_component_tooltip.place-bottom::before {\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n top: -8px;\n left: 50%;\n margin-left: -10px;\n}\n.__react_component_tooltip.place-left::before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n right: -8px;\n top: 50%;\n margin-top: -5px;\n}\n.__react_component_tooltip.place-right::before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n left: -8px;\n top: 50%;\n margin-top: -5px;\n}\n.__react_component_tooltip .multi-line {\n display: block;\n padding: 2px 0;\n text-align: center;\n}"; /** * Default pop-up style values (text color, background color). */ var defaultColors = { dark: { text: '#fff', background: '#222', border: 'transparent', arrow: '#222' }, success: { text: '#fff', background: '#8DC572', border: 'transparent', arrow: '#8DC572' }, warning: { text: '#fff', background: '#F0AD4E', border: 'transparent', arrow: '#F0AD4E' }, error: { text: '#fff', background: '#BE6464', border: 'transparent', arrow: '#BE6464' }, info: { text: '#fff', background: '#337AB7', border: 'transparent', arrow: '#337AB7' }, light: { text: '#222', background: '#fff', border: 'transparent', arrow: '#fff' } }; function getDefaultPopupColors(type) { return defaultColors[type] ? _objectSpread2({}, defaultColors[type]) : undefined; } /** * Generates the specific tooltip style for use on render. */ function generateTooltipStyle(uuid, customColors, type, hasBorder) { return generateStyle(uuid, getPopupColors(customColors, type, hasBorder)); } /** * Generates the tooltip style rules based on the element-specified "data-type" property. */ function generateStyle(uuid, colors) { var textColor = colors.text; var backgroundColor = colors.background; var borderColor = colors.border; var arrowColor = colors.arrow; return "\n \t.".concat(uuid, " {\n\t color: ").concat(textColor, ";\n\t background: ").concat(backgroundColor, ";\n\t border: 1px solid ").concat(borderColor, ";\n \t}\n\n \t.").concat(uuid, ".place-top {\n margin-top: -10px;\n }\n .").concat(uuid, ".place-top::before {\n border-top: 8px solid ").concat(borderColor, ";\n }\n .").concat(uuid, ".place-top::after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n bottom: -6px;\n left: 50%;\n margin-left: -8px;\n border-top-color: ").concat(arrowColor, ";\n border-top-style: solid;\n border-top-width: 6px;\n }\n\n .").concat(uuid, ".place-bottom {\n margin-top: 10px;\n }\n .").concat(uuid, ".place-bottom::before {\n border-bottom: 8px solid ").concat(borderColor, ";\n }\n .").concat(uuid, ".place-bottom::after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n top: -6px;\n left: 50%;\n margin-left: -8px;\n border-bottom-color: ").concat(arrowColor, ";\n border-bottom-style: solid;\n border-bottom-width: 6px;\n }\n\n .").concat(uuid, ".place-left {\n margin-left: -10px;\n }\n .").concat(uuid, ".place-left::before {\n border-left: 8px solid ").concat(borderColor, ";\n }\n .").concat(uuid, ".place-left::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n right: -6px;\n top: 50%;\n margin-top: -4px;\n border-left-color: ").concat(arrowColor, ";\n border-left-style: solid;\n border-left-width: 6px;\n }\n\n .").concat(uuid, ".place-right {\n margin-left: 10px;\n }\n .").concat(uuid, ".place-right::before {\n border-right: 8px solid ").concat(borderColor, ";\n }\n .").concat(uuid, ".place-right::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -6px;\n top: 50%;\n margin-top: -4px;\n border-right-color: ").concat(arrowColor, ";\n border-right-style: solid;\n border-right-width: 6px;\n }\n "); } function getPopupColors(customColors, type, hasBorder) { var textColor = customColors.text; var backgroundColor = customColors.background; var borderColor = customColors.border; var arrowColor = customColors.arrow ? customColors.arrow : customColors.background; var colors = getDefaultPopupColors(type); if (textColor) { colors.text = textColor; } if (backgroundColor) { colors.background = backgroundColor; } if (hasBorder) { if (borderColor) { colors.border = borderColor; } else { colors.border = type === 'light' ? 'black' : 'white'; } } if (arrowColor) { colors.arrow = arrowColor; } return colors; } var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var check = function (it) { return it && it.Math == Math && it; }; // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 var global_1 = // eslint-disable-next-line es/no-global-this -- safe check(typeof globalThis == 'object' && globalThis) || check(typeof window == 'object' && window) || // eslint-disable-next-line no-restricted-globals -- safe check(typeof self == 'object' && self) || check(typeof commonjsGlobal == 'object' && commonjsGlobal) || // eslint-disable-next-line no-new-func -- fallback (function () { return this; })() || Function('return this')(); var fails = function (exec) { try { return !!exec(); } catch (error) { return true; } }; // Detect IE8's incomplete defineProperty implementation var descriptors = !fails(function () { // eslint-disable-next-line es/no-object-defineproperty -- required for testing return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7; }); var $propertyIsEnumerable = {}.propertyIsEnumerable; // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; // Nashorn ~ JDK8 bug var NASHORN_BUG = getOwnPropertyDescriptor && !$propertyIsEnumerable.call({ 1: 2 }, 1); // `Object.prototype.propertyIsEnumerable` method implementation // https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable var f = NASHORN_BUG ? function propertyIsEnumerable(V) { var descriptor = getOwnPropertyDescriptor(this, V); return !!descriptor && descriptor.enumerable; } : $propertyIsEnumerable; var objectPropertyIsEnumerable = { f: f }; var createPropertyDescriptor = function (bitmap, value) { return { enumerable: !(bitmap & 1), configurable: !(bitmap & 2), writable: !(bitmap & 4), value: value }; }; var toString = {}.toString; var classofRaw = function (it) { return toString.call(it).slice(8, -1); }; var split = ''.split; // fallback for non-array-like ES3 and non-enumerable old V8 strings var indexedObject = fails(function () { // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346 // eslint-disable-next-line no-prototype-builtins -- safe return !Object('z').propertyIsEnumerable(0); }) ? function (it) { return classofRaw(it) == 'String' ? split.call(it, '') : Object(it); } : Object; // `RequireObjectCoercible` abstract operation // https://tc39.es/ecma262/#sec-requireobjectcoercible var requireObjectCoercible = function (it) { if (it == undefined) throw TypeError("Can't call method on " + it); return it; }; // toObject with fallback for non-array-like ES3 strings var toIndexedObject = function (it) { return indexedObject(requireObjectCoercible(it)); }; var isObject = function (it) { return typeof it === 'object' ? it !== null : typeof it === 'function'; }; // `ToPrimitive` abstract operation // https://tc39.es/ecma262/#sec-toprimitive // instead of the ES6 spec version, we didn't implement @@toPrimitive case // and the second argument - flag - preferred type is a string var toPrimitive = function (input, PREFERRED_STRING) { if (!isObject(input)) return input; var fn, val; if (PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val; if (typeof (fn = input.valueOf) == 'function' && !isObject(val = fn.call(input))) return val; if (!PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val; throw TypeError("Can't convert object to primitive value"); }; // `ToObject` abstract operation // https://tc39.es/ecma262/#sec-toobject var toObject = function (argument) { return Object(requireObjectCoercible(argument)); }; var hasOwnProperty = {}.hasOwnProperty; var has = function hasOwn(it, key) { return hasOwnProperty.call(toObject(it), key); }; var document$1 = global_1.document; // typeof document.createElement is 'object' in old IE var EXISTS = isObject(document$1) && isObject(document$1.createElement); var documentCreateElement = function (it) { return EXISTS ? document$1.createElement(it) : {}; }; // Thank's IE8 for his funny defineProperty var ie8DomDefine = !descriptors && !fails(function () { // eslint-disable-next-line es/no-object-defineproperty -- requied for testing return Object.defineProperty(documentCreateElement('div'), 'a', { get: function () { return 7; } }).a != 7; }); // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; // `Object.getOwnPropertyDescriptor` method // https://tc39.es/ecma262/#sec-object.getownpropertydescriptor var f$1 = descriptors ? $getOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) { O = toIndexedObject(O); P = toPrimitive(P, true); if (ie8DomDefine) try { return $getOwnPropertyDescriptor(O, P); } catch (error) { /* empty */ } if (has(O, P)) return createPropertyDescriptor(!objectPropertyIsEnumerable.f.call(O, P), O[P]); }; var objectGetOwnPropertyDescriptor = { f: f$1 }; var anObject = function (it) { if (!isObject(it)) { throw TypeError(String(it) + ' is not an object'); } return it; }; // eslint-disable-next-line es/no-object-defineproperty -- safe var $defineProperty = Object.defineProperty; // `Object.defineProperty` method // https://tc39.es/ecma262/#sec-object.defineproperty var f$2 = descriptors ? $defineProperty : function defineProperty(O, P, Attributes) { anObject(O); P = toPrimitive(P, true); anObject(Attributes); if (ie8DomDefine) try { return $defineProperty(O, P, Attributes); } catch (error) { /* empty */ } if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported'); if ('value' in Attributes) O[P] = Attributes.value; return O; }; var objectDefineProperty = { f: f$2 }; var createNonEnumerableProperty = descriptors ? function (object, key, value) { return objectDefineProperty.f(object, key, createPropertyDescriptor(1, value)); } : function (object, key, value) { object[key] = value; return object; }; var setGlobal = function (key, value) { try { createNonEnumerableProperty(global_1, key, value); } catch (error) { global_1[key] = value; } return value; }; var SHARED = '__core-js_shared__'; var store = global_1[SHARED] || setGlobal(SHARED, {}); var sharedStore = store; var functionToString = Function.toString; // this helper broken in `3.4.1-3.4.4`, so we can't use `shared` helper if (typeof sharedStore.inspectSource != 'function') { sharedStore.inspectSource = function (it) { return functionToString.call(it); }; } var inspectSource = sharedStore.inspectSource; var WeakMap = global_1.WeakMap; var nativeWeakMap = typeof WeakMap === 'function' && /native code/.test(inspectSource(WeakMap)); var shared = createCommonjsModule(function (module) { (module.exports = function (key, value) { return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {}); })('versions', []).push({ version: '3.12.1', mode: 'global', copyright: '© 2021 Denis Pushkarev (zloirock.ru)' }); }); var id = 0; var postfix = Math.random(); var uid = function (key) { return 'Symbol(' + String(key === undefined ? '' : key) + ')_' + (++id + postfix).toString(36); }; var keys = shared('keys'); var sharedKey = function (key) { return keys[key] || (keys[key] = uid(key)); }; var hiddenKeys = {}; var OBJECT_ALREADY_INITIALIZED = 'Object already initialized'; var WeakMap$1 = global_1.WeakMap; var set, get, has$1; var enforce = function (it) { return has$1(it) ? get(it) : set(it, {}); }; var getterFor = function (TYPE) { return function (it) { var state; if (!isObject(it) || (state = get(it)).type !== TYPE) { throw TypeError('Incompatible receiver, ' + TYPE + ' required'); } return state; }; }; if (nativeWeakMap || sharedStore.state) { var store$1 = sharedStore.state || (sharedStore.state = new WeakMap$1()); var wmget = store$1.get; var wmhas = store$1.has; var wmset = store$1.set; set = function (it, metadata) { if (wmhas.call(store$1, it)) throw new TypeError(OBJECT_ALREADY_INITIALIZED); metadata.facade = it; wmset.call(store$1, it, metadata); return metadata; }; get = function (it) { return wmget.call(store$1, it) || {}; }; has$1 = function (it) { return wmhas.call(store$1, it); }; } else { var STATE = sharedKey('state'); hiddenKeys[STATE] = true; set = function (it, metadata) { if (has(it, STATE)) throw new TypeError(OBJECT_ALREADY_INITIALIZED); metadata.facade = it; createNonEnumerableProperty(it, STATE, metadata); return metadata; }; get = function (it) { return has(it, STATE) ? it[STATE] : {}; }; has$1 = function (it) { return has(it, STATE); }; } var internalState = { set: set, get: get, has: has$1, enforce: enforce, getterFor: getterFor }; var redefine = createCommonjsModule(function (module) { var getInternalState = internalState.get; var enforceInternalState = internalState.enforce; var TEMPLATE = String(String).split('String'); (module.exports = function (O, key, value, options) { var unsafe = options ? !!options.unsafe : false; var simple = options ? !!options.enumerable : false; var noTargetGet = options ? !!options.noTargetGet : false; var state; if (typeof value == 'function') { if (typeof key == 'string' && !has(value, 'name')) { createNonEnumerableProperty(value, 'name', key); } state = enforceInternalState(value); if (!state.source) { state.source = TEMPLATE.join(typeof key == 'string' ? key : ''); } } if (O === global_1) { if (simple) O[key] = value; else setGlobal(key, value); return; } else if (!unsafe) { delete O[key]; } else if (!noTargetGet && O[key]) { simple = true; } if (simple) O[key] = value; else createNonEnumerableProperty(O, key, value); // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative })(Function.prototype, 'toString', function toString() { return typeof this == 'function' && getInternalState(this).source || inspectSource(this); }); }); var path = global_1; var aFunction = function (variable) { return typeof variable == 'function' ? variable : undefined; }; var getBuiltIn = function (namespace, method) { return arguments.length < 2 ? aFunction(path[namespace]) || aFunction(global_1[namespace]) : path[namespace] && path[namespace][method] || global_1[namespace] && global_1[namespace][method]; }; var ceil = Math.ceil; var floor = Math.floor; // `ToInteger` abstract operation // https://tc39.es/ecma262/#sec-tointeger var toInteger = function (argument) { return isNaN(argument = +argument) ? 0 : (argument > 0 ? floor : ceil)(argument); }; var min = Math.min; // `ToLength` abstract operation // https://tc39.es/ecma262/#sec-tolength var toLength = function (argument) { return argument > 0 ? min(toInteger(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991 }; var max = Math.max; var min$1 = Math.min; // Helper for a popular repeating case of the spec: // Let integer be ? ToInteger(index). // If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length). var toAbsoluteIndex = function (index, length) { var integer = toInteger(index); return integer < 0 ? max(integer + length, 0) : min$1(integer, length); }; // `Array.prototype.{ indexOf, includes }` methods implementation var createMethod = function (IS_INCLUDES) { return function ($this, el, fromIndex) { var O = toIndexedObject($this); var length = toLength(O.length); var index = toAbsoluteIndex(fromIndex, length); var value; // Array#includes uses SameValueZero equality algorithm // eslint-disable-next-line no-self-compare -- NaN check if (IS_INCLUDES && el != el) while (length > index) { value = O[index++]; // eslint-disable-next-line no-self-compare -- NaN check if (value != value) return true; // Array#indexOf ignores holes, Array#includes - not } else for (;length > index; index++) { if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0; } return !IS_INCLUDES && -1; }; }; var arrayIncludes = { // `Array.prototype.includes` method // https://tc39.es/ecma262/#sec-array.prototype.includes includes: createMethod(true), // `Array.prototype.indexOf` method // https://tc39.es/ecma262/#sec-array.prototype.indexof indexOf: createMethod(false) }; var indexOf = arrayIncludes.indexOf; var objectKeysInternal = function (object, names) { var O = toIndexedObject(object); var i = 0; var result = []; var key; for (key in O) !has(hiddenKeys, key) && has(O, key) && result.push(key); // Don't enum bug & hidden keys while (names.length > i) if (has(O, key = names[i++])) { ~indexOf(result, key) || result.push(key); } return result; }; // IE8- don't enum bug keys var enumBugKeys = [ 'constructor', 'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable', 'toLocaleString', 'toString', 'valueOf' ]; var hiddenKeys$1 = enumBugKeys.concat('length', 'prototype'); // `Object.getOwnPropertyNames` method // https://tc39.es/ecma262/#sec-object.getownpropertynames // eslint-disable-next-line es/no-object-getownpropertynames -- safe var f$3 = Object.getOwnPropertyNames || function getOwnPropertyNames(O) { return objectKeysInternal(O, hiddenKeys$1); }; var objectGetOwnPropertyNames = { f: f$3 }; // eslint-disable-next-line es/no-object-getownpropertysymbols -- safe var f$4 = Object.getOwnPropertySymbols; var objectGetOwnPropertySymbols = { f: f$4 }; // all object keys, includes non-enumerable and symbols var ownKeys$1 = getBuiltIn('Reflect', 'ownKeys') || function ownKeys(it) { var keys = objectGetOwnPropertyNames.f(anObject(it)); var getOwnPropertySymbols = objectGetOwnPropertySymbols.f; return getOwnPropertySymbols ? keys.concat(getOwnPropertySymbols(it)) : keys; }; var copyConstructorProperties = function (target, source) { var keys = ownKeys$1(source); var defineProperty = objectDefineProperty.f; var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f; for (var i = 0; i < keys.length; i++) { var key = keys[i]; if (!has(target, key)) defineProperty(target, key, getOwnPropertyDescriptor(source, key)); } }; var replacement = /#|\.prototype\./; var isForced = function (feature, detection) { var value = data[normalize(feature)]; return value == POLYFILL ? true : value == NATIVE ? false : typeof detection == 'function' ? fails(detection) : !!detection; }; var normalize = isForced.normalize = function (string) { return String(string).replace(replacement, '.').toLowerCase(); }; var data = isForced.data = {}; var NATIVE = isForced.NATIVE = 'N'; var POLYFILL = isForced.POLYFILL = 'P'; var isForced_1 = isForced; var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f; /* options.target - name of the target object options.global - target is the global object options.stat - export as static methods of target options.proto - export as prototype methods of target options.real - real prototype method for the `pure` version options.forced - export even if the native feature is available options.bind - bind methods to the target, required for the `pure` version options.wrap - wrap constructors to preventing global pollution, required for the `pure` version options.unsafe - use the simple assignment of property instead of delete + defineProperty options.sham - add a flag to not completely full polyfills options.enumerable - export as enumerable property options.noTargetGet - prevent calling a getter on target */ var _export = function (options, source) { var TARGET = options.target; var GLOBAL = options.global; var STATIC = options.stat; var FORCED, target, key, targetProperty, sourceProperty, descriptor; if (GLOBAL) { target = global_1; } else if (STATIC) { target = global_1[TARGET] || setGlobal(TARGET, {}); } else { target = (global_1[TARGET] || {}).prototype; } if (target) for (key in source) { sourceProperty = source[key]; if (options.noTargetGet) { descriptor = getOwnPropertyDescriptor$1(target, key); targetProperty = descriptor && descriptor.value; } else targetProperty = target[key]; FORCED = isForced_1(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced); // contained in target if (!FORCED && targetProperty !== undefined) { if (typeof sourceProperty === typeof targetProperty) continue; copyConstructorProperties(sourceProperty, targetProperty); } // add a flag to not completely full polyfills if (options.sham || (targetProperty && targetProperty.sham)) { createNonEnumerableProperty(sourceProperty, 'sham', true); } // extend global redefine(target, key, sourceProperty, options); } }; var aFunction$1 = function (it) { if (typeof it != 'function') { throw TypeError(String(it) + ' is not a function'); } return it; }; // optional / simple context binding var functionBindContext = function (fn, that, length) { aFunction$1(fn); if (that === undefined) return fn; switch (length) { case 0: return function () { return fn.call(that); }; case 1: return function (a) { return fn.call(that, a); }; case 2: re