react-ions/lib/components/internal/ConfirmationOverlay.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _OptClass = require('./OptClass');

var _OptClass2 = _interopRequireDefault(_OptClass);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _colors = require('../internal/colors');

var _colors2 = _interopRequireDefault(_colors);

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

var ConfirmationOverlay = function ConfirmationOverlay(_ref) {
  var prompt = _ref.prompt,
      handleConfirmation = _ref.handleConfirmation;

  var getTextStyle = function getTextStyle() {
    return {
      fontSize: '14px',
      fontWeight: '600',
      color: _colors2.default.primary4,
      margin: '0 0 24px',
      display: 'block'
    };
  };

  var getButtonWrapperStyle = function getButtonWrapperStyle() {
    return {
      display: 'flex',
      justifyContent: 'flex-end',
      marginRight: '-12px'
    };
  };

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'span',
      { style: getTextStyle() },
      prompt || 'Are you sure?'
    ),
    _react2.default.createElement(
      'div',
      { style: getButtonWrapperStyle() },
      _react2.default.createElement(
        _Button2.default,
        { onClick: handleConfirmation.bind(undefined, false), optClass: 'danger-alt' },
        'Cancel'
      ),
      _react2.default.createElement(
        _Button2.default,
        { onClick: handleConfirmation.bind(undefined, true) },
        'Yes'
      )
    )
  );
};

ConfirmationOverlay.propTypes = {
  prompt: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
  handleConfirmation: _propTypes2.default.func.isRequired
};

exports.default = ConfirmationOverlay;