Socket
Socket
Sign inDemoInstall

@zohodesk/popups

Package Overview
Dependencies
Maintainers
8
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zohodesk/popups - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

461

es/Popup/Popup.js

@@ -1,9 +0,3 @@

import _extends from 'babel-runtime/helpers/extends';
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import _Object$assign from 'babel-runtime/core-js/object/assign';
import _Object$keys from 'babel-runtime/core-js/object/keys';
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
import React from 'react';

@@ -13,270 +7,249 @@ import ReactDOM from 'react-dom';

import viewPort from '../ViewPort';
let popups = {};
var popups = {};
var closeGroupPopups = function closeGroupPopups() {
var groupName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'global';
var groupPopups = popups[groupName] || [];
groupPopups.forEach(function (popup) {
popup.state.isPopupOpen && resetPopupState(popup);
});
const closeGroupPopups = function () {
let groupName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'global';
let groupPopups = popups[groupName] || [];
groupPopups.forEach(popup => {
popup.state.isPopupOpen && resetPopupState(popup);
});
};
var resetPopupState = function resetPopupState(popup) {
popup.setState({
isPopupOpen: false,
isPopupReady: false,
position: 'bottom'
});
const resetPopupState = popup => {
popup.setState({
isPopupOpen: false,
isPopupReady: false,
position: 'bottom'
});
};
var resetAllPopupState = function resetAllPopupState(popup, filterGroupName) {
_Object$keys(popups).forEach(closeGroupPopups);
const resetAllPopupState = (popup, filterGroupName) => {
Object.keys(popups).forEach(closeGroupPopups);
};
var Popup = function Popup(Component) {
var group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
var customStyles = arguments[2];
const Popup = function (Component) {
let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
let customStyles = arguments.length > 2 ? arguments[2] : undefined;
const popupStyles = Object.assign({}, customStyles);
group = group || 'global';
class Popup extends React.Component {
constructor(props) {
super(props);
this.state = {
isPopupOpen: props.isPopupOpen || false,
isPopupReady: props.isPopupReady || false,
position: props.position || 'bottom',
fixedPosition: {}
};
this.popupGroup = props.group || group;
this.childGroup = props.childGroup;
this.stopCloseEvent = this.stopCloseEvent.bind(this);
this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
this.documentClickHandler = this.documentClickHandler.bind(this);
this.togglePopup = this.togglePopup.bind(this);
this.openPopupOnly = this.openPopupOnly.bind(this);
this.closePopupOnly = this.closePopupOnly.bind(this);
this.setRef = this.setRef.bind(this); //this.popupName = popupName;
}
var popupStyles = _Object$assign({}, customStyles);
group = group || 'global';
setRef(el) {
this.elementRef = el;
}
var Popup = function (_React$Component) {
_inherits(Popup, _React$Component);
UNSAFE_componentWillMount(nextProps) {
let state = null;
function Popup(props) {
_classCallCheck(this, Popup);
if (typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen) {
state = state || {};
state.isPopupOpen = nextProps.isPopupOpen;
}
var _this = _possibleConstructorReturn(this, (Popup.__proto__ || _Object$getPrototypeOf(Popup)).call(this, props));
if (typeof nextProps.isPopupReady !== "undefined" && nextProps.isPopupReady !== this.state.isPopupReady) {
state = state || {};
state.isPopupReady = nextProps.isPopupReady;
}
_this.state = {
isPopupOpen: props.isPopupOpen || false,
isPopupReady: props.isPopupReady || false,
position: props.position || 'bottom',
fixedPosition: {}
};
if (typeof nextProps.position !== "undefined" && nextProps.position !== this.state.position) {
state = state || {};
state.position = nextProps.position;
}
_this.popupGroup = props.group || group;
_this.childGroup = props.childGroup;
if (state) {
this.setState(state);
}
}
_this.stopCloseEvent = _this.stopCloseEvent.bind(_this);
_this.documentKeyupHandler = _this.documentKeyupHandler.bind(_this);
_this.documentClickHandler = _this.documentClickHandler.bind(_this);
componentDidMount() {
let groupPopups = popups[this.popupGroup] || [];
groupPopups.push(this);
popups[this.popupGroup] = groupPopups;
_this.togglePopup = _this.togglePopup.bind(_this);
_this.openPopupOnly = _this.openPopupOnly.bind(_this);
_this.closePopupOnly = _this.closePopupOnly.bind(_this);
if (groupPopups.length == 1) {
global.document.addEventListener('click', this.documentClickHandler, false);
global.document.addEventListener('keyup', this.documentKeyupHandler, false);
}
}
_this.setRef = _this.setRef.bind(_this);
//this.popupName = popupName;
return _this;
}
componentWillUnmount() {
popups = Object.keys(popups).reduce((res, groupName) => {
if (groupName == this.popupGroup) {
let groupPopups = popups[this.popupGroup];
let newGroupPopups = groupPopups.filter(popup => {
return popup !== this;
});
res[this.popupGroup] = newGroupPopups;
}
_createClass(Popup, [{
key: 'setRef',
value: function setRef(el) {
this.elementRef = el;
}
}, {
key: 'UNSAFE_componentWillMount',
value: function UNSAFE_componentWillMount(nextProps) {
var state = null;
if (typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen) {
state = state || {};
state.isPopupOpen = nextProps.isPopupOpen;
}
if (typeof nextProps.isPopupReady !== "undefined" && nextProps.isPopupReady !== this.state.isPopupReady) {
state = state || {};
state.isPopupReady = nextProps.isPopupReady;
}
if (typeof nextProps.position !== "undefined" && nextProps.position !== this.state.position) {
state = state || {};
state.position = nextProps.position;
}
if (state) {
this.setState(state);
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var groupPopups = popups[this.popupGroup] || [];
groupPopups.push(this);
popups[this.popupGroup] = groupPopups;
if (groupPopups.length == 1) {
global.document.addEventListener('click', this.documentClickHandler, false);
global.document.addEventListener('keyup', this.documentKeyupHandler, false);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _this2 = this;
return res;
}, popups);
popups = _Object$keys(popups).reduce(function (res, groupName) {
if (groupName == _this2.popupGroup) {
var groupPopups = popups[_this2.popupGroup];
var newGroupPopups = groupPopups.filter(function (popup) {
return popup !== _this2;
});
res[_this2.popupGroup] = newGroupPopups;
}
return res;
}, popups);
if (popups.length == 0) {
global.document.removeEventListener('click', this.documentClickHandler);
global.document.removeEventListener('keyup', this.documentKeyupHandler);
}
}
if (popups.length == 0) {
global.document.removeEventListener('click', this.documentClickHandler);
global.document.removeEventListener('keyup', this.documentKeyupHandler);
}
}
}, {
key: 'togglePopup',
value: function togglePopup(e, dropElement, placeHoldeEl, isPopupOpen) {
var _this3 = this;
togglePopup(e, dropElement, placeHoldeEl, isPopupOpen) {
this.stopCloseEvent(e); //Close the all other opes
this.stopCloseEvent(e);
let groupPopups = popups[this.popupGroup];
groupPopups.forEach(popup => {
if (popup != this) {
popup.state.isPopupOpen && popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
this.setState({
isPopupOpen: isPopupOpen ? isPopupOpen : !this.state.isPopupOpen,
isPopupReady: false,
position: 'bottom'
}, () => {
if (!dropElement || !placeHoldeEl) {
return;
}
//Close the all other opes
var groupPopups = popups[this.popupGroup];
groupPopups.forEach(function (popup) {
if (popup != _this3) {
popup.state.isPopupOpen && popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
;
requestAnimationFrame(() => {
var frame = this.props.frameId ? document.getElementById(this.props.frameId) : document.getElementById("container");
let defaultPosition = this.props.defaultPosition || "bottom";
let betterPosition = viewPort.betterView(dropElement, placeHoldeEl, defaultPosition, frame); //Auto predict views
this.setState({ isPopupOpen: isPopupOpen ? isPopupOpen : !this.state.isPopupOpen, isPopupReady: false, position: 'bottom' }, function () {
if (betterPosition.view) {
this.setState({
isPopupReady: true,
position: betterPosition.view,
fixedPosition: betterPosition.fixedPosition
});
} else {
this.setState({
isPopupReady: true,
position: 'bottom'
});
}
});
});
}
if (!dropElement || !placeHoldeEl) {
return;
};
openPopupOnly(e, dropElement, placeHoldeEl) {
this.togglePopup(e, dropElement, placeHoldeEl, true);
/*this.stopCloseEvent(e);
let groupPopups = popups[this.popupGroup];
groupPopups.forEach(popup => {
if (popup != this) {
popup.state.isPopupOpen &&
popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
this.setState({ isPopupOpen: true , isPopupReady : false , position: 'bottom' },()=>{
if( !dropElement || !placeHoldeEl ){ return; };
requestAnimationFrame(()=>{
var frame = this.props.frameId ? document.getElementById(this.props.frameId) : document.getElementById("container");
let defaultPosition = this.props.defaultPosition || "bottomCenter";
let betterPosition = viewPort.betterView( dropElement , placeHoldeEl , defaultPosition , frame);
//Auto predict views
if( betterPosition.view ) {
this.setState({ isPopupReady : true , position: betterPosition.view });
}else{
this.setState({ isPopupReady : true , position: defaultPosition });
}
})
});*/
}
requestAnimationFrame(function () {
var frame = _this3.props.frameId ? document.getElementById(_this3.props.frameId) : document.getElementById("container");
var defaultPosition = _this3.props.defaultPosition || "bottom";
var betterPosition = viewPort.betterView(dropElement, placeHoldeEl, defaultPosition, frame);
closePopupOnly(e) {
this.stopCloseEvent(e);
resetPopupState(this);
}
//Auto predict views
if (betterPosition.view) {
_this3.setState({ isPopupReady: true, position: betterPosition.view, fixedPosition: betterPosition.fixedPosition });
} else {
_this3.setState({ isPopupReady: true, position: 'bottom' });
}
});
});
}
}, {
key: 'openPopupOnly',
value: function openPopupOnly(e, dropElement, placeHoldeEl) {
documentClickHandler(e) {
try {
resetAllPopupState();
} catch (e) {
console.error('error', e);
}
}
this.togglePopup(e, dropElement, placeHoldeEl, true);
documentKeyupHandler(e) {
try {
if (e.keyCode == 27) {
resetAllPopupState();
}
} catch (e) {
console.log('error', e);
}
}
/*this.stopCloseEvent(e);
let groupPopups = popups[this.popupGroup];
groupPopups.forEach(popup => {
if (popup != this) {
popup.state.isPopupOpen &&
popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
this.setState({ isPopupOpen: true , isPopupReady : false , position: 'bottom' },()=>{
if( !dropElement || !placeHoldeEl ){ return; };
requestAnimationFrame(()=>{
var frame = this.props.frameId ? document.getElementById(this.props.frameId) : document.getElementById("container");
let defaultPosition = this.props.defaultPosition || "bottomCenter";
let betterPosition = viewPort.betterView( dropElement , placeHoldeEl , defaultPosition , frame);
//Auto predict views
if( betterPosition.view ) {
this.setState({ isPopupReady : true , position: betterPosition.view });
}else{
this.setState({ isPopupReady : true , position: defaultPosition });
}
})
});*/
}
}, {
key: 'closePopupOnly',
value: function closePopupOnly(e) {
this.stopCloseEvent(e);
resetPopupState(this);
}
}, {
key: 'documentClickHandler',
value: function documentClickHandler(e) {
try {
resetAllPopupState();
} catch (e) {
console.error('error', e);
}
}
}, {
key: 'documentKeyupHandler',
value: function documentKeyupHandler(e) {
try {
if (e.keyCode == 27) {
resetAllPopupState();
}
} catch (e) {
console.log('error', e);
}
}
}, {
key: 'stopCloseEvent',
value: function stopCloseEvent(e) {
e.stopPropagation && e.stopPropagation();
e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
if (this.childGroup) {
closeGroupPopups(this.childGroup);
}
}
}, {
key: 'render',
value: function render() {
var _state = this.state,
position = _state.position,
isPopupOpen = _state.isPopupOpen,
isPopupReady = _state.isPopupReady;
stopCloseEvent(e) {
e.stopPropagation && e.stopPropagation();
e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
var positionStyle = position ? popupStyles[position] || '' : '';
if (this.childGroup) {
closeGroupPopups(this.childGroup);
}
}
var arrowStyle = popupStyles.arrow + ' ' + positionStyle;
var popupOpenStyle = isPopupOpen ? popupStyles.isOpen + ' ' + positionStyle : '' + popupStyles.isHide;
var popupReadyStyle = isPopupReady ? '' + popupStyles.isReady : '';
var contentStyle = popupStyles.content + ' ' + popupOpenStyle + ' ' + popupReadyStyle;
render() {
let {
position,
isPopupOpen,
isPopupReady
} = this.state;
let positionStyle = position ? popupStyles[position] || '' : '';
let arrowStyle = `${popupStyles.arrow} ${positionStyle}`;
let popupOpenStyle = isPopupOpen ? `${popupStyles.isOpen} ${positionStyle}` : `${popupStyles.isHide}`;
let popupReadyStyle = isPopupReady ? `${popupStyles.isReady}` : '';
let contentStyle = `${popupStyles.content} ${popupOpenStyle} ${popupReadyStyle}`;
return /*#__PURE__*/React.createElement(Component, _extends({
ref: this.setRef
}, this.props, this.state, {
openPopupOnly: this.openPopupOnly,
closePopupOnly: this.closePopupOnly,
togglePopup: this.togglePopup,
isPopupOpen: this.state.isPopupOpen,
removeClose: this.stopCloseEvent,
popupStyle: {
arrow: arrowStyle,
content: contentStyle
},
popupStyles: popupStyles
}));
}
return React.createElement(Component, _extends({
ref: this.setRef
}, this.props, this.state, {
openPopupOnly: this.openPopupOnly,
closePopupOnly: this.closePopupOnly,
togglePopup: this.togglePopup,
isPopupOpen: this.state.isPopupOpen,
removeClose: this.stopCloseEvent,
popupStyle: {
arrow: arrowStyle,
content: contentStyle
},
popupStyles: popupStyles
}));
}
}]);
}
return Popup;
}(React.Component);
return hoistStatics(Popup, Component);
return hoistStatics(Popup, Component);
};

@@ -283,0 +256,0 @@

572

es/ViewPort.js

@@ -1,325 +0,337 @@

import _Object$keys from 'babel-runtime/core-js/object/keys';
var viewPort = {
frameRelativeRects: function frameRelativeRects(el, customFrame) {
if (!el) {
return;
}
let viewPort = {
frameRelativeRects: (el, customFrame) => {
if (!el) {
return;
}
var rect = el.getBoundingClientRect(); //Target Element
var documentEle = document.documentElement; //Body&HTML
var rect = el.getBoundingClientRect(); //Target Element
var customFrameRect = {
top: 0,
left: 0,
right: documentEle.clientWidth,
bottom: documentEle.clientHeight,
height: documentEle.clientHeight,
width: documentEle.clientWidth,
x: 0,
y: 0
};
if (customFrame) {
customFrameRect = customFrame.getBoundingClientRect();
}
let documentEle = document.documentElement; //Body&HTML
var newReact = {
top: rect.top - customFrameRect.top,
left: rect.left - customFrameRect.left,
height: rect.height,
width: rect.width
};
var customFrameRect = {
top: 0,
left: 0,
right: documentEle.clientWidth,
bottom: documentEle.clientHeight,
height: documentEle.clientHeight,
width: documentEle.clientWidth,
x: 0,
y: 0
};
newReact.bottom = newReact.top + newReact.height;
newReact.right = newReact.left + newReact.width;
if (customFrame) {
customFrameRect = customFrame.getBoundingClientRect();
}
newReact.x = newReact.left;
newReact.y = newReact.top;
let newReact = {
top: rect.top - customFrameRect.top,
left: rect.left - customFrameRect.left,
height: rect.height,
width: rect.width
};
newReact.bottom = newReact.top + newReact.height;
newReact.right = newReact.left + newReact.width;
newReact.x = newReact.left;
newReact.y = newReact.top;
let rectGap = {
top: newReact.top,
left: newReact.left,
bottom: customFrameRect.height - newReact.bottom,
right: customFrameRect.width - newReact.right
};
rectGap.center = {
top: rectGap.top + newReact.height / 2,
left: rectGap.left + newReact.width / 2,
bottom: rectGap.bottom + newReact.height / 2,
right: rectGap.right + newReact.width / 2
};
let adjustments = {};
var rectGap = {
top: newReact.top,
left: newReact.left,
bottom: customFrameRect.height - newReact.bottom,
right: customFrameRect.width - newReact.right
};
if (newReact.top < 0) {
adjustments.top = Math.abs(newReact.top);
}
rectGap.center = {
top: rectGap.top + newReact.height / 2,
left: rectGap.left + newReact.width / 2,
bottom: rectGap.bottom + newReact.height / 2,
right: rectGap.right + newReact.width / 2
};
if (newReact.left < 0) {
adjustments.left = Math.abs(newReact.left);
}
var adjustments = {};
if (newReact.top < 0) {
adjustments.top = Math.abs(newReact.top);
}
if (newReact.left < 0) {
adjustments.left = Math.abs(newReact.left);
}
if (newReact.bottom > customFrameRect.height) {
adjustments.bottom = newReact.bottom - customFrameRect.height;
}
if (newReact.right > customFrameRect.width) {
adjustments.right = newReact.right - customFrameRect.width;
}
if (newReact.bottom > customFrameRect.height) {
adjustments.bottom = newReact.bottom - customFrameRect.height;
}
return { frameRect: customFrameRect, rect: newReact, rectGap: rectGap, adjustments: adjustments };
},
isInViewPort: function isInViewPort(el, customFrame) {
if (!el) {
return;
}
if (newReact.right > customFrameRect.width) {
adjustments.right = newReact.right - customFrameRect.width;
}
var elRects = viewPort.frameRelativeRects(el, customFrame);
var react = elRects.rect;
var frameReact = elRects.frameRect;
return {
frameRect: customFrameRect,
rect: newReact,
rectGap,
adjustments
};
},
isInViewPort: (el, customFrame) => {
if (!el) {
return;
}
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameReact.height && rect.right <= frameReact.width;
},
possibilities: function possibilities(el, relativeBox, customFrame) {
if (!el) {
return;
}
let elRects = viewPort.frameRelativeRects(el, customFrame);
let react = elRects.rect;
let frameReact = elRects.frameRect;
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameReact.height && rect.right <= frameReact.width;
},
possibilities: (el, relativeBox, customFrame) => {
if (!el) {
return;
}
var elRects = viewPort.frameRelativeRects(el, customFrame);
var rect = elRects.rect;
var adjustments = elRects.adjustments;
let elRects = viewPort.frameRelativeRects(el, customFrame);
let rect = elRects.rect;
let adjustments = elRects.adjustments;
let relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
let relativeBoxRect = relativeBoxReacts.rect;
let relativeBoxGap = relativeBoxReacts.rectGap;
let relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
let {
rectGap: documentGap
} = relativeBoxDocumentRects;
adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.top ? adjustments.top = adjustments.top + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.bottom ? adjustments.bottom = adjustments.bottom + relativeBoxReacts.rect.width * 2 / 3 : null;
let views = {}; //bottomCenter
var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
var relativeBoxRect = relativeBoxReacts.rect;
var relativeBoxGap = relativeBoxReacts.rectGap;
var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
var documentGap = relativeBoxDocumentRects.rectGap;
let bottomOverFlow = rect.height >= relativeBoxGap.bottom;
let bottomRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
let bottomLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left; //bottomRight
adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.top ? adjustments.top = adjustments.top + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.bottom ? adjustments.bottom = adjustments.bottom + relativeBoxReacts.rect.width * 2 / 3 : null;
let bottomLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.bottomRight = !(bottomOverFlow || bottomLeftOnlyOverFlow); //bottomLeft
var views = {};
let bottomRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.bottomLeft = !(bottomOverFlow || bottomRightOnlyOverFlow);
views.bottomCenter = !(bottomOverFlow || bottomRightOverFlow || bottomLeftOverFlow); //topCenter
//bottomCenter
var bottomOverFlow = rect.height >= relativeBoxGap.bottom;
var bottomRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
var bottomLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left;
let topOverFlow = rect.height >= relativeBoxGap.top;
let topRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
let topLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left; //topRight
//bottomRight
var bottomLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.bottomRight = !(bottomOverFlow || bottomLeftOnlyOverFlow);
let topLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.topRight = !(topOverFlow || topLeftOnlyOverFlow); //topLeft
//bottomLeft
var bottomRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.bottomLeft = !(bottomOverFlow || bottomRightOnlyOverFlow);
let topRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.topLeft = !(topOverFlow || topRightOnlyOverFlow);
views.topCenter = !(topOverFlow || topRightOverFlow || topLeftOverFlow); //|| topLeftOnlyOverFlow || topRightOnlyOverFlow);
//leftCenter
views.bottomCenter = !(bottomOverFlow || bottomRightOverFlow || bottomLeftOverFlow);
//topCenter
var topOverFlow = rect.height >= relativeBoxGap.top;
var topRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
var topLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left;
let leftOverFlow = rect.width >= relativeBoxGap.left;
let leftTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
let leftBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom; //leftTop
//topRight
var topLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.topRight = !(topOverFlow || topLeftOnlyOverFlow);
let leftTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.leftTop = !(leftOverFlow || leftTopOnlyOverFlow); //leftBottom
//topLeft
var topRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.topLeft = !(topOverFlow || topRightOnlyOverFlow);
let leftBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.leftBottom = !(leftOverFlow || leftBottomOnlyOverFlow);
views.leftCenter = !(leftOverFlow || leftTopOverFlow || leftBottomOverFlow); // || leftTopOnlyOverFlow || leftBottomOnlyOverFlow);
//rightCenter
views.topCenter = !(topOverFlow || topRightOverFlow || topLeftOverFlow); //|| topLeftOnlyOverFlow || topRightOnlyOverFlow);
let rightOverFlow = rect.width >= relativeBoxGap.right;
let rightTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
let rightBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom; //rightTop
//leftCenter
var leftOverFlow = rect.width >= relativeBoxGap.left;
let rightTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.rightTop = !(rightOverFlow || rightTopOnlyOverFlow); //rightBottom
var leftTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
var leftBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom;
let rightBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.rightBottom = !(rightOverFlow || rightBottomOnlyOverFlow);
views.rightCenter = !(rightOverFlow || rightTopOverFlow || rightBottomOverFlow); // || rightTopOnlyOverFlow || rightBottomOnlyOverFlow);
//leftTop
var leftTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.leftTop = !(leftOverFlow || leftTopOnlyOverFlow);
let horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
let horizontalLeft = relativeBoxGap.left;
let horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
let verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
let verticalTop = relativeBoxGap.top;
let verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
let horizontalTop = documentGap.bottom + relativeBoxRect.height;
let verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
let needArrow = false; // let isAbsolute = false;
//leftBottom
var leftBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.leftBottom = !(leftOverFlow || leftBottomOnlyOverFlow);
let paddingSpace = 5; // space between target and relative element
views.leftCenter = !(leftOverFlow || leftTopOverFlow || leftBottomOverFlow); // || leftTopOnlyOverFlow || leftBottomOnlyOverFlow);
let arrowSize = needArrow ? 10 : 5;
rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
debugger;
let viewsOffset = {
// Code Copy frm DOT ViewPort.js qa
bottomCenter: {
left: horizontalCenter - rect.width / 2,
top: verticalBottom + arrowSize
},
bottomRight: {
left: horizontalRight - rect.width,
top: verticalBottom + arrowSize
},
bottomLeft: {
left: horizontalLeft,
top: verticalBottom + arrowSize
},
topCenter: {
left: horizontalCenter - rect.width / 2,
bottom: horizontalTop + arrowSize
},
topRight: {
left: horizontalRight - rect.width,
bottom: horizontalTop + arrowSize
},
topLeft: {
left: horizontalLeft,
bottom: horizontalTop + arrowSize
},
rightCenter: {
left: horizontalRight + arrowSize,
top: verticalCenter - rect.height / 2
},
rightBottom: {
left: horizontalRight + arrowSize,
bottom: documentGap.bottom
},
rightTop: {
left: horizontalRight + arrowSize,
top: verticalTop
},
leftCenter: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalCenter - rect.height / 2
},
leftTop: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalTop
},
leftBottom: {
left: horizontalLeft - (rect.width + arrowSize),
bottom: documentGap.bottom
}
};
return {
views,
adjustments,
positionOffset: viewsOffset
};
},
getArrowAdjustments: (el, relativeBox, customFrame) => {
if (!el) {
return;
}
//rightCenter
var rightOverFlow = rect.width >= relativeBoxGap.right;
let elRects = viewPort.frameRelativeRects(el, customFrame);
let rect = elRects.rect;
let rectGap = elRects.rectGap;
let adjustments = elRects.adjustments;
let relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
let relativeBoxReact = relativeBoxReacts.rect;
let relativeBoxGap = relativeBoxReacts.rectGap;
return {
left: relativeBoxGap.center.left - rectGap.left,
right: relativeBoxGap.center.right - rectGap.right,
top: relativeBoxGap.center.top - rectGap.top,
bottom: relativeBoxGap.center.bottom - rectGap.bottom
};
},
betterView: (popup, relativeBox, defaultView, customFrame) => {
let viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);
var rightTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
var rightBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom;
if (!viewPortPossibilities) {
return;
}
//rightTop
var rightTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.rightTop = !(rightOverFlow || rightTopOnlyOverFlow);
let views = viewPortPossibilities.views;
let adjustments = viewPortPossibilities.adjustments;
let viewKeys = Object.keys(views);
let isViewFound = false;
let positionOffset = viewPortPossibilities.positionOffset;
//rightBottom
var rightBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.rightBottom = !(rightOverFlow || rightBottomOnlyOverFlow);
for (let i = 0; i < viewKeys.length; i++) {
let viewKey = viewKeys[i];
views.rightCenter = !(rightOverFlow || rightTopOverFlow || rightBottomOverFlow); // || rightTopOnlyOverFlow || rightBottomOnlyOverFlow);
if (views[viewKey]) {
isViewFound = true;
break;
}
}
if (!isViewFound) {
return {
view: null,
adjustments,
fixedPosition: {}
};
}
var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
var horizontalLeft = relativeBoxGap.left;
var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
var verticalTop = relativeBoxGap.top;
var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
var horizontalTop = documentGap.bottom + relativeBoxRect.height;
var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
if (views[defaultView]) {
return {
view: defaultView,
adjustments,
fixedPosition: positionOffset[defaultView]
};
}
var needArrow = false;
// let isAbsolute = false;
var paddingSpace = 5; // space between target and relative element
var arrowSize = needArrow ? 10 : 5;
rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
let defaultPosition = defaultView.replace(/Center|Bottom|Top|Left|Right$/, '');
let viewTypes = {
top: ['Center', 'Right', 'Left'],
left: ['Center', 'Top', 'Bottom']
};
viewTypes.bottom = viewTypes.top;
viewTypes.right = viewTypes.left;
let defaultPositions = viewTypes[defaultPosition];
debugger;
for (let i = 0, len = defaultPositions.length; i < len; i++) {
let viewKey = defaultPosition + defaultPositions[i];
var viewsOffset = { // Code Copy frm DOT ViewPort.js qa
bottomCenter: {
left: horizontalCenter - rect.width / 2,
top: verticalBottom + arrowSize
},
bottomRight: {
left: horizontalRight - rect.width,
top: verticalBottom + arrowSize
},
bottomLeft: {
left: horizontalLeft,
top: verticalBottom + arrowSize
},
topCenter: {
left: horizontalCenter - rect.width / 2,
bottom: horizontalTop + arrowSize
},
topRight: {
left: horizontalRight - rect.width,
bottom: horizontalTop + arrowSize
},
topLeft: {
left: horizontalLeft,
bottom: horizontalTop + arrowSize
},
rightCenter: {
left: horizontalRight + arrowSize,
top: verticalCenter - rect.height / 2
},
rightBottom: {
left: horizontalRight + arrowSize,
bottom: documentGap.bottom
},
rightTop: {
left: horizontalRight + arrowSize,
top: verticalTop
},
leftCenter: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalCenter - rect.height / 2
},
leftTop: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalTop
},
leftBottom: {
left: horizontalLeft - (rect.width + arrowSize),
bottom: documentGap.bottom
}
};
if (views[viewKey]) {
return {
view: viewKey,
adjustments,
fixedPosition: positionOffset[viewKey]
};
}
}
return { views: views, adjustments: adjustments, positionOffset: viewsOffset };
},
let oppositePositionsOrder = {
bottom: ['top', 'right', 'left'],
top: ['bottom', 'right', 'left'],
left: ['bottom', 'right', 'top'],
right: ['bottom', 'top', 'left']
};
let oppositeViews = oppositePositionsOrder[defaultPosition];
getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
if (!el) {
return;
}
for (let i = 0, len = oppositeViews.length; i < len; i++) {
let oppositeView = oppositeViews[i];
let positions = viewTypes[oppositeView];
var elRects = viewPort.frameRelativeRects(el, customFrame);
var rect = elRects.rect;
var rectGap = elRects.rectGap;
var adjustments = elRects.adjustments;
for (let j = 0, lenx = positions.length; j < lenx; j++) {
let viewKey = oppositeView + positions[j];
var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
var relativeBoxReact = relativeBoxReacts.rect;
var relativeBoxGap = relativeBoxReacts.rectGap;
if (views[viewKey]) {
return {
view: viewKey,
adjustments,
fixedPosition: positionOffset[viewKey]
};
}
}
}
return {
left: relativeBoxGap.center.left - rectGap.left,
right: relativeBoxGap.center.right - rectGap.right,
top: relativeBoxGap.center.top - rectGap.top,
bottom: relativeBoxGap.center.bottom - rectGap.bottom
};
},
betterView: function betterView(popup, relativeBox, defaultView, customFrame) {
var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);
if (!viewPortPossibilities) {
return;
}
var views = viewPortPossibilities.views;
var adjustments = viewPortPossibilities.adjustments;
var viewKeys = _Object$keys(views);
var isViewFound = false;
var positionOffset = viewPortPossibilities.positionOffset;
for (var i = 0; i < viewKeys.length; i++) {
var viewKey = viewKeys[i];
if (views[viewKey]) {
isViewFound = true;
break;
}
}
if (!isViewFound) {
return { view: null, adjustments: adjustments, fixedPosition: {} };
}
if (views[defaultView]) {
return { view: defaultView, adjustments: adjustments, fixedPosition: positionOffset[defaultView] };
}
var defaultPosition = defaultView.replace(/Center|Bottom|Top|Left|Right$/, '');
var viewTypes = { top: ['Center', 'Right', 'Left'], left: ['Center', 'Top', 'Bottom'] };
viewTypes.bottom = viewTypes.top;
viewTypes.right = viewTypes.left;
var defaultPositions = viewTypes[defaultPosition];
for (var _i = 0, len = defaultPositions.length; _i < len; _i++) {
var _viewKey = defaultPosition + defaultPositions[_i];
if (views[_viewKey]) {
return { view: _viewKey, adjustments: adjustments, fixedPosition: positionOffset[_viewKey] };
}
}
var oppositePositionsOrder = {
bottom: ['top', 'right', 'left'],
top: ['bottom', 'right', 'left'],
left: ['bottom', 'right', 'top'],
right: ['bottom', 'top', 'left']
};
var oppositeViews = oppositePositionsOrder[defaultPosition];
for (var _i2 = 0, _len = oppositeViews.length; _i2 < _len; _i2++) {
var oppositeView = oppositeViews[_i2];
var positions = viewTypes[oppositeView];
for (var j = 0, lenx = positions.length; j < lenx; j++) {
var _viewKey2 = oppositeView + positions[j];
if (views[_viewKey2]) {
return { view: _viewKey2, adjustments: adjustments, fixedPosition: positionOffset[_viewKey2] };
}
}
}
return { view: null, adjustments: adjustments, fixedPosition: {} };
}
return {
view: null,
adjustments,
fixedPosition: {}
};
}
};
export default {
betterView: viewPort.betterView,
frameRelativeRects: viewPort.frameRelativeRects,
getArrowAdjustments: viewPort.getArrowAdjustments
betterView: viewPort.betterView,
frameRelativeRects: viewPort.frameRelativeRects,
getArrowAdjustments: viewPort.getArrowAdjustments
};

13

lib/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,6 +6,3 @@ Object.defineProperty(exports, "__esModule", {

});
var _Popup = require('./Popup');
Object.defineProperty(exports, 'Popup', {
Object.defineProperty(exports, "Popup", {
enumerable: true,

@@ -16,3 +13,3 @@ get: function get() {

});
Object.defineProperty(exports, 'closeGroupPopups', {
Object.defineProperty(exports, "closeGroupPopups", {
enumerable: true,

@@ -22,2 +19,4 @@ get: function get() {

}
});
});
var _Popup = require("./Popup");

19

lib/Popup/index.js

@@ -1,16 +0,15 @@

'use strict';
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Popup = require('./Popup');
Object.defineProperty(exports, 'Popup', {
Object.defineProperty(exports, "Popup", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Popup).default;
return _Popup["default"];
}
});
Object.defineProperty(exports, 'closeGroupPopups', {
Object.defineProperty(exports, "closeGroupPopups", {
enumerable: true,

@@ -22,2 +21,6 @@ get: function get() {

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _Popup = _interopRequireWildcard(require("./Popup"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

519

lib/Popup/Popup.js

@@ -1,306 +0,323 @@

'use strict';
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
exports.closeGroupPopups = undefined;
exports["default"] = exports.closeGroupPopups = void 0;
var _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; };
var _react = _interopRequireDefault(require("react"));
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _reactDom = _interopRequireDefault(require("react-dom"));
var _react = require('react');
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
var _react2 = _interopRequireDefault(_react);
var _ViewPort = _interopRequireDefault(require("../ViewPort"));
var _reactDom = require('react-dom');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var _reactDom2 = _interopRequireDefault(_reactDom);
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
var _hoistNonReactStatics = require('hoist-non-react-statics');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);
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); } }
var _ViewPort = require('../ViewPort');
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
var _ViewPort2 = _interopRequireDefault(_ViewPort);
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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var popups = {};
var closeGroupPopups = function closeGroupPopups() {
var groupName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'global';
var groupPopups = popups[groupName] || [];
groupPopups.forEach(function (popup) {
popup.state.isPopupOpen && resetPopupState(popup);
});
var groupName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'global';
var groupPopups = popups[groupName] || [];
groupPopups.forEach(function (popup) {
popup.state.isPopupOpen && resetPopupState(popup);
});
};
exports.closeGroupPopups = closeGroupPopups;
var resetPopupState = function resetPopupState(popup) {
popup.setState({
isPopupOpen: false,
isPopupReady: false,
position: 'bottom'
});
popup.setState({
isPopupOpen: false,
isPopupReady: false,
position: 'bottom'
});
};
var resetAllPopupState = function resetAllPopupState(popup, filterGroupName) {
Object.keys(popups).forEach(closeGroupPopups);
Object.keys(popups).forEach(closeGroupPopups);
};
var Popup = function Popup(Component) {
var group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
var customStyles = arguments[2];
var group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
var customStyles = arguments.length > 2 ? arguments[2] : undefined;
var popupStyles = Object.assign({}, customStyles);
group = group || 'global';
var Popup = /*#__PURE__*/function (_React$Component) {
_inherits(Popup, _React$Component);
var popupStyles = Object.assign({}, customStyles);
group = group || 'global';
var _super = _createSuper(Popup);
var Popup = function (_React$Component) {
_inherits(Popup, _React$Component);
function Popup(props) {
var _this;
function Popup(props) {
_classCallCheck(this, Popup);
_classCallCheck(this, Popup);
var _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
_this = _super.call(this, props);
_this.state = {
isPopupOpen: props.isPopupOpen || false,
isPopupReady: props.isPopupReady || false,
position: props.position || 'bottom',
fixedPosition: {}
};
_this.popupGroup = props.group || group;
_this.childGroup = props.childGroup;
_this.stopCloseEvent = _this.stopCloseEvent.bind(_assertThisInitialized(_this));
_this.documentKeyupHandler = _this.documentKeyupHandler.bind(_assertThisInitialized(_this));
_this.documentClickHandler = _this.documentClickHandler.bind(_assertThisInitialized(_this));
_this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
_this.openPopupOnly = _this.openPopupOnly.bind(_assertThisInitialized(_this));
_this.closePopupOnly = _this.closePopupOnly.bind(_assertThisInitialized(_this));
_this.setRef = _this.setRef.bind(_assertThisInitialized(_this)); //this.popupName = popupName;
_this.state = {
isPopupOpen: props.isPopupOpen || false,
isPopupReady: props.isPopupReady || false,
position: props.position || 'bottom',
fixedPosition: {}
};
return _this;
}
_this.popupGroup = props.group || group;
_this.childGroup = props.childGroup;
_createClass(Popup, [{
key: "setRef",
value: function setRef(el) {
this.elementRef = el;
}
}, {
key: "UNSAFE_componentWillMount",
value: function UNSAFE_componentWillMount(nextProps) {
var state = null;
_this.stopCloseEvent = _this.stopCloseEvent.bind(_this);
_this.documentKeyupHandler = _this.documentKeyupHandler.bind(_this);
_this.documentClickHandler = _this.documentClickHandler.bind(_this);
if (typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen) {
state = state || {};
state.isPopupOpen = nextProps.isPopupOpen;
}
_this.togglePopup = _this.togglePopup.bind(_this);
_this.openPopupOnly = _this.openPopupOnly.bind(_this);
_this.closePopupOnly = _this.closePopupOnly.bind(_this);
if (typeof nextProps.isPopupReady !== "undefined" && nextProps.isPopupReady !== this.state.isPopupReady) {
state = state || {};
state.isPopupReady = nextProps.isPopupReady;
}
_this.setRef = _this.setRef.bind(_this);
//this.popupName = popupName;
return _this;
}
if (typeof nextProps.position !== "undefined" && nextProps.position !== this.state.position) {
state = state || {};
state.position = nextProps.position;
}
_createClass(Popup, [{
key: 'setRef',
value: function setRef(el) {
this.elementRef = el;
}
}, {
key: 'UNSAFE_componentWillMount',
value: function UNSAFE_componentWillMount(nextProps) {
var state = null;
if (typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen) {
state = state || {};
state.isPopupOpen = nextProps.isPopupOpen;
}
if (typeof nextProps.isPopupReady !== "undefined" && nextProps.isPopupReady !== this.state.isPopupReady) {
state = state || {};
state.isPopupReady = nextProps.isPopupReady;
}
if (typeof nextProps.position !== "undefined" && nextProps.position !== this.state.position) {
state = state || {};
state.position = nextProps.position;
}
if (state) {
this.setState(state);
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var groupPopups = popups[this.popupGroup] || [];
groupPopups.push(this);
popups[this.popupGroup] = groupPopups;
if (groupPopups.length == 1) {
global.document.addEventListener('click', this.documentClickHandler, false);
global.document.addEventListener('keyup', this.documentKeyupHandler, false);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _this2 = this;
if (state) {
this.setState(state);
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var groupPopups = popups[this.popupGroup] || [];
groupPopups.push(this);
popups[this.popupGroup] = groupPopups;
popups = Object.keys(popups).reduce(function (res, groupName) {
if (groupName == _this2.popupGroup) {
var groupPopups = popups[_this2.popupGroup];
var newGroupPopups = groupPopups.filter(function (popup) {
return popup !== _this2;
});
res[_this2.popupGroup] = newGroupPopups;
}
return res;
}, popups);
if (groupPopups.length == 1) {
global.document.addEventListener('click', this.documentClickHandler, false);
global.document.addEventListener('keyup', this.documentKeyupHandler, false);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var _this2 = this;
if (popups.length == 0) {
global.document.removeEventListener('click', this.documentClickHandler);
global.document.removeEventListener('keyup', this.documentKeyupHandler);
}
}
}, {
key: 'togglePopup',
value: function togglePopup(e, dropElement, placeHoldeEl, isPopupOpen) {
var _this3 = this;
popups = Object.keys(popups).reduce(function (res, groupName) {
if (groupName == _this2.popupGroup) {
var groupPopups = popups[_this2.popupGroup];
var newGroupPopups = groupPopups.filter(function (popup) {
return popup !== _this2;
});
res[_this2.popupGroup] = newGroupPopups;
}
this.stopCloseEvent(e);
return res;
}, popups);
//Close the all other opes
var groupPopups = popups[this.popupGroup];
groupPopups.forEach(function (popup) {
if (popup != _this3) {
popup.state.isPopupOpen && popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
if (popups.length == 0) {
global.document.removeEventListener('click', this.documentClickHandler);
global.document.removeEventListener('keyup', this.documentKeyupHandler);
}
}
}, {
key: "togglePopup",
value: function togglePopup(e, dropElement, placeHoldeEl, isPopupOpen) {
var _this3 = this;
this.setState({ isPopupOpen: isPopupOpen ? isPopupOpen : !this.state.isPopupOpen, isPopupReady: false, position: 'bottom' }, function () {
this.stopCloseEvent(e); //Close the all other opes
if (!dropElement || !placeHoldeEl) {
return;
};
var groupPopups = popups[this.popupGroup];
groupPopups.forEach(function (popup) {
if (popup != _this3) {
popup.state.isPopupOpen && popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
this.setState({
isPopupOpen: isPopupOpen ? isPopupOpen : !this.state.isPopupOpen,
isPopupReady: false,
position: 'bottom'
}, function () {
if (!dropElement || !placeHoldeEl) {
return;
}
requestAnimationFrame(function () {
var frame = _this3.props.frameId ? document.getElementById(_this3.props.frameId) : document.getElementById("container");
var defaultPosition = _this3.props.defaultPosition || "bottom";
var betterPosition = _ViewPort2.default.betterView(dropElement, placeHoldeEl, defaultPosition, frame);
;
requestAnimationFrame(function () {
var frame = _this3.props.frameId ? document.getElementById(_this3.props.frameId) : document.getElementById("container");
var defaultPosition = _this3.props.defaultPosition || "bottom";
//Auto predict views
if (betterPosition.view) {
_this3.setState({ isPopupReady: true, position: betterPosition.view, fixedPosition: betterPosition.fixedPosition });
} else {
_this3.setState({ isPopupReady: true, position: 'bottom' });
}
});
});
}
}, {
key: 'openPopupOnly',
value: function openPopupOnly(e, dropElement, placeHoldeEl) {
var betterPosition = _ViewPort["default"].betterView(dropElement, placeHoldeEl, defaultPosition, frame); //Auto predict views
this.togglePopup(e, dropElement, placeHoldeEl, true);
/*this.stopCloseEvent(e);
let groupPopups = popups[this.popupGroup];
groupPopups.forEach(popup => {
if (popup != this) {
popup.state.isPopupOpen &&
popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
this.setState({ isPopupOpen: true , isPopupReady : false , position: 'bottom' },()=>{
if( !dropElement || !placeHoldeEl ){ return; };
requestAnimationFrame(()=>{
var frame = this.props.frameId ? document.getElementById(this.props.frameId) : document.getElementById("container");
let defaultPosition = this.props.defaultPosition || "bottomCenter";
let betterPosition = viewPort.betterView( dropElement , placeHoldeEl , defaultPosition , frame);
//Auto predict views
if( betterPosition.view ) {
this.setState({ isPopupReady : true , position: betterPosition.view });
}else{
this.setState({ isPopupReady : true , position: defaultPosition });
}
})
});*/
}
}, {
key: 'closePopupOnly',
value: function closePopupOnly(e) {
this.stopCloseEvent(e);
resetPopupState(this);
}
}, {
key: 'documentClickHandler',
value: function documentClickHandler(e) {
try {
resetAllPopupState();
} catch (e) {
console.error('error', e);
}
}
}, {
key: 'documentKeyupHandler',
value: function documentKeyupHandler(e) {
try {
if (e.keyCode == 27) {
resetAllPopupState();
}
} catch (e) {
console.log('error', e);
}
}
}, {
key: 'stopCloseEvent',
value: function stopCloseEvent(e) {
e.stopPropagation && e.stopPropagation();
e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
if (this.childGroup) {
closeGroupPopups(this.childGroup);
}
}
}, {
key: 'render',
value: function render() {
var _state = this.state,
position = _state.position,
isPopupOpen = _state.isPopupOpen,
isPopupReady = _state.isPopupReady;
if (betterPosition.view) {
_this3.setState({
isPopupReady: true,
position: betterPosition.view,
fixedPosition: betterPosition.fixedPosition
});
} else {
_this3.setState({
isPopupReady: true,
position: 'bottom'
});
}
});
});
}
}, {
key: "openPopupOnly",
value: function openPopupOnly(e, dropElement, placeHoldeEl) {
this.togglePopup(e, dropElement, placeHoldeEl, true);
/*this.stopCloseEvent(e);
let groupPopups = popups[this.popupGroup];
groupPopups.forEach(popup => {
if (popup != this) {
popup.state.isPopupOpen &&
popup.setState({
isPopupOpen: false,
position: 'bottom'
});
}
});
this.setState({ isPopupOpen: true , isPopupReady : false , position: 'bottom' },()=>{
if( !dropElement || !placeHoldeEl ){ return; };
requestAnimationFrame(()=>{
var frame = this.props.frameId ? document.getElementById(this.props.frameId) : document.getElementById("container");
let defaultPosition = this.props.defaultPosition || "bottomCenter";
let betterPosition = viewPort.betterView( dropElement , placeHoldeEl , defaultPosition , frame);
//Auto predict views
if( betterPosition.view ) {
this.setState({ isPopupReady : true , position: betterPosition.view });
}else{
this.setState({ isPopupReady : true , position: defaultPosition });
}
})
});*/
}
}, {
key: "closePopupOnly",
value: function closePopupOnly(e) {
this.stopCloseEvent(e);
resetPopupState(this);
}
}, {
key: "documentClickHandler",
value: function documentClickHandler(e) {
try {
resetAllPopupState();
} catch (e) {
console.error('error', e);
}
}
}, {
key: "documentKeyupHandler",
value: function documentKeyupHandler(e) {
try {
if (e.keyCode == 27) {
resetAllPopupState();
}
} catch (e) {
console.log('error', e);
}
}
}, {
key: "stopCloseEvent",
value: function stopCloseEvent(e) {
e.stopPropagation && e.stopPropagation();
e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
var positionStyle = position ? popupStyles[position] || '' : '';
if (this.childGroup) {
closeGroupPopups(this.childGroup);
}
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
position = _this$state.position,
isPopupOpen = _this$state.isPopupOpen,
isPopupReady = _this$state.isPopupReady;
var positionStyle = position ? popupStyles[position] || '' : '';
var arrowStyle = "".concat(popupStyles.arrow, " ").concat(positionStyle);
var popupOpenStyle = isPopupOpen ? "".concat(popupStyles.isOpen, " ").concat(positionStyle) : "".concat(popupStyles.isHide);
var popupReadyStyle = isPopupReady ? "".concat(popupStyles.isReady) : '';
var contentStyle = "".concat(popupStyles.content, " ").concat(popupOpenStyle, " ").concat(popupReadyStyle);
return /*#__PURE__*/_react["default"].createElement(Component, _extends({
ref: this.setRef
}, this.props, this.state, {
openPopupOnly: this.openPopupOnly,
closePopupOnly: this.closePopupOnly,
togglePopup: this.togglePopup,
isPopupOpen: this.state.isPopupOpen,
removeClose: this.stopCloseEvent,
popupStyle: {
arrow: arrowStyle,
content: contentStyle
},
popupStyles: popupStyles
}));
}
}]);
var arrowStyle = popupStyles.arrow + ' ' + positionStyle;
var popupOpenStyle = isPopupOpen ? popupStyles.isOpen + ' ' + positionStyle : '' + popupStyles.isHide;
var popupReadyStyle = isPopupReady ? '' + popupStyles.isReady : '';
var contentStyle = popupStyles.content + ' ' + popupOpenStyle + ' ' + popupReadyStyle;
return Popup;
}(_react["default"].Component);
return _react2.default.createElement(Component, _extends({
ref: this.setRef
}, this.props, this.state, {
openPopupOnly: this.openPopupOnly,
closePopupOnly: this.closePopupOnly,
togglePopup: this.togglePopup,
isPopupOpen: this.state.isPopupOpen,
removeClose: this.stopCloseEvent,
popupStyle: {
arrow: arrowStyle,
content: contentStyle
},
popupStyles: popupStyles
}));
}
}]);
return Popup;
}(_react2.default.Component);
return (0, _hoistNonReactStatics2.default)(Popup, Component);
return (0, _hoistNonReactStatics["default"])(Popup, Component);
};
exports.default = Popup;
exports.closeGroupPopups = closeGroupPopups;
var _default = Popup;
exports["default"] = _default;

577

lib/ViewPort.js

@@ -1,329 +0,342 @@

'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
exports["default"] = void 0;
var viewPort = {
frameRelativeRects: function frameRelativeRects(el, customFrame) {
if (!el) {
return;
}
frameRelativeRects: function frameRelativeRects(el, customFrame) {
if (!el) {
return;
}
var rect = el.getBoundingClientRect(); //Target Element
var documentEle = document.documentElement; //Body&HTML
var rect = el.getBoundingClientRect(); //Target Element
var customFrameRect = {
top: 0,
left: 0,
right: documentEle.clientWidth,
bottom: documentEle.clientHeight,
height: documentEle.clientHeight,
width: documentEle.clientWidth,
x: 0,
y: 0
};
if (customFrame) {
customFrameRect = customFrame.getBoundingClientRect();
}
var documentEle = document.documentElement; //Body&HTML
var newReact = {
top: rect.top - customFrameRect.top,
left: rect.left - customFrameRect.left,
height: rect.height,
width: rect.width
};
var customFrameRect = {
top: 0,
left: 0,
right: documentEle.clientWidth,
bottom: documentEle.clientHeight,
height: documentEle.clientHeight,
width: documentEle.clientWidth,
x: 0,
y: 0
};
newReact.bottom = newReact.top + newReact.height;
newReact.right = newReact.left + newReact.width;
if (customFrame) {
customFrameRect = customFrame.getBoundingClientRect();
}
newReact.x = newReact.left;
newReact.y = newReact.top;
var newReact = {
top: rect.top - customFrameRect.top,
left: rect.left - customFrameRect.left,
height: rect.height,
width: rect.width
};
newReact.bottom = newReact.top + newReact.height;
newReact.right = newReact.left + newReact.width;
newReact.x = newReact.left;
newReact.y = newReact.top;
var rectGap = {
top: newReact.top,
left: newReact.left,
bottom: customFrameRect.height - newReact.bottom,
right: customFrameRect.width - newReact.right
};
rectGap.center = {
top: rectGap.top + newReact.height / 2,
left: rectGap.left + newReact.width / 2,
bottom: rectGap.bottom + newReact.height / 2,
right: rectGap.right + newReact.width / 2
};
var adjustments = {};
var rectGap = {
top: newReact.top,
left: newReact.left,
bottom: customFrameRect.height - newReact.bottom,
right: customFrameRect.width - newReact.right
};
if (newReact.top < 0) {
adjustments.top = Math.abs(newReact.top);
}
rectGap.center = {
top: rectGap.top + newReact.height / 2,
left: rectGap.left + newReact.width / 2,
bottom: rectGap.bottom + newReact.height / 2,
right: rectGap.right + newReact.width / 2
};
if (newReact.left < 0) {
adjustments.left = Math.abs(newReact.left);
}
var adjustments = {};
if (newReact.top < 0) {
adjustments.top = Math.abs(newReact.top);
}
if (newReact.left < 0) {
adjustments.left = Math.abs(newReact.left);
}
if (newReact.bottom > customFrameRect.height) {
adjustments.bottom = newReact.bottom - customFrameRect.height;
}
if (newReact.right > customFrameRect.width) {
adjustments.right = newReact.right - customFrameRect.width;
}
if (newReact.bottom > customFrameRect.height) {
adjustments.bottom = newReact.bottom - customFrameRect.height;
}
return { frameRect: customFrameRect, rect: newReact, rectGap: rectGap, adjustments: adjustments };
},
isInViewPort: function isInViewPort(el, customFrame) {
if (!el) {
return;
}
if (newReact.right > customFrameRect.width) {
adjustments.right = newReact.right - customFrameRect.width;
}
var elRects = viewPort.frameRelativeRects(el, customFrame);
var react = elRects.rect;
var frameReact = elRects.frameRect;
return {
frameRect: customFrameRect,
rect: newReact,
rectGap: rectGap,
adjustments: adjustments
};
},
isInViewPort: function isInViewPort(el, customFrame) {
if (!el) {
return;
}
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameReact.height && rect.right <= frameReact.width;
},
possibilities: function possibilities(el, relativeBox, customFrame) {
if (!el) {
return;
}
var elRects = viewPort.frameRelativeRects(el, customFrame);
var react = elRects.rect;
var frameReact = elRects.frameRect;
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameReact.height && rect.right <= frameReact.width;
},
possibilities: function possibilities(el, relativeBox, customFrame) {
if (!el) {
return;
}
var elRects = viewPort.frameRelativeRects(el, customFrame);
var rect = elRects.rect;
var adjustments = elRects.adjustments;
var elRects = viewPort.frameRelativeRects(el, customFrame);
var rect = elRects.rect;
var adjustments = elRects.adjustments;
var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
var relativeBoxRect = relativeBoxReacts.rect;
var relativeBoxGap = relativeBoxReacts.rectGap;
var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
var documentGap = relativeBoxDocumentRects.rectGap;
adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.top ? adjustments.top = adjustments.top + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.bottom ? adjustments.bottom = adjustments.bottom + relativeBoxReacts.rect.width * 2 / 3 : null;
var views = {}; //bottomCenter
var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
var relativeBoxRect = relativeBoxReacts.rect;
var relativeBoxGap = relativeBoxReacts.rectGap;
var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
var documentGap = relativeBoxDocumentRects.rectGap;
var bottomOverFlow = rect.height >= relativeBoxGap.bottom;
var bottomRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
var bottomLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left; //bottomRight
adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.top ? adjustments.top = adjustments.top + relativeBoxReacts.rect.width * 2 / 3 : null;
adjustments.bottom ? adjustments.bottom = adjustments.bottom + relativeBoxReacts.rect.width * 2 / 3 : null;
var bottomLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.bottomRight = !(bottomOverFlow || bottomLeftOnlyOverFlow); //bottomLeft
var views = {};
var bottomRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.bottomLeft = !(bottomOverFlow || bottomRightOnlyOverFlow);
views.bottomCenter = !(bottomOverFlow || bottomRightOverFlow || bottomLeftOverFlow); //topCenter
//bottomCenter
var bottomOverFlow = rect.height >= relativeBoxGap.bottom;
var bottomRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
var bottomLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left;
var topOverFlow = rect.height >= relativeBoxGap.top;
var topRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
var topLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left; //topRight
//bottomRight
var bottomLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.bottomRight = !(bottomOverFlow || bottomLeftOnlyOverFlow);
var topLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.topRight = !(topOverFlow || topLeftOnlyOverFlow); //topLeft
//bottomLeft
var bottomRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.bottomLeft = !(bottomOverFlow || bottomRightOnlyOverFlow);
var topRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.topLeft = !(topOverFlow || topRightOnlyOverFlow);
views.topCenter = !(topOverFlow || topRightOverFlow || topLeftOverFlow); //|| topLeftOnlyOverFlow || topRightOnlyOverFlow);
//leftCenter
views.bottomCenter = !(bottomOverFlow || bottomRightOverFlow || bottomLeftOverFlow);
//topCenter
var topOverFlow = rect.height >= relativeBoxGap.top;
var topRightOverFlow = rect.width / 2 >= relativeBoxGap.center.right;
var topLeftOverFlow = rect.width / 2 >= relativeBoxGap.center.left;
var leftOverFlow = rect.width >= relativeBoxGap.left;
var leftTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
var leftBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom; //leftTop
//topRight
var topLeftOnlyOverFlow = rect.width >= relativeBoxGap.center.left;
views.topRight = !(topOverFlow || topLeftOnlyOverFlow);
var leftTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.leftTop = !(leftOverFlow || leftTopOnlyOverFlow); //leftBottom
//topLeft
var topRightOnlyOverFlow = rect.width >= relativeBoxGap.center.right;
views.topLeft = !(topOverFlow || topRightOnlyOverFlow);
var leftBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.leftBottom = !(leftOverFlow || leftBottomOnlyOverFlow);
views.leftCenter = !(leftOverFlow || leftTopOverFlow || leftBottomOverFlow); // || leftTopOnlyOverFlow || leftBottomOnlyOverFlow);
//rightCenter
views.topCenter = !(topOverFlow || topRightOverFlow || topLeftOverFlow); //|| topLeftOnlyOverFlow || topRightOnlyOverFlow);
var rightOverFlow = rect.width >= relativeBoxGap.right;
var rightTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
var rightBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom; //rightTop
//leftCenter
var leftOverFlow = rect.width >= relativeBoxGap.left;
var rightTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.rightTop = !(rightOverFlow || rightTopOnlyOverFlow); //rightBottom
var leftTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
var leftBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom;
var rightBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.rightBottom = !(rightOverFlow || rightBottomOnlyOverFlow);
views.rightCenter = !(rightOverFlow || rightTopOverFlow || rightBottomOverFlow); // || rightTopOnlyOverFlow || rightBottomOnlyOverFlow);
//leftTop
var leftTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.leftTop = !(leftOverFlow || leftTopOnlyOverFlow);
var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
var horizontalLeft = relativeBoxGap.left;
var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
var verticalTop = relativeBoxGap.top;
var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
var horizontalTop = documentGap.bottom + relativeBoxRect.height;
var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
var needArrow = false; // let isAbsolute = false;
//leftBottom
var leftBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.leftBottom = !(leftOverFlow || leftBottomOnlyOverFlow);
var paddingSpace = 5; // space between target and relative element
views.leftCenter = !(leftOverFlow || leftTopOverFlow || leftBottomOverFlow); // || leftTopOnlyOverFlow || leftBottomOnlyOverFlow);
var arrowSize = needArrow ? 10 : 5;
rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
debugger;
var viewsOffset = {
// Code Copy frm DOT ViewPort.js qa
bottomCenter: {
left: horizontalCenter - rect.width / 2,
top: verticalBottom + arrowSize
},
bottomRight: {
left: horizontalRight - rect.width,
top: verticalBottom + arrowSize
},
bottomLeft: {
left: horizontalLeft,
top: verticalBottom + arrowSize
},
topCenter: {
left: horizontalCenter - rect.width / 2,
bottom: horizontalTop + arrowSize
},
topRight: {
left: horizontalRight - rect.width,
bottom: horizontalTop + arrowSize
},
topLeft: {
left: horizontalLeft,
bottom: horizontalTop + arrowSize
},
rightCenter: {
left: horizontalRight + arrowSize,
top: verticalCenter - rect.height / 2
},
rightBottom: {
left: horizontalRight + arrowSize,
bottom: documentGap.bottom
},
rightTop: {
left: horizontalRight + arrowSize,
top: verticalTop
},
leftCenter: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalCenter - rect.height / 2
},
leftTop: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalTop
},
leftBottom: {
left: horizontalLeft - (rect.width + arrowSize),
bottom: documentGap.bottom
}
};
return {
views: views,
adjustments: adjustments,
positionOffset: viewsOffset
};
},
getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
if (!el) {
return;
}
//rightCenter
var rightOverFlow = rect.width >= relativeBoxGap.right;
var elRects = viewPort.frameRelativeRects(el, customFrame);
var rect = elRects.rect;
var rectGap = elRects.rectGap;
var adjustments = elRects.adjustments;
var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
var relativeBoxReact = relativeBoxReacts.rect;
var relativeBoxGap = relativeBoxReacts.rectGap;
return {
left: relativeBoxGap.center.left - rectGap.left,
right: relativeBoxGap.center.right - rectGap.right,
top: relativeBoxGap.center.top - rectGap.top,
bottom: relativeBoxGap.center.bottom - rectGap.bottom
};
},
betterView: function betterView(popup, relativeBox, defaultView, customFrame) {
var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);
var rightTopOverFlow = rect.height / 2 >= relativeBoxGap.center.top;
var rightBottomOverFlow = rect.height / 2 >= relativeBoxGap.center.bottom;
if (!viewPortPossibilities) {
return;
}
//rightTop
var rightTopOnlyOverFlow = rect.height >= relativeBoxGap.center.bottom;
views.rightTop = !(rightOverFlow || rightTopOnlyOverFlow);
var views = viewPortPossibilities.views;
var adjustments = viewPortPossibilities.adjustments;
var viewKeys = Object.keys(views);
var isViewFound = false;
var positionOffset = viewPortPossibilities.positionOffset;
//rightBottom
var rightBottomOnlyOverFlow = rect.height >= relativeBoxGap.center.top;
views.rightBottom = !(rightOverFlow || rightBottomOnlyOverFlow);
for (var i = 0; i < viewKeys.length; i++) {
var viewKey = viewKeys[i];
views.rightCenter = !(rightOverFlow || rightTopOverFlow || rightBottomOverFlow); // || rightTopOnlyOverFlow || rightBottomOnlyOverFlow);
if (views[viewKey]) {
isViewFound = true;
break;
}
}
if (!isViewFound) {
return {
view: null,
adjustments: adjustments,
fixedPosition: {}
};
}
var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
var horizontalLeft = relativeBoxGap.left;
var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
var verticalTop = relativeBoxGap.top;
var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
var horizontalTop = documentGap.bottom + relativeBoxRect.height;
var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
if (views[defaultView]) {
return {
view: defaultView,
adjustments: adjustments,
fixedPosition: positionOffset[defaultView]
};
}
var needArrow = false;
// let isAbsolute = false;
var paddingSpace = 5; // space between target and relative element
var arrowSize = needArrow ? 10 : 5;
rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
var defaultPosition = defaultView.replace(/Center|Bottom|Top|Left|Right$/, '');
var viewTypes = {
top: ['Center', 'Right', 'Left'],
left: ['Center', 'Top', 'Bottom']
};
viewTypes.bottom = viewTypes.top;
viewTypes.right = viewTypes.left;
var defaultPositions = viewTypes[defaultPosition];
debugger;
for (var _i = 0, len = defaultPositions.length; _i < len; _i++) {
var _viewKey = defaultPosition + defaultPositions[_i];
var viewsOffset = { // Code Copy frm DOT ViewPort.js qa
bottomCenter: {
left: horizontalCenter - rect.width / 2,
top: verticalBottom + arrowSize
},
bottomRight: {
left: horizontalRight - rect.width,
top: verticalBottom + arrowSize
},
bottomLeft: {
left: horizontalLeft,
top: verticalBottom + arrowSize
},
topCenter: {
left: horizontalCenter - rect.width / 2,
bottom: horizontalTop + arrowSize
},
topRight: {
left: horizontalRight - rect.width,
bottom: horizontalTop + arrowSize
},
topLeft: {
left: horizontalLeft,
bottom: horizontalTop + arrowSize
},
rightCenter: {
left: horizontalRight + arrowSize,
top: verticalCenter - rect.height / 2
},
rightBottom: {
left: horizontalRight + arrowSize,
bottom: documentGap.bottom
},
rightTop: {
left: horizontalRight + arrowSize,
top: verticalTop
},
leftCenter: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalCenter - rect.height / 2
},
leftTop: {
left: horizontalLeft - (rect.width + arrowSize),
top: verticalTop
},
leftBottom: {
left: horizontalLeft - (rect.width + arrowSize),
bottom: documentGap.bottom
}
};
if (views[_viewKey]) {
return {
view: _viewKey,
adjustments: adjustments,
fixedPosition: positionOffset[_viewKey]
};
}
}
return { views: views, adjustments: adjustments, positionOffset: viewsOffset };
},
var oppositePositionsOrder = {
bottom: ['top', 'right', 'left'],
top: ['bottom', 'right', 'left'],
left: ['bottom', 'right', 'top'],
right: ['bottom', 'top', 'left']
};
var oppositeViews = oppositePositionsOrder[defaultPosition];
getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
if (!el) {
return;
}
for (var _i2 = 0, _len = oppositeViews.length; _i2 < _len; _i2++) {
var oppositeView = oppositeViews[_i2];
var positions = viewTypes[oppositeView];
var elRects = viewPort.frameRelativeRects(el, customFrame);
var rect = elRects.rect;
var rectGap = elRects.rectGap;
var adjustments = elRects.adjustments;
for (var j = 0, lenx = positions.length; j < lenx; j++) {
var _viewKey2 = oppositeView + positions[j];
var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
var relativeBoxReact = relativeBoxReacts.rect;
var relativeBoxGap = relativeBoxReacts.rectGap;
if (views[_viewKey2]) {
return {
view: _viewKey2,
adjustments: adjustments,
fixedPosition: positionOffset[_viewKey2]
};
}
}
}
return {
left: relativeBoxGap.center.left - rectGap.left,
right: relativeBoxGap.center.right - rectGap.right,
top: relativeBoxGap.center.top - rectGap.top,
bottom: relativeBoxGap.center.bottom - rectGap.bottom
};
},
betterView: function betterView(popup, relativeBox, defaultView, customFrame) {
var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);
if (!viewPortPossibilities) {
return;
}
var views = viewPortPossibilities.views;
var adjustments = viewPortPossibilities.adjustments;
var viewKeys = Object.keys(views);
var isViewFound = false;
var positionOffset = viewPortPossibilities.positionOffset;
for (var i = 0; i < viewKeys.length; i++) {
var viewKey = viewKeys[i];
if (views[viewKey]) {
isViewFound = true;
break;
}
}
if (!isViewFound) {
return { view: null, adjustments: adjustments, fixedPosition: {} };
}
if (views[defaultView]) {
return { view: defaultView, adjustments: adjustments, fixedPosition: positionOffset[defaultView] };
}
var defaultPosition = defaultView.replace(/Center|Bottom|Top|Left|Right$/, '');
var viewTypes = { top: ['Center', 'Right', 'Left'], left: ['Center', 'Top', 'Bottom'] };
viewTypes.bottom = viewTypes.top;
viewTypes.right = viewTypes.left;
var defaultPositions = viewTypes[defaultPosition];
for (var _i = 0, len = defaultPositions.length; _i < len; _i++) {
var _viewKey = defaultPosition + defaultPositions[_i];
if (views[_viewKey]) {
return { view: _viewKey, adjustments: adjustments, fixedPosition: positionOffset[_viewKey] };
}
}
var oppositePositionsOrder = {
bottom: ['top', 'right', 'left'],
top: ['bottom', 'right', 'left'],
left: ['bottom', 'right', 'top'],
right: ['bottom', 'top', 'left']
};
var oppositeViews = oppositePositionsOrder[defaultPosition];
for (var _i2 = 0, _len = oppositeViews.length; _i2 < _len; _i2++) {
var oppositeView = oppositeViews[_i2];
var positions = viewTypes[oppositeView];
for (var j = 0, lenx = positions.length; j < lenx; j++) {
var _viewKey2 = oppositeView + positions[j];
if (views[_viewKey2]) {
return { view: _viewKey2, adjustments: adjustments, fixedPosition: positionOffset[_viewKey2] };
}
}
}
return { view: null, adjustments: adjustments, fixedPosition: {} };
}
return {
view: null,
adjustments: adjustments,
fixedPosition: {}
};
}
};
exports.default = {
betterView: viewPort.betterView,
frameRelativeRects: viewPort.frameRelativeRects,
getArrowAdjustments: viewPort.getArrowAdjustments
};
var _default = {
betterView: viewPort.betterView,
frameRelativeRects: viewPort.frameRelativeRects,
getArrowAdjustments: viewPort.getArrowAdjustments
};
exports["default"] = _default;

10

package.json
{
"name": "@zohodesk/popups",
"version": "1.0.9",
"version": "1.0.10",
"description": "popups popupover modal dialog alert notifications popup handling for whole app",

@@ -23,2 +23,5 @@ "main": "lib/index.js",

},
"devDependencies": {
"@zohodesk/react-cli": "1.1.9"
},
"keywords": [

@@ -38,6 +41,3 @@ "popups",

},
"homepage": "https://github.com/machi-projects/popups#readme",
"devDependencies": {
"@zohodesk/react-cli": "0.0.1-beta.41"
}
"homepage": "https://github.com/machi-projects/popups#readme"
}
build/js/main.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc