Browse Source

Pull request #3263: KERNEL-11877 feat: 升级popperjs 解决scale问题

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit 'fc107a8bf4e081db80c2bf8e6f54d2cf7d5a0acb':
  KERNEL-11877 fix: 关掉BI.BubblesController的
  KERNEL-11877 feat: 升级popperjs 解决scale问题
research/test
Dailer-刘荣歆 2 years ago
parent
commit
f28e607ba4
  1. 15
      src/core/controller/controller.bubbles.js
  2. 310
      src/core/controller/popper.js

15
src/core/controller/controller.bubbles.js

@ -45,9 +45,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
BI.createWidget({ BI.createWidget({
type: "bi.default", type: "bi.default",
element: container, element: container,
items: [{ items: [
{
el: bubble el: bubble
}] }
]
}); });
if (this.storePoppers[name]) { if (this.storePoppers[name]) {
this.storePoppers[name].destroy(); this.storePoppers[name].destroy();
@ -65,7 +67,14 @@ BI.BubblesController = BI.inherit(BI.Controller, {
options: { options: {
offset: [adjustXOffset, adjustYOffset] offset: [adjustXOffset, adjustYOffset]
} }
} },
{
name: "preventOverflow",
enabled: false
}, {
name: "flip",
enabled: false
},
] ]
}); });
return this; return this;

310
src/core/controller/popper.js

