diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index db6a77595..cbc424a6b 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -91,10 +91,13 @@ class MUIDataTable extends React.Component { download: PropTypes.bool, viewColumns: PropTypes.bool, filterList: PropTypes.array, - filterOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({ - names: PropTypes.array, - logic: PropTypes.func, - })]), + filterOptions: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.shape({ + names: PropTypes.array, + logic: PropTypes.func, + }), + ]), filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField']), customHeadRender: PropTypes.func, customBodyRender: PropTypes.func, @@ -186,8 +189,8 @@ class MUIDataTable extends React.Component { this.tableRef = false; this.tableContent = React.createRef(); this.headCellRefs = {}; - this.setHeadResizeable = () => { }; - this.updateDividers = () => { }; + this.setHeadResizeable = () => {}; + this.updateDividers = () => {}; } componentWillMount() { @@ -385,17 +388,17 @@ class MUIDataTable extends React.Component { transformData = (columns, data) => { return Array.isArray(data[0]) ? data.map(row => { - let i = -1; + let i = -1; - return columns.map(col => { - if (!col.empty) i++; - return col.empty ? undefined : row[i]; - }); - }) + return columns.map(col => { + if (!col.empty) i++; + return col.empty ? undefined : row[i]; + }); + }) : data.map(row => columns.map(col => row[col.name])); }; - setTableData(props, status, callback = () => { }) { + setTableData(props, status, callback = () => {}) { const { options } = props; let tableData = []; @@ -445,8 +448,7 @@ class MUIDataTable extends React.Component { console.error( 'Deprecated: filterOptions must now be an object. see https://github.com/gregnb/mui-datatables/tree/master/examples/customize-filter example', ); - } - else if (Array.isArray(column.filterOptions.names)) { + } else if (Array.isArray(column.filterOptions.names)) { filterData[colIndex] = cloneDeep(column.filterOptions.names); } } @@ -541,8 +543,8 @@ class MUIDataTable extends React.Component { typeof funcResult === 'string' || !funcResult ? funcResult : funcResult.props && funcResult.props.value - ? funcResult.props.value - : columnValue; + ? funcResult.props.value + : columnValue; } displayRow.push(columnDisplay); diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js index 587e74c07..0708d3853 100644 --- a/src/components/TableHeadCell.js +++ b/src/components/TableHeadCell.js @@ -64,7 +64,7 @@ class TableHeadCell extends React.Component { state = { isSortTooltipOpen: false, - isHintTooltipOpen: false + isHintTooltipOpen: false, }; handleSortClick = () => { @@ -100,9 +100,12 @@ class TableHeadCell extends React.Component { enterDelay={300} classes={{ popper: classes.mypopper }} open={isSortTooltipOpen} - onOpen={() => isHintTooltipOpen ? this.setState({ isSortTooltipOpen: false }) : this.setState({ isSortTooltipOpen: true })} - onClose={() => this.setState({ isSortTooltipOpen: false })} - > + onOpen={() => + isHintTooltipOpen + ? this.setState({ isSortTooltipOpen: false }) + : this.setState({ isSortTooltipOpen: true }) + } + onClose={() => this.setState({ isSortTooltipOpen: false })}> this.setState({ isSortTooltipOpen: false, isHintTooltipOpen: true })} - onClose={() => this.setState({ isHintTooltipOpen: false })} - > + onClose={() => this.setState({ isHintTooltipOpen: false })}> )} @@ -140,19 +142,19 @@ class TableHeadCell extends React.Component { ) : ( children )} - {!options.sort || !sort && hint && ( - - - - )} + {!options.sort || + (!sort && hint && ( + + + + ))} ); } diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js index e963760a9..f73661e5a 100644 --- a/test/MUIDataTable.test.js +++ b/test/MUIDataTable.test.js @@ -11,7 +11,7 @@ import Chip from '@material-ui/core/Chip'; import Cities from '../examples/component/cities'; import { getCollatorComparator } from '../src/utils'; -describe('', function () { +describe('', function() { let data; let displayData; let columns; @@ -776,7 +776,7 @@ describe('', function () { it('should remove selected data on selectRowDelete when type=cell', () => { const shallowWrapper = shallow().dive(); const instance = shallowWrapper.instance(); - const onRowsDelete = () => { }; + const onRowsDelete = () => {}; const selectedRows = { data: [1] }; instance.selectRowUpdate('cell', { index: 0, dataIndex: 0 }); @@ -936,86 +936,88 @@ describe('', function () { }); describe('should displayData consider filterOptions with logic', () => { - it('with one column', () => { - const customFilterColumns = columns.map(c => { - if (c.name === "Name") return { - ...c, - options: { - ...c.options, - filterOptions: { - names: ["B", "J"], - logic(name, filters) { - const firstLetter = name[0]; - return firstLetter !== filters[0]; - } + if (c.name === 'Name') + return { + ...c, + options: { + ...c.options, + filterOptions: { + names: ['B', 'J'], + logic(name, filters) { + const firstLetter = name[0]; + return firstLetter !== filters[0]; + }, + }, }, - } - }; + }; return c; }); - + const shallowWrapper = shallow(); const table = shallowWrapper.dive(); const instance = table.instance(); instance.filterUpdate(0, 'J', 'checkbox'); table.update(); - + const state = table.state(); assert.deepEqual(state.filterList, [['J'], [], [], [], []]); - + const expectedResult = JSON.stringify([ { data: ['James, Joe', 'Test Corp', renderCities('Yonkers', { rowIndex: 0 }), 'NY', undefined], dataIndex: 0 }, ]); assert.deepEqual(JSON.stringify(state.displayData), expectedResult); - }); - + it('operating as AND', () => { - const customFilterColumns = columns.map(c => { - if (c.name === "Name") return { - ...c, - options: { - ...c.options, - filterOptions: { - names: ["B", "J", 'H'], - logic(name, filters) { - const firstLetter = name[0]; - return firstLetter !== filters[0]; - } + if (c.name === 'Name') + return { + ...c, + options: { + ...c.options, + filterOptions: { + names: ['B', 'J', 'H'], + logic(name, filters) { + const firstLetter = name[0]; + return firstLetter !== filters[0]; + }, + }, }, - } - }; - if (c.name === "State") return { - ...c, - options: { - ...c.options, - filterOptions: { - names: ["NY", "FL", "TX"], + }; + if (c.name === 'State') + return { + ...c, + options: { + ...c.options, + filterOptions: { + names: ['NY', 'FL', 'TX'], + }, }, - } - }; + }; return c; }); - + const shallowWrapper = shallow(); const table = shallowWrapper.dive(); const instance = table.instance(); instance.filterUpdate(0, 'H', 'checkbox'); instance.filterUpdate(3, 'TX', 'checkbox'); table.update(); - + const state = table.state(); - assert.deepEqual(state.filterList, [['H'], [], [], ["TX"], []]); - + assert.deepEqual(state.filterList, [['H'], [], [], ['TX'], []]); + const expectedResult = JSON.stringify([ - { data: ['Houston, James', 'Test Corp', renderCities('Dallas', { rowIndex: 3 }), 'TX', undefined], dataIndex: 3 }, + { + data: ['Houston, James', 'Test Corp', renderCities('Dallas', { rowIndex: 3 }), 'TX', undefined], + dataIndex: 3, + }, ]); assert.deepEqual(JSON.stringify(state.displayData), expectedResult); - }); - }) + }); + }); describe('should correctly handle array data', () => { const columns = [ diff --git a/test/MUIDataTableBody.test.js b/test/MUIDataTableBody.test.js index 976cecb65..2fb80acba 100644 --- a/test/MUIDataTableBody.test.js +++ b/test/MUIDataTableBody.test.js @@ -205,7 +205,7 @@ describe('', function() { it('should gather selected row data when clicking row with selectableRowsOnClick=true.', () => { let selectedRowData; const options = { selectableRows: true, selectableRowsOnClick: true }; - const selectRowUpdate = (type, data) => selectedRowData = data; + const selectRowUpdate = (type, data) => (selectedRowData = data); const toggleExpandRow = spy(); const mountWrapper = mount( @@ -239,7 +239,7 @@ describe('', function() { let expandedRowData; const options = { selectableRows: true, expandableRows: true, expandableRowsOnClick: true }; const selectRowUpdate = spy(); - const toggleExpandRow = data => expandedRowData = data; + const toggleExpandRow = data => (expandedRowData = data); const mountWrapper = mount( ', function() { it('should gather both selected and expanded row data when clicking row with expandableRows=true, selectableRowsOnClick=true, and expandableRowsOnClick=true.', () => { let expandedRowData; let selectedRowData; - const options = { selectableRows: true, selectableRowsOnClick: true, expandableRows: true, expandableRowsOnClick: true }; - const selectRowUpdate = (type, data) => selectedRowData = data; - const toggleExpandRow = data => expandedRowData = data; + const options = { + selectableRows: true, + selectableRowsOnClick: true, + expandableRows: true, + expandableRowsOnClick: true, + }; + const selectRowUpdate = (type, data) => (selectedRowData = data); + const toggleExpandRow = data => (expandedRowData = data); const mountWrapper = mount(