80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import { DatePicker as AriaDatePicker, Button, Dialog, Group, OverlayArrow, Popover } from 'react-aria-components';
|
|
|
|
import dayjs from 'dayjs';
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
import { Calendar } from '../calendar';
|
|
import { calendarDateToDate, dateToCalendarDate } from '../calendar/utils';
|
|
import { CalendarIcon } from '../icons';
|
|
|
|
const trigger = tv({
|
|
base: 'flex h-9 w-[156px] cursor-pointer items-center border border-kc-gray-be bg-white text-left outline-none transition',
|
|
variants: {
|
|
isHovered: {
|
|
true: 'border-kc-black-34',
|
|
},
|
|
isFocused: {
|
|
true: 'border-kc-black-34',
|
|
},
|
|
isDisabled: {
|
|
true: 'cursor-default border-kc-gray-99 bg-kc-gray-eb',
|
|
},
|
|
isFocusVisible: {
|
|
true: 'ring-2 ring-offset-2 ring-primary',
|
|
},
|
|
},
|
|
});
|
|
|
|
export type DatePickerProps = {
|
|
value: Date | null;
|
|
onChange: (date: Date | null) => void;
|
|
maxValue?: Date | null;
|
|
minValue?: Date | null;
|
|
isDisabled?: boolean;
|
|
className?: string;
|
|
name?: string;
|
|
};
|
|
|
|
export function DatePicker({ value, onChange, maxValue, minValue, isDisabled, className, name }: DatePickerProps) {
|
|
return (
|
|
<AriaDatePicker
|
|
aria-label="날짜 선택"
|
|
value={dateToCalendarDate(value)}
|
|
onChange={(val) => onChange(calendarDateToDate(val))}
|
|
maxValue={maxValue !== undefined ? dateToCalendarDate(maxValue) : undefined}
|
|
minValue={minValue !== undefined ? dateToCalendarDate(minValue) : undefined}
|
|
isDisabled={isDisabled}
|
|
granularity="day"
|
|
firstDayOfWeek="sun"
|
|
className={className}
|
|
name={name}
|
|
>
|
|
<Group>
|
|
<Button className={(renderProps) => trigger(renderProps)}>
|
|
<span className={`flex-1 px-3 text-sm ${value ? 'text-kc-black-34' : 'text-kc-gray-99'}`}>
|
|
{value ? dayjs(value).format('YYYY.MM.DD') : 'YYYY.MM.DD'}
|
|
</span>
|
|
<span className="flex h-full w-8 shrink-0 items-center justify-center text-kc-gray-99">
|
|
<CalendarIcon className="h-4 w-4" />
|
|
</span>
|
|
</Button>
|
|
</Group>
|
|
<Popover className="bg-white border border-kc-gray-be p-3 px-6 pb-6 drop-shadow-modal outline-none" offset={12}>
|
|
<OverlayArrow className="group/arrow">
|
|
<svg
|
|
width="12"
|
|
height="8"
|
|
viewBox="0 0 12 8"
|
|
className="block fill-white stroke-kc-gray-be group-data-[placement=bottom]/arrow:rotate-180"
|
|
>
|
|
<path d="M0 0 L6 8 L12 0" />
|
|
</svg>
|
|
</OverlayArrow>
|
|
<Dialog className="outline-none">
|
|
<Calendar />
|
|
</Dialog>
|
|
</Popover>
|
|
</AriaDatePicker>
|
|
);
|
|
}
|