diff --git a/package.json b/package.json
index a715fee..7d4bfb4 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,9 @@
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@fontsource/roboto": "^4.5.8",
- "@mui/icons-material": "^5.11.9",
- "@mui/material": "^5.11.10",
+ "@mui/icons-material": "^5.11.11",
+ "@mui/material": "^5.11.11",
+ "@mui/x-data-grid": "^5.17.25",
"@shopify/react-web-worker": "^5.0.8",
"@tauri-apps/api": "^1.2.0",
"@testing-library/jest-dom": "^5.16.5",
@@ -16,9 +17,8 @@
"crypto-js": "^4.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-router-dom": "^6.8.1",
+ "react-router-dom": "^6.8.2",
"react-scripts": "^5.0.1",
- "react-virtualized": "^9.22.3",
"web-vitals": "^3.1.1"
},
"scripts": {
diff --git a/src/components/MuiVirtualizedTable/index.jsx b/src/components/MuiVirtualizedTable/index.jsx
deleted file mode 100644
index b6b8095..0000000
--- a/src/components/MuiVirtualizedTable/index.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import TableCell from '@mui/material/TableCell';
-import { AutoSizer, Column, Table } from 'react-virtualized';
-
-const classes = {
- flexContainer: 'ReactVirtualizedDemo-flexContainer',
- tableRow: 'ReactVirtualizedDemo-tableRow',
- tableRowHover: 'ReactVirtualizedDemo-tableRowHover',
- tableCell: 'ReactVirtualizedDemo-tableCell',
- noClick: 'ReactVirtualizedDemo-noClick',
-};
-
-const MuiVirtualizedTable = (props) => {
- const getRowClassName = ({ index }) => {
- const { onRowClick } = props;
-
- let className = `${classes.tableRow} ${classes.flexContainer}`;
- if (index !== -1 && onRowClick != null) {
- className += ` ${classes.tableRowHover}`;
- }
-
- return className;
- };
-
- const cellRenderer = ({ cellData }) => {
- const { rowHeight, onRowClick } = props;
- let className = `${classes.tableCell} ${classes.flexContainer}`;
- if (onRowClick == null) {
- className += ` ${classes.noClick}`;
- }
-
- return (
-
- {cellData}
-
- );
- };
-
- const headerRenderer = ({ label, columnIndex }) => {
- const { headerHeight, columns } = props;
-
- return (
-
- {label}
-
- );
- };
-
- const {
- columns, rowHeight, headerHeight, ...tableProps
- } = props;
- return (
-
- {({ height, width }) => (
-
- {columns.map(({ dataKey, ...other }, index) => (
- headerRenderer({
- ...headerProps,
- columnIndex: index,
- })}
- className={classes.flexContainer}
- cellRenderer={cellRenderer}
- dataKey={dataKey}
- /* eslint-disable-next-line react/jsx-props-no-spreading */
- {...other}
- />
- ))}
-
- )}
-
- );
-};
-
-export default MuiVirtualizedTable;
diff --git a/src/routes/Generate/index.jsx b/src/routes/Generate/index.jsx
index 12198b9..0235b26 100644
--- a/src/routes/Generate/index.jsx
+++ b/src/routes/Generate/index.jsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from 'react';
import Container from '@mui/material/Container';
import Button from '@mui/material/Button';
import { createWorkerFactory, useWorker } from '@shopify/react-web-worker';
-import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import { save } from '@tauri-apps/api/dialog';
import { invoke } from '@tauri-apps/api/tauri';
@@ -10,6 +9,7 @@ import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
+import { DataGrid } from '@mui/x-data-grid';
import { MainContext } from '../../contexts/MainContextProvider';
import { PasswordContext } from '../../contexts/PasswordContextProvider';
import { setError, setLoading, setPageIndex } from '../../reducers/MainReducer/Actions';
@@ -19,51 +19,9 @@ import {
getFullCharacterSet,
setPasswords,
} from '../../reducers/PasswordReducer/Actions';
-import MuiVirtualizedTable from '../../components/MuiVirtualizedTable';
import LoadingBar from '../../components/LoadingBar';
-const classes = {
- flexContainer: 'ReactVirtualizedDemo-flexContainer',
- tableRow: 'ReactVirtualizedDemo-tableRow',
- tableRowHover: 'ReactVirtualizedDemo-tableRowHover',
- tableCell: 'ReactVirtualizedDemo-tableCell',
- noClick: 'ReactVirtualizedDemo-noClick',
-};
-
-const styles = ({ theme }) => ({
- // temporary right-to-left patch, waiting for
- // https://github.com/bvaughn/react-virtualized/issues/454
- '& .ReactVirtualized__Table__headerRow': {
- ...(theme.direction === 'rtl' && {
- paddingLeft: '0 !important',
- }),
- ...(theme.direction !== 'rtl' && {
- paddingRight: undefined,
- }),
- },
- [`& .${classes.flexContainer}`]: {
- display: 'flex',
- alignItems: 'center',
- boxSizing: 'border-box',
- },
- [`& .${classes.tableRow}`]: {
- cursor: 'pointer',
- },
- [`& .${classes.tableRowHover}`]: {
- '&:hover': {
- backgroundColor: theme.palette.grey[200],
- },
- },
- [`& .${classes.tableCell}`]: {
- flex: 1,
- },
- [`& .${classes.noClick}`]: {
- cursor: 'initial',
- },
-});
-
const createWorker = createWorkerFactory(() => import('../../utils/PasswordGenerator/index'));
-const VirtualizedTable = styled(MuiVirtualizedTable)(styles);
const Generate = () => {
const [state1, d1] = useContext(MainContext);
@@ -212,13 +170,16 @@ const Generate = () => {
/**
* Create a JSON object with the passwords and their strength
+ * @param id The ID
* @param password The password
* @param passwordLength The length of the password
* @param strength The strength of the password
* @returns {{password, strength: string, length}} The JSON object
*/
- const createData = (password, passwordLength, strength) => (
- { password, length: passwordLength, strength: `${strength}%` }
+ const createData = (id, password, passwordLength, strength) => (
+ {
+ id, password, length: passwordLength, strength,
+ }
);
/**
@@ -242,7 +203,7 @@ const Generate = () => {
const passwordRows = [];
if (passwords && passwords.length > 0) {
- passwords.forEach((e) => passwordRows.push(createData(e, e.length, PasswordStrength(e))));
+ passwords.forEach((e, i) => passwordRows.push(createData(`${e}${i}`, e, e.length, PasswordStrength(e))));
}
if (loading) {
@@ -251,32 +212,41 @@ const Generate = () => {
);
}
+ const columns = [
+ {
+ field: 'password',
+ headerName: language.password,
+ editable: false,
+ flex: 1,
+ },
+ {
+ field: 'length',
+ headerName: language.length,
+ type: 'number',
+ editable: false,
+ },
+ {
+ field: 'strength',
+ headerName: language.strength,
+ editable: false,
+ valueFormatter: (params) => {
+ const valueFormatted = Number(params.value).toLocaleString();
+ return `${valueFormatted} %`;
+ },
+ },
+ ];
+
return (
- passwordRows[index]}
- columns={[
- {
- width: 800,
- label: language.password,
- dataKey: 'password',
- },
- {
- width: 120,
- label: language.length,
- dataKey: 'length',
- numeric: true,
- },
- {
- width: 120,
- label: language.strength,
- dataKey: 'strength',
- },
- ]}
+