@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
45 lines • 2.31 kB
JavaScript
import React, { useRef } from "react";
import { Button } from "../button/index.js";
import { useDialogContext } from "../dialog/root/DialogRoot.context.js";
import { Modal } from "../modal/index.js";
import { useModalContext } from "../modal/Modal.context.js";
import { Popover } from "../popover/index.js";
import { cl } from "../utils/helpers/index.js";
import { useMedia } from "../utils/hooks/index.js";
import { useI18n } from "../utils/i18n/i18n.hooks.js";
import { getGlobalTranslations } from "./Date.locale.js";
const variantToLabel = {
single: "chooseDate",
multiple: "chooseDates",
range: "chooseDateRange",
month: "chooseMonth",
};
const DateDialog = ({ open, children, onClose, anchor, locale, translate, variant, popoverProps, }) => {
const translateGlobal = useI18n("global", getGlobalTranslations(locale));
const modalRef = useRef(null);
const isInModal = useModalContext(false) !== undefined;
const isInDialog = useDialogContext(false) !== undefined;
const hideModal = useMedia("screen and (min-width: 768px)", true) &&
!isInModal &&
!isInDialog;
if (!open) {
return null;
}
if (hideModal) {
return (React.createElement(Popover, Object.assign({ anchorEl: anchor, open: open, onClose: onClose, placement: "bottom-start", className: cl("aksel-date__popover", {
"aksel-date": variant === "month",
}) }, popoverProps), children));
}
return (React.createElement(Modal, { ref: modalRef, open: open, onClose: (event) => {
event.stopPropagation();
onClose();
}, "aria-label": translate(variantToLabel[variant]), className: cl("aksel-date__modal", {
"aksel-date__nested-modal": isInModal,
"aksel-date": variant === "month",
}), closeOnBackdropClick: true, placement: "top" },
React.createElement("div", { className: "aksel-date__modal-body" },
children,
React.createElement(Button, { variant: "tertiary", onClick: () => { var _a; return (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, size: "small", type: "button" }, translateGlobal("close")))));
};
export { DateDialog };
//# sourceMappingURL=Date.Dialog.js.map