@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
92 lines (91 loc) • 3.91 kB
JavaScript
var ARROW_OFFSET = 12;
var PRIORITY_MAPPING = {
top: ['top-center', 'bottom-center', 'right-top', 'right-bottom', 'left-top', 'left-bottom'],
bottom: ['bottom-center', 'top-center', 'right-top', 'right-bottom', 'left-top', 'left-bottom'],
left: ['left-top', 'left-bottom', 'right-top', 'right-bottom', 'bottom-center', 'top-center'],
right: ['right-top', 'right-bottom', 'left-top', 'left-bottom', 'bottom-center', 'top-center']
};
var RECTANGLE_CALCULATIONS = {
'top-center': function (_a) {
var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
return {
top: trigger.top - body.height - arrow.height,
left: trigger.left + trigger.width / 2 - body.width / 2,
width: body.width,
height: body.height
};
},
'bottom-center': function (_a) {
var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
return {
top: trigger.top + trigger.height + arrow.height,
left: trigger.left + trigger.width / 2 - body.width / 2,
width: body.width,
height: body.height
};
},
'right-top': function (_a) {
var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
return {
top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,
left: trigger.left + trigger.width + arrow.height,
width: body.width,
height: body.height
};
},
'right-bottom': function (_a) {
var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
return {
top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,
left: trigger.left + trigger.width + arrow.height,
width: body.width,
height: body.height
};
},
'left-top': function (_a) {
var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
return {
top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,
left: trigger.left - body.width - arrow.height,
width: body.width,
height: body.height
};
},
'left-bottom': function (_a) {
var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
return {
top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,
left: trigger.left - body.width - arrow.height,
width: body.width,
height: body.height
};
}
};
function canRectFit(inner, outer) {
return (inner.left >= outer.left &&
inner.top >= outer.top &&
inner.left + inner.width <= outer.left + outer.width &&
inner.top + inner.height <= outer.top + outer.height);
}
export function calculatePosition(preferred, trigger, arrow, body, container, viewport) {
var bestPositionOutsideViewport = null;
for (var _i = 0, _a = PRIORITY_MAPPING[preferred]; _i < _a.length; _i++) {
var internalPosition = _a[_i];
var boundingOffset = RECTANGLE_CALCULATIONS[internalPosition]({ body: body, trigger: trigger, arrow: arrow });
var fitsInContainer = canRectFit(boundingOffset, container);
var fitsInViewport = canRectFit(boundingOffset, viewport);
if (fitsInContainer && fitsInViewport) {
return { internalPosition: internalPosition, boundingOffset: boundingOffset };
}
else if (fitsInContainer && bestPositionOutsideViewport === null) {
bestPositionOutsideViewport = { internalPosition: internalPosition, boundingOffset: boundingOffset };
}
}
if (bestPositionOutsideViewport !== null) {
return bestPositionOutsideViewport;
}
return {
internalPosition: 'right-top',
boundingOffset: RECTANGLE_CALCULATIONS['right-top']({ body: body, trigger: trigger, arrow: arrow })
};
}