@talend/react-components/lib/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactPopper = require("react-popper");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactA11y = require("@talend/react-a11y");
var _utils = require("@talend/utils");
var _FocusManager = _interopRequireDefault(require("../../../FocusManager"));
var _DateTime = _interopRequireDefault(require("../DateTime"));
var _Context = require("../DateTime/Context");
var _InputDateTimePickerModule = _interopRequireDefault(require("./InputDateTimePicker.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable jsx-a11y/no-static-element-interactions */

const PROPS_TO_OMIT_FOR_INPUT = ['dateFormat', 'formMode', 'id', 'required', 'selectedDateTime', 'useSeconds', 'useTime', 'useUTC', 'onBlur', 'onChange', 'hybridMode', 'isDisabledChecker'];
function onMouseDown(event) {
  event.stopPropagation();
}
function InputDateTimePicker(props) {
  const containerRef = (0, _react.useRef)(null);
  const [showPicker, setShowPicker] = (0, _react.useState)(false);
  const [picked, setPicked] = (0, _react.useState)(false);
  const [referenceElement, setReferenceElement] = (0, _react.useState)(null);
  const [popperElement, setPopperElement] = (0, _react.useState)(null);
  const {
    styles,
    attributes
  } = (0, _reactPopper.usePopper)(referenceElement, popperElement, {
    modifiers: [{
      name: 'hide',
      enabled: false
    }, {
      name: 'preventOverflow',
      enabled: false
    }],
    strategy: 'fixed',
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    placement: getPopperPlacement()
  });
  const popoverId = `date-time-picker-${props.id || (0, _utils.randomUUID)()}`;
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  const openPicker = isPicked => setPickerVisibility(true, isPicked);
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  const closePicker = isPicked => setPickerVisibility(false, isPicked);
  function onKeyDown(event, {
    onReset
  }) {
    switch (event.key) {
      case 'Esc':
      case 'Escape':
        onReset();
        referenceElement.focus();
        closePicker();
        break;
      case 'Down':
      case 'ArrowDown':
        if (event.target !== referenceElement) {
          return;
        }
        if (showPicker) {
          _reactA11y.focus.focusOnCalendar(containerRef.current);
        } else {
          openPicker();
        }
        break;
      default:
        break;
    }
  }
  function onBlur(event, {
    onReset
  }) {
    onReset();
    closePicker(false);
    if (props.onBlur) {
      props.onBlur(event);
    }
  }
  function onFocus() {
    if (!picked) {
      openPicker();
    }
  }
  function onClick() {
    openPicker();
  }
  function onChange(event, payload) {
    props.onChange(event, payload);
    if (props.formMode || !props.formMode && !props.useTime && payload.origin !== 'INPUT') {
      referenceElement.focus();
      closePicker(true);
    }
  }
  function getPopperPlacement() {
    const input = referenceElement;
    if (input) {
      const inputDimensions = input.getBoundingClientRect();
      if (inputDimensions.left > window.innerWidth / 2) {
        return 'bottom-end';
      }
    }
    return 'bottom-start';
  }
  function setPickerVisibility(isShown, isPicked) {
    if (props.readOnly) {
      return;
    }
    setShowPicker(isShown);
    setPicked(isPicked);
  }
  const inputProps = (0, _lodash.omit)(props, PROPS_TO_OMIT_FOR_INPUT);
  const dateTimePicker = [/*#__PURE__*/(0, _react.createElement)(_DateTime.default.Input, {
    ...inputProps,
    id: `${props.id}-input`,
    key: "input",
    inputRef: setReferenceElement
  }), showPicker && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    id: popoverId,
    className: _InputDateTimePickerModule.default.popper,
    onMouseDown: onMouseDown,
    ref: setPopperElement,
    style: styles.popper,
    ...attributes.popper,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTime.default.Picker, {}), props.formMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTime.default.Validation, {})]
  }, "popper")].filter(Boolean);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTime.default.Manager, {
    dateFormat: props.dateFormat,
    formMode: props.formMode,
    id: props.id,
    required: props.required,
    selectedDateTime: props.selectedDateTime,
    useSeconds: props.useSeconds,
    useTime: props.useTime,
    useUTC: props.useUTC,
    hybridMode: props.hybridMode,
    onChange: onChange,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.DateTimeContext.Consumer, {
      children: ({
        formManagement
      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.default, {
        divRef: containerRef,
        onClick: onClick,
        onFocusIn: onFocus,
        onFocusOut: event => {
          onBlur(event, formManagement);
        },
        onKeyDown: event => {
          onKeyDown(event, formManagement);
        },
        children: props.formMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
          onSubmit: formManagement.onSubmit,
          children: dateTimePicker
        }, "form") : dateTimePicker
      })
    })
  });
}
InputDateTimePicker.defaultProps = {
  dateFormat: 'YYYY-MM-DD',
  hybridMode: false,
  useSeconds: false,
  useTime: false,
  useUTC: false,
  formMode: false,
  // default behaviour is to forbid empty values
  required: true
};
InputDateTimePicker.propTypes = {
  id: _propTypes.default.string.isRequired,
  selectedDateTime: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  onChange: _propTypes.default.func,
  onBlur: _propTypes.default.func,
  readOnly: _propTypes.default.bool,
  dateFormat: _propTypes.default.string,
  useSeconds: _propTypes.default.bool,
  useTime: _propTypes.default.bool,
  useUTC: _propTypes.default.bool,
  hybridMode: _propTypes.default.bool,
  formMode: _propTypes.default.bool,
  required: _propTypes.default.bool
};
var _default = exports.default = InputDateTimePicker;
//# sourceMappingURL=InputDateTimePicker.component.js.map