Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5e9c584

Browse files
implement expand indicator
1 parent edf12dc commit 5e9c584

File tree

9 files changed

+179
-6
lines changed

9 files changed

+179
-6
lines changed

‎packages/react-bootstrap-table2/src/bootstrap-table.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
7272
});
7373

7474
const tableCaption = (caption && <Caption>{ caption }</Caption>);
75+
const expandRow = this.resolveExpandRowProps();
7576

7677
return (
7778
<div className={ tableWrapperClass }>
@@ -85,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
8586
onFilter={ this.props.onFilter }
8687
onExternalFilter={ this.props.onExternalFilter }
8788
selectRow={ headerCellSelectionInfo }
89+
expandRow={ expandRow }
8890
/>
8991
<Body
9092
data={ data }
@@ -96,7 +98,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
9698
cellEdit={ this.props.cellEdit || {} }
9799
selectRow={ cellSelectionInfo }
98100
selectedRowKeys={ selected }
99-
expandRow={ this.resolveExpandRowProps() }
101+
expandRow={ expandRow }
100102
rowStyle={ rowStyle }
101103
rowClasses={ rowClasses }
102104
rowEvents={ rowEvents }
@@ -150,9 +152,12 @@ BootstrapTable.propTypes = {
150152
expanded: PropTypes.array,
151153
nonExpandable: PropTypes.array,
152154
showExpandColumn: PropTypes.bool,
153-
expandColumnRenderer: PropTypes.func
155+
expandColumnRenderer: PropTypes.func,
156+
expandHeaderColumnRenderer: PropTypes.func
154157
}),
155158
onRowExpand: PropTypes.func,
159+
onAllRowExpand: PropTypes.func,
160+
isAnyExpands: PropTypes.func,
156161
rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
157162
rowEvents: PropTypes.object,
158163
rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

‎packages/react-bootstrap-table2/src/contexts/row-expand-context.js‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,41 @@ export default (
4242
this.setState(() => ({ expanded: currExpanded }));
4343
}
4444

