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

Set of react components.

import { forwardRef, useContext } from 'react';
import DebounceInput from 'react-debounce-input';
import PropTypes from 'prop-types';
import { Form } from '@talend/design-system';
import InputSizer from '../../shared/InputSizer';
import { DateRangeContext } from '../Context';
import { omit } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const OMIT_INPUT_PROPS = ['date', 'onChange', 'onFocus', 'label', 'minWidth'];
const Input = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    date,
    onChange,
    onFocus,
    label,
    minWidth
  } = props;
  const {
    inputManagement
  } = useContext(DateRangeContext);
  const {
    placeholder
  } = inputManagement;
  return /*#__PURE__*/_jsxs("div", {
    className: "range-input",
    children: [label && /*#__PURE__*/_jsx(Form.Label, {
      htmlFor: props.id,
      children: label
    }), /*#__PURE__*/_jsx(InputSizer, {
      inputText: placeholder,
      minWidth: minWidth,
      children: width => /*#__PURE__*/_jsx(DebounceInput, {
        autoComplete: "off",
        debounceTimeout: 300,
        element: Form.Text,
        hideLabel: true,
        placeholder: placeholder,
        value: date.textInput,
        style: {
          width
        },
        onChange: onChange,
        onFocus: onFocus,
        inputRef: ref,
        ...omit(props, OMIT_INPUT_PROPS)
      })
    })]
  });
});
Input.displayName = 'DateRange.Input';
Input.propTypes = {
  id: PropTypes.string.isRequired,
  date: PropTypes.shape({
    textInput: PropTypes.string
  }),
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  label: PropTypes.string,
  minWidth: PropTypes.number
};
export default Input;
//# sourceMappingURL=Input.component.js.map