@lyra/default-layout/lib/components/SpaceSwitcher.js

The default layout components for Lyra

'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 _reactClickOutside = require('react-click-outside');

var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);

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

var _default2 = _interopRequireDefault(_default);

var _SpaceSwitcher = require('./styles/SpaceSwitcher.css');

var _SpaceSwitcher2 = _interopRequireDefault(_SpaceSwitcher);

var _spaces = require('../util/spaces');

var _urlState = require('../datastores/urlState');

var _router = require('part:@lyra/base/router');

var _arrowDropDown = require('part:@lyra/base/arrow-drop-down');

var _arrowDropDown2 = _interopRequireDefault(_arrowDropDown);

var _operators = require('rxjs/operators');

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

const currentSpace$ = _urlState.state.pipe((0, _operators.map)(event => event.state && event.state.space), (0, _operators.map)(spaceName => _spaces.CONFIGURED_SPACES.find(sp => sp.name === spaceName)));

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

    return _temp = super(...args), this.state = {
      menuOpen: false,
      currentSpace: null
    }, this.handleClickOutside = () => {
      if (this.state.menuOpen) {
        this.setState({ menuOpen: false });
      }
    }, this.handleMenuToggle = () => {
      this.setState({ menuOpen: !this.state.menuOpen });
    }, this.handleMenuItemClick = item => {
      this.props.router.navigate({ space: item.name });
      this.setState({ menuOpen: false });
    }, _temp;
  }

  componentDidMount() {
    this.currentSpaceSubscription = currentSpace$.subscribe(space => {
      this.setState({ currentSpace: space });
    });
  }

  componentWillUnmount() {
    this.currentSpaceSubscription.unsubscribe();
  }

  render() {
    var _state = this.state;
    const menuOpen = _state.menuOpen,
          currentSpace = _state.currentSpace;

    const title = currentSpace && currentSpace.title;
    return _react2.default.createElement(
      'div',
      { className: _SpaceSwitcher2.default.root },
      _react2.default.createElement(
        'div',
        {
          title: title,
          onClick: this.handleMenuToggle,
          className: _SpaceSwitcher2.default.currentSpace
        },
        title && `${title}`,
        _react2.default.createElement(
          'span',
          { className: _SpaceSwitcher2.default.arrow },
          _react2.default.createElement(_arrowDropDown2.default, null)
        )
      ),
      menuOpen && _react2.default.createElement(
        'div',
        { className: _SpaceSwitcher2.default.menu },
        _react2.default.createElement(_default2.default, {
          onAction: this.handleMenuItemClick,
          items: _spaces.CONFIGURED_SPACES,
          opened: true,
          origin: 'top-right',
          onClickOutside: this.handleMenuClose
        })
      )
    );
  }
}

SpaceSwitcher.propTypes = {
  router: _propTypes2.default.shape({ navigate: _propTypes2.default.func })
};
exports.default = (0, _router.withRouterHOC)((0, _reactClickOutside2.default)(SpaceSwitcher));