@massds/mayflower-react/dist/ButtonToggle/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); }
/**
 * ButtonToggle module.
 * @module @massds/mayflower-react/ButtonToggle
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-toggle
 */
import React from "react";
import PropTypes from "prop-types";
let ButtonToggle = /*#__PURE__*/function (_React$Component) {
  function ButtonToggle(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.state = {
      selected: props.defaultValue
    };
    return _this;
  }

  // eslint-disable-next-line camelcase
  _inheritsLoose(ButtonToggle, _React$Component);
  var _proto = ButtonToggle.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      selected: nextProps.defaultValue
    });
  };
  _proto.onToggleClick = function onToggleClick(event) {
    const selected = event.target.value;
    if (typeof this.props.onChangeCallback === 'function') {
      this.props.onChangeCallback(selected);
    }
    this.setState({
      selected: selected
    });
  };
  _proto.render = function render() {
    const _this$props = this.props,
      id = _this$props.id,
      labelText = _this$props.labelText,
      option1 = _this$props.option1,
      option2 = _this$props.option2;
    const selected = this.state.selected;
    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", {
      htmlFor: id,
      className: "ma__label--inline ma__label--small"
    }, labelText), /*#__PURE__*/React.createElement("button", {
      onClick: e => this.onToggleClick(e),
      value: option1.value,
      type: "button",
      className: "ma__button-toggle " + (option1.value === selected && 'ma__button-toggle--selected')
    }, option1.text), ' ', "|", /*#__PURE__*/React.createElement("button", {
      onClick: e => this.onToggleClick(e),
      value: option2.value,
      type: "button",
      className: "ma__button-toggle " + (option2.value === selected && 'ma__button-toggle--selected')
    }, option2.text));
  };
  return ButtonToggle;
}(React.Component);
ButtonToggle.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Option 1 for the buttonToggle */
  option1: PropTypes.shape({
    value: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }),
  /** Option 2 for the buttonToggle */
  option2: PropTypes.shape({
    value: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }),
  /** An id that specifies which element the label is bound to */
  id: PropTypes.string.isRequired,
  /** A label text displayed for the buttonToggle */
  labelText: PropTypes.string.isRequired,
  /** Custom onChange function that receives the selected value */
  onChangeCallback: PropTypes.func,
  /** Default value selected */
  defaultValue: PropTypes.string.isRequired
} : {};
export default ButtonToggle;