Skip to content

Commit 21344ec

Browse files
AllenFangAllenFang
committed
refine cell edit stories
1 parent 39be018 commit 21344ec

File tree

11 files changed

+151
-119
lines changed

11 files changed

+151
-119
lines changed

‎packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
import BootstrapTable from 'react-bootstrap-table2';
4+
import cellEditFactory from 'react-bootstrap-table2-editor';
45
import Code from 'components/common/code-block';
56
import { productsGenerator } from 'utils/common';
67

@@ -18,6 +19,8 @@ const columns = [{
1819
}];
1920

2021
const sourceCode = `\
22+
import cellEditFactory from 'react-bootstrap-table2-editor';
23+
// ...
2124
const columns = [{
2225
dataField: 'id',
2326
text: 'Product ID'
@@ -29,26 +32,28 @@ const columns = [{
2932
text: 'Product Price'
3033
}];
3134
32-
const cellEdit = {
33-
mode: 'click',
34-
blurToSave: true
35-
};
36-
3735
<BootstrapTable
38-
keyField='id'
36+
keyField="id"
3937
data={ products }
4038
columns={ columns }
41-
cellEdit={ cellEdit }
39+
cellEdit={ cellEditFactory({
40+
mode: 'click',
41+
blurToSave: true
42+
}) }
4243
/>
4344
`;
4445

45-
const cellEdit = {
46-
mode: 'click',
47-
blurToSave: true
48-
};
4946
export default () => (
5047
<div>
51-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
48+
<BootstrapTable
49+
keyField="id"
50+
data={ products }
51+
columns={ columns }
52+
cellEdit={ cellEditFactory({
53+
mode: 'click',
54+
blurToSave: true
55+
}) }
56+
/>
5257
<Code>{ sourceCode }</Code>
5358
</div>
5459
);

‎packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
56
import Code from 'components/common/code-block';
67
import { productsGenerator } from 'utils/common';
78

@@ -22,6 +23,8 @@ const columns = [{
2223
}];
2324

2425
const sourceCode = `\
26+
import cellEditFactory from 'react-bootstrap-table2-editor';
27+
// ...
2528
const columns = [{
2629
dataField: 'id',
2730
text: 'Product ID'
@@ -36,24 +39,22 @@ const columns = [{
3639
(cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
3740
}];
3841
39-
const cellEdit = {
40-
mode: 'click'
41-
};
42-
4342
<BootstrapTable
44-
keyField='id'
43+
keyField="id"
4544
data={ products }
4645
columns={ columns }
47-
cellEdit={ cellEdit }
46+
cellEdit={ cellEditFactory({ mode: 'click' }) }
4847
/>
4948
`;
5049

51-
const cellEdit = {
52-
mode: 'click'
53-
};
5450
export default () => (
5551
<div>
56-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
52+
<BootstrapTable
53+
keyField="id"
54+
data={ products }
55+
columns={ columns }
56+
cellEdit={ cellEditFactory({ mode: 'click' }) }
57+
/>
5758
<Code>{ sourceCode }</Code>
5859
</div>
5960
);

‎packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React from 'react';
44

55
import BootstrapTable from 'react-bootstrap-table2';
6+
import cellEditFactory from 'react-bootstrap-table2-editor';
67
import Code from 'components/common/code-block';
78
import { productsGenerator } from 'utils/common';
89

@@ -20,6 +21,8 @@ const columns = [{
2021
}];
2122

2223
const sourceCode = `\
24+
import cellEditFactory from 'react-bootstrap-table2-editor';
25+
// ...
2326
const columns = [{
2427
dataField: 'id',
2528
text: 'Product ID'
@@ -31,28 +34,30 @@ const columns = [{
3134
text: 'Product Price'
3235
}];
3336
34-
const cellEdit = {
35-
mode: 'click',
36-
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
37-
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
38-
};
39-
4037
<BootstrapTable
41-
keyField='id'
38+
keyField="id"
4239
data={ products }
4340
columns={ columns }
44-
cellEdit={ cellEdit }
41+
cellEdit={ cellEditFactory({
42+
mode: 'click',
43+
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
44+
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
45+
}) }
4546
/>
4647
`;
4748

48-
const cellEdit = {
49-
mode: 'click',
50-
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
51-
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
52-
};
5349
export default () => (
5450
<div>
55-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
51+
<BootstrapTable
52+
keyField="id"
53+
data={ products }
54+
columns={ columns }
55+
cellEdit={ cellEditFactory({
56+
mode: 'click',
57+
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
58+
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
59+
}) }
60+
/>
5661
<Code>{ sourceCode }</Code>
5762
</div>
5863
);

‎packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
56
import Code from 'components/common/code-block';
67
import { productsGenerator } from 'utils/common';
78

@@ -26,6 +27,8 @@ const columns = [{
2627
}];
2728

