@massds/mayflower-react/dist/SelectBox/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("../Label/index.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); } /**
 * SelectBox module.
 * @module @massds/mayflower-react/SelectBox
 * @requires module:@massds/mayflower-assets/scss/01-atoms/select-box
 * @requires module:@massds/mayflower-assets/scss/01-atoms/helper-text
 */
var SelectBox = /*#__PURE__*/function (_React$Component) {
  function SelectBox(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.state = {
      selected: !props.selected ? props.options[0].text : props.selected
    };
    _this.handleOnChange = _this.handleOnChange.bind(_this);
    return _this;
  }

  // eslint-disable-next-line camelcase
  _inheritsLoose(SelectBox, _React$Component);
  var _proto = SelectBox.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      selected: nextProps.selected
    });
  }

  /**
   * Default event handler which renders selected item in the patter div.
   *
   * @param event The DOM onChange event
   *
   * Invokes custom callback passed as prop onChangeCallback, passing back the
   * object with select information.
   */;
  _proto.handleOnChange = function handleOnChange(event) {
    var selectedIndex = event.nativeEvent.target.selectedIndex;
    var selected = event.target[selectedIndex].text;
    var selectedValue = event.target[selectedIndex].value;
    this.setState({
      selected: selected
    });

    // invokes custom function if passed in the component
    if (typeof this.props.onChangeCallback === 'function') {
      this.props.onChangeCallback({
        selectedIndex: selectedIndex,
        selected: selected,
        selectedValue: selectedValue
      });
    }
  };
  _proto.render = function render() {
    var classNames = '';
    if (this.props.className) {
      classNames = this.props.className;
    } else {
      classNames = !this.props.required ? 'ma__select-box js-dropdown ma__select-box--optional' : 'ma__select-box js-dropdown';
    }
    var selectClassNames = this.props.required ? 'ma__select-box__select js-dropdown-select js-required' : 'ma__select-box__select js-dropdown-select';
    var selected = this.state.selected;
    var _this$props = this.props,
      label = _this$props.label,
      id = _this$props.id,
      options = _this$props.options,
      stackLabel = _this$props.stackLabel;
    var labelClassNames = stackLabel ? 'ma__select-box__label' : 'ma__label--inline ma__label--small';
    var selectBoxInline = stackLabel ? '' : 'ma__select-box__field--inline';
    var getValueByText = function getValueByText(array, text) {
      if (array === void 0) {
        array = [];
      }
      var matchedItem = array.find(function (item) {
        return item.text === text;
      });
      var matchedValue = matchedItem && matchedItem.value;
      return matchedValue;
    };
    var valueInOptions = getValueByText(options, selected);
    var selectedValue = valueInOptions || options[0].value;
    return /*#__PURE__*/_react["default"].createElement("section", {
      className: classNames
    }, label && /*#__PURE__*/_react["default"].createElement(_index["default"], {
      inputId: id,
      className: labelClassNames
    }, label), /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__select-box__field " + selectBoxInline
    }, /*#__PURE__*/_react["default"].createElement("select", {
      name: id,
      id: id,
      className: selectClassNames,
      onChange: this.handleOnChange,
      value: selectedValue,
      disabled: this.props.disabled
    }, options.map(function (option) {
      return /*#__PURE__*/_react["default"].createElement("option", {
        key: option.value,
        value: option.value
      }, option.text);
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: this.props.disabled ? 'ma__select-box__link ma__select-box__disabled' : 'ma__select-box__link'
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "js-dropdown-link"
    }, valueInOptions ? selected : options[0].text), /*#__PURE__*/_react["default"].createElement("span", {
      className: "ma__select-box__icon"
    }))));
  };
  return SelectBox;
}(_react["default"].Component);
SelectBox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The label text above the select box */
  label: _propTypes["default"].string.isRequired,
  /** Whether to stack label or inline label */
  stackLabel: _propTypes["default"].bool,
  /** Whether the form field is required or not */
  required: _propTypes["default"].bool,
  /** The id of the selectbox element */
  id: _propTypes["default"].string.isRequired,
  /** An array of options for the selectbox */
  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
    text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
  })).isRequired,
  /** Change handler callback provided by the parent */
  onChangeCallback: _propTypes["default"].func,
  /** Wrapper class for section tag */
  className: _propTypes["default"].string,
  /** The default value for the select box */
  selected: _propTypes["default"].string,
  disabled: _propTypes["default"].bool
} : {};
SelectBox.defaultProps = {
  required: false
};
var _default = exports["default"] = SelectBox;
module.exports = exports.default;