UNPKG

4.56 kBJavaScriptView Raw
1import _objectWithoutPropertiesLoose from "@babel/runtime-corejs2/helpers/esm/objectWithoutPropertiesLoose";
2import _extends from "@babel/runtime-corejs2/helpers/esm/extends";
3import _inheritsLoose from "@babel/runtime-corejs2/helpers/esm/inheritsLoose";
4import classNames from 'classnames';
5import PropTypes from 'prop-types';
6import React, { cloneElement } from 'react';
7import uncontrollable from 'uncontrollable';
8import { bsClass, getClassSet, splitBsPropsAndOmit } from './utils/bootstrapUtils';
9import ValidComponentChildren from './utils/ValidComponentChildren';
10import { generatedId } from './utils/PropTypes';
11var propTypes = {
12 accordion: PropTypes.bool,
13
14 /**
15 * When `accordion` is enabled, `activeKey` controls the which child `Panel` is expanded. `activeKey` should
16 * match a child Panel `eventKey` prop exactly.
17 *
18 * @controllable onSelect
19 */
20 activeKey: PropTypes.any,
21
22 /**
23 * A callback fired when a child Panel collapse state changes. It's called with the next expanded `activeKey`
24 *
25 * @controllable activeKey
26 */
27 onSelect: PropTypes.func,
28
29 /**
30 * An HTML role attribute
31 */
32 role: PropTypes.string,
33
34 /**
35 * A function that takes an eventKey and type and returns a
36 * unique id for each Panel heading and Panel Collapse. The function _must_ be a pure function,
37 * meaning it should always return the _same_ id for the same set of inputs. The default
38 * value requires that an `id` to be set for the PanelGroup.
39 *
40 * The `type` argument will either be `"body"` or `"heading"`.
41 *
42 * @defaultValue (eventKey, type) => `${this.props.id}-${type}-${key}`
43 */
44 generateChildId: PropTypes.func,
45
46 /**
47 * HTML id attribute, required if no `generateChildId` prop
48 * is specified.
49 */
50 id: generatedId('PanelGroup')
51};
52var defaultProps = {
53 accordion: false
54};
55var childContextTypes = {
56 $bs_panelGroup: PropTypes.shape({
57 getId: PropTypes.func,
58 headerRole: PropTypes.string,
59 panelRole: PropTypes.string,
60 activeKey: PropTypes.any,
61 onToggle: PropTypes.func
62 })
63};
64
65var PanelGroup =
66/*#__PURE__*/
67function (_React$Component) {
68 _inheritsLoose(PanelGroup, _React$Component);
69
70 function PanelGroup() {
71 var _this;
72
73 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
74 args[_key] = arguments[_key];
75 }
76
77 _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
78
79 _this.handleSelect = function (key, expanded, e) {
80 if (expanded) {
81 _this.props.onSelect(key, e);
82 } else if (_this.props.activeKey === key) {
83 _this.props.onSelect(null, e);
84 }
85 };
86
87 return _this;
88 }
89
90 var _proto = PanelGroup.prototype;
91
92 _proto.getChildContext = function getChildContext() {
93 var _this$props = this.props,
94 activeKey = _this$props.activeKey,
95 accordion = _this$props.accordion,
96 generateChildId = _this$props.generateChildId,
97 id = _this$props.id;
98 var getId = null;
99
100 if (accordion) {
101 getId = generateChildId || function (key, type) {
102 return id ? id + "-" + type + "-" + key : null;
103 };
104 }
105
106 return {
107 $bs_panelGroup: _extends({
108 getId: getId,
109 headerRole: 'tab',
110 panelRole: 'tabpanel'
111 }, accordion && {
112 activeKey: activeKey,
113 onToggle: this.handleSelect
114 })
115 };
116 };
117
118 _proto.render = function render() {
119 var _this$props2 = this.props,
120 accordion = _this$props2.accordion,
121 className = _this$props2.className,
122 children = _this$props2.children,
123 props = _objectWithoutPropertiesLoose(_this$props2, ["accordion", "className", "children"]);
124
125 var _splitBsPropsAndOmit = splitBsPropsAndOmit(props, ['onSelect', 'activeKey']),
126 bsProps = _splitBsPropsAndOmit[0],
127 elementProps = _splitBsPropsAndOmit[1];
128
129 if (accordion) {
130 elementProps.role = elementProps.role || 'tablist';
131 }
132
133 var classes = getClassSet(bsProps);
134 return React.createElement("div", _extends({}, elementProps, {
135 className: classNames(className, classes)
136 }), ValidComponentChildren.map(children, function (child) {
137 return cloneElement(child, {
138 bsStyle: child.props.bsStyle || bsProps.bsStyle
139 });
140 }));
141 };
142
143 return PanelGroup;
144}(React.Component);
145
146PanelGroup.propTypes = propTypes;
147PanelGroup.defaultProps = defaultProps;
148PanelGroup.childContextTypes = childContextTypes;
149export default uncontrollable(bsClass('panel-group', PanelGroup), {
150 activeKey: 'onSelect'
151});
\No newline at end of file