informed/dist/esm/components/form-fields/Select.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 = ["id", "onBlur", "multiple", "label", "options", "children"];
var Select = function Select(props) {
  var _useField = useField(props),
    render = _useField.render,
    userProps = _useField.userProps,
    fieldState = _useField.fieldState,
    fieldApi = _useField.fieldApi,
    ref = _useField.ref;
  var setValue = fieldApi.setValue,
    setTouched = fieldApi.setTouched;
  var value = fieldState.value,
    showError = fieldState.showError,
    error = fieldState.error;
  var id = userProps.id,
    _onBlur = userProps.onBlur,
    multiple = userProps.multiple,
    label = userProps.label,
    options = userProps.options,
    children = userProps.children,
    rest = _objectWithoutProperties(userProps, _excluded);
  var handleChange = function handleChange(e) {
    var selected = Array.from(ref.current).filter(function (option) {
      return option.selected;
    }).map(function (option) {
      return option.value;
    });
    setValue(multiple ? selected : selected[0] || '', e);
  };
  return render( /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
    htmlFor: id
  }, " ", label, " ") : null, /*#__PURE__*/React.createElement("select", _extends({}, rest, {
    id: id,
    multiple: multiple,
    ref: ref,
    value: value || (multiple ? [] : ''),
    "aria-invalid": !!showError,
    "aria-describedby": "".concat(id, "-error"),
    onChange: handleChange,
    onBlur: function onBlur(e) {
      setTouched(true);
      if (_onBlur) {
        _onBlur(e);
      }
    }
  }), options ? options.map(function (option) {
    return /*#__PURE__*/React.createElement("option", {
      key: option.value,
      value: option.value,
      disabled: option.disabled
    }, option.label);
  }) : children), showError ? /*#__PURE__*/React.createElement("small", {
    role: "alert",
    id: "".concat(id, "-error")
  }, error) : null));
};

export { Select };