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
120 lines
3.6 KiB
10 years ago
|
"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;
|