boldr-ui/SideNav/SideNav.js

UI components for Boldr

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Nav = require('./Nav');

var _Nav2 = _interopRequireDefault(_Nav);

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

var contextTypes = {
  highlightColor: _propTypes2.default.string,
  highlightBgColor: _propTypes2.default.string,
  hoverBgColor: _propTypes2.default.string,
  hoverColor: _propTypes2.default.string
};

var noop = function noop() {};

var SideNav = function (_Component) {
  (0, _inherits3.default)(SideNav, _Component);

  function SideNav(props) {
    (0, _classCallCheck3.default)(this, SideNav);

    var _this = (0, _possibleConstructorReturn3.default)(this, (SideNav.__proto__ || (0, _getPrototypeOf2.default)(SideNav)).call(this, props));

    _this.onNavClick = function (id) {
      var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
      var _this$props$onItemSel = _this.props.onItemSelection,
          onItemSelection = _this$props$onItemSel === undefined ? noop : _this$props$onItemSel;


      if (_this.state.defaultSelected) {
        //lets manage it
        _this.setState({ selected: id }, function () {
          onItemSelection(id, parent);
        });
      } else {
        onItemSelection(id, parent);
      }
    };

    _this.state = {
      selected: props.defaultSelected,
      defaultSelected: props.defaultSelected
    };
    return _this;
  }

  (0, _createClass3.default)(SideNav, [{
    key: 'getChildContext',
    value: function getChildContext() {
      var _props = this.props,
          highlightColor = _props.highlightColor,
          highlightBgColor = _props.highlightBgColor,
          hoverBgColor = _props.hoverBgColor,
          hoverColor = _props.hoverColor;

      return { highlightColor: highlightColor, highlightBgColor: highlightBgColor, hoverBgColor: hoverBgColor, hoverColor: hoverColor };
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var children = this.props.children;

      return _react2.default.createElement(
        'div',
        null,
        _react.Children.toArray(children).map(function (child) {
          if (child !== null && child.type === _Nav2.default) {
            var currentSelected = _this2.state.defaultSelected ? _this2.state.selected : _this2.props.selected;
            return (0, _react.cloneElement)(child, {
              highlightedId: currentSelected,
              onClick: _this2.onNavClick
            });
          }
          return child;
        })
      );
    }
  }]);
  return SideNav;
}(_react.Component);

SideNav.childContextTypes = contextTypes;
SideNav.propTypes = process.env.NODE_ENV !== "production" ? (0, _extends3.default)({}, contextTypes, {
  selected: _propTypes2.default.string,
  defaultSelected: _propTypes2.default.string,
  onItemSelection: _propTypes2.default.func
}) : {};
exports.default = SideNav;