informed/dist/esm/components/form-fields/Input.js

A lightweight framework and utility for building powerful forms in React applications

import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React from 'react';
import { useField } from '../../hooks/useField.js';

var _excluded = ["label", "id"];
var Input = /*#__PURE__*/React.memo(function (props) {
  var _useField = useField(props),
    render = _useField.render,
    userProps = _useField.userProps,
    ref = _useField.ref,
    fieldState = _useField.fieldState,
    fieldApi = _useField.fieldApi;
  var setValue = fieldApi.setValue,
    setTouched = fieldApi.setTouched,
    setFocused = fieldApi.setFocused;
  var maskedValue = fieldState.maskedValue,
    showError = fieldState.showError,
    error = fieldState.error;
  var label = userProps.label,
    id = userProps.id,
    rest = _objectWithoutProperties(userProps, _excluded);
  return render( /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
    htmlFor: id
  }, label) : null, /*#__PURE__*/React.createElement("input", _extends({
    ref: ref,
    id: id
  }, rest, {
    value: !maskedValue && maskedValue !== 0 ? '' : maskedValue,
    onChange: function onChange(e) {
      setValue(e.target.value, e);
    },
    onBlur: function onBlur(e) {
      setTouched(true, e);
    },
    onFocus: function onFocus(e) {
      setFocused(true, e);
    },
    "aria-invalid": !!showError,
    "aria-describedby": "".concat(id, "-error")
  })), showError ? /*#__PURE__*/React.createElement("small", {
    role: "alert",
    id: "".concat(id, "-error")
  }, error) : null));
});

export { Input };