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

The default layout components for Lyra

'use strict';

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

var _startCase2 = require('lodash/startCase');

var _startCase3 = _interopRequireDefault(_startCase2);

var _class, _temp2;

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _absolutes = require('all:part:@lyra/base/absolutes');

var _absolutes2 = _interopRequireDefault(_absolutes);

var _lyraStudioLogo = require('part:@lyra/base/lyra-studio-logo');

var _lyraStudioLogo2 = _interopRequireDefault(_lyraStudioLogo);

var _DefaultLayout = require('./styles/DefaultLayout.css');

var _DefaultLayout2 = _interopRequireDefault(_DefaultLayout);

var _RenderTool = require('./RenderTool');

var _RenderTool2 = _interopRequireDefault(_RenderTool);

var _Navigation = require('./Navigation');

var _Navigation2 = _interopRequireDefault(_Navigation);

var _toolSwitcher = require('part:@lyra/default-layout/tool-switcher');

var _toolSwitcher2 = _interopRequireDefault(_toolSwitcher);

var _plusIcon = require('part:@lyra/base/plus-icon');

var _plusIcon2 = _interopRequireDefault(_plusIcon);

var _ActionModal = require('./ActionModal');

var _ActionModal2 = _interopRequireDefault(_ActionModal);

var _schema = require('part:@lyra/base/schema');

var _schema2 = _interopRequireDefault(_schema);

var _Branding = require('./Branding');

var _Branding2 = _interopRequireDefault(_Branding);

var _reactInk = require('react-ink');

var _reactInk2 = _interopRequireDefault(_reactInk);

var _hamburgerIcon = require('part:@lyra/base/hamburger-icon');

var _hamburgerIcon2 = _interopRequireDefault(_hamburgerIcon);

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

var _default2 = _interopRequireDefault(_default);

var _SchemaErrorReporter = require('./SchemaErrorReporter');

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

var _SpaceSwitcher2 = _interopRequireDefault(_SpaceSwitcher);

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

var _UpdateNotifier = require('./UpdateNotifier');

var _UpdateNotifier2 = _interopRequireDefault(_UpdateNotifier);

var _appLoadingScreen = require('part:@lyra/base/app-loading-screen');

var _appLoadingScreen2 = _interopRequireDefault(_appLoadingScreen);

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

