Skip to content

Commit 4373390

Browse files
fitzergeraldfitzergerald
authored
Merge pull request #3 from leecalcote/Enzyme-React-18-MUI-v7-compatibility
upgrade to mui 7 and react 18
2 parents e2eb4cf + 199d426 commit 4373390

15 files changed

+13182
-25992
lines changed

‎package-lock.json‎

Lines changed: 12878 additions & 25754 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"name": "mui-datatables",
3-
"version": "4.3.0",
2+
"name": "@sistent/mui-datatables",
3+
"version": "5.0.0",
44
"description": "Datatables for React using Material-UI",
55
"main": "dist/index.js",
66
"files": [
77
"dist"
88
],
99
"scripts": {
1010
"dev": "cross-env NODE_ENV=development webpack-dev-server -d --progress --colors",
11-
"test": "cross-env NODE_ENV=test mocha --require @babel/register test/**/*.test.js",
11+
"test": "cross-env NODE_ENV=test mocha --require ./test/babel-register.js --extensions js,jsx test/**/*.test.js",
1212
"docs:dev": "next docs",
1313
"docs:build": "cross-env NODE_ENV=production next build docs",
1414
"docs:export": "next export docs -o docs/export",
1515
"docs:deploy": "npm run docs:build && npm run docs:export && firebase deploy",
1616
"docs:start": "next start docs",
17-
"coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --require @babel/register test/*.js && nyc report --reporter=html | cat coverage/lcov.info | coveralls",
18-
"coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require @babel/register test/*.js && nyc report --reporter=html",
17+
"coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --require ./test/babel-register.js --extensions js,jsx test/*.js && nyc report --reporter=html | cat coverage/lcov.info | coveralls",
18+
"coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require ./test/babel-register.js --extensions js,jsx test/*.js && nyc report --reporter=html",
1919
"prettier": "find src/ docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write",
2020
"lint": "eslint src",
2121
"build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
@@ -55,7 +55,7 @@
5555
"@rollup/plugin-commonjs": "^12.0.0",
5656
"@rollup/plugin-node-resolve": "^8.0.0",
5757
"@rollup/plugin-replace": "^2.3.2",
58-
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
58+
"@cfaester/enzyme-adapter-react-18": "^0.8.0",
5959
"babel-eslint": "^10.1.0",
6060
"babel-loader": "^8.1.0",
6161
"babel-plugin-istanbul": "^6.0.0",
@@ -77,7 +77,7 @@
7777
"jsdom": "^16.2.2",
7878
"jsdom-global": "^3.0.2",
7979
"mocha": "^7.2.0",
80-
"next": "^11.1.2",
80+
"next": "^15.0.0",
8181
"nyc": "^15.0.1",
8282
"prettier": "^1.18.2",
8383
"prismjs": "^1.20.0",
@@ -124,6 +124,9 @@
124124
"react-sortable-tree-patch-react-17": "^2.9.0",
125125
"react-to-print": "^2.8.0"
126126
},
127+
"overrides": {
128+
"cheerio": "1.0.0-rc.12"
129+
},
127130
"side-effects": false,
128131
"nyc": {
129132
"lines": 50,
@@ -140,5 +143,10 @@
140143
],
141144
"sourceMap": false,
142145
"instrument": false
146+
},
147+
"directories": {
148+
"doc": "docs",
149+
"example": "examples",
150+
"test": "test"
143151
}
144152
}

‎src/MUIDataTable.js‎

Lines changed: 96 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import isUndefined from 'lodash.isundefined';
1111
import merge from 'lodash.merge';
1212
import PropTypes from 'prop-types';
1313
import React from 'react';
14+
import { flushSync } from 'react-dom';
1415
import DefaultTableBody from './components/TableBody';
1516
import DefaultTableFilter from './components/TableFilter';
1617
import DefaultTableFilterList from './components/TableFilterList';
@@ -1227,113 +1228,119 @@ class MUIDataTable extends React.Component {
12271228
}
12281229

