@massds/mayflower-react/dist/Input/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); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * Input module.
 * @module @massds/mayflower-react/Input
 * @requires module:@massds/mayflower-assets/scss/01-atoms/01-atoms/helper-text
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import Label from "../Label/index.mjs";
import { InputContext, FormContext } from "../Input/context.mjs";

/* eslint-disable react/no-unused-state */

const Input = props => {
  var _classNames;
  const inline = props.inline,
    classes = props.classes,
    labelText = props.labelText,
    hiddenLabel = props.hiddenLabel,
    required = props.required,
    disabled = props.disabled,
    id = props.id;
  const inputClasses = classNames((_classNames = {
    'ma__input-group': true,
    'ma__input-group--inline': inline
  }, _classNames[classes && classes.length > 0 && classes.join(' ')] = true, _classNames));
  const conditionText = required ? '' : 'optional';
  // InputProvider will get the same props.children as Input.
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: inputClasses
  }, labelText && /*#__PURE__*/React.createElement(Label, {
    inputId: id,
    hidden: hiddenLabel,
    disabled: disabled,
    conditionText: conditionText
  }, labelText), /*#__PURE__*/React.createElement(InputProvider, props)));
};
Input.propTypes = process.env.NODE_ENV !== "production" ? {
  id: PropTypes.string,
  labelText: PropTypes.string,
  hiddenLabel: PropTypes.bool,
  required: PropTypes.bool,
  inline: PropTypes.bool,
  disabled: PropTypes.bool,
  classes: PropTypes.arrayOf(PropTypes.string)
} : {};

// Anything within a provider always re-renders when state changes.
// Using keys will not prevent this because each child in the provider
// is created with React.createElement, which makes a new object every render.
// This class is so that the label does not re-render for every state change.
let InputProvider = /*#__PURE__*/function (_React$Component) {
  function InputProvider(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _defineProperty(_this, "getValue", () => _this.state.value);
    _defineProperty(_this, "setValue", (value, afterUpdate) => {
      _this.setState({
        value: value
      }, afterUpdate);
    });
    _defineProperty(_this, "updateState", (newState, afterUpdate) => {
      _this.setState(newState, afterUpdate);
    });
    _defineProperty(_this, "checkFormContext", formContext => {
      if (formContext.isActive) {
        // By giving the form getters and setters and not the input value,
        // extra re-renders are avoided when context updates.
        if (!Object.prototype.hasOwnProperty.call(formContext.value, _this.props.id)) {
          const value = formContext.value;
          value[_this.props.id] = {
            getValue: _this.getValue,
            setValue: _this.setValue
          };
          formContext.updateState({
            value: value
          });
        }
      }
    });
    _this.state = {
      value: _this.props.defaultValue,
      getValue: _this.getValue,
      setValue: _this.setValue,
      updateState: _this.updateState,
      showError: false,
      errorMsg: _this.props.errorMsg,
      disabled: _this.props.disabled,
      inline: _this.props.inline
    };
    return _this;
  }
  _inheritsLoose(InputProvider, _React$Component);
  var _proto = InputProvider.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(InputContext.Provider, {
      value: this.state
    }, /*#__PURE__*/React.createElement(FormContext.Consumer, null,
    // Currently, this is called on every render of InputProvider.
    // @TODO: Pull this out of here when InputProvider.contextType is supported
    // and do this logic in componentDidUpdate.
    // InputProvider.contextType should be set to FormContext.
    this.checkFormContext), /*#__PURE__*/React.createElement("div", {
      className: "ma__input-group-right"
    }, this.props.children));
  };
  return InputProvider;
}(React.Component);
Input.contextType = InputContext;
InputProvider.propTypes = process.env.NODE_ENV !== "production" ? {
  inline: PropTypes.bool,
  id: PropTypes.string,
  children: PropTypes.node,
  disabled: PropTypes.bool,
  errorMsg: PropTypes.string,
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
  classes: PropTypes.arrayOf(PropTypes.string)
} : {};
export default Input;