From 533bff3f17f965e607be8b1ad90ef0fcda03f48f Mon Sep 17 00:00:00 2001 From: AllenFang Date: Tue, 31 Jul 2018 17:15:40 +0800 Subject: [PATCH] 20180801 release --- docs/basic-filter.md | 48 +++++++++++++++++++ docs/filter-props.md | 61 +++++++++++++++++++++++++ docs/migration.md | 2 +- website/blog/2018-08-01-version-bump.md | 22 +++++++++ 4 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 website/blog/2018-08-01-version-bump.md diff --git a/docs/basic-filter.md b/docs/basic-filter.md index fcd3753..636edf2 100644 --- a/docs/basic-filter.md +++ b/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 + }) +}]; + + +``` + +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) \ No newline at end of file diff --git a/docs/filter-props.md b/docs/filter-props.md index c233aa8..88affeb 100644 --- a/docs/filter-props.md +++ b/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 = [ ``` +## 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; + } + }) +}]; + + +``` + ## 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 diff --git a/docs/migration.md b/docs/migration.md index fca59cd..812c5e1 100644 --- a/docs/migration.md +++ b/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. diff --git a/website/blog/2018-08-01-version-bump.md b/website/blog/2018-08-01-version-bump.md new file mode 100644 index 0000000..b07bffe --- /dev/null +++ b/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 \ No newline at end of file