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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InputTimePicker;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactPopper = require("react-popper");
var _utils = require("@talend/utils");
var _FocusManager = _interopRequireDefault(require("../../FocusManager"));
var _Time = _interopRequireDefault(require("../Time"));
var _TimeZone = _interopRequireDefault(require("../TimeZone"));
var _InputTimePickerModule = _interopRequireDefault(require("./InputTimePicker.module.scss"));
var _useInputPickerHandlers = _interopRequireDefault(require("../hooks/useInputPickerHandlers"));
var _timePickerGesture = _interopRequireDefault(require("../gesture/timePickerGesture"));
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', 'required', 'value', 'useSeconds', 'onBlur', 'onChange', 'timezone'];
function InputTimePicker(props) {
  const popoverId = `time-picker-${props.id || (0, _utils.randomUUID)()}`;
  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)({
    disabled: props.disabled,
    handleBlur: props.onBlur,
    handleChange: props.onChange,
    handleKeyDown: () => (0, _timePickerGesture.default)(containerRef.current)
  });
  const inputProps = (0, _lodash.omit)(props, PROPS_TO_OMIT_FOR_INPUT);
  const timePicker = [/*#__PURE__*/(0, _react.createElement)(_Time.default.Input, {
    ...inputProps,
    id: `${props.id}-input`,
    key: "input",
    inputRef: setReferenceElement
  }), handlers.showPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    id: popoverId,
    className: _InputTimePickerModule.default.popper,
    ref: setPopperElement,
    style: styles.popper,
    ...attributes.popper,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Time.default.Picker, {
      ...props
    })
  }, "popper"), props.timezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimeZone.default, {
    timezone: props.timezone
  }, "timezone")].filter(Boolean);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Time.default.Manager, {
    value: props.value,
    useSeconds: props.useSeconds,
    timezone: props.timezone,
    onChange: (...args) => handlers.onChange(...args, referenceElement),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.default, {
      className: (0, _classnames.default)(_InputTimePickerModule.default['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.default.string.isRequired,
  useSeconds: _propTypes.default.bool,
  onChange: _propTypes.default.func,
  onBlur: _propTypes.default.func,
  timezone: _propTypes.default.string,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  disabled: _propTypes.default.bool
};
InputTimePicker.defaultProps = {
  useSeconds: false
};
//# sourceMappingURL=InputTimePicker.component.js.map