@lyra/components/lib/dialogs/ConfirmDialog.js

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _closeIcon = require('part:@lyra/base/close-icon');

var _closeIcon2 = _interopRequireDefault(_closeIcon);

var _circleCheckIcon = require('part:@lyra/base/circle-check-icon');

var _circleCheckIcon2 = _interopRequireDefault(_circleCheckIcon);

var _ConfirmDialog = require('./styles/ConfirmDialog.css');

var _ConfirmDialog2 = _interopRequireDefault(_ConfirmDialog);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _portal = require('part:@lyra/components/utilities/portal');

var _stackedEscapable = require('part:@lyra/components/utilities/stacked-escapable');

var _stackedEscapable2 = _interopRequireDefault(_stackedEscapable);

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

class DefaultDialog extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleDialogClick = event => {
      event.stopPropagation();
    }, this.setDialogElement = element => {
      this.dialog = element;
    }, _temp;
  }

  render() {
    var _props = this.props;
    const color = _props.color,
          className = _props.className,
          confirmColor = _props.confirmColor,
          confirmButtonText = _props.confirmButtonText,
          cancelButtonText = _props.cancelButtonText,
          onConfirm = _props.onConfirm,
          onCancel = _props.onCancel;


    return _react2.default.createElement(
      _stackedEscapable2.default,
      { onEscape: onCancel },
      _react2.default.createElement(
        _portal.Portal,
        null,
        _react2.default.createElement(
          'div',
          {
            className: `${_ConfirmDialog2.default.root} ${_ConfirmDialog2.default[color]} ${className}`,
            ref: this.setDialogElement,
            onClick: onCancel
          },
          _react2.default.createElement(
            'div',
            { className: _ConfirmDialog2.default.dialog, onClick: this.handleDialogClick },
            _react2.default.createElement(
              'div',
              { className: _ConfirmDialog2.default.inner },
              _react2.default.createElement(
                'div',
                { className: _ConfirmDialog2.default.content },
                this.props.children
              ),
              _react2.default.createElement(
                'div',
                { className: _ConfirmDialog2.default.footer },
                _react2.default.createElement(
                  _default2.default,
                  { onClick: onCancel, icon: _closeIcon2.default, kind: 'simple' },
                  cancelButtonText
                ),
                _react2.default.createElement(
                  _default2.default,
                  {
                    onClick: onConfirm,
                    color: confirmColor,
                    icon: _circleCheckIcon2.default,
                    autoFocus: true
                  },
                  confirmButtonText
                )
              )
            )
          )
        )
      )
    );
  }
}
exports.default = DefaultDialog;
DefaultDialog.propTypes = {
  color: _propTypes2.default.oneOf(['warning', 'success', 'danger', 'info']),
  confirmColor: _propTypes2.default.oneOf(['warning', 'success', 'danger', 'info']),
  className: _propTypes2.default.string,
  children: _propTypes2.default.node,
  onClose: _propTypes2.default.func,
  onConfirm: _propTypes2.default.func,
  onCancel: _propTypes2.default.func,
  confirmButtonText: _propTypes2.default.string,
  cancelButtonText: _propTypes2.default.string
};
DefaultDialog.defaultProps = {
  isOpen: false,
  showHeader: false,
  onAction() {},
  onOpen() {},
  actions: [],
  kind: 'default',
  confirmColor: 'success',
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel'
};