From 8b52053af2902d4fad906089601a259d754de549 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Sun, 19 Aug 2018 00:14:31 +0800
Subject: [PATCH] Add stories for bootstrap 4

* row-selction, sort and pagination
---
 .../examples/bootstrap4/pagination.js         | 45 ++++++++++++
 .../examples/bootstrap4/row-selection.js      | 58 +++++++++++++++
 .../examples/bootstrap4/sort.js               | 70 +++++++++++++++++++
 .../stories/index.js                          | 11 ++-
 4 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js

diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js
new file mode 100644
index 0000000..2f80814
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js
@@ -0,0 +1,45 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory 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-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable bootstrap4 keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } pagination={ paginationFactory() } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js
new file mode 100644
index 0000000..d2465dd
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
+};
+
+<BootstrapTable
+  bootstrap4
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js
new file mode 100644
index 0000000..443e667
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js
@@ -0,0 +1,70 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+<BootstrapTable
+  bootstrap4
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  defaultSorted={ defaultSorted } 
+/>
+`;
+
+
+export default class extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } defaultSorted={ defaultSorted } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 5b7b68b..eff1ee0 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
 
 // welcome
 import Welcome from 'examples/welcome';
+
 // basic
 import BasicTable from 'examples/basic';
 import BorderlessTable from 'examples/basic/borderless-table';
@@ -13,6 +14,11 @@ import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 import LargeTable from 'examples/basic/large-table';
 
+// bootstrap 4
+import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
+import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
+import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
+
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
 import ColumnFormatTable from 'examples/columns/column-format-table';
@@ -180,8 +186,9 @@ storiesOf('Basic Table', module)
 
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
-  .add('Basic Table', () => <BasicTable />)
-  .add('Basic Pagination Table', () => <PaginationTable />);
+  .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
+  .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
+  .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />);
 
 storiesOf('Work on Columns', module)
   .addDecorator(bootstrapStyle())