diff --git a/.eslintrc b/.eslintrc index 53e648e4..b15ac745 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,7 +1,12 @@ { "extends": ["standard", "eslint:recommended", "plugin:react/recommended"], + "env": { + "browser": true + }, "rules": { "multiline-ternary": "off", + "react/prop-types": "off", + "indent": "off", "no-restricted-imports": [ "error", { @@ -9,9 +14,13 @@ } ], "one-var": "off", - "semi": ["error", "always", { - "omitLastInOneLineBlock": true - }], + "semi": [ + "error", + "always", + { + "omitLastInOneLineBlock": true + } + ], "space-before-function-paren": "off" }, "parser": "babel-eslint", @@ -21,11 +30,11 @@ * Only warn for EVERYTHING (for now) * */ - "only-warn" + "only-warn" ], "settings": { "react": { "version": "detect" } } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index e23a25be..3ac9cac9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2232,7 +2232,7 @@ "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", - "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==", + "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", "dev": true, "requires": { "prelude-ls": "~1.1.2", @@ -2278,7 +2278,7 @@ "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", - "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==", + "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", "dev": true }, "pretty-format": { @@ -2361,7 +2361,7 @@ "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", - "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==", + "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", "dev": true, "requires": { "prelude-ls": "~1.1.2" @@ -4298,12 +4298,6 @@ "node-releases": "^1.1.71" }, "dependencies": { - "caniuse-lite": { - "version": "1.0.30001230", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz", - "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==", - "dev": true - }, "colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -4472,6 +4466,12 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "caniuse-lite": { + "version": "1.0.30001444", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001444.tgz", + "integrity": "sha512-ecER9xgJQVMqcrxThKptsW0pPxSae8R2RB87LNa+ivW9ppNWRHEplXcDzkCOP4LYWGj8hunXLqaiC41iBATNyg==", + "dev": true + }, "canvg": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz", @@ -11356,7 +11356,7 @@ "rgbcolor": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", - "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=", "dev": true, "optional": true }, diff --git a/package.json b/package.json index c15fe7e3..9e2b7417 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "tsc": "npx tsc --noEmit --lib es6,dom --skipLibCheck types/index.d.ts", "lint:fix": "npx eslint src/** -c ./.eslintrc --ignore-path ./.eslintignore --fix", "prettify": "npx prettier -c ./.prettierrc --write **/*.js", + "pretest": "npm run build", "test": "npx jest && check-dts **/*.ts", "test:build": "npx jest __tests__/post.build.test.js", "prerelease": "npm run t", @@ -121,8 +122,8 @@ "classnames": "^2.3.2", "date-fns": "^2.29.3", "debounce": "^1.2.1", - "deepmerge": "^4.2.2", "deep-eql": "^4.1.1", + "deepmerge": "^4.2.2", "prop-types": "^15.8.1", "react-double-scrollbar": "0.0.15", "uuid": "^9.0.0", diff --git a/src/components/MTableEditRow/index.js b/src/components/MTableEditRow/index.js index e7abb95d..037a7b48 100644 --- a/src/components/MTableEditRow/index.js +++ b/src/components/MTableEditRow/index.js @@ -148,7 +148,6 @@ function MTableEditRow(props) { if (!isValid) { return; } - const newData = state.data; props.onEditingApproved(props.mode, state.data, props.data); }; diff --git a/src/components/MTableFilterRow/LookupFilter.js b/src/components/MTableFilterRow/LookupFilter.js index 8f118a5b..8c1c5b54 100644 --- a/src/components/MTableFilterRow/LookupFilter.js +++ b/src/components/MTableFilterRow/LookupFilter.js @@ -4,7 +4,6 @@ import { getLocalizedFilterPlaceHolder } from './utils'; import { Checkbox, FormControl, - Input, InputLabel, ListItemText, MenuItem, diff --git a/src/components/MTableToolbar/index.js b/src/components/MTableToolbar/index.js index 573a2331..d4874791 100644 --- a/src/components/MTableToolbar/index.js +++ b/src/components/MTableToolbar/index.js @@ -68,9 +68,9 @@ export function MTableToolbar(props) { About: column.customExport This bit of code checks if prop customExport in column is a function, and if it is then it uses that function to transform the data, this is useful in cases where a column contains - complex objects or array and it needs to be handled before it's passed to the exporter - to avoid [object Object] output (e.g. to flatten data). - Please note that it is also possible to transform data within under exportMenu + complex objects or array and it needs to be handled before it's passed to the exporter + to avoid [object Object] output (e.g. to flatten data). + Please note that it is also possible to transform data within under exportMenu using a custom function (exportMenu.exportFunc) for each exporter. */ if (typeof columnDef.customExport === 'function') { @@ -335,7 +335,7 @@ MTableToolbar.propTypes = { originalData: PropTypes.array, title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), renderData: PropTypes.array, - data: PropTypes.array, + data: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), exportAllData: PropTypes.bool, exportMenu: PropTypes.arrayOf( PropTypes.shape({ @@ -344,7 +344,6 @@ MTableToolbar.propTypes = { }) ), searchAutoFocus: PropTypes.bool, - data: PropTypes.func, classes: PropTypes.object }; diff --git a/src/components/m-table-edit-cell.js b/src/components/m-table-edit-cell.js index de13f3e9..c8d5bee4 100644 --- a/src/components/m-table-edit-cell.js +++ b/src/components/m-table-edit-cell.js @@ -88,6 +88,7 @@ class MTableEditCell extends React.Component { ); }) .catch((error) => { + if (process.env.NODE_ENV === 'development') console.log(error); this.setState({ isLoading: false }); }); }); diff --git a/src/material-table.js b/src/material-table.js index 34db1213..78d5912d 100644 --- a/src/material-table.js +++ b/src/material-table.js @@ -241,40 +241,6 @@ export default class MaterialTable extends React.Component { ...this.dataManager.getRenderState(), actions: props.actions }); - if ( - process.env.NODE_ENV === 'development' && - columnPropsChanged && - !this.checkedForFunctions && - prevProps.columns.length !== 0 && - props.data[0] && - props.data[0].id !== undefined - ) { - const bothContainFunctions = - fixedPropsColumns.some((column) => - Object.values(column).some((val) => typeof val === 'function') - ) && - fixedPrevColumns.some((column) => - Object.values(column).some((val) => typeof val === 'function') - ); - if (bothContainFunctions) { - this.checkedForFunctions = true; - const currentColumnsWithoutFunctions = functionlessColumns( - fixedPropsColumns - ); - const prevColumnsWithoutFunctions = functionlessColumns( - fixedPrevColumns - ); - const columnsEqual = deepEql( - currentColumnsWithoutFunctions, - prevColumnsWithoutFunctions - ); - if (columnsEqual) { - console.warn( - 'The columns provided to material table are static, but contain functions which update on every render, resetting the table state. Provide a stable function or column reference or an row id to prevent state loss.' - ); - } - } - } } const count = this.isRemoteData() ? this.state.query.totalCount @@ -1325,17 +1291,6 @@ export default class MaterialTable extends React.Component { } } -function functionlessColumns(columns) { - return columns.map((col) => - Object.entries(col).reduce((obj, [key, val]) => { - if (typeof val !== 'function') { - obj[key] = val; - } - return obj; - }, {}) - ); -} - function getDefaultCollectionSort(currentColumns, prevColumns, maxColumnSort) { let defaultCollectionSort = []; let prevCollectionSort = []; @@ -1352,7 +1307,7 @@ function getDefaultCollectionSort(currentColumns, prevColumns, maxColumnSort) { } function reduceByDefaultSort(list, maxColumnSort) { - let sortColumns = list.filter( + const sortColumns = list.filter( (column) => column.defaultSort && column.sorting !== false ); return sortColumns.slice(0, maxColumnSort).map((column, index) => { diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js index 628fdcec..d8760f7b 100644 --- a/src/utils/data-manager.js +++ b/src/utils/data-manager.js @@ -52,8 +52,6 @@ export default class DataManager { rootGroupsIndex = {}; - constructor() {} - setData(data, idSynonym) { this.selectedCount = 0; let prevDataObject = {}; @@ -113,7 +111,7 @@ export default class DataManager { setColumns(columns, prevColumns = [], savedColumns = {}) { let usedWidthPx = 0; - let usedWidthNotPx = []; + const usedWidthNotPx = []; this.columns = columns.map((columnDef, index) => { const widthPx = widthToNumber(columnDef.width); @@ -123,11 +121,11 @@ export default class DataManager { : columnDef.width; if ( - width //&& - //columnDef.tableData // && + width // && + // columnDef.tableData // && // columnDef.tableData.width !== undefined ) { - if (widthPx !== NaN) { + if (!isNaN(widthPx)) { usedWidthPx += widthPx; } else { usedWidthNotPx.push(width); @@ -142,7 +140,7 @@ export default class DataManager { groupSort: columnDef.defaultGroupSort || 'asc', width, initialWidth: width, - widthPx: widthPx === NaN ? undefined : widthPx, + widthPx: isNaN(widthPx) ? undefined : widthPx, additionalWidth: 0, ...savedColumnTableData, ...(prevColumn ? prevColumn.tableData : {}), @@ -332,7 +330,7 @@ export default class DataManager { if (rowData) { rowData.tableData.editing = mode; - if (this.lastEditingRow && this.lastEditingRow != rowData) { + if (this.lastEditingRow && this.lastEditingRow !== rowData) { this.lastEditingRow.tableData.editing = undefined; } @@ -400,7 +398,7 @@ export default class DataManager { let currentGroupArray = this.groupedData; path.forEach((value) => { - currentGroup = currentGroupArray.find((group) => group.value == value); + currentGroup = currentGroupArray.find((group) => group.value === value); currentGroupArray = currentGroup.groups; }); @@ -410,7 +408,7 @@ export default class DataManager { setCheck(element.groups); } else { element.data.forEach((d) => { - if (d.tableData.checked != checked) { + if (d.tableData.checked !== checked) { d.tableData.checked = d.tableData.disabled ? false : checked; this.selectedCount = this.selectedCount + (checked ? 1 : -1); } @@ -535,7 +533,7 @@ export default class DataManager { result.source.droppableId === 'headers' ) { const newGroup = this.columns.find( - (c) => c.tableData.id == result.draggableId + (c) => c.tableData.id === result.draggableId ); if (newGroup.grouping === false || !newGroup.field) { @@ -548,7 +546,7 @@ export default class DataManager { result.source.droppableId === 'groups' ) { const removeGroup = this.columns.find( - (c) => c.tableData.id == result.draggableId + (c) => c.tableData.id === result.draggableId ); removeGroup.tableData.groupOrder = undefined; groups.splice(result.source.index, 1);