pouncejs/dist/esm/components/DateRangeInput/DoubleTextInput.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import Flex from '../Flex';
import { slugify } from '../../utils/helpers';
import { InputControl, InputElement, InputLabel } from '../utils/Input';
import { noop } from '../../utils/helpers';

var getIdentifier = function getIdentifier(id, name, label, suffix) {
  if (id) {
    return id + "-" + suffix;
  }

  if (name) {
    return name + "-" + suffix;
  }

  return slugify(label) + "-" + suffix;
};

var DoubleTextInput = /*#__PURE__*/React.forwardRef(function DoubleTextInput(_ref, ref) {
  var labelFrom = _ref.labelFrom,
      labelTo = _ref.labelTo,
      invalid = _ref.invalid,
      required = _ref.required,
      disabled = _ref.disabled,
      id = _ref.id,
      hidden = _ref.hidden,
      name = _ref.name,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
      from = _ref.from,
      to = _ref.to,
      placeholderFrom = _ref.placeholderFrom,
      placeholderTo = _ref.placeholderTo,
      _ref$onChangeFrom = _ref.onChangeFrom,
      onChangeFrom = _ref$onChangeFrom === void 0 ? noop : _ref$onChangeFrom,
      _ref$onChangeTo = _ref.onChangeTo,
      onChangeTo = _ref$onChangeTo === void 0 ? noop : _ref$onChangeTo,
      rest = _objectWithoutPropertiesLoose(_ref, ["labelFrom", "labelTo", "invalid", "required", "disabled", "id", "hidden", "name", "variant", "from", "to", "placeholderFrom", "placeholderTo", "onChangeFrom", "onChangeTo"]);

  var identifierFrom = getIdentifier(id, name, labelFrom, 'from');
  var identifierTo = getIdentifier(id, name, labelTo, 'to');
  return /*#__PURE__*/React.createElement(Box, {
    position: "relative",
    as: "fieldset"
  }, /*#__PURE__*/React.createElement(InputControl, {
    invalid: invalid,
    disabled: disabled,
    required: required,
    hidden: hidden,
    variant: variant
  }, /*#__PURE__*/React.createElement(Flex, {
    align: "center"
  }, /*#__PURE__*/React.createElement(Box, {
    position: "relative"
  }, /*#__PURE__*/React.createElement(InputElement, _extends({
    as: "input",
    type: "text",
    id: identifierFrom,
    name: identifierFrom,
    value: from
  }, rest, {
    placeholder: placeholderFrom,
    onChange: onChangeFrom,
    ref: ref
  })), /*#__PURE__*/React.createElement(InputLabel, {
    raised: !!from,
    htmlFor: identifierFrom
  }, labelFrom)), /*#__PURE__*/React.createElement(Box, {
    position: "relative"
  }, /*#__PURE__*/React.createElement(InputElement, _extends({
    as: "input",
    type: "text",
    id: identifierTo,
    name: identifierTo,
    value: to
  }, rest, {
    placeholder: placeholderTo,
    onChange: onChangeTo,
    ref: ref
  })), /*#__PURE__*/React.createElement(InputLabel, {
    raised: !!to,
    htmlFor: identifierTo
  }, labelTo)))));
});
export default /*#__PURE__*/React.memo(DoubleTextInput);