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

React versions of Mayflower design system UI components

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; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * 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) {
  _inheritsLoose(InputProvider, _React$Component);

  function InputProvider(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_this), "getValue", () => _this.state.value);

    _defineProperty(_assertThisInitialized(_this), "setValue", (value, afterUpdate) => {
      _this.setState({
        value: value
      }, afterUpdate);
    });

    _defineProperty(_assertThisInitialized(_this), "updateState", (newState, afterUpdate) => {
      _this.setState(newState, afterUpdate);
    });

    _defineProperty(_assertThisInitialized(_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;
  }

  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;