Merge pull request #873 from NUTFes/feat/uchida/872-modal-tap-off-screen

[feat]協賛活動ページで画面外タップでモーダルを閉じるように変更
NUTFes · Sep 3, 2024 · 3aca1dd · 3aca1dd
2 parents 6a53e08 + 5b7fdb7
commit 3aca1dd
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 57 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ FinanSu.iml
 finansu.env
 finansu.local.env
 api/tmp
+.DS_Store
 
 # cloudflare
 web/**/*.json

diff --git a/view/next-project/src/components/sponsoractivities/AddPdfDetailModal.tsx b/view/next-project/src/components/sponsoractivities/AddPdfDetailModal.tsx
@@ -91,15 +91,15 @@ export default function AddPdfDetailModal(props: ModalProps) {
       setInvoiceDate({ ...invoiceData, [input]: e.target.value });
     };
 
+  const onClose = () => {
+    props.setIsOpen(false);
+  };
+
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
-          <CloseButton
-            onClick={() => {
-              props.setIsOpen(false);
-            }}
-          />
+          <CloseButton onClick={onClose} />
         </div>
         <p className='mx-auto mb-7 w-fit text-2xl font-thin leading-8 tracking-widest text-black-600'>
           請求書の発行
@@ -135,7 +135,7 @@ export default function AddPdfDetailModal(props: ModalProps) {
                 formatDate(invoiceData.deadline),
                 formatDate(invoiceData.issuedDate, false),
               );
-              props.setIsOpen(false);
+              onClose();
             }}
           >
             ダウンロード

diff --git a/view/next-project/src/components/sponsoractivities/DeleteModal.tsx b/view/next-project/src/components/sponsoractivities/DeleteModal.tsx
@@ -18,23 +18,27 @@ const SponsorActivitiesDeleteModal: FC<ModalProps> = (props) => {
     router.reload();
   };
 
+  const onClose = () => {
+    props.setShowModal(false);
+  };
+
   const deleteSponsorActivity = async () => {
     const deleteSponsorActivityUrl = process.env.CSR_API_URI + '/activities/' + props.id;
     await del(deleteSponsorActivityUrl);
   };
 
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
-          <CloseButton onClick={() => props.setShowModal(false)} />
+          <CloseButton onClick={onClose} />
         </div>
       </div>
       <div className='mx-auto mb-5 w-fit text-xl text-black-600'>協賛企業の削除</div>
       <div className='mx-auto my-5 w-fit text-xl'>削除しますか？</div>
       <div className=''>
         <div className='flex flex-row justify-center gap-5'>
