New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-tiny-popover
Advanced tools
react-tiny-popover - npm Package Compare versions
Comparing version 3.4.4 to 3.4.5
@@ -1,576 +0,2 @@ | ||
| (function webpackUniversalModuleDefinition(root, factory) { | ||
| if(typeof exports === 'object' && typeof module === 'object') | ||
| module.exports = factory(); | ||
| else if(typeof define === 'function' && define.amd) | ||
| define([], factory); | ||
| else { | ||
| var a = factory(); | ||
| for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; | ||
| } | ||
| })(window, function() { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
| /******/ | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| /******/ | ||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) { | ||
| /******/ return installedModules[moduleId].exports; | ||
| /******/ } | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ i: moduleId, | ||
| /******/ l: false, | ||
| /******/ exports: {} | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
| /******/ | ||
| /******/ // Flag the module as loaded | ||
| /******/ module.l = true; | ||
| /******/ | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| /******/ | ||
| /******/ | ||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
| /******/ | ||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
| /******/ | ||
| /******/ // define getter function for harmony exports | ||
| /******/ __webpack_require__.d = function(exports, name, getter) { | ||
| /******/ if(!__webpack_require__.o(exports, name)) { | ||
| /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); | ||
| /******/ } | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // define __esModule on exports | ||
| /******/ __webpack_require__.r = function(exports) { | ||
| /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { | ||
| /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); | ||
| /******/ } | ||
| /******/ Object.defineProperty(exports, '__esModule', { value: true }); | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // create a fake namespace object | ||
| /******/ // mode & 1: value is a module id, require it | ||
| /******/ // mode & 2: merge all properties of value into the ns | ||
| /******/ // mode & 4: return value when already ns object | ||
| /******/ // mode & 8|1: behave like require | ||
| /******/ __webpack_require__.t = function(value, mode) { | ||
| /******/ if(mode & 1) value = __webpack_require__(value); | ||
| /******/ if(mode & 8) return value; | ||
| /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; | ||
| /******/ var ns = Object.create(null); | ||
| /******/ __webpack_require__.r(ns); | ||
| /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); | ||
| /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); | ||
| /******/ return ns; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // getDefaultExport function for compatibility with non-harmony modules | ||
| /******/ __webpack_require__.n = function(module) { | ||
| /******/ var getter = module && module.__esModule ? | ||
| /******/ function getDefault() { return module['default']; } : | ||
| /******/ function getModuleExports() { return module; }; | ||
| /******/ __webpack_require__.d(getter, 'a', getter); | ||
| /******/ return getter; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Object.prototype.hasOwnProperty.call | ||
| /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; | ||
| /******/ | ||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = ""; | ||
| /******/ | ||
| /******/ | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(__webpack_require__.s = 0); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ({ | ||
| /***/ "./src/ArrowContainer.tsx": | ||
| /*!********************************!*\ | ||
| !*** ./src/ArrowContainer.tsx ***! | ||
| \********************************/ | ||
| /*! no static exports found */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| var __assign = (this && this.__assign) || function () { | ||
| __assign = Object.assign || function(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
| t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var React = __webpack_require__(/*! react */ "react"); | ||
| var util_1 = __webpack_require__(/*! ./util */ "./src/util.ts"); | ||
| var FLEX_CENTER_CHILD = { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }; | ||
| var ArrowContainer = function (_a) { | ||
| var position = _a.position, children = _a.children, style = _a.style, _b = _a.arrowColor, arrowColor = _b === void 0 ? util_1.Constants.DEFAULT_ARROW_COLOR : _b, _c = _a.arrowSize, arrowSize = _c === void 0 ? 10 : _c, arrowStyle = _a.arrowStyle, popoverRect = _a.popoverRect, targetRect = _a.targetRect; | ||
| return (React.createElement("div", { style: __assign({ paddingLeft: position === 'right' ? arrowSize : 0, paddingTop: position === 'bottom' ? arrowSize : 0, paddingBottom: position === 'top' ? arrowSize : 0, paddingRight: position === 'left' ? arrowSize : 0 }, style) }, | ||
| React.createElement("div", { style: __assign({ position: 'absolute' }, (function () { | ||
| var arrowWidth = arrowSize * 2; | ||
| var top = (targetRect.top - popoverRect.top) + (targetRect.height / 2) - (arrowWidth / 2); | ||
| var left = (targetRect.left - popoverRect.left) + (targetRect.width / 2) - (arrowWidth / 2); | ||
| left = left < 0 ? 0 : left; | ||
| left = left + arrowWidth > popoverRect.width ? popoverRect.width - arrowWidth : left; | ||
| top = top < 0 ? 0 : top; | ||
| top = top + arrowWidth > popoverRect.height ? popoverRect.height - arrowWidth : top; | ||
| switch (position) { | ||
| case 'right': | ||
| return { | ||
| borderTop: arrowSize + "px solid transparent", | ||
| borderBottom: arrowSize + "px solid transparent", | ||
| borderRight: arrowSize + "px solid " + arrowColor, | ||
| left: 0, | ||
| top: top, | ||
| }; | ||
| case 'left': | ||
| return { | ||
| borderTop: arrowSize + "px solid transparent", | ||
| borderBottom: arrowSize + "px solid transparent", | ||
| borderLeft: arrowSize + "px solid " + arrowColor, | ||
| right: 0, | ||
| top: top, | ||
| }; | ||
| case 'bottom': | ||
| return { | ||
| borderLeft: arrowSize + "px solid transparent", | ||
| borderRight: arrowSize + "px solid transparent", | ||
| borderBottom: arrowSize + "px solid " + arrowColor, | ||
| top: 0, | ||
| left: left, | ||
| }; | ||
| case 'top': | ||
| default: | ||
| return { | ||
| borderLeft: arrowSize + "px solid transparent", | ||
| borderRight: arrowSize + "px solid transparent", | ||
| borderTop: arrowSize + "px solid " + arrowColor, | ||
| bottom: 0, | ||
| left: left, | ||
| }; | ||
| } | ||
| })(), arrowStyle) }), | ||
| children)); | ||
| }; | ||
| exports.ArrowContainer = ArrowContainer; | ||
| /***/ }), | ||
| /***/ "./src/Popover.tsx": | ||
| /*!*************************!*\ | ||
| !*** ./src/Popover.tsx ***! | ||
| \*************************/ | ||
| /*! no static exports found */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| var __extends = (this && this.__extends) || (function () { | ||
| var extendStatics = function (d, b) { | ||
| extendStatics = Object.setPrototypeOf || | ||
| ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || | ||
| function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; | ||
| return extendStatics(d, b); | ||
| }; | ||
| return function (d, b) { | ||
| extendStatics(d, b); | ||
| function __() { this.constructor = d; } | ||
| d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
| }; | ||
| })(); | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var React = __webpack_require__(/*! react */ "react"); | ||
| var react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom"); | ||
| var util_1 = __webpack_require__(/*! ./util */ "./src/util.ts"); | ||
| var ArrowContainer_1 = __webpack_require__(/*! ./ArrowContainer */ "./src/ArrowContainer.tsx"); | ||
| exports.ArrowContainer = ArrowContainer_1.ArrowContainer; | ||
| var Popover = /** @class */ (function (_super) { | ||
| __extends(Popover, _super); | ||
| function Popover() { | ||
| var _this = _super !== null && _super.apply(this, arguments) || this; | ||
| _this.target = null; | ||
| _this.targetRect = null; | ||
| _this.targetPositionIntervalHandler = null; | ||
| _this.popoverDiv = null; | ||
| _this.positionOrder = null; | ||
| _this.willUnmount = false; | ||
| _this.willMount = false; | ||
| _this.onResize = function (e) { | ||
| _this.renderPopover(); | ||
| }; | ||
| _this.onClick = function (e) { | ||
| var _a = _this.props, onClickOutside = _a.onClickOutside, isOpen = _a.isOpen; | ||
| if (!_this.willUnmount && !_this.willMount && !_this.popoverDiv.contains(e.target) && !_this.target.contains(e.target) && onClickOutside && isOpen) { | ||
| onClickOutside(e); | ||
| } | ||
| }; | ||
| return _this; | ||
| } | ||
| Popover.prototype.componentDidMount = function () { | ||
| var _this = this; | ||
| window.setTimeout(function () { return _this.willMount = false; }); | ||
| var _a = this.props, position = _a.position, isOpen = _a.isOpen; | ||
| this.target = react_dom_1.findDOMNode(this); | ||
| this.positionOrder = this.getPositionPriorityOrder(position); | ||
| this.updatePopover(isOpen); | ||
| }; | ||
| Popover.prototype.componentDidUpdate = function (prevProps) { | ||
| if (this.target == null) { | ||
| this.target = react_dom_1.findDOMNode(this); | ||
| } | ||
| var prevIsOpen = prevProps.isOpen, prevPosition = prevProps.position, prevBody = prevProps.content; | ||
| var _a = this.props, isOpen = _a.isOpen, content = _a.content, position = _a.position; | ||
| this.positionOrder = this.getPositionPriorityOrder(this.props.position); | ||
| var hasNewDestination = prevProps.contentDestination !== this.props.contentDestination; | ||
| if (prevIsOpen !== isOpen || | ||
| prevBody !== content || | ||
| prevPosition !== position || | ||
| hasNewDestination) { | ||
| if (hasNewDestination) { | ||
| this.removePopover(); | ||
| this.popoverDiv.remove(); | ||
| } | ||
| this.updatePopover(isOpen); | ||
| } | ||
| }; | ||
| Popover.prototype.componentWillMount = function () { | ||
| this.willUnmount = false; | ||
| this.willMount = true; | ||
| }; | ||
| Popover.prototype.componentWillUnmount = function () { | ||
| this.willUnmount = true; | ||
| this.removePopover(); | ||
| }; | ||
| Popover.prototype.render = function () { | ||
| return this.props.children; | ||
| }; | ||
| Popover.prototype.updatePopover = function (isOpen) { | ||
| if (isOpen && this.target != null) { | ||
| if (!this.popoverDiv || !this.popoverDiv.parentNode) { | ||
| var transitionDuration = this.props.transitionDuration; | ||
| this.popoverDiv = this.createContainer(); | ||
| this.popoverDiv.style.opacity = '0'; | ||
| this.popoverDiv.style.transition = "opacity " + (transitionDuration || util_1.Constants.FADE_TRANSITION) + "s"; | ||
| (this.props.contentDestination || window.document.body).appendChild(this.popoverDiv); | ||
| window.addEventListener('resize', this.onResize); | ||
| window.addEventListener('click', this.onClick); | ||
| } | ||
| this.renderPopover(); | ||
| } | ||
| else if (this.popoverDiv && this.popoverDiv.parentNode) { | ||
| this.removePopover(); | ||
| } | ||
| }; | ||
| Popover.prototype.renderPopover = function (positionIndex) { | ||
| var _this = this; | ||
| if (positionIndex === void 0) { positionIndex = 0; } | ||
| if (positionIndex >= this.positionOrder.length) { | ||
| this.removePopover(); | ||
| return; | ||
| } | ||
| this.renderWithPosition({ position: this.positionOrder[positionIndex], targetRect: this.target.getBoundingClientRect() }, function (violation, rect) { | ||
| var _a; | ||
| var _b = _this.props, disableReposition = _b.disableReposition, contentLocation = _b.contentLocation; | ||
| if (violation && !disableReposition && !(typeof contentLocation === 'object')) { | ||
| _this.renderPopover(positionIndex + 1); | ||
| } | ||
| else { | ||
| var _c = _this.props, contentLocation_1 = _c.contentLocation, align = _c.align; | ||
| var _d = _this.getNudgedPopoverPosition(rect), nudgedTop = _d.top, nudgedLeft = _d.left; | ||
| var rectTop = rect.top, rectLeft = rect.left; | ||
| var position = _this.positionOrder[positionIndex]; | ||
| var _e = disableReposition ? { top: rectTop, left: rectLeft } : { top: nudgedTop, left: nudgedLeft }, top_1 = _e.top, left = _e.left; | ||
| if (contentLocation_1) { | ||
| var targetRect = _this.target.getBoundingClientRect(); | ||
| var popoverRect = _this.popoverDiv.getBoundingClientRect(); | ||
| (_a = typeof contentLocation_1 === 'function' ? contentLocation_1({ targetRect: targetRect, popoverRect: popoverRect, position: position, align: align, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop }) : contentLocation_1, top_1 = _a.top, left = _a.left); | ||
| _this.popoverDiv.style.left = left.toFixed() + "px"; | ||
| _this.popoverDiv.style.top = top_1.toFixed() + "px"; | ||
| } | ||
| else { | ||
| var destinationTopOffset = 0; | ||
| var destinationLeftOffset = 0; | ||
| if (_this.props.contentDestination) { | ||
| var destRect = _this.props.contentDestination.getBoundingClientRect(); | ||
| destinationTopOffset = -destRect.top; | ||
| destinationLeftOffset = -destRect.left; | ||
| } | ||
| var _f = [top_1 + window.pageYOffset, left + window.pageXOffset], absoluteTop = _f[0], absoluteLeft = _f[1]; | ||
| var finalLeft = absoluteLeft + destinationTopOffset; | ||
| var finalTop = absoluteTop + destinationLeftOffset; | ||
| _this.popoverDiv.style.left = finalLeft.toFixed() + "px"; | ||
| _this.popoverDiv.style.top = finalTop.toFixed() + "px"; | ||
| } | ||
| _this.popoverDiv.style.width = null; | ||
| _this.popoverDiv.style.height = null; | ||
| _this.renderWithPosition({ | ||
| position: position, | ||
| nudgedTop: nudgedTop - rect.top, | ||
| nudgedLeft: nudgedLeft - rect.left, | ||
| targetRect: _this.target.getBoundingClientRect(), | ||
| popoverRect: _this.popoverDiv.getBoundingClientRect(), | ||
| }, function () { | ||
| _this.startTargetPositionListener(10); | ||
| if (_this.popoverDiv.style.opacity !== '1') { | ||
| _this.popoverDiv.style.opacity = '1'; | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| Popover.prototype.startTargetPositionListener = function (checkInterval) { | ||
| var _this = this; | ||
| if (this.targetPositionIntervalHandler === null) { | ||
| this.targetPositionIntervalHandler = window.setInterval(function () { | ||
| var newTargetRect = _this.target.getBoundingClientRect(); | ||
| if (_this.targetPositionHasChanged(_this.targetRect, newTargetRect)) { | ||
| _this.renderPopover(); | ||
| } | ||
| _this.targetRect = newTargetRect; | ||
| }, checkInterval); | ||
| } | ||
| }; | ||
| Popover.prototype.renderWithPosition = function (_a, callback) { | ||
| var _this = this; | ||
| var position = _a.position, _b = _a.nudgedLeft, nudgedLeft = _b === void 0 ? 0 : _b, _c = _a.nudgedTop, nudgedTop = _c === void 0 ? 0 : _c, _d = _a.targetRect, targetRect = _d === void 0 ? util_1.Constants.EMPTY_CLIENT_RECT : _d, _e = _a.popoverRect, popoverRect = _e === void 0 ? util_1.Constants.EMPTY_CLIENT_RECT : _e; | ||
| var _f = this.props, padding = _f.windowBorderPadding, content = _f.content, align = _f.align; | ||
| var getContent = function (args) { | ||
| return typeof content === 'function' | ||
| ? content(args) | ||
| : content; | ||
| }; | ||
| react_dom_1.unstable_renderSubtreeIntoContainer(this, getContent({ position: position, nudgedLeft: nudgedLeft, nudgedTop: nudgedTop, targetRect: targetRect, popoverRect: popoverRect, align: align }), this.popoverDiv, function () { | ||
| if (_this.willUnmount) { | ||
| return; | ||
| } | ||
| var targetRect = _this.target.getBoundingClientRect(); | ||
| var popoverRect = _this.popoverDiv.getBoundingClientRect(); | ||
| var _a = _this.getLocationForPosition(position, targetRect, popoverRect), top = _a.top, left = _a.left; | ||
| callback(position === 'top' && top < padding || | ||
| position === 'left' && left < padding || | ||
| position === 'right' && left + popoverRect.width > window.innerWidth - padding || | ||
| position === 'bottom' && top + popoverRect.height > window.innerHeight - padding, { width: popoverRect.width, height: popoverRect.height, top: top, left: left }); | ||
| }); | ||
| }; | ||
| Popover.prototype.getNudgedPopoverPosition = function (_a) { | ||
| var top = _a.top, left = _a.left, width = _a.width, height = _a.height; | ||
| var padding = this.props.windowBorderPadding; | ||
| top = top < padding ? padding : top; | ||
| top = top + height > window.innerHeight - padding ? window.innerHeight - padding - height : top; | ||
| left = left < padding ? padding : left; | ||
| left = left + width > window.innerWidth - padding ? window.innerWidth - padding - width : left; | ||
| return { top: top, left: left }; | ||
| }; | ||
| Popover.prototype.removePopover = function () { | ||
| var _this = this; | ||
| if (this.popoverDiv) { | ||
| var transitionDuration = this.props.transitionDuration; | ||
| this.popoverDiv.style.opacity = '0'; | ||
| var remove = function () { | ||
| if (_this.willUnmount || !_this.props.isOpen || !_this.popoverDiv.parentNode) { | ||
| window.clearInterval(_this.targetPositionIntervalHandler); | ||
| window.removeEventListener('resize', _this.onResize); | ||
| window.removeEventListener('click', _this.onClick); | ||
| _this.targetPositionIntervalHandler = null; | ||
| if (_this.popoverDiv.parentNode) { | ||
| _this.popoverDiv.parentNode.removeChild(_this.popoverDiv); | ||
| } | ||
| } | ||
| }; | ||
| if (!this.willUnmount) { | ||
| window.setTimeout(remove, (transitionDuration || util_1.Constants.FADE_TRANSITION) * 1000); | ||
| } | ||
| else { | ||
| remove(); | ||
| } | ||
| } | ||
| }; | ||
| Popover.prototype.getPositionPriorityOrder = function (position) { | ||
| if (position && typeof position !== 'string') { | ||
| if (util_1.Constants.DEFAULT_POSITIONS.every(function (defaultPosition) { return position.find(function (p) { return p === defaultPosition; }) !== undefined; })) { | ||
| return util_1.arrayUnique(position); | ||
| } | ||
| else { | ||
| var remainingPositions = util_1.Constants.DEFAULT_POSITIONS.filter(function (defaultPosition) { return position.find(function (p) { return p === defaultPosition; }) === undefined; }); | ||
| return util_1.arrayUnique(position.concat(remainingPositions)); | ||
| } | ||
| } | ||
| else if (position && typeof position === 'string') { | ||
| var remainingPositions = util_1.Constants.DEFAULT_POSITIONS.filter(function (defaultPosition) { return defaultPosition !== position; }); | ||
| return util_1.arrayUnique([position].concat(remainingPositions)); | ||
| } | ||
| }; | ||
| Popover.prototype.createContainer = function () { | ||
| var _a = this.props, containerStyle = _a.containerStyle, containerClassName = _a.containerClassName; | ||
| var container = window.document.createElement('div'); | ||
| container.style.overflow = 'hidden'; | ||
| if (containerStyle) { | ||
| Object.keys(containerStyle).forEach(function (key) { return container.style[key] = containerStyle[key]; }); | ||
| } | ||
| container.className = containerClassName; | ||
| container.style.position = 'absolute'; | ||
| container.style.top = '0'; | ||
| container.style.left = '0'; | ||
| return container; | ||
| }; | ||
| Popover.prototype.getLocationForPosition = function (position, newTargetRect, popoverRect) { | ||
| var _a = this.props, padding = _a.padding, align = _a.align; | ||
| var targetMidX = newTargetRect.left + (newTargetRect.width / 2); | ||
| var targetMidY = newTargetRect.top + (newTargetRect.height / 2); | ||
| var top; | ||
| var left; | ||
| switch (position) { | ||
| case 'top': | ||
| top = newTargetRect.top - popoverRect.height - padding; | ||
| left = targetMidX - (popoverRect.width / 2); | ||
| if (align === 'start') { | ||
| left = newTargetRect.left; | ||
| } | ||
| if (align === 'end') { | ||
| left = newTargetRect.right - popoverRect.width; | ||
| } | ||
| break; | ||
| case 'left': | ||
| top = targetMidY - (popoverRect.height / 2); | ||
| left = newTargetRect.left - padding - popoverRect.width; | ||
| if (align === 'start') { | ||
| top = newTargetRect.top; | ||
| } | ||
| if (align === 'end') { | ||
| top = newTargetRect.bottom - popoverRect.height; | ||
| } | ||
| break; | ||
| case 'bottom': | ||
| top = newTargetRect.bottom + padding; | ||
| left = targetMidX - (popoverRect.width / 2); | ||
| if (align === 'start') { | ||
| left = newTargetRect.left; | ||
| } | ||
| if (align === 'end') { | ||
| left = newTargetRect.right - popoverRect.width; | ||
| } | ||
| break; | ||
| case 'right': | ||
| top = targetMidY - (popoverRect.height / 2); | ||
| left = newTargetRect.right + padding; | ||
| if (align === 'start') { | ||
| top = newTargetRect.top; | ||
| } | ||
| if (align === 'end') { | ||
| top = newTargetRect.bottom - popoverRect.height; | ||
| } | ||
| break; | ||
| } | ||
| return { top: top, left: left }; | ||
| }; | ||
| Popover.prototype.targetPositionHasChanged = function (oldTargetRect, newTargetRect) { | ||
| return oldTargetRect === null | ||
| || oldTargetRect.left !== newTargetRect.left | ||
| || oldTargetRect.top !== newTargetRect.top | ||
| || oldTargetRect.width !== newTargetRect.width | ||
| || oldTargetRect.height !== newTargetRect.height; | ||
| }; | ||
| Popover.defaultProps = { | ||
| padding: util_1.Constants.DEFAULT_PADDING, | ||
| windowBorderPadding: util_1.Constants.DEFAULT_WINDOW_PADDING, | ||
| position: ['top', 'right', 'left', 'bottom'], | ||
| align: 'center', | ||
| containerClassName: util_1.Constants.POPOVER_CONTAINER_CLASS_NAME, | ||
| }; | ||
| return Popover; | ||
| }(React.Component)); | ||
| exports.default = Popover; | ||
| /***/ }), | ||
| /***/ "./src/util.ts": | ||
| /*!*********************!*\ | ||
| !*** ./src/util.ts ***! | ||
| \*********************/ | ||
| /*! no static exports found */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.Constants = { | ||
| POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container', | ||
| DEFAULT_PADDING: 6, | ||
| DEFAULT_WINDOW_PADDING: 6, | ||
| FADE_TRANSITION: 0.35, | ||
| DEFAULT_ARROW_COLOR: 'black', | ||
| DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'], | ||
| EMPTY_CLIENT_RECT: { | ||
| top: 0, | ||
| left: 0, | ||
| bottom: 0, | ||
| height: 0, | ||
| right: 0, | ||
| width: 0, | ||
| }, | ||
| }; | ||
| exports.arrayUnique = function (array) { return array.filter(function (value, index, self) { return self.indexOf(value) === index; }); }; | ||
| /***/ }), | ||
| /***/ 0: | ||
| /*!*******************************!*\ | ||
| !*** multi ./src/Popover.tsx ***! | ||
| \*******************************/ | ||
| /*! no static exports found */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| module.exports = __webpack_require__(/*! ./src/Popover.tsx */"./src/Popover.tsx"); | ||
| /***/ }), | ||
| /***/ "react": | ||
| /*!************************!*\ | ||
| !*** external "react" ***! | ||
| \************************/ | ||
| /*! no static exports found */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("react"); | ||
| /***/ }), | ||
| /***/ "react-dom": | ||
| /*!****************************!*\ | ||
| !*** external "react-dom" ***! | ||
| \****************************/ | ||
| /*! no static exports found */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = require("react-dom"); | ||
| /***/ }) | ||
| /******/ }); | ||
| }); | ||
| !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var n in o)("object"==typeof exports?exports:t)[n]=o[n]}}(window,function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)o.d(n,i,function(e){return t[e]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=2)}([function(t,e){t.exports=require("react")},function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Constants={POPOVER_CONTAINER_CLASS_NAME:"react-tiny-popover-container",DEFAULT_PADDING:6,DEFAULT_WINDOW_PADDING:6,FADE_TRANSITION:.35,DEFAULT_ARROW_COLOR:"black",DEFAULT_POSITIONS:["top","left","right","bottom"],EMPTY_CLIENT_RECT:{top:0,left:0,bottom:0,height:0,right:0,width:0}},e.arrayUnique=function(t){return t.filter(function(t,e,o){return o.indexOf(t)===e})}},function(t,e,o){t.exports=o(3)},function(t,e,o){"use strict";var n,i=this&&this.__extends||(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)},function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)});Object.defineProperty(e,"__esModule",{value:!0});var r=o(0),p=o(4),s=o(1),a=o(5);e.ArrowContainer=a.ArrowContainer;var d=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.target=null,e.targetRect=null,e.targetPositionIntervalHandler=null,e.popoverDiv=null,e.positionOrder=null,e.willUnmount=!1,e.willMount=!1,e.onResize=function(t){e.renderPopover()},e.onClick=function(t){var o=e.props,n=o.onClickOutside,i=o.isOpen;e.willUnmount||e.willMount||e.popoverDiv.contains(t.target)||e.target.contains(t.target)||!n||!i||n(t)},e}return i(e,t),e.prototype.componentDidMount=function(){var t=this;window.setTimeout(function(){return t.willMount=!1});var e=this.props,o=e.position,n=e.isOpen;this.target=p.findDOMNode(this),this.positionOrder=this.getPositionPriorityOrder(o),this.updatePopover(n)},e.prototype.componentDidUpdate=function(t){null==this.target&&(this.target=p.findDOMNode(this));var e=t.isOpen,o=t.position,n=t.content,i=this.props,r=i.isOpen,s=i.content,a=i.position;this.positionOrder=this.getPositionPriorityOrder(this.props.position);var d=t.contentDestination!==this.props.contentDestination;(e!==r||n!==s||o!==a||d)&&(d&&(this.removePopover(),this.popoverDiv.remove()),this.updatePopover(r))},e.prototype.componentWillMount=function(){this.willUnmount=!1,this.willMount=!0},e.prototype.componentWillUnmount=function(){this.willUnmount=!0,this.removePopover()},e.prototype.render=function(){return this.props.children},e.prototype.updatePopover=function(t){if(t&&null!=this.target){if(!this.popoverDiv||!this.popoverDiv.parentNode){var e=this.props.transitionDuration;this.popoverDiv=this.createContainer(),this.popoverDiv.style.opacity="0",this.popoverDiv.style.transition="opacity "+(e||s.Constants.FADE_TRANSITION)+"s",(this.props.contentDestination||window.document.body).appendChild(this.popoverDiv),window.addEventListener("resize",this.onResize),window.addEventListener("click",this.onClick)}this.renderPopover()}else this.popoverDiv&&this.popoverDiv.parentNode&&this.removePopover()},e.prototype.renderPopover=function(t){var e=this;void 0===t&&(t=0),t>=this.positionOrder.length?this.removePopover():this.renderWithPosition({position:this.positionOrder[t],targetRect:this.target.getBoundingClientRect()},function(o,n){var i,r=e.props,p=r.disableReposition,s=r.contentLocation;if(o&&!p&&"object"!=typeof s)e.renderPopover(t+1);else{var a=e.props,d=a.contentLocation,l=a.align,u=e.getNudgedPopoverPosition(n),c=u.top,f=u.left,v=n.top,h=n.left,g=e.positionOrder[t],y=p?{top:v,left:h}:{top:c,left:f},w=y.top,P=y.left;if(d){var D=e.target.getBoundingClientRect(),O=e.popoverDiv.getBoundingClientRect();w=(i="function"==typeof d?d({targetRect:D,popoverRect:O,position:g,align:l,nudgedLeft:f,nudgedTop:c}):d).top,P=i.left,e.popoverDiv.style.left=P.toFixed()+"px",e.popoverDiv.style.top=w.toFixed()+"px"}else{var b=0,m=0;if(e.props.contentDestination){var _=e.props.contentDestination.getBoundingClientRect();b=-_.top,m=-_.left}var C=[w+window.pageYOffset,P+window.pageXOffset],R=C[1]+b,T=C[0]+m;e.popoverDiv.style.left=R.toFixed()+"px",e.popoverDiv.style.top=T.toFixed()+"px"}e.popoverDiv.style.width=null,e.popoverDiv.style.height=null,e.renderWithPosition({position:g,nudgedTop:c-n.top,nudgedLeft:f-n.left,targetRect:e.target.getBoundingClientRect(),popoverRect:e.popoverDiv.getBoundingClientRect()},function(){e.startTargetPositionListener(10),"1"!==e.popoverDiv.style.opacity&&(e.popoverDiv.style.opacity="1")})}})},e.prototype.startTargetPositionListener=function(t){var e=this;null===this.targetPositionIntervalHandler&&(this.targetPositionIntervalHandler=window.setInterval(function(){var t=e.target.getBoundingClientRect();e.targetPositionHasChanged(e.targetRect,t)&&e.renderPopover(),e.targetRect=t},t))},e.prototype.renderWithPosition=function(t,e){var o,n=this,i=t.position,r=t.nudgedLeft,a=void 0===r?0:r,d=t.nudgedTop,l=void 0===d?0:d,u=t.targetRect,c=void 0===u?s.Constants.EMPTY_CLIENT_RECT:u,f=t.popoverRect,v=void 0===f?s.Constants.EMPTY_CLIENT_RECT:f,h=this.props,g=h.windowBorderPadding,y=h.content,w=h.align;p.unstable_renderSubtreeIntoContainer(this,(o={position:i,nudgedLeft:a,nudgedTop:l,targetRect:c,popoverRect:v,align:w},"function"==typeof y?y(o):y),this.popoverDiv,function(){if(!n.willUnmount){var t=n.target.getBoundingClientRect(),o=n.popoverDiv.getBoundingClientRect(),r=n.getLocationForPosition(i,t,o),p=r.top,s=r.left;e("top"===i&&p<g||"left"===i&&s<g||"right"===i&&s+o.width>window.innerWidth-g||"bottom"===i&&p+o.height>window.innerHeight-g,{width:o.width,height:o.height,top:p,left:s})}})},e.prototype.getNudgedPopoverPosition=function(t){var e=t.top,o=t.left,n=t.width,i=t.height,r=this.props.windowBorderPadding;return{top:e=(e=e<r?r:e)+i>window.innerHeight-r?window.innerHeight-r-i:e,left:o=(o=o<r?r:o)+n>window.innerWidth-r?window.innerWidth-r-n:o}},e.prototype.removePopover=function(){var t=this;if(this.popoverDiv){var e=this.props.transitionDuration;this.popoverDiv.style.opacity="0";var o=function(){!t.willUnmount&&t.props.isOpen&&t.popoverDiv.parentNode||(window.clearInterval(t.targetPositionIntervalHandler),window.removeEventListener("resize",t.onResize),window.removeEventListener("click",t.onClick),t.targetPositionIntervalHandler=null,t.popoverDiv.parentNode&&t.popoverDiv.parentNode.removeChild(t.popoverDiv))};this.willUnmount?o():window.setTimeout(o,1e3*(e||s.Constants.FADE_TRANSITION))}},e.prototype.getPositionPriorityOrder=function(t){if(t&&"string"!=typeof t){if(s.Constants.DEFAULT_POSITIONS.every(function(e){return void 0!==t.find(function(t){return t===e})}))return s.arrayUnique(t);var e=s.Constants.DEFAULT_POSITIONS.filter(function(e){return void 0===t.find(function(t){return t===e})});return s.arrayUnique(t.concat(e))}if(t&&"string"==typeof t){e=s.Constants.DEFAULT_POSITIONS.filter(function(e){return e!==t});return s.arrayUnique([t].concat(e))}},e.prototype.createContainer=function(){var t=this.props,e=t.containerStyle,o=t.containerClassName,n=window.document.createElement("div");return n.style.overflow="hidden",e&&Object.keys(e).forEach(function(t){return n.style[t]=e[t]}),n.className=o,n.style.position="absolute",n.style.top="0",n.style.left="0",n},e.prototype.getLocationForPosition=function(t,e,o){var n,i,r=this.props,p=r.padding,s=r.align,a=e.left+e.width/2,d=e.top+e.height/2;switch(t){case"top":n=e.top-o.height-p,i=a-o.width/2,"start"===s&&(i=e.left),"end"===s&&(i=e.right-o.width);break;case"left":n=d-o.height/2,i=e.left-p-o.width,"start"===s&&(n=e.top),"end"===s&&(n=e.bottom-o.height);break;case"bottom":n=e.bottom+p,i=a-o.width/2,"start"===s&&(i=e.left),"end"===s&&(i=e.right-o.width);break;case"right":n=d-o.height/2,i=e.right+p,"start"===s&&(n=e.top),"end"===s&&(n=e.bottom-o.height)}return{top:n,left:i}},e.prototype.targetPositionHasChanged=function(t,e){return null===t||t.left!==e.left||t.top!==e.top||t.width!==e.width||t.height!==e.height},e.defaultProps={padding:s.Constants.DEFAULT_PADDING,windowBorderPadding:s.Constants.DEFAULT_WINDOW_PADDING,position:["top","right","left","bottom"],align:"center",containerClassName:s.Constants.POPOVER_CONTAINER_CLASS_NAME},e}(r.Component);e.default=d},function(t,e){t.exports=require("react-dom")},function(t,e,o){"use strict";var n=this&&this.__assign||function(){return(n=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};Object.defineProperty(e,"__esModule",{value:!0});var i=o(0),r=o(1);e.ArrowContainer=function(t){var e=t.position,o=t.children,p=t.style,s=t.arrowColor,a=void 0===s?r.Constants.DEFAULT_ARROW_COLOR:s,d=t.arrowSize,l=void 0===d?10:d,u=t.arrowStyle,c=t.popoverRect,f=t.targetRect;return i.createElement("div",{style:n({paddingLeft:"right"===e?l:0,paddingTop:"bottom"===e?l:0,paddingBottom:"top"===e?l:0,paddingRight:"left"===e?l:0},p)},i.createElement("div",{style:n({position:"absolute"},function(){var t=2*l,o=f.top-c.top+f.height/2-t/2,n=f.left-c.left+f.width/2-t/2;switch(n=(n=n<0?0:n)+t>c.width?c.width-t:n,o=(o=o<0?0:o)+t>c.height?c.height-t:o,e){case"right":return{borderTop:l+"px solid transparent",borderBottom:l+"px solid transparent",borderRight:l+"px solid "+a,left:0,top:o};case"left":return{borderTop:l+"px solid transparent",borderBottom:l+"px solid transparent",borderLeft:l+"px solid "+a,right:0,top:o};case"bottom":return{borderLeft:l+"px solid transparent",borderRight:l+"px solid transparent",borderBottom:l+"px solid "+a,top:0,left:n};case"top":default:return{borderLeft:l+"px solid transparent",borderRight:l+"px solid transparent",borderTop:l+"px solid "+a,bottom:0,left:n}}}(),u)}),o)}}])}); | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "react-tiny-popover", | ||
| "version": "3.4.4", | ||
| "version": "3.4.5", | ||
| "repository": { | ||
@@ -5,0 +5,0 @@ "type": "git", |
@@ -108,3 +108,3 @@ # react-tiny-popover | ||
| |position|```string``` or ```string[]``` ||You may provide a preferred position for your popover content in relation to its target. Valid values are ```'top', 'bottom', 'left', 'right'```. The default is ```'top'```. If you'd like, you can supply an array of preferred positions ranked in priority order. If the popover reaches the edge of the window, it will attempt to render in the order you specify. The default order is ```['top', 'right', 'left', 'bottom']```. If you'd like, you can provide a shorter array like ```['top', 'left']```. The remaining positions will be automatically filled in. If you provide any duplicate or other values in the array, they will be ignored.| | ||
| |contentDestination|```HTMLElement```|Allows for the popover contents to be rendered somewhere other than `document.body`.| | ||
| |contentDestination|```HTMLElement```||Allows for the popover contents to be rendered somewhere other than `document.body`.| | ||
| |contentLocation|```object``` or ```Function```||If you'd like to hook directly into the positioning process, you may do so here! You can provide an object of type ```{ top: number, left: number }``` to completely override the popover content's (```popoverRect```) location. You can also provide a function that looks like this: ```({ targetRect, popoverRect, position, align, nudgedLeft, nudgedTop }) => { top: number, left: number }``` (The arguments to this function are the same as the content renderer function above). Note that if repositioning is enabled, it happens before this step, so within here you'll be responsible for keeping ```popoverRect``` within the window's bounds if that matters to you!| | ||
@@ -111,0 +111,0 @@ |align|```string```||Possible values are ```start```, ```center```, and ```end```. If ```start``` is specified, the popover content's top or left location is aligned with its target's. With ```end``` specified, the content's bottom or right location is aligned with its target's. If ```center``` is specified, the popover content and target's centers are aligned. Defaults to ```center```.| |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.62%
100721
- Number of package files
- increased by100%
12
Worsened metrics
- Lines of code
- decreased by-17.72%
497
- Number of low quality alerts
- increased by100%
2
No dependency changes