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

React based design system for UNDP

{"version":3,"file":"DateTimeRangePicker.cjs","names":[],"sources":["../src/components/ui/date-time-range-picker.tsx"],"sourcesContent":["import { ArrowRight } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport type { Matcher } from 'react-day-picker';\nimport { DateTimePicker } from './date-time-picker';\n\nexport function DateTimeRangePicker({\n  disablePopover,\n  classNames,\n  variant,\n  inputSize,\n  rounded,\n  onValueChange,\n  value,\n  defaultValue,\n  disabled,\n}: {\n  variant?: 'light' | 'normal';\n  inputSize?: 'sm' | 'base';\n  rounded?: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';\n  classNames?: {\n    popOverTrigger?: string;\n    popOverContent?: string;\n    popOverTriggerIcon?: string;\n  };\n  onValueChange?: (dates?: { startDate?: Date; endDate?: Date }) => void;\n  value?: {\n    startDate?: Date;\n    endDate?: Date;\n  };\n  defaultValue?: {\n    startDate?: Date;\n    endDate?: Date;\n  };\n  disablePopover?: boolean;\n  disabled?: Matcher | Matcher[];\n}) {\n  const [startDate, setStartDate] = useState<Date | undefined>(\n    value?.startDate || defaultValue?.startDate || undefined,\n  );\n  const [endDate, setEndDate] = useState<Date | undefined>(\n    value?.endDate || defaultValue?.endDate || undefined,\n  );\n  useEffect(() => {\n    onValueChange?.({ startDate, endDate });\n  }, [startDate, endDate, onValueChange]);\n\n  return (\n    <div className='flex w-full items-center gap-2'>\n      <DateTimePicker\n        onValueChange={(value: Date | undefined) => {\n          setStartDate(value);\n        }}\n        placeHolder='Start date and time'\n        rounded={rounded}\n        disablePopover={disablePopover}\n        variant={variant}\n        inputSize={inputSize}\n        classNames={classNames}\n        disabled={(date: Date) => {\n          const isAfterEndDate = endDate ? date.getDate() > endDate.getDate() : false;\n\n          if (typeof disabled === 'function') {\n            return disabled(date) || isAfterEndDate;\n          }\n\n          if (Array.isArray(disabled)) {\n            return (\n              disabled.some((matcher) => (typeof matcher === 'function' ? matcher(date) : false)) ||\n              isAfterEndDate\n            );\n          }\n\n          return isAfterEndDate;\n        }}\n        disabledHours={\n          endDate && endDate?.getDate() === startDate?.getDate()\n            ? Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour > endDate.getHours())\n            : []\n        }\n        disabledMinutes={\n          endDate && endDate?.getDate() === startDate?.getDate()\n            ? Array.from({ length: 60 }, (_, i) => i).filter(\n                (minute) => minute > endDate.getMinutes(),\n              )\n            : []\n        }\n      />\n      <div className='size-4 text-input-border'>\n        <ArrowRight size={16} />\n      </div>\n      <DateTimePicker\n        onValueChange={(value: Date | undefined) => {\n          setEndDate(value);\n        }}\n        placeHolder='End date and time'\n        rounded={rounded}\n        disablePopover={disablePopover}\n        variant={variant}\n        inputSize={inputSize}\n        classNames={classNames}\n        disabled={(date: Date) => {\n          const isBeforeStartDate = startDate ? date.getDate() < startDate.getDate() : false;\n\n          if (typeof disabled === 'function') {\n            return disabled(date) || isBeforeStartDate;\n          }\n\n          if (Array.isArray(disabled)) {\n            return (\n              disabled.some((matcher) => (typeof matcher === 'function' ? matcher(date) : false)) ||\n              isBeforeStartDate\n            );\n          }\n\n          return isBeforeStartDate;\n        }}\n        disabledHours={\n          startDate && endDate?.getDate() === startDate.getDate()\n            ? Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour < startDate.getHours())\n            : []\n        }\n        disabledMinutes={\n          startDate && endDate?.getDate() === startDate.getDate()\n            ? Array.from({ length: 60 }, (_, i) => i).filter(\n                (minute) => minute < startDate.getMinutes(),\n              )\n            : []\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":"yMAKA,SAAgB,EAAoB,CAClC,iBACA,aACA,UACA,YACA,UACA,gBACA,QACA,eACA,YAqBC,CACD,GAAM,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAChB,GAAO,WAAa,GAAc,WAAa,IAAA,EACjD,EACM,CAAC,EAAS,IAAA,EAAA,EAAA,SAAA,CACd,GAAO,SAAW,GAAc,SAAW,IAAA,EAC7C,EAKA,OAJA,EAAA,EAAA,UAAA,KAAgB,CACd,IAAgB,CAAE,YAAW,SAAQ,CAAC,CACxC,EAAG,CAAC,EAAW,EAAS,CAAa,CAAC,GAGpC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0CAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CACE,cAAgB,GAA4B,CAC1C,EAAa,CAAK,CACpB,EACA,YAAY,sBACH,UACO,iBACP,UACE,YACC,aACZ,SAAW,GAAe,CACxB,IAAM,EAAiB,EAAU,EAAK,QAAQ,EAAI,EAAQ,QAAQ,EAAI,GAatE,OAXI,OAAO,GAAa,WACf,EAAS,CAAI,GAAK,EAGvB,MAAM,QAAQ,CAAQ,GAEtB,EAAS,KAAM,GAAa,OAAO,GAAY,YAAa,EAAQ,CAAI,CAAU,GAK/E,CACT,EACA,cACE,GAAW,GAAS,QAAQ,IAAM,GAAW,QAAQ,EACjD,MAAM,KAAK,CAAE,OAAQ,EAAG,GAAI,EAAG,IAAM,CAAC,CAAC,CAAC,OAAQ,GAAS,EAAO,EAAQ,SAAS,CAAC,EAClF,CAAC,EAEP,gBACE,GAAW,GAAS,QAAQ,IAAM,GAAW,QAAQ,EACjD,MAAM,KAAK,CAAE,OAAQ,EAAG,GAAI,EAAG,IAAM,CAAC,CAAC,CAAC,OACrC,GAAW,EAAS,EAAQ,WAAW,CAC1C,EACA,CAAC,CAER,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qCACb,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CACE,cAAgB,GAA4B,CAC1C,EAAW,CAAK,CAClB,EACA,YAAY,oBACH,UACO,iBACP,UACE,YACC,aACZ,SAAW,GAAe,CACxB,IAAM,EAAoB,EAAY,EAAK,QAAQ,EAAI,EAAU,QAAQ,EAAI,GAa7E,OAXI,OAAO,GAAa,WACf,EAAS,CAAI,GAAK,EAGvB,MAAM,QAAQ,CAAQ,GAEtB,EAAS,KAAM,GAAa,OAAO,GAAY,YAAa,EAAQ,CAAI,CAAU,GAK/E,CACT,EACA,cACE,GAAa,GAAS,QAAQ,IAAM,EAAU,QAAQ,EAClD,MAAM,KAAK,CAAE,OAAQ,EAAG,GAAI,EAAG,IAAM,CAAC,CAAC,CAAC,OAAQ,GAAS,EAAO,EAAU,SAAS,CAAC,EACpF,CAAC,EAEP,gBACE,GAAa,GAAS,QAAQ,IAAM,EAAU,QAAQ,EAClD,MAAM,KAAK,CAAE,OAAQ,EAAG,GAAI,EAAG,IAAM,CAAC,CAAC,CAAC,OACrC,GAAW,EAAS,EAAU,WAAW,CAC5C,EACA,CAAC,CAER,CAAA,CACE,GAET"}