@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
49 lines • 2.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSideAndAlignFromPlacement = getSideAndAlignFromPlacement;
exports.transformOrigin = transformOrigin;
/**
* `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
*/
function transformOrigin(options) {
return {
name: "transformOrigin",
options,
fn(data) {
var _a, _b, _c, _d, _e;
const { placement, rects, middlewareData } = data;
const cannotCenterArrow = ((_a = middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.centerOffset) !== 0;
const isArrowHidden = cannotCenterArrow;
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
const arrowXCenter = ((_c = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) + arrowWidth / 2;
const arrowYCenter = ((_e = (_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0) + arrowHeight / 2;
let x = "";
let y = "";
if (placedSide === "bottom") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${-arrowHeight}px`;
}
else if (placedSide === "top") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${rects.floating.height + arrowHeight}px`;
}
else if (placedSide === "right") {
x = `${-arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
else if (placedSide === "left") {
x = `${rects.floating.width + arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
return { data: { x, y } };
},
};
}
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
}
//# sourceMappingURL=Floating.utils.js.map