-
+
{textLabels.title}
- {props.filterPopoverOptions.mustConfirm &&
+
+ {props.filterPopoverOptions.mustConfirm &&
+ <>
+
+
+ >
+ }
- }
-
+
@@ -349,8 +408,8 @@ TableFilter.propTypes = {
filterList: PropTypes.array.isRequired,
/** Options for the filter popover */
filterPopoverOptions: PropTypes.object.isRequired,
- /** Callback to trigger filter reset */
- onFilterRest: PropTypes.func,
+ /** Callback to trigger filter clear */
+ onFilterClear: PropTypes.func,
/** Callback to trigger filter update */
onFilterUpdate: PropTypes.func,
/** Options used to describe table */
diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
index bb55a8a..086e827 100644
--- a/src/components/TableToolbar.js
+++ b/src/components/TableToolbar.js
@@ -192,7 +192,7 @@ class TableToolbar extends React.Component {
filterPopoverOptions,
filterUpdate,
options,
- resetFilters,
+ clearFilters,
tableRef,
title,
toggleViewColumn,
@@ -323,7 +323,7 @@ class TableToolbar extends React.Component {
filterPopoverOptions={filterPopoverOptions}
handleClose={closeFilterPopover}
onFilterUpdate={filterUpdate}
- onFilterReset={resetFilters}
+ onFilterClear={clearFilters}
updateFilterByType={updateFilterByType}
/>
}
diff --git a/src/textLabels.js b/src/textLabels.js
index c92ebb4..0fb31c7 100644
--- a/src/textLabels.js
+++ b/src/textLabels.js
@@ -25,6 +25,7 @@ const textLabels = {
all: 'All',
title: 'FILTERS',
reset: 'RESET',
+ clear: 'CLEAR',
},
viewColumns: {
title: 'Show Columns',
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 08fbb2d..73ae0aa 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -655,7 +655,7 @@ describe('
', function() {
assert.deepEqual(state.filterList, [[], [], [], [], []]);
});
- it('should properly reset internal filterList when calling resetFilters method', () => {
+ it('should properly reset internal filterList when calling clearFilters method', () => {
// set a filter
const shallowWrapper = shallow(
);
const table = shallowWrapper.dive();
@@ -667,7 +667,7 @@ describe('
', function() {
let state = table.state();
assert.deepEqual(state.filterList, [['Joe James'], [], [], [], []]);
- instance.resetFilters();
+ instance.clearFilters();
table.update();
state = table.state();
assert.deepEqual(state.filterList, [[], [], [], [], []]);
@@ -704,7 +704,7 @@ describe('
', function() {
assert.strictEqual(changedColumn, 'Company');
// test reset filters
- instance.resetFilters();
+ instance.clearFilters();
table.update();
assert.strictEqual(changedColumn, null);
});
diff --git a/test/MUIDataTableFilter.test.js b/test/MUIDataTableFilter.test.js
index 7c2fcb2..574e4d0 100644
--- a/test/MUIDataTableFilter.test.js
+++ b/test/MUIDataTableFilter.test.js
@@ -41,7 +41,13 @@ describe('
', function() {
const options = { filterType: 'checkbox', textLabels };
const filterList = [[], [], [], []];
const shallowWrapper = mount(
-
,
+
{}}
+ filterPopoverOptions={{}}/>,
);
const labels = shallowWrapper
.find(Typography)
@@ -54,7 +60,13 @@ describe('', function() {
const options = { filterType: 'checkbox', textLabels };
const filterList = [[], [], [], []];
const shallowWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = shallowWrapper.find(Checkbox);
@@ -67,7 +79,13 @@ describe('', function() {
columns = columns.map(item => (item.filter = false));
const mountWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = mountWrapper.find(Checkbox);
@@ -79,7 +97,13 @@ describe('', function() {
const filterList = [['Joe James'], [], [], []];
const mountWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = mountWrapper.find(Select);
@@ -92,7 +116,13 @@ describe('', function() {
columns = columns.map(item => (item.filter = false));
const mountWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = mountWrapper.find(Select);
@@ -104,7 +134,13 @@ describe('', function() {
const filterList = [['Joe James', 'John Walsh'], [], [], []];
const mountWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = mountWrapper.find(Select);
@@ -129,7 +165,13 @@ describe('', function() {
};
const filterList = [[], [], [], []];
const mountWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = mountWrapper.find('#custom-filter-render');
@@ -140,7 +182,13 @@ describe('', function() {
const options = { filterType: 'textField', textLabels };
const filterList = [[], [], [], []];
const shallowWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const labels = shallowWrapper
.find(TextField)
@@ -153,7 +201,13 @@ describe('', function() {
const options = { filterType: 'textField', textLabels };
const filterList = [[], [], [], []];
const shallowWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = shallowWrapper.find(TextField);
@@ -166,7 +220,13 @@ describe('', function() {
columns = columns.map(item => (item.filter = false));
const shallowWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = shallowWrapper.find(TextField);
@@ -179,126 +239,124 @@ describe('', function() {
columns.forEach(item => (item.filterType = 'checkbox'));
const shallowWrapper = mount(
- ,
+ {}}
+ filterPopoverOptions={{}} />,
);
const actualResult = shallowWrapper.find(Checkbox);
assert.strictEqual(actualResult.length, 13);
});
- it('should trigger onFilterUpdate prop callback when calling method handleCheckboxChange', () => {
+ it('should trigger onFilterUpdate prop callback when calling method checkbox onchange triggered', () => {
const options = { filterType: 'checkbox', textLabels };
const filterList = [[], [], [], []];
const onFilterUpdate = spy();
- const shallowWrapper = shallow(
+ const fullWrapper = mount(
,
- ).dive();
- const instance = shallowWrapper.instance();
+ updateFilterByType={() => {}}
+ filterPopoverOptions={{}} />,
+ );
- //const event = { target: { value: 0 }};
- instance.handleCheckboxChange(0, 0);
+ fullWrapper.find('input[type="checkbox"]').at(0).simulate('change');
assert.strictEqual(onFilterUpdate.callCount, 1);
});
- it('should trigger onFilterUpdate prop callback when calling method handleDropdownChange', () => {
+ it('should trigger onFilterUpdate prop callback when Select onChange event occurs for dropdown', () => {
const options = { filterType: 'select', textLabels };
const filterList = [[], [], [], []];
const onFilterUpdate = spy();
- const shallowWrapper = shallow(
+ const fullWrapper = mount(
,
- ).dive();
- const instance = shallowWrapper.instance();
+ updateFilterByType={() => {}}
+ filterPopoverOptions={{}} />,
+ );
- let event = { target: { value: 'All' } };
- instance.handleDropdownChange(event, 0);
+ let event = { target: { value: 'Joe James' } };
+ fullWrapper.find(Select).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 1);
- event = { target: { value: 'test' } };
- instance.handleDropdownChange(event, 0);
+ event = { target: { value: 'All' } };
+ fullWrapper.find(Select).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 2);
- shallowWrapper
- .find(Select)
- .first()
- .simulate('change', event);
+ event = { target: { value: 'Joe James' } };
+ fullWrapper.find(Select).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 3);
});
- it('should trigger onFilterUpdate prop callback when calling method handleMultiselectChange', () => {
+ it('should trigger onFilterUpdate prop callback when Select onChange event occurs for multi-select', () => {
const options = { filterType: 'multiselect', textLabels };
const filterList = [[], [], [], []];
const onFilterUpdate = spy();
- const shallowWrapper = shallow(
+ const fullWrapper = mount(
,
- ).dive();
- const instance = shallowWrapper.instance();
-
- let event = { target: { value: 'All' } };
+ updateFilterByType={() => {}}
+ filterPopoverOptions={{}} />,
+ );
- instance.handleMultiselectChange(event, 0);
+ let event = { target: { value: 'Joe James' } };
+ fullWrapper.find(Select).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 1);
- event = { target: { value: 'test' } };
- instance.handleMultiselectChange(event, 0);
+ event = { target: { value: 'All' } };
+ fullWrapper.find(Select).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 2);
- shallowWrapper
- .find(Select)
- .first()
- .simulate('change', event);
+ event = { target: { value: 'Joe James' } };
+ fullWrapper.find(Select).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 3);
});
- it('should trigger onFilterUpdate prop callback when calling method handleTextFieldChange', () => {
+ it('should trigger onFilterUpdate prop callback when calling onChange for text filter', () => {
const options = { filterType: 'textField', textLabels };
const filterList = [[], [], [], []];
const onFilterUpdate = spy();
- const shallowWrapper = shallow(
+ const fullWrapper = mount(
,
- ).dive();
- const instance = shallowWrapper.instance();
-
- let event = { target: { value: 'All' } };
+ updateFilterByType={() => {}}
+ filterPopoverOptions={{}} />,
+ );
- instance.handleTextFieldChange(event, 0);
+ let event = { target: { value: 'Joe James' } };
+ fullWrapper.find(TextField).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 1);
- event = { target: { value: 'test' } };
- instance.handleTextFieldChange(event, 0);
+ event = { target: { value: '' } };
+ fullWrapper.find(TextField).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 2);
- shallowWrapper
- .find(TextField)
- .first()
- .simulate('change', event);
+ event = { target: { value: 'La la la' } };
+ fullWrapper.find(TextField).at(0).props().onChange(event);
assert.strictEqual(onFilterUpdate.callCount, 3);
+
});
});