add stories for custom pagination

2026-08-11 11:40:22 +00:00 · 2018-12-22 14:03:02 +08:00
parent 620309115f
commit 91816fcc01
8 changed files with 754 additions and 1 deletions
@@ -0,0 +1,106 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint no-unused-vars: 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 pageButtonRenderer = ({
+  page,
+  active,
+  disable,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  const activeStyle = {};
+  if (active) {
+    activeStyle.backgroundColor = 'black';
+    activeStyle.color = 'white';
+  } else {
+    activeStyle.backgroundColor = 'gray';
+    activeStyle.color = 'black';
+  }
+  if (typeof page === 'string') {
+    activeStyle.backgroundColor = 'white';
+    activeStyle.color = 'black';
+  }
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } style={ activeStyle }>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const pageButtonRenderer = ({
+  page,
+  active,
+  disable,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  const activeStyle = {};
+  if (active) {
+    activeStyle.backgroundColor = 'black';
+    activeStyle.color = 'white';
+  } else {
+    activeStyle.backgroundColor = 'gray';
+    activeStyle.color = 'black';
+  }
+  if (typeof page === 'string') {
+    activeStyle.backgroundColor = 'white';
+    activeStyle.color = 'black';
+  }
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } style={ activeStyle }>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
@@ -0,0 +1,78 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 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 pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+  return (
+    <div>
+      {
+        pageWithoutIndication.map(p => (
+          <button className="btn btn-success" onClick={ () => onPageChange(p.page) }>{ p.page }</button>
+        ))
+      }
+    </div>
+  );
+};
+
+const options = {
+  pageListRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+  return (
+    <div>
+      {
+        pageWithoutIndication.map(p => (
+          <button className="btn btn-success" onClick={ () => onPageChange(p.page) }>{ p.page }</button>
+        ))
+      }
+    </div>
+  );
+};
+
+const options = {
+  pageListRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
@@ -0,0 +1,96 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 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 sizePerPageOptionRenderer = ({
+  text,
+  page,
+  onSizePerPageChange
+}) => (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
+    <a
+      href="#"
+      tabIndex="-1"
+      role="menuitem"
+      data-page={ page }
+      onMouseDown={ (e) => {
+        e.preventDefault();
+        onSizePerPageChange(page);
+      } }
+      style={ { color: 'red' } }
+    >
+      { text }
+    </a>
+  </li>
+);
+
+const options = {
+  sizePerPageOptionRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const sizePerPageOptionRenderer = ({
+  text,
+  page,
+  onSizePerPageChange
+}) => (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
+    <a
+      href="#"
+      tabIndex="-1"
+      role="menuitem"
+      data-page={ page }
+      onMouseDown={ (e) => {
+        e.preventDefault();
+        onSizePerPageChange(page);
+      } }
+      style={ { color: 'red' } }
+    >
+      { text }
+    </a>
+  </li>
+);
+
+const options = {
+  sizePerPageOptionRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
@@ -0,0 +1,89 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 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 sizePerPageRenderer = ({
+  options,
+  currSizePerPage,
+  onSizePerPageChange
+}) => (
+  <div className="btn-group" role="group">
+    {
+      options.map((option) => {
+        const isSelect = currSizePerPage === \`$\{option.page}\`;
+        return (
+          <button
+            key={ option.text }
+            type="button"
+            onClick={ () => onSizePerPageChange(option.page) }
+            className={ \`btn $\{isSelect ? 'btn-secondary' : 'btn-warning'}\` }
+          >
+            { option.text }
+          </button>
+        );
+      })
+    }
+  </div>
+);
+
+const options = {
+  sizePerPageRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />s
+`;
+
+const sizePerPageRenderer = ({
+  options,
+  currSizePerPage,
+  onSizePerPageChange
+}) => (
+  <div className="btn-group" role="group">
+    {
+      options.map(option => (
+        <button
+          key={ option.text }
+          type="button"
+          onClick={ () => onSizePerPageChange(option.page) }
+          className={ `btn ${currSizePerPage === `${option.page}` ? 'btn-secondary' : 'btn-warning'}` }
+        >
+          { option.text }
+        </button>
+      ))
+    }
+  </div>
+);
+
+const options = {
+  sizePerPageRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
@@ -0,0 +1,166 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider } 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'
+}];
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+class FullyCustomPagination extends React.Component {
+  handleNextPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page + 1);
+  }
+
+  handlePrevPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page - 1);
+  }
+
+  handleSizePerPage = ({
+    page,
+    onSizePerPageChange
+  }, newSizePerPage) => {
+    onSizePerPageChange(newSizePerPage, page);
+  }
+
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationBaseProps
+            }) => (
+              <div>
+                <div>
+                  <p>Current Page: { paginationProps.page }</p>
+                  <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+                </div>
+                <div className="btn-group" role="group">
+                  <button className="btn btn-primary" onClick={ this.handleNextPage(paginationProps) }>Next Page</button>
+                  <button className="btn btn-success" onClick={ this.handlePrevPage(paginationProps) }>Prev Page</button>
+                  <button className="btn btn-danger" onClick={ () => this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10</button>
+                  <button className="btn btn-warning" onClick={ () => this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25</button>
+                </div>
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationBaseProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+export default class FullyCustomPagination extends React.Component {
+  handleNextPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page + 1);
+  }
+
+  handlePrevPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page - 1);
+  }
+
+  handleSizePerPage = ({
+    page,
+    onSizePerPageChange
+  }, newSizePerPage) => {
+    onSizePerPageChange(newSizePerPage, page);
+  }
+
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationBaseProps
+            }) => (
+              <div>
+                <div>
+                  <p>Current Page: { paginationProps.page }</p>
+                  <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+                </div>
+                <div className="btn-group" role="group">
+                  <button className="btn btn-primary" onClick={ this.handleNextPage(paginationProps) }>Next Page</button>
+                  <button className="btn btn-success" onClick={ this.handlePrevPage(paginationProps) }>Prev Page</button>
+                  <button className="btn btn-danger" onClick={ () => this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10</button>
+                  <button className="btn btn-warning" onClick={ () => this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25</button>
+                </div>
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationBaseProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
@@ -0,0 +1,102 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } 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, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationBaseProps
+    }) => (
+      <div>
+        <PaginationListStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationBaseProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandalonePaginationList extends React.Component {
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationBaseProps
+            }) => (
+              <div>
+                <PaginationListStandalone
+                  { ...paginationProps }
+                />
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationBaseProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
@@ -0,0 +1,102 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, SizePerPageDropdownStandalone } 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, { PaginationProvider, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationBaseProps
+    }) => (
+      <div>
+        <SizePerPageDropdownStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationBaseProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandaloneSizePerPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationBaseProps
+            }) => (
+              <div>
+                <SizePerPageDropdownStandalone
+                  { ...paginationProps }
+                />
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationBaseProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
@@ -147,6 +147,13 @@ import ExpandHooks from 'examples/row-expand/expand-hooks';
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
 import CustomPaginationTable from 'examples/pagination/custom-pagination';
+import CustomPageButtonTable from 'examples/pagination/custom-page-button';
+import CustomSizePerPageOptionTable from 'examples/pagination/custom-size-per-page-option';
+import CustomSizePerPageTable from 'examples/pagination/custom-size-per-page';
+import CustomPageListTable from 'examples/pagination/custom-page-list';
+import StandalonePaginationList from 'examples/pagination/standalone-pagination-list';
+import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page';
+import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination';

 // search
 import SearchTable from 'examples/search';
@@ -345,7 +352,14 @@ storiesOf('Pagination', module)
  .addDecorator(bootstrapStyle())
  .add('Basic Pagination Table', () => <PaginationTable />)
  .add('Pagination Hooks', () => <PaginationHooksTable />)
-  .add('Custom Pagination', () => <CustomPaginationTable />);
+  .add('Custom Pagination', () => <CustomPaginationTable />)
+  .add('Custom Page Button', () => <CustomPageButtonTable />)
+  .add('Custom Page List', () => <CustomPageListTable />)
+  .add('Custom SizePerPage Option', () => <CustomSizePerPageOptionTable />)
+  .add('Custom SizePerPage', () => <CustomSizePerPageTable />)
+  .add('Standalone Pagination List', () => <StandalonePaginationList />)
+  .add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
+  .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />);

 storiesOf('Table Search', module)
  .addDecorator(bootstrapStyle())