2829
const sourceCode = `\
30+
import cellEditFactory from 'react-bootstrap-table2-editor';
31+
// ...
2932
const columns = [{
3033
dataField: 'id',
3134
text: 'Product ID'
@@ -44,24 +47,22 @@ const columns = [{
4447
}
4548
}];
4649
47-
const cellEdit = {
48-
mode: 'click'
49-
};
50-
5150
<BootstrapTable
52-
keyField='id'
51+
keyField="id"
5352
data={ products }
5453
columns={ columns }
55-
cellEdit={ cellEdit }
54+
cellEdit={ cellEditFactory({ mode: 'click' }) }
5655
/>
5756
`;
5857

59-
const cellEdit = {
60-
mode: 'click'
61-
};
6258
export default () => (
6359
<div>
64-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
60+
<BootstrapTable
61+
keyField="id"
62+
data={ products }
63+
columns={ columns }
64+
cellEdit={ cellEditFactory({ mode: 'click' }) }
65+
/>
6566
<Code>{ sourceCode }</Code>
6667
</div>
6768
);

‎packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from 'react';
21
/* eslint no-unused-vars: 0 */
2+
import React from 'react';
33
import BootstrapTable from 'react-bootstrap-table2';
4+
import cellEditFactory from 'react-bootstrap-table2-editor';
45
import Code from 'components/common/code-block';
56
import { productsGenerator } from 'utils/common';
67

@@ -33,6 +34,8 @@ const columns = [{
3334
}];
3435

3536
const sourceCode = `\
37+
import cellEditFactory from 'react-bootstrap-table2-editor';
38+
// ...
3639
const columns = [{
3740
dataField: 'id',
3841
text: 'Product ID'
@@ -59,27 +62,29 @@ const columns = [{
5962
}
6063
}];
6164
62-
const cellEdit = {
63-
mode: 'click',
64-
blurToSave: true
65-
};
66-
6765
<BootstrapTable
68-
keyField='id'
66+
keyField="id"
6967
data={ products }
7068
columns={ columns }
71-
cellEdit={ cellEdit }
69+
cellEdit={ cellEditFactory({
70+
mode: 'click',
71+
blurToSave: true
72+
}) }
7273
/>
7374
`;
7475

75-
const cellEdit = {
76-
mode: 'click',
77-
blurToSave: true
78-
};
7976
export default () => (
8077
<div>
8178
<h3>Product Price should bigger than $2000</h3>
82-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
79+
<BootstrapTable
80+
keyField="id"
81+
data={ products }
82+
columns={ columns }
83+
cellEdit={ cellEditFactory({
84+
mode: 'click',
85+
blurToSave: true
86+
}) }
87+
/>
8388
<Code>{ sourceCode }</Code>
8489
</div>
8590
);

‎packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
56
import Code from 'components/common/code-block';
67
import { productsGenerator } from 'utils/common';
78

@@ -20,6 +21,8 @@ const columns = [{
2021
}];
2122

2223
const sourceCode = `\
24+
import cellEditFactory from 'react-bootstrap-table2-editor';
25+
// ...
2326
const columns = [{
2427
dataField: 'id',
2528
text: 'Product ID'
@@ -32,24 +35,22 @@ const columns = [{
3235
editable: (content, row, rowIndex, columnIndex) => content > 2101
3336
}];
3437
35-
const cellEdit = {
36-
mode: 'click'
37-
};
38-
3938
<BootstrapTable
40-
keyField='id'
39+
keyField="id"
4140
data={ products }
4241
columns={ columns }
43-
cellEdit={ cellEdit }
42+
cellEdit={ cellEditFactory({ mode: 'click' }) }
4443
/>
4544
`;
4645

47-
const cellEdit = {
48-
mode: 'click'
49-
};
5046
export default () => (
5147
<div>
52-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
48+
<BootstrapTable
49+
keyField="id"
50+
data={ products }
51+
columns={ columns }
52+
cellEdit={ cellEditFactory({ mode: 'click' }) }
53+
/>
5354
<Code>{ sourceCode }</Code>
5455
</div>
5556
);

‎packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
/* eslint react/prefer-stateless-function: 0 */
12
import React from 'react';
23

34
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
46
import Code from 'components/common/code-block';
57
import { productsGenerator } from 'utils/common';
68

@@ -18,6 +20,8 @@ const columns = [{
1820
}];
1921

2022
const sourceCode = `\
23+
import cellEditFactory from 'react-bootstrap-table2-editor';
24+
// ...
2125
const columns = [{
2226
dataField: 'id',
2327
text: 'Product ID'
@@ -29,24 +33,22 @@ const columns = [{
2933
text: 'Product Price'
3034
}];
3135
32-
const cellEdit = {
33-
mode: 'click'
34-
};
35-
3636
<BootstrapTable
37-
keyField='id'
37+
keyField="id"
3838
data={ products }
3939
columns={ columns }
40-
cellEdit={ cellEdit }
40+
cellEdit={ cellEditFactory({ mode: 'click' }) }
4141
/>
4242
`;
4343

44-
const cellEdit = {
45-
mode: 'click'
46-
};
4744
export default () => (
4845
<div>
49-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
46+
<BootstrapTable
47+
keyField="id"
48+
data={ products }
49+
columns={ columns }
50+
cellEdit={ cellEditFactory({ mode: 'click' }) }
51+
/>
5052
<Code>{ sourceCode }</Code>
5153
</div>
5254
);

0 commit comments

Comments
 (0)