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

Braineet design system

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
var _modal = require("../modal");
var _DatePickerHeader = _interopRequireDefault(require("./components/DatePickerHeader"));
var _DatePickerInput = _interopRequireDefault(require("./components/DatePickerInput"));
var _DatePicker = require("./DatePicker.utils");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "onChange", "placement", "locale", "placeholder", "portalId", "monthsShown", "customInput", "field", "form", "onCalendarClose", "shouldCloseOnSelect", "inputProps"];
/* eslint-disable import/no-extraneous-dependencies */
/**
 * https://reactdatepicker.com/
 * PropTypes: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L134
 */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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; }
var DatePicker = /*#__PURE__*/_react.default.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 = (0, _modal.useModalContext)();
  var _useState = (0, _react.useState)(value),
    date = _useState[0],
    setDate = _useState[1];
  var _useState2 = (0, _react.useState)('days'),
    mode = _useState2[0],
    setMode = _useState2[1];
  var _useState3 = (0, _react.useState)(date),
    displayDate = _useState3[0],
    setDisplayDate = _useState3[1];
  var datePickerRef = (0, _react.useRef)();
  _react.default.useImperativeHandle(ref, function () {
    return datePickerRef.current;
  });
  var focusInput = (0, _react.useCallback)(function () {
    var _datePickerRef$curren;
    (_datePickerRef$curren = datePickerRef.current) == null || _datePickerRef$curren.setFocus();
  }, [datePickerRef]);
  (0, _react.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 = (0, _DatePicker.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__*/(0, _jsxRuntime.jsx)(_DatePickerInput.default, _extends({
    focusInput: focusInput
  }, inputProps));
  var portalID = portalId || (modal == null ? void 0 : modal.modalID);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, _extends({
    ref: datePickerRef,
    selected: (0, _DatePicker.convertUTCToLocalDate)(date),
    onChange: handleChange,
    showMonthYearPicker: mode === 'month',
    showFourColumnMonthYearPicker: true,
    showYearPicker: mode === 'year',
    customInput: inputComponent,
    locale: locale,
    renderCustomHeader: function renderCustomHeader(p) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerHeader.default, _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
};
var _default = exports.default = /*#__PURE__*/_react.default.memo(DatePicker);