mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-28 21:20:04 +00:00
add stories for loading overlay
This commit is contained in:
AllenFang
145
packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js
vendored
Normal file
145
packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import BootstrapTable from 'react-bootstrap-table2';
|
||||
import paginator from 'react-bootstrap-table2-paginator';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator } from 'utils/common';
|
||||
|
||||
const products = productsGenerator(87);
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const sourceCode = `\
|
||||
import BootstrapTable from 'react-bootstrap-table2';
|
||||
import paginator from 'react-bootstrap-table2-paginator';
|
||||
// ...
|
||||
const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
remote
|
||||
keyField="id"
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
pagination={ paginator({ page, sizePerPage, totalSize }) }
|
||||
onTableChange={ onTableChange }
|
||||
/>
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
|
||||
class Container extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
page: 1,
|
||||
data: products.slice(0, 10),
|
||||
sizePerPage: 10
|
||||
};
|
||||
}
|
||||
|
||||
handleTableChange = ({ page, sizePerPage }) => {
|
||||
const currentIndex = (page - 1) * sizePerPage;
|
||||
setTimeout(() => {
|
||||
this.setState(() => ({
|
||||
page,
|
||||
data: products.slice(currentIndex, currentIndex + sizePerPage),
|
||||
sizePerPage
|
||||
}));
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { data, sizePerPage, page } = this.state;
|
||||
return (
|
||||
<RemotePagination
|
||||
data={ data }
|
||||
page={ page }
|
||||
sizePerPage={ sizePerPage }
|
||||
totalSize={ products.length }
|
||||
onTableChange={ this.handleTableChange }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const NoDataIndication = () => (
|
||||
<div className="spinner">
|
||||
<div className="rect1" />
|
||||
<div className="rect2" />
|
||||
<div className="rect3" />
|
||||
<div className="rect4" />
|
||||
<div className="rect5" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Table = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
remote
|
||||
keyField="id"
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
pagination={ paginator({ page, sizePerPage, totalSize }) }
|
||||
onTableChange={ onTableChange }
|
||||
noDataIndication={ () => <NoDataIndication /> }
|
||||
/>
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
|
||||
Table.propTypes = {
|
||||
data: PropTypes.array.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
totalSize: PropTypes.number.isRequired,
|
||||
sizePerPage: PropTypes.number.isRequired,
|
||||
onTableChange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
class EmptyTableOverlay extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
page: 1,
|
||||
data: products.slice(0, 10),
|
||||
sizePerPage: 10
|
||||
};
|
||||
}
|
||||
|
||||
handleTableChange = ({ page, sizePerPage }) => {
|
||||
const currentIndex = (page - 1) * sizePerPage;
|
||||
setTimeout(() => {
|
||||
this.setState(() => ({
|
||||
page,
|
||||
data: products.slice(currentIndex, currentIndex + sizePerPage),
|
||||
sizePerPage
|
||||
}));
|
||||
}, 3000);
|
||||
this.setState(() => ({ data: [] }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { data, sizePerPage, page } = this.state;
|
||||
return (
|
||||
<Table
|
||||
data={ data }
|
||||
page={ page }
|
||||
sizePerPage={ sizePerPage }
|
||||
totalSize={ products.length }
|
||||
onTableChange={ this.handleTableChange }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EmptyTableOverlay;
|
||||
158
packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
vendored
Normal file
158
packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
vendored
Normal file
@@ -0,0 +1,158 @@
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import BootstrapTable from 'react-bootstrap-table2';
|
||||
import paginator from 'react-bootstrap-table2-paginator';
|
||||
import overlayFactory from 'react-bootstrap-table2-overlay';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator } from 'utils/common';
|
||||
|
||||
const products = productsGenerator(87);
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const sourceCode = `\
|
||||
import BootstrapTable from 'react-bootstrap-table2';
|
||||
import paginator from 'react-bootstrap-table2-paginator';
|
||||
import overlayFactory from 'react-bootstrap-table2-overlay';
|
||||
|
||||
// ...
|
||||
const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
remote
|
||||
loading={ loading }
|
||||
keyField="id"
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
pagination={ paginator({ page, sizePerPage, totalSize }) }
|
||||
onTableChange={ onTableChange }
|
||||
overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
|
||||
/>
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
|
||||
RemotePagination.propTypes = {
|
||||
data: PropTypes.array.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
totalSize: PropTypes.number.isRequired,
|
||||
sizePerPage: PropTypes.number.isRequired,
|
||||
onTableChange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
class Container extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
page: 1,
|
||||
loading: false,
|
||||
data: products.slice(0, 10),
|
||||
sizePerPage: 10
|
||||
};
|
||||
}
|
||||
|
||||
handleTableChange = ({ page, sizePerPage }) => {
|
||||
const currentIndex = (page - 1) * sizePerPage;
|
||||
setTimeout(() => {
|
||||
this.setState(() => ({
|
||||
page,
|
||||
loading: false,
|
||||
data: products.slice(currentIndex, currentIndex + sizePerPage),
|
||||
sizePerPage
|
||||
}));
|
||||
}, 3000);
|
||||
this.setState(() => ({ loading: true }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { data, sizePerPage, page, loading } = this.state;
|
||||
return (
|
||||
<RemotePagination
|
||||
data={ data }
|
||||
page={ page }
|
||||
loading={ loading }
|
||||
sizePerPage={ sizePerPage }
|
||||
totalSize={ products.length }
|
||||
onTableChange={ this.handleTableChange }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
remote
|
||||
loading={ loading }
|
||||
keyField="id"
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
pagination={ paginator({ page, sizePerPage, totalSize }) }
|
||||
onTableChange={ onTableChange }
|
||||
overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
|
||||
/>
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
|
||||
RemotePagination.propTypes = {
|
||||
data: PropTypes.array.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
loading: PropTypes.bool.isRequired,
|
||||
totalSize: PropTypes.number.isRequired,
|
||||
sizePerPage: PropTypes.number.isRequired,
|
||||
onTableChange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
class Container extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
page: 1,
|
||||
loading: false,
|
||||
data: products.slice(0, 10),
|
||||
sizePerPage: 10
|
||||
};
|
||||
}
|
||||
|
||||
handleTableChange = ({ page, sizePerPage }) => {
|
||||
const currentIndex = (page - 1) * sizePerPage;
|
||||
setTimeout(() => {
|
||||
this.setState(() => ({
|
||||
page,
|
||||
loading: false,
|
||||
data: products.slice(currentIndex, currentIndex + sizePerPage),
|
||||
sizePerPage
|
||||
}));
|
||||
}, 3000);
|
||||
this.setState(() => ({ loading: true }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { data, sizePerPage, page, loading } = this.state;
|
||||
return (
|
||||
<RemotePagination
|
||||
data={ data }
|
||||
page={ page }
|
||||
loading={ loading }
|
||||
sizePerPage={ sizePerPage }
|
||||
totalSize={ products.length }
|
||||
onTableChange={ this.handleTableChange }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Container;
|
||||
Reference in New Issue
Block a user