exports.default = (0, _router.withRouterHOC)((_temp2 = _class = class DefaultLayout extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      createMenuIsOpen: false,
      mobileMenuIsOpen: false,
      showLoadingScreen: true,
      loaded: false
    }, this.handleAnimationEnd = event => {
      this.setState({
        showLoadingScreen: false
      });
    }, this.handleCreateButtonClick = () => {
      this.setState({
        createMenuIsOpen: !this.state.createMenuIsOpen
      });
    }, this.handleActionModalClose = () => {
      this.setState({
        createMenuIsOpen: false
      });
    }, this.handleMobileMenuToggle = () => {
      this.setState({
        mobileMenuIsOpen: !this.state.mobileMenuIsOpen
      });
    }, this.handleSwitchTool = () => {
      this.setState({
        mobileMenuIsOpen: false
      });
    }, this.setLoadingScreenElement = element => {
      this._loadingScreenElement = element;
    }, this.renderContent = () => {
      var _props = this.props;
      const tools = _props.tools,
            router = _props.router;
      var _state = this.state;
      const createMenuIsOpen = _state.createMenuIsOpen,
            mobileMenuIsOpen = _state.mobileMenuIsOpen;


      const TYPE_ITEMS = _schema2.default.getTypeNames().map(typeName => _schema2.default.get(typeName)).map(type => ({
        key: type.name,
        name: type.name,
        title: type.title || (0, _startCase3.default)(type.name),
        icon: type.icon
      }));

      const modalActions = TYPE_ITEMS.map(item => {
        return {
          title: item.title,
          params: { type: item.name, icon: item.icon }
        };
      });

      return _react2.default.createElement(
        'div',
        {
          className: `${_DefaultLayout2.default.defaultLayout} ${mobileMenuIsOpen ? _DefaultLayout2.default.mobileMenuIsOpen : ''}`
        },
        this.state.showLoadingScreen && _react2.default.createElement(
          'div',
          {
            className: this.state.loaded || document.visibilityState == 'hidden' ? _DefaultLayout2.default.loadingScreenLoaded : _DefaultLayout2.default.loadingScreen,
            ref: this.setLoadingScreenElement
          },
          _react2.default.createElement(_appLoadingScreen2.default, { text: 'Restoring Lyra' })
        ),
        _react2.default.createElement(
          'div',
          { className: _DefaultLayout2.default.secondaryNavigation },
          _react2.default.createElement(
            'div',
            { className: _DefaultLayout2.default.branding },
            _react2.default.createElement(_Branding2.default, null)
          ),
          _spaces.HAS_SPACES && _react2.default.createElement(
            'div',
            { className: _DefaultLayout2.default.spaceSwitcher },
            _react2.default.createElement(_SpaceSwitcher2.default, null)
          ),
          _react2.default.createElement(
            'a',
            {
              className: _DefaultLayout2.default.createButton,
              onClick: this.handleCreateButtonClick
            },
            _react2.default.createElement(
              'span',
              { className: _DefaultLayout2.default.createButtonIcon },
              _react2.default.createElement(_plusIcon2.default, null)
            ),
            _react2.default.createElement(
              'span',
              { className: _DefaultLayout2.default.createButtonText },
              'New'
            ),
            _react2.default.createElement(_reactInk2.default, { duration: 200, opacity: 0.1, radius: 200 })
          ),
          _react2.default.createElement(
            'div',
            { className: _DefaultLayout2.default.mobileCreateButton },
            _react2.default.createElement(
              _default2.default,
              {
                kind: 'simple',
                onClick: this.handleCreateButtonClick,
                title: 'Create new item',
                icon: _plusIcon2.default
              },
              'New'
            )
          ),
          _react2.default.createElement(
            'div',
            { className: _DefaultLayout2.default.mobileMenuButton },
            _react2.default.createElement(_default2.default, {
              kind: 'simple',
              onClick: this.handleMobileMenuToggle,
              title: 'Menu',
              icon: _hamburgerIcon2.default
            })
          ),
          _react2.default.createElement(_toolSwitcher2.default, {
            tools: this.props.tools,
            activeToolName: router.state.tool,
            onSwitchTool: this.handleSwitchTool,
            className: _DefaultLayout2.default.toolSwitcher
          })
        ),
        _react2.default.createElement(
          'div',
          { className: _DefaultLayout2.default.mainArea },
          _react2.default.createElement(
            'div',
            { className: _DefaultLayout2.default.navigation },
            _react2.default.createElement(_Navigation2.default, { tools: tools })
          ),
          _react2.default.createElement(
            'div',
            { className: _DefaultLayout2.default.toolContainer },
            _react2.default.createElement(
              _router.RouteScope,
              { scope: router.state.tool },
              _react2.default.createElement(_RenderTool2.default, { tool: router.state.tool })
            )
          )
        ),
        createMenuIsOpen && _react2.default.createElement(_ActionModal2.default, {
          onClose: this.handleActionModalClose,
          actions: modalActions
        }),
        _react2.default.createElement(_UpdateNotifier2.default, null),
        _react2.default.createElement(
          'a',
          {
            className: _DefaultLayout2.default.lyraStudioLogoContainer,
            href: 'http://vegapublish.com'
          },
          _react2.default.createElement(_lyraStudioLogo2.default, null)
        ),
        _absolutes2.default.map((Abs, i) => _react2.default.createElement(Abs, { key: i }))
      );
    }, _temp;
  }

  componentDidMount() {
    if (this._loadingScreenElement && this.state.showLoadingScreen) {
      this._loadingScreenElement.addEventListener('animationend', this.handleAnimationEnd, false);
    }
  }

  componentWillUnmount() {
    if (this._loadingScreenElement) {
      this._loadingScreenElement.removeEventListener('animationend', this.handleAnimationEnd, false);
    }
  }

  componentDidUpdate(prevProps) {
    if (!this.state.loaded) {
      this.setState({
        loaded: true
      });
    }
  }

  render() {
    return _react2.default.createElement(
      _SchemaErrorReporter.SchemaErrorReporter,
      null,
      this.renderContent
    );
  }
}, _class.propTypes = {
  router: _propTypes2.default.shape({
    state: _propTypes2.default.object,
    navigate: _propTypes2.default.func
  }),
  tools: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    name: _propTypes2.default.string
  }))
}, _temp2));