12291230
toggleSortColumn = index => {
1230-
this.setState(
1231-
prevState => {
1232-
let columns = cloneDeep(prevState.columns);
1233-
let data = prevState.data;
1234-
let newOrder = columns[index].sortDescFirst ? 'desc' : 'asc'; // default
1235-
1236-
let sequenceOrder = ['asc', 'desc'];
1237-
if (columns[index].sortDescFirst) {
1238-
sequenceOrder = ['desc', 'asc'];
1239-
}
1240-
if (columns[index].sortThirdClickReset) {
1241-
sequenceOrder.push('none');
1242-
}
1231+
flushSync(() => {
1232+
this.setState(
1233+
prevState => {
1234+
let columns = cloneDeep(prevState.columns);
1235+
let data = prevState.data;
1236+
let newOrder = columns[index].sortDescFirst ? 'desc' : 'asc'; // default
12431237

1244-
if (columns[index].name === this.state.sortOrder.name) {
1245-
let pos = sequenceOrder.indexOf(this.state.sortOrder.direction);
1246-
if (pos !== -1) {
1247-
pos++;
1248-
if (pos >= sequenceOrder.length) pos = 0;
1249-
newOrder = sequenceOrder[pos];
1238+
let sequenceOrder = ['asc', 'desc'];
1239+
if (columns[index].sortDescFirst) {
1240+
sequenceOrder = ['desc', 'asc'];
1241+
}
1242+
if (columns[index].sortThirdClickReset) {
1243+
sequenceOrder.push('none');
12501244
}
1251-
}
12521245

1253-
const newSortOrder = {
1254-
name: columns[index].name,
1255-
direction: newOrder,
1256-
};
1246+
if (columns[index].name === this.state.sortOrder.name) {
1247+
let pos = sequenceOrder.indexOf(this.state.sortOrder.direction);
1248+
if (pos !== -1) {
1249+
pos++;
1250+
if (pos >= sequenceOrder.length) pos = 0;
1251+
newOrder = sequenceOrder[pos];
1252+
}
1253+
}
12571254

1258-
const orderLabel = this.getSortDirectionLabel(newSortOrder);
1259-
const announceText = `Table now sorted by ${columns[index].name} : ${orderLabel}`;
1255+
const newSortOrder = {
1256+
name: columns[index].name,
1257+
direction: newOrder,
1258+
};
12601259

1261-
let newState = {
1262-
columns: columns,
1263-
announceText: announceText,
1264-
activeColumn: index,
1265-
};
1260+
const orderLabel = this.getSortDirectionLabel(newSortOrder);
1261+
const announceText = `Table now sorted by ${columns[index].name} : ${orderLabel}`;
12661262

1267-
if (this.options.serverSide) {
1268-
newState = {
1269-
...newState,
1270-
data: prevState.data,
1271-
displayData: prevState.displayData,
1272-
selectedRows: prevState.selectedRows,
1273-
sortOrder: newSortOrder,
1263+
let newState = {
1264+
columns: columns,
1265+
announceText: announceText,
1266+
activeColumn: index,
12741267
};
1275-
} else {
1276-
const sortedData = this.sortTable(data, index, newOrder, columns[index].sortCompare);
1277-
1278-
newState = {
1279-
...newState,
1280-
data: sortedData.data,
1281-
displayData: this.getDisplayData(
1282-
columns,
1283-
sortedData.data,
1284-
prevState.filterList,
1285-
prevState.searchText,
1286-
null,
1287-
this.props,
1288-
),
1289-
selectedRows: sortedData.selectedRows,
1290-
sortOrder: newSortOrder,
1291-
previousSelectedRow: null,
1292-
};
1293-
}
12941268

1295-
return newState;
1296-
},
1297-
() => {
1298-
this.setTableAction('sort');
1269+
if (this.options.serverSide) {
1270+
newState = {
1271+
...newState,
1272+
data: prevState.data,
1273+
displayData: prevState.displayData,
1274+
selectedRows: prevState.selectedRows,
1275+
sortOrder: newSortOrder,
1276+
};
1277+
} else {
1278+
const sortedData = this.sortTable(data, index, newOrder, columns[index].sortCompare);
1279+
1280+
newState = {
1281+
...newState,
1282+
data: sortedData.data,
1283+
displayData: this.getDisplayData(
1284+
columns,
1285+
sortedData.data,
1286+
prevState.filterList,
1287+
prevState.searchText,
1288+
null,
1289+
this.props,
1290+
),
1291+
selectedRows: sortedData.selectedRows,
1292+
sortOrder: newSortOrder,
1293+
previousSelectedRow: null,
1294+
};
1295+
}
12991296

1300-
if (this.options.onColumnSortChange) {
1301-
this.options.onColumnSortChange(this.state.sortOrder.name, this.state.sortOrder.direction);
1302-
}
1303-
},
1304-
);
1297+
return newState;
1298+
},
1299+
() => {
1300+
this.setTableAction('sort');
1301+
1302+
if (this.options.onColumnSortChange) {
1303+
this.options.onColumnSortChange(this.state.sortOrder.name, this.state.sortOrder.direction);
1304+
}
1305+
},
1306+
);
1307+
});
13051308
};
13061309

13071310
changeRowsPerPage = rows => {
13081311
const rowCount = this.options.count || this.state.displayData.length;
13091312

1310-
this.setState(
1311-
() => ({
1312-
rowsPerPage: rows,
1313-
page: getPageValue(rowCount, rows, this.state.page),
1314-
}),
1315-
() => {
1316-
this.setTableAction('changeRowsPerPage');
1313+
flushSync(() => {
1314+
this.setState(
1315+
() => ({
1316+
rowsPerPage: rows,
1317+
page: getPageValue(rowCount, rows, this.state.page),
1318+
}),
1319+
() => {
1320+
this.setTableAction('changeRowsPerPage');
13171321

1318-
if (this.options.onChangeRowsPerPage) {
1319-
this.options.onChangeRowsPerPage(this.state.rowsPerPage);
1320-
}
1321-
},
1322-
);
1322+
if (this.options.onChangeRowsPerPage) {
1323+
this.options.onChangeRowsPerPage(this.state.rowsPerPage);
1324+
}
1325+
},
1326+
);
1327+
});
13231328
};
13241329

13251330
changePage = page => {
1326-
this.setState(
1327-
() => ({
1328-
page: page,
1329-
}),
1330-
() => {
1331-
this.setTableAction('changePage');
1332-
if (this.options.onChangePage) {
1333-
this.options.onChangePage(this.state.page);
1334-
}
1335-
},
1336-
);
1331+
flushSync(() => {
1332+
this.setState(
1333+
() => ({
1334+
page: page,
1335+
}),
1336+
() => {
1337+
this.setTableAction('changePage');
1338+
if (this.options.onChangePage) {
1339+
this.options.onChangePage(this.state.page);
1340+
}
1341+
},
1342+
);
1343+
});
13371344
};
13381345

13391346
searchClose = () => {

‎src/hooks/useColumnDrop.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ const handleHover = opts => {
169169
const useColumnDrop = opts => {
170170
const [{ isOver, canDrop }, drop] = useDrop({
171171
accept: 'HEADER',
172-
drop: drop,
172+
drop: opts.drop,
173173
hover: (item, mon) => handleHover(Object.assign({}, opts, { item, mon })),
174174
collect: mon => ({
175175
isOver: !!mon.isOver(),

‎src/utils.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,14 @@ function downloadCSV(csv, filename) {
115115
const dataURI = `data:text/csv;charset=utf-8,${csv}`;
116116

117117
const URL = window.URL || window.webkitURL;
118-
const downloadURI = typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
118+
let downloadURI = dataURI;
119+
if (URL && typeof URL.createObjectURL === 'function') {
120+
try {
121+
downloadURI = URL.createObjectURL(blob);
122+
} catch (err) {
123+
downloadURI = dataURI;
124+
}
125+
}
119126

120127
let link = document.createElement('a');
121128
link.setAttribute('href', downloadURI);

0 commit comments

Comments
 (0)