@pantheon-systems/design-toolkit-react/dist/Forms/Combobox/Input.js

Pantheon's React Design Toolkit

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { faSearch } from '@fortawesome/pro-light-svg-icons';
import { useField } from 'informed';
import PropTypes from 'prop-types';
import { Fragment } from 'react';
import Icon from '../../Icons/Icon.js';
import ToggleButton from './ToggleButton.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var _excluded = ["disabled", "field", "getToggleButtonProps", "hideDownButton", "initialValue", "inputRef", "noBorder", "onBlur", "toggleButtonLabelText", "userInput", "validate", "validateOnBlur", "validateOnChange", "validateOnMount"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Input = function Input(props) {
  var disabled = props.disabled;
    props.field;
    var getToggleButtonProps = props.getToggleButtonProps,
    hideDownButton = props.hideDownButton;
    props.initialValue;
    var inputRef = props.inputRef,
    noBorder = props.noBorder,
    onBlur = props.onBlur,
    toggleButtonLabelText = props.toggleButtonLabelText,
    userInput = props.userInput;
    props.validate;
    var validateOnBlur = props.validateOnBlur,
    validateOnChange = props.validateOnChange,
    validateOnMount = props.validateOnMount,
    rest = _objectWithoutProperties(props, _excluded);
  /**
   * if you need a custom onBlur or onChange etc, get it from 'props' because Informed
   * will not pass it on through the 'userProps' that you get back from useField
   */

  var _useField = useField(props),
    fieldApi = _useField.fieldApi,
    fieldState = _useField.fieldState;
  var setTouched = fieldApi.setTouched;
  var error = fieldState.error,
    touched = fieldState.touched,
    value = fieldState.value;
  var validation = validateOnBlur || validateOnChange || validateOnMount;
  var statusClass = value && !error && touched && validation ? 'success' : value && error && 'error';
  var handleBlur = function handleBlur(event) {
    onBlur(event);
    setTouched(true);
  };
  var handleClick = function handleClick() {
    setTouched(true);
  };
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Icon, {
      className: "absolute w-4 h-10 mx-2 my-0",
      icon: faSearch
    }), /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({}, rest), {}, {
      className: "custom-field ".concat(noBorder ? 'no-border' : '', " ").concat(statusClass || '', " custom-input"),
      disabled: disabled,
      onBlur: handleBlur,
      onClick: handleClick,
      ref: inputRef,
      type: "text",
      value: userInput
    })), !hideDownButton && /*#__PURE__*/jsx(ToggleButton, {
      disabled: disabled,
      getToggleButtonProps: getToggleButtonProps,
      setTouched: setTouched,
      toggleButtonLabelText: toggleButtonLabelText
    }), error && /*#__PURE__*/jsx("small", {
      className: "text-red-3",
      children: error
    })]
  });
};
Input.defaultProps = {
  disabled: false,
  hideDownButton: false,
  initialValue: '',
  noBorder: false,
  onBlur: function onBlur() {},
  toggleButtonLabelText: undefined,
  userInput: ''
};
Input.propTypes = {
  disabled: PropTypes.bool,
  field: PropTypes.string.isRequired,
  getToggleButtonProps: PropTypes.func.isRequired,
  hideDownButton: PropTypes.bool,
  initialValue: PropTypes.string,
  inputRef: PropTypes.func.isRequired,
  noBorder: PropTypes.bool,
  onBlur: PropTypes.func,
  toggleButtonLabelText: PropTypes.string,
  userInput: PropTypes.string,
  validate: PropTypes.func.isRequired,
  validateOnBlur: PropTypes.bool.isRequired,
  validateOnChange: PropTypes.bool.isRequired,
  validateOnMount: PropTypes.bool.isRequired
};
var Input$1 = Input;

export { Input$1 as default };
//# sourceMappingURL=Input.js.map