react-nav-bar/lib/components/navBar/NavBar.js

Simple yet very coustomizable navigation bar for react

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _menuShapes = require('./../../lib/menuShapes');

var _utils = require('./../../lib/utils');

var _constants = require('./../../lib/constants');

var _Menu = require('./../menu/Menu');

var _Menu2 = _interopRequireDefault(_Menu);

require('./../../lib/themes');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var NavBar = function (_Component) {
  _inherits(NavBar, _Component);

  function NavBar(props) {
    _classCallCheck(this, NavBar);

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(NavBar).call(this, props));

    _this.state = {
      menus: _this.prepareMenus({
        menus: _this.props.menus,
        location: _this.props.location
      })
    };
    return _this;
  }

  /**
   * recursivly check if menus are active.
   *
   * @param {Array} menus
   * @param {Object} location
   * @returns {*}
   */


  _createClass(NavBar, [{
    key: 'prepareMenus',
    value: function prepareMenus(_ref) {
      var _this2 = this;

      var menus = _ref.menus;
      var location = _ref.location;

      return menus.map(function (menu) {
        var isActive = (0, _utils.isMenuObject)(menu) ? (0, _utils.checkActive)({ menu: menu, location: location }) : undefined;
        var subMenus = !_lodash2["default"].isEmpty(menu.subMenus) ? _this2.prepareMenus({ menus: menu.subMenus, location: location }) : undefined;

        return Object.assign({}, menu, isActive && { active: isActive }, subMenus && { subMenus: subMenus });
      });
    }

    /**
     * recurisvly renders the menus.
     *
     * @param {Array} menus
     * @param {Number} parentIndex
     * @param {Object} parent
     * @returns {*}
     */

  }, {
    key: 'renderMenus',
    value: function renderMenus(menus, parentIndex, parent) {
      var _this3 = this;

      return menus.map(function (menu, index) {

        // if this menu is a simple react component dont change it
        if (!(0, _utils.isMenuObject)(menu)) {
          var menuComponent = (0, _react.createClass)({
            render: function render() {
              return menu;
            }
          });
          return (0, _react.createElement)(menuComponent, { key: index });
        }

        if (_lodash2["default"].isEmpty(menu.subMenus)) {
          if (menu.active && parent) parent.active = true;

          return (0, _react.createElement)(_Menu2["default"], Object.assign({
            opened: false,
            permission: true,
            visible: false,
            subMenus: []
          }, {
            key: index,
            theme: _this3.props.theme,
            index: index,
            toggle: _this3.props.toggle,
            parentIndex: parentIndex || 0,
            openOnHover: _this3.props.openOnHover
          }, menu));
        }

        var children = _this3.renderMenus(menu.subMenus, index);

        /**
         * because top parent doesnt know if a children of a children is active we check the top parent children
         * in case of
         *
         * { paren, submenus: [
         *  {child},
         *  {child, submenuds:[
         *    {child} ---------------- if this menu is active top parent wont know about it until recursion is over
         *  ]},
         *
         * ]}
         *
         */
        if (!parent) {
          _lodash2["default"].forEach(menu.subMenus, function (subMenu) {
            if (subMenu.active) {
              menu.active = true;
              return false;
            }
          });
        }
        return (0, _react.createElement)(_Menu2["default"], Object.assign({
          opened: false,
          permission: true,
          visible: false,
          subMenus: []
        }, {
          key: index,
          theme: _this3.props.theme,
          spring: _this3.props.spring,
          toggle: _this3.props.toggle,
          index: index,
          parentIndex: parentIndex || 0,
          openOnHover: _this3.props.openOnHover
        }, menu), children);
      });
    }

    /**
     *
     * Updating component in - case on menu change
     * @param props
     */

  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(props) {
      if (props.menus) {
        this.setState({ menus: this.prepareMenus({ menus: props.menus, location: props.location }) });
      }
    }

    /**
     * component render
     *
     * @returns {XML}
     */

  }, {
    key: 'render',
    value: function render() {
      var theme = this.props.theme;

      theme = theme || _constants.DEFAULT_NAME;
      var menusMarkup = this.renderMenus(this.state.menus);
      return _react2["default"].createElement(
        'ul',
        { className: (0, _utils.createClassName)({ theme: theme, classNames: 'nav-ul' }) },
        menusMarkup
      );
    }
  }]);

  return NavBar;
}(_react.Component);

exports["default"] = NavBar;


NavBar.propTypes = {
  location: _react.PropTypes.object.isRequired,
  // array of all menus
  theme: _react.PropTypes.string,
  menus: _react.PropTypes.array,
  spring: _menuShapes.springShape,
  toggle: _react.PropTypes.oneOfType([_menuShapes.toggleShape, _react.PropTypes.bool]),
  openOnHover: _react.PropTypes.bool
};