feat complete

src/components/input/BaseFileInput.tsx

@@ -11,6 +11,7 @@ import {
 import { globalInputHeight } from '../../config/uiConfig';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
+import { isArray } from 'lodash';
 
 interface BaseFileInputComponentProps extends BaseFileInputProps {
   children: (props: { preview: string | undefined }) => ReactNode;
@@ -31,13 +32,17 @@ export default function BaseFileInput({
   const { showSnackBar } = useContext(CustomSnackBarContext);
 
   useEffect(() => {
-    if (value) {
-      const objectUrl = createObjectURL(value);
-      setPreview(objectUrl);
+    try {
+      if (isArray(value)) {
+        const objectUrl = createObjectURL(value[0]);
+        setPreview(objectUrl);
 
-      return () => revokeObjectURL(objectUrl);
-    } else {
-      setPreview(null);
+        return () => revokeObjectURL(objectUrl);
+      } else {
+        setPreview(null);
+      }
+    } catch (error) {
+      console.error('Error previewing file:', error);
     }
   }, [value]);
 
@@ -50,9 +55,9 @@ export default function BaseFileInput({
     fileInputRef.current?.click();
   };
   const handleCopy = () => {
-    if (value) {
-      const blob = new Blob([value], { type: value.type });
-      const clipboardItem = new ClipboardItem({ [value.type]: blob });
+    if (isArray(value)) {
+      const blob = new Blob([value[0]], { type: value[0].type });
+      const clipboardItem = new ClipboardItem({ [value[0].type]: blob });
 
       navigator.clipboard
         .write([clipboardItem])
@@ -63,6 +68,11 @@ export default function BaseFileInput({
     }
   };
 
+  function handleClear() {
+    // @ts-ignore
+    onChange(null);
+  }
+
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent) => {
       const clipboardItems = event.clipboardData?.items ?? [];
@@ -141,13 +151,18 @@ export default function BaseFileInput({
           </Box>
         )}
       </Box>
-      <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
+      <InputFooter
+        handleCopy={handleCopy}
+        handleImport={handleImportClick}
+        handleClear={handleClear}
+      />
       <input
         ref={fileInputRef}
         style={{ display: 'none' }}
         type="file"
         accept={accept.join(',')}
         onChange={handleFileChange}
+        multiple={false}
       />
     </Box>
   );

src/components/input/InputFooter.tsx

@@ -2,23 +2,32 @@ import { Stack } from '@mui/material';
 import Button from '@mui/material/Button';
 import PublishIcon from '@mui/icons-material/Publish';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
-import React from 'react';
+import ClearIcon from '@mui/icons-material/Clear';
 
 export default function InputFooter({
   handleImport,
-  handleCopy
+  handleCopy,
+  handleClear
 }: {
   handleImport: () => void;
-  handleCopy: () => void;
+  handleCopy?: () => void;
+  handleClear?: () => void;
 }) {
   return (
     <Stack mt={1} direction={'row'} spacing={2}>
       <Button onClick={handleImport} startIcon={<PublishIcon />}>
         Import from file
       </Button>
-      <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
-        Copy to clipboard
-      </Button>
+      {handleCopy && (
+        <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
+          Copy to clipboard
+        </Button>
+      )}
+      {handleClear && (
+        <Button onClick={handleClear} startIcon={<ClearIcon />}>
+          Clear
+        </Button>
+      )}
     </Stack>
   );
 }

src/components/input/ToolMultiplePdfInput.tsx

@@ -0,0 +1,193 @@
+import { ReactNode, useContext, useEffect, useRef, useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import InputHeader from '../InputHeader';
+import InputFooter from './InputFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import { isArray } from 'lodash';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+
+interface MultiPdfInputComponentProps {
+  accept: string[];
+  title?: string;
+  type: 'pdf';
+  value: MultiPdfInput[];
+  onChange: (file: MultiPdfInput[]) => void;
+}
+export interface MultiPdfInput {
+  file: File;
+  order: number;
+}
+
+export default function ToolMultiFileInput({
+  value,
+  onChange,
+  accept,
+  title,
+  type
+}: MultiPdfInputComponentProps) {
+  const theme = useTheme();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files)
+      onChange([
+        ...value,
+        ...Array.from(files).map((file) => ({ file, order: value.length }))
+      ]);
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleCopy = () => {
+    if (isArray(value)) {
+      const blob = new Blob([value[0].file], { type: value[0].file.type });
+      const clipboardItem = new ClipboardItem({ [value[0].file.type]: blob });
+
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => showSnackBar('File copied', 'success'))
+        .catch((err) => {
+          showSnackBar('Failed to copy: ' + err, 'error');
+        });
+    }
+  };
+
+  function handleClear() {
+    onChange([]);
+  }
+
+  function fileNameTruncate(fileName: string) {
+    const maxLength = 10;
+    if (fileName.length > maxLength) {
+      return fileName.slice(0, maxLength) + '...';
+    }
+    return fileName;
+  }
+
+  const sortList = () => {
+    const list = [...value];
+    list.sort((a, b) => a.order - b.order);
+    onChange(list);
+  };
+
+  const reorderList = (sourceIndex: number, destinationIndex: number) => {
+    console.log(sourceIndex, destinationIndex);
+    if (destinationIndex === sourceIndex) {
+      return;
+    }
+    const list = [...value];
+
+    if (destinationIndex === 0) {
+      list[sourceIndex].order = list[0].order - 1;
+      sortList();
+      return;
+    }
+
+    if (destinationIndex === list.length - 1) {
+      list[sourceIndex].order = list[list.length - 1].order + 1;
+      sortList();
+      return;
+    }
+
+    if (destinationIndex < sourceIndex) {
+      list[sourceIndex].order =
+        (list[destinationIndex].order + list[destinationIndex - 1].order) / 2;
+      sortList();
+      return;
+    }
+
+    list[sourceIndex].order =
+      (list[destinationIndex].order + list[destinationIndex + 1].order) / 2;
+    sortList();
+  };
+
+  return (
+    <Box>
+      <InputHeader
+        title={title || 'Input ' + type.charAt(0).toUpperCase() + type.slice(1)}
+      />
+      <Box
+        sx={{
+          width: '100%',
+          height: '300px',
+
+          border: value?.length ? 0 : 1,
+          borderRadius: 2,
+          boxShadow: '5',
+          bgcolor: 'background.paper',
+          position: 'relative'
+        }}
+      >
+        <Box
+          width="100%"
+          height="100%"
+          sx={{
+            overflow: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            position: 'relative'
+          }}
+        >
+          {value?.length ? (
+            value.map((file, index) => (
+              <Box
+                key={index}
+                sx={{
+                  margin: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  width: '200px',
+                  border: 1,
+                  borderRadius: 1,
+                  padding: 1
+                }}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <PictureAsPdfIcon />
+                  <Typography sx={{ marginLeft: 1 }}>
+                    {fileNameTruncate(file.file.name)}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    const updatedFiles = value.filter((_, i) => i !== index);
+                    onChange(updatedFiles);
+                  }}
+                >
+                  ✖
+                </Box>
+              </Box>
+            ))
+          ) : (
+            <Typography variant="body2" color="text.secondary">
+              No files selected
+            </Typography>
+          )}
+        </Box>
+      </Box>
+
+      <InputFooter
+        handleCopy={handleCopy}
+        handleImport={handleImportClick}
+        handleClear={handleClear}
+      />
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type="file"
+        accept={accept.join(',')}
+        onChange={handleFileChange}
+        multiple={true}
+      />
+    </Box>
+  );
+}