20180801 release

docs/basic-filter.md

@@ -31,6 +31,7 @@ You can get all types of filters via import and these filters are a factory func
 
 * TextFilter
 * SelectFilter
+* MultiSelectFilter
 * NumberFilter
 * DateFilter
 * CustomFilter
@@ -120,6 +121,52 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
+## MultiSelect Filter
+
+Multi-select filter is almost same as regular select filterfilter : 
+
+```js
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+Following is an example for custom multi-select filter:
+
+```js
+import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const qualityFilter = multiSelectFilter({
+  options: selectOptions,
+  placeholder: 'My Custom PlaceHolder',  // custom the input placeholder
+  className: 'my-custom-text-filter', // custom classname on input
+  defaultValue: '2', // default filtering value
+  comparator: Comparator.LIKE, // default is Comparator.EQ
+  style: { ... }, // your custom styles on input
+  withoutEmptyOption: true  // hide the default select option
+});
+
+// omit...
+```
+
 ## Number Filter
 
 ```js
@@ -286,5 +333,6 @@ class Table extends Components {
 ### Examples
 * [Example For Programmtically Text Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Text%20Filter%20)
 * [Example For Programmtically Select Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Select%20Filter%20)  
+* [Example For Programmtically MultiSelect Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Multi%20Select%20Filter)  
 * [Example For Programmtically Number Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Number%20Filter%20)
 * [Example For Programmtically Date Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%Date%20Filter%20)

docs/filter-props.md

@@ -12,6 +12,7 @@ title: Column Filter Props
 * [Props of Filters](#props-of-filters)
    * [textFilter](#textfilter)
    * [selectFilter](#selectFilter)
+   * [multiSelectFilter](#multiSelectFilter)
    * [numberFilter](#numberFilter)
    * [dateFilter](#dateFilter)
    * [customFilter](#customFilter)
@@ -27,6 +28,7 @@ You should apply following two props to enable filter functionality:
 * Add `filter` property on `column` object:
    * textFilter
    * selectFilter
+   * multiSelectFilter
    * numberFilter
    * dateFilter
    * customFilter
@@ -175,6 +177,64 @@ const columns = [
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
+## multiSelectFilter
+**Required**:
+
+### multiSelectFilter.options - [Object]
+* (Required) the options for the list of drop down.
+
+**Optional**:
+
+### multiSelectFilter.className - [String]
+* custom class name on input
+
+### multiSelectFilter.withoutEmptyOption - [Boolean]
+* When it was set to `true`, the drop down list would hide the default selection.
+
+### multiSelectFilter.defaultValue - [Array]
+* default filtering value
+
+### multiSelectFilter.comparator - [Comparator]
+* Specify what kind of comparator to compare. Default is `Comparator.EQ`
+
+### multiSelectFilter.style - [Object]
+* your custom inline styles on `input`
+
+### multiSelectFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For multiSelectFilter, `filter(value)` to filter columns dynamically.
+
+**Example**
+```js
+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: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    className: 'test-classname',
+    withoutEmptyOption: true,
+    defaultValue: [0, 2],
+    comparator: Comparator.LIKE, // default is Comparator.EQ
+    style: { backgroundColor: 'pink' },
+    getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
 ## numberFilter
 **Required**: NONE
 
@@ -355,6 +415,7 @@ We support the following ways to do the comparison. Each `filter` has its defaul
 Following properties is valid in `FILTER_TYPES`:
 * TEXT
 * SELECT
+* MULTISELECT
 * NUMBER
 * DATE
 

docs/migration.md

@@ -94,7 +94,7 @@ Please see [available filter configuration](./filter-props.html).
 - [x] Custom Select Filter
 - [x] Number Filter
 - [X] Date Filter
-- [ ] Array Filter
+- [x] Array Filter
 - [X] Programmatically Filter
 
 Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   

website/blog/2018-08-01-version-bump.md

@@ -0,0 +1,22 @@
+---
+title: New Release (2018-08-01)
+author: Allen Fang
+authorURL: https://twitter.com/allenfang_tw
+---
+
+## Changed Packages
+
+This release bump following packages:
+
+* `react-bootstrap-table2-filter@0.4.0`
+
+## Changelog
+
+### Bug fixes
+N/A
+
+### Features
+* Support MultiSelect Filter([e26065](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/e26065b11606d45eff33a027008e9cafadcc0c86), [6f4e77](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/6f4e779a3eac6f0eda2a84c43fce5c733fb30980))
+
+### Enhancements
+N/A