@massds/mayflower-react/dist/Input/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 _classnames = _interopRequireDefault(require("classnames"));

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

var _context = require("../Input/context.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; }

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

/* eslint-disable react/no-unused-state */
var Input = function Input(props) {
  var _classNames;

  var inline = props.inline,
      classes = props.classes,
      labelText = props.labelText,
      hiddenLabel = props.hiddenLabel,
      required = props.required,
      disabled = props.disabled,
      id = props.id;
  var inputClasses = (0, _classnames["default"])((_classNames = {
    'ma__input-group': true,
    'ma__input-group--inline': inline
  }, _classNames[classes && classes.length > 0 && classes.join(' ')] = true, _classNames));
  var conditionText = required ? '' : 'optional'; // InputProvider will get the same props.children as Input.

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: inputClasses
  }, labelText && /*#__PURE__*/_react["default"].createElement(_index["default"], {
    inputId: id,
    hidden: hiddenLabel,
    disabled: disabled,
    conditionText: conditionText
  }, labelText), /*#__PURE__*/_react["default"].createElement(InputProvider, props)));
};

Input.propTypes = process.env.NODE_ENV !== "production" ? {
  id: _propTypes["default"].string,
  labelText: _propTypes["default"].string,
  hiddenLabel: _propTypes["default"].bool,
  required: _propTypes["default"].bool,
  inline: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool,
  classes: _propTypes["default"].arrayOf(_propTypes["default"].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.

var 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", function () {
      return _this.state.value;
    });

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

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

    _defineProperty(_assertThisInitialized(_this), "checkFormContext", function (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)) {
          var 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["default"].createElement(_context.InputContext.Provider, {
      value: this.state
    }, /*#__PURE__*/_react["default"].createElement(_context.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["default"].createElement("div", {
      className: "ma__input-group-right"
    }, this.props.children));
  };

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

Input.contextType = _context.InputContext;
InputProvider.propTypes = process.env.NODE_ENV !== "production" ? {
  inline: _propTypes["default"].bool,
  id: _propTypes["default"].string,
  children: _propTypes["default"].node,
  disabled: _propTypes["default"].bool,
  errorMsg: _propTypes["default"].string,
  defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool, _propTypes["default"].number]),
  classes: _propTypes["default"].arrayOf(_propTypes["default"].string)
} : {};
var _default = Input;
exports["default"] = _default;
module.exports = exports.default;