@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(e) { return e && e.__esModule ? e : { "default": e }; }
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
 */
/* 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) {
  function InputProvider(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _defineProperty(_this, "getValue", function () {
      return _this.state.value;
    });
    _defineProperty(_this, "setValue", function (value, afterUpdate) {
      _this.setState({
        value: value
      }, afterUpdate);
    });
    _defineProperty(_this, "updateState", function (newState, afterUpdate) {
      _this.setState(newState, afterUpdate);
    });
    _defineProperty(_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;
  }
  _inheritsLoose(InputProvider, _React$Component);
  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 = exports["default"] = Input;
module.exports = exports.default;