@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
84 lines • 4.35 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { FloatingFocusManager, autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
import { format } from "date-fns";
import React, { forwardRef, useRef, useState } from "react";
import { useRenameCSS, useThemeInternal } from "../theme/Theme.js";
import { useMergeRefs } from "../util/hooks/useMergeRefs.js";
import { useI18n } from "../util/i18n/i18n.hooks.js";
import { useTimelineContext } from "./hooks/useTimelineContext.js";
import { position } from "./utils/calc.js";
export const Pin = forwardRef((_a, ref) => {
var { date, children } = _a, rest = __rest(_a, ["date", "children"]);
const { cn } = useRenameCSS();
const { startDate, endDate, direction } = useTimelineContext();
const [open, setOpen] = useState(false);
const arrowRef = useRef(null);
const translate = useI18n("Timeline");
const themeContext = useThemeInternal(false);
const showArrow = !themeContext;
const { context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, refs, floatingStyles, } = useFloating({
placement: "top",
open,
onOpenChange: (_open) => setOpen(_open),
whileElementsMounted: autoUpdate,
middleware: [
offset(showArrow ? 16 : 8),
shift(),
flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
flArrow({ element: arrowRef, padding: 5 }),
],
});
const hover = useHover(context, {
handleClose: safePolygon(),
restMs: 25,
delay: { open: 1000 },
move: false,
});
const focus = useFocus(context);
const dismiss = useDismiss(context);
const { getFloatingProps, getReferenceProps } = useInteractions([
hover,
focus,
dismiss,
]);
const mergedRef = useMergeRefs(refs.setReference, ref);
const staticSide = {
top: "bottom",
right: "left",
bottom: "top",
left: "right",
}[placement.split("-")[0]];
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: cn("navds-timeline__pin-wrapper"), style: { [direction]: `${position(date, startDate, endDate)}%` } },
React.createElement("button", Object.assign({}, rest, { ref: mergedRef, className: cn("navds-timeline__pin-button"), "aria-label": translate("Pin.pin", {
date: format(date, translate("dateFormat")),
}), type: "button", "aria-expanded": children ? open : undefined }, getReferenceProps({
onKeyDown: (e) => {
var _a;
(_a = rest === null || rest === void 0 ? void 0 : rest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
if (e.key === "Enter") {
setOpen((prev) => !prev);
}
else if (e.key === " ") {
setOpen(false);
}
},
})))),
children && open && (React.createElement(FloatingFocusManager, { context: context, modal: false, initialFocus: -1, returnFocus: false },
React.createElement("div", Object.assign({ className: cn("navds-timeline__popover"), "data-placement": placement, ref: refs.setFloating, role: "dialog" }, getFloatingProps(), { style: floatingStyles }),
children,
showArrow && (React.createElement("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: cn("navds-timeline__popover-arrow") })))))));
});
Pin.componentType = "pin";
export default Pin;
//# sourceMappingURL=Pin.js.map