@braineet/ui/dist/esm/components/datepicker/DatePicker.js

Braineet design system

var _excluded = ["value", "onChange", "placement", "locale", "placeholder", "portalId", "monthsShown", "customInput", "field", "form", "onCalendarClose", "shouldCloseOnSelect", "inputProps"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/* eslint-disable import/no-extraneous-dependencies */
import React, { useState, useEffect, useRef, useCallback } from 'react';
import ReactDatePicker from 'react-datepicker';
import { useModalContext } from '../modal';
import DatePickerHeader from './components/DatePickerHeader';
import DatePickerInput from './components/DatePickerInput';
import { convertLocalToUTCDate, convertUTCToLocalDate } from './DatePicker.utils';

/**
 * https://reactdatepicker.com/
 * PropTypes: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L134
 */
import { jsx as _jsx } from "react/jsx-runtime";
var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var v = _ref.value,
    onChange = _ref.onChange,
    placement = _ref.placement,
    locale = _ref.locale,
    placeholder = _ref.placeholder,
    portalId = _ref.portalId,
    monthsShown = _ref.monthsShown,
    customInput = _ref.customInput,
    field = _ref.field,
    form = _ref.form,
    onCalendarClose = _ref.onCalendarClose,
    shouldCloseOnSelect = _ref.shouldCloseOnSelect,
    inputProps = _ref.inputProps,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var value = (field == null ? void 0 : field.value) || v;
  var modal = useModalContext();
  var _useState = useState(value),
    date = _useState[0],
    setDate = _useState[1];
  var _useState2 = useState('days'),
    mode = _useState2[0],
    setMode = _useState2[1];
  var _useState3 = useState(date),
    displayDate = _useState3[0],
    setDisplayDate = _useState3[1];
  var datePickerRef = useRef();
  React.useImperativeHandle(ref, function () {
    return datePickerRef.current;
  });
  var focusInput = useCallback(function () {
    var _datePickerRef$curren;
    (_datePickerRef$curren = datePickerRef.current) == null || _datePickerRef$curren.setFocus();
  }, [datePickerRef]);
  useEffect(function () {
    setDate(value);
  }, [value]);
  var handleChangeMode = function handleChangeMode(m) {
    setMode(function (prevMode) {
      if (prevMode === m) return 'days';
      return m;
    });
  };
  var resetMode = function resetMode() {
    return handleChangeMode('days');
  };
  var handleChange = function handleChange(dateValue) {
    var d = convertLocalToUTCDate(dateValue);
    if (mode === 'days') {
      if (field && form) form.setFieldValue(field.name, d);else setDate(d);
      if (onChange) onChange(d);
    } else {
      setDisplayDate(d);
      resetMode();
    }
  };
  var handleCalendarClose = function handleCalendarClose() {
    if (onCalendarClose) onCalendarClose();
    if (mode !== 'days') resetMode();
  };
  var inputComponent = customInput || /*#__PURE__*/_jsx(DatePickerInput, _extends({
    focusInput: focusInput
  }, inputProps));
  var portalID = portalId || (modal == null ? void 0 : modal.modalID);
  return /*#__PURE__*/_jsx(ReactDatePicker, _extends({
    ref: datePickerRef,
    selected: convertUTCToLocalDate(date),
    onChange: handleChange,
    showMonthYearPicker: mode === 'month',
    showFourColumnMonthYearPicker: true,
    showYearPicker: mode === 'year',
    customInput: inputComponent,
    locale: locale,
    renderCustomHeader: function renderCustomHeader(p) {
      return /*#__PURE__*/_jsx(DatePickerHeader, _extends({
        handleChangeMode: handleChangeMode,
        monthsShown: mode === 'days' ? monthsShown : 1,
        display: displayDate,
        locale: locale,
        mode: mode
      }, p));
    },
    calendarStartDay: 1,
    onCalendarClose: handleCalendarClose,
    monthsShown: mode === 'days' ? monthsShown : 1,
    placeholderText: placeholder,
    popperPlacement: placement,
    showPopperArrow: false,
    shouldCloseOnSelect: shouldCloseOnSelect && !['month', 'year'].includes(mode),
    portalId: portalID
  }, restProps));
});
DatePicker.defaultProps = {
  placement: 'bottom-end',
  shouldCloseOnSelect: true
};
export default /*#__PURE__*/React.memo(DatePicker);