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

Set of react components.

import { useState, createElement as _createElement } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { usePopper } from 'react-popper';
import { randomUUID } from '@talend/utils';
import FocusManager from '../../FocusManager';
import { focus } from '@talend/react-a11y';
import DatePicker from '../Date';
import TimeZone from '../TimeZone';
import useInputPickerHandlers from '../hooks/useInputPickerHandlers';
import theme from './InputDatePicker.module.scss';
import { omit } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
const PROPS_TO_OMIT_FOR_INPUT = ['t', 'id', 'dateFormat', 'required', 'value', 'useUTC', 'onBlur', 'onChange', 'timezone', 'hideTimezone', 'startDate', 'endDate', 'isDisabledChecker'];
function onMouseDown(event) {
  event.stopPropagation();
}
export default function InputDatePicker(props) {
  const popoverId = `date-picker-${props.id || randomUUID()}`;
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const {
    styles,
    attributes
  } = usePopper(referenceElement, popperElement, {
    modifiers: [{
      name: 'hide',
      enabled: false
    }, {
      name: 'preventOverflow',
      enabled: false
    }],
    strategy: 'fixed',
    placement: 'bottom-start'
  });
  const handlers = useInputPickerHandlers({
    disabled: props.disabled,
    handleBlur: props.onBlur,
    handleChange: props.onChange,
    handleKeyDown: () => focus.focusOnCalendar(popperElement)
  });
  const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
  const datePicker = [/*#__PURE__*/_createElement(DatePicker.Input, {
    ...inputProps,
    id: `${props.id}-input`,
    key: "input",
    inputRef: setReferenceElement
  }), handlers.showPicker &&
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
  _createElement("div", {
    id: popoverId,
    role: "button",
    className: theme.popper,
    ref: setPopperElement,
    style: styles.popper,
    ...attributes.popper,
    onMouseDown: onMouseDown,
    key: "popper"
  }, /*#__PURE__*/_jsx(DatePicker.Picker, {
    ...props
  })), !props.hideTimezone && props.timezone && /*#__PURE__*/_jsx(TimeZone, {
    timezone: props.timezone
  }, "timezone")].filter(Boolean);
  return /*#__PURE__*/_jsx(DatePicker.Manager, {
    value: props.value,
    dateFormat: props.dateFormat,
    onChange: (...args) => handlers.onChange(...args, referenceElement),
    useUTC: props.useUTC,
    timezone: props.timezone,
    isDisabledChecker: props.isDisabledChecker,
    children: /*#__PURE__*/_jsx(FocusManager, {
      className: classnames(theme['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.string.isRequired,
  dateFormat: PropTypes.string,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
  timezone: PropTypes.string,
  hideTimezone: PropTypes.bool,
  useUTC: PropTypes.bool,
  required: PropTypes.bool,
  disabled: PropTypes.bool,
  isDisabledChecker: PropTypes.func
};
//# sourceMappingURL=InputDatePicker.component.js.map