@s-ui/react-atom-input/lib/Input/Component/index.js

> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["as", "disabled", "readOnly", "hideInput", "noBorder", "id", "name", "onBlur", "onFocus", "onPaste", "onCopy", "placeholder", "reference", "size", "errorState", "state", "type", "value", "charsSize", "tabIndex", "ariaLabel", "maxLength", "minLength", "defaultValue", "min", "max", "step", "autoComplete", "autoFocus", "onChange", "onEnter", "onEnterKey", "onKeyDown", "onKeyPress", "required", "pattern", "inputMode", "shape", "children", "className"];
import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs';
import PolymorphicElement from '@s-ui/react-primitive-polymorphic-element';
import { getClassNames, INPUT_SHAPES, INPUT_STATES, noop, SIZES } from '../../config.js';
import isValidInputValue from '../../helpers/isValidInputValue.js';
import { jsx as _jsx } from "react/jsx-runtime";
var Input = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var _ref$as = _ref.as,
    as = _ref$as === void 0 ? 'input' : _ref$as,
    disabled = _ref.disabled,
    readOnly = _ref.readOnly,
    hideInput = _ref.hideInput,
    noBorder = _ref.noBorder,
    id = _ref.id,
    name = _ref.name,
    onBlur = _ref.onBlur,
    onFocus = _ref.onFocus,
    onPaste = _ref.onPaste,
    onCopy = _ref.onCopy,
    placeholder = _ref.placeholder,
    reference = _ref.reference,
    size = _ref.size,
    errorState = _ref.errorState,
    state = _ref.state,
    type = _ref.type,
    value = _ref.value,
    charsSize = _ref.charsSize,
    tabIndex = _ref.tabIndex,
    ariaLabel = _ref.ariaLabel,
    maxLength = _ref.maxLength,
    minLength = _ref.minLength,
    defaultValue = _ref.defaultValue,
    min = _ref.min,
    max = _ref.max,
    step = _ref.step,
    autoComplete = _ref.autoComplete,
    autoFocus = _ref.autoFocus,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
    _ref$onEnter = _ref.onEnter,
    onEnter = _ref$onEnter === void 0 ? noop : _ref$onEnter,
    _ref$onEnterKey = _ref.onEnterKey,
    onEnterKey = _ref$onEnterKey === void 0 ? 'Enter' : _ref$onEnterKey,
    _ref$onKeyDown = _ref.onKeyDown,
    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown,
    _ref$onKeyPress = _ref.onKeyPress,
    onKeyPress = _ref$onKeyPress === void 0 ? noop : _ref$onKeyPress,
    required = _ref.required,
    pattern = _ref.pattern,
    inputMode = _ref.inputMode,
    shape = _ref.shape,
    children = _ref.children,
    classNameProp = _ref.className,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var changeHandler = function changeHandler(ev) {
    var _ev$target = ev.target,
      value = _ev$target.value,
      name = _ev$target.name;
    onChange(ev, {
      value: value,
      name: name
    });
  };
  var handleKeyDown = function handleKeyDown(ev) {
    var _ev$target2 = ev.target,
      value = _ev$target2.value,
      name = _ev$target2.name;
    var key = ev.key;
    if (isValidInputValue(event, {
      type: type,
      onEnterKey: onEnterKey
    })) {
      onKeyDown(ev, {
        value: value,
        name: name
      });
      if (typeof onEnterKey === 'string') {
        key === onEnterKey && onEnter(ev, {
          value: value,
          name: name
        });
      } else if (Array.isArray(onEnterKey)) {
        onEnterKey.includes(key) && onEnter(ev, {
          value: value,
          name: name
        });
      }
    }
  };
  var className = getClassNames({
    size: size,
    charsSize: charsSize,
    hideInput: hideInput,
    noBorder: noBorder,
    readOnly: readOnly,
    errorState: errorState,
    state: state,
    shape: shape,
    className: classNameProp
  });
  return /*#__PURE__*/_jsx(PolymorphicElement, _extends({
    as: as,
    className: className,
    tabIndex: tabIndex,
    "aria-label": ariaLabel,
    disabled: disabled,
    readOnly: readOnly,
    id: id,
    name: name,
    onChange: changeHandler,
    onFocus: onFocus,
    onPaste: onPaste,
    onCopy: onCopy,
    onBlur: onBlur,
    onKeyDown: handleKeyDown,
    onKeyPress: onKeyPress,
    placeholder: placeholder,
    ref: useMergeRefs.apply(void 0, [reference, forwardedRef].filter(Boolean)),
    type: type,
    value: value,
    size: charsSize,
    defaultValue: defaultValue,
    maxLength: maxLength,
    minLength: minLength,
    max: max,
    min: min,
    step: step,
    autoComplete: autoComplete,
    autoFocus: autoFocus,
    required: required,
    pattern: pattern,
    inputMode: inputMode,
    children: as === 'input' ? undefined : children
  }, props));
});
export default Input;
export { SIZES as inputSizes, INPUT_STATES as inputStates };