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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InputDateRangePicker;
var _react = require("react");
var _reactPopper = require("react-popper");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _reactA11y = require("@talend/react-a11y");
var _FocusManager = _interopRequireDefault(require("../../FocusManager"));
var _translate = _interopRequireDefault(require("../../translate"));
var _DateRange = _interopRequireDefault(require("../DateRange"));
var _Context = require("../DateRange/Context");
var _useInputPickerHandlers = _interopRequireDefault(require("../hooks/useInputPickerHandlers"));
var _InputDateRangePickerModule = _interopRequireDefault(require("./InputDateRangePicker.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 = ['id', 'dateFormat', 'onBlur', 'onChange', 't', 'isDisabledChecker'];
function InputDateRangePicker(props) {
  const popoverId = `date-range-picker-${props.id}`;
  const startDateInputRef = (0, _react.useRef)(null);
  const endDateInputRef = (0, _react.useRef)(null);
  const containerRef = (0, _react.useRef)(null);
  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)({
    handleBlur: props.onBlur,
    handleChange: props.onChange,
    handleKeyDown: () => _reactA11y.focus.focusOnCalendar(containerRef.current)
  });
  const inputProps = (0, _lodash.omit)(props, PROPS_TO_OMIT_FOR_INPUT);
  function getFocusedInput() {
    if (referenceElement === startDateInputRef.current) {
      return 'startDate';
    }
    if (referenceElement === endDateInputRef.current) {
      return 'endDate';
    }
    return null;
  }
  function onChange(event, payload) {
    if (payload.origin === 'START_PICKER' && endDateInputRef) {
      endDateInputRef.current.focus();
    }
    handlers.onChange(event, payload, referenceElement);
  }
  const isDisplayInline = !!props.inline;
  const className = (0, _classnames.default)('date-picker', _InputDateRangePickerModule.default['date-picker'], {
    'date-range-picker-inline': isDisplayInline,
    [_InputDateRangePickerModule.default['date-range-picker-inline']]: isDisplayInline
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRange.default.Manager, {
    startDate: props.startDate,
    endDate: props.endDate,
    dateFormat: props.dateFormat,
    onChange: onChange,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.DateRangeContext.Consumer, {
      children: ({
        inputManagement,
        startDate,
        endDate
      }) => {
        const {
          onStartChange,
          onEndChange
        } = inputManagement;
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusManager.default, {
          className: className,
          divRef: containerRef,
          onClick: handlers.onClick,
          onFocusIn: handlers.onFocus,
          onFocusOut: handlers.onBlur,
          onKeyDown: event => {
            handlers.onKeyDown(event, referenceElement);
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRange.default.Input, {
            ...inputProps,
            id: `${props.id}-start-input`,
            date: startDate,
            onChange: onStartChange,
            onFocus: () => setReferenceElement(startDateInputRef.current),
            label: props.t('TC_DATE_PICKER_RANGE_FROM', {
              defaultValue: 'From'
            }),
            ref: startDateInputRef
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: (0, _classnames.default)(_InputDateRangePickerModule.default.arrow, 'arrow'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SizedIcon, {
              name: "arrow-right",
              size: "S"
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRange.default.Input, {
            ...inputProps,
            id: `${props.id}-end-input`,
            date: endDate,
            onChange: onEndChange,
            onFocus: () => setReferenceElement(endDateInputRef.current),
            label: props.t('TC_DATE_PICKER__RANGE_TO', {
              defaultValue: 'To'
            }),
            ref: endDateInputRef
          }), handlers.showPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            id: popoverId,
            className: _InputDateRangePickerModule.default.popper,
            ref: setPopperElement,
            style: styles.popper,
            ...attributes.popper,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRange.default.Picker, {
              ...props,
              focusedInput: getFocusedInput()
            })
          })]
        });
      }
    })
  });
}
InputDateRangePicker.displayName = 'InputDateRangePicker';
InputDateRangePicker.defaultProps = {
  dateFormat: 'YYYY-MM-DD',
  t: (0, _translate.default)()
};
InputDateRangePicker.propTypes = {
  id: _propTypes.default.string.isRequired,
  dateFormat: _propTypes.default.string,
  onChange: _propTypes.default.func,
  onBlur: _propTypes.default.func,
  startDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  endDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  inline: _propTypes.default.bool,
  t: _propTypes.default.func
};
//# sourceMappingURL=InputDateRangePicker.component.js.map