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.
221 lines
5.6 KiB
221 lines
5.6 KiB
"use strict"; |
|
|
|
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; |
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; |
|
|
|
var _react = require("react"); |
|
|
|
var React = _interopRequire(_react); |
|
|
|
var cloneElement = _react.cloneElement; |
|
|
|
var classNames = _interopRequire(require("classnames")); |
|
|
|
var BootstrapMixin = _interopRequire(require("./BootstrapMixin")); |
|
|
|
var CollapsableMixin = _interopRequire(require("./CollapsableMixin")); |
|
|
|
var Panel = React.createClass({ |
|
displayName: "Panel", |
|
|
|
mixins: [BootstrapMixin, CollapsableMixin], |
|
|
|
propTypes: { |
|
collapsable: React.PropTypes.bool, |
|
onSelect: React.PropTypes.func, |
|
header: React.PropTypes.node, |
|
id: React.PropTypes.string, |
|
footer: React.PropTypes.node, |
|
eventKey: React.PropTypes.any |
|
}, |
|
|
|
getDefaultProps: function getDefaultProps() { |
|
return { |
|
bsClass: "panel", |
|
bsStyle: "default" |
|
}; |
|
}, |
|
|
|
handleSelect: function handleSelect(e) { |
|
e.selected = true; |
|
|
|
if (this.props.onSelect) { |
|
this.props.onSelect(e, this.props.eventKey); |
|
} else { |
|
e.preventDefault(); |
|
} |
|
|
|
if (e.selected) { |
|
this.handleToggle(); |
|
} |
|
}, |
|
|
|
handleToggle: function handleToggle() { |
|
this.setState({ expanded: !this.state.expanded }); |
|
}, |
|
|
|
getCollapsableDimensionValue: function getCollapsableDimensionValue() { |
|
return React.findDOMNode(this.refs.panel).scrollHeight; |
|
}, |
|
|
|
getCollapsableDOMNode: function getCollapsableDOMNode() { |
|
if (!this.isMounted() || !this.refs || !this.refs.panel) { |
|
return null; |
|
} |
|
|
|
return React.findDOMNode(this.refs.panel); |
|
}, |
|
|
|
render: function render() { |
|
var classes = this.getBsClassSet(); |
|
|
|
return React.createElement( |
|
"div", |
|
_extends({}, this.props, { |
|
className: classNames(this.props.className, classes), |
|
id: this.props.collapsable ? null : this.props.id, onSelect: null }), |
|
this.renderHeading(), |
|
this.props.collapsable ? this.renderCollapsableBody() : this.renderBody(), |
|
this.renderFooter() |
|
); |
|
}, |
|
|
|
renderCollapsableBody: function renderCollapsableBody() { |
|
var collapseClass = this.prefixClass("collapse"); |
|
|
|
return React.createElement( |
|
"div", |
|
{ |
|
className: classNames(this.getCollapsableClassSet(collapseClass)), |
|
id: this.props.id, |
|
ref: "panel", |
|
"aria-expanded": this.isExpanded() ? "true" : "false" }, |
|
this.renderBody() |
|
); |
|
}, |
|
|
|
renderBody: function renderBody() { |
|
var allChildren = this.props.children; |
|
var bodyElements = []; |
|
var panelBodyChildren = []; |
|
var bodyClass = this.prefixClass("body"); |
|
|
|
function getProps() { |
|
return { key: bodyElements.length }; |
|
} |
|
|
|
function addPanelChild(child) { |
|
bodyElements.push(cloneElement(child, getProps())); |
|
} |
|
|
|
function addPanelBody(children) { |
|
bodyElements.push(React.createElement( |
|
"div", |
|
_extends({ className: bodyClass }, getProps()), |
|
children |
|
)); |
|
} |
|
|
|
function maybeRenderPanelBody() { |
|
if (panelBodyChildren.length === 0) { |
|
return; |
|
} |
|
|
|
addPanelBody(panelBodyChildren); |
|
panelBodyChildren = []; |
|
} |
|
|
|
// Handle edge cases where we should not iterate through children. |
|
if (!Array.isArray(allChildren) || allChildren.length === 0) { |
|
if (this.shouldRenderFill(allChildren)) { |
|
addPanelChild(allChildren); |
|
} else { |
|
addPanelBody(allChildren); |
|
} |
|
} else { |
|
|
|
allChildren.forEach((function (child) { |
|
if (this.shouldRenderFill(child)) { |
|
maybeRenderPanelBody(); |
|
|
|
// Separately add the filled element. |
|
addPanelChild(child); |
|
} else { |
|
panelBodyChildren.push(child); |
|
} |
|
}).bind(this)); |
|
|
|
maybeRenderPanelBody(); |
|
} |
|
|
|
return bodyElements; |
|
}, |
|
|
|
shouldRenderFill: function shouldRenderFill(child) { |
|
return React.isValidElement(child) && child.props.fill != null; |
|
}, |
|
|
|
renderHeading: function renderHeading() { |
|
var header = this.props.header; |
|
|
|
if (!header) { |
|
return null; |
|
} |
|
|
|
if (!React.isValidElement(header) || Array.isArray(header)) { |
|
header = this.props.collapsable ? this.renderCollapsableTitle(header) : header; |
|
} else if (this.props.collapsable) { |
|
|
|
header = cloneElement(header, { |
|
className: classNames(this.prefixClass("title")), |
|
children: this.renderAnchor(header.props.children) |
|
}); |
|
} else { |
|
|
|
header = cloneElement(header, { |
|
className: classNames(this.prefixClass("title")) |
|
}); |
|
} |
|
|
|
return React.createElement( |
|
"div", |
|
{ className: this.prefixClass("heading") }, |
|
header |
|
); |
|
}, |
|
|
|
renderAnchor: function renderAnchor(header) { |
|
return React.createElement( |
|
"a", |
|
{ |
|
href: "#" + (this.props.id || ""), |
|
className: this.isExpanded() ? null : "collapsed", |
|
"aria-expanded": this.isExpanded() ? "true" : "false", |
|
onClick: this.handleSelect }, |
|
header |
|
); |
|
}, |
|
|
|
renderCollapsableTitle: function renderCollapsableTitle(header) { |
|
return React.createElement( |
|
"h4", |
|
{ className: this.prefixClass("title") }, |
|
this.renderAnchor(header) |
|
); |
|
}, |
|
|
|
renderFooter: function renderFooter() { |
|
if (!this.props.footer) { |
|
return null; |
|
} |
|
|
|
return React.createElement( |
|
"div", |
|
{ className: this.prefixClass("footer") }, |
|
this.props.footer |
|
); |
|
} |
|
}); |
|
|
|
module.exports = Panel; |