vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-16 21:50:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement stateful layer (#48)

Browse Source 
* implement an internal stateful layer for data change(update/insert/delete)

* BootstrapTable -> BootstrapTableful
This commit is contained in:
Allen
2017-09-03 02:25:56 -05:00
committed by GitHub
parent 82b827561d
commit ae5c677854
24 changed files with 95 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -31,7 +31,7 @@ const columns = [{
}];
const sourceCode = `\
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
@@ -41,7 +41,7 @@ const sourceCode = `\
export default () => (
<div>
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
packages/react-bootstrap-table2-example/examples/basic/index.js
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -42,12 +42,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
Vendored
+4 -4
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const columns = [{
@@ -15,7 +15,7 @@ const columns = [{
}];
const sourceCode = `\
<BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication="Table is Empty" />
<BootstrapTableful keyField='id' data={ [] } columns={ columns } noDataIndication="Table is Empty" />
// Following is more customizable example
@@ -23,12 +23,12 @@ function indication() {
// return something here
}
<BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication={ indication } />
<BootstrapTableful keyField='id' data={ [] } columns={ columns } noDataIndication={ indication } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ [] } columns={ columns } noDataIndication="Table is Empty" />
<BootstrapTableful keyField="id" data={ [] } columns={ columns } noDataIndication="Table is Empty" />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -31,7 +31,7 @@ const columns = [{
}];
const sourceCode = `\
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
@@ -43,7 +43,7 @@ const sourceCode = `\
export default () => (
<div>
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -53,12 +53,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -53,12 +53,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
Vendored
+3 -3
View File
@@ -2,7 +2,7 @@
/* eslint no-alert: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -50,13 +50,13 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<h3>Try to Click on Product ID columns</h3>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -67,7 +67,7 @@ const columns = [
formatter: priceFormatter
}];
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
@@ -76,7 +76,7 @@ const columns = [
export default () => (
<div>
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-console: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -60,7 +60,7 @@ const columns = [
down: 'glyphicon glyphicon-chevron-down'
}];
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
@@ -69,7 +69,7 @@ const columns = [
export default () => (
<div>
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -41,12 +41,12 @@ const columns = [{
// omit...
];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -71,12 +71,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -47,12 +47,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -58,12 +58,12 @@ const columns = [{
text: 'PostCode'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -47,12 +47,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -53,12 +53,12 @@ const columns = [{
}
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
Vendored
+3 -3
View File
@@ -2,7 +2,7 @@
/* eslint no-alert: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -50,13 +50,13 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<h3>Try to Click on Product ID header column</h3>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -54,7 +54,7 @@ const columns = [
headerFormatter: priceFormatter
}];
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
@@ -63,7 +63,7 @@ const columns = [
export default () => (
<div>
<BootstrapTable
<BootstrapTableful
keyField="id"
data={ products }
columns={ columns }
packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -69,12 +69,12 @@ const columns = [{
}
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
import Code from 'common/codeBlock';
const products = [];
@@ -47,12 +47,12 @@ const columns = [{
text: 'Product Price'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } />
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);
packages/react-bootstrap-table2-example/src/index.js
Vendored
+2 -2
View File
@@ -1,7 +1,7 @@
import React from 'react';
import ReactDom from 'react-dom';
import { BootstrapTable } from 'react-bootstrap-table2';
import { BootstrapTableful } from 'react-bootstrap-table2';
const products = [];
@@ -62,5 +62,5 @@ const columns = [{
ReactDom.render(
<BootstrapTable keyField="id" data={ products } columns={ columns } />,
<BootstrapTableful keyField="id" data={ products } columns={ columns } />,
document.getElementById('example'));
packages/react-bootstrap-table2/src/bootstrap-table.js
Vendored
+6 -3
View File
@@ -11,11 +11,13 @@ class BootstrapTable extends PropsBaseResolver(Component) {
constructor(props) {
super(props);
this.validateProps();
this.store = new Store(props);
const { store } = this.props;
this.store = !store ? new Store(props) : store;
}
render() {
const {
data,
columns,
keyField,
striped,
@@ -37,10 +39,10 @@ class BootstrapTable extends PropsBaseResolver(Component) {
<table className={ tableClass }>
<Header columns={ columns } />
<Body
data={ this.store.data }
data={ data }
keyField={ keyField }
columns={ columns }
isEmpty={ this.store.isEmpty() }
isEmpty={ this.isEmpty() }
visibleColumnSize={ this.visibleColumnSize() }
noDataIndication={ noDataIndication }
/>
@@ -54,6 +56,7 @@ BootstrapTable.propTypes = {
keyField: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
columns: PropTypes.array.isRequired,
store: PropTypes.object,
noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
striped: PropTypes.bool,
bordered: PropTypes.bool,
packages/react-bootstrap-table2/src/index.js
Vendored
+5 -1
View File
@@ -1,5 +1,9 @@
import BootstrapTable from './bootstrap-table';
import withStateful from './stateful-layer';
const BootstrapTableful = withStateful(BootstrapTable);
export {
BootstrapTable
BootstrapTable,
BootstrapTableful
};
packages/react-bootstrap-table2/src/props-resolver/index.js
Vendored
+4
View File
@@ -11,4 +11,8 @@ export default ExtendBase =>
throw new Error('No any visible columns detect');
}
}
isEmpty() {
return this.props.data.length === 0;
}
};
packages/react-bootstrap-table2/src/stateful-layer.js
Vendored
+20
View File
@@ -0,0 +1,20 @@
/* eslint arrow-body-style: 0 */
import React, { Component } from 'react';
import Store from './store/base';
const withStateful = (Base) => {
class StatefulComponent extends Component {
constructor(props) {
super(props);
this.store = new Store(props);
}
render() {
const { props } = this;
return <Base { ...props } store={ this.store } />;
}
}
return StatefulComponent;
};
export default withStateful;