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
"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; |