@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
72 lines • 3.61 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, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
import { format } from "date-fns";
import React, { forwardRef, useState } from "react";
import { useRenameCSS } 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 PinInternal = 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 translate = useI18n("Timeline");
const { context, placement, refs, floatingStyles, } = useFloating({
placement: "top",
open,
onOpenChange: (_open) => setOpen(_open),
whileElementsMounted: autoUpdate,
middleware: [
offset(8),
shift(),
flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
],
});
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 label = translate("Pin.pin", {
date: format(date, translate("dateFormat")),
});
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": label, 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", "aria-label": label }, getFloatingProps(), { style: floatingStyles }), children)))));
});
export default PinInternal;
//# sourceMappingURL=PinInternal.js.map