@lyra/components/lib/dialogs/FullscreenDialog.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"); } }; }();

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _fullscreenStyle = require('part:@lyra/components/dialogs/fullscreen-style');

var _fullscreenStyle2 = _interopRequireDefault(_fullscreenStyle);

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

var _closeIcon2 = _interopRequireDefault(_closeIcon);

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 _stackedEscapable = require('part:@lyra/components/utilities/stacked-escapable');

var _stackedEscapable2 = _interopRequireDefault(_stackedEscapable);

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

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

    return _temp = super(...args), this.handleActionClick = event => {
      const actionIndex = event.currentTarget.getAttribute('data-action-index');
      this.props.onAction(this.props.actions[actionIndex]);
    }, this.createActionButton = (action, i) => {
      const color = this.props.color;

      return _react2.default.createElement(
        _default2.default,
        {
          key: i,
          onClick: this.handleActionClick,
          'data-action-index': i,
          color: color === 'default' ? action.color : 'white',
          disabled: action.disabled,
          inverted: color !== 'default' // invert buttons for colored dialogs
          , kind: action.kind,
          autoFocus: action.autoFocus
        },
        action.title
      );
    }, _temp;
  }

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


    const classNames = [_fullscreenStyle2.default[color] || _fullscreenStyle2.default.default, isOpen ? _fullscreenStyle2.default.isOpen : _fullscreenStyle2.default.isClosed, className, centered && _fullscreenStyle2.default.centered].filter(Boolean).join(' ');

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

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


    return _react2.default.createElement(
      _stackedEscapable2.default,
      { onEscape: onClose },
      _react2.default.createElement(
        _portal.Portal,
        null,
        _react2.default.createElement(
          'div',
          { className: classNames },
          onClose && _react2.default.createElement(
            'button',
            {
              className: _fullscreenStyle2.default.closeButton,
              onClick: onClose,
              type: 'button'
            },
            _react2.default.createElement(_closeIcon2.default, { color: 'inherit' })
          ),
          _react2.default.createElement(
            'div',
            { className: _fullscreenStyle2.default.inner },
            _react2.default.createElement(
              'h1',
              { className: _fullscreenStyle2.default.heading },
              title
            ),
            _react2.default.createElement(
              'div',
              { className: _fullscreenStyle2.default.content },
              this.props.children,
              _react2.default.createElement(
                'div',
                { className: _fullscreenStyle2.default.actionsWrapper },
                actions.length > 0 && _react2.default.createElement(
                  _buttonCollection2.default,
                  {
                    align: 'start',
                    secondary: secondary.map(this.createActionButton)
                  },
                  primary.map(this.createActionButton)
                )
              )
            )
          )
        )
      )
    );
  }
}
exports.default = FullScreenDialog;
FullScreenDialog.propTypes = {
  color: _propTypes2.default.oneOf(['default', 'warning', 'info', 'success', 'danger']),
  className: _propTypes2.default.string,
  title: _propTypes2.default.string,
  children: _propTypes2.default.node,
  onClose: _propTypes2.default.func,
  isOpen: _propTypes2.default.bool,
  centered: _propTypes2.default.bool,
  onAction: _propTypes2.default.func,
  actions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string.isRequired,
    tooltip: _propTypes2.default.string,
    kind: _propTypes2.default.string,
    autoFocus: _propTypes2.default.bool
  }))
};
FullScreenDialog.defaultProps = {
  color: 'default',
  isOpen: false,
  showHeader: false,
  onAction() {},
  onOpen() {},
  onClose() {},
  actions: []
};