@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
99 lines (98 loc) • 3.01 kB
JavaScript
"use client";
import { isSameTime } from "../TimePicker/utils/is-same-time/is-same-time.mjs";
import { isTimeAfter, isTimeBefore } from "./compare-time.mjs";
import { TimeGridProvider } from "./TimeGrid.context.mjs";
import { TimeGridControl } from "./TimeGridControl.mjs";
import TimeGrid_module_default from "./TimeGrid.module.mjs";
import { jsx } from "react/jsx-runtime";
import { Box, SimpleGrid, createVarsResolver, factory, getFontSize, getRadius, useProps, useStyles } from "@mantine/core";
import { useUncontrolled } from "@mantine/hooks";
//#region packages/@mantine/dates/src/components/TimeGrid/TimeGrid.tsx
const defaultProps = {
simpleGridProps: {
cols: 3,
spacing: "xs"
},
format: "24h",
amPmLabels: {
am: "AM",
pm: "PM"
}
};
const varsResolver = createVarsResolver((_theme, { size, radius }) => ({ root: {
"--time-grid-fz": getFontSize(size),
"--time-grid-radius": getRadius(radius)
} }));
const TimeGrid = factory((_props) => {
const props = useProps("TimeGrid", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, data, value, defaultValue, onChange, format, withSeconds = false, amPmLabels, allowDeselect, simpleGridProps, getControlProps, minTime, maxTime, disableTime, disabled, attributes, ...others } = props;
const getStyles = useStyles({
name: "TimeGrid",
classes: TimeGrid_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const [_value, setValue] = useUncontrolled({
value,
defaultValue,
finalValue: null,
onChange
});
const controls = data.map((time) => {
const isDisabled = disabled || !!minTime && isTimeBefore(time, minTime) || !!maxTime && isTimeAfter(time, maxTime) || (Array.isArray(disableTime) ? !!disableTime.find((t) => isSameTime({
time,
compare: t,
withSeconds
})) : !!disableTime?.(time));
return /* @__PURE__ */ jsx(TimeGridControl, {
active: isSameTime({
time,
compare: _value || "",
withSeconds
}),
time,
onClick: () => {
const nextValue = allowDeselect && (_value === null ? time === _value : isSameTime({
time,
compare: _value,
withSeconds
})) ? null : time;
nextValue !== _value && setValue(nextValue);
},
format,
amPmLabels,
disabled: isDisabled,
"data-disabled": isDisabled || void 0,
withSeconds,
...getControlProps?.(time)
}, time);
});
return /* @__PURE__ */ jsx(TimeGridProvider, {
value: { getStyles },
children: /* @__PURE__ */ jsx(Box, {
...getStyles("root"),
...others,
children: /* @__PURE__ */ jsx(SimpleGrid, {
...simpleGridProps,
...getStyles("simpleGrid", {
className: simpleGridProps?.className,
style: simpleGridProps?.style
}),
children: controls
})
})
});
});
TimeGrid.displayName = "@mantine/dates/TimeGrid";
TimeGrid.classes = TimeGrid_module_default;
TimeGrid.varsResolver = varsResolver;
//#endregion
export { TimeGrid };
//# sourceMappingURL=TimeGrid.mjs.map