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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _index = _interopRequireDefault(require("../ErrorMessage/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var InputText = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(InputText, _React$Component);

  function InputText(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      value: ''
    };
    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
    return _this;
  } // eslint-disable-next-line camelcase


  var _proto = InputText.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.defaultText
    });
  };

  _proto.handleChange = function handleChange(event) {
    var 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() {
    var _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;
    var inputLabelClasses = ['ma__label'];

    if (labelText) {
      inputLabelClasses.push("ma__label--" + (required ? 'required' : 'optional'));

      if (hiddenLabel) {
        inputLabelClasses.push('ma__label--hidden');
      }
    }

    var inputClasses = ['ma__input'];

    if (required) {
      inputClasses.push('js-is-required');
    }

    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, labelText && /*#__PURE__*/_react["default"].createElement("label", {
      htmlFor: id,
      className: inputLabelClasses.join(' ')
    }, labelText), /*#__PURE__*/_react["default"].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["default"].createElement(_index["default"], {
      error: errorMsg,
      inputId: id
    }));
  };

  return InputText;
}(_react["default"].Component);

InputText.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Whether the label should be hidden or not */
  hiddenLabel: _propTypes["default"].bool,

  /** The label text for the input field */
  labelText: _propTypes["default"].string.isRequired,

  /** Whether the field is required or not */
  required: _propTypes["default"].bool,

  /** The unique ID for the input field */
  id: _propTypes["default"].string.isRequired,

  /** The name for the input field */
  name: _propTypes["default"].string.isRequired,

  /** The type of the input field */
  type: _propTypes["default"].string.isRequired,

  /** The max acceptable input length */
  maxlength: _propTypes["default"].number,

  /** The pattern to filter input against, e.g. "[0-9]" for numbers only */
  pattern: _propTypes["default"].string,

  /** The number of characters wide to make the input field */
  width: _propTypes["default"].number,

  /** The placeholder text for the input field */
  placeholder: _propTypes["default"].string,

  /** The message to be displayed in the event of an error */
  errorMsg: _propTypes["default"].string,

  /** Custom change function */
  onChange: _propTypes["default"].func,

  /** Default input text value */
  defaultText: _propTypes["default"].string
} : {};
InputText.defaultProps = {
  hiddenLabel: false,
  required: false
};
var _default = InputText;
exports["default"] = _default;
module.exports = exports.default;