Skip to content

Commit dc096a6

Browse files
AllenFangAllenFang
committed
implement loading overlay
1 parent dfc0e15 commit dc096a6

File tree

5 files changed

+333
-1
lines changed

5 files changed

+333
-1
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "react-bootstrap-table2-overlay",
3+
"version": "0.0.1",
4+
"description": "it's a loading overlay component for react-bootstrap-table2",
5+
"main": "src/index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"react-loading-overlay": "0.2.8"
13+
}
14+
}

‎packages/react-bootstrap-table2-overlay/src/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* eslint no-return-assign: 0 */
2+
import React from 'react';
3+
import LoadingOverlay from 'react-loading-overlay';
4+
5+
export default options => (element, loading) =>
6+
class TableLoadingOverlayWrapper extends React.Component {
7+
componentDidMount() {
8+
if (loading) {
9+
const { wrapper } = this.overlay;
10+
const masker = wrapper.firstChild;
11+
const headerDOM = wrapper.parentElement.querySelector('thead');
12+
const bodyDOM = wrapper.parentElement.querySelector('tbody');
13+
masker.style.marginTop = window.getComputedStyle(headerDOM).height;
14+
masker.style.height = window.getComputedStyle(bodyDOM).height;
15+
}
16+
}
17+
18+
render() {
19+
return (
20+
<LoadingOverlay
21+
ref={ n => this.overlay = n }
22+
{ ...options }
23+
active={ loading }
24+
>
25+
{ element }
26+
</LoadingOverlay>
27+
);
28+
}
29+
};

‎packages/react-bootstrap-table2-overlay/test/index.test.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import { shallow, render } from 'enzyme';
3+
import LoadingOverlay from 'react-loading-overlay';
4+
5+
import overlayFactory from '../src';
6+
7+
describe('overlayFactory', () => {
8+
let wrapper;
9+
// let instance;
10+
11+
const createTable = () => (
12+
<table>
13+
<thead>
14+
<tr>
15+
<th>column1</th>
16+
<th>column2</th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
{ [1, 2].map(row => (
21+
<tr key={ row }><td>{ row }</td><td>test</td></tr>
22+
))}
23+
</tbody>
24+
</table>
25+
);
26+
27+
describe('when loading is false', () => {
28+
beforeEach(() => {
29+
const tableElm = createTable();
30+
const Overlay = overlayFactory()(tableElm, false);
31+
wrapper = shallow(<Overlay />);
32+
});
33+
34+
it('should rendering Overlay component correctly', () => {
35+
const overlay = wrapper.find(LoadingOverlay);
36+
expect(wrapper.length).toBe(1);
37+
expect(overlay.length).toBe(1);
38+
expect(overlay.prop('active')).toBeFalsy();
39+
});
40+
});
41+
42+
describe('when loading is true', () => {
43+
beforeEach(() => {
44+
const tableElm = createTable();
45+
const Overlay = overlayFactory()(tableElm, true);
46+
wrapper = render(<Overlay />);
47+
});
48+
49+
it('should rendering Overlay component correctly', () => {
50+
const overlay = wrapper.find(LoadingOverlay);
51+
expect(wrapper.length).toBe(1);
52+
expect(overlay.length).toBe(0);
53+
});
54+
});
55+
56+
describe('when options is given', () => {
57+
const options = {
58+
spinner: true,
59+
background: 'red'
60+
};
61+
beforeEach(() => {
62+
const tableElm = createTable();
63+
const Overlay = overlayFactory(options)(tableElm, false);
64+
wrapper = shallow(<Overlay />);
65+
});
66+
67+
it('should rendering Overlay component with options correctly', () => {
68+
const overlay = wrapper.find(LoadingOverlay);
69+
expect(wrapper.length).toBe(1);
70+
expect(overlay.length).toBe(1);
71+
expect(overlay.prop('active')).toBeFalsy();
72+
Object.keys(options).forEach((key) => {
73+
expect(overlay.prop(key)).toEqual(options[key]);
74+
});
75+
});
76+
});
77+
});

