@lobehub/ui/es/base-ui/DatePicker/DatePicker.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Icon from "../../Icon/Icon.mjs";
import { useTranslation } from "../../i18n/useTranslation.mjs";
import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
import { DEFAULT_FORMAT, clampToBounds } from "./calendar.mjs";
import { styles } from "./style.mjs";
import CalendarPanel from "./CalendarPanel.mjs";
import PickerShell from "./PickerShell.mjs";
import { memo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import useMergeState from "use-merge-value";
import { CalendarIcon } from "lucide-react";
import dayjs from "dayjs";
//#region src/base-ui/DatePicker/DatePicker.tsx
const PLACEHOLDER_KEY = {
	date: "datePicker.placeholder",
	month: "datePicker.monthPlaceholder",
	year: "datePicker.yearPlaceholder"
};
const formatDate = (date, format, fallback) => typeof format === "function" ? format(date) : dayjs(date).format(format ?? fallback);
const DatePicker = memo(({ allowClear = true, className, defaultValue = null, disabled, disabledDate, footer, format, max, min, mode = "date", onChange, placeholder, shadow, size, style, value, variant }) => {
	const { t } = useTranslation(datePicker_default);
	const [current, setCurrent] = useMergeState(defaultValue, {
		defaultValue,
		onChange,
		value
	});
	const [open, setOpen] = useState(false);
	const [month, setMonth] = useState(() => current ?? /* @__PURE__ */ new Date());
	const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;
	return /* @__PURE__ */ jsxs(PickerShell, {
		className,
		disabled,
		open,
		shadow,
		showClear: allowClear && !!current,
		size,
		style,
		variant,
		icon: /* @__PURE__ */ jsx("span", {
			className: styles.icon,
			children: /* @__PURE__ */ jsx(Icon, {
				icon: CalendarIcon,
				size: 14
			})
		}),
		trigger: /* @__PURE__ */ jsx("button", {
			className: styles.trigger,
			disabled,
			type: "button",
			children: text ?? /* @__PURE__ */ jsx("span", {
				className: styles.placeholder,
				children: placeholder ?? t(PLACEHOLDER_KEY[mode])
			})
		}),
		onClear: () => setCurrent(null),
		onOpenChange: (next) => {
			if (next) setMonth(current ?? clampToBounds(/* @__PURE__ */ new Date(), {
				max,
				min
			}));
			setOpen(next);
		},
		children: [/* @__PURE__ */ jsx(CalendarPanel, {
			bounds: {
				disabledDate,
				max,
				min
			},
			mode,
			month,
			selected: current,
			onMonthChange: setMonth,
			onSelect: (date) => {
				setCurrent(date);
				setOpen(false);
			}
		}), footer && /* @__PURE__ */ jsx("div", {
			className: styles.footer,
			children: footer
		})]
	});
});
DatePicker.displayName = "DatePicker";
//#endregion
export { DatePicker as default, formatDate };

//# sourceMappingURL=DatePicker.mjs.map