Merge pull request #156 from team-incube/develop

v3.0.2

Author: Dino0204

src/feature/evidence/ui/EvidenceForm.tsx

@@ -50,6 +50,7 @@ export default function EvidenceForm({
     handleSubmit,
     watch,
     setValue,
+    getValues,
     formState: { errors },
   } = useForm<EvidenceFormValues>({
     resolver: zodResolver(EvidenceFormSchema),
@@ -119,8 +120,11 @@ export default function EvidenceForm({
     setShowDeleteConfirm(true);
   };
 
-  const handleDeleteConfirm = () => {
-    handleSubmit((data) => processSubmit(data, 'delete'))();
+  const handleDeleteConfirm = (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const data = getValues();
+    processSubmit(data, 'delete');
   };
 
   return (

src/feature/project-create/ui/ProjectCreateForm.tsx

@@ -50,6 +50,7 @@ export default function ProjectCreateForm({
     handleSubmit,
     watch,
     setValue,
+    getValues,
     formState: { errors },
   } = useForm<ProjectFormValues>({
     resolver: zodResolver(ProjectFormSchema),
@@ -112,8 +113,11 @@ export default function ProjectCreateForm({
     setShowDeleteConfirm(true);
   };
 
-  const handleDeleteConfirm = () => {
-    handleSubmit((data) => processSubmit(data, 'delete'))();
+  const handleDeleteConfirm = (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const data = getValues();
+    processSubmit(data, 'delete');
   };
 
   return (

src/feature/score/ui/ScoreForm.tsx

@@ -114,8 +114,11 @@ export default function ScoreForm({
     setShowDeleteConfirm(true);
   };
 
-  const handleDeleteConfirm = () => {
-    onSubmit('delete');
+  const handleDeleteConfirm = (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const data = methods.getValues();
+    processSubmit(data, 'delete');
   };
 
   return (

src/shared/asset/img/cumulativeTable.png

@@ -31,12 +31,11 @@ export default function useFileUploaderState({
     setExistingFiles(normalizedFiles);
   }, [uploadedFiles]);
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = e.target.files;
-    if (!selectedFiles || selectedFiles.length === 0) return;
+  const handleFiles = (files: File[] | FileList) => {
+    if (!files || files.length === 0) return;
 
     if (!isMultiple) {
-      const file = selectedFiles[0];
+      const file = files[0];
 
       const newExisting: FileType[] = [];
       const newLocal = [
@@ -50,7 +49,7 @@ export default function useFileUploaderState({
       setNewFiles(newLocal);
       onChange?.({ existing: newExisting, new: [file] });
     } else {
-      const fileArray = Array.from(selectedFiles);
+      const fileArray = Array.from(files);
       const validLocalFiles: LocalFile[] = fileArray.map((file) => ({
         id: crypto.randomUUID(),
         name: file.name,
@@ -62,7 +61,13 @@ export default function useFileUploaderState({
         onChange?.({ existing: existingFiles, new: updatedNewFiles.map((f) => f.file) });
       }
     }
+  };
 
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = e.target.files;
+    if (selectedFiles) {
+      handleFiles(selectedFiles);
+    }
     e.target.value = '';
   };
 
@@ -112,6 +117,7 @@ export default function useFileUploaderState({
     displayFiles,
     buttonText,
     handleFileChange,
+    handleFiles,
     handleRemoveFile,
   };
 }

src/shared/asset/img/yearTable.png

@@ -8,8 +8,8 @@ interface ConfirmModalProps {
   message: string;
   confirmText?: string;
   cancelText?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
+  onConfirm: (e?: React.MouseEvent) => void;
+  onCancel: (e?: React.MouseEvent) => void;
 }
 
 export default function ConfirmModal({
@@ -28,10 +28,10 @@ export default function ConfirmModal({
           <p className="text-body1 text-gray-700">{message}</p>
         </div>
         <div className="flex gap-3">
-          <Button variant="border" onClick={onCancel}>
+          <Button type="button" variant="border" onClick={onCancel}>
             {cancelText}
           </Button>
-          <Button variant="active" onClick={onConfirm}>
+          <Button type="button" variant="active" onClick={onConfirm}>
             {confirmText}
           </Button>
         </div>

src/shared/model/useHandlingFileUploader.ts

@@ -1,18 +1,21 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { AllowedExtension, FileType } from '@/entities/file/model/file';
 import Chain from '@/shared/asset/svg/Chain';
 import useFileUploaderState from '@/shared/model/useHandlingFileUploader';
 import FileList from '@/shared/ui/FileList';
 
-interface FileUploaderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | "accept"> {
+interface FileUploaderProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'onChange' | 'accept'
+> {
   label: string;
   uploadedFiles?: FileType | FileType[];
   isMultiple?: boolean;
   accept?: AllowedExtension | AllowedExtension[];
-  onChange?: (files: { existing: FileType[], new: File[] }) => void;
+  onChange?: (files: { existing: FileType[]; new: File[] }) => void;
 }
 
 interface NewFileInputProps {
@@ -30,15 +33,7 @@ const NewFileInput = ({ file }: NewFileInputProps) => {
     }
   }, [file]);
 
-  return (
-    <input
-      ref={ref}
-      type="file"
-      name="newFiles"
-      className="hidden"
-      readOnly
-    />
-  );
+  return <input ref={ref} type="file" name="newFiles" className="hidden" readOnly />;
 };
 
 export default function FileUploader({
@@ -55,9 +50,29 @@ export default function FileUploader({
     displayFiles,
     buttonText,
     handleFileChange,
+    handleFiles,
     handleRemoveFile,
   } = useFileUploaderState({ uploadedFiles, isMultiple, onChange });
 
+  const [isDragging, setIsDragging] = useState(false);
+
+  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) return;
+    setIsDragging(false);
+  };
+
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const openFileDialog = () => {
@@ -72,16 +87,18 @@ export default function FileUploader({
         <div
           role="button"
           tabIndex={0}
-          className="focus:ring-main-500 flex cursor-pointer items-center gap-2 rounded-xl border border-gray-300 p-3 hover:border-gray-300 focus:outline-none"
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          className={`focus:ring-main-500 flex cursor-pointer items-center gap-2 rounded-xl border p-3 focus:outline-none ${
+            isDragging ? 'border-main-500 bg-blue-50' : 'border-gray-300'
+          }`}
           onClick={openFileDialog}
         >
           <span className="text-gray-400">
             <Chain />
           </span>
-          <span
-            className="max-w-[220px] truncate text-sm text-gray-400"
-            title={buttonText}
-          >
+          <span className="max-w-[220px] truncate text-sm text-gray-400" title={buttonText}>
             {buttonText}
           </span>
 
@@ -113,12 +130,9 @@ export default function FileUploader({
         ))}
 
         {newFiles.map((localFile) => (
-          <NewFileInput
-            key={localFile.id}
-            file={localFile.file}
-          />
+          <NewFileInput key={localFile.id} file={localFile.file} />
         ))}
       </div>
     </div>
   );
-}
+}