doing some more mobile views to load more

src/common/QrCodeGenerator.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Box, Button, Checkbox, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 // import MaterialTable from "material-table";
 import React, { useEffect, useState } from "react";
 import ResponsiveDialog from "./ResponsiveDialog";
@@ -36,7 +36,7 @@ export default function(props: Props) {
       width: 500
     },
     viewerMobile: {
-      height: "100%",
+      height: 500,
       width: "100%"
     },
     page: {
@@ -103,12 +103,12 @@ export default function(props: Props) {
       selected.push(row)
     }else{ //remove the page/index from the map
       if(pageSelect){
-        pageSelect.splice(pageSelect.indexOf(index))
+        pageSelect.splice(pageSelect.indexOf(index), 1)
       }
       //remove the selected object from the array
       selected.forEach((codeKey, index) => {
         if(row.key === codeKey.key){
-          selected.splice(index)
+          selected.splice(index, 1)
         }
       })
     }
@@ -137,35 +137,27 @@ export default function(props: Props) {
           total={keyList.length}
           setPage={(page) => {setTablePage(page)}}
           handleRowsPerPageChange={handleRowsPerPageChange}
+          loadMore={() => {
+            let clone: QrCodeKey[] = cloneDeep(keyList)
+            let current = cloneDeep(displayedRows)
+            let newRows = clone.splice(current.length, pageSize)
+            setDisplayedRows(current.concat(newRows))
+          }}
+          renderMobile={(row, index) => {
+            return (
+              <Box display="flex">
+                <Checkbox 
+                  onChange={(e, checked) => {
+                    rowSelected(row, index, checked)
+                  }}
+                />
+                <Typography>
+                  {row.name}
+                </Typography>
+              </Box>
+            )
+          }}
         />
-        {/* <MaterialTable
-          icons={getTableIcons()}
-          title={""}
-          data={keyList}
-          options={{
-            paging: true,
-            // pageSize: pageSize,
-            // pageSizeOptions: [5, 10, 20],
-            padding: "dense",
-            showTitle: true,
-            toolbar: true,
-            sorting: true,
-            columnsButton: true,
-            search: false,
-            selection: true
-          }}
-          onSelectionChange={(data, rowData) => {
-            setSelectedKeys(data);
-          }}
-          columns={[
-            {
-              cellStyle: {
-                padding: 0
-              },
-              title: "Name",
-              field: "name"
-            }
-          ]}></MaterialTable> */}
       </React.Fragment>
     );
   };

src/common/ResponsiveTable.tsx

@@ -85,7 +85,7 @@ interface Props<T> {
   multiGutter?: boolean;
   rowsPerPageOptions?: number[];
   noDataMessage?: string;
-  renderMobile?: (row: T) => JSX.Element;
+  renderMobile?: (row: T, index: number) => JSX.Element;
   hideKeys?: boolean;
   onRowClick?: (row: T) => void;
   actions?: string | JSX.Element;
@@ -273,9 +273,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     return String(val).charAt(0).toUpperCase() + String(val).slice(1);
   }
 
-  const renderMobileRow = (row: T) => {
+  const renderMobileRow = (row: T, index: number) => {
     if (renderMobile) return (
-      renderMobile(row)
+      renderMobile(row, index)
     )
     if (columns) {
       return (
@@ -330,7 +330,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
       {rows.map((row, index) => {
         return (
           <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
-            {renderMobileRow(row)}
+            {renderMobileRow(row, index)}
             {renderGutter &&
               <>
               <Divider/>