-          <OutlinePrimaryButton onClick={closeModal}>戻る</OutlinePrimaryButton>
+          <OutlinePrimaryButton onClick={onClose}>戻る</OutlinePrimaryButton>
           <PrimaryButton
             onClick={() => {
               deleteSponsorActivity();

diff --git a/view/next-project/src/components/sponsoractivities/DetailModal.tsx b/view/next-project/src/components/sponsoractivities/DetailModal.tsx
@@ -31,7 +31,7 @@ const DetailModal: FC<ModalProps> = (props) => {
   const [pageNum, setPageNum] = useState<number>(1);
 
   return (
-    <Modal className='md:h-6/12 md:mt-5 md:w-6/12'>
+    <Modal className='md:h-6/12 md:mt-5 md:w-6/12' onClick={onClose}>
       <div className='ml-auto w-fit'>
         <RiCloseCircleLine size={'23px'} color={'gray'} onClick={onClose} />
       </div>

diff --git a/view/next-project/src/components/sponsoractivities/EditInvoiceModal.tsx b/view/next-project/src/components/sponsoractivities/EditInvoiceModal.tsx
@@ -52,15 +52,15 @@ export default function EditInvoiceModal(props: ModalProps) {
     setIsOpen(false);
   };
 
+  const onClose = () => {
+    props.setIsOpen(false);
+  };
+
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
-          <CloseButton
-            onClick={() => {
-              setIsOpen(false);
-            }}
-          />
+          <CloseButton onClick={onClose} />
         </div>
       </div>
       <div className='mx-auto mb-10 w-fit text-xl text-black-600'>請求書の修正</div>
@@ -134,13 +134,7 @@ export default function EditInvoiceModal(props: ModalProps) {
           </table>
         </div>
         <div className='flex flex-row justify-center gap-5'>
-          <OutlinePrimaryButton
-            onClick={() => {
-              setIsOpen(false);
-            }}
-          >
-            戻る
-          </OutlinePrimaryButton>
+          <OutlinePrimaryButton onClick={onClose}>戻る</OutlinePrimaryButton>
           <PrimaryButton onClick={handleRegister}>編集完了</PrimaryButton>
         </div>
       </div>

diff --git a/view/next-project/src/components/sponsoractivities/EditModal.tsx b/view/next-project/src/components/sponsoractivities/EditModal.tsx
@@ -211,6 +211,10 @@ export default function EditModal(props: ModalProps) {
 
   const NO_SPONSORS_MESSAGE = '企業が登録されていません';
 
+  const onClose = () => {
+    props.setIsOpen(false);
+  };
+
   // 協賛企業の情報
   const content = (data: SponsorActivity) => (
     <div className='my-4 grid grid-cols-5 items-center justify-items-center gap-2'>
@@ -352,14 +356,10 @@ export default function EditModal(props: ModalProps) {
   );
 
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
-          <CloseButton
-            onClick={() => {
-              props.setIsOpen(false);
-            }}
-          />
+          <CloseButton onClick={onClose} />
         </div>
       </div>
       <div className='mx-auto mb-10 w-fit text-xl text-black-600'>協賛企業の修正</div>
@@ -371,13 +371,7 @@ export default function EditModal(props: ModalProps) {
           </div>
         )}
         <div className='flex flex-row justify-center gap-5'>
-          <OutlinePrimaryButton
-            onClick={() => {
-              props.setIsOpen(false);
-            }}
-          >
-            戻る
-          </OutlinePrimaryButton>
+          <OutlinePrimaryButton onClick={onClose}>戻る</OutlinePrimaryButton>
           <PrimaryButton
             onClick={() => {
               submit(formData);

diff --git a/view/next-project/src/components/sponsoractivities/FilterModal.tsx b/view/next-project/src/components/sponsoractivities/FilterModal.tsx
@@ -74,12 +74,7 @@ const FilterModal: FC<ModalProps> = (props) => {
   };
 
   return (
-    <Modal
-      className='md:w-1/2'
-      onClick={() => {
-        onClose();
-      }}
-    >
+    <Modal className='md:w-1/2' onClick={onClose}>
       <form onSubmit={filterHandler}>
         <div onClick={preventCloseModalEvent}>
           <div className='w-full'>

diff --git a/view/next-project/src/components/sponsoractivities/PaymentDayModal.tsx b/view/next-project/src/components/sponsoractivities/PaymentDayModal.tsx
@@ -47,15 +47,15 @@ export default function PaymentDayModal(props: ModalProps) {
       setFormData({ ...formData, [input]: e.target.value });
     };
 
+  const onClose = () => {
+    props.setIsOpen(false);
+  };
+
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
-          <CloseButton
-            onClick={() => {
-              props.setIsOpen(false);
-            }}
-          />
+          <CloseButton onClick={onClose} />
         </div>
         <p className='mx-auto mb-7 w-fit text-2xl font-thin leading-8 tracking-widest text-black-600'>
           入金日を入力
@@ -76,7 +76,7 @@ export default function PaymentDayModal(props: ModalProps) {
                 formatDate(paymentDay, false),
                 formatDate(formData.receivedAt, false),
               );
-              props.setIsOpen(false);
+              onClose();
             }}
           >
             領収書ダウンロード

diff --git a/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx b/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx
@@ -199,6 +199,10 @@ export default function SponsorActivitiesAddModal(props: Props) {
 
   const NO_SPONSORS_MESSAGE = '企業が登録されていません';
 
+  const onClose = () => {
+    props.setIsOpen(false);
+  };
+
   // 協賛活動の情報
   const content = (data: SponsorActivity) => (
     <div className='mx-auto my-10 grid grid-cols-5 items-center justify-items-center gap-2'>
@@ -426,14 +430,10 @@ export default function SponsorActivitiesAddModal(props: Props) {
   };
 
   return (
-    <Modal className='md:w-1/2'>
+    <Modal className='md:w-1/2' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
-          <CloseButton
-            onClick={() => {
-              props.setIsOpen(false);
-            }}
-          />
+          <CloseButton onClick={onClose} />
         </div>
       </div>
       <div className='mx-auto mb-5 w-fit text-xl text-black-600'>協賛活動の登録</div>

diff --git a/view/next-project/src/components/sponsoractivities/UploadFileModal.tsx b/view/next-project/src/components/sponsoractivities/UploadFileModal.tsx
@@ -152,7 +152,7 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
   };
 
   return (
-    <Modal className='md:h-6/12 md:mt-5 md:w-4/12'>
+    <Modal className='md:h-6/12 md:mt-5 md:w-4/12' onClick={onClose}>
       <div className='w-full'>
         <div className='ml-auto mr-5 w-fit'>
           <RiCloseCircleLine size={'23px'} color={'gray'} onClick={onClose} />