@trellixio/roaster-coffee/esm/components/DatePicker/DatePicker.js

Beans' product component library

import * as React from 'react';
import { pickCalendarProps, formatDate, getSeparatorIndex, dateStringParser, isDateValid } from './utils/index.js';
import './components/Day/Day.js';
import './components/Weekday/Weekday.js';
import { Calendar } from './components/Calendar/Calendar.js';
import { TextField } from '../TextField/TextField.js';
import { useUncontrolled } from '../../utils/useUncontrolled/index.js';
import '@floating-ui/react';

function DatePicker(props) {
  const { calendarProps, others } = pickCalendarProps(props);
  const {
    month,
    year,
    onChange,
    onInputError,
    value: passedValue,
    disableSpecificDates,
    dateFormat,
    separator,
    minDate,
    maxDate,
    defaultValue
  } = calendarProps;
  const textFieldRef = React.useRef();
  const calendarRef = React.useRef();
  const [isTextFieldFocused, setIsTextFieldFocused] = React.useState(false);
  const [inputError, setInputError] = React.useState(false);
  const [currentKey, setCurrentKey] = React.useState("");
  const [{ currentDisplayedMonth, currentDisplayedYear }, setCalendarDate] = React.useState({
    currentDisplayedMonth: month,
    currentDisplayedYear: year
  });
  const separatorIndex = getSeparatorIndex(dateFormat);
  const handleMonthChange = React.useCallback(
    (targetMonth, targetYear) => setCalendarDate({ currentDisplayedMonth: targetMonth, currentDisplayedYear: targetYear }),
    []
  );
  const [date, setDate] = useUncontrolled({
    value: passedValue,
    defaultValue,
    finalValue: null,
    onChange
  });
  const [inputValue, setInputValue] = React.useState(
    date instanceof Date ? formatDate(date, separator, dateFormat) : ""
  );
  const onFocus = () => setIsTextFieldFocused(true);
  const onBlur = () => setIsTextFieldFocused(false);
  const handleDateSelection = React.useCallback(
    (selectedDate) => {
      setInputValue(formatDate(selectedDate, separator));
      setDate(selectedDate);
      setCalendarDate({
        currentDisplayedMonth: selectedDate.getMonth(),
        currentDisplayedYear: selectedDate.getFullYear()
      });
      setInputError("");
      window.setTimeout(onBlur, 10);
    },
    [onChange]
  );
  function handleInputChange(value) {
    const valueLength = value.length;
    if (currentKey !== "Backspace" && (valueLength === separatorIndex.first || valueLength === separatorIndex.second)) {
      return setInputValue(value + separator);
    }
    if (valueLength === 0) {
      setDate(null);
    }
    setInputValue(value);
    if (valueLength === 10) {
      const dateValue = dateStringParser(value);
      if (!dateValue) {
        return setInputError(onInputError?.("INVALID_DATE") ?? true);
      }
      setInputError("");
      if (isDateValid({ date: dateValue, minDate, maxDate })) {
        return handleDateSelection(dateValue);
      }
      return setInputError(onInputError?.("OUT_OF_RANGE") ?? true);
    }
    if (valueLength < 10 && valueLength > 0) {
      return setInputError(onInputError?.("INVALID_DATE") ?? true);
    }
  }
  React.useEffect(() => {
    if (defaultValue) handleDateSelection(defaultValue);
  }, []);
  return /* @__PURE__ */ React.createElement("div", { className: "date-picker", ref: calendarRef }, /* @__PURE__ */ React.createElement(
    TextField,
    {
      ...others,
      value: inputValue,
      ref: textFieldRef,
      onFocus,
      maxLength: 10,
      onChange: (value) => handleInputChange(value),
      onKeyDown: (event) => setCurrentKey(event.key),
      error: inputError
    }
  ), /* @__PURE__ */ React.createElement(
    Calendar,
    {
      selected: date,
      onClose: onBlur,
      minDate,
      maxDate,
      isOpen: isTextFieldFocused,
      year: currentDisplayedYear,
      month: currentDisplayedMonth,
      onMonthChange: handleMonthChange,
      handleDateSelection,
      disableSpecificDates
    }
  ));
}

export { DatePicker };
//# sourceMappingURL=DatePicker.js.map