Publish

- react-bootstrap-table2-example@1.0.11
 - react-bootstrap-table-next@1.4.2

README.md

@@ -1,43 +1,56 @@
 # react-bootstrap-table2
+
 [![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
-Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
-> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it   
+> Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
 
-`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
+`react-bootstrap-table2` separates some functionalities from its core modules to other modules as listed in the following:
 
-* [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
-* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
-* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
-* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
-* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
-* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+- [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+- [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+- [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+- [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+- [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+- [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
 
-This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernel module(SRP).
+Not only does this reduce the bundle size of your apps but also helps us have a cleaner design to avoid handling too much logic in the kernel module(SRP).
 
 ## Migration
-If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).
+
+If you are coming from the legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please check out the [migration guide](./docs/migration.md).
 
 ## Usage
+
 See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
 
 ## Online Demo
+
 See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
 
 ## Roadmap
+
 See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
 
 ## Development
-Please check [development guide](./docs/development.md).
 
-## How should I run storybook example in my local?
+Please check the [development guide](./docs/development.md).
+
+## Running storybook example on your local machine
 
 ```sh
+# Clone the repo
 $ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+
+# change dir to the cloned repo
 $ cd react-bootstrap-table2
+
+# Install all dependencies with yarn
 $ yarn install
+
+# Start the stroybook server, then go to localhost:6006
 $ yarn storybook
-$ Go to localhost:6006
+
 ```
 
 **Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

packages/react-bootstrap-table2-editor/src/editor-indicator.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 const EditorIndicator = ({ invalidMessage }) =>
   (
-    <div className="alert alert-danger fade in">
+    <div className="alert alert-danger in" role="alert">
       <strong>{ invalidMessage }</strong>
     </div>
   );

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -103,7 +103,7 @@ const columns = [{
 }, {
   dataField: 'quality',
   text: 'Product Quality',
-  editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => (
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
     <QualityRanger { ...editorProps } value={ value } />
   )
 }];

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js

@@ -8,9 +8,9 @@ import { productsQualityGenerator } from 'utils/common';
 const products = productsQualityGenerator(6);
 
 const selectOptions = [
-  { label: 0, value: 'good' },
-  { label: 1, value: 'Bad' },
-  { label: 2, value: 'unknown' }
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
 ];
 
 const columns = [{
@@ -22,7 +22,7 @@ const columns = [{
 }, {
   dataField: 'quality',
   text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
   filter: selectFilter({
     options: selectOptions
   })
@@ -33,9 +33,9 @@ import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
 
 const selectOptions = [
-  { label: 0, value: 'good' },
-  { label: 1, value: 'Bad' },
-  { label: 2, value: 'unknown' }
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
 ];
 
 const columns = [{
@@ -47,7 +47,7 @@ const columns = [{
 }, {
   dataField: 'quality',
   text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
   filter: selectFilter({
     options: selectOptions
   })

packages/react-bootstrap-table2-example/examples/columns/column-format-table.js

@@ -2,9 +2,9 @@ import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
+import { productsGenerator, withOnSale } from 'utils/common';
 
-const products = productsGenerator();
+const products = withOnSale(productsGenerator());
 
 function priceFormatter(cell, row) {
   if (row.onSale) {

packages/react-bootstrap-table2-example/examples/row-expand/expand-by-column-only.js

@@ -51,7 +51,8 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
-  showExpandColumn: true
+  showExpandColumn: true,
+  expandByColumnOnly: true
 };
 
 <BootstrapTable

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "main": "index.js",
   "private": true,

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -1,4 +1,5 @@
 /* eslint no-mixed-operators: 0 */
+/* eslint no-param-reassign: 0 */
 
 /**
  * products generator for stories
@@ -22,6 +23,12 @@ export const productsGenerator = (quantity = 5, callback) => {
   );
 };
 
+export const withOnSale = rows => rows.map((row) => {
+  if (row.id > 2) row.onSale = false;
+  else row.onSale = true;
+  return row;
+});
+
 export const productsQualityGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,

packages/react-bootstrap-table2-filter/README.md

@@ -119,15 +119,15 @@ const qualityFilter = selectFilter({
 
 ```js
 const selectOptions = [
-  { label: 0, value: 'good' },
-  { label: 1, value: 'Bad' },
-  { label: 2, value: 'unknown' }
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
 ];
 const columns = [
   ..., {
   dataField: 'quality',
   text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
   filter: selectFilter({
     options: selectOptions
   })

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -9,7 +9,10 @@ import { FILTER_TYPE } from '../const';
 function optionsEquals(currOpts, prevOpts) {
   if (Array.isArray(currOpts)) {
     for (let i = 0; i < currOpts.length; i += 1) {
-      if (currOpts[i].label !== prevOpts[i].label) {
+      if (
+        currOpts[i].value !== prevOpts[i].value ||
+        currOpts[i].label !== prevOpts[i].label
+      ) {
         return false;
       }
     }
@@ -86,7 +89,7 @@ class SelectFilter extends Component {
     }
     if (Array.isArray(options)) {
       options.forEach(({ value, label }) =>
-        optionTags.push(<option key={ label } value={ label }>{ value }</option>));
+        optionTags.push(<option key={ value } value={ value }>{ label }</option>));
     } else {
       Object.keys(options).forEach(key =>
         optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-paginator/src/pagination-total.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const PaginationTotal = props => (
   <span className="react-bootstrap-table-pagination-total">
-    &nbsp;Showing rows { props.from } to&nbsp;{ props.to + 1 } of&nbsp;{ props.dataSize }
+    &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
   </span>
 );
 

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -45,6 +45,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       tabIndexCell,
       id,
       classes,
+      bootstrap4,
       striped,
       hover,
       bordered,
@@ -66,7 +67,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       'table-striped': striped,
       'table-hover': hover,
       'table-bordered': bordered,
-      'table-condensed': condensed
+      [(bootstrap4 ? 'table-sm' : 'table-condensed')]: condensed
     }, classes);
 
     const tableCaption = (caption && <Caption>{ caption }</Caption>);

packages/react-bootstrap-table2/src/contexts/selection-context.js

@@ -43,12 +43,13 @@ class SelectionProvider extends React.Component {
 
     let currSelected = [...this.state.selected];
 
+    let result = true;
+    if (onSelect) {
+      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
+      result = onSelect(row, checked, rowIndex, e);
+    }
+
     this.setState(() => {
-      let result = true;
-      if (onSelect) {
-        const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-        result = onSelect(row, checked, rowIndex, e);
-      }
       if (result === true || result === undefined) {
         if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
           currSelected = [rowKey];
@@ -81,24 +82,22 @@ class SelectionProvider extends React.Component {
       currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
     }
 
-    this.setState(() => {
-      let result;
-      if (onSelectAll) {
-        result = onSelectAll(
-          !isUnSelect,
-          dataOperator.getSelectedRows(
-            data,
-            keyField,
-            isUnSelect ? this.state.selected : currSelected
-          ),
-          e
-        );
-        if (Array.isArray(result)) {
-          currSelected = result;
-        }
+    let result;
+    if (onSelectAll) {
+      result = onSelectAll(
+        !isUnSelect,
+        dataOperator.getSelectedRows(
+          data,
+          keyField,
+          isUnSelect ? this.state.selected : currSelected
+        ),
+        e
+      );
+      if (Array.isArray(result)) {
+        currSelected = result;
       }
-      return { selected: currSelected };
-    });
+    }
+    this.setState(() => ({ selected: currSelected }));
   }
 
   render() {

packages/react-bootstrap-table2/src/header.js

@@ -18,8 +18,7 @@ const Header = (props) => {
     sortOrder,
     selectRow,
     onExternalFilter,
-    expandRow,
-    bootstrap4
+    expandRow
   } = props;
 
   let SelectionHeaderCellComp = () => null;
@@ -50,7 +49,6 @@ const Header = (props) => {
               return (
                 <HeaderCell
                   index={ i }
-                  bootstrap4={ bootstrap4 }
                   key={ column.dataField }
                   column={ column }
                   onSort={ onSort }
@@ -78,8 +76,7 @@ Header.propTypes = {
   selectRow: PropTypes.object,
   onExternalFilter: PropTypes.func,
   className: PropTypes.string,
-  expandRow: PropTypes.object,
-  bootstrap4: PropTypes.bool
+  expandRow: PropTypes.object
 };
 
 export default Header;

packages/react-bootstrap-table2/src/row-expand/expand-cell.js

@@ -33,7 +33,7 @@ export default class ExpandCell extends Component {
 
   handleClick(e) {
     const { rowKey, expanded, onRowExpand, rowIndex } = this.props;
-
+    e.stopPropagation();
     onRowExpand(rowKey, !expanded, rowIndex, e);
   }