芝麻web文件管理V1.00
编辑当前文件:/home/freeclou/app.optimyar.com/backend/node_modules/react-tooltip/dist/index.js
'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 = /
/; 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 _class, _class2, _temp; var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_class = isCapture(_class = getEffect(_class = bodyMode(_class = trackRemoval(_class = (_temp = _class2 = /*#__PURE__*/ function (_React$Component) { _inherits(ReactTooltip, _React$Component); _createClass(ReactTooltip, null, [{ key: "propTypes", get: function get() { return { uuid: PropTypes.string, children: PropTypes.any, place: PropTypes.string, type: PropTypes.string, effect: PropTypes.string, offset: PropTypes.object, multiline: PropTypes.bool, border: PropTypes.bool, textColor: PropTypes.string, backgroundColor: PropTypes.string, borderColor: PropTypes.string, arrowColor: PropTypes.string, insecure: PropTypes.bool, "class": PropTypes.string, className: PropTypes.string, id: PropTypes.string, html: PropTypes.bool, delayHide: PropTypes.number, delayUpdate: PropTypes.number, delayShow: PropTypes.number, event: PropTypes.string, eventOff: PropTypes.string, isCapture: PropTypes.bool, globalEventOff: PropTypes.string, getContent: PropTypes.any, afterShow: PropTypes.func, afterHide: PropTypes.func, overridePosition: PropTypes.func, disable: PropTypes.bool, scrollHide: PropTypes.bool, resizeHide: PropTypes.bool, wrapper: PropTypes.string, bodyMode: PropTypes.bool, possibleCustomEvents: PropTypes.string, possibleCustomEventsOff: PropTypes.string, clickable: PropTypes.bool }; } }]); function ReactTooltip(props) { var _this; _classCallCheck(this, ReactTooltip); _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactTooltip).call(this, props)); _this.state = { uuid: props.uuid || generateUUID(), place: props.place || 'top', // Direction of tooltip desiredPlace: props.place || 'top', type: 'dark', // Color theme of tooltip effect: 'float', // float or fixed show: false, border: false, customColors: {}, offset: {}, extraClass: '', html: false, delayHide: 0, delayShow: 0, event: props.event || null, eventOff: props.eventOff || null, currentEvent: null, // Current mouse event currentTarget: null, // Current target of mouse event ariaProps: parseAria(props), // aria- and role attributes isEmptyTip: false, disable: false, possibleCustomEvents: props.possibleCustomEvents || '', possibleCustomEventsOff: props.possibleCustomEventsOff || '', originTooltip: null, isMultiline: false }; _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'hideTooltipOnScroll', 'getTooltipContent', 'globalRebuild', 'globalShow', 'globalHide', 'onWindowResize', 'mouseOnToolTip']); _this.mount = true; _this.delayShowLoop = null; _this.delayHideLoop = null; _this.delayReshow = null; _this.intervalUpdateContent = null; return _this; } /** * For unify the bind and unbind listener */ _createClass(ReactTooltip, [{ key: "bind", value: function bind(methodArray) { var _this2 = this; methodArray.forEach(function (method) { _this2[method] = _this2[method].bind(_this2); }); } }, { key: "componentDidMount", value: function componentDidMount() { var _this$props = this.props, insecure = _this$props.insecure, resizeHide = _this$props.resizeHide; this.bindListener(); // Bind listener for tooltip this.bindWindowEvents(resizeHide); // Bind global event for static method this.injectStyles(); // Inject styles for each DOM root having tooltip. } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.mount = false; this.clearTimer(); this.unbindListener(); this.removeScrollListener(this.state.currentTarget); this.unbindWindowEvents(); } /* Look for the closest DOM root having tooltip and inject styles. */ }, { key: "injectStyles", value: function injectStyles() { var tooltipRef = this.tooltipRef; if (!tooltipRef) { return; } var parentNode = tooltipRef.parentNode; while (parentNode.parentNode) { parentNode = parentNode.parentNode; } var domRoot; switch (parentNode.constructor.name) { case 'HTMLDocument': domRoot = parentNode.head; break; case 'ShadowRoot': default: domRoot = parentNode; break; } // Prevent styles duplication. if (!domRoot.querySelector('style[data-react-tooltip]')) { var style = document.createElement('style'); style.textContent = baseCss; style.setAttribute('data-react-tooltip', 'true'); domRoot.appendChild(style); } } /** * Return if the mouse is on the tooltip. * @returns {boolean} true - mouse is on the tooltip */ }, { key: "mouseOnToolTip", value: function mouseOnToolTip() { var show = this.state.show; if (show && this.tooltipRef) { /* old IE or Firefox work around */ if (!this.tooltipRef.matches) { /* old IE work around */ if (this.tooltipRef.msMatchesSelector) { this.tooltipRef.matches = this.tooltipRef.msMatchesSelector; } else { /* old Firefox work around */ this.tooltipRef.matches = this.tooltipRef.mozMatchesSelector; } } return this.tooltipRef.matches(':hover'); } return false; } /** * Pick out corresponded target elements */ }, { key: "getTargetArray", value: function getTargetArray(id) { var targetArray = []; var selector; if (!id) { selector = '[data-tip]:not([data-for])'; } else { var escaped = id.replace(/\\/g, '\\\\').replace(/"/g, '\\"'); selector = "[data-tip][data-for=\"".concat(escaped, "\"]"); } // Scan document for shadow DOM elements nodeListToArray(document.getElementsByTagName('*')).filter(function (element) { return element.shadowRoot; }).forEach(function (element) { targetArray = targetArray.concat(nodeListToArray(element.shadowRoot.querySelectorAll(selector))); }); return targetArray.concat(nodeListToArray(document.querySelectorAll(selector))); } /** * Bind listener to the target elements * These listeners used to trigger showing or hiding the tooltip */ }, { key: "bindListener", value: function bindListener() { var _this3 = this; var _this$props2 = this.props, id = _this$props2.id, globalEventOff = _this$props2.globalEventOff, isCapture = _this$props2.isCapture; var targetArray = this.getTargetArray(id); targetArray.forEach(function (target) { if (target.getAttribute('currentItem') === null) { target.setAttribute('currentItem', 'false'); } _this3.unbindBasicListener(target); if (_this3.isCustomEvent(target)) { _this3.customUnbindListener(target); } }); if (this.isBodyMode()) { this.bindBodyListener(targetArray); } else { targetArray.forEach(function (target) { var isCaptureMode = _this3.isCapture(target); var effect = _this3.getEffect(target); if (_this3.isCustomEvent(target)) { _this3.customBindListener(target); return; } target.addEventListener('mouseenter', _this3.showTooltip, isCaptureMode); if (effect === 'float') { target.addEventListener('mousemove', _this3.updateTooltip, isCaptureMode); } target.addEventListener('mouseleave', _this3.hideTooltip, isCaptureMode); }); } // Global event to hide tooltip if (globalEventOff) { window.removeEventListener(globalEventOff, this.hideTooltip); window.addEventListener(globalEventOff, this.hideTooltip, isCapture); } // Track removal of targetArray elements from DOM this.bindRemovalTracker(); } /** * Unbind listeners on target elements */ }, { key: "unbindListener", value: function unbindListener() { var _this4 = this; var _this$props3 = this.props, id = _this$props3.id, globalEventOff = _this$props3.globalEventOff; if (this.isBodyMode()) { this.unbindBodyListener(); } else { var targetArray = this.getTargetArray(id); targetArray.forEach(function (target) { _this4.unbindBasicListener(target); if (_this4.isCustomEvent(target)) _this4.customUnbindListener(target); }); } if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip); this.unbindRemovalTracker(); } /** * Invoke this before bind listener and unmount the component * it is necessary to invoke this even when binding custom event * so that the tooltip can switch between custom and default listener */ }, { key: "unbindBasicListener", value: function unbindBasicListener(target) { var isCaptureMode = this.isCapture(target); target.removeEventListener('mouseenter', this.showTooltip, isCaptureMode); target.removeEventListener('mousemove', this.updateTooltip, isCaptureMode); target.removeEventListener('mouseleave', this.hideTooltip, isCaptureMode); } }, { key: "getTooltipContent", value: function getTooltipContent() { var _this$props4 = this.props, getContent = _this$props4.getContent, children = _this$props4.children; // Generate tooltip content var content; if (getContent) { if (Array.isArray(getContent)) { content = getContent[0] && getContent[0](this.state.originTooltip); } else { content = getContent(this.state.originTooltip); } } return getTipContent(this.state.originTooltip, children, content, this.state.isMultiline); } }, { key: "isEmptyTip", value: function isEmptyTip(placeholder) { return typeof placeholder === 'string' && placeholder === '' || placeholder === null; } /** * When mouse enter, show the tooltip */ }, { key: "showTooltip", value: function showTooltip(e, isGlobalCall) { if (!this.tooltipRef) { return; } if (isGlobalCall) { // Don't trigger other elements belongs to other ReactTooltip var targetArray = this.getTargetArray(this.props.id); var isMyElement = targetArray.some(function (ele) { return ele === e.currentTarget; }); if (!isMyElement) return; } // Get the tooltip content // calculate in this phrase so that tip width height can be detected var _this$props5 = this.props, multiline = _this$props5.multiline, getContent = _this$props5.getContent; var originTooltip = e.currentTarget.getAttribute('data-tip'); var isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false; // If it is focus event or called by ReactTooltip.show, switch to `solid` effect var switchToSolid = e instanceof window.FocusEvent || isGlobalCall; // if it needs to skip adding hide listener to scroll var scrollHide = true; if (e.currentTarget.getAttribute('data-scroll-hide')) { scrollHide = e.currentTarget.getAttribute('data-scroll-hide') === 'true'; } else if (this.props.scrollHide != null) { scrollHide = this.props.scrollHide; } // Make sure the correct place is set var desiredPlace = e.currentTarget.getAttribute('data-place') || this.props.place || 'top'; var effect = switchToSolid && 'solid' || this.getEffect(e.currentTarget); var offset = e.currentTarget.getAttribute('data-offset') || this.props.offset || {}; var result = getPosition(e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset); if (result.position && this.props.overridePosition) { result.position = this.props.overridePosition(result.position, e, e.currentTarget, this.tooltipRef, desiredPlace, desiredPlace, effect, offset); } var place = result.isNewState ? result.newState.place : desiredPlace; // To prevent previously created timers from triggering this.clearTimer(); var target = e.currentTarget; var reshowDelay = this.state.show ? target.getAttribute('data-delay-update') || this.props.delayUpdate : 0; var self = this; var updateState = function updateState() { self.setState({ originTooltip: originTooltip, isMultiline: isMultiline, desiredPlace: desiredPlace, place: place, type: target.getAttribute('data-type') || self.props.type || 'dark', customColors: { text: target.getAttribute('data-text-color') || self.props.textColor || null, background: target.getAttribute('data-background-color') || self.props.backgroundColor || null, border: target.getAttribute('data-border-color') || self.props.borderColor || null, arrow: target.getAttribute('data-arrow-color') || self.props.arrowColor || null }, effect: effect, offset: offset, html: (target.getAttribute('data-html') ? target.getAttribute('data-html') === 'true' : self.props.html) || false, delayShow: target.getAttribute('data-delay-show') || self.props.delayShow || 0, delayHide: target.getAttribute('data-delay-hide') || self.props.delayHide || 0, delayUpdate: target.getAttribute('data-delay-update') || self.props.delayUpdate || 0, border: (target.getAttribute('data-border') ? target.getAttribute('data-border') === 'true' : self.props.border) || false, extraClass: target.getAttribute('data-class') || self.props["class"] || self.props.className || '', disable: (target.getAttribute('data-tip-disable') ? target.getAttribute('data-tip-disable') === 'true' : self.props.disable) || false, currentTarget: target }, function () { if (scrollHide) { self.addScrollListener(self.state.currentTarget); } self.updateTooltip(e); if (getContent && Array.isArray(getContent)) { self.intervalUpdateContent = setInterval(function () { if (self.mount) { var _getContent = self.props.getContent; var placeholder = getTipContent(originTooltip, '', _getContent[0](), isMultiline); var isEmptyTip = self.isEmptyTip(placeholder); self.setState({ isEmptyTip: isEmptyTip }); self.updatePosition(); } }, getContent[1]); } }); }; // If there is no delay call immediately, don't allow events to get in first. if (reshowDelay) { this.delayReshow = setTimeout(updateState, reshowDelay); } else { updateState(); } } /** * When mouse hover, update tool tip */ }, { key: "updateTooltip", value: function updateTooltip(e) { var _this5 = this; var _this$state = this.state, delayShow = _this$state.delayShow, disable = _this$state.disable; var afterShow = this.props.afterShow; var placeholder = this.getTooltipContent(); var eventTarget = e.currentTarget || e.target; // Check if the mouse is actually over the tooltip, if so don't hide the tooltip if (this.mouseOnToolTip()) { return; } // if the tooltip is empty, disable the tooltip if (this.isEmptyTip(placeholder) || disable) { return; } var delayTime = !this.state.show ? parseInt(delayShow, 10) : 0; var updateState = function updateState() { if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) { var isInvisible = !_this5.state.show; _this5.setState({ currentEvent: e, currentTarget: eventTarget, show: true }, function () { _this5.updatePosition(); if (isInvisible && afterShow) { afterShow(e); } }); } }; clearTimeout(this.delayShowLoop); if (delayTime) { this.delayShowLoop = setTimeout(updateState, delayTime); } else { updateState(); } } /* * If we're mousing over the tooltip remove it when we leave. */ }, { key: "listenForTooltipExit", value: function listenForTooltipExit() { var show = this.state.show; if (show && this.tooltipRef) { this.tooltipRef.addEventListener('mouseleave', this.hideTooltip); } } }, { key: "removeListenerForTooltipExit", value: function removeListenerForTooltipExit() { var show = this.state.show; if (show && this.tooltipRef) { this.tooltipRef.removeEventListener('mouseleave', this.hideTooltip); } } /** * When mouse leave, hide tooltip */ }, { key: "hideTooltip", value: function hideTooltip(e, hasTarget) { var _this6 = this; var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { isScroll: false }; var disable = this.state.disable; var isScroll = options.isScroll; var delayHide = isScroll ? 0 : this.state.delayHide; var afterHide = this.props.afterHide; var placeholder = this.getTooltipContent(); if (!this.mount) return; if (this.isEmptyTip(placeholder) || disable) return; // if the tooltip is empty, disable the tooltip if (hasTarget) { // Don't trigger other elements belongs to other ReactTooltip var targetArray = this.getTargetArray(this.props.id); var isMyElement = targetArray.some(function (ele) { return ele === e.currentTarget; }); if (!isMyElement || !this.state.show) return; } var resetState = function resetState() { var isVisible = _this6.state.show; // Check if the mouse is actually over the tooltip, if so don't hide the tooltip if (_this6.mouseOnToolTip()) { _this6.listenForTooltipExit(); return; } _this6.removeListenerForTooltipExit(); _this6.setState({ show: false }, function () { _this6.removeScrollListener(_this6.state.currentTarget); if (isVisible && afterHide) { afterHide(e); } }); }; this.clearTimer(); if (delayHide) { this.delayHideLoop = setTimeout(resetState, parseInt(delayHide, 10)); } else { resetState(); } } /** * When scroll, hide tooltip */ }, { key: "hideTooltipOnScroll", value: function hideTooltipOnScroll(event, hasTarget) { this.hideTooltip(event, hasTarget, { isScroll: true }); } /** * Add scroll event listener when tooltip show * automatically hide the tooltip when scrolling */ }, { key: "addScrollListener", value: function addScrollListener(currentTarget) { var isCaptureMode = this.isCapture(currentTarget); window.addEventListener('scroll', this.hideTooltipOnScroll, isCaptureMode); } }, { key: "removeScrollListener", value: function removeScrollListener(currentTarget) { var isCaptureMode = this.isCapture(currentTarget); window.removeEventListener('scroll', this.hideTooltipOnScroll, isCaptureMode); } // Calculation the position }, { key: "updatePosition", value: function updatePosition() { var _this7 = this; var _this$state2 = this.state, currentEvent = _this$state2.currentEvent, currentTarget = _this$state2.currentTarget, place = _this$state2.place, desiredPlace = _this$state2.desiredPlace, effect = _this$state2.effect, offset = _this$state2.offset; var node = this.tooltipRef; var result = getPosition(currentEvent, currentTarget, node, place, desiredPlace, effect, offset); if (result.position && this.props.overridePosition) { result.position = this.props.overridePosition(result.position, currentEvent, currentTarget, node, place, desiredPlace, effect, offset); } if (result.isNewState) { // Switch to reverse placement return this.setState(result.newState, function () { _this7.updatePosition(); }); } // Set tooltip position node.style.left = result.position.left + 'px'; node.style.top = result.position.top + 'px'; } /** * CLear all kinds of timeout of interval */ }, { key: "clearTimer", value: function clearTimer() { clearTimeout(this.delayShowLoop); clearTimeout(this.delayHideLoop); clearTimeout(this.delayReshow); clearInterval(this.intervalUpdateContent); } }, { key: "hasCustomColors", value: function hasCustomColors() { var _this8 = this; return Boolean(Object.keys(this.state.customColors).find(function (color) { return color !== 'border' && _this8.state.customColors[color]; }) || this.state.border && this.state.customColors['border']); } }, { key: "render", value: function render() { var _this9 = this; var _this$state3 = this.state, extraClass = _this$state3.extraClass, html = _this$state3.html, ariaProps = _this$state3.ariaProps, disable = _this$state3.disable; var content = this.getTooltipContent(); var isEmptyTip = this.isEmptyTip(content); var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border); var tooltipClass = '__react_component_tooltip' + " ".concat(this.state.uuid) + (this.state.show && !disable && !isEmptyTip ? ' show' : '') + (this.state.border ? ' border' : '') + " place-".concat(this.state.place) + // top, bottom, left, right " type-".concat(this.hasCustomColors() ? 'custom' : this.state.type) + ( // dark, success, warning, error, info, light, custom this.props.delayUpdate ? ' allow_hover' : '') + (this.props.clickable ? ' allow_click' : ''); var Wrapper = this.props.wrapper; if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) { Wrapper = ReactTooltip.defaultProps.wrapper; } var wrapperClassName = [tooltipClass, extraClass].filter(Boolean).join(' '); if (html) { var htmlContent = "".concat(content, "\n"); return React.createElement(Wrapper, _extends({ className: "".concat(wrapperClassName), id: this.props.id, ref: function ref(_ref) { return _this9.tooltipRef = _ref; } }, ariaProps, { "data-id": "tooltip", dangerouslySetInnerHTML: { __html: htmlContent } })); } else { return React.createElement(Wrapper, _extends({ className: "".concat(wrapperClassName), id: this.props.id }, ariaProps, { ref: function ref(_ref2) { return _this9.tooltipRef = _ref2; }, "data-id": "tooltip" }), React.createElement("style", { dangerouslySetInnerHTML: { __html: style } }), content); } } }], [{ key: "getDerivedStateFromProps", value: function getDerivedStateFromProps(nextProps, prevState) { var ariaProps = prevState.ariaProps; var newAriaProps = parseAria(nextProps); var isChanged = Object.keys(newAriaProps).some(function (props) { return newAriaProps[props] !== ariaProps[props]; }); if (!isChanged) { return null; } return _objectSpread2({}, prevState, { ariaProps: newAriaProps }); } }]); return ReactTooltip; }(React.Component), _defineProperty(_class2, "defaultProps", { insecure: true, resizeHide: true, wrapper: 'div', clickable: false }), _defineProperty(_class2, "supportedWrappers", ['div', 'span']), _defineProperty(_class2, "displayName", 'ReactTooltip'), _temp)) || _class) || _class) || _class) || _class) || _class) || _class) || _class; module.exports = ReactTooltip; //# sourceMappingURL=index.js.map