@lyra/default-layout/lib/components/ToolSwitcher.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 _router = require('part:@lyra/base/router');

var _ToolSwitcher = require('./styles/ToolSwitcher.css');

var _ToolSwitcher2 = _interopRequireDefault(_ToolSwitcher);

var _pluginIcon = require('part:@lyra/base/plugin-icon');

var _pluginIcon2 = _interopRequireDefault(_pluginIcon);

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

var _reactInk2 = _interopRequireDefault(_reactInk);

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

function ToolSwitcher(props) {
  const tools = props.tools,
        router = props.router,
        activeToolName = props.activeToolName,
        onSwitchTool = props.onSwitchTool;

  return _react2.default.createElement(
    'div',
    { className: `${_ToolSwitcher2.default.toolSwitcher} ${props.className}` },
    _react2.default.createElement(
      'ul',
      { className: _ToolSwitcher2.default.toolList },
      tools.map(tool => {
        const itemClass = activeToolName === tool.name ? _ToolSwitcher2.default.activeItem : _ToolSwitcher2.default.item;

        const ToolIcon = tool.icon || _pluginIcon2.default;

        const state = Object.assign({}, router.state, { tool: tool.name });
        return _react2.default.createElement(
          'li',
          { key: tool.name, className: itemClass },
          _react2.default.createElement(
            _router.StateLink,
            {
              className: _ToolSwitcher2.default.toolLink,
              state: state,
              onClick: onSwitchTool
            },
            _react2.default.createElement(
              'div',
              { className: _ToolSwitcher2.default.iconContainer },
              _react2.default.createElement(ToolIcon, null)
            ),
            _react2.default.createElement(
              'div',
              { className: _ToolSwitcher2.default.toolName },
              tool.title || tool.name
            ),
            _react2.default.createElement(_reactInk2.default, { duration: 1000, opacity: 0.1, radius: 200 })
          )
        );
      })
    )
  );
}

ToolSwitcher.defaultProps = {
  className: ''
};

ToolSwitcher.propTypes = {
  activeToolName: _propTypes2.default.string,
  onSwitchTool: _propTypes2.default.func,
  className: _propTypes2.default.string,
  router: _propTypes2.default.shape({ state: _propTypes2.default.object }),
  tools: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    name: _propTypes2.default.string.isRequired,
    icon: _propTypes2.default.func
  }))
};

exports.default = (0, _router.withRouterHOC)(ToolSwitcher);