@massds/mayflower-react/dist/ButtonToggle/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"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var ButtonToggle = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(ButtonToggle, _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


  var _proto = ButtonToggle.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      selected: nextProps.defaultValue
    });
  };

  _proto.onToggleClick = function onToggleClick(event) {
    var selected = event.target.value;

    if (typeof this.props.onChangeCallback === 'function') {
      this.props.onChangeCallback(selected);
    }

    this.setState({
      selected: selected
    });
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        id = _this$props.id,
        labelText = _this$props.labelText,
        option1 = _this$props.option1,
        option2 = _this$props.option2;
    var selected = this.state.selected;
    return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("label", {
      htmlFor: id,
      className: "ma__label--inline ma__label--small"
    }, labelText), /*#__PURE__*/_react["default"].createElement("button", {
      onClick: function onClick(e) {
        return _this2.onToggleClick(e);
      },
      value: option1.value,
      type: "button",
      className: "ma__button-toggle " + (option1.value === selected && 'ma__button-toggle--selected')
    }, option1.text), ' ', "|", /*#__PURE__*/_react["default"].createElement("button", {
      onClick: function onClick(e) {
        return _this2.onToggleClick(e);
      },
      value: option2.value,
      type: "button",
      className: "ma__button-toggle " + (option2.value === selected && 'ma__button-toggle--selected')
    }, option2.text));
  };

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

ButtonToggle.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Option 1 for the buttonToggle */
  option1: _propTypes["default"].shape({
    value: _propTypes["default"].string.isRequired,
    text: _propTypes["default"].string.isRequired
  }),

  /** Option 2 for the buttonToggle */
  option2: _propTypes["default"].shape({
    value: _propTypes["default"].string.isRequired,
    text: _propTypes["default"].string.isRequired
  }),

  /** An id that specifies which element the label is bound to */
  id: _propTypes["default"].string.isRequired,

  /** A label text displayed for the buttonToggle */
  labelText: _propTypes["default"].string.isRequired,

  /** Custom onChange function that receives the selected value */
  onChangeCallback: _propTypes["default"].func,

  /** Default value selected */
  defaultValue: _propTypes["default"].string.isRequired
} : {};
var _default = ButtonToggle;
exports["default"] = _default;
module.exports = exports.default;