rev: file view

Deskripsi:
- bisa zoom in out dan geser di view file pdf dan image

No issues

package.json

@@ -50,6 +50,7 @@
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-zoom-pan-pinch": "^3.7.0",
     "readdirp": "^3.6.0",
     "recharts": "2",
     "rrule": "^2.8.1",

src/module/_global/layout/layout_modal_view_file.tsx

@@ -4,6 +4,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { funReadPdf } from '../fun/read_pdf';
 const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
 
@@ -42,6 +43,8 @@ export default function LayoutModal({ opened, onClose, extension, fitur, name, f
    useShallowEffect(() => {
       if (extension == "pdf") {
          getPdfToImg(1)
+      } else {
+         setLoadingPdf(false)
       }
    }, [file, extension])
 
@@ -74,12 +77,11 @@ export default function LayoutModal({ opened, onClose, extension, fitur, name, f
                         zIndex: 999,
                      }}
                   >
-                     <Group justify="space-between">
+                     <Group justify="flex-start">
-                        <Flex direction="row" gap="xs" align="center">
+                        {/* <Flex direction="row" gap="xs" align="center">
                            <Button variant="light" onClick={handleZoomOut}> - </Button>
                            <Button variant="light" onClick={handleZoomIn}> + </Button>
-                        </Flex>
+                        </Flex> */}
-
                         {
                            extension == "pdf" &&
                            <Flex direction="row" gap="xs" align="center">
@@ -98,7 +100,47 @@ export default function LayoutModal({ opened, onClose, extension, fitur, name, f
                      paddingLeft: 10,
                      paddingRight: 10
                   }}>
-                     <div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
+                     {
+                        loadingPdf ?
+                           <Stack p="md" align="stretch" justify="center">
+                              {[...Array(1)].map((_, index) => (
+                                 <Skeleton key={index} height={500} />
+                              ))}
+                           </Stack>
+                           :
+                           <TransformWrapper>
+                              <TransformComponent>
+                                 {
+                                    extension === 'pdf' ?
+                                       <>
+                                          {dataPdf.map((item: any, index: any) => (
+                                             <Image
+                                                style={{
+                                                   maxWidth: '100%',
+                                                   maxHeight: '100%',
+                                                }}
+                                                fit="contain"
+                                                alt={file}
+                                                key={index}
+                                                src={item.imageUrl}
+                                             />
+                                          ))}
+                                       </>
+                                       :
+                                       <Image
+                                          style={{
+                                             maxWidth: '100%',
+                                             maxHeight: '100%',
+                                          }}
+                                          fit="contain"
+                                          src={`https://wibu-storage.wibudev.com/api/files/${file}`}
+                                          alt={file}
+                                       />
+                                 }
+                              </TransformComponent>
+                           </TransformWrapper>
+                     }
+                     {/* <div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
                         {
                            extension === 'pdf' ?
                               // <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} />
@@ -130,7 +172,7 @@ export default function LayoutModal({ opened, onClose, extension, fitur, name, f
                                  alt={file}
                               />
                         }
-                     </div>
+                     </div> */}
                   </Box>
                </Modal.Body>
             </Modal.Content>