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 a3ba464

Browse files
Merge pull request #333 from react-bootstrap-table/refactor/context-api
Migrate to React@16.3 for Context API
2 parents 37e79a6 + cb970cd commit a3ba464

File tree

150 files changed

+7445
-3150
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

150 files changed

+7445
-3150
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-tab
1111
* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
1212
* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
1313
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
14+
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
1415

1516
This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
1617

‎docs/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
#### Optional
1111
* [remote](#remote)
12+
* [bootstrap4](#bootstrap4)
1213
* [loading](#loading)
1314
* [caption](#caption)
1415
* [striped](#striped)
@@ -21,6 +22,7 @@
2122
* [headerClasses](#headerClasses)
2223
* [cellEdit](#cellEdit)
2324
* [selectRow](#selectRow)
25+
* [expandRow](#expandRow)
2426
* [rowStyle](#rowStyle)
2527
* [rowClasses](#rowClasses)
2628
* [rowEvents](#rowEvents)
@@ -66,6 +68,9 @@ remote={ { pagination: true, filter: false, sort: false } }
6668

6769
There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
6870

71+
### <a name='bootstrap4'>bootstrap4 - [Bool]</a>
72+
`true` to indicate your bootstrap version is 4. Default version is 3.
73+
6974
### <a name='loading'>loading - [Bool]</a>
7075
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
7176
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
@@ -122,6 +127,9 @@ Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for
122127
### <a name='selectRow'>selectRow - [Object]</a>
123128
Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
124129

130+
### <a name='expandRow'>expandRow - [Object]</a>
131+
Makes table rows expandable, please see [expandRow definition](./row-expand.md) for more detail.
132+
125133
### <a name='rowStyle'>rowStyle = [Object | Function]</a>
126134
Custom the style of table rows:
127135

‎docs/columns.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ Available properties in a column object:
3838
* [editorRenderer](#editorRenderer)
3939
* [filter](#filter)
4040
* [filterValue](#filterValue)
41+
* [csvType](#csvType)
42+
* [csvFormatter](#csvFormatter)
43+
* [csvText](#csvText)
44+
* [csvExport](#csvExport)
4145

4246
Following is a most simplest and basic usage:
4347

@@ -685,4 +689,17 @@ A final `String` value you want to be filtered.
685689
filter: textFilter(),
686690
filterValue: (cell, row) => owners[cell]
687691
}
688-
```
692+
```
693+
694+
## <a name='csvType'>column.csvType - [Object]</a>
695+
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
696+
697+
## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
698+
699+
This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
700+
701+
## <a name='csvText'>column.csvText - [String]</a>
702+
Custom the CSV header cell, Default is [`column.text`](#text).
703+
704+
## <a name='csvExport'>column.csvExport - [Bool]</a>
705+
Default is `true`, `false` will hide this column when export CSV.

‎docs/migration.md

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
2222
* Pagination Addons
2323
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
2424
* Overlay/Loading Addons
25+
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
26+
* Table Toolkits, like search, csv etc.
2527

2628
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
2729

@@ -113,6 +115,34 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
113115

114116
No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
115117

118+
## Table Search
119+
The usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
120+
121+
- [x] Custom search component and position
122+
- [x] Custom search value
123+
- [ ] Clear search
124+
- [ ] Multiple search
125+
- [ ] Strict search
126+
127+
## Row Expand
128+
- [x] Expand Row Events
129+
- [x] Expand Row Indicator
130+
- [x] Expand Row Management
131+
- [x] Custom Expand Row Indicators
132+
- [ ] Compatiable with Row Selection
133+
- [ ] Expand Column position
134+
- [ ] Expand Column Style/Class
135+
136+
## Export CSV
137+
Export CSV functionality is like search, which is one of functionality in the `react-bootstrap-table2-toolkit`. All of the legacy functions we already implemented.
138+
116139
## Remote
117140

118-
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
141+
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
142+
143+
144+
## Row insert/Delete
145+
Not support yet
146+
147+
## Keyboard Navigation
148+
Not support yet

‎docs/row-expand.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
2+
# Row expand
3+
`react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality.
4+
5+
> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
6+
7+
## Required
8+
* [renderer (**required**)](#renderer)
9+
10+
## Optional
11+
* [expanded](#expanded)
12+
* [nonExpandable](#nonExpandable)
13+
* [onExpand](#onExpand)
14+
* [onExpandAll](#onExpandAll)
15+
* [showExpandColumn](#showExpandColumn)
16+
* [expandColumnRenderer](#expandColumnRenderer)
17+
* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
18+
19+
### <a name="renderer">expandRow.renderer - [Function]</a>
20+
21+
Specify the content of expand row, `react-bootstrap-table2` will pass a row object as argument and expect return a react element.
22+
23+
#### values
24+
* **row**
25+
26+
#### examples
27+
28+
```js
29+
const expandRow = {
30+
renderer: row => (
31+
<div>
32+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
33+
<p>You can render anything here, also you can add additional data on every row object</p>
34+
<p>expandRow.renderer callback will pass the origin row object to you</p>
35+
</div>
36+
)
37+
};
38+
39+
<BootstrapTable
40+
keyField='id'
41+
data={ products }
42+
columns={ columns }
43+
expandRow={ expandRow }
44+
/>
45+
```
46+
47+
### <a name='expanded'>expandRow.expanded - [Array]</a>
48+
`expandRow.expanded` allow you have default row expandations on table.
49+
50+
```js
51+
const expandRow = {
52+
renderer: (row) => ...
53+
expanded: [1, 3] // should be a row keys array
54+
};
55+
```
56+
57+
### <a name='nonExpandable'>expandRow.nonExpandable - [Array]</a>
58+
This prop allow you to restrict some rows which can not be expanded by user. `expandRow.nonExpandable` accept an rowkeys array.
59+
60+
```js
61+
const expandRow = {
62+
renderer: (row) => ...
63+
nonExpandable: [1, 3 ,5]
64+
};
65+
```
66+
67+
### <a name='onExpand'>expandRow.onExpand - [Function]</a>
68+
This callback function will be called when a row is expand/collapse and pass following four arguments:
69+
`row`, `isExpand`, `rowIndex` and `e`.
70+
71+
```js
72+
const expandRow = {
73+
renderer: (row) => ...
74+
onExpand: (row, isExpand, rowIndex, e) => {
75+
// ...
76+
}
77+
};
78+
```
79+
80+
### <a name='onExpandAll'>expandRow.onExpandAll - [Function]</a>
81+
This callback function will be called when expand/collapse all. It only work when you configure [`expandRow.showExpandColumn`](#showExpandColumn) as `true`.
82+
83+
```js
84+
const expandRow = {
85+
renderer: (row) => ...
86+
onExpandAll: (isExpandAll, results, e) => {
87+
// ...
88+
}
89+
};
90+
```
91+
92+
### <a name='expandColumnRenderer'>expandRow.expandColumnRenderer - [Function]</a>
93+
Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain one property `expanded` which indicate if current row is expanded
94+
95+
96+
```js
97+
const expandRow = {
98+
renderer: (row) => ...
99+
expandColumnRenderer: ({ expanded }) => (
100+
// ....
101+
)
102+
};
103+
```
104+
105+
> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
106+
107+
### <a name='expandHeaderColumnRenderer'>expandRow.expandHeaderColumnRenderer - [Function]</a>
108+
Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property `isAnyExpands` which indicate if there's any rows are expanded:
109+
110+
```js
111+
const expandRow = {
112+
renderer: (row) => ...
113+
expandHeaderColumnRenderer: ({ isAnyExpands }) => (
114+
// ....
115+
)
116+
};
117+
```
118+
119+
> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
120+
121+
### <a name='showExpandColumn'>expandRow.showExpandColumn - [Bool]</a>
122+
Default is `false`, if you want to have a expand indicator, give this prop as `true`
123+
124+
```js
125+
const expandRow = {
126+
renderer: (row) => ...
127+
showExpandColumn: true
128+
};
129+
```

‎gulpfile.babel.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,17 @@ const JS_PKGS = [
1717
'react-bootstrap-table2-editor',
1818
'react-bootstrap-table2-filter',
1919
'react-bootstrap-table2-overlay',
20-
'react-bootstrap-table2-paginator'
20+
'react-bootstrap-table2-paginator',
21+
'react-bootstrap-table2-toolkit'
2122
].reduce((pkg, curr) => `${curr}|${pkg}`, '');
2223

2324
const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
2425

2526
const STYLE_PKGS = [
2627
'react-bootstrap-table2',
2728
'react-bootstrap-table2-filter',
28-
'react-bootstrap-table2-paginator'
29+
'react-bootstrap-table2-paginator',
30+
'react-bootstrap-table2-toolkit',
2931
].reduce((pkg, curr) => `${curr}|${pkg}`, '');
3032

3133
const STYLE_SKIPS = `+(${NODE_MODULES})`;
@@ -78,7 +80,8 @@ function umd(done) {
7880
() => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
7981
() => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
8082
() => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
81-
() => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
83+
() => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
84+
() => gulp.src('./webpack/toolkit.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
8285
)();
8386
done();
8487
}

‎package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"pretest": "yarn lint --cache",
1212
"test": "jest",
1313
"test:coverage": "jest --coverage",
14-
"test:watch": "jest --watch",
14+
"test:watch": "jest --coverage --watch",
1515
"storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook",
1616
"gh-pages:clean": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:clean",
1717
"gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build",
@@ -50,8 +50,8 @@
5050
"babel-preset-stage-0": "6.24.1",
5151
"babel-register": "6.24.1",
5252
"css-loader": "0.28.1",
53-
"enzyme": "3.1.1",
54-
"enzyme-adapter-react-16": "1.0.4",
53+
"enzyme": "3.3.0",
54+
"enzyme-adapter-react-16": "1.1.1",
5555
"eslint": "4.5.0",
5656
"eslint-config-airbnb": "15.1.0",
5757
"eslint-loader": "1.9.0",
@@ -81,12 +81,12 @@
8181
"dependencies": {
8282
"classnames": "2.2.5",
8383
"prop-types": "15.5.10",
84-
"react": "16.0.0",
85-
"react-dom": "16.0.0"
84+
"react": "16.3.2",
85+
"react-dom": "16.3.2"
8686
},
8787
"jest": {
8888
"collectCoverageFrom": [
89-
"packages/*/src/*.js",
89+
"packages/*/src/**/*.js",
9090
"packages/*/index.js"
9191
],
9292
"roots": [

‎packages/react-bootstrap-table2-editor/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import wrapperFactory from './src/wrapper';
1+
import createContext from './src/context';
22
import editingCellFactory from './src/editing-cell';
33
import {
44
EDITTYPE,
@@ -8,7 +8,7 @@ import {
88
} from './src/const';
99

1010
export default (options = {}) => ({
11-
wrapperFactory,
11+
createContext,
1212
editingCellFactory,
1313
CLICK_TO_CELL_EDIT,
1414
DBCLICK_TO_CELL_EDIT,

‎packages/react-bootstrap-table2-editor/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
],
4242
"peerDependencies": {
4343
"prop-types": "^15.0.0",
44-
"react": "^16.0.0",
45-
"react-dom": "^16.0.0"
44+
"react": "^16.3.0",
45+
"react-dom": "^16.3.0"
4646
}
4747
}

0 commit comments

Comments
(0)

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