feat: add list component (#71)

package.json

@@ -65,7 +65,7 @@
     "babel-plugin-react-html-attrs": "^3.0.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "copy-webpack-plugin": "^6.0.3",
-    "eslint": "^7.5.0",
+    "eslint": "^7.6.0",
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-react-hooks": "^4.0.8",
     "html-webpack-plugin": "^4.3.0",

src/app/components/List.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable no-magic-numbers */
+import React, {useMemo, FC, ElementType} from 'react';
+import PropTypes from 'prop-types';
+import {makeStyles, createStyles, Theme} from '@material-ui/core/styles';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TablePagination,
+  TableRow,
+  Paper,
+  IconButton,
+} from '@material-ui/core';
+import {TablePaginationActionsProps} from '@material-ui/core/TablePagination/TablePaginationActions';
+import {
+  FirstPage as FirstPageIcon,
+  KeyboardArrowLeft,
+  KeyboardArrowRight,
+  LastPage as LastPageIcon,
+} from '@material-ui/icons';
+import {useStoreContext, useDispatchContext} from '../Store';
+
+const useStyles1 = makeStyles((theme: Theme) => createStyles({
+  root: {
+    flexShrink: 0,
+    marginLeft: theme.spacing(2),
+  },
+}));
+const useStyles2 = makeStyles({
+  table: {
+    minWidth: 500,
+  },
+});
+
+const TablePaginationActions: ElementType<TablePaginationActionsProps> = ({count, page, rowsPerPage, onChangePage}) => {
+  const classes = useStyles1();
+
+  const handleFirstPageButtonClick = (event): void => {
+    onChangePage(event, 0);
+  };
+
+  const handleBackButtonClick = (event): void => {
+    onChangePage(event, page - 1);
+  };
+
+  const handleNextButtonClick = (event): void => {
+    onChangePage(event, page + 1);
+  };
+
+  const handleLastPageButtonClick = (event): void => {
+    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <div className={classes.root}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        <FirstPageIcon/>
+      </IconButton>
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+        <KeyboardArrowLeft/>
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        <KeyboardArrowRight/>
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        <LastPageIcon/>
+      </IconButton>
+    </div>
+  );
+};
+
+TablePaginationActions.propTypes = {
+  count: PropTypes.number.isRequired,
+  onChangePage: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+};
+
+const List: FC<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  population: Array<any>;
+  render: (any, index: number) => HTMLElement;
+  rowsPerPageOptions?: Array<number>;
+}> = ({population, render, rowsPerPageOptions}) => {
+  const classes                                    = useStyles2();
+  const {store: {pagination: {page, rowsPerPage}}} = useStoreContext();
+  const {dispatch}                                 = useDispatchContext();
+
+  const emptyRows               = rowsPerPage - Math.min(rowsPerPage, population.length - page * rowsPerPage);
+  const handleChangePage        = (event, newPage) => {
+    dispatch({type: 'PAGINATION_PAGE', page: newPage});
+  };
+  const handleChangeRowsPerPage = (event) => {
+    dispatch({type: 'PAGINATION_PER_PAGE', rowsPerPage: parseInt(event.target.value, 10)});
+    dispatch({type: 'PAGINATION_PAGE', page: 0});
+  };
+
+  return useMemo(
+    () => <TableContainer component={Paper}>
+      <Table className={classes.table}>
+        <TableBody>
+          {(rowsPerPage > 0 ? population.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : population).map((row, index) => (
+            <TableRow key={index}>
+              {render(row, index)}
+            </TableRow>
+          ))}
+
+          {emptyRows > 0 && (
+            <TableRow style={{height: 53 * emptyRows}}>
+              <TableCell colSpan={6}/>
+            </TableRow>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={rowsPerPageOptions ?? [10, 30, 50, 100]}
+              colSpan={3}
+              count={population.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {'aria-label': 'rows per page'},
+                native: true,
+              }}
+              onChangePage={handleChangePage}
+              onChangeRowsPerPage={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+    , [page, rowsPerPage, population, rowsPerPageOptions, classes],
+  );
+};
+
+export default List;

src/app/components/index.tsx

@@ -1,11 +1,13 @@
 import Graph from './Graph';
+import List from './List';
 import Timeline from './Timeline';
 import Switching from './Switching';
 import LoadingAnimation from './LoadingAnimation';
 import SnackbarWrapper from './SnackbarWrapper';
 
 export {
   Graph,
+  List,
   Timeline,
   Switching,
   LoadingAnimation,

src/index.tsx

@@ -13,6 +13,6 @@ export const GaFramework: FC<{ options: AppOptions }> = ({options}) => <StoreCon
 export {AppOptions};
 export {IGeneticAlgorithm, GeneticAlgorithmBase} from './app/logic/Algorithm';
 export {useStoreContext, useDispatchContext} from './app/Store';
-export {Graph, Timeline} from './app/components';
+export {Graph, List, Timeline} from './app/components';
 export {getProcessContext, updateStatus, reloadWorker, setNotice, setError, closeNotice} from './app/common';
 export {useTheme};

yarn.lock

@@ -1343,12 +1343,12 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "16.9.43"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.43.tgz#c287f23f6189666ee3bebc2eb8d0f84bcb6cdb6b"
-  integrity sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg==
+  version "16.9.44"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.44.tgz#da84b179c031aef67dc92c33bd3401f1da2fa3bc"
+  integrity sha512-BtLoJrXdW8DVZauKP+bY4Kmiq7ubcJq+H/aCpRfvPF7RAT3RwR73Sg8szdc2YasbAlWBDrQ6Q+AFM0KwtQY+WQ==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    csstype "^3.0.2"
 
 "@types/source-list-map@*":
   version "0.1.2"
@@ -2722,11 +2722,16 @@ css-what@2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
-csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.5, csstype@^2.6.7:
+csstype@^2.5.2, csstype@^2.6.5, csstype@^2.6.7:
   version "2.6.13"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
   integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
 
+csstype@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.2.tgz#ee5ff8f208c8cd613b389f7b222c9801ca62b3f7"
+  integrity sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2950,9 +2955,9 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     stream-shift "^1.0.0"
 
 electron-to-chromium@^1.3.488:
-  version "1.3.515"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.515.tgz#96683d2c2be9bf83f6cca75d504a7b443d763c08"
-  integrity sha512-C9h2yLQwNSK/GTtWQsA9O6mLKv0ubmiAQgmz1HvHnAIH8g5Sje1shWxcooumbGiwgqvZ9yrTYULe4seMTgMYqQ==
+  version "1.3.516"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.516.tgz#03ec071b061e462b786bf7e7ce226fd7ab7cf1f6"
+  integrity sha512-WDM5AAQdOrvLqSX8g3Zd5AujBXfMxf96oeZkff0U2HF5op3tjShE+on2yay3r1UD4M9I3p0iHpAS4+yV8U8A9A==
 
 elliptic@^6.0.0, elliptic@^6.5.2:
   version "6.5.3"
@@ -3115,10 +3120,10 @@ eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
-eslint@^7.5.0:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.5.0.tgz#9ecbfad62216d223b82ac9ffea7ef3444671d135"
-  integrity sha512-vlUP10xse9sWt9SGRtcr1LAC67BENcQMFeV+w5EvLEoFe3xJ8cF1Skd0msziRx/VMC+72B4DxreCE+OR12OA6Q==
+eslint@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.6.0.tgz#522d67cfaea09724d96949c70e7a0550614d64d6"
+  integrity sha512-QlAManNtqr7sozWm5TF4wIH9gmUm2hE3vNRUvyoYAa4y1l5/jxD/PQStEjBMQtCqZmSep8UxrcecI60hOpe61w==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"