From 024dcf8c1208d47a403f5a597fa361e21bc0acd8 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sat, 16 Dec 2017 17:47:27 +0800
Subject: [PATCH] add some stories for text filter

---
 .../column-filter/custom-text-filter.js       | 66 +++++++++++++++++++
 .../text-filter-default-value.js              | 53 +++++++++++++++
 .../text-filter-eq-comparator.js              | 54 +++++++++++++++
 .../stories/index.js                          |  6 ++
 4 files changed, 179 insertions(+)
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js

diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
new file mode 100644
index 0000000..319dd27
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
@@ -0,0 +1,66 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    delay: 1000, // default is 500ms
+    style: {
+      backgroundColor: 'yellow'
+    },
+    className: 'test-classname',
+    placeholder: 'Custom PlaceHolder',
+    onClick: e => console.log(e)
+  })
+}];
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    delay: 1000, // default is 500ms
+    style: {
+      backgroundColor: 'yellow'
+    },
+    className: 'test-classname',
+    placeholder: 'Custom PlaceHolder',
+    onClick: e => console.log(e)
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ fitlerFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ fitlerFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
new file mode 100644
index 0000000..824ee2c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    defaultValue: '2103'
+  })
+}];
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    defaultValue: '2103'
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ fitlerFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ fitlerFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
new file mode 100644
index 0000000..7c2740a
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    comparator: Comparator.EQ // default is Comparator.LIKE
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    comparator: Comparator.EQ
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ fitlerFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3>Product Name filter apply Equal Comparator</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ fitlerFactory() }
+    />
+    <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 5f4eb33..b2f0f15 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -34,6 +34,9 @@ import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
 
 // column filter
 import TextFilter from 'examples/column-filter/text-filter';
+import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
+import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator';
+import CustomTextFilter from 'examples/column-filter/custom-text-filter';
 import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 
 // work on rows
@@ -127,6 +130,9 @@ storiesOf('Work on Header Columns', module)
 
 storiesOf('Column Filter', module)
   .add('Text Filter', () => <TextFilter />)
+  .add('Text Filter with Default Value', () => <TextFilterWithDefaultValue />)
+  .add('Text Filter with Comparator', () => <TextFilterComparator />)
+  .add('Custom Text Filter', () => <CustomTextFilter />)
   // add another filter type example right here.
   .add('Custom Filter Value', () => <CustomFilterValue />);