@massds/mayflower-react/dist/InputText/index.mjs

React versions of Mayflower design system UI components

function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
/**
 * InputText module.
 * @module @massds/mayflower-react/InputText
 * @requires module:@massds/mayflower-assets/scss/01-atoms/error-msg
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from "react";
import PropTypes from "prop-types";
import ErrorMessage from "../ErrorMessage/index.mjs";
let InputText = /*#__PURE__*/function (_React$Component) {
  function InputText(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.state = {
      value: ''
    };
    _this.handleChange = _this.handleChange.bind(_this);
    return _this;
  }

  // eslint-disable-next-line camelcase
  _inheritsLoose(InputText, _React$Component);
  var _proto = InputText.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.defaultText
    });
  };
  _proto.handleChange = function handleChange(event) {
    const input = event.target.value;
    this.setState({
      value: input
    });
    // invokes custom function if passed in the component
    if (typeof this.props.onChange === 'function') {
      this.props.onChange(input);
    }
  };
  _proto.render = function render() {
    const _this$props = this.props,
      name = _this$props.name,
      id = _this$props.id,
      type = _this$props.type,
      placeholder = _this$props.placeholder,
      maxlength = _this$props.maxlength,
      pattern = _this$props.pattern,
      width = _this$props.width,
      required = _this$props.required,
      labelText = _this$props.labelText,
      hiddenLabel = _this$props.hiddenLabel,
      errorMsg = _this$props.errorMsg;
    const inputLabelClasses = ['ma__label'];
    if (labelText) {
      inputLabelClasses.push("ma__label--" + (required ? 'required' : 'optional'));
      if (hiddenLabel) {
        inputLabelClasses.push('ma__label--hidden');
      }
    }
    const inputClasses = ['ma__input'];
    if (required) {
      inputClasses.push('js-is-required');
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null, labelText && /*#__PURE__*/React.createElement("label", {
      htmlFor: id,
      className: inputLabelClasses.join(' ')
    }, labelText), /*#__PURE__*/React.createElement("input", {
      className: inputClasses.join(' '),
      name: name,
      id: id,
      type: type,
      placeholder: placeholder,
      "data-type": type,
      maxLength: maxlength || null,
      pattern: pattern || null,
      style: width ? {
        width: width + "px"
      } : null,
      onChange: this.handleChange,
      required: required,
      value: this.state.value
    }), errorMsg && /*#__PURE__*/React.createElement(ErrorMessage, {
      error: errorMsg,
      inputId: id
    }));
  };
  return InputText;
}(React.Component);
InputText.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Whether the label should be hidden or not */
  hiddenLabel: PropTypes.bool,
  /** The label text for the input field */
  labelText: PropTypes.string.isRequired,
  /** Whether the field is required or not */
  required: PropTypes.bool,
  /** The unique ID for the input field */
  id: PropTypes.string.isRequired,
  /** The name for the input field */
  name: PropTypes.string.isRequired,
  /** The type of the input field */
  type: PropTypes.string.isRequired,
  /** The max acceptable input length */
  maxlength: PropTypes.number,
  /** The pattern to filter input against, e.g. "[0-9]" for numbers only */
  pattern: PropTypes.string,
  /** The number of characters wide to make the input field */
  width: PropTypes.number,
  /** The placeholder text for the input field */
  placeholder: PropTypes.string,
  /** The message to be displayed in the event of an error */
  errorMsg: PropTypes.string,
  /** Custom change function */
  onChange: PropTypes.func,
  /** Default input text value */
  defaultText: PropTypes.string
} : {};
InputText.defaultProps = {
  hiddenLabel: false,
  required: false
};
export default InputText;