‎packages/react-bootstrap-table2-overlay/yarn.lock‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
asap@~2.0.3:
6+
version "2.0.6"
7+
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
8+
9+
base64-js@^1.0.2:
10+
version "1.2.1"
11+
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
12+
13+
buffer@^5.0.3:
14+
version "5.0.8"
15+
resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
16+
dependencies:
17+
base64-js "^1.0.2"
18+
ieee754 "^1.1.4"
19+
20+
chain-function@^1.0.0:
21+
version "1.0.0"
22+
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
23+
24+
core-js@^1.0.0:
25+
version "1.2.7"
26+
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
27+
28+
css-color-keywords@^1.0.0:
29+
version "1.0.0"
30+
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
31+
32+
css-to-react-native@^2.0.3:
33+
version "2.0.4"
34+
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
35+
dependencies:
36+
css-color-keywords "^1.0.0"
37+
fbjs "^0.8.5"
38+
postcss-value-parser "^3.3.0"
39+
40+
dom-helpers@^3.2.0:
41+
version "3.2.1"
42+
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
43+
44+
encoding@^0.1.11:
45+
version "0.1.12"
46+
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
47+
dependencies:
48+
iconv-lite "~0.4.13"
49+
50+
fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
51+
version "0.8.16"
52+
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
53+
dependencies:
54+
core-js "^1.0.0"
55+
isomorphic-fetch "^2.1.1"
56+
loose-envify "^1.0.0"
57+
object-assign "^4.1.0"
58+
promise "^7.1.1"
59+
setimmediate "^1.0.5"
60+
ua-parser-js "^0.7.9"
61+
62+
has-flag@^1.0.0:
63+
version "1.0.0"
64+
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
65+
66+
hoist-non-react-statics@^1.2.0:
67+
version "1.2.0"
68+
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
69+
70+
iconv-lite@~0.4.13:
71+
version "0.4.19"
72+
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
73+
74+
ieee754@^1.1.4:
75+
version "1.1.8"
76+
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
77+
78+
is-function@^1.0.1:
79+
version "1.0.1"
80+
resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
81+
82+
is-plain-object@^2.0.1:
83+
version "2.0.4"
84+
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
85+
dependencies:
86+
isobject "^3.0.1"
87+
88+
is-stream@^1.0.1:
89+
version "1.1.0"
90+
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
91+
92+
isobject@^3.0.1:
93+
version "3.0.1"
94+
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
95+
96+
isomorphic-fetch@^2.1.1:
97+
version "2.2.1"
98+
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
99+
dependencies:
100+
node-fetch "^1.0.1"
101+
whatwg-fetch ">=0.10.0"
102+
103+
js-tokens@^3.0.0:
104+
version "3.0.2"
105+
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
106+
107+
loose-envify@^1.0.0, loose-envify@^1.3.1:
108+
version "1.3.1"
109+
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
110+
dependencies:
111+
js-tokens "^3.0.0"
112+
113+
node-fetch@^1.0.1:
114+
version "1.7.3"
115+
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
116+
dependencies:
117+
encoding "^0.1.11"
118+
is-stream "^1.0.1"
119+
120+
object-assign@^4.1.0, object-assign@^4.1.1:
121+
version "4.1.1"
122+
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
123+
124+
postcss-value-parser@^3.3.0:
125+
version "3.3.0"
126+
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
127+
128+
promise@^7.1.1:
129+
version "7.3.1"
130+
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
131+
dependencies:
132+
asap "~2.0.3"
133+
134+
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6:
135+
version "15.6.0"
136+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
137+
dependencies:
138+
fbjs "^0.8.16"
139+
loose-envify "^1.3.1"
140+
object-assign "^4.1.1"
141+
142+
react-loading-overlay@0.2.8:
143+
version "0.2.8"
144+
resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-0.2.8.tgz#c1c5531c9cfa4be6caca6b9aa0c1eb19e22b03fe"
145+
dependencies:
146+
prop-types "^15.5.10"
147+
react-transition-group "^1.2.1"
148+
styled-components "^2.1.2"
149+
150+
react-transition-group@^1.2.1:
151+
version "1.2.1"
152+
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
153+
dependencies:
154+
chain-function "^1.0.0"
155+
dom-helpers "^3.2.0"
156+
loose-envify "^1.3.1"
157+
prop-types "^15.5.6"
158+
warning "^3.0.0"
159+
160+
setimmediate@^1.0.5:
161+
version "1.0.5"
162+
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
163+
164+
styled-components@^2.1.2:
165+
version "2.2.4"
166+
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.4.tgz#dd87fd3dafd359e7a0d570aec1bd07d691c0b5a2"
167+
dependencies:
168+
buffer "^5.0.3"
169+
css-to-react-native "^2.0.3"
170+
fbjs "^0.8.9"
171+
hoist-non-react-statics "^1.2.0"
172+
is-function "^1.0.1"
173+
is-plain-object "^2.0.1"
174+
prop-types "^15.5.4"
175+
stylis "^3.4.0"
176+
supports-color "^3.2.3"
177+
178+
stylis@^3.4.0:
179+
version "3.4.5"
180+
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
181+
182+
supports-color@^3.2.3:
183+
version "3.2.3"
184+
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
185+
dependencies:
186+
has-flag "^1.0.0"
187+
188+
ua-parser-js@^0.7.9:
189+
version "0.7.17"
190+
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
191+
192+
warning@^3.0.0:
193+
version "3.0.0"
194+
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
195+
dependencies:
196+
loose-envify "^1.0.0"
197+
198+
whatwg-fetch@>=0.10.0:
199+
version "2.0.3"
200+
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint arrow-body-style: 0 */
2+
23
import React, { Component } from 'react';
34
import PropTypes from 'prop-types';
45
import cs from 'classnames';
@@ -26,6 +27,16 @@ class BootstrapTable extends PropsBaseResolver(Component) {
2627
}
2728

2829
render() {
30+
const { loading, overlay } = this.props;
31+
const table = this.renderTable();
32+
if (loading && overlay) {
33+
const LoadingOverlay = overlay(table, loading);
34+
return <LoadingOverlay />;
35+
}
36+
return table;
37+
}
38+
39+
renderTable() {
2940
const {
3041
store,
3142
columns,
@@ -157,7 +168,8 @@ BootstrapTable.propTypes = {
157168
dataField: PropTypes.string.isRequired,
158169
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
159170
})),
160-
onTableChange: PropTypes.func
171+
onTableChange: PropTypes.func,
172+
overlay: PropTypes.func
161173
};
162174

163175
BootstrapTable.defaultProps = {

0 commit comments

Comments
 (0)