@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
64 lines • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.computePosition = void 0;
const tooltipAlign_1 = require("../types/tooltipAlign");
const computeCoordsFromPlacement_1 = require("./utils/computeCoordsFromPlacement");
const getElementRects_1 = require("./utils/getElementRects");
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a reference element when it is given a certain positioning strategy.
*/
const computePosition = (reference, floating, config) => {
const { placement = tooltipAlign_1.TooltipAlignType.TOP, strategy = 'fixed', middleware = [] } = config;
let rects = (0, getElementRects_1.getElementRects)({ reference, floating, strategy });
let { x, y } = (0, computeCoordsFromPlacement_1.computeCoordsFromPlacement)(rects, placement);
let statefulPlacement = placement;
let middlewareData = {};
let resetCount = 0;
for (let i = 0; i < middleware.length; i++) {
const { name, fn } = middleware[i];
const { x: nextX, y: nextY, data, reset, } = fn({
x,
y,
initialPlacement: placement,
placement: statefulPlacement,
strategy,
middlewareData,
rects,
elements: { reference, floating },
});
x = nextX ?? x;
y = nextY ?? y;
middlewareData = {
...middlewareData,
[name]: {
...middlewareData[name],
...data,
},
};
if (reset && resetCount <= 50) {
resetCount++;
if (typeof reset === 'object') {
if (reset.placement) {
statefulPlacement = reset.placement;
}
if (reset.rects) {
rects =
reset.rects === true ? (0, getElementRects_1.getElementRects)({ reference, floating, strategy }) : reset.rects;
}
({ x, y } = (0, computeCoordsFromPlacement_1.computeCoordsFromPlacement)(rects, statefulPlacement));
}
i = -1;
continue;
}
}
return {
x,
y,
placement: statefulPlacement,
strategy,
middlewareData,
};
};
exports.computePosition = computePosition;
//# sourceMappingURL=computePosition.js.map