Stories for Bootstrap 4

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>
+);

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>
+);

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>
+ );
+ }
+}

packages/react-bootstrap-table2-example/package.json

@@ -6,9 +6,9 @@
  "private": true,
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
- "storybook": "start-storybook -p 6006",
+ "storybook": "start-storybook -p 6006 -s ./public",
  "gh-pages:clean": "rimraf ./storybook-static",
- "gh-pages:build": "build-storybook"
+ "gh-pages:build": "build-storybook -s ./public"
  },
  "author": "",
  "license": "ISC",
@@ -17,9 +17,6 @@
  "react": "^16.3.0",
  "react-dom": "^116.3.0"
  },
- "dependencies": {
- "bootstrap": "^3.3.7"
- },
  "devDependencies": {
  "@storybook/addon-console": "^1.0.0",
  "@storybook/react": "^3.2.8",

packages/react-bootstrap-table2-example/stories/bootstrap-style.js

@@ -0,0 +1,56 @@
+/* eslint no-return-assign: 0 */
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+export const BOOTSTRAP_VERSION = {
+ FOUR: '4.1.3',
+ THREE: '3.3.7'
+};
+
+class WithBootstrapStyle extends PureComponent {
+ static propTypes = {
+ version: PropTypes.string.isRequired,
+ render: PropTypes.func.isRequired
+ }
+
+ constructor() {
+ super();
+
+ this.state = { loading: true };
+ }
+
+ componentDidMount() {
+ this.style.addEventListener('load', this.handleLoadEvent);
+ }
+
+ componentWillUnmount() {
+ this.style.removeEventListener('load', this.handleLoadEvent);
+ }
+
+ handleLoadEvent = () => {
+ this.setState({ loading: false });
+ }
+
+ render() {
+ const { version, render } = this.props;
+
+ const href = `style/bootstrap.${version}.min.css`;
+
+ return (
+ <Fragment>
+ <link href={ href } rel="stylesheet" ref={ element => this.style = element } />
+ { render(this.state.loading) }
+ </Fragment>
+ );
+ }
+}
+
+/**
+ * Currently we adopt version 3 as default. 
+ */
+export default (version = BOOTSTRAP_VERSION.THREE) => story => (
+ <WithBootstrapStyle
+ version={ version }
+ render={ loading => !loading && story() }
+ />
+);