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

Set of react components.

import { useEffect, useMemo, useRef, useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Form, SizedIcon } from '@talend/design-system';
import getDefaultT from '../../translate';
import DateTimeRange from '../DateTimeRange';
import { DateTimeRangeContext } from '../DateTimeRange/Context';
import InputDateTimePicker from '../InputDateTimePicker';
import theme from './InputDateTimeRangePicker.module.scss';
import { debounce, omit } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PROPS_TO_OMIT_FOR_INPUT = ['id', 'dateFormat', 'onBlur', 'onChange', 'startDateTime', 'endDateTime', 'isDisabledChecker'];
function InputDateTimeRangePicker(props) {
  const {
    id,
    dateFormat,
    useSeconds,
    onChange,
    onBlur,
    inline
  } = props;
  const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
  const [vertical, setVertical] = useState(false);
  const containerRef = useRef();
  const isDisplayInline = !!inline;
  const className = classnames({
    'range-picker': !vertical,
    [theme['range-picker']]: !vertical,
    'range-picker-vertical': vertical && !isDisplayInline,
    [theme['range-picker-vertical']]: vertical && !isDisplayInline,
    'date-time-range-picker-inline': isDisplayInline,
    [theme['date-time-range-picker-inline']]: isDisplayInline
  });
  const showHorizontalAndTest = useMemo(() => {
    return function showHorizontal() {
      if (vertical) {
        setVertical(false);
      }
      // delay for the display to update
      setTimeout(() => {
        var _rangeContainer$offse;
        const rangeContainer = containerRef.current;
        if (rangeContainer && rangeContainer.scrollWidth > ((_rangeContainer$offse = rangeContainer.offsetParent) === null || _rangeContainer$offse === void 0 ? void 0 : _rangeContainer$offse.offsetWidth)) {
          setVertical(true);
        }
      });
    };
  }, [vertical]);
  useEffect(() => {
    const resizeListener = window.addEventListener('resize', debounce(showHorizontalAndTest, 200));
    return () => window.removeEventListener('resize', resizeListener);
  }, [showHorizontalAndTest]);
  useEffect(() => {
    showHorizontalAndTest();
  }, []);
  return /*#__PURE__*/_jsx(DateTimeRange.Manager, {
    startDateTime: props.startDateTime,
    endDateTime: props.endDateTime,
    onChange: onChange,
    children: /*#__PURE__*/_jsx(DateTimeRangeContext.Consumer, {
      children: ({
        startDateTime,
        endDateTime,
        onStartChange,
        onEndChange
      }) => /*#__PURE__*/_jsxs("div", {
        className: className,
        ref: containerRef,
        children: [/*#__PURE__*/_jsxs("div", {
          className: "range-input",
          "data-testid": "range-start",
          children: [/*#__PURE__*/_jsx(Form.Label, {
            htmlFor: props.id,
            children: props.t('TC_DATE_PICKER_RANGE_FROM', {
              defaultValue: 'From'
            })
          }), /*#__PURE__*/_jsx(InputDateTimePicker, {
            ...inputProps,
            id: `${id}-start`,
            dateFormat: dateFormat,
            useSeconds: useSeconds,
            value: startDateTime,
            endDate: endDateTime,
            onChange: onStartChange,
            onBlur: onBlur,
            defaultTimeValue: props.defaultTimeStart
          })]
        }), /*#__PURE__*/_jsx("span", {
          className: classnames(theme.arrow, 'arrow'),
          children: /*#__PURE__*/_jsx(SizedIcon, {
            name: vertical ? 'arrow-bottom' : 'arrow-right',
            size: "S"
          })
        }), /*#__PURE__*/_jsxs("div", {
          className: "range-input",
          "data-testid": "range-end",
          children: [/*#__PURE__*/_jsx(Form.Label, {
            htmlFor: props.id,
            children: props.t('TC_DATE_PICKER__RANGE_TO', {
              defaultValue: 'To'
            })
          }), /*#__PURE__*/_jsx(InputDateTimePicker, {
            ...inputProps,
            id: `${id}-end`,
            dateFormat: dateFormat,
            useSeconds: useSeconds,
            value: endDateTime,
            startDate: startDateTime,
            onChange: onEndChange,
            onBlur: onBlur,
            defaultTimeValue: props.defaultTimeEnd
          })]
        })]
      })
    })
  });
}
InputDateTimeRangePicker.defaultProps = {
  dateFormat: 'YYYY-MM-DD',
  t: getDefaultT()
};
InputDateTimeRangePicker.propTypes = {
  id: PropTypes.string.isRequired,
  dateFormat: PropTypes.string,
  useSeconds: PropTypes.bool,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  defaultTimeStart: PropTypes.shape({
    hours: PropTypes.string.isRequired,
    minutes: PropTypes.string.isRequired,
    seconds: PropTypes.string
  }),
  defaultTimeEnd: PropTypes.shape({
    hours: PropTypes.string.isRequired,
    minutes: PropTypes.string.isRequired,
    seconds: PropTypes.string
  }),
  startDateTime: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
  endDateTime: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
  inline: PropTypes.string,
  t: PropTypes.func
};
export default InputDateTimeRangePicker;
//# sourceMappingURL=InputDateTimeRangePicker.component.js.map