fix #60

* implement cell editor

* keyField shouldn't be editable

* add additional check to avoid some bugs

* add jsdom for enzyme mount

* add some helpers class for enzyme mounting

* add testing for cellEdit

* use npm instead

* add test for TableResolver

* table-layout: fixed; to fix the columns width when content of td changed

* add stories for cell edit

* add document for cellEdit

packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+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 sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const cellEdit = {
+  mode: 'click',
+  blurToSave: true
+};
+
+<BootstrapTableful
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+  mode: 'click',
+  blurToSave: true
+};
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,58 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+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 sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const cellEdit = {
+  mode: 'click',
+  beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+  afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+};
+
+<BootstrapTableful
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+  mode: 'click',
+  beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+  afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+};
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+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 sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const cellEdit = {
+  mode: 'click'
+};
+
+<BootstrapTableful
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+  mode: 'click'
+};
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+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',
+  editable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+  // Product Name column can't be edit anymore
+  editable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const cellEdit = {
+  mode: 'click',
+  blurToSave: true
+};
+
+<BootstrapTableful
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+  mode: 'click',
+  blurToSave: true
+};
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+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 sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const cellEdit = {
+  mode: 'dbclick'
+};
+
+<BootstrapTableful
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+  mode: 'dbclick'
+};
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+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 sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const cellEdit = {
+  mode: 'click',
+  blurToSave: true,
+  // Product ID: 0, 3 will be non-editable
+  nonEditableRows: () => [0, 3]
+};
+
+<BootstrapTableful
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+  mode: 'click',
+  blurToSave: true,
+  nonEditableRows: () => [0, 3]
+};
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);