@baseplate-dev/ui-components
Version:
Shared UI component library
46 lines • 2.85 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { format, parseISO } from 'date-fns';
import { useId, useState } from 'react';
import { MdCalendarMonth } from 'react-icons/md';
import { useControllerMerged } from '#src/hooks/use-controller-merged.js';
import { cn } from '#src/utils/index.js';
import { Button } from '../button/button.js';
import { Calendar } from '../calendar/calendar.js';
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '../form-item/form-item.js';
import { Popover, PopoverContent, PopoverTrigger } from '../popover/popover.js';
/**
* Field with label and error states that wraps a Calendar component for single date selection.
*/
function DatePickerField({ className, wrapperClassName, disabled, placeholder = 'Pick a date', onChange, value, label, error, description, dateFormat = 'PPP', calendarProps, ref, }) {
const addWrapper = label ?? error ?? description;
const id = useId();
const [open, setOpen] = useState(false);
// Parse string value to Date for Calendar component
const dateValue = value ? parseISO(value) : undefined;
const handleSelect = (date) => {
if (date) {
// Format date as YYYY-MM-DD string
const dateString = format(date, 'yyyy-MM-dd');
onChange?.(dateString);
setOpen(false);
}
else {
onChange?.(undefined);
}
};
const inputComponent = (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", "data-empty": !dateValue, disabled: disabled, id: id, ref: ref, className: cn('w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground', className), children: [_jsx(MdCalendarMonth, {}), dateValue ? (format(dateValue, dateFormat)) : (_jsx("span", { children: placeholder }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: dateValue, onSelect: handleSelect, captionLayout: "dropdown", ...calendarProps }) })] }));
if (addWrapper) {
return (_jsxs(FormItem, { error: error, className: cn('flex gap-2', wrapperClassName), children: [_jsx(FormLabel, { children: label }), _jsx(FormControl, { children: inputComponent }), _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] }));
}
return inputComponent;
}
function DatePickerFieldController({ control, name, ref, ...rest }) {
const { field: fieldProps, fieldState: { error }, } = useControllerMerged({
control,
name,
}, rest, ref);
return _jsx(DatePickerField, { error: error?.message, ...rest, ...fieldProps });
}
export { DatePickerField, DatePickerFieldController };
//# sourceMappingURL=date-picker-field.js.map