@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
83 lines • 4.57 kB
JavaScript
import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
import React, { 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 { usePeriodContext } from "../hooks/usePeriodContext.js";
import { useRowContext } from "../hooks/useRowContext.js";
import { useTimelineContext } from "../hooks/useTimelineContext.js";
import { ariaLabel, getConditionalClasses } from "../utils/period.js";
const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, cropped, direction, left, width, icon, children, isActive, statusLabel, restProps, periodRef, }) => {
var _a, _b;
const { cn } = useRenameCSS();
const [open, setOpen] = useState(false);
const { index } = useRowContext();
const { firstFocus } = usePeriodContext();
const { initiate, addFocusable } = useTimelineContext();
const translate = useI18n("Timeline");
const { context, placement, refs, floatingStyles } = useFloating({
placement: (_a = restProps === null || restProps === void 0 ? void 0 : restProps.placement) !== null && _a !== void 0 ? _a : "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, periodRef);
const label = ariaLabel(start, end, status, statusLabel, translate);
return (React.createElement(React.Fragment, null,
React.createElement("button", Object.assign({}, restProps, { "data-color": (_b = restProps === null || restProps === void 0 ? void 0 : restProps["data-color"]) !== null && _b !== void 0 ? _b : status, type: "button", ref: (r) => {
firstFocus && addFocusable(r, index);
mergedRef(r);
}, "aria-label": label, className: cn("navds-timeline__period--clickable", getConditionalClasses(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.className, {
"navds-timeline__period--selected": isActive,
}), "aria-expanded": children ? open : undefined, "aria-current": isActive || undefined }, getReferenceProps({
onFocus: () => {
initiate(index);
},
onKeyDown: (e) => {
var _a;
(_a = restProps === null || restProps === void 0 ? void 0 : restProps.onKeydown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
if (e.key === "Enter") {
setOpen((prev) => !prev);
}
if (e.key === " ") {
onSelectPeriod === null || onSelectPeriod === void 0 ? void 0 : onSelectPeriod(e);
setOpen(false);
}
},
style: {
width: `${width}%`,
[direction]: `${left}%`,
},
onClick: (e) => {
var _a;
(_a = restProps === null || restProps === void 0 ? void 0 : restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
if (e.detail === 0) {
return;
}
onSelectPeriod === null || onSelectPeriod === void 0 ? void 0 : onSelectPeriod(e);
},
})),
React.createElement("span", { className: cn("navds-timeline__period--inner") }, icon)),
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 ClickablePeriod;
//# sourceMappingURL=ClickablePeriod.js.map