@transkripid/flowbite-react/lib/components/Datepicker/Datepicker.mjs.map

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

{"version":3,"file":"Datepicker.mjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { HiArrowLeft, HiArrowRight, HiCalendar } from 'react-icons/hi';\nimport { twMerge } from 'tailwind-merge';\nimport { mergeDeep } from '../../helpers/merge-deep';\nimport { getTheme } from '../../theme-store';\nimport type { DeepPartial } from '../../types';\nimport { TextInput, type FlowbiteTextInputTheme, type TextInputProps } from '../TextInput';\nimport { DatepickerContext } from './DatepickerContext';\nimport type { FlowbiteDatepickerViewsDaysTheme } from './Views/Days';\nimport { DatepickerViewsDays } from './Views/Days';\nimport { DatepickerViewsDecades, type FlowbiteDatepickerViewsDecadesTheme } from './Views/Decades';\nimport { DatepickerViewsMonth, type FlowbiteDatepickerViewsMonthsTheme } from './Views/Months';\nimport { DatepickerViewsYears, type FlowbiteDatepickerViewsYearsTheme } from './Views/Years';\nimport {\n  Views,\n  WeekStart,\n  addMonths,\n  addYears,\n  getFirstDateInRange,\n  getFormattedDate,\n  isDateEqual,\n  startOfYearPeriod,\n} from './helpers';\n\nexport interface FlowbiteDatepickerTheme {\n  root: {\n    base: string;\n    input?: FlowbiteTextInputTheme;\n  };\n  popup: FlowbiteDatepickerPopupTheme;\n  views: {\n    days: FlowbiteDatepickerViewsDaysTheme;\n    months: FlowbiteDatepickerViewsMonthsTheme;\n    years: FlowbiteDatepickerViewsYearsTheme;\n    decades: FlowbiteDatepickerViewsDecadesTheme;\n  };\n}\n\nexport interface FlowbiteDatepickerPopupTheme {\n  root: {\n    base: string;\n    inline: string;\n    inner: string;\n  };\n  header: {\n    base: string;\n    title: string;\n    selectors: {\n      base: string;\n      button: {\n        base: string;\n        prev: string;\n        next: string;\n        view: string;\n      };\n    };\n  };\n  view: {\n    base: string;\n  };\n  footer: {\n    base: string;\n    button: {\n      base: string;\n      today: string;\n      clear: string;\n    };\n  };\n}\n\nexport interface DatepickerProps extends Omit<TextInputProps, 'theme'> {\n  open?: boolean;\n  inline?: boolean;\n  autoHide?: boolean;\n  showClearButton?: boolean;\n  labelClearButton?: string;\n  showTodayButton?: boolean;\n  labelTodayButton?: string;\n  defaultDate?: Date;\n  minDate?: Date;\n  maxDate?: Date;\n  language?: string;\n  weekStart?: WeekStart;\n  theme?: DeepPartial<FlowbiteDatepickerTheme>;\n  onSelectedDateChanged?: (date: Date) => void;\n}\n\nexport const Datepicker: FC<DatepickerProps> = ({\n  title,\n  open,\n  inline = false,\n  autoHide = true, // Hide when selected the day\n  showClearButton = true,\n  labelClearButton = 'Clear',\n  showTodayButton = true,\n  labelTodayButton = 'Today',\n  defaultDate = new Date(),\n  minDate,\n  maxDate,\n  language = 'en',\n  weekStart = WeekStart.Sunday,\n  className,\n  theme: customTheme = {},\n  onSelectedDateChanged,\n  ...props\n}) => {\n  const theme = mergeDeep(getTheme().datepicker, customTheme);\n\n  // Default date should respect the range\n  defaultDate = getFirstDateInRange(defaultDate, minDate, maxDate);\n\n  const [isOpen, setIsOpen] = useState(open);\n  const [view, setView] = useState<Views>(Views.Days);\n  // selectedDate is the date selected by the user\n  const [selectedDate, setSelectedDate] = useState<Date>(defaultDate);\n  // viewDate is only for navigation\n  const [viewDate, setViewDate] = useState<Date>(defaultDate);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const datepickerRef = useRef<HTMLDivElement>(null);\n\n  // Triggers when user select the date\n  const changeSelectedDate = (date: Date, useAutohide: boolean) => {\n    setSelectedDate(date);\n\n    if (onSelectedDateChanged) {\n      onSelectedDateChanged(date);\n    }\n\n    if (autoHide && view === Views.Days && useAutohide == true && !inline) {\n      setIsOpen(false);\n    }\n  };\n\n  // Render the DatepickerView* node\n  const renderView = (type: Views): ReactNode => {\n    switch (type) {\n      case Views.Decades:\n        return <DatepickerViewsDecades theme={theme.views.decades} />;\n      case Views.Years:\n        return <DatepickerViewsYears theme={theme.views.years} />;\n      case Views.Months:\n        return <DatepickerViewsMonth theme={theme.views.months} />;\n      case Views.Days:\n      default:\n        return <DatepickerViewsDays theme={theme.views.days} />;\n    }\n  };\n\n  // Coordinate the next view based on current view (statemachine-like)\n  const getNextView = (): Views => {\n    switch (view) {\n      case Views.Days:\n        return Views.Months;\n      case Views.Months:\n        return Views.Years;\n      case Views.Years:\n        return Views.Decades;\n    }\n    return view;\n  };\n\n  // Get the view title based on active View\n  const getViewTitle = (): string => {\n    switch (view) {\n      case Views.Decades:\n        return `${startOfYearPeriod(viewDate, 100)} - ${startOfYearPeriod(viewDate, 100) + 90}`;\n      case Views.Years:\n        return `${startOfYearPeriod(viewDate, 10)} - ${startOfYearPeriod(viewDate, 10) + 9}`;\n      case Views.Months:\n        return getFormattedDate(language, viewDate, { year: 'numeric' });\n      case Views.Days:\n      default:\n        return getFormattedDate(language, viewDate, { month: 'long', year: 'numeric' });\n    }\n  };\n\n  // Navigate to prev/next for given view's date by value\n  const getViewDatePage = (view: Views, date: Date, value: number): Date => {\n    switch (view) {\n      case Views.Days:\n        return new Date(addMonths(date, value));\n      case Views.Months:\n        return new Date(addYears(date, value));\n      case Views.Years:\n        return new Date(addYears(date, value * 10));\n      case Views.Decades:\n        return new Date(addYears(date, value * 100));\n      default:\n        return new Date(addYears(date, value * 10));\n    }\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      const clickedInsideDatepicker = datepickerRef?.current?.contains(event.target as Node);\n      const clickedInsideInput = inputRef?.current?.contains(event.target as Node);\n\n      if (!clickedInsideDatepicker && !clickedInsideInput) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [inputRef, datepickerRef, setIsOpen]);\n\n  return (\n    <DatepickerContext.Provider\n      value={{\n        theme,\n        language,\n        minDate,\n        maxDate,\n        weekStart,\n        isOpen,\n        setIsOpen,\n        view,\n        setView,\n        viewDate,\n        setViewDate,\n        selectedDate,\n        setSelectedDate,\n        changeSelectedDate,\n      }}\n    >\n      <div className={twMerge(theme.root.base, className)}>\n        {!inline && (\n          <TextInput\n            theme={theme.root.input}\n            icon={HiCalendar}\n            ref={inputRef}\n            onFocus={() => {\n              if (!isDateEqual(viewDate, selectedDate)) {\n                setViewDate(selectedDate);\n              }\n              setIsOpen(true);\n            }}\n            value={selectedDate && getFormattedDate(language, selectedDate)}\n            readOnly\n            {...props}\n          />\n        )}\n        {(isOpen || inline) && (\n          <div ref={datepickerRef} className={twMerge(theme.popup.root.base, inline && theme.popup.root.inline)}>\n            <div className={theme.popup.root.inner}>\n              <div className={theme.popup.header.base}>\n                {title && <div className={theme.popup.header.title}>{title}</div>}\n                <div className={theme.popup.header.selectors.base}>\n                  <button\n                    type=\"button\"\n                    className={twMerge(\n                      theme.popup.header.selectors.button.base,\n                      theme.popup.header.selectors.button.prev,\n                    )}\n                    onClick={() => setViewDate(getViewDatePage(view, viewDate, -1))}\n                  >\n                    <HiArrowLeft />\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={twMerge(\n                      theme.popup.header.selectors.button.base,\n                      theme.popup.header.selectors.button.view,\n                    )}\n                    onClick={() => setView(getNextView())}\n                  >\n                    {getViewTitle()}\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={twMerge(\n                      theme.popup.header.selectors.button.base,\n                      theme.popup.header.selectors.button.next,\n                    )}\n                    onClick={() => setViewDate(getViewDatePage(view, viewDate, 1))}\n                  >\n                    <HiArrowRight />\n                  </button>\n                </div>\n              </div>\n              <div className={theme.popup.view.base}>{renderView(view)}</div>\n              {(showClearButton || showTodayButton) && (\n                <div className={theme.popup.footer.base}>\n                  {showTodayButton && (\n                    <button\n                      type=\"button\"\n                      className={twMerge(theme.popup.footer.button.base, theme.popup.footer.button.today)}\n                      onClick={() => {\n                        const today = new Date();\n                        changeSelectedDate(today, true);\n                        setViewDate(today);\n                      }}\n                    >\n                      {labelTodayButton}\n                    </button>\n                  )}\n                  {showClearButton && (\n                    <button\n                      type=\"button\"\n                      className={twMerge(theme.popup.footer.button.base, theme.popup.footer.button.clear)}\n                      onClick={() => {\n                        changeSelectedDate(defaultDate, true);\n                        if (defaultDate) {\n                          setViewDate(defaultDate);\n                        }\n                      }}\n                    >\n                      {labelClearButton}\n                    </button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </DatepickerContext.Provider>\n  );\n};\n\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","title","open","inline","autoHide","showClearButton","labelClearButton","showTodayButton","labelTodayButton","defaultDate","Date","minDate","maxDate","language","weekStart","WeekStart","Sunday","className","theme","customTheme","onSelectedDateChanged","props","mergeDeep","getTheme","datepicker","getFirstDateInRange","isOpen","setIsOpen","useState","view","setView","Views","Days","selectedDate","setSelectedDate","viewDate","setViewDate","inputRef","useRef","datepickerRef","changeSelectedDate","date","useAutohide","renderView","type","Decades","jsx","DatepickerViewsDecades","views","decades","Years","DatepickerViewsYears","years","Months","DatepickerViewsMonth","months","DatepickerViewsDays","days","getNextView","getViewTitle","startOfYearPeriod","getFormattedDate","year","month","getViewDatePage","value","addMonths","addYears","useEffect","handleClickOutside","event","clickedInsideDatepicker","current","contains","target","clickedInsideInput","addEventListener","removeEventListener","DatepickerContext","twMerge","root","base","TextInput","input","HiCalendar","isDateEqual","popup","jsxs","inner","header","selectors","button","prev","HiArrowLeft","next","HiArrowRight","footer","today","clear","displayName"],"mappings":"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"}