Skip to content

Commit afd2dda

Browse files
AllenFangAllenFang
committed
Merge branch 'madeinfree-tab-change-edit-row' into v3.0.0-dev
2 parents 27024d8 + e0b6e47 commit afd2dda

19 files changed

+737
-41
lines changed

‎css/react-bootstrap-table.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,23 @@
5353

5454
.react-bs-table .table-bordered {
5555
border: 0;
56+
outline: none !important;
5657
}
5758

5859
.react-bs-table .table-bordered > thead > tr > th,
5960
.react-bs-table .table-bordered > thead > tr > td {
6061
border-bottom-width: 2px;
6162
}
6263

64+
.react-bs-table .table-bordered > tbody > tr > td {
65+
outline: none !important;
66+
}
67+
68+
.react-bs-table .table-bordered > tbody > tr > td.default-focus-cell {
69+
outline: 3px solid #3366FF !important;;
70+
outline-offset: -1px;
71+
}
72+
6373
.react-bs-table .table-bordered > tfoot > tr > th,
6474
.react-bs-table .table-bordered > tfoot > tr > td {
6575
border-top-width: 2px;

‎examples/js/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import Remote from './remote/demo';
2424
import Expand from './expandRow/demo';
2525
import Custom from './custom/demo';
2626
import Span from './column-header-span/demo';
27+
import KeyBoardNav from './keyboard-nav/demo';
2728

2829
const renderApp = () => {
2930
ReactDOM.render(
@@ -50,6 +51,7 @@ const renderApp = () => {
5051
<Route path='remote' component={ Remote } />
5152
<Route path='custom' component={ Custom } />
5253
<Route path='expandRow' component={ Expand } />
54+
<Route path='keyboard-nav' component={ KeyBoardNav } />
5355
</Route>
5456
<Route path='*' component={ PageNotFound }/>
5557
</Route>

‎examples/js/components/App.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ class App extends React.Component {
6464
}, {
6565
text: 'Expandable Row',
6666
href: 'expandRow'
67+
}, {
68+
text: 'KeyBoard Navigation',
69+
href: 'keyboard-nav'
6770
}, {
6871
text: 'Other',
6972
href: 'others'

‎examples/js/keyboard-nav/custom-style-nav-table.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* eslint max-len: 0 */
2+
/* eslint no-unused-vars: 0 */
3+
import React from 'react';
4+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
5+
6+
7+
const products = [];
8+
9+
function addProducts(quantity) {
10+
const startId = products.length;
11+
for (let i = 0; i < quantity; i++) {
12+
const id = startId + i;
13+
products.push({
14+
id: id,
15+
name: 'Item name ' + id,
16+
price: 2100 + i
17+
});
18+
}
19+
}
20+
21+
addProducts(5);
22+
23+
export default class CustomStyleNavTable extends React.Component {
24+
25+
customStyle = (cell, row) => {
26+
return {
27+
backgroundColor: 'red'
28+
};
29+
}
30+
31+
render() {
32+
const keyBoardNav = {
33+
customStyle: this.customStyle
34+
};
35+
return (
36+
<BootstrapTable data={ products } keyBoardNav={ keyBoardNav }>
37+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
38+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
39+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
40+
</BootstrapTable>
41+
);
42+
}
43+
}

‎examples/js/keyboard-nav/custom-style-nav-with-cell-edit-table.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* eslint max-len: 0 */
2+
/* eslint no-unused-vars: 0 */
3+
import React from 'react';
4+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
5+
6+
7+
const products = [];
8+
9+
function addProducts(quantity) {
10+
const startId = products.length;
11+
for (let i = 0; i < quantity; i++) {
12+
const id = startId + i;
13+
products.push({
14+
id: id,
15+
name: 'Item name ' + id,
16+
price: 2100 + i
17+
});
18+
}
19+
}
20+
21+
addProducts(5);
22+
23+
export default class CellEditWithNavWithoutStyleTable extends React.Component {
24+
25+
customStyle = (cell, row) => {
26+
return {
27+
backgroundColor: 'red'
28+
};
29+
}
30+
31+
render() {
32+
const cellEdit = {
33+
mode: 'click',
34+
blurToSave: true
35+
};
36+
const keyBoardNav = {
37+
customStyleOnEditCell: this.customStyle
38+
};
39+
40+
return (
41+
<BootstrapTable data={ products } cellEdit={ cellEdit } keyBoardNav={ keyBoardNav }>
42+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
43+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
44+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
45+
</BootstrapTable>
46+
);
47+
}
48+
}

‎examples/js/keyboard-nav/demo.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import SimpleNavTable from './simple-nav-table';
4+
import PaginationNavTable from './pagination-nav-table';
5+
import NavWithSelectionTable from './nav-with-select-table';
6+
import CustomNavStyleTable from './custom-style-nav-table';
7+
import DisableClickToNavTable from './disable-click-to-nav-table';
8+
import NavWithCellEditTable from './nav-with-cell-edit-table';
9+
import CustomStyleNavWithCellEditTable from './custom-style-nav-with-cell-edit-table';
10+
import EnterToEditWithNavTable from './enter-to-edit-with-nav-table';
11+
import NavWithExpandingTable from './nav-with-expand-table';
12+
13+
import renderLinks from '../utils';
14+
15+
import { Col, Panel } from 'react-bootstrap';
16+
17+
class Demo extends React.Component {
18+
render() {
19+
return (
20+
<Col md={ 8 } mdOffset={ 1 }>
21+
<Panel header={ 'A Simple Keyboard Navigation Table' }>
22+
{ renderLinks('keyboard-nav/simple-nav-table.js') }
23+
<span>
24+
Default navigation is click on cell and keyborad tab or navigation(left/right/up/down)
25+
</span>
26+
<SimpleNavTable/>
27+
</Panel>
28+
<Panel header={ 'Keyboard Navigation with Pagintaion Table' }>
29+
{ renderLinks('keyboard-nav/pagination-nav-table.js') }
30+
<PaginationNavTable/>
31+
</Panel>
32+
<Panel header={ 'Selection with Keyboard Navigation Example' }>
33+
{ renderLinks('keyboard-nav/nav-with-select-table.js') }
34+
<NavWithSelectionTable/>
35+
</Panel>
36+
<Panel header={ 'Custom Style Example' }>
37+
{ renderLinks('keyboard-nav/custom-style-nav-table.js') }
38+
<span>
39+
<code>keyBoardNav</code> accept a bool or object value<br/>
40+
Use <code>keyBoardNav.customStyle</code> to custom the styling on navigating cell<br/>
41+
</span>
42+
<CustomNavStyleTable/>
43+
</Panel>
44+
<Panel header={ 'Disable Click to Nav Example' }>
45+
{ renderLinks('keyboard-nav/disable-click-to-nav-table.js') }
46+
<span>
47+
<code>keyBoardNav</code> accept a bool or object value<br/>
48+
Use <code>keyBoardNav.clickToNav</code> to disable the navigation on clicking cell<br/>
49+
If you disable it, you can still navigate with tab and left/right/up/down
50+
</span>
51+
<DisableClickToNavTable />
52+
</Panel>
53+
<Panel header={ 'Cell Editing with Keyboard Navigation Example' }>
54+
{ renderLinks('keyboard-nav/nav-with-cell-edit-table.js') }
55+
<NavWithCellEditTable/>
56+
</Panel>
57+
<Panel header={ 'Custom Style on Editing Cell with Navigating Example' }>
58+
{ renderLinks('keyboard-nav/custom-style-nav-with-cell-edit-table') }
59+
<span>
60+
<code>keyBoardNav</code> accept a bool or object value<br/>
61+
Use <code>keyBoardNav.customStyleOnEditCell</code> to custom the styling on navigating and editing cell<br/>
62+
</span>
63+
<CustomStyleNavWithCellEditTable />
64+
</Panel>
65+
<Panel header={ 'Enter to edit cell with Keyboard Navigation Example' }>
66+
{ renderLinks('keyboard-nav/enter-to-edit-with-nav-table') }
67+
<span>
68+
<code>keyBoardNav</code> accept a bool or object value<br/>
69+
Use <code>keyBoardNav.enterToEdit</code> to trigger the navigating cell as editing<br/>
70+
</span>
71+
<EnterToEditWithNavTable />
72+
</Panel>
73+
<Panel header={ 'Expand with Keyboard Navigation Example' }>
74+
{ renderLinks('keyboard-nav/nav-with-expand-table.js') }
75+
<NavWithExpandingTable/>
76+
</Panel>
77+
</Col>
78+
);
79+
}
80+
}
81+
82+
export default Demo;

‎examples/js/keyboard-nav/disable-click-to-nav-table.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
6+
const products = [];
7+
8+
function addProducts(quantity) {
9+
const startId = products.length;
10+
for (let i = 0; i < quantity; i++) {
11+
const id = startId + i;
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i
16+
});
17+
}
18+
}
19+
20+
addProducts(5);
21+
22+
export default class SimpleNavTable extends React.Component {
23+
render() {
24+
const selectRow = {
25+
mode: 'checkbox',
26+
clickToSelect: true
27+
};
28+
const keyBoardNav = {
29+
clickToNav: false
30+
};
31+
return (
32+
<BootstrapTable data={ products } selectRow={ selectRow } keyBoardNav={ keyBoardNav }>
33+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
34+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
35+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
36+
</BootstrapTable>
37+
);
38+
}
39+
}

‎examples/js/keyboard-nav/enter-to-edit-with-nav-table.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
6+
const products = [];
7+
8+
function addProducts(quantity) {
9+
const startId = products.length;
10+
for (let i = 0; i < quantity; i++) {
11+
const id = startId + i;
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i
16+
});
17+
}
18+
}
19+
20+
addProducts(5);
21+
22+
export default class EnterToEditWithNavTable extends React.Component {
23+
render() {
24+
const cellEdit = {
25+
mode: 'click',
26+
blurToSave: true
27+
};
28+
const keyBoardNav = {
29+
enterToEdit: true
30+
};
31+
return (
32+
<BootstrapTable data={ products } cellEdit={ cellEdit } keyBoardNav={ keyBoardNav }>
33+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
34+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
35+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
36+
</BootstrapTable>
37+
);
38+
}
39+
}

‎examples/js/keyboard-nav/nav-with-cell-edit-table.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
6+
const products = [];
7+
8+
function addProducts(quantity) {
9+
const startId = products.length;
10+
for (let i = 0; i < quantity; i++) {
11+
const id = startId + i;
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i
16+
});
17+
}
18+
}
19+
20+
addProducts(5);
21+
22+
export default class CellEditWithNavTable extends React.Component {
23+
render() {
24+
const cellEdit = {
25+
mode: 'click',
26+
blurToSave: true
27+
};
28+
return (
29+
<BootstrapTable data={ products } cellEdit={ cellEdit } keyBoardNav>
30+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
31+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
32+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
33+
</BootstrapTable>
34+
);
35+
}
36+
}

‎examples/js/keyboard-nav/nav-with-expand-table.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
6+
const products = [];
7+
8+
function addProducts(quantity) {
9+
const startId = products.length;
10+
for (let i = 0; i < quantity; i++) {
11+
const id = startId + i;
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i
16+
});
17+
}
18+
}
19+
20+
addProducts(5);
21+
22+
export default class NavWithExpandTable extends React.Component {
23+
24+
isExpandableRow(row) {
25+
if (row.id < 3) return true;
26+
else return false;
27+
}
28+
29+
expandComponent(row) {
30+
return (
31+
<div>
32+
<p>I'm expand panel for row: { row.id }</p>
33+
<p>This is a demo for expanding table with keyboard navigation</p>
34+
</div>
35+
);
36+
}
37+
38+
render() {
39+
return (
40+
<BootstrapTable
41+
expandableRow={ this.isExpandableRow }
42+
expandComponent={ this.expandComponent }
43+
data={ products } keyBoardNav>
44+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
45+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
46+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
47+
</BootstrapTable>
48+
);
49+
}
50+
}

0 commit comments

Comments
 (0)