From 7e29999b40f06d6b60f67e3b41d033a11d8c2af5 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Tue, 31 Jul 2018 16:54:48 +0800
Subject: [PATCH] patch multiselect filter's stories

---
 .../custom-multi-select-filter.js             | 80 ++++++++++++++++
 .../multi-select-filter-default-value.js      |  4 +-
 .../column-filter/multi-select-filter.js      |  4 +-
 .../programmatically-multi-select-filter.js   | 95 +++++++++++++++++++
 .../stories/index.js                          |  6 +-
 5 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/custom-multi-select-filter.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/programmatically-multi-select-filter.js

diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-multi-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-multi-select-filter.js
new file mode 100644
index 0000000..0f90ac9
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-multi-select-filter.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    withoutEmptyOption: true,
+    style: {
+      backgroundColor: 'pink'
+    },
+    className: 'test-classname',
+    datamycustomattr: 'datamycustomattr'
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    withoutEmptyOption: true,
+    style: {
+      backgroundColor: 'pink'
+    },
+    className: 'test-classname',
+    datamycustomattr: 'datamycustomattr'
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter-default-value.js
index 2e2b0e9..d2b4e19 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter-default-value.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter-default-value.js
@@ -30,7 +30,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
 
 const selectOptions = {
   0: 'good',
@@ -48,7 +48,7 @@ const columns = [{
   dataField: 'quality',
   text: 'Product Quailty',
   formatter: cell => selectOptions[cell],
-  filter: selectFilter({
+  filter: multiSelectFilter({
     options: selectOptions,
     defaultValue: [0, 2]
   })
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter.js
index ac67a69..dce63cd 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter.js
@@ -29,7 +29,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
 
 const selectOptions = {
   0: 'good',
@@ -47,7 +47,7 @@ const columns = [{
   dataField: 'quality',
   text: 'Product Quailty',
   formatter: cell => selectOptions[cell],
-  filter: selectFilter({
+  filter: multiSelectFilter({
     options: selectOptions
   })
 }];
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-multi-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-multi-select-filter.js
new file mode 100644
index 0000000..e6c20e3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-multi-select-filter.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter([0, 2]);
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter([0, 2]);
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" and "unknow" '}</button>
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" and "unknow" '}</button>
+
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <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 c48dbe9..0617922 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -45,9 +45,10 @@ import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
+import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import MultiSelectFilter from 'examples/column-filter/multi-select-filter';
 import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
-import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
+import CustomMultiSelectFilter from 'examples/column-filter/custom-multi-select-filter';
 import NumberFilter from 'examples/column-filter/number-filter';
 import NumberFilterWithDefaultValue from 'examples/column-filter/number-filter-default-value';
 import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
@@ -58,6 +59,7 @@ import ProgrammaticallyTextFilter from 'examples/column-filter/programmatically-
 import ProgrammaticallySelectFilter from 'examples/column-filter/programmatically-select-filter';
 import ProgrammaticallyNumberFilter from 'examples/column-filter/programmatically-number-filter';
 import ProgrammaticallyDateFilter from 'examples/column-filter/programmatically-date-filter';
+import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmatically-multi-select-filter';
 import CustomFilter from 'examples/column-filter/custom-filter';
 import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
 
@@ -190,11 +192,13 @@ storiesOf('Column Filter', module)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)
   .add('Custom Date Filter', () => <CustomDateFilter />)
+  .add('Custom MultiSelect Filter', () => <CustomMultiSelectFilter />)
   .add('Custom Filter Value', () => <CustomFilterValue />)
   .add('Programmatically Text Filter', () => <ProgrammaticallyTextFilter />)
   .add('Programmatically Select Filter', () => <ProgrammaticallySelectFilter />)
   .add('Programmatically Number Filter', () => <ProgrammaticallyNumberFilter />)
   .add('Programmatically Date Filter', () => <ProgrammaticallyDateFilter />)
+  .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />);