@undp/design-system-react/dist/DateTimePicker.cjs.map

React based design system for UNDP

{"version":3,"file":"DateTimePicker.cjs","names":[],"sources":["../src/components/ui/date-time-picker.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport type { Matcher, PropsSingle } from 'react-day-picker';\nimport { cn } from '@/lib/utils';\nimport { Calendar } from './calendar-card';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\nimport { Separator } from './separator';\n\ntype SingleCalendarProps = Omit<PropsSingle, 'mode'>;\n\nconst dateTimePickerVariants = cva(\n  'w-full h-auto bg-background rounded-base text-content-primary text-base transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-disabled placeholder:text-content-placeholder',\n  {\n    variants: {\n      variant: {\n        light: 'border border-stroke',\n        normal: 'border-2 border-foreground',\n      },\n      rounded: {\n        base: 'rounded',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      inputSize: {\n        sm: 'px-2.5 py-1',\n        base: 'p-2.5',\n      },\n    },\n    defaultVariants: {\n      inputSize: 'base',\n      variant: 'normal',\n      rounded: 'base',\n    },\n  },\n);\n\nexport function DateTimePicker({\n  selected,\n  onSelect,\n  disablePopover,\n  disabled,\n  classNames,\n  variant,\n  inputSize,\n  onValueChange,\n  disabledHours = [],\n  disabledMinutes = [],\n  placeHolder = 'Pick a date and time',\n  ...props\n}: SingleCalendarProps &\n  VariantProps<typeof dateTimePickerVariants> & {\n    disablePopover?: boolean;\n    classNames?: {\n      popOverTrigger?: string;\n      popOverContent?: string;\n      popOverTriggerIcon?: string;\n      popOverTriggerButton?: string;\n    };\n    onValueChange?: (date?: Date) => void;\n    disabledHours?: number[];\n    disabledMinutes?: number[];\n    disabled?: Matcher | Matcher[];\n    placeHolder?: string;\n  }) {\n  const [date, setDate] = useState<Date>();\n  const [hour, setHour] = useState(0);\n  const [minute, setMinute] = useState(0);\n  useEffect(() => {\n    onValueChange?.(date);\n  }, [date, onValueChange]);\n  return (\n    <Popover>\n      <PopoverTrigger\n        className={cn(dateTimePickerVariants({ inputSize, variant }), classNames?.popOverTrigger)}\n      >\n        <CalendarIcon\n          className={cn('size-4 text-content-placeholder', classNames?.popOverTriggerIcon)}\n        />\n        {date ? (\n          <p className='mt-1 p-0 font-body text-content-primary'>\n            {format(date, 'MMM d, yyyy HH:mm')}\n          </p>\n        ) : (\n          <p className='mt-1 p-0 font-body text-content-placeholder'>{placeHolder}</p>\n        )}\n      </PopoverTrigger>\n      <PopoverContent className={cn('w-auto p-0', classNames?.popOverContent)} align='start'>\n        <div className='flex items-start gap-0'>\n          <Calendar\n            mode='single'\n            selected={selected || date}\n            onSelect={(selectedDate, triggerDate, modifiers, event) => {\n              if (!selectedDate) return;\n              const newDate = new Date(selectedDate);\n              const currentHour = date?.getHours() ?? hour;\n              const currentMinute = date?.getMinutes() ?? minute;\n              newDate.setHours(currentHour, currentMinute);\n              setHour(currentHour);\n              setMinute(currentMinute);\n              setDate(newDate);\n              onSelect?.(selectedDate, triggerDate, modifiers, event);\n            }}\n            disabled={disabled}\n            {...props}\n          />\n          <Separator orientation='vertical' color='surface-lg' />\n          <div className='flex flex-col gap-4 px-2 pt-2'>\n            <p className='mb-0 flex h-7 items-center justify-center text-content-primary text-sm'>\n              {String(hour).padStart(2, '0')}:{String(minute).padStart(2, '0')}\n            </p>\n            <div className='flex max-h-[204px]'>\n              <div className='undp-scrollbar flex flex-col items-center gap-1.5 overflow-y-auto overflow-x-hidden px-4'>\n                <p className='sticky top-0 mb-0 bg-surface font-bold text-[14px] text-content-primary'>\n                  HH\n                </p>\n                {Array.from({ length: 24 }, (_, i) => (\n                  <button\n                    // biome-ignore lint/suspicious/noArrayIndexKey: This array is not expected to change\n                    key={i}\n                    type='button'\n                    className={cn(\n                      'mb-0 cursor-pointer rounded-sm p-1 text-content-primary text-sm hover:bg-surface hover:text-content-primary disabled:pointer-events-none disabled:opacity-disabled',\n                      i === hour &&\n                        'bg-surface-hard font-bold text-content-primary hover:bg-surface-hard-hover',\n                    )}\n                    onClick={() => {\n                      setHour(i);\n                      setDate((prev) => {\n                        const updated = new Date(prev ?? new Date());\n                        updated.setHours(i);\n                        return updated;\n                      });\n                    }}\n                    disabled={disabledHours.includes(i)}\n                  >\n                    {String(i).padStart(2, '0')}\n                  </button>\n                ))}\n              </div>\n              <Separator orientation='vertical' />\n              <div className='overflow-x-hidden! undp-scrollbar flex flex-col items-center gap-1.5 overflow-y-auto px-4'>\n                <p className='sticky top-0 mb-0 bg-surface font-bold text-[14px] text-content-primary'>\n                  MM\n                </p>\n                {Array.from({ length: 60 }, (_, i) => (\n                  <button\n                    // biome-ignore lint/suspicious/noArrayIndexKey: This array is not expected to change\n                    key={i}\n                    type='button'\n                    className={cn(\n                      'mb-0 cursor-pointer rounded-sm p-1 text-content-primary text-sm hover:bg-surface hover:text-content-primary disabled:pointer-events-none disabled:opacity-disabled',\n                      i === minute &&\n                        'bg-surface-hard font-bold text-content-primary hover:bg-surface-hard-hover',\n                    )}\n                    onClick={() => {\n                      setMinute(i);\n                      setDate((prev) => {\n                        const updated = new Date(prev ?? new Date());\n                        updated.setMinutes(i);\n                        return updated;\n                      });\n                    }}\n                    disabled={disabledMinutes.includes(i)}\n                  >\n                    {String(i).padStart(2, '0')}\n                  </button>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}