From bf6f6087ba35cb1393571e3210480806ae8c6f55 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Mon, 20 Aug 2018 20:32:48 +0800
Subject: [PATCH] add story for dbclick to edit with row selection

---
 .../dbclick-to-edit-with-selection-table.js   | 69 +++++++++++++++++++
 .../stories/index.js                          |  2 +
 2 files changed, 71 insertions(+)
 create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-with-selection-table.js

diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-with-selection-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-with-selection-table.js
new file mode 100644
index 0000000..ad5efd9
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-with-selection-table.js
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+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: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true
+};
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Double click to edit cell</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+      cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+    />
+    <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 b7385e7..825aca2 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -99,6 +99,7 @@ import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table';
 import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
 import EditorStyleTable from 'examples/cell-edit/editor-style-table';
 import EditorClassTable from 'examples/cell-edit/editor-class-table';
+import DBClickEditWithSelection from 'examples/cell-edit/dbclick-to-edit-with-selection-table';
 import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
 import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
 import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
@@ -281,6 +282,7 @@ storiesOf('Cell Editing', module)
   .add('Custom Cell Classes', () => <CellEditClassTable />)
   .add('Custom Editor Classes', () => <EditorClassTable />)
   .add('Custom Editor Style', () => <EditorStyleTable />)
+  .add('DoubleClick to Edit with Selection', () => <DBClickEditWithSelection />)
   .add('Dropdown Editor', () => <DropdownEditorTable />)
   .add('Textarea Editor', () => <TextareaEditorTable />)
   .add('Checkbox Editor', () => <CheckboxEditorTable />)