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

Basic UX components

'use strict';

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

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

var _popoverStyle2 = _interopRequireDefault(_popoverStyle);

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 _closeIcon = require('part:@lyra/base/close-icon');

var _closeIcon2 = _interopRequireDefault(_closeIcon);

var _reactPopper = require('react-popper');

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

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

var _stacked2 = _interopRequireDefault(_stacked);

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

var _captureOutsideClicks2 = _interopRequireDefault(_captureOutsideClicks);

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

var _escapable2 = _interopRequireDefault(_escapable);

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

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

    return _temp = super(...args), this.createActionButton = (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 ? _popoverStyle2.default.actionSecondary : ''
        },
        action.title
      );
    }, _temp;
  }

  renderPopper(isActive) {
    var _props = this.props;
    const title = _props.title,
          color = _props.color,
          children = _props.children,
          actions = _props.actions,
          onClose = _props.onClose,
          onClickOutside = _props.onClickOutside,
          _onEscape = _props.onEscape,
          modifiers = _props.modifiers,
          padding = _props.padding;

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

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

    return _react2.default.createElement(
      _reactPopper.Popper,
      {
        className: `${_popoverStyle2.default.popper} ${_popoverStyle2.default[`color_${color}`]}`,
        placement: 'auto',
        modifiers: modifiers
      },
      _react2.default.createElement(_reactPopper.Arrow, { className: title ? _popoverStyle2.default.filledArrow : _popoverStyle2.default.arrow }),
      _react2.default.createElement(_escapable2.default, {
        onEscape: event => (isActive || event.shiftKey) && _onEscape && _onEscape()
      }),
      _react2.default.createElement(
        _captureOutsideClicks2.default,
        {
          onClickOutside: isActive ? onClickOutside : undefined
        },
        _react2.default.createElement(
          'div',
          { className: _popoverStyle2.default.popover },
          onClose && _react2.default.createElement(
            'button',
            {
              className: title ? _popoverStyle2.default.closeInverted : _popoverStyle2.default.close,
              type: 'button',
              onClick: onClose
            },
            _react2.default.createElement(_closeIcon2.default, null)
          ),
          title && _react2.default.createElement(
            'h3',
            { className: _popoverStyle2.default.title },
            title
          ),
          _react2.default.createElement(
            'div',
            {
              className: `
              ${actions.length > 0 ? _popoverStyle2.default.contentWithActions : _popoverStyle2.default.content}
              ${_popoverStyle2.default[`padding_${padding}`]}
            `
            },
            children
          ),
          actions.length > 0 && _react2.default.createElement(
            'div',
            { className: _popoverStyle2.default.footer },
            _react2.default.createElement(
              _buttonCollection2.default,
              {
                align: 'end',
                secondary: primary.map(this.createActionButton)
              },
              secondary.map(this.createActionButton)
            )
          )
        )
      )
    );
  }

  render() {
    const useOverlay = this.props.useOverlay;

    return _react2.default.createElement(
      _reactPopper.Manager,
      null,
      _react2.default.createElement(_reactPopper.Target, { className: _popoverStyle2.default.target }),
      _react2.default.createElement(
        _portal.Portal,
        null,
        _react2.default.createElement(
          _stacked2.default,
          null,
          isActive => _react2.default.createElement(
            'div',
            null,
            useOverlay && _react2.default.createElement('div', { className: _popoverStyle2.default.overlay }),
            this.renderPopper(isActive)
          )
        )
      )
    );
  }
}
exports.default = PopOver;
PopOver.propTypes = {
  title: _propTypes2.default.string,
  children: _propTypes2.default.node.isRequired,
  onClose: _propTypes2.default.func,
  onClickOutside: _propTypes2.default.func,
  onEscape: _propTypes2.default.func,
  onAction: _propTypes2.default.func,
  modifiers: _propTypes2.default.object,
  useOverlay: _propTypes2.default.bool,
  color: _propTypes2.default.oneOf(['default', 'danger']),
  padding: _propTypes2.default.oneOf(['none', 'small', 'medium', 'large']),
  actions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    kind: _propTypes2.default.string,
    title: _propTypes2.default.string,
    key: _propTypes2.default.string
  }))
};
PopOver.defaultProps = {
  title: undefined,
  onAction() {},
  actions: [],
  color: 'default',
  padding: 'medium',
  modifiers: {
    flip: {
      boundariesElement: 'viewport'
    },
    preventOverflow: {
      boundariesElement: 'viewport'
    }
  }
};