Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/uchida/832 modal tap off screen #834

Closed
wants to merge 3 commits into from
Closed

Feat/uchida/832 modal tap off screen #834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22dd2db
[fix]協賛一覧のmodalclose
Kubosaka Jul 7, 2024
78ec7e2
[fix]協賛活動、協賛スタイルのmodalclose
uchida189 Jul 7, 2024
6682436
formatted by workflow
uchida189 Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion view/next-project/src/components/common/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export default function Modal(props: Props) {

useEffect(stopScrollingBackContent, []);

const preventCloseModalEvent = (event: any) => {
event.stopPropagation();
};

const className =
'relative sm:my-6 mx-auto bg-white-0 rounded-lg p-5' +
(props.className ? ` ${props.className}` : '');
Expand All @@ -28,7 +32,11 @@ export default function Modal(props: Props) {
className='fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black-300/50 outline-none focus:outline-none'
onClick={props.onClick}
>
<div className={clsx(className)} style={{ maxHeight: '90vh', overflowY: 'auto' }}>
<div
className={clsx(className)}
style={{ maxHeight: '90vh', overflowY: 'auto' }}
onClick={preventCloseModalEvent}
>
{props.children}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion view/next-project/src/components/sponsoractivities/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const SponsorActivitiesDeleteModal: FC<ModalProps> = (props) => {
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={() => props.setShowModal(false)}>
<div className='w-full'>
<div className='ml-auto w-fit'>
<CloseButton onClick={() => props.setShowModal(false)} />
Expand Down
6 changes: 5 additions & 1 deletion view/next-project/src/components/sponsoractivities/EditModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,8 +351,12 @@ export default function EditModal(props: ModalProps) {
</div>
);

const closeModal = () => {
props.setIsOpen(false);
};

Comment on lines +354 to +357
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

関数が広い行数にかかって書いてあるととっ散らかって可読性が下がるので、
213行目とかに移動してもらっていいですか
(このコンポーネント自体のコード自体すごく汚くて申し訳ありません)

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={closeModal}>
<div className='w-full'>
<div className='ml-auto w-fit'>
<CloseButton
Expand Down
6 changes: 5 additions & 1 deletion view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,8 +425,12 @@ export default function SponsorActivitiesAddModal(props: Props) {
);
};

const closeModal = () => {
props.setIsOpen(false);
};
Comment on lines +428 to +430
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こっちも同じ理由で201行とかに移動お願いします


return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={closeModal}>
<div className='w-full'>
<div className='ml-auto w-fit'>
<CloseButton
Expand Down
2 changes: 1 addition & 1 deletion view/next-project/src/components/sponsors/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const SponsorDeleteModal: FC<ModalProps> = (props) => {
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={() => props.setShowModal(false)}>
<div className='w-full'>
<div className='ml-auto w-fit'>
<CloseButton onClick={() => props.setShowModal(false)} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここも同じ処理をしているので関数にまとめてもらっていいですか？

const closeModal = () => {
    props.setIsOpen(false);
  };

Expand Down
2 changes: 1 addition & 1 deletion view/next-project/src/components/sponsors/SponsorAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function SponsorAddModal() {
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={closeModal}>
<div className='w-full'>
<div className='ml-auto mr-5 w-fit'>
<CloseButton onClick={closeModal} />
Expand Down
6 changes: 5 additions & 1 deletion view/next-project/src/components/sponsors/SponsorEditModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,12 @@ export default function SponsorEditModal(props: Props) {

const [isChecked, setIsChecked] = useState<boolean>(true);

const closeModal = () => {
props.setIsOpen(false);
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={closeModal}>
<div className='w-full'>
<div className='ml-auto mr-5 w-fit'>
<CloseButton onClick={() => props.setIsOpen(false)} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

46行目も処理同じなのでonClick={closeModal}にしてください！

Expand Down
2 changes: 1 addition & 1 deletion view/next-project/src/components/sponsorstyles/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const SponsorStyleDeleteModal: FC<ModalProps> = (props) => {
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={() => props.setShowModal(false)}>
<div className='w-full'>
<div className='ml-auto w-fit'>
<CloseButton onClick={() => props.setShowModal(false)} />
Comment on lines +27 to 30
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここもどこかでcloseModal関数を定義して、まとめてもらっていいですか？

const closeModal = () => {
    props.setIsOpen(false);
  };

Expand Down
6 changes: 5 additions & 1 deletion view/next-project/src/components/sponsorstyles/EditModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,12 @@ export default function EditModal(props: ModalProps) {
</div>
);

const closeModal = () => {
props.setIsOpen(false);
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={closeModal}>
<div className='w-full'>
<div className='ml-auto w-fit'>
<CloseButton
Expand Down
6 changes: 5 additions & 1 deletion view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,12 @@ export default function SponsorAddModal(props: ModalProps) {
router.reload();
};

const closeModal = () => {
props.setIsOpen(false);
};

return (
<Modal className='md:w-1/2'>
<Modal className='md:w-1/2' onClick={closeModal}>
<div className='w-full'>
<div className='ml-auto mr-5 w-fit'>
<CloseButton onClick={() => props.setIsOpen(false)} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<CloseButton onClick={() => props.setIsOpen(false)} />
<CloseButton onClick={closeModal}>

Expand Down