zent
Version:
一套前端设计语言和基于React的实现
70 lines (69 loc) • 2.65 kB
JavaScript
export var getPopoverBottomPosition = function (instance) {
return function (_a) {
var relativeRect = _a.relativeRect, cushion = _a.cushion;
var left = relativeRect.left, top = relativeRect.top, right = relativeRect.right, bottom = relativeRect.bottom;
var position = instance.state.position;
var x = left + position.left;
var y = top + cushion + position.top + position.height;
var inputStyles = getComputedStyle(instance.input);
var leftSpace = parseInt(inputStyles.paddingLeft, 10) +
parseInt(inputStyles.borderLeftWidth, 10);
var rightSpace = parseInt(inputStyles.paddingRight, 10) +
parseInt(inputStyles.borderRightWidth, 10);
if (x > right - rightSpace) {
x = right - rightSpace;
}
if (x < left + leftSpace) {
x = left + leftSpace;
}
if (y < top) {
y = top;
}
if (y > bottom) {
y = bottom;
}
return {
style: {
position: 'absolute',
left: Math.round(x) + "px",
top: Math.round(y) + "px",
},
className: 'position-mention-bottom-left',
};
};
};
export var getPopoverTopPosition = function (instance) {
return function (_a) {
var relativeRect = _a.relativeRect, contentRect = _a.contentRect, cushion = _a.cushion;
var left = relativeRect.left, top = relativeRect.top, right = relativeRect.right, bottom = relativeRect.bottom;
var contentHeight = contentRect.height;
var position = instance.state.position;
var x = left + position.left;
var y = top - contentHeight - cushion + position.top;
var inputStyles = getComputedStyle(instance.input);
var leftSpace = parseInt(inputStyles.paddingLeft, 10) +
parseInt(inputStyles.borderLeftWidth, 10);
var rightSpace = parseInt(inputStyles.paddingRight, 10) +
parseInt(inputStyles.borderRightWidth, 10);
if (x > right - rightSpace) {
x = right - rightSpace;
}
if (x < left + leftSpace) {
x = left + leftSpace;
}
if (y + contentHeight < top) {
y = top - contentHeight;
}
if (y + contentHeight > bottom) {
y = bottom - contentHeight;
}
return {
style: {
position: 'absolute',
left: Math.round(x) + "px",
top: Math.round(y) + "px",
},
className: 'position-mention-top-left',
};
};
};