@talend/react-components/lib/DateTimePickers/InputDatePicker/InputDatePicker.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InputDatePicker;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactPopper = require("react-popper");
var _utils = require("@talend/utils");
var _FocusManager = _interopRequireDefault(require("../../FocusManager"));
var _reactA11y = require("@talend/react-a11y");
var _Date = _interopRequireDefault(require("../Date"));
var _TimeZone = _interopRequireDefault(require("../TimeZone"));
var _useInputPickerHandlers = _interopRequireDefault(require("../hooks/useInputPickerHandlers"));
var _InputDatePickerModule = _interopRequireDefault(require("./InputDatePicker.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PROPS_TO_OMIT_FOR_INPUT = ['t', 'id', 'dateFormat', 'required', 'value', 'useUTC', 'onBlur', 'onChange', 'timezone', 'hideTimezone', 'startDate', 'endDate', 'isDisabledChecker'];
function onMouseDown(event) {
  event.stopPropagation();
}
function InputDatePicker(props) {
  const popoverId = `date-picker-${props.id || (0, _utils.randomUUID)()}`;
  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',
    placement: 'bottom-start'
  });
  const handlers = (0, _useInputPickerHandlers.default)({
    disabled: props.disabled,
    handleBlur: props.onBlur,
    handleChange: props.onChange,
    handleKeyDown: () => _reactA11y.focus.focusOnCalendar(popperElement)
  });
  const inputProps = (0, _lodash.omit)(props, PROPS_TO_OMIT_FOR_INPUT);
  const datePicker = [/*#__PURE__*/(0, _react.createElement)(_Date.default.Input, {
    ...inputProps,
    id: `${props.id}-input`,
    key: "input",
    inputRef: setReferenceElement
  }), handlers.showPicker &&
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
  (0, _react.createElement)("div", {
    id: popoverId,
    role: "button",
    className: _InputDatePickerModule.default.popper,
    ref: setPopperElement,
    style: styles.popper,
    ...attributes.popper,
    onMouseDown: onMouseDown,
    key: "popper"
  }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Date.default.Picker, {
    ...props
  })), !props.hideTimezone && props.timezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimeZone.default, {
    timezone: props.timezone
  }, "timezone")].filter(Boolean);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Date.default.Manager, {
    value: props.value,
    dateFormat: props.dateFormat,
    onChange: (...args) => handlers.onChange(...args, referenceElement),
    useUTC: props.useUTC,
    timezone: props.timezone,
    isDisabledChecker: props.isDisabledChecker,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.default, {
      className: (0, _classnames.default)(_InputDatePickerModule.default['date-picker'], 'date-picker'),
      onClick: handlers.onClick,
      onFocusIn: handlers.onFocus,
      onFocusOut: handlers.onBlur,
      onKeyDown: event => {
        handlers.onKeyDown(event, referenceElement);
      },
      children: datePicker
    })
  });
}
InputDatePicker.displayName = 'InputDatePicker';
InputDatePicker.defaultProps = {
  dateFormat: 'YYYY-MM-DD',
  required: true,
  useUTC: false
};
InputDatePicker.propTypes = {
  id: _propTypes.default.string.isRequired,
  dateFormat: _propTypes.default.string,
  onChange: _propTypes.default.func,
  onBlur: _propTypes.default.func,
  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  timezone: _propTypes.default.string,
  hideTimezone: _propTypes.default.bool,
  useUTC: _propTypes.default.bool,
  required: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  isDisabledChecker: _propTypes.default.func
};
//# sourceMappingURL=InputDatePicker.component.js.map