From 423769c1349034a5988e8a94b0b5b8831fd7cc2d Mon Sep 17 00:00:00 2001 From: Allen Date: Sat, 27 Jul 2019 16:19:52 +0800 Subject: [PATCH 1/9] fix #1007 (#1032) --- .../column-filter/custom-filter-logic.js | 8 ++--- .../src/context.js | 15 +++------- .../src/filter.js | 10 ++++++- .../test/context.test.js | 30 ++----------------- 4 files changed, 19 insertions(+), 44 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js index 540c38b05..25b37bb2c 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js @@ -50,11 +50,11 @@ class Table extends React.Component { `; export default class Table extends React.Component { - filterByPrice = (filterVal) => { + filterByPrice = (filterVal, data) => { if (filterVal) { - return products.filter(product => product.price == filterVal); + return data.filter(product => product.price == filterVal); } - return products; + return data; } render() { @@ -75,7 +75,7 @@ export default class Table extends React.Component { return (
-

Implement Custom Filter

+

Implement a eq price filter

(currFilters) => { const filterObj = currFilters[dataField]; filterFn = factory(filterObj.filterType); let filterValue; + let customFilter; for (let i = 0; i < columns.length; i += 1) { if (columns[i].dataField === dataField) { filterValue = columns[i].filterValue; + if (columns[i].filter) { + customFilter = columns[i].filter.props.onFilter; + } break; } } - result = filterFn(result, dataField, filterObj, filterValue); + if (customFilter) { + result = customFilter(filterObj.filterVal, result); + } else { + result = filterFn(result, dataField, filterObj, filterValue); + } }); return result; }; diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js index fcad5ddd4..face019d7 100644 --- a/packages/react-bootstrap-table2-filter/test/context.test.js +++ b/packages/react-bootstrap-table2-filter/test/context.test.js @@ -228,33 +228,7 @@ describe('FilterContext', () => { }); }); - describe('if filter.props.onFilter is defined', () => { - const filterVal = '3'; - const onFilter = jest.fn(); - const customColumns = columns.map((column, i) => { - if (i === 1) { - return { - ...column, - filter: textFilter({ onFilter }) - }; - } - return column; - }); - - beforeEach(() => { - wrapper = shallow(shallowContext(false, customColumns)); - wrapper.render(); - instance = wrapper.instance(); - }); - - it('should call filter.props.onFilter correctly', () => { - instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal); - expect(onFilter).toHaveBeenCalledTimes(1); - expect(onFilter).toHaveBeenCalledWith(filterVal); - }); - }); - - describe('if filter.props.onFilter is defined and return an undefined data', () => { + describe('if filter.props.onFilter is defined and return data', () => { const mockReturn = [{ id: 1, name: 'A' @@ -280,7 +254,7 @@ describe('FilterContext', () => { it('should call filter.props.onFilter correctly', () => { instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal); expect(onFilter).toHaveBeenCalledTimes(1); - expect(onFilter).toHaveBeenCalledWith(filterVal); + expect(onFilter).toHaveBeenCalledWith(filterVal, data); }); it('should set data correctly', () => { From 856e63d524736de350bd219c6c818d259cd3fed0 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 27 Jul 2019 17:11:11 +0800 Subject: [PATCH 2/9] fix #1027 --- .../react-bootstrap-table2-editor/README.md | 4 +- .../src/dropdown-editor.js | 10 ++- .../src/editing-cell.js | 2 +- ...pdown-editor-with-dynamic-options-table.js | 73 +++++++++++-------- 4 files changed, 53 insertions(+), 36 deletions(-) diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md index b4e6b99aa..cda2e0a59 100644 --- a/packages/react-bootstrap-table2-editor/README.md +++ b/packages/react-bootstrap-table2-editor/README.md @@ -140,7 +140,7 @@ const columns = [ text: 'Job Type', editor: { type: Type.SELECT, - getOptions: () => [.....] + getOptions: (setOptions, { row, column }) => [.....] } }]; @@ -152,7 +152,7 @@ const columns = [ text: 'Job Type', editor: { type: Type.SELECT, - getOptions: (setOptions) => { + getOptions: (setOptions, { row, column }) => { setTimeout(() => setOptions([...]), 1500); } } diff --git a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js index a54bc4d62..b019e2ea6 100644 --- a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js +++ b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js @@ -8,7 +8,13 @@ class DropDownEditor extends Component { super(props); let options = props.options; if (props.getOptions) { - options = props.getOptions(this.setOptions.bind(this)) || []; + options = props.getOptions( + this.setOptions.bind(this), + { + row: props.row, + column: props.column + } + ) || []; } this.state = { options }; } @@ -54,6 +60,8 @@ class DropDownEditor extends Component { } DropDownEditor.propTypes = { + row: PropTypes.object.isRequired, + column: PropTypes.object.isRequired, defaultValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js index 7c693b127..2a0d85b0d 100644 --- a/packages/react-bootstrap-table2-editor/src/editing-cell.js +++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js @@ -201,7 +201,7 @@ export default (_, onStartEdit) => if (_.isFunction(column.editorRenderer)) { editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex); } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) { - editor = ; + editor = ; } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) { editor = ; } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) { diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js index 715346ba4..02c822b0d 100644 --- a/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js @@ -1,3 +1,4 @@ +/* eslint no-console: 0 */ /* eslint react/prefer-stateless-function: 0 */ import React from 'react'; @@ -25,22 +26,26 @@ const columns = [{ text: 'Job Type1', editor: { type: Type.SELECT, - getOptions: () => [{ - value: 'A', - label: 'A' - }, { - value: 'B', - label: 'B' - }, { - value: 'C', - label: 'C' - }, { - value: 'D', - label: 'D' - }, { - value: 'E', - label: 'E' - }] + getOptions: (setOptions, { row, column }) => { + console.log(`current editing row id: ${row.id}`); + console.log(`current editing column: ${column.dataField}`); + return [{ + value: 'A', + label: 'A' + }, { + value: 'B', + label: 'B' + }, { + value: 'C', + label: 'C' + }, { + value: 'D', + label: 'D' + }, { + value: 'E', + label: 'E' + }]; + } } }, { dataField: 'type2', @@ -88,22 +93,26 @@ const columns = [{ text: 'Job Type1', editor: { type: Type.SELECT, - getOptions: () => [{ - value: 'A', - label: 'A' - }, { - value: 'B', - label: 'B' - }, { - value: 'C', - label: 'C' - }, { - value: 'D', - label: 'D' - }, { - value: 'E', - label: 'E' - }] + getOptions: (setOptions, { row, column }) => { + console.log(\`current editing row id: $\{row.id}\`); + console.log(\`current editing column: $\{column.dataField}\`); + return [{ + value: 'A', + label: 'A' + }, { + value: 'B', + label: 'B' + }, { + value: 'C', + label: 'C' + }, { + value: 'D', + label: 'D' + }, { + value: 'E', + label: 'E' + }]; + } } }, { dataField: 'type2', From a534d525c9cc52d1873c4fd16d71ba236fe9d255 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 27 Jul 2019 17:11:59 +0800 Subject: [PATCH 3/9] fix wrong example code --- .../examples/column-filter/custom-filter-logic.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js index 25b37bb2c..a861f5af1 100644 --- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js +++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js @@ -12,11 +12,11 @@ import BootstrapTable from 'react-bootstrap-table-next'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; class Table extends React.Component { - filterByPrice = (filterVal) => { + filterByPrice = (filterVal, data) => { if (filterVal) { - return products.filter(product => product.price == filterVal); + return data.filter(product => product.price == filterVal); } - return products; + return data; } render() { From 0c2863d63c38f1e527e320ab2187c467372947b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20Gauvin?= Date: Sat, 3 Aug 2019 09:49:09 +0200 Subject: [PATCH 4/9] Update multiselect.js (#1025) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit applyFilter should take the entire selection and not just the first element of the sélection --- .../react-bootstrap-table2-filter/src/components/multiselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js index 66ad4a017..ae8714e2a 100644 --- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js +++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js @@ -65,7 +65,7 @@ class MultiSelectFilter extends Component { needFilter = true; } if (needFilter) { - this.applyFilter(this.selectInput.value); + this.applyFilter(getSelections(this.selectInput)); } } From c53d2612d40295d0f4398634d89849da97c563b0 Mon Sep 17 00:00:00 2001 From: Peperoncino <2wua4nlyi@gmail.com> Date: Sat, 3 Aug 2019 16:49:54 +0900 Subject: [PATCH 5/9] Fromatted Value => Formatted Value (#1038) --- packages/react-bootstrap-table2-example/stories/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 848458fd2..93ca8c481 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -443,7 +443,7 @@ storiesOf('Table Search', module) .add('Default Search Table', () => ) .add('Default Custom Search', () => ) .add('Fully Custom Search', () => ) - .add('Search Fromatted Value', () => ) + .add('Search Formatted Value', () => ) .add('Custom Search Value', () => ); storiesOf('Column Toggle', module) From 4de565b75974eeaed581c692852bdefeb202ea0e Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 10 Aug 2019 13:45:02 +0800 Subject: [PATCH 6/9] fix #1030 --- .../column-toggle-with-filter.js | 94 +++++++++++++++++++ .../stories/index.js | 4 +- .../src/components/date.js | 30 ++++-- .../src/components/multiselect.js | 13 ++- .../src/components/number.js | 31 +++++- .../src/components/select.js | 15 ++- .../src/components/text.js | 11 ++- .../src/context.js | 3 +- .../src/bootstrap-table.js | 1 + .../react-bootstrap-table2/src/header-cell.js | 11 ++- packages/react-bootstrap-table2/src/header.js | 3 + 11 files changed, 197 insertions(+), 19 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js diff --git a/packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js b/packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js new file mode 100644 index 000000000..e67541d8a --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js @@ -0,0 +1,94 @@ +/* eslint react/prop-types: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; +import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const { ToggleList } = ColumnToggle; +const products = productsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + sort: true, + filter: textFilter() +}, { + dataField: 'price', + text: 'Product Price', + sort: true, + filter: textFilter() +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; +import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit'; + +const { ToggleList } = ColumnToggle; +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + sort: true, + filter: textFilter() +}, { + dataField: 'price', + text: 'Product Price', + sort: true, + filter: textFilter() +}]; + + + { + props => ( +
+ +
+ +
+ ) + } + +`; + +export default () => ( +
+

Table will keep the filter/sort state when column toggle

+ + { + props => ( +
+ +
+ +
+ ) + } + + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 93ca8c481..6acd9b910 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -210,6 +210,7 @@ import BasicColumnToggle from 'examples/column-toggle'; import DefaultVisibility from 'examples/column-toggle/default-visibility'; import StylingColumnToggle from 'examples/column-toggle/styling-toggle-list'; import CustomToggleList from 'examples/column-toggle/custom-toggle-list'; +import ColumnToggleWithFilter from 'examples/column-toggle/column-toggle-with-filter'; // loading overlay import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay'; @@ -451,7 +452,8 @@ storiesOf('Column Toggle', module) .add('Basic Column Toggle', () => ) .add('Default Visibility', () => ) .add('Styling Column Toggle', () => ) - .add('Custom Column Toggle', () => ); + .add('Custom Column Toggle', () => ) + .add('Column Toggle with Filter', () => ); storiesOf('Export CSV', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js index 578f55829..3d8ff4536 100644 --- a/packages/react-bootstrap-table2-filter/src/components/date.js +++ b/packages/react-bootstrap-table2-filter/src/components/date.js @@ -83,14 +83,27 @@ class DateFilter extends Component { return optionTags; } + getDefaultComparator() { + const { defaultValue, filterState } = this.props; + if (filterState && filterState.filterVal) { + return filterState.filterVal.comparator; + } + if (defaultValue && defaultValue.comparator) { + return defaultValue.comparator; + } + return ''; + } + getDefaultDate() { - let defaultDate = ''; - const { defaultValue } = this.props; + // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD" + const { defaultValue, filterState } = this.props; + if (filterState && filterState.filterVal && filterState.filterVal.date) { + return dateParser(filterState.filterVal.date); + } if (defaultValue && defaultValue.date) { - // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD" - defaultDate = dateParser(new Date(defaultValue.date)); + return dateParser(new Date(defaultValue.date)); } - return defaultDate; + return ''; } applyFilter(value, comparator, isInitial) { @@ -122,8 +135,7 @@ class DateFilter extends Component { dateStyle, className, comparatorClassName, - dateClassName, - defaultValue + dateClassName } = this.props; return ( @@ -143,7 +155,7 @@ class DateFilter extends Component { style={ comparatorStyle } className={ `date-filter-comparator form-control ${comparatorClassName}` } onChange={ this.onChangeComparator } - defaultValue={ defaultValue ? defaultValue.comparator : '' } + defaultValue={ this.getDefaultComparator() } > { this.getComparatorOptions() } @@ -169,6 +181,7 @@ class DateFilter extends Component { DateFilter.propTypes = { onFilter: PropTypes.func.isRequired, column: PropTypes.object.isRequired, + filterState: PropTypes.object, delay: PropTypes.number, defaultValue: PropTypes.shape({ date: PropTypes.oneOfType([PropTypes.object]), @@ -210,6 +223,7 @@ DateFilter.defaultProps = { date: undefined, comparator: '' }, + filterState: {}, withoutEmptyComparatorOption: false, comparators: legalComparators, placeholder: undefined, diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js index ae8714e2a..1d8794ccc 100644 --- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js +++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js @@ -69,6 +69,14 @@ class MultiSelectFilter extends Component { } } + getDefaultValue() { + const { filterState, defaultValue } = this.props; + if (filterState && typeof filterState.filterVal !== 'undefined') { + return filterState.filterVal; + } + return defaultValue; + } + getOptions() { const optionTags = []; const { options, placeholder, column, withoutEmptyOption } = this.props; @@ -106,6 +114,7 @@ class MultiSelectFilter extends Component { const { style, className, + filterState, defaultValue, onFilter, column, @@ -135,7 +144,7 @@ class MultiSelectFilter extends Component { className={ selectClass } onChange={ this.filter } onClick={ e => e.stopPropagation() } - defaultValue={ defaultValue !== undefined ? defaultValue : '' } + defaultValue={ this.getDefaultValue() } > { this.getOptions() } @@ -148,6 +157,7 @@ MultiSelectFilter.propTypes = { onFilter: PropTypes.func.isRequired, column: PropTypes.object.isRequired, options: PropTypes.object.isRequired, + filterState: PropTypes.object, comparator: PropTypes.oneOf([LIKE, EQ]), placeholder: PropTypes.string, style: PropTypes.object, @@ -160,6 +170,7 @@ MultiSelectFilter.propTypes = { MultiSelectFilter.defaultProps = { defaultValue: [], + filterState: {}, className: '', withoutEmptyOption: false, comparator: EQ, diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js index 29e0370e5..7abea580e 100644 --- a/packages/react-bootstrap-table2-filter/src/components/number.js +++ b/packages/react-bootstrap-table2-filter/src/components/number.js @@ -94,6 +94,28 @@ class NumberFilter extends Component { onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator }); } + getDefaultComparator() { + const { defaultValue, filterState } = this.props; + if (filterState && filterState.filterVal) { + return filterState.filterVal.comparator; + } + if (defaultValue && defaultValue.comparator) { + return defaultValue.comparator; + } + return ''; + } + + getDefaultValue() { + const { defaultValue, filterState } = this.props; + if (filterState && filterState.filterVal) { + return filterState.filterVal.number; + } + if (defaultValue && defaultValue.number) { + return defaultValue.number; + } + return ''; + } + getComparatorOptions() { const optionTags = []; const { withoutEmptyComparatorOption } = this.props; @@ -148,7 +170,6 @@ class NumberFilter extends Component { render() { const { isSelected } = this.state; const { - defaultValue, column, options, style, @@ -184,7 +205,7 @@ class NumberFilter extends Component { id={ `number-filter-comparator-${column.text}` } className={ `number-filter-comparator form-control ${comparatorClassName}` } onChange={ this.onChangeComparator } - defaultValue={ defaultValue ? defaultValue.comparator : '' } + defaultValue={ this.getDefaultComparator() } > { this.getComparatorOptions() } @@ -202,7 +223,7 @@ class NumberFilter extends Component { style={ numberStyle } className={ selectClass } onChange={ this.onChangeNumberSet } - defaultValue={ defaultValue ? defaultValue.number : '' } + defaultValue={ this.getDefaultValue() } > { this.getNumberOptions() } @@ -217,7 +238,7 @@ class NumberFilter extends Component { className={ `number-filter-input form-control ${numberClassName}` } placeholder={ placeholder || `Enter ${column.text}...` } onChange={ this.onChangeNumber } - defaultValue={ defaultValue ? defaultValue.number : '' } + defaultValue={ this.getDefaultValue() } /> } @@ -229,6 +250,7 @@ class NumberFilter extends Component { NumberFilter.propTypes = { onFilter: PropTypes.func.isRequired, column: PropTypes.object.isRequired, + filterState: PropTypes.object, options: PropTypes.arrayOf(PropTypes.number), defaultValue: PropTypes.shape({ number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -273,6 +295,7 @@ NumberFilter.defaultProps = { number: undefined, comparator: '' }, + filterState: {}, withoutEmptyComparatorOption: false, withoutEmptyNumberOption: false, comparators: legalComparators, diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js index db5348a2c..7b83827cc 100644 --- a/packages/react-bootstrap-table2-filter/src/components/select.js +++ b/packages/react-bootstrap-table2-filter/src/components/select.js @@ -44,7 +44,7 @@ class SelectFilter extends Component { constructor(props) { super(props); this.filter = this.filter.bind(this); - const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined; + const isSelected = getOptionValue(props.options, this.getDefaultValue()) !== undefined; this.state = { isSelected }; } @@ -82,6 +82,14 @@ class SelectFilter extends Component { } } + getDefaultValue() { + const { filterState, defaultValue } = this.props; + if (filterState && typeof filterState.filterVal !== 'undefined') { + return filterState.filterVal; + } + return defaultValue; + } + getOptions() { const optionTags = []; const { options, placeholder, column, withoutEmptyOption } = this.props; @@ -132,6 +140,7 @@ class SelectFilter extends Component { withoutEmptyOption, caseSensitive, getFilter, + filterState, ...rest } = this.props; @@ -152,7 +161,7 @@ class SelectFilter extends Component { className={ selectClass } onChange={ this.filter } onClick={ e => e.stopPropagation() } - defaultValue={ defaultValue !== undefined ? defaultValue : '' } + defaultValue={ this.getDefaultValue() || '' } > { this.getOptions() } @@ -164,6 +173,7 @@ class SelectFilter extends Component { SelectFilter.propTypes = { onFilter: PropTypes.func.isRequired, column: PropTypes.object.isRequired, + filterState: PropTypes.object, options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired, comparator: PropTypes.oneOf([LIKE, EQ]), placeholder: PropTypes.string, @@ -177,6 +187,7 @@ SelectFilter.propTypes = { SelectFilter.defaultProps = { defaultValue: '', + filterState: {}, className: '', withoutEmptyOption: false, comparator: EQ, diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js index 1995ebe2d..a359a9506 100644 --- a/packages/react-bootstrap-table2-filter/src/components/text.js +++ b/packages/react-bootstrap-table2-filter/src/components/text.js @@ -13,8 +13,14 @@ class TextFilter extends Component { this.filter = this.filter.bind(this); this.handleClick = this.handleClick.bind(this); this.timeout = null; + function getDefaultValue() { + if (props.filterState && typeof props.filterState.filterVal !== 'undefined') { + return props.filterState.filterVal; + } + return props.defaultValue; + } this.state = { - value: props.defaultValue + value: getDefaultValue() }; } @@ -89,6 +95,7 @@ class TextFilter extends Component { caseSensitive, defaultValue, getFilter, + filterState, ...rest } = this.props; @@ -119,6 +126,7 @@ class TextFilter extends Component { TextFilter.propTypes = { onFilter: PropTypes.func.isRequired, column: PropTypes.object.isRequired, + filterState: PropTypes.object, comparator: PropTypes.oneOf([LIKE, EQ]), defaultValue: PropTypes.string, delay: PropTypes.number, @@ -131,6 +139,7 @@ TextFilter.propTypes = { TextFilter.defaultProps = { delay: FILTER_DELAY, + filterState: {}, defaultValue: '', caseSensitive: false }; diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index 058d7ff23..013be6e6d 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -108,7 +108,8 @@ export default ( { this.props.children } diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index b2ac582c8..42d419e48 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -91,6 +91,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { sortOrder={ this.props.sortOrder } onSort={ this.props.onSort } onFilter={ this.props.onFilter } + currFilters={ this.props.currFilters } onExternalFilter={ this.props.onExternalFilter } selectRow={ selectRow } expandRow={ expandRow } diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index 332150712..18f69c0be 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -18,6 +18,7 @@ const HeaderCell = (props) => { sortOrder, isLastSorting, onFilter, + currFilters, onExternalFilter } = props; @@ -99,7 +100,14 @@ const HeaderCell = (props) => { const onCustomFilter = onExternalFilter(column, filter.props.type); filterElm = filterRenderer(onCustomFilter, column); } else if (filter) { - filterElm = ; + filterElm = ( + + ); } const children = headerFormatter ? @@ -162,6 +170,7 @@ HeaderCell.propTypes = { sortCaret: PropTypes.func, isLastSorting: PropTypes.bool, onFilter: PropTypes.func, + currFilters: PropTypes.object, onExternalFilter: PropTypes.func }; diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index 77ee127ab..4360b2c7b 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/packages/react-bootstrap-table2/src/header.js @@ -18,6 +18,7 @@ const Header = (props) => { sortField, sortOrder, selectRow, + currFilters, onExternalFilter, expandRow } = props; @@ -50,6 +51,7 @@ const Header = (props) => { onSort={ onSort } sorting={ currSort } onFilter={ onFilter } + currFilters={ currFilters } onExternalFilter={ onExternalFilter } sortOrder={ sortOrder } isLastSorting={ isLastSorting } @@ -89,6 +91,7 @@ Header.propTypes = { sortField: PropTypes.string, sortOrder: PropTypes.string, selectRow: PropTypes.object, + currFilters: PropTypes.object, onExternalFilter: PropTypes.func, className: PropTypes.string, expandRow: PropTypes.object From 9b6d9904e7bb6bbb97a5f5c1274101c3206159d0 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 10 Aug 2019 14:37:40 +0800 Subject: [PATCH 7/9] fix test cases for #1030 --- .../test/components/select.test.js | 2 +- .../react-bootstrap-table2-filter/test/context.test.js | 7 ++++--- packages/react-bootstrap-table2/test/header-cell.test.js | 4 +++- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/react-bootstrap-table2-filter/test/components/select.test.js b/packages/react-bootstrap-table2-filter/test/components/select.test.js index 80d30d7a3..baec4d910 100644 --- a/packages/react-bootstrap-table2-filter/test/components/select.test.js +++ b/packages/react-bootstrap-table2-filter/test/components/select.test.js @@ -25,7 +25,7 @@ describe('Select Filter', () => { 2: 'Unknown' }; - afterEach(() => { + beforeEach(() => { onFilter.reset(); onFilterFirstReturn.reset(); diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js index face019d7..7b15a28d2 100644 --- a/packages/react-bootstrap-table2-filter/test/context.test.js +++ b/packages/react-bootstrap-table2-filter/test/context.test.js @@ -94,7 +94,8 @@ describe('FilterContext', () => { expect(mockBase).toHaveBeenCalledWith({ data, onFilter: wrapper.instance().onFilter, - onExternalFilter: wrapper.instance().onExternalFilter + onExternalFilter: wrapper.instance().onExternalFilter, + currFilters: wrapper.instance().currFilters }); }); }); @@ -103,7 +104,6 @@ describe('FilterContext', () => { beforeEach(() => { wrapper = shallow(shallowContext(true)); wrapper.render(); - wrapper.instance().currFilters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } }; }); it('should pass original data without internal filtering', () => { @@ -111,7 +111,8 @@ describe('FilterContext', () => { expect(mockBase).toHaveBeenCalledWith({ data, onFilter: wrapper.instance().onFilter, - onExternalFilter: wrapper.instance().onExternalFilter + onExternalFilter: wrapper.instance().onExternalFilter, + currFilters: wrapper.instance().currFilters }); }); }); diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js index b0c45254d..fa3861de7 100644 --- a/packages/react-bootstrap-table2/test/header-cell.test.js +++ b/packages/react-bootstrap-table2/test/header-cell.test.js @@ -728,7 +728,9 @@ describe('HeaderCell', () => { Filter } }; - wrapper = shallow(); + wrapper = shallow( + + ); }); it('should render successfully', () => { From 08ec8a9f65c2a7dbb00fc54b62359472b864e00c Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 10 Aug 2019 14:51:26 +0800 Subject: [PATCH 8/9] fix #1044 --- packages/react-bootstrap-table2/src/store/type.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2/src/store/type.js b/packages/react-bootstrap-table2/src/store/type.js index b5084e666..5b9849838 100644 --- a/packages/react-bootstrap-table2/src/store/type.js +++ b/packages/react-bootstrap-table2/src/store/type.js @@ -1,7 +1,7 @@ import Const from '../const'; export const typeConvert = (type, value) => { - if (!type || type === Const.TYPE_STRING) { + if (type === Const.TYPE_STRING) { return String(value); } else if (type === Const.TYPE_NUMBER) { return Number(value); From 1a44ce0ea61d90d140910b5464ae4bb9140c479c Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 10 Aug 2019 15:05:53 +0800 Subject: [PATCH 9/9] fix #1051 --- .../style/react-bootstrap-table2-paginator.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss b/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss index a99007e6b..e2fb0a7a8 100644 --- a/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss +++ b/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss @@ -1,6 +1,6 @@ .react-bootstrap-table-page-btns-ul { float: right; - margin-top: 0px; + margin-top: 0px !important; } .react-bootstrap-table-pagination-list-hidden {