update scanner

src/components/QrCodeScanner/QrCodeScanner.tsx

@@ -20,6 +20,7 @@ const scannerSx: React.CSSProperties = {
 
 type QrCodeScannerProps = {
     title?: string,
+    contents?: string[],
     onScanSuccess: (result: string) => void,
     onScanError?: (error: string) => void,
     isOpen: boolean,
@@ -28,6 +29,7 @@ type QrCodeScannerProps = {
 
 const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
     title,
+    contents,
     onScanSuccess,
     onScanError,
     isOpen,
@@ -160,14 +162,13 @@ const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
                 {title ? <Typography variant="overline" display="block" marginBlockEnd={1} paddingLeft={2}>
                     {"Title"}
                 </Typography> : null}
-                <Grid container alignItems="center" rowSpacing={2} columns={{ xs: 6, sm: 12 }}>
+                <Grid container alignItems="center" justifyContent="center" rowSpacing={2} columns={{ xs: 6, sm: 12 }}>
                     <Grid item xs={12}>
                         <div style={{ textAlign: "center", margin: "auto", justifyContent: "center" }} id="qr-reader" hidden={isScanned} />
                     </Grid>
                     {cameraList.length > 0 ? <Grid item xs={6} >
                         <Autocomplete
                             disableClearable
-                            disableCloseOnSelect
                             noOptionsText={t("No Options")}
                             options={cameraList}
                             value={cameraList.find((camera) => camera.id === selectedCameraId)}
@@ -184,9 +185,9 @@ const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
                         />
                     </Grid> : null}
                     {
-                        stringList.map((string) => {
-                            return <Grid item xs={7}>{string}</Grid>
-                        })
+                        contents ? contents.map((string) => {
+                            return <Grid item xs={8}>{string}</Grid>
+                        }) : null
                     }
                 </Grid>
                 <Stack direction="row" justifyContent={"flex-end"} spacing={2} sx={{ margin: 2 }}>

src/components/QrCodeScanner/QrCodeScannerModal.tsx

@@ -14,6 +14,7 @@ const modalSx: SxProps = {
 
 type QrCodeScannerModalProps = {
     title?: string,
+    contents?: string[],
     isOpen: boolean,
     onClose: () => void,
     onScanSuccess: (result: string) => void,
@@ -22,6 +23,7 @@ type QrCodeScannerModalProps = {
 
 const QrCodeScannerModal: React.FC<QrCodeScannerModalProps> = ({
     title,
+    contents,
     isOpen,
     onClose,
     onScanSuccess,
@@ -45,14 +47,14 @@ const QrCodeScannerModal: React.FC<QrCodeScannerModalProps> = ({
     return (
         <Modal open={isOpen} onClose={onModalClose}>
             <Card sx={modalSx}>
-                <CardContent>
+                <CardContent sx={{ overflow: "auto", maxHeight: "90vh" }} >
                     <Box
                         sx={{
-                            marginInline: -3,
-                            marginBlock: 4,
+                            // marginInline: -1,
+                            // marginBlock: 1,
                         }}
                     >
-                        <QrCodeScanner title={title} onScanSuccess={onScanSuccess} onScanError={onScanError} isOpen={modalOpen} onClose={onClose}/>
+                        <QrCodeScanner title={title} contents={contents} onScanSuccess={onScanSuccess} onScanError={onScanError} isOpen={modalOpen} onClose={onClose} />
                     </Box>
                 </CardContent>
             </Card>