1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import classNames from 'classnames';
|
11 | import { polyfill } from 'react-lifecycles-compat';
|
12 | import ConfigProvider from '../config-provider';
|
13 | import { func, obj } from '../util';
|
14 | import Panel from './panel';
|
15 |
|
16 |
|
17 | var Collapse = (_temp = _class = function (_React$Component) {
|
18 | _inherits(Collapse, _React$Component);
|
19 |
|
20 | function Collapse(props) {
|
21 | _classCallCheck(this, Collapse);
|
22 |
|
23 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
24 |
|
25 | var expandedKeys = void 0;
|
26 | if ('expandedKeys' in props) {
|
27 | expandedKeys = props.expandedKeys;
|
28 | } else {
|
29 | expandedKeys = props.defaultExpandedKeys;
|
30 | }
|
31 |
|
32 | _this.state = {
|
33 | expandedKeys: typeof expandedKeys === 'undefined' ? [] : expandedKeys
|
34 | };
|
35 | return _this;
|
36 | }
|
37 |
|
38 | Collapse.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
|
39 | if ('expandedKeys' in props) {
|
40 | return {
|
41 | expandedKeys: typeof props.expandedKeys === 'undefined' ? [] : props.expandedKeys
|
42 | };
|
43 | }
|
44 | return null;
|
45 | };
|
46 |
|
47 | Collapse.prototype.onItemClick = function onItemClick(key) {
|
48 | var expandedKeys = this.state.expandedKeys;
|
49 | if (this.props.accordion) {
|
50 | expandedKeys = String(expandedKeys[0]) === String(key) ? [] : [key];
|
51 | } else {
|
52 | expandedKeys = [].concat(expandedKeys);
|
53 | var stringKey = String(key);
|
54 | var index = expandedKeys.findIndex(function (k) {
|
55 | return String(k) === stringKey;
|
56 | });
|
57 | var isExpanded = index > -1;
|
58 | if (isExpanded) {
|
59 | expandedKeys.splice(index, 1);
|
60 | } else {
|
61 | expandedKeys.push(key);
|
62 | }
|
63 | }
|
64 | this.setExpandedKey(expandedKeys);
|
65 | };
|
66 |
|
67 | Collapse.prototype.genratePanelId = function genratePanelId(itemId, index) {
|
68 | var collapseId = this.props.id;
|
69 |
|
70 | var id = void 0;
|
71 | if (itemId) {
|
72 |
|
73 | id = itemId;
|
74 | } else if (collapseId) {
|
75 |
|
76 | id = collapseId + '-panel-' + index;
|
77 | }
|
78 | return id;
|
79 | };
|
80 |
|
81 | Collapse.prototype.getProps = function getProps(item, index, key) {
|
82 | var _this2 = this;
|
83 |
|
84 | var expandedKeys = this.state.expandedKeys;
|
85 | var title = item.title;
|
86 |
|
87 | var disabled = this.props.disabled;
|
88 |
|
89 | if (!disabled) {
|
90 | disabled = item.disabled;
|
91 | }
|
92 |
|
93 | var isExpanded = false;
|
94 |
|
95 | if (this.props.accordion) {
|
96 | isExpanded = String(expandedKeys[0]) === String(key);
|
97 | } else {
|
98 | isExpanded = expandedKeys.some(function (expandedKey) {
|
99 | if (expandedKey === null || expandedKey === undefined || key === null || key === undefined) {
|
100 | return false;
|
101 | }
|
102 |
|
103 | if (expandedKey === key || expandedKey.toString() === key.toString()) {
|
104 | return true;
|
105 | }
|
106 | return false;
|
107 | });
|
108 | }
|
109 |
|
110 | var id = this.genratePanelId(item.id, index);
|
111 | return {
|
112 | key: key,
|
113 | title: title,
|
114 | isExpanded: isExpanded,
|
115 | disabled: disabled,
|
116 | id: id,
|
117 | onClick: disabled ? null : function () {
|
118 | _this2.onItemClick(key);
|
119 | if ('onClick' in item) {
|
120 | item.onClick(key);
|
121 | }
|
122 | }
|
123 | };
|
124 | };
|
125 |
|
126 | Collapse.prototype.getItemsByDataSource = function getItemsByDataSource() {
|
127 | var _this3 = this;
|
128 |
|
129 | var props = this.props;
|
130 | var dataSource = props.dataSource;
|
131 |
|
132 |
|
133 | var hasKeys = dataSource.some(function (item) {
|
134 | return 'key' in item;
|
135 | });
|
136 |
|
137 | return dataSource.map(function (item, index) {
|
138 |
|
139 | var key = hasKeys ? item.key : '' + index;
|
140 | return React.createElement(
|
141 | Panel,
|
142 | _extends({}, _this3.getProps(item, index, key), { key: key }),
|
143 | item.content
|
144 | );
|
145 | });
|
146 | };
|
147 |
|
148 | Collapse.prototype.getItemsByChildren = function getItemsByChildren() {
|
149 | var _this4 = this;
|
150 |
|
151 |
|
152 | var allKeys = React.Children.map(this.props.children, function (child) {
|
153 | return child && child.key;
|
154 | });
|
155 | var hasKeys = Boolean(allKeys && allKeys.length);
|
156 |
|
157 | return React.Children.map(this.props.children, function (child, index) {
|
158 | if (child && typeof child.type === 'function' && child.type.isNextPanel) {
|
159 |
|
160 | var key = hasKeys ? child.key : '' + index;
|
161 | return React.cloneElement(child, _this4.getProps(child.props, index, key));
|
162 | } else {
|
163 | return child;
|
164 | }
|
165 | });
|
166 | };
|
167 |
|
168 | Collapse.prototype.setExpandedKey = function setExpandedKey(expandedKeys) {
|
169 | if (!('expandedKeys' in this.props)) {
|
170 | this.setState({ expandedKeys: expandedKeys });
|
171 | }
|
172 | this.props.onExpand(this.props.accordion ? expandedKeys[0] : expandedKeys);
|
173 | };
|
174 |
|
175 | Collapse.prototype.render = function render() {
|
176 | var _classNames;
|
177 |
|
178 | var _props = this.props,
|
179 | prefix = _props.prefix,
|
180 | className = _props.className,
|
181 | style = _props.style,
|
182 | disabled = _props.disabled,
|
183 | dataSource = _props.dataSource,
|
184 | id = _props.id,
|
185 | rtl = _props.rtl;
|
186 |
|
187 | var collapseClassName = classNames((_classNames = {}, _classNames[prefix + 'collapse'] = true, _classNames[prefix + 'collapse-disabled'] = disabled, _classNames[className] = Boolean(className), _classNames));
|
188 |
|
189 | var others = obj.pickOthers(Collapse.propTypes, this.props);
|
190 | return React.createElement(
|
191 | 'div',
|
192 | _extends({
|
193 | id: id,
|
194 | className: collapseClassName,
|
195 | style: style
|
196 | }, others, {
|
197 | role: 'presentation',
|
198 | dir: rtl ? 'rtl' : undefined
|
199 | }),
|
200 | dataSource ? this.getItemsByDataSource() : this.getItemsByChildren()
|
201 | );
|
202 | };
|
203 |
|
204 | return Collapse;
|
205 | }(React.Component), _class.propTypes = {
|
206 | |
207 |
|
208 |
|
209 | prefix: PropTypes.string,
|
210 | |
211 |
|
212 |
|
213 | style: PropTypes.object,
|
214 | |
215 |
|
216 |
|
217 | dataSource: PropTypes.array,
|
218 | |
219 |
|
220 |
|
221 | defaultExpandedKeys: PropTypes.array,
|
222 | |
223 |
|
224 |
|
225 | expandedKeys: PropTypes.array,
|
226 | |
227 |
|
228 |
|
229 | onExpand: PropTypes.func,
|
230 | |
231 |
|
232 |
|
233 | disabled: PropTypes.bool,
|
234 | |
235 |
|
236 |
|
237 | className: PropTypes.string,
|
238 | |
239 |
|
240 |
|
241 | accordion: PropTypes.bool,
|
242 | children: PropTypes.node,
|
243 | id: PropTypes.string,
|
244 | rtl: PropTypes.bool
|
245 | }, _class.defaultProps = {
|
246 | accordion: false,
|
247 | prefix: 'next-',
|
248 | onExpand: func.noop
|
249 | }, _class.contextTypes = {
|
250 | prefix: PropTypes.string
|
251 | }, _temp);
|
252 | Collapse.displayName = 'Collapse';
|
253 |
|
254 |
|
255 | export default polyfill(ConfigProvider.config(Collapse)); |
\ | No newline at end of file |