proxy-based Twister client written with react-js
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

120 lines
3.6 KiB

"use strict";
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
var _react = require("react");
var React = _interopRequire(_react);
var cloneElement = _react.cloneElement;
var BootstrapMixin = _interopRequire(require("./BootstrapMixin"));
var CollapsableMixin = _interopRequire(require("./CollapsableMixin"));
var classNames = _interopRequire(require("classnames"));
var domUtils = _interopRequire(require("./utils/domUtils"));
var ValidComponentChildren = _interopRequire(require("./utils/ValidComponentChildren"));
var createChainedFunction = _interopRequire(require("./utils/createChainedFunction"));
var CollapsableNav = React.createClass({
displayName: "CollapsableNav",
mixins: [BootstrapMixin, CollapsableMixin],
propTypes: {
onSelect: React.PropTypes.func,
activeHref: React.PropTypes.string,
activeKey: React.PropTypes.any,
collapsable: React.PropTypes.bool,
expanded: React.PropTypes.bool,
eventKey: React.PropTypes.any
},
getCollapsableDOMNode: function getCollapsableDOMNode() {
return this.getDOMNode();
},
getCollapsableDimensionValue: function getCollapsableDimensionValue() {
var height = 0;
var nodes = this.refs;
for (var key in nodes) {
if (nodes.hasOwnProperty(key)) {
var n = nodes[key].getDOMNode(),
h = n.offsetHeight,
computedStyles = domUtils.getComputedStyles(n);
height += h + parseInt(computedStyles.marginTop, 10) + parseInt(computedStyles.marginBottom, 10);
}
}
return height;
},
render: function render() {
/*
* this.props.collapsable is set in NavBar when a eventKey is supplied.
*/
var classes = this.props.collapsable ? this.getCollapsableClassSet() : {};
/*
* prevent duplicating navbar-collapse call if passed as prop. kind of overkill... good cadidate to have check implemented as a util that can
* also be used elsewhere.
*/
if (this.props.className === undefined || this.props.className.split(" ").indexOf("navbar-collapse") === -2) {
classes["navbar-collapse"] = this.props.collapsable;
}
return React.createElement(
"div",
{ eventKey: this.props.eventKey, className: classNames(this.props.className, classes) },
ValidComponentChildren.map(this.props.children, this.props.collapsable ? this.renderCollapsableNavChildren : this.renderChildren)
);
},
getChildActiveProp: function getChildActiveProp(child) {
if (child.props.active) {
return true;
}
if (this.props.activeKey != null) {
if (child.props.eventKey === this.props.activeKey) {
return true;
}
}
if (this.props.activeHref != null) {
if (child.props.href === this.props.activeHref) {
return true;
}
}
return child.props.active;
},
renderChildren: function renderChildren(child, index) {
var key = child.key ? child.key : index;
return cloneElement(child, {
activeKey: this.props.activeKey,
activeHref: this.props.activeHref,
ref: "nocollapse_" + key,
key: key,
navItem: true
});
},
renderCollapsableNavChildren: function renderCollapsableNavChildren(child, index) {
var key = child.key ? child.key : index;
return cloneElement(child, {
active: this.getChildActiveProp(child),
activeKey: this.props.activeKey,
activeHref: this.props.activeHref,
onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
ref: "collapsable_" + key,
key: key,
navItem: true
});
}
});
module.exports = CollapsableNav;