1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
6 |
|
7 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
8 |
|
9 | var _extends2 = require('babel-runtime/helpers/extends');
|
10 |
|
11 | var _extends3 = _interopRequireDefault(_extends2);
|
12 |
|
13 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
14 |
|
15 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
16 |
|
17 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
18 |
|
19 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
20 |
|
21 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
22 |
|
23 | var _inherits3 = _interopRequireDefault(_inherits2);
|
24 |
|
25 | exports.default = expanded;
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _reactDom = require('react-dom');
|
32 |
|
33 | var _propTypes = require('prop-types');
|
34 |
|
35 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
36 |
|
37 | var _classnames2 = require('classnames');
|
38 |
|
39 | var _classnames3 = _interopRequireDefault(_classnames2);
|
40 |
|
41 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
42 |
|
43 | var _icon = require('../icon');
|
44 |
|
45 | var _icon2 = _interopRequireDefault(_icon);
|
46 |
|
47 | var _util = require('../util');
|
48 |
|
49 | var _row = require('./expanded/row');
|
50 |
|
51 | var _row2 = _interopRequireDefault(_row);
|
52 |
|
53 | var _column = require('./column');
|
54 |
|
55 | var _column2 = _interopRequireDefault(_column);
|
56 |
|
57 | var _util2 = require('./util');
|
58 |
|
59 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
60 |
|
61 | var noop = function noop() {};
|
62 |
|
63 | function expanded(BaseComponent, stickyLock) {
|
64 | var _class, _temp2;
|
65 |
|
66 |
|
67 | var ExpandedTable = (_temp2 = _class = function (_React$Component) {
|
68 | (0, _inherits3.default)(ExpandedTable, _React$Component);
|
69 |
|
70 | function ExpandedTable() {
|
71 | var _temp, _this, _ret;
|
72 |
|
73 | (0, _classCallCheck3.default)(this, ExpandedTable);
|
74 |
|
75 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
76 | args[_key] = arguments[_key];
|
77 | }
|
78 |
|
79 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
|
80 | openRowKeys: _this.props.openRowKeys || _this.props.defaultOpenRowKeys || []
|
81 | }, _this.saveExpandedRowRef = function (key, rowRef) {
|
82 | if (!_this.expandedRowRefs) {
|
83 | _this.expandedRowRefs = {};
|
84 | }
|
85 | _this.expandedRowRefs[key] = rowRef;
|
86 | }, _this.setExpandedWidth = function () {
|
87 | var prefix = _this.props.prefix;
|
88 |
|
89 | var tableEl = _this.getTableNode();
|
90 | var totalWidth = +(tableEl && tableEl.clientWidth) - 1 || '100%';
|
91 | var bodyNode = tableEl && tableEl.querySelector('.' + prefix + 'table-body');
|
92 |
|
93 | Object.keys(_this.expandedRowRefs || {}).forEach(function (key) {
|
94 | _util.dom.setStyle(_this.expandedRowRefs[key], { width: bodyNode && bodyNode.clientWidth || totalWidth });
|
95 | });
|
96 | }, _this.getTableInstance = function (instance) {
|
97 | _this.tableInc = instance;
|
98 | }, _this.expandedKeydown = function (value, record, index, e) {
|
99 | e.preventDefault();
|
100 | e.stopPropagation();
|
101 |
|
102 | if (e.keyCode === _util.KEYCODE.ENTER) {
|
103 | _this.onExpandedClick(value, record, index, e);
|
104 | }
|
105 | }, _this.renderExpandedCell = function (value, index, record) {
|
106 | var _classnames;
|
107 |
|
108 | var _this$props = _this.props,
|
109 | getExpandedColProps = _this$props.getExpandedColProps,
|
110 | prefix = _this$props.prefix,
|
111 | locale = _this$props.locale,
|
112 | rowExpandable = _this$props.rowExpandable;
|
113 |
|
114 |
|
115 | if (typeof rowExpandable === 'function' && !rowExpandable(record, index)) {
|
116 | return '';
|
117 | }
|
118 |
|
119 | var openRowKeys = _this.state.openRowKeys,
|
120 | primaryKey = _this.props.primaryKey,
|
121 | hasExpanded = openRowKeys.indexOf(record[primaryKey]) > -1,
|
122 | switchNode = hasExpanded ? _react2.default.createElement(_icon2.default, { type: 'minus', size: 'xs', className: prefix + 'table-expand-unfold' }) : _react2.default.createElement(_icon2.default, { type: 'add', size: 'xs', className: prefix + 'table-expand-fold' }),
|
123 | attrs = getExpandedColProps(record, index) || {};
|
124 |
|
125 | var cls = (0, _classnames3.default)((_classnames = {}, _classnames[prefix + 'table-expanded-ctrl'] = true, _classnames.disabled = attrs.disabled, _classnames[attrs.className] = attrs.className, _classnames));
|
126 |
|
127 | if (!attrs.disabled) {
|
128 | attrs.onClick = _this.onExpandedClick.bind(_this, value, record, index);
|
129 | }
|
130 | return _react2.default.createElement(
|
131 | 'span',
|
132 | (0, _extends3.default)({}, attrs, {
|
133 | role: 'button',
|
134 | tabIndex: '0',
|
135 | onKeyDown: _this.expandedKeydown.bind(_this, value, record, index),
|
136 | 'aria-label': hasExpanded ? locale.expanded : locale.folded,
|
137 | 'aria-expanded': hasExpanded,
|
138 | className: cls
|
139 | }),
|
140 | switchNode
|
141 | );
|
142 | }, _this.addExpandCtrl = function (columns) {
|
143 | var _this$props2 = _this.props,
|
144 | prefix = _this$props2.prefix,
|
145 | size = _this$props2.size;
|
146 |
|
147 |
|
148 | if (!columns.find(function (record) {
|
149 | return record.key === 'expanded';
|
150 | })) {
|
151 | columns.unshift({
|
152 | key: 'expanded',
|
153 | title: '',
|
154 | cell: _this.renderExpandedCell.bind(_this),
|
155 | width: size === 'small' ? 34 : 50,
|
156 | className: prefix + 'table-expanded ' + prefix + 'table-prerow',
|
157 | __normalized: true
|
158 | });
|
159 | }
|
160 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
161 | }
|
162 |
|
163 | ExpandedTable.prototype.getChildContext = function getChildContext() {
|
164 | return {
|
165 | openRowKeys: this.state.openRowKeys,
|
166 | expandedRowRender: this.props.expandedRowRender,
|
167 | expandedIndexSimulate: this.props.expandedIndexSimulate,
|
168 | expandedRowWidthEquals2Table: stickyLock,
|
169 | getExpandedRowRef: this.saveExpandedRowRef,
|
170 | getTableInstanceForExpand: this.getTableInstance,
|
171 | expandedRowIndent: stickyLock ? [0, 0] : this.props.expandedRowIndent
|
172 | };
|
173 | };
|
174 |
|
175 | ExpandedTable.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
|
176 | if ('openRowKeys' in nextProps) {
|
177 | return {
|
178 | openRowKeys: nextProps.openRowKeys || []
|
179 | };
|
180 | }
|
181 |
|
182 | return null;
|
183 | };
|
184 |
|
185 | ExpandedTable.prototype.componentDidMount = function componentDidMount() {
|
186 | this.setExpandedWidth();
|
187 | _util.events.on(window, 'resize', this.setExpandedWidth);
|
188 | };
|
189 |
|
190 | ExpandedTable.prototype.componentDidUpdate = function componentDidUpdate() {
|
191 | this.setExpandedWidth();
|
192 | };
|
193 |
|
194 | ExpandedTable.prototype.componentWillUnmount = function componentWillUnmount() {
|
195 | _util.events.off(window, 'resize', this.setExpandedWidth);
|
196 | };
|
197 |
|
198 | ExpandedTable.prototype.getTableNode = function getTableNode() {
|
199 | var table = this.tableInc;
|
200 | try {
|
201 |
|
202 |
|
203 |
|
204 | return (0, _reactDom.findDOMNode)(table.tableEl);
|
205 | } catch (error) {
|
206 | return null;
|
207 | }
|
208 | };
|
209 |
|
210 | ExpandedTable.prototype.onExpandedClick = function onExpandedClick(value, record, i, e) {
|
211 | var openRowKeys = [].concat(this.state.openRowKeys),
|
212 | primaryKey = this.props.primaryKey,
|
213 | id = record[primaryKey],
|
214 | index = openRowKeys.indexOf(id);
|
215 |
|
216 | if (index > -1) {
|
217 | openRowKeys.splice(index, 1);
|
218 | } else {
|
219 | openRowKeys.push(id);
|
220 | }
|
221 | if (!('openRowKeys' in this.props)) {
|
222 | this.setState({
|
223 | openRowKeys: openRowKeys
|
224 | });
|
225 | }
|
226 | this.props.onRowOpen(openRowKeys, id, index === -1, record);
|
227 | e.stopPropagation();
|
228 | };
|
229 |
|
230 | ExpandedTable.prototype.normalizeChildren = function normalizeChildren(children) {
|
231 | var _props = this.props,
|
232 | prefix = _props.prefix,
|
233 | size = _props.size;
|
234 |
|
235 | var toArrayChildren = _react.Children.map(children, function (child, index) {
|
236 | return _react2.default.cloneElement(child, {
|
237 | key: index
|
238 | });
|
239 | });
|
240 | toArrayChildren.unshift(_react2.default.createElement(_column2.default, {
|
241 | title: '',
|
242 | key: 'expanded',
|
243 | cell: this.renderExpandedCell.bind(this),
|
244 | width: size === 'small' ? 34 : 50,
|
245 | className: prefix + 'table-expanded ' + prefix + 'table-prerow',
|
246 | __normalized: true
|
247 | }));
|
248 | return toArrayChildren;
|
249 | };
|
250 |
|
251 | ExpandedTable.prototype.normalizeDataSource = function normalizeDataSource(ds) {
|
252 | var ret = [];
|
253 | ds.forEach(function (item) {
|
254 | var itemCopy = (0, _extends3.default)({}, item);
|
255 | itemCopy.__expanded = true;
|
256 | ret.push(item, itemCopy);
|
257 | });
|
258 | return ret;
|
259 | };
|
260 |
|
261 | ExpandedTable.prototype.render = function render() {
|
262 |
|
263 | var _props2 = this.props,
|
264 | components = _props2.components,
|
265 | openRowKeys = _props2.openRowKeys,
|
266 | expandedRowRender = _props2.expandedRowRender,
|
267 | rowExpandable = _props2.rowExpandable,
|
268 | hasExpandedRowCtrl = _props2.hasExpandedRowCtrl,
|
269 | children = _props2.children,
|
270 | columns = _props2.columns,
|
271 | dataSource = _props2.dataSource,
|
272 | entireDataSource = _props2.entireDataSource,
|
273 | getExpandedColProps = _props2.getExpandedColProps,
|
274 | expandedRowIndent = _props2.expandedRowIndent,
|
275 | onRowOpen = _props2.onRowOpen,
|
276 | onExpandedRowClick = _props2.onExpandedRowClick,
|
277 | others = (0, _objectWithoutProperties3.default)(_props2, ['components', 'openRowKeys', 'expandedRowRender', 'rowExpandable', 'hasExpandedRowCtrl', 'children', 'columns', 'dataSource', 'entireDataSource', 'getExpandedColProps', 'expandedRowIndent', 'onRowOpen', 'onExpandedRowClick']);
|
278 |
|
279 |
|
280 | if (expandedRowRender && !components.Row) {
|
281 | components = (0, _extends3.default)({}, components);
|
282 | components.Row = _row2.default;
|
283 | dataSource = this.normalizeDataSource(dataSource);
|
284 | entireDataSource = this.normalizeDataSource(entireDataSource);
|
285 | }
|
286 | if (expandedRowRender && hasExpandedRowCtrl) {
|
287 | var useColumns = columns && !children;
|
288 |
|
289 | if (useColumns) {
|
290 | this.addExpandCtrl(columns);
|
291 | } else {
|
292 | children = this.normalizeChildren(children || []);
|
293 | }
|
294 | }
|
295 |
|
296 | return _react2.default.createElement(
|
297 | BaseComponent,
|
298 | (0, _extends3.default)({}, others, {
|
299 | columns: columns,
|
300 | dataSource: dataSource,
|
301 | entireDataSource: entireDataSource,
|
302 | components: components
|
303 | }),
|
304 | children
|
305 | );
|
306 | };
|
307 |
|
308 | return ExpandedTable;
|
309 | }(_react2.default.Component), _class.ExpandedRow = _row2.default, _class.propTypes = (0, _extends3.default)({
|
310 | |
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 | expandedRowRender: _propTypes2.default.func,
|
317 | |
318 |
|
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 | rowExpandable: _propTypes2.default.func,
|
325 | |
326 |
|
327 |
|
328 | expandedRowIndent: _propTypes2.default.array,
|
329 | |
330 |
|
331 |
|
332 | openRowKeys: _propTypes2.default.array,
|
333 | |
334 |
|
335 |
|
336 |
|
337 | defaultOpenRowKeys: _propTypes2.default.array,
|
338 | |
339 |
|
340 |
|
341 | hasExpandedRowCtrl: _propTypes2.default.bool,
|
342 | |
343 |
|
344 |
|
345 | getExpandedColProps: _propTypes2.default.func,
|
346 | |
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 | onRowOpen: _propTypes2.default.func,
|
354 | onExpandedRowClick: _propTypes2.default.func,
|
355 | locale: _propTypes2.default.object
|
356 | }, BaseComponent.propTypes), _class.defaultProps = (0, _extends3.default)({}, BaseComponent.defaultProps, {
|
357 | getExpandedColProps: noop,
|
358 | onRowOpen: noop,
|
359 | hasExpandedRowCtrl: true,
|
360 | components: {},
|
361 | expandedRowIndent: stickyLock ? [0, 0] : [1, 0],
|
362 | prefix: 'next-'
|
363 | }), _class.childContextTypes = {
|
364 | openRowKeys: _propTypes2.default.array,
|
365 | expandedRowRender: _propTypes2.default.func,
|
366 | expandedIndexSimulate: _propTypes2.default.bool,
|
367 | expandedRowWidthEquals2Table: _propTypes2.default.bool,
|
368 | expandedRowIndent: _propTypes2.default.array,
|
369 | getExpandedRowRef: _propTypes2.default.func,
|
370 | getTableInstanceForExpand: _propTypes2.default.func
|
371 | }, _temp2);
|
372 | ExpandedTable.displayName = 'ExpandedTable';
|
373 |
|
374 | (0, _util2.statics)(ExpandedTable, BaseComponent);
|
375 | return (0, _reactLifecyclesCompat.polyfill)(ExpandedTable);
|
376 | }
|
377 | module.exports = exports['default']; |
\ | No newline at end of file |