45+
handleAllRowExpand = (e, expandAll) => {
46+
const {
47+
data,
48+
keyField,
49+
expandRow: {
50+
onExpandAll,
51+
nonExpandable
52+
}
53+
} = this.props;
54+
const { expanded } = this.state;
55+
56+
let currExpanded;
57+
58+
if (expandAll) {
59+
currExpanded = expanded.concat(dataOperator.expandableKeys(data, keyField, nonExpandable));
60+
} else {
61+
currExpanded = expanded.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
62+
}
63+
64+
if (onExpandAll) {
65+
onExpandAll(expandAll, dataOperator.getExpandedRows(data, keyField, currExpanded), e);
66+
}
67+
68+
this.setState(() => ({ expanded: currExpanded }));
69+
}
70+
4571
render() {
72+
const { data, keyField } = this.props;
4673
return (
4774
<RowExpandContext.Provider
4875
value={ {
76+
isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
4977
expanded: this.state.expanded,
50-
onRowExpand: this.handleRowExpand
78+
onRowExpand: this.handleRowExpand,
79+
onAllRowExpand: this.handleAllRowExpand
5180
} }
5281
>
5382
{ this.props.children }

‎packages/react-bootstrap-table2/src/header.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Const from './const';
55

66
import HeaderCell from './header-cell';
77
import SelectionHeaderCell from './row-selection/selection-header-cell';
8+
import ExpandHeaderCell from './row-expand/expand-header-cell';
89

910
const Header = (props) => {
1011
const { ROW_SELECT_DISABLED } = Const;
@@ -16,12 +17,21 @@ const Header = (props) => {
1617
sortField,
1718
sortOrder,
1819
selectRow,
19-
onExternalFilter
20+
onExternalFilter,
21+
expandRow
2022
} = props;
2123

2224
return (
2325
<thead>
2426
<tr>
27+
{
28+
(expandRow && expandRow.showExpandColumn)
29+
? <ExpandHeaderCell
30+
onAllRowExpand={ expandRow.onAllRowExpand }
31+
anyExpands={ expandRow.isAnyExpands }
32+
renderer={ expandRow.expandHeaderColumnRenderer }
33+
/> : null
34+
}
2535
{
2636
(selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
2737
? <SelectionHeaderCell { ...selectRow } /> : null
@@ -60,7 +70,8 @@ Header.propTypes = {
6070
sortField: PropTypes.string,
6171
sortOrder: PropTypes.string,
6272
selectRow: PropTypes.object,
63-
onExternalFilter: PropTypes.func
73+
onExternalFilter: PropTypes.func,
74+
expandRow: PropTypes.object
6475
};
6576

6677
export default Header;

‎packages/react-bootstrap-table2/src/props-resolver/expand-row-resolver.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
export default ExtendBase =>
22
class ExpandRowResolver extends ExtendBase {
33
resolveExpandRowProps() {
4-
const { expandRow, expanded, onRowExpand } = this.props;
4+
const { expandRow, expanded, onRowExpand, onAllRowExpand, isAnyExpands } = this.props;
55
if (expandRow) {
66
return {
77
...expandRow,
88
expanded,
99
onRowExpand,
10+
onAllRowExpand,
11+
isAnyExpands,
1012
nonExpandable: expandRow.nonExpandable || []
1113
};
1214
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* eslint
2+
react/require-default-props: 0
3+
jsx-a11y/no-noninteractive-element-interactions: 0
4+
*/
5+
/* eslint no-nested-ternary: 0 */
6+
import React, { Component } from 'react';
7+
import PropTypes from 'prop-types';
8+
9+
export default class ExpandCell extends Component {
10+
static propTypes = {
11+
rowKey: PropTypes.any,
12+
expanded: PropTypes.bool.isRequired,
13+
onRowExpand: PropTypes.func.isRequired,
14+
expandColumnRenderer: PropTypes.func,
15+
rowIndex: PropTypes.number
16+
}
17+
18+
constructor() {
19+
super();
20+
this.handleClick = this.handleClick.bind(this);
21+
}
22+
23+
handleClick(e) {
24+
const { rowKey, expanded, onRowExpand, rowIndex } = this.props;
25+
26+
onRowExpand(rowKey, expanded, rowIndex, e);
27+
}
28+
29+
render() {
30+
const { expanded, expandColumnRenderer } = this.props;
31+
32+
return (
33+
<td onClick={ this.handleClick }>
34+
{
35+
expandColumnRenderer ? expandColumnRenderer({
36+
expanded
37+
}) : (expanded ? '(-)' : '(+)')
38+
}
39+
</td>
40+
);
41+
}
42+
}
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/* eslint react/require-default-props: 0 */
2+
/* eslint no-nested-ternary: 0 */
3+
import React, { Component } from 'react';
4+
import PropTypes from 'prop-types';
5+
6+
export default class SelectionHeaderCell extends Component {
7+
static propTypes = {
8+
anyExpands: PropTypes.bool.isRequired,
9+
onAllRowExpand: PropTypes.func.isRequired,
10+
renderer: PropTypes.func
11+
}
12+
13+
constructor() {
14+
super();
15+
this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
16+
}
17+
18+
handleCheckBoxClick(e) {
19+
const { anyExpands, onAllRowExpand } = this.props;
20+
21+
onAllRowExpand(e, !anyExpands);
22+
}
23+
24+
render() {
25+
const { anyExpands, renderer } = this.props;
26+
const attrs = {
27+
onClick: this.handleCheckBoxClick
28+
};
29+
30+
return (
31+
<th data-row-selection { ...attrs }>
32+
{
33+
renderer ?
34+
renderer({ isAnyExpands: anyExpands }) :
35+
(anyExpands ? '(-)' : '(+)')
36+
}
37+
</th>
38+
);
39+
}
40+
}

‎packages/react-bootstrap-table2/src/row.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
66
import _ from './utils';
77
import Cell from './cell';
88
import SelectionCell from './row-selection/selection-cell';
9+
import ExpandCell from './row-expand/expand-cell';
910
import eventDelegater from './row-event-delegater';
1011
import Const from './const';
1112

@@ -22,6 +23,8 @@ class Row extends eventDelegater(Component) {
2223
cellEdit,
2324
selected,
2425
selectRow,
26+
expanded,
27+
expandRow,
2528
selectable,
2629
editable: editableRow
2730
} = this.props;
@@ -39,10 +42,21 @@ class Row extends eventDelegater(Component) {
3942

4043
const key = _.get(row, keyField);
4144
const { hideSelectColumn } = selectRow;
45+
const { showExpandColumn } = expandRow || {};
4246
const trAttrs = this.delegate(attrs);
4347

4448
return (
4549
<tr style={ style } className={ className } { ...trAttrs }>
50+
{
51+
showExpandColumn ? (
52+
<ExpandCell
53+
{ ...expandRow }
54+
rowKey={ key }
55+
rowIndex={ rowIndex }
56+
expanded={ expanded }
57+
/>
58+
) : null
59+
}
4660
{
4761
(selectRow.mode !== Const.ROW_SELECT_DISABLED && !hideSelectColumn)
4862
? (
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import _ from '../utils';
2+
import { getRowByRowId } from './rows';
3+
4+
export const isAnyExpands = (
5+
data,
6+
keyField,
7+
expanded = []
8+
) => {
9+
for (let i = 0; i < data.length; i += 1) {
10+
const rowKey = _.get(data[i], keyField);
11+
if (typeof expanded.find(x => x === rowKey) !== 'undefined') {
12+
return true;
13+
}
14+
}
15+
return false;
16+
};
17+
18+
export const expandableKeys = (data, keyField, skips = []) => {
19+
if (skips.length === 0) {
20+
return data.map(row => _.get(row, keyField));
21+
}
22+
return data
23+
.filter(row => !skips.includes(_.get(row, keyField)))
24+
.map(row => _.get(row, keyField));
25+
};
26+
27+
export const getExpandedRows = (data, keyField, expanded) =>
28+
expanded.map(k => getRowByRowId(data, keyField, k));
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as rows from './rows';
22
import * as selection from './selection';
3+
import * as expand from './expand';
34
import * as mutate from './mutate';
45
import * as sort from './sort';
56

67
export default {
78
...rows,
89
...selection,
10+
...expand,
911
...mutate,
1012
...sort
1113
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /