reactstrap-date-picker/lib/calendar/useCalendarProps.cjs

Reactstrap based, zero dependencies, date picker

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCalendarProps = void 0;
var _react = require("react");
var _useCustomEvents = require("../input/useCustomEvents");
var _getMaybeFuncValue = require("../util/getMaybeFuncValue");
// About autoFocus
// We could handle by our own through ref callbacks
//   (https://blog.maisie.ink/react-ref-autofocus/)
// But let's just use react's autoFocus attribute by now

var useCalendarProps = (calendarPlacement, inputRef, autoFocus, onBlur, onFocus) => {
  var [open, setOpen] = (0, _react.useState)(false);
  var [placement, setPlacement] = (0, _react.useState)((0, _getMaybeFuncValue.getMaybeFuncValue)(calendarPlacement));
  var hiddenInputRef = (0, _react.useRef)();
  var overlayContainerRef = (0, _react.useRef)();
  var popoverRef = (0, _react.useRef)();
  var controlInputRef = typeof inputRef == 'object' ? inputRef : (0, _react.useRef)(inputRef); // eslint-disable-line react-hooks/rules-of-hooks

  // NOTE: do we want to use the controlInput or  the hiddenInput here?
  var [customOnBlur, customOnFocus] = (0, _useCustomEvents.useCustomEvents)(/*hiddenInputRef*/controlInputRef, onBlur, onFocus);
  var isOutside = (0, _react.useCallback)(event => {
    var outOfCalendar = (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) == undefined || !(popoverRef !== null && popoverRef !== void 0 && popoverRef.current.contains(event.target));
    var outOfControlInput = (controlInputRef === null || controlInputRef === void 0 ? void 0 : controlInputRef.current) == undefined || !controlInputRef.current.contains(event.target);
    var isOut = outOfCalendar && outOfControlInput;
    return isOut;
  }, [popoverRef, controlInputRef]);

  // Control the click outside
  (0, _react.useEffect)(() => {
    function handleClickOutside(event) {
      event.stopPropagation();
      if (open) {
        if (isOutside(event)) {
          setOpen(false);
          customOnBlur();
        }
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [open, isOutside, customOnBlur]);

  //
  //  This callback is bound to Calendar.Popover's toggle() method,
  //    but seems it's unneccesary 
  //  Leaving, by now, this testimonial comments
  //
  //  const handleHide = () => {
  //    let inputFocused = false
  //    try {
  //      inputFocused= controlInputRef.current==document.activeElement
  //    } catch(e) {}
  //    
  //    if (inputFocused) {
  //      return
  //    }
  //    setOpen(false)
  //    customOnBlur()
  //  }

  var handleFocus = (0, _react.useCallback)(() => {
    var nPlacement = (0, _getMaybeFuncValue.getMaybeFuncValue)(calendarPlacement);
    setPlacement(nPlacement);
    setOpen(true);
    customOnFocus();
  }, [calendarPlacement, customOnFocus]);
  var handleBlur = (0, _react.useCallback)(event => {
    if (isOutside(event)) {
      setOpen(false);
      customOnBlur();
    }
  }, [isOutside, customOnBlur]);
  return [hiddenInputRef, overlayContainerRef, popoverRef, controlInputRef, open, placement, handleFocus, handleBlur];
};
exports.useCalendarProps = useCalendarProps;