@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
99 lines (98 loc) • 3.4 kB
JavaScript
"use client";
const require_is_same_time = require("../TimePicker/utils/is-same-time/is-same-time.cjs");
const require_compare_time = require("./compare-time.cjs");
const require_TimeGrid_context = require("./TimeGrid.context.cjs");
const require_TimeGridControl = require("./TimeGridControl.cjs");
const require_TimeGrid_module = require("./TimeGrid.module.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@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 = (0, _mantine_core.createVarsResolver)((_theme, { size, radius }) => ({ root: {
"--time-grid-fz": (0, _mantine_core.getFontSize)(size),
"--time-grid-radius": (0, _mantine_core.getRadius)(radius)
} }));
const TimeGrid = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_core.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 = (0, _mantine_core.useStyles)({
name: "TimeGrid",
classes: require_TimeGrid_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
value,
defaultValue,
finalValue: null,
onChange
});
const controls = data.map((time) => {
const isDisabled = disabled || !!minTime && require_compare_time.isTimeBefore(time, minTime) || !!maxTime && require_compare_time.isTimeAfter(time, maxTime) || (Array.isArray(disableTime) ? !!disableTime.find((t) => require_is_same_time.isSameTime({
time,
compare: t,
withSeconds
})) : !!disableTime?.(time));
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimeGridControl.TimeGridControl, {
active: require_is_same_time.isSameTime({
time,
compare: _value || "",
withSeconds
}),
time,
onClick: () => {
const nextValue = allowDeselect && (_value === null ? time === _value : require_is_same_time.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__ */ (0, react_jsx_runtime.jsx)(require_TimeGrid_context.TimeGridProvider, {
value: { getStyles },
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
...getStyles("root"),
...others,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.SimpleGrid, {
...simpleGridProps,
...getStyles("simpleGrid", {
className: simpleGridProps?.className,
style: simpleGridProps?.style
}),
children: controls
})
})
});
});
TimeGrid.displayName = "@mantine/dates/TimeGrid";
TimeGrid.classes = require_TimeGrid_module.default;
TimeGrid.varsResolver = varsResolver;
//#endregion
exports.TimeGrid = TimeGrid;
//# sourceMappingURL=TimeGrid.cjs.map