@mantine/dates/esm/hooks/use-dates-input/use-dates-input.mjs

Calendars, date and time pickers based on Mantine components

'use client';
import dayjs from 'dayjs';
import { useDisclosure } from '@mantine/hooks';
import '../../components/DatesProvider/DatesProvider.mjs';
import { useDatesContext } from '../../components/DatesProvider/use-dates-context.mjs';
import { getFormattedDate } from '../../utils/get-formatted-date/get-formatted-date.mjs';
import { useUncontrolledDates } from '../use-uncontrolled-dates/use-uncontrolled-dates.mjs';

function useDatesInput({
  type,
  value,
  defaultValue,
  onChange,
  locale,
  format,
  closeOnChange,
  sortDates,
  labelSeparator,
  valueFormatter
}) {
  const ctx = useDatesContext();
  const [dropdownOpened, dropdownHandlers] = useDisclosure(false);
  const [_value, _setValue] = useUncontrolledDates({
    type,
    value,
    defaultValue,
    onChange
  });
  const formattedValue = getFormattedDate({
    type,
    date: _value,
    locale: ctx.getLocale(locale),
    format,
    labelSeparator: ctx.getLabelSeparator(labelSeparator),
    formatter: valueFormatter
  });
  const setValue = (val) => {
    if (closeOnChange) {
      if (type === "default") {
        dropdownHandlers.close();
      }
      if (type === "range" && val[0] && val[1]) {
        dropdownHandlers.close();
      }
    }
    if (sortDates && type === "multiple") {
      _setValue([...val].sort((a, b) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
    } else {
      _setValue(val);
    }
  };
  const onClear = () => setValue(type === "range" ? [null, null] : type === "multiple" ? [] : null);
  const shouldClear = type === "range" ? !!_value[0] : type === "multiple" ? _value.length > 0 : _value !== null;
  return {
    _value,
    setValue,
    onClear,
    shouldClear,
    formattedValue,
    dropdownOpened,
    dropdownHandlers
  };
}

export { useDatesInput };
//# sourceMappingURL=use-dates-input.mjs.map