@mapbox/mr-ui/modal/modal-actions.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ModalActions;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _button = _interopRequireDefault(require("../button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ModalActions(_ref) {
  let {
    primaryAction,
    secondaryAction,
    tertiaryAction
  } = _ref;
  const renderSecondary = () => {
    if (!primaryAction || !secondaryAction) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "flex-child-no-shrink mr12"
    }, /*#__PURE__*/_react.default.createElement(_button.default, {
      variant: "secondary",
      size: "medium",
      onClick: secondaryAction.callback,
      disabled: secondaryAction.disabled,
      "data-test": "secondary-modal-action",
      passthroughProps: {
        'aria-label': secondaryAction.text
      }
    }, secondaryAction.text));
  };
  const renderTertiary = () => {
    if (!primaryAction || !secondaryAction || !tertiaryAction) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "flex-child-no-shrink mr12"
    }, /*#__PURE__*/_react.default.createElement(_button.default, {
      "aria-label": tertiaryAction.text,
      variant: "tertiary",
      onClick: tertiaryAction.callback,
      disabled: tertiaryAction.disabled,
      "data-test": "tertiary-modal-action"
    }, tertiaryAction.text));
  };
  const primaryButtonVariant = primaryAction.destructive ? 'destructive' : 'primary';
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex--center-main flex--center-cross flex--row-reverse flex--wrap"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex-child-no-shrink"
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
    variant: primaryButtonVariant,
    size: "medium",
    onClick: primaryAction.callback,
    disabled: primaryAction.disabled,
    "data-test": "primary-modal-action",
    passthroughProps: {
      tabIndex: 0,
      'aria-label': primaryAction.text
    }
  }, primaryAction.text)), renderSecondary(), renderTertiary());
}
ModalActions.propTypes = {
  primaryAction: _propTypes.default.shape({
    text: _propTypes.default.string.isRequired,
    callback: _propTypes.default.func.isRequired,
    destructive: _propTypes.default.bool,
    disabled: _propTypes.default.bool
  }).isRequired,
  secondaryAction: _propTypes.default.shape({
    text: _propTypes.default.string.isRequired,
    callback: _propTypes.default.func.isRequired,
    disabled: _propTypes.default.bool
  }),
  tertiaryAction: _propTypes.default.shape({
    text: _propTypes.default.string.isRequired,
    callback: _propTypes.default.func.isRequired,
    disabled: _propTypes.default.bool
  })
};