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

Basic UX components

'use strict';

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

var _partition4 = require('lodash/partition');

var _partition5 = _interopRequireDefault(_partition4);

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); /* eslint-disable complexity */


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 _defaultStyle = require('part:@lyra/components/dialogs/default-style');

var _defaultStyle2 = _interopRequireDefault(_defaultStyle);

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

var _default2 = _interopRequireDefault(_default);

var _buttonCollection = require('part:@lyra/components/buttons/button-collection');

var _buttonCollection2 = _interopRequireDefault(_buttonCollection);

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

var _escapable = require('part:@lyra/components/utilities/escapable');

var _escapable2 = _interopRequireDefault(_escapable);

var _captureOutsideClicks = require('part:@lyra/components/utilities/capture-outside-clicks');

var _captureOutsideClicks2 = _interopRequireDefault(_captureOutsideClicks);

var _stacked = require('part:@lyra/components/utilities/stacked');

var _stacked2 = _interopRequireDefault(_stacked);

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

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

    return _temp = super(...args), this.handleDialogClick = event => {
      event.stopPropagation();
    }, this.setDialogElement = element => {
      this.dialog = element;
    }, this.createButtonFromAction = (action, i) => {
      return _react2.default.createElement(
        _default2.default,
        {
          key: i,
          onClick: () => this.props.onAction(action),
          'data-action-index': i,
          color: action.color,
          disabled: action.disabled,
          kind: action.kind,
          autoFocus: action.autoFocus,
          className: action.secondary ? _defaultStyle2.default.actionSecondary : ''
        },
        action.title
      );
    }, this.renderActions = actions => {
      if (!actions || actions.length === 0) {
        return null;
      }

      var _partition2 = (0, _partition5.default)(actions, action => action.primary),
          _partition3 = _slicedToArray(_partition2, 2);

      const primary = _partition3[0],
            secondary = _partition3[1];


      return _react2.default.createElement(
        _buttonCollection2.default,
        {
          align: 'end',
          secondary: secondary.map(this.createButtonFromAction)
        },
        primary.map(this.createButtonFromAction)
      );
    }, _temp;
  }

  openDialogElement() {
    this.props.onOpen();
  }

  render() {
    var _props = this.props;
    const title = _props.title,
          actions = _props.actions,
          showHeader = _props.showHeader,
          color = _props.color,
          onClose = _props.onClose,
          className = _props.className,
          showCloseButton = _props.showCloseButton;

    const classNames = `
      ${_defaultStyle2.default[color]}
      ${_defaultStyle2.default.isOpen}
      ${showHeader ? _defaultStyle2.default.hasHeader : ''}
      ${actions && actions.length > 0 ? _defaultStyle2.default.hasFunctions : ''}
      ${className}
    `;

    return _react2.default.createElement(
      _portal.Portal,
      null,
      _react2.default.createElement(
        _stacked2.default,
        null,
        isActive => _react2.default.createElement(
          'div',
          { className: classNames },
          _react2.default.createElement(
            'div',
            { className: _defaultStyle2.default.dialog },
            _react2.default.createElement(_escapable2.default, {
              onEscape: event => (isActive || event.shiftKey) && onClose()
            }),
            _react2.default.createElement(
              _captureOutsideClicks2.default,
              {
                onClickOutside: isActive ? onClose : undefined
              },
              _react2.default.createElement(
                'div',
                { className: _defaultStyle2.default.inner },
                !showHeader && onClose && showCloseButton && _react2.default.createElement(
                  'button',
                  {
                    className: _defaultStyle2.default.closeButtonOutside,
                    onClick: onClose,
                    type: 'button'
                  },
                  _react2.default.createElement(_closeIcon2.default, { color: 'inherit' })
                ),
                showHeader && onClose && title && _react2.default.createElement(
                  'div',
                  { className: _defaultStyle2.default.header },
                  _react2.default.createElement(
                    'h1',
                    { className: _defaultStyle2.default.title },
                    title
                  ),
                  _react2.default.createElement(
                    'button',
                    {
                      className: _defaultStyle2.default.closeButton,
                      onClick: onClose,
                      type: 'button'
                    },
                    _react2.default.createElement(_closeIcon2.default, { color: 'inherit' })
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { className: _defaultStyle2.default.content },
                  this.props.children
                ),
                actions && actions.length > 0 && _react2.default.createElement(
                  'div',
                  { className: _defaultStyle2.default.footer },
                  this.renderActions(actions)
                )
              )
            )
          )
        )
      )
    );
  }
}
exports.default = DefaultDialog;
DefaultDialog.propTypes = {
  color: _propTypes2.default.oneOf(['default', 'warning', 'success', 'danger', 'info']),
  className: _propTypes2.default.string,
  title: _propTypes2.default.string,
  children: _propTypes2.default.node,
  onOpen: _propTypes2.default.func,
  onClose: _propTypes2.default.func.isRequired,
  onAction: _propTypes2.default.func,
  showHeader: _propTypes2.default.bool,
  showCloseButton: _propTypes2.default.bool,
  actions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string.isRequired,
    tooltip: _propTypes2.default.string,
    kind: _propTypes2.default.string,
    autoFocus: _propTypes2.default.bool
  }))
};
DefaultDialog.defaultProps = {
  showHeader: false,
  showCloseButton: true,
  onAction() {},
  onOpen() {},
  actions: [],
  color: 'default'
};