@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
105 lines (104 loc) • 3.9 kB
JavaScript
"use client";
import CalendarHeader_module_default from "./CalendarHeader.module.mjs";
import { createElement } from "react";
import { jsx } from "react/jsx-runtime";
import { AccordionChevron, Box, UnstyledButton, createVarsResolver, factory, getFontSize, getSize, useProps, useStyles } from "@mantine/core";
//#region packages/@mantine/dates/src/components/CalendarHeader/CalendarHeader.tsx
const defaultProps = {
hasNextLevel: true,
withNext: true,
withPrevious: true,
headerControlsOrder: [
"previous",
"level",
"next"
]
};
const varsResolver = createVarsResolver((_, { size }) => ({ calendarHeader: {
"--dch-control-size": getSize(size, "dch-control-size"),
"--dch-fz": getFontSize(size)
} }));
const CalendarHeader = factory((_props) => {
const props = useProps("CalendarHeader", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, nextIcon, previousIcon, nextLabel, previousLabel, onNext, onPrevious, onLevelClick, label, nextDisabled, previousDisabled, hasNextLevel, levelControlAriaLabel, withNext, withPrevious, headerControlsOrder, fullWidth, __staticSelector, __preventFocus, __stopPropagation, attributes, ...others } = props;
const getStyles = useStyles({
name: __staticSelector || "CalendarHeader",
classes: CalendarHeader_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver,
rootSelector: "calendarHeader"
});
const preventFocus = __preventFocus ? (event) => event.preventDefault() : void 0;
const previousControl = withPrevious && /* @__PURE__ */ createElement(UnstyledButton, {
...getStyles("calendarHeaderControl"),
key: "previous",
"data-direction": "previous",
"aria-label": previousLabel,
onClick: onPrevious,
unstyled,
onMouseDown: preventFocus,
disabled: previousDisabled,
"data-disabled": previousDisabled || void 0,
tabIndex: __preventFocus || previousDisabled ? -1 : 0,
"data-mantine-stop-propagation": __stopPropagation || void 0
}, previousIcon || /* @__PURE__ */ jsx(AccordionChevron, {
...getStyles("calendarHeaderControlIcon"),
"data-direction": "previous",
size: "45%"
}));
const levelControl = /* @__PURE__ */ createElement(UnstyledButton, {
component: hasNextLevel ? "button" : "div",
...getStyles("calendarHeaderLevel"),
key: "level",
onClick: hasNextLevel ? onLevelClick : void 0,
unstyled,
onMouseDown: hasNextLevel ? preventFocus : void 0,
disabled: !hasNextLevel,
"data-static": !hasNextLevel || void 0,
"aria-label": levelControlAriaLabel,
tabIndex: __preventFocus || !hasNextLevel ? -1 : 0,
"data-mantine-stop-propagation": __stopPropagation || void 0
}, label);
const nextControl = withNext && /* @__PURE__ */ createElement(UnstyledButton, {
...getStyles("calendarHeaderControl"),
key: "next",
"data-direction": "next",
"aria-label": nextLabel,
onClick: onNext,
unstyled,
onMouseDown: preventFocus,
disabled: nextDisabled,
"data-disabled": nextDisabled || void 0,
tabIndex: __preventFocus || nextDisabled ? -1 : 0,
"data-mantine-stop-propagation": __stopPropagation || void 0
}, nextIcon || /* @__PURE__ */ jsx(AccordionChevron, {
...getStyles("calendarHeaderControlIcon"),
"data-direction": "next",
size: "45%"
}));
const controls = headerControlsOrder.map((control) => {
if (control === "previous") return previousControl;
if (control === "level") return levelControl;
if (control === "next") return nextControl;
return null;
});
return /* @__PURE__ */ jsx(Box, {
...getStyles("calendarHeader"),
"data-full-width": fullWidth || void 0,
...others,
children: controls
});
});
CalendarHeader.classes = CalendarHeader_module_default;
CalendarHeader.varsResolver = varsResolver;
CalendarHeader.displayName = "@mantine/dates/CalendarHeader";
//#endregion
export { CalendarHeader };
//# sourceMappingURL=CalendarHeader.mjs.map