Skip to content

Commit b6ab355

Browse files
AllenFangAllenFang
committed
isolate the expand indicator example
1 parent 0789e78 commit b6ab355

File tree

4 files changed

+199
-14
lines changed

4 files changed

+199
-14
lines changed

‎examples/js/expandRow/custom-expand-indicator.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
const products = [];
6+
7+
function addProducts(quantity) {
8+
const startId = products.length;
9+
for (let i = 0; i < quantity; i++) {
10+
const id = startId + i;
11+
if (i < 3) {
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i,
16+
expand: [ {
17+
fieldA: 'test1',
18+
fieldB: (i + 1) * 99,
19+
fieldC: (i + 1) * Math.random() * 100,
20+
fieldD: '123eedd' + i
21+
}, {
22+
fieldA: 'test2',
23+
fieldB: i * 99,
24+
fieldC: i * Math.random() * 100,
25+
fieldD: '123eedd' + i
26+
} ]
27+
});
28+
} else {
29+
products.push({
30+
id: id,
31+
name: 'Item name ' + id,
32+
price: 2100 + i
33+
});
34+
}
35+
}
36+
}
37+
addProducts(5);
38+
39+
class BSTable extends React.Component {
40+
render() {
41+
if (this.props.data) {
42+
return (
43+
<BootstrapTable data={ this.props.data }>
44+
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
45+
<TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
46+
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
47+
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
48+
</BootstrapTable>);
49+
} else {
50+
return (<p>?</p>);
51+
}
52+
}
53+
}
54+
55+
export default class ExpandRow extends React.Component {
56+
constructor(props) {
57+
super(props);
58+
}
59+
60+
isExpandableRow(row) {
61+
if (row.id < 3) return true;
62+
else return false;
63+
}
64+
65+
expandComponent(row) {
66+
return (
67+
<BSTable data={ row.expand } />
68+
);
69+
}
70+
71+
expandColumnComponent({ isExpandableRow, isExpanded }) {
72+
let content = '';
73+
74+
if (isExpandableRow) {
75+
content = (isExpanded ? '(-)' : '(+)' );
76+
} else {
77+
content = ' ';
78+
}
79+
return (
80+
<div> { content } </div>
81+
);
82+
}
83+
84+
render() {
85+
const options = {
86+
expandRowBgColor: 'rgb(242, 255, 163)'
87+
};
88+
return (
89+
<BootstrapTable data={ products }
90+
options={ options }
91+
expandableRow={ this.isExpandableRow }
92+
expandComponent={ this.expandComponent }
93+
expandColumnOptions={ { expandColumnVisible: true, expandColumnComponent: this.expandColumnComponent } }
94+
search>
95+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
96+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
97+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
98+
</BootstrapTable>
99+
);
100+
}
101+
}

‎examples/js/expandRow/demo.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import ExpandByColumn from './expand-row-by-column';
55
import ManageExpandExternal from './manage-expanding';
66
import ExpandWithSelection from './expand-row-with-selection';
77
import ExpandWithCellEdit from './expand-row-with-cellEdit';
8+
import ExpandIndicator from './expand-indicator';
9+
import CustomExpandIndicator from './custom-expand-indicator';
810
import renderLinks from '../utils';
911

1012
import { Col, Panel } from 'react-bootstrap';
@@ -18,6 +20,14 @@ class Demo extends React.Component {
1820
<p>You can insert your customize component as a expand component</p>
1921
<ExpandRow/>
2022
</Panel>
23+
<Panel header={ 'Row Expand Indicator' }>
24+
{ renderLinks('expandRow/expand-indicator.js') }
25+
<ExpandIndicator/>
26+
</Panel>
27+
<Panel header={ 'Custom Row Expand Indicator' }>
28+
{ renderLinks('expandRow/custom-expand-indicator.js') }
29+
<CustomExpandIndicator/>
30+
</Panel>
2131
<Panel header={ 'Expand Row Trigger by Column instead of Row' }>
2232
{ renderLinks('expandRow/expand-row-by-column.js') }
2333
<span>You can trigger expand row by column or row, default is row,

‎examples/js/expandRow/expand-indicator.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
const products = [];
6+
7+
function addProducts(quantity) {
8+
const startId = products.length;
9+
for (let i = 0; i < quantity; i++) {
10+
const id = startId + i;
11+
if (i < 3) {
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i,
16+
expand: [ {
17+
fieldA: 'test1',
18+
fieldB: (i + 1) * 99,
19+
fieldC: (i + 1) * Math.random() * 100,
20+
fieldD: '123eedd' + i
21+
}, {
22+
fieldA: 'test2',
23+
fieldB: i * 99,
24+
fieldC: i * Math.random() * 100,
25+
fieldD: '123eedd' + i
26+
} ]
27+
});
28+
} else {
29+
products.push({
30+
id: id,
31+
name: 'Item name ' + id,
32+
price: 2100 + i
33+
});
34+
}
35+
}
36+
}
37+
addProducts(5);
38+
39+
class BSTable extends React.Component {
40+
render() {
41+
if (this.props.data) {
42+
return (
43+
<BootstrapTable data={ this.props.data }>
44+
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
45+
<TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
46+
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
47+
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
48+
</BootstrapTable>);
49+
} else {
50+
return (<p>?</p>);
51+
}
52+
}
53+
}
54+
55+
export default class ExpandRow extends React.Component {
56+
constructor(props) {
57+
super(props);
58+
}
59+
60+
isExpandableRow(row) {
61+
if (row.id < 3) return true;
62+
else return false;
63+
}
64+
65+
expandComponent(row) {
66+
return (
67+
<BSTable data={ row.expand } />
68+
);
69+
}
70+
71+
render() {
72+
const options = {
73+
expandRowBgColor: 'rgb(242, 255, 163)'
74+
};
75+
return (
76+
<BootstrapTable data={ products }
77+
options={ options }
78+
expandableRow={ this.isExpandableRow }
79+
expandComponent={ this.expandComponent }
80+
expandColumnOptions={ { expandColumnVisible: true } }
81+
search>
82+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
83+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
84+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
85+
</BootstrapTable>
86+
);
87+
}
88+
}

‎examples/js/expandRow/expandRow.js‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -68,19 +68,6 @@ export default class ExpandRow extends React.Component {
6868
);
6969
}
7070

71-
expandColumnComponent({ isExpandableRow, isExpanded }) {
72-
let content = '';
73-
74-
if (isExpandableRow) {
75-
content = (isExpanded ? '(-)' : '(+)' );
76-
} else {
77-
content = ' ';
78-
}
79-
return (
80-
<div> { content } </div>
81-
);
82-
}
83-
8471
render() {
8572
const options = {
8673
expandRowBgColor: 'rgb(242, 255, 163)'
@@ -90,7 +77,6 @@ export default class ExpandRow extends React.Component {
9077
options={ options }
9178
expandableRow={ this.isExpandableRow }
9279
expandComponent={ this.expandComponent }
93-
expandColumnOptions={ { expandColumnVisible: true, expandColumnComponent: this.expandColumnComponent } }
9480
search>
9581
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
9682
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

0 commit comments

Comments
 (0)