sc-react-ions/lib/components/Nav/Node.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRouter = require('react-router');

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

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

var Node = function Node(props) {
  var childnodes = null;
  var iconParent = props.node.icon ? props.node.icon : null;
  var link = void 0;

  if (props.children) {
    childnodes = props.children.map(function (childnode, index) {
      return _react2.default.createElement(Node, { node: childnode, children: childnode.nav, key: index });
    });
  }

  var handleClick = function handleClick(e) {
    e.preventDefault();
    props.node.action();
  };

  if (typeof props.node.action === 'string') {
    link = _react2.default.createElement(
      'a',
      { href: props.node.action, target: !props.node.self ? '_blank' : null },
      iconParent ? _react2.default.createElement(_Icon2.default, { name: iconParent, fill: 'currentColor' }) : null,
      props.node.name
    );
  } else if (typeof props.node.action === 'function') {
    link = _react2.default.createElement(
      'a',
      { onClick: handleClick },
      iconParent ? _react2.default.createElement(_Icon2.default, { name: iconParent, fill: 'currentColor' }) : null,
      props.node.name
    );
  }

  return _react2.default.createElement(
    'li',
    null,
    props.node.external && typeof props.node.action === 'string' || typeof props.node.action === 'function' ? _react2.default.createElement(
      'div',
      null,
      link,
      childnodes ? _react2.default.createElement(
        'ul',
        { className: iconParent ? _style2.default.indent : null },
        childnodes
      ) : null
    ) : _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _reactRouter.Link,
        { to: props.node.action, activeClassName: _style2.default.active },
        iconParent ? _react2.default.createElement(_Icon2.default, { name: iconParent, fill: 'currentColor' }) : null,
        props.node.name
      ),
      childnodes ? _react2.default.createElement(
        'ul',
        { className: iconParent ? _style2.default.indent : null },
        childnodes
      ) : null
    )
  );
};

exports.default = Node;