diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md index b38007e..46097ba 100644 --- a/packages/react-bootstrap-table2-filter/README.md +++ b/packages/react-bootstrap-table2-filter/README.md @@ -115,7 +115,9 @@ const qualityFilter = selectFilter({ // omit... ``` -> Note, the selectOptions can be an array also: +> Note, the selectOptions can be an array or a function which return an array: + +### Array as options ```js const selectOptions = [ @@ -133,6 +135,24 @@ const columns = [ }) }]; ``` +### Function as options + +```js +const selectOptions = [ + { value: 0, label: 'good' }, + { value: 1, label: 'Bad' }, + { value: 2, label: 'unknown' } +]; +const columns = [ + ..., { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions.find(opt => opt.value === cell).label, + filter: selectFilter({ + options: () => selectOptions + }) +}]; +``` The benifit is `react-bootstrap-table2` will render the select options by the order of array. diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js index 7b83827..7b49a8c 100644 --- a/packages/react-bootstrap-table2-filter/src/components/select.js +++ b/packages/react-bootstrap-table2-filter/src/components/select.js @@ -1,6 +1,7 @@ /* eslint react/require-default-props: 0 */ /* eslint no-return-assign: 0 */ /* eslint react/no-unused-prop-types: 0 */ +/* eslint class-methods-use-this: 0 */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { LIKE, EQ } from '../comparison'; @@ -44,7 +45,8 @@ class SelectFilter extends Component { constructor(props) { super(props); this.filter = this.filter.bind(this); - const isSelected = getOptionValue(props.options, this.getDefaultValue()) !== undefined; + this.options = this.getOptions(props); + const isSelected = getOptionValue(this.options, this.getDefaultValue()) !== undefined; this.state = { isSelected }; } @@ -69,19 +71,30 @@ class SelectFilter extends Component { componentDidUpdate(prevProps) { let needFilter = false; - if (this.props.defaultValue !== prevProps.defaultValue) { + const { + column, + onFilter, + defaultValue + } = this.props; + const nextOptions = this.getOptions(this.props); + if (defaultValue !== prevProps.defaultValue) { needFilter = true; - } else if (!optionsEquals(this.props.options, prevProps.options)) { + } else if (!optionsEquals(nextOptions, this.options)) { + this.options = nextOptions; needFilter = true; } if (needFilter) { const value = this.selectInput.value; if (value) { - this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value); + onFilter(column, FILTER_TYPE.SELECT)(value); } } } + getOptions(props) { + return typeof props.options === 'function' ? props.options(props.column) : props.options; + } + getDefaultValue() { const { filterState, defaultValue } = this.props; if (filterState && typeof filterState.filterVal !== 'undefined') { @@ -90,25 +103,6 @@ class SelectFilter extends Component { return defaultValue; } - getOptions() { - const optionTags = []; - const { options, placeholder, column, withoutEmptyOption } = this.props; - if (!withoutEmptyOption) { - optionTags.push(( - - )); - } - if (Array.isArray(options)) { - options.forEach(({ value, label }) => - optionTags.push()); - } else { - Object.keys(options).forEach(key => - optionTags.push() - ); - } - return optionTags; - } - cleanFiltered() { const value = (this.props.defaultValue !== undefined) ? this.props.defaultValue : ''; this.setState(() => ({ isSelected: value !== '' })); @@ -128,6 +122,26 @@ class SelectFilter extends Component { this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value); } + renderOptions() { + const optionTags = []; + const { options } = this; + const { placeholder, column, withoutEmptyOption } = this.props; + if (!withoutEmptyOption) { + optionTags.push(( + + )); + } + if (Array.isArray(options)) { + options.forEach(({ value, label }) => + optionTags.push()); + } else { + Object.keys(options).forEach(key => + optionTags.push() + ); + } + return optionTags; + } + render() { const { style, @@ -163,7 +177,7 @@ class SelectFilter extends Component { onClick={ e => e.stopPropagation() } defaultValue={ this.getDefaultValue() || '' } > - { this.getOptions() } + { this.renderOptions() } );