@massds/mayflower-react/dist/SelectBox/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); }
/**
 * 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
 */
import React from "react";
import PropTypes from "prop-types";
import Label from "../Label/index.mjs";
let 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) {
    const selectedIndex = event.nativeEvent.target.selectedIndex;
    const selected = event.target[selectedIndex].text;
    const 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() {
    let 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';
    }
    const selectClassNames = this.props.required ? 'ma__select-box__select js-dropdown-select js-required' : 'ma__select-box__select js-dropdown-select';
    const selected = this.state.selected;
    const _this$props = this.props,
      label = _this$props.label,
      id = _this$props.id,
      options = _this$props.options,
      stackLabel = _this$props.stackLabel;
    const labelClassNames = stackLabel ? 'ma__select-box__label' : 'ma__label--inline ma__label--small';
    const selectBoxInline = stackLabel ? '' : 'ma__select-box__field--inline';
    const getValueByText = function (array, text) {
      if (array === void 0) {
        array = [];
      }
      const matchedItem = array.find(item => item.text === text);
      const matchedValue = matchedItem && matchedItem.value;
      return matchedValue;
    };
    const valueInOptions = getValueByText(options, selected);
    const selectedValue = valueInOptions || options[0].value;
    return /*#__PURE__*/React.createElement("section", {
      className: classNames
    }, label && /*#__PURE__*/React.createElement(Label, {
      inputId: id,
      className: labelClassNames
    }, label), /*#__PURE__*/React.createElement("div", {
      className: "ma__select-box__field " + selectBoxInline
    }, /*#__PURE__*/React.createElement("select", {
      name: id,
      id: id,
      className: selectClassNames,
      onChange: this.handleOnChange,
      value: selectedValue,
      disabled: this.props.disabled
    }, options.map(option => /*#__PURE__*/React.createElement("option", {
      key: option.value,
      value: option.value
    }, option.text))), /*#__PURE__*/React.createElement("div", {
      className: this.props.disabled ? 'ma__select-box__link ma__select-box__disabled' : 'ma__select-box__link'
    }, /*#__PURE__*/React.createElement("span", {
      className: "js-dropdown-link"
    }, valueInOptions ? selected : options[0].text), /*#__PURE__*/React.createElement("span", {
      className: "ma__select-box__icon"
    }))));
  };
  return SelectBox;
}(React.Component);
SelectBox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The label text above the select box */
  label: PropTypes.string.isRequired,
  /** Whether to stack label or inline label */
  stackLabel: PropTypes.bool,
  /** Whether the form field is required or not */
  required: PropTypes.bool,
  /** The id of the selectbox element */
  id: PropTypes.string.isRequired,
  /** An array of options for the selectbox */
  options: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
  })).isRequired,
  /** Change handler callback provided by the parent */
  onChangeCallback: PropTypes.func,
  /** Wrapper class for section tag */
  className: PropTypes.string,
  /** The default value for the select box */
  selected: PropTypes.string,
  disabled: PropTypes.bool
} : {};
SelectBox.defaultProps = {
  required: false
};
export default SelectBox;