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

Beans' product component library

'use strict';

var React = require('react');
var index = require('./utils/index.js');
require('./components/Day/Day.js');
require('./components/Weekday/Weekday.js');
var Calendar = require('./components/Calendar/Calendar.js');
var TextField = require('../TextField/TextField.js');
var index$1 = require('../../utils/useUncontrolled/index.js');
require('@floating-ui/react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    for (var k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

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

exports.DatePicker = DatePicker;
//# sourceMappingURL=DatePicker.js.map