@ -1,24 +1,11 @@
/** /**
* @popperjs/core v2.9.2 - MIT License * @popperjs/core v2.11.6 - MIT License
*/ */
(function (global, factory) { (function (global, factory) {
factory(BI.Popper = {}); factory(global.Popper = {});
}(this, (function (exports) { 'use strict'; }(BI, (function (exports) {
'use strict';
function getBoundingClientRect(element) {
var rect = element.getBoundingClientRect();
return {
width: rect.width,
height: rect.height,
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
x: rect.left,
y: rect.top
};
}
function getWindow(node) { function getWindow(node) {
if (node == null) { if (node == null) {
@ -33,16 +20,6 @@
return node; return node;
} }
function getWindowScroll(node) {
var win = getWindow(node);
var scrollLeft = win.pageXOffset;
var scrollTop = win.pageYOffset;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
};
}
function isElement(node) { function isElement(node) {
var OwnElement = getWindow(node).Element; var OwnElement = getWindow(node).Element;
return node instanceof OwnElement || node instanceof Element; return node instanceof OwnElement || node instanceof Element;
@ -63,6 +40,74 @@
return node instanceof OwnElement || node instanceof ShadowRoot; return node instanceof OwnElement || node instanceof ShadowRoot;
} }
var max = Math.max;
var min = Math.min;
var round = Math.round;
function getUAString() {
var uaData = navigator.userAgentData;
if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
return uaData.brands.map(function (item) {
return item.brand + "/" + item.version;
}).join(' ');
}
return navigator.userAgent;
}
function isLayoutViewport() {
return !/^((?!chrome|android).)*safari/i.test(getUAString());
}
function getBoundingClientRect(element, includeScale, isFixedStrategy) {
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
var clientRect = element.getBoundingClientRect();
var scaleX = 1;
var scaleY = 1;
if (includeScale && isHTMLElement(element)) {
scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
}
var _ref = isElement(element) ? getWindow(element) : window,
visualViewport = _ref.visualViewport;
var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
var width = clientRect.width / scaleX;
var height = clientRect.height / scaleY;
return {
width: width,
height: height,
top: y,
right: x + width,
bottom: y + height,
left: x,
x: x,
y: y
};
}
function getWindowScroll(node) {
var win = getWindow(node);
var scrollLeft = win.pageXOffset;
var scrollTop = win.pageYOffset;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
};
}
function getHTMLElementScroll(element) { function getHTMLElementScroll(element) {
return { return {
scrollLeft: element.scrollLeft, scrollLeft: element.scrollLeft,
@ -113,16 +158,24 @@
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
} }
function isElementScaled(element) {
var rect = element.getBoundingClientRect();
var scaleX = round(rect.width) / element.offsetWidth || 1;
var scaleY = round(rect.height) / element.offsetHeight || 1;
return scaleX !== 1 || scaleY !== 1;
} // Returns the composite rect of an element relative to its offsetParent.
// Composite means it takes into account transforms as well as layout. // Composite means it takes into account transforms as well as layout.
function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
if (isFixed === void 0) { if (isFixed === void 0) {
isFixed = false; isFixed = false;
} }
var documentElement = getDocumentElement(offsetParent);
var rect = getBoundingClientRect(elementOrVirtualElement);
var isOffsetParentAnElement = isHTMLElement(offsetParent); var isOffsetParentAnElement = isHTMLElement(offsetParent);
var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
var documentElement = getDocumentElement(offsetParent);
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
var scroll = { var scroll = {
scrollLeft: 0, scrollLeft: 0,
scrollTop: 0 scrollTop: 0
@ -139,7 +192,7 @@
} }
if (isHTMLElement(offsetParent)) { if (isHTMLElement(offsetParent)) {
offsets = getBoundingClientRect(offsetParent); offsets = getBoundingClientRect(offsetParent, true);
offsets.x += offsetParent.clientLeft; offsets.x += offsetParent.clientLeft;
offsets.y += offsetParent.clientTop; offsets.y += offsetParent.clientTop;
} else if (documentElement) { } else if (documentElement) {
@ -249,8 +302,8 @@
function getContainingBlock(element) { function getContainingBlock(element) {
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; var isFirefox = /firefox/i.test(getUAString());
var isIE = navigator.userAgent.indexOf('Trident') !== -1; var isIE = /Trident/i.test(getUAString());
if (isIE && isHTMLElement(element)) { if (isIE && isHTMLElement(element)) {
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@ -263,6 +316,10 @@
var currentNode = getParentNode(element); var currentNode = getParentNode(element);
if (isShadowRoot(currentNode)) {
currentNode = currentNode.host;
}
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
// create a containing block. // create a containing block.
@ -399,9 +456,13 @@
var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s'; var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available'; var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options']; var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
function validateModifiers(modifiers) { function validateModifiers(modifiers) {
modifiers.forEach(function (modifier) { modifiers.forEach(function (modifier) {
Object.keys(modifier).forEach(function (key) { [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
.filter(function (value, index, self) {
return self.indexOf(value) === index;
}).forEach(function (key) {
switch (key) { switch (key) {
case 'name': case 'name':
if (typeof modifier.name !== 'string') { if (typeof modifier.name !== 'string') {
@ -415,6 +476,8 @@
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
} }
break;
case 'phase': case 'phase':
if (modifierPhases.indexOf(modifier.phase) < 0) { if (modifierPhases.indexOf(modifier.phase) < 0) {
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
@ -430,14 +493,14 @@
break; break;
case 'effect': case 'effect':
if (typeof modifier.effect !== 'function') { if (modifier.effect != null && typeof modifier.effect !== 'function') {
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
} }
break; break;
case 'requires': case 'requires':
if (!Array.isArray(modifier.requires)) { if (modifier.requires != null && !Array.isArray(modifier.requires)) {
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
} }
@ -502,31 +565,21 @@
}); });
} }
function getViewportRect(element) { function getViewportRect(element, strategy) {
var win = getWindow(element); var win = getWindow(element);
var html = getDocumentElement(element); var html = getDocumentElement(element);
var visualViewport = win.visualViewport; var visualViewport = win.visualViewport;
var width = html.clientWidth; var width = html.clientWidth;
var height = html.clientHeight; var height = html.clientHeight;
var x = 0; var x = 0;
var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper var y = 0;
// can be obscured underneath it.
// Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
// if it isn't open, so if this isn't available, the popper will be detected
// to overflow the bottom of the screen too early.
if (visualViewport) { if (visualViewport) {
width = visualViewport.width; width = visualViewport.width;
height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) height = visualViewport.height;
// In Chrome, it returns a value very close to 0 (+/-) but contains rounding var layoutViewport = isLayoutViewport();
// errors due to floating point numbers, so we need to check precision.
// Safari returns a number <= 0, usually < -1 when pinch-zoomed if (layoutViewport || !layoutViewport && strategy === 'fixed') {
// Feature detection fails in mobile emulation mode in Chrome.
// Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
// 0.001
// Fallback here: "Not Safari" userAgent
if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
x = visualViewport.offsetLeft; x = visualViewport.offsetLeft;
y = visualViewport.offsetTop; y = visualViewport.offsetTop;
} }
@ -540,10 +593,6 @@
}; };
} }
var max = Math.max;
var min = Math.min;
var round = Math.round;
// of the `<html>` and `<body>` rect bounds if horizontally scrollable // of the `<html>` and `<body>` rect bounds if horizontally scrollable
function getDocumentRect(element) { function getDocumentRect(element) {
@ -601,8 +650,8 @@
}); });
} }
function getInnerBoundingClientRect(element) { function getInnerBoundingClientRect(element, strategy) {
var rect = getBoundingClientRect(element); var rect = getBoundingClientRect(element, false, strategy === 'fixed');
rect.top = rect.top + element.clientTop; rect.top = rect.top + element.clientTop;
rect.left = rect.left + element.clientLeft; rect.left = rect.left + element.clientLeft;
rect.bottom = rect.top + element.clientHeight; rect.bottom = rect.top + element.clientHeight;
@ -614,8 +663,8 @@
return rect; return rect;
} }
function getClientRectFromMixedType(element, clippingParent) { function getClientRectFromMixedType(element, clippingParent, strategy) {
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
} // A "clipping parent" is an overflowable container with the characteristic of } // A "clipping parent" is an overflowable container with the characteristic of
// clipping (or hiding) overflowing elements with a position different from // clipping (or hiding) overflowing elements with a position different from
// `initial` // `initial`
@ -638,18 +687,18 @@
// clipping parents // clipping parents
function getClippingRect(element, boundary, rootBoundary) { function getClippingRect(element, boundary, rootBoundary, strategy) {
var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
var clippingParents = [].concat(mainClippingParents, [rootBoundary]); var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
var firstClippingParent = clippingParents[0]; var firstClippingParent = clippingParents[0];
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
var rect = getClientRectFromMixedType(element, clippingParent); var rect = getClientRectFromMixedType(element, clippingParent, strategy);
accRect.top = max(rect.top, accRect.top); accRect.top = max(rect.top, accRect.top);
accRect.right = min(rect.right, accRect.right); accRect.right = min(rect.right, accRect.right);
accRect.bottom = min(rect.bottom, accRect.bottom); accRect.bottom = min(rect.bottom, accRect.bottom);
accRect.left = max(rect.left, accRect.left); accRect.left = max(rect.left, accRect.left);
return accRect; return accRect;
}, getClientRectFromMixedType(element, firstClippingParent)); }, getClientRectFromMixedType(element, firstClippingParent, strategy));
clippingRect.width = clippingRect.right - clippingRect.left; clippingRect.width = clippingRect.right - clippingRect.left;
clippingRect.height = clippingRect.bottom - clippingRect.top; clippingRect.height = clippingRect.bottom - clippingRect.top;
clippingRect.x = clippingRect.left; clippingRect.x = clippingRect.left;
@ -758,6 +807,8 @@
var _options = options, var _options = options,
_options$placement = _options.placement, _options$placement = _options.placement,
placement = _options$placement === void 0 ? state.placement : _options$placement, placement = _options$placement === void 0 ? state.placement : _options$placement,
_options$strategy = _options.strategy,
strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
_options$boundary = _options.boundary, _options$boundary = _options.boundary,
boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
_options$rootBoundary = _options.rootBoundary, _options$rootBoundary = _options.rootBoundary,
@ -770,11 +821,10 @@
padding = _options$padding === void 0 ? 0 : _options$padding; padding = _options$padding === void 0 ? 0 : _options$padding;
var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
var altContext = elementContext === popper ? reference : popper; var altContext = elementContext === popper ? reference : popper;
var referenceElement = state.elements.reference;
var popperRect = state.rects.popper; var popperRect = state.rects.popper;
var element = state.elements[altBoundary ? altContext : elementContext]; var element = state.elements[altBoundary ? altContext : elementContext];
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
var referenceClientRect = getBoundingClientRect(referenceElement); var referenceClientRect = getBoundingClientRect(state.elements.reference);
var popperOffsets = computeOffsets({ var popperOffsets = computeOffsets({
reference: referenceClientRect, reference: referenceClientRect,
element: popperRect, element: popperRect,
@ -854,7 +904,8 @@
var isDestroyed = false; var isDestroyed = false;
var instance = { var instance = {
state: state, state: state,
setOptions: function setOptions(options) { setOptions: function setOptions(setOptionsAction) {
var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
cleanupModifierEffects(); cleanupModifierEffects();
state.options = Object.assign({}, defaultOptions, state.options, options); state.options = Object.assign({}, defaultOptions, state.options, options);
state.scrollParents = { state.scrollParents = {
@ -1029,7 +1080,8 @@
options: options options: options
}); });
var noopFn = function noopFn() {}; var noopFn = function noopFn() {
};
effectCleanupFns.push(cleanupFn || noopFn); effectCleanupFns.push(cleanupFn || noopFn);
} }
@ -1090,7 +1142,8 @@
name: 'eventListeners', name: 'eventListeners',
enabled: true, enabled: true,
phase: 'write', phase: 'write',
fn: function fn() {}, fn: function fn() {
},
effect: effect$2, effect: effect$2,
data: {} data: {}
}; };
@ -1134,8 +1187,8 @@
var win = window; var win = window;
var dpr = win.devicePixelRatio || 1; var dpr = win.devicePixelRatio || 1;
return { return {
x: round(round(x * dpr) / dpr) || 0, x: round(x * dpr) / dpr || 0,
y: round(round(y * dpr) / dpr) || 0 y: round(y * dpr) / dpr || 0
}; };
} }
@ -1145,18 +1198,28 @@
var popper = _ref2.popper, var popper = _ref2.popper,
popperRect = _ref2.popperRect, popperRect = _ref2.popperRect,
placement = _ref2.placement, placement = _ref2.placement,
variation = _ref2.variation,
offsets = _ref2.offsets, offsets = _ref2.offsets,
position = _ref2.position, position = _ref2.position,
gpuAcceleration = _ref2.gpuAcceleration, gpuAcceleration = _ref2.gpuAcceleration,
adaptive = _ref2.adaptive, adaptive = _ref2.adaptive,
roundOffsets = _ref2.roundOffsets; roundOffsets = _ref2.roundOffsets,
isFixed = _ref2.isFixed;
var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets, var _offsets$x = offsets.x,
_ref3$x = _ref3.x, x = _offsets$x === void 0 ? 0 : _offsets$x,
x = _ref3$x === void 0 ? 0 : _ref3$x, _offsets$y = offsets.y,
_ref3$y = _ref3.y, y = _offsets$y === void 0 ? 0 : _offsets$y;
y = _ref3$y === void 0 ? 0 : _ref3$y;
var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
x: x,
y: y
}) : {
x: x,
y: y
};
x = _ref3.x;
y = _ref3.y;
var hasX = offsets.hasOwnProperty('x'); var hasX = offsets.hasOwnProperty('x');
var hasY = offsets.hasOwnProperty('y'); var hasY = offsets.hasOwnProperty('y');
var sideX = left; var sideX = left;
@ -1171,7 +1234,7 @@
if (offsetParent === getWindow(popper)) { if (offsetParent === getWindow(popper)) {
offsetParent = getDocumentElement(popper); offsetParent = getDocumentElement(popper);
if (getComputedStyle(offsetParent).position !== 'static') { if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
heightProp = 'scrollHeight'; heightProp = 'scrollHeight';
widthProp = 'scrollWidth'; widthProp = 'scrollWidth';
} }
@ -1180,17 +1243,19 @@
offsetParent = offsetParent; offsetParent = offsetParent;
if (placement === top) { if (placement === top || (placement === left || placement === right) && variation === end) {
sideY = bottom; // $FlowFixMe[prop-missing] sideY = bottom;
var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
y -= offsetParent[heightProp] - popperRect.height; offsetParent[heightProp];
y -= offsetY - popperRect.height;
y *= gpuAcceleration ? 1 : -1; y *= gpuAcceleration ? 1 : -1;
} }
if (placement === left) { if (placement === left || (placement === top || placement === bottom) && variation === end) {
sideX = right; // $FlowFixMe[prop-missing] sideX = right;
var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
x -= offsetParent[widthProp] - popperRect.width; offsetParent[widthProp];
x -= offsetX - popperRect.width;
x *= gpuAcceleration ? 1 : -1; x *= gpuAcceleration ? 1 : -1;
} }
} }
@ -1199,18 +1264,29 @@
position: position position: position
}, adaptive && unsetSides); }, adaptive && unsetSides);
var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
x: x,
y: y
}) : {
x: x,
y: y
};
x = _ref4.x;
y = _ref4.y;
if (gpuAcceleration) { if (gpuAcceleration) {
var _Object$assign; var _Object$assign;
return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
} }
return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
} }
function computeStyles(_ref4) { function computeStyles(_ref5) {
var state = _ref4.state, var state = _ref5.state,
options = _ref4.options; options = _ref5.options;
var _options$gpuAccelerat = options.gpuAcceleration, var _options$gpuAccelerat = options.gpuAcceleration,
gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
_options$adaptive = options.adaptive, _options$adaptive = options.adaptive,
@ -1230,9 +1306,11 @@
var commonStyles = { var commonStyles = {
placement: getBasePlacement(state.placement), placement: getBasePlacement(state.placement),
variation: getVariation(state.placement),
popper: state.elements.popper, popper: state.elements.popper,
popperRect: state.rects.popper, popperRect: state.rects.popper,
gpuAcceleration: gpuAcceleration gpuAcceleration: gpuAcceleration,
isFixed: state.options.strategy === 'fixed'
}; };
if (state.modifiersData.popperOffsets != null) { if (state.modifiersData.popperOffsets != null) {
@ -1408,6 +1486,7 @@
bottom: 'top', bottom: 'top',
top: 'bottom' top: 'bottom'
}; };
function getOppositePlacement(placement) { function getOppositePlacement(placement) {
return placement.replace(/left|right|bottom|top/g, function (matched) { return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash$1[matched]; return hash$1[matched];
@ -1418,6 +1497,7 @@
start: 'end', start: 'end',
end: 'start' end: 'start'
}; };
function getOppositeVariationPlacement(placement) { function getOppositeVariationPlacement(placement) {
return placement.replace(/start|end/g, function (matched) { return placement.replace(/start|end/g, function (matched) {
return hash[matched]; return hash[matched];
@ -1616,6 +1696,11 @@
return max(min$1, min(value, max$1)); return max(min$1, min(value, max$1));
} }
function withinMaxClamp(min, value, max) {
var v = within(min, value, max);
return v > max ? max : v;
}
function preventOverflow(_ref) { function preventOverflow(_ref) {
var state = _ref.state, var state = _ref.state,
options = _ref.options, options = _ref.options,
@ -1649,6 +1734,14 @@
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
placement: state.placement placement: state.placement
})) : tetherOffset; })) : tetherOffset;
var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
mainAxis: tetherOffsetValue,
altAxis: tetherOffsetValue
} : Object.assign({
mainAxis: 0,
altAxis: 0
}, tetherOffsetValue);
var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
var data = { var data = {
x: 0, x: 0,
y: 0 y: 0
@ -1658,13 +1751,15 @@
return; return;
} }
if (checkMainAxis || checkAltAxis) { if (checkMainAxis) {
var _offsetModifierState$;
var mainSide = mainAxis === 'y' ? top : left; var mainSide = mainAxis === 'y' ? top : left;
var altSide = mainAxis === 'y' ? bottom : right; var altSide = mainAxis === 'y' ? bottom : right;
var len = mainAxis === 'y' ? 'height' : 'width'; var len = mainAxis === 'y' ? 'height' : 'width';
var offset = popperOffsets[mainAxis]; var offset = popperOffsets[mainAxis];
var min$1 = popperOffsets[mainAxis] + overflow[mainSide]; var min$1 = offset + overflow[mainSide];
var max$1 = popperOffsets[mainAxis] - overflow[altSide]; var max$1 = offset - overflow[altSide];
var additive = tether ? -popperRect[len] / 2 : 0; var additive = tether ? -popperRect[len] / 2 : 0;
var minLen = variation === start ? referenceRect[len] : popperRect[len]; var minLen = variation === start ? referenceRect[len] : popperRect[len];
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@ -1684,37 +1779,46 @@
// width or height) // width or height)
var arrowLen = within(0, referenceRect[len], arrowRect[len]); var arrowLen = within(0, referenceRect[len], arrowRect[len]);
var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue; var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue; var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0; var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset; var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue; var tetherMax = offset + maxOffset - offsetModifierValue;
if (checkMainAxis) {
var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
popperOffsets[mainAxis] = preventedOffset; popperOffsets[mainAxis] = preventedOffset;
data[mainAxis] = preventedOffset - offset; data[mainAxis] = preventedOffset - offset;
} }
if (checkAltAxis) { if (checkAltAxis) {
var _offsetModifierState$2;
var _mainSide = mainAxis === 'x' ? top : left; var _mainSide = mainAxis === 'x' ? top : left;
var _altSide = mainAxis === 'x' ? bottom : right; var _altSide = mainAxis === 'x' ? bottom : right;
var _offset = popperOffsets[altAxis]; var _offset = popperOffsets[altAxis];
var _len = altAxis === 'y' ? 'height' : 'width';
var _min = _offset + overflow[_mainSide]; var _min = _offset + overflow[_mainSide];
var _max = _offset - overflow[_altSide]; var _max = _offset - overflow[_altSide];
var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max); var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
popperOffsets[altAxis] = _preventedOffset; popperOffsets[altAxis] = _preventedOffset;
data[altAxis] = _preventedOffset - _offset; data[altAxis] = _preventedOffset - _offset;
} }
}
state.modifiersData[name] = data; state.modifiersData[name] = data;
} // eslint-disable-next-line import/no-unused-modules } // eslint-disable-next-line import/no-unused-modules

Loading…
Cancel
Save