@mantine/dates/esm/components/DateTimePicker/DateTimePicker.mjs

Calendars, date and time pickers based on Mantine components

"use client";
import { clampDate } from "../../utils/clamp-date/clamp-date.mjs";
import { useDatesContext } from "../DatesProvider/use-dates-context.mjs";
import { PickerInputBase } from "../PickerInputBase/PickerInputBase.mjs";
import { useUncontrolledDates } from "../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.mjs";
import { pickCalendarProps } from "../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs";
import { InlineDateTimePicker } from "../InlineDateTimePicker/InlineDateTimePicker.mjs";
import DateTimePicker_module_default from "./DateTimePicker.module.mjs";
import dayjs from "dayjs";
import { useState } from "react";
import { jsx } from "react/jsx-runtime";
import { genericFactory, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
import { useDidUpdate, useDisclosure } from "@mantine/hooks";
//#region packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx
const defaultProps = {
	type: "default",
	dropdownType: "popover",
	size: "sm"
};
const DateTimePicker = genericFactory((_props) => {
	const props = useProps([
		"Input",
		"InputWrapper",
		"DateTimePicker"
	], defaultProps, _props);
	const { value, defaultValue, onChange, valueFormat, locale, classNames, styles, unstyled, timePickerProps, endTimePickerProps, submitButtonProps, withSeconds, level, defaultLevel, size, variant, dropdownType, vars, minDate, maxDate, defaultDate, defaultTimeValue, presets, attributes, onDropdownClose, type, labelSeparator, allowSingleDateInRange, ...rest } = props;
	const isRange = type === "range";
	useStyles({
		name: "DateTimePicker",
		classes: DateTimePicker_module_default,
		props,
		classNames,
		styles,
		unstyled,
		attributes,
		vars
	});
	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
		classNames,
		styles,
		props
	});
	const _withSeconds = withSeconds || timePickerProps?.withSeconds;
	const _valueFormat = valueFormat || (_withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
	const { calendarProps: { allowSingleDateInRange: _asdir, ...calendarProps }, others } = pickCalendarProps(rest);
	const ctx = useDatesContext();
	const _labelSeparator = ctx.getLabelSeparator(labelSeparator);
	const [_value, setValue] = useUncontrolledDates({
		type,
		value,
		defaultValue,
		onChange,
		withTime: true
	});
	const [dropdownOpened, dropdownHandlers] = useDisclosure(false);
	const [inlineKey, setInlineKey] = useState(0);
	const formatDate = (v) => {
		if (!v) return "";
		if (typeof _valueFormat === "function") return _valueFormat(v);
		return dayjs(v).locale(ctx.getLocale(locale)).format(_valueFormat);
	};
	const getFormattedValue = () => {
		if (isRange && Array.isArray(_value)) {
			const start = formatDate(_value[0]);
			const end = formatDate(_value[1]);
			if (start && end) return `${start} ${_labelSeparator} ${end}`;
			if (start) return `${start} ${_labelSeparator} ...`;
			return "";
		}
		return formatDate(_value);
	};
	const formattedValue = getFormattedValue();
	useDidUpdate(() => {
		if (dropdownOpened) setInlineKey((k) => k + 1);
	}, [dropdownOpened]);
	const __stopPropagation = dropdownType === "popover";
	const clearIncompleteRange = () => {
		if (isRange && Array.isArray(_value) && _value[0] && !_value[1]) setValue([null, null]);
	};
	const handleDropdownClose = () => {
		clearIncompleteRange();
		if (isRange && Array.isArray(_value)) {
			const clampedStart = _value[0] ? clampDate(minDate, maxDate, _value[0]) : null;
			const clampedEnd = _value[1] ? clampDate(minDate, maxDate, _value[1]) : null;
			if (_value[0] && _value[0] !== clampedStart || _value[1] && _value[1] !== clampedEnd) setValue([clampedStart, clampedEnd]);
		} else if (_value) {
			const clamped = clampDate(minDate, maxDate, _value);
			if (_value !== clamped) setValue(clamped);
		}
		onDropdownClose?.();
	};
	const handleSubmitOrEnter = () => {
		handleDropdownClose();
		dropdownHandlers.close();
	};
	const onClear = () => {
		if (isRange) setValue([null, null]);
		else setValue(null);
	};
	const shouldClear = isRange ? Array.isArray(_value) && !!_value[0] : !!_value;
	const handlePresetSelect = (val) => {
		setValue(val);
	};
	return /* @__PURE__ */ jsx(PickerInputBase, {
		formattedValue,
		dropdownOpened: !rest.disabled ? dropdownOpened : false,
		dropdownHandlers,
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		unstyled,
		onClear,
		shouldClear,
		value: _value,
		size,
		variant,
		dropdownType,
		...others,
		type,
		__staticSelector: "DateTimePicker",
		onDropdownClose: handleDropdownClose,
		withTime: true,
		attributes,
		children: /* @__PURE__ */ jsx(InlineDateTimePicker, {
			...calendarProps,
			fullWidth: false,
			type,
			value: _value,
			onChange: setValue,
			maxDate,
			minDate,
			size,
			variant,
			locale,
			classNames: resolvedClassNames,
			styles: resolvedStyles,
			unstyled,
			level,
			defaultLevel,
			defaultDate,
			defaultTimeValue,
			presets,
			allowSingleDateInRange,
			timePickerProps,
			endTimePickerProps,
			submitButtonProps,
			withSeconds,
			valueFormat,
			labelSeparator,
			attributes,
			onSubmit: handleSubmitOrEnter,
			__stopPropagation,
			__staticSelector: "DateTimePicker",
			__onEnter: handleSubmitOrEnter,
			__onPresetSelect: handlePresetSelect
		}, inlineKey)
	});
});
DateTimePicker.classes = {
	...DateTimePicker_module_default,
	...PickerInputBase.classes,
	...InlineDateTimePicker.classes
};
DateTimePicker.displayName = "@mantine/dates/DateTimePicker";
//#endregion
export { DateTimePicker };

//# sourceMappingURL=DateTimePicker.mjs.map