211 lines
6.9 KiB
JavaScript
211 lines
6.9 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
|
|
|
|
var _get2 = _interopRequireDefault(require("lodash/get"));
|
|
|
|
var _pick2 = _interopRequireDefault(require("lodash/pick"));
|
|
|
|
var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var Panel =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
(0, _inheritsLoose2.default)(Panel, _React$Component);
|
|
|
|
function Panel(props) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, props) || this;
|
|
|
|
_this.handleSelect = function (event) {
|
|
event.persist();
|
|
var _this$props = _this.props,
|
|
onSelect = _this$props.onSelect,
|
|
eventKey = _this$props.eventKey;
|
|
|
|
if (onSelect) {
|
|
onSelect(eventKey, event);
|
|
}
|
|
|
|
_this.handleToggle();
|
|
};
|
|
|
|
_this.handleToggle = function () {
|
|
_this.setState({
|
|
expanded: !_this.state.expanded
|
|
});
|
|
};
|
|
|
|
_this.addPrefix = function (name) {
|
|
return (0, _utils.prefix)(_this.props.classPrefix)(name);
|
|
};
|
|
|
|
_this.state = {
|
|
expanded: props.defaultExpanded
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Panel.prototype;
|
|
|
|
_proto.isExpanded = function isExpanded() {
|
|
return (0, _isUndefined2.default)(this.props.expanded) ? this.state.expanded : this.props.expanded;
|
|
};
|
|
|
|
_proto.renderCollapsibleTitle = function renderCollapsibleTitle(header, headerRole) {
|
|
return React.createElement("span", {
|
|
className: this.addPrefix('title'),
|
|
role: "presentation"
|
|
}, this.renderAnchor(header, headerRole));
|
|
};
|
|
|
|
_proto.renderCollapsibleBody = function renderCollapsibleBody(panelRole) {
|
|
var _this2 = this;
|
|
|
|
var id = this.props.id;
|
|
var collapseProps = (0, _extends2.default)({}, (0, _pick2.default)(this.props, Object.keys(_Collapse.default.propTypes)), {
|
|
in: this.isExpanded()
|
|
});
|
|
var props = {
|
|
id: id ? "" + id : null,
|
|
'aria-hidden': !this.isExpanded()
|
|
};
|
|
|
|
if (panelRole) {
|
|
props.role = panelRole;
|
|
}
|
|
|
|
return React.createElement(_Collapse.default, collapseProps, function (transitionProps, ref) {
|
|
var className = transitionProps.className,
|
|
rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, ["className"]);
|
|
return React.createElement("div", (0, _extends2.default)({}, props, rest, {
|
|
className: (0, _classnames.default)(_this2.addPrefix('collapse'), className),
|
|
ref: ref
|
|
}), _this2.renderBody());
|
|
});
|
|
};
|
|
|
|
_proto.renderBody = function renderBody() {
|
|
var _classNames;
|
|
|
|
var _this$props2 = this.props,
|
|
children = _this$props2.children,
|
|
bodyFill = _this$props2.bodyFill;
|
|
var classes = (0, _classnames.default)(this.addPrefix('body'), (_classNames = {}, _classNames[this.addPrefix('body-fill')] = bodyFill, _classNames));
|
|
return React.createElement("div", {
|
|
className: classes
|
|
}, children);
|
|
};
|
|
|
|
_proto.renderHeading = function renderHeading(headerRole) {
|
|
var header = this.props.header;
|
|
|
|
if (!header) {
|
|
return null;
|
|
}
|
|
|
|
if (!React.isValidElement(header) || Array.isArray(header)) {
|
|
header = this.props.collapsible ? this.renderCollapsibleTitle(header, headerRole) : header;
|
|
} else {
|
|
var className = (0, _classnames.default)(this.addPrefix('title'), (0, _get2.default)(header, 'props.className'));
|
|
header = React.cloneElement(header, {
|
|
className: className
|
|
});
|
|
}
|
|
|
|
return React.createElement("div", {
|
|
role: "rowheader",
|
|
className: this.addPrefix('heading'),
|
|
onClick: this.handleSelect,
|
|
tabIndex: -1
|
|
}, header);
|
|
};
|
|
|
|
_proto.renderAnchor = function renderAnchor(header, headerRole) {
|
|
var _this$props3 = this.props,
|
|
id = _this$props3.id,
|
|
collapsible = _this$props3.collapsible;
|
|
return React.createElement("span", {
|
|
"aria-controls": collapsible ? "" + id : null,
|
|
className: this.isExpanded() ? null : 'collapsed',
|
|
"aria-expanded": this.isExpanded(),
|
|
"aria-selected": this.isExpanded(),
|
|
role: headerRole
|
|
}, header);
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _classNames2;
|
|
|
|
var _this$props4 = this.props,
|
|
headerRole = _this$props4.headerRole,
|
|
panelRole = _this$props4.panelRole,
|
|
className = _this$props4.className,
|
|
collapsible = _this$props4.collapsible,
|
|
bordered = _this$props4.bordered,
|
|
shaded = _this$props4.shaded,
|
|
classPrefix = _this$props4.classPrefix,
|
|
id = _this$props4.id,
|
|
props = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["headerRole", "panelRole", "className", "collapsible", "bordered", "shaded", "classPrefix", "id"]);
|
|
var classes = (0, _classnames.default)(className, classPrefix, this.addPrefix('default'), (_classNames2 = {}, _classNames2[this.addPrefix('in')] = this.isExpanded(), _classNames2[this.addPrefix('collapsible')] = collapsible, _classNames2[this.addPrefix('bordered')] = bordered, _classNames2[this.addPrefix('shaded')] = shaded, _classNames2));
|
|
var unhandled = (0, _utils.getUnhandledProps)(Panel, props);
|
|
return React.createElement("div", (0, _extends2.default)({}, unhandled, {
|
|
className: classes,
|
|
id: collapsible ? null : id
|
|
}), this.renderHeading(headerRole), collapsible ? this.renderCollapsibleBody(panelRole) : this.renderBody());
|
|
};
|
|
|
|
return Panel;
|
|
}(React.Component);
|
|
|
|
Panel.propTypes = {
|
|
collapsible: _propTypes.default.bool,
|
|
bordered: _propTypes.default.bool,
|
|
shaded: _propTypes.default.bool,
|
|
bodyFill: _propTypes.default.bool,
|
|
header: _propTypes.default.any,
|
|
defaultExpanded: _propTypes.default.bool,
|
|
expanded: _propTypes.default.bool,
|
|
eventKey: _propTypes.default.any,
|
|
headerRole: _propTypes.default.string,
|
|
panelRole: _propTypes.default.string,
|
|
classPrefix: _propTypes.default.string,
|
|
children: _propTypes.default.node,
|
|
onSelect: _propTypes.default.func,
|
|
onEnter: _propTypes.default.func,
|
|
onEntering: _propTypes.default.func,
|
|
onEntered: _propTypes.default.func,
|
|
onExit: _propTypes.default.func,
|
|
onExiting: _propTypes.default.func,
|
|
onExited: _propTypes.default.func,
|
|
className: _propTypes.default.string
|
|
};
|
|
|
|
var _default = (0, _utils.defaultProps)({
|
|
classPrefix: 'panel'
|
|
})(Panel);
|
|
|
|
exports.default = _default;
|
|
module.exports = exports.default; |