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

Set of react components.

import { useRef, 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 Time from '../Time';
import TimeZone from '../TimeZone';
import theme from './InputTimePicker.module.scss';
import useInputPickerHandlers from '../hooks/useInputPickerHandlers';
import focusOnTime from '../gesture/timePickerGesture';
import { omit } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
const PROPS_TO_OMIT_FOR_INPUT = ['id', 'required', 'value', 'useSeconds', 'onBlur', 'onChange', 'timezone'];
export default function InputTimePicker(props) {
  const popoverId = `time-picker-${props.id || randomUUID()}`;
  const containerRef = useRef(null);
  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: () => focusOnTime(containerRef.current)
  });
  const inputProps = omit(props, PROPS_TO_OMIT_FOR_INPUT);
  const timePicker = [/*#__PURE__*/_createElement(Time.Input, {
    ...inputProps,
    id: `${props.id}-input`,
    key: "input",
    inputRef: setReferenceElement
  }), handlers.showPicker && /*#__PURE__*/_jsx("div", {
    id: popoverId,
    className: theme.popper,
    ref: setPopperElement,
    style: styles.popper,
    ...attributes.popper,
    children: /*#__PURE__*/_jsx(Time.Picker, {
      ...props
    })
  }, "popper"), props.timezone && /*#__PURE__*/_jsx(TimeZone, {
    timezone: props.timezone
  }, "timezone")].filter(Boolean);
  return /*#__PURE__*/_jsx(Time.Manager, {
    value: props.value,
    useSeconds: props.useSeconds,
    timezone: props.timezone,
    onChange: (...args) => handlers.onChange(...args, referenceElement),
    children: /*#__PURE__*/_jsx(FocusManager, {
      className: classnames(theme['time-picker'], 'time-picker'),
      divRef: containerRef,
      onClick: handlers.onClick,
      onFocusIn: handlers.onFocus,
      onFocusOut: handlers.onBlur,
      onKeyDown: event => {
        handlers.onKeyDown(event, referenceElement, containerRef.current);
      },
      children: timePicker
    })
  });
}
InputTimePicker.displayName = 'InputTimePicker';
InputTimePicker.propTypes = {
  id: PropTypes.string.isRequired,
  useSeconds: PropTypes.bool,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  timezone: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  disabled: PropTypes.bool
};
InputTimePicker.defaultProps = {
  useSeconds: false
};
//# sourceMappingURL=InputTimePicker.component.js.map