Fix close modal with escape keydown and cleanup import react (#218)

* React formatting * Coherence type for input * Fix close modal with escape key and cleanup import react * fix label * add id for label and try delete import react in ssr.jsx * fix React import and refactor Modal with native Portal in headlessui * fix space * tiny fix
laravel · Nov 28, 2022 · 0c047d5 · 0c047d5
1 parent 7f69e51
commit 0c047d5
Show file tree

Hide file tree

Showing 28 changed files with 37 additions and 69 deletions.
diff --git a/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx b/stubs/inertia-react/resources/js/Components/ApplicationLogo.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function ApplicationLogo({ className }) {
     return (
         <svg className={className} viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">

diff --git a/stubs/inertia-react/resources/js/Components/Checkbox.jsx b/stubs/inertia-react/resources/js/Components/Checkbox.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Checkbox({ name, value, handleChange }) {
     return (
         <input

diff --git a/stubs/inertia-react/resources/js/Components/DangerButton.jsx b/stubs/inertia-react/resources/js/Components/DangerButton.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function DangerButton({ type = 'submit', className = '', processing, children, onClick }) {
     return (
         <button

diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.jsx b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useContext, Fragment } from 'react';
+import { useState, createContext, useContext, Fragment } from 'react';
 import { Link } from '@inertiajs/inertia-react';
 import { Transition } from '@headlessui/react';
 
-const DropDownContext = React.createContext();
+const DropDownContext = createContext();
 
 const Dropdown = ({ children }) => {
     const [open, setOpen] = useState(false);

diff --git a/stubs/inertia-react/resources/js/Components/InputLabel.jsx b/stubs/inertia-react/resources/js/Components/InputLabel.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function InputLabel({ forInput, value, className, children }) {
     return (
         <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ` + className}>

diff --git a/stubs/inertia-react/resources/js/Components/Modal.jsx b/stubs/inertia-react/resources/js/Components/Modal.jsx
@@ -1,32 +1,13 @@
-import React, { useEffect, Fragment } from 'react';
-import ReactDOM from 'react-dom';
-import { Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
 
 export default function Modal({ children, show = false, maxWidth = '2xl', closeable = true, onClose = () => {} }) {
-    useEffect(() => {
-        document.body.style.overflow = show ? 'hidden' : null;
-    }, [show]);
-
     const close = () => {
         if (closeable) {
             onClose();
         }
     };
 
-    const closeOnEscape = (e) => {
-        if (e.key === 'Escape' && props.show) {
-            close();
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener('keydown', closeOnEscape);
-        return () => {
-            document.removeEventListener('keydown', closeOnEscape);
-            document.body.style.overflow = null;
-        };
-    }, []);
-
     const maxWidthClass = {
         sm: 'sm:max-w-sm',
         md: 'sm:max-w-md',
@@ -35,11 +16,14 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
         '2xl': 'sm:max-w-2xl',
     }[maxWidth];
 
-    const modalRoot = document.getElementById('modal-root');
-
-    return ReactDOM.createPortal(
-        <Transition show={show} leave="duration-200">
-            <div className="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50">
+    return (
+        <Transition show={show} as={Fragment} leave="duration-200">
+            <Dialog
+                as="div"
+                id="modal"
+                className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
+                onClose={close}
+            >
                 <Transition.Child
                     as={Fragment}
                     enter="ease-out duration-300"
@@ -49,9 +33,7 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
                 >
-                    <div className="fixed inset-0 transform transition-all" onClick={close}>
-                        <div className="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
-                    </div>
+                    <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
                 </Transition.Child>
 
                 <Transition.Child
@@ -63,14 +45,13 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
                     leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                     leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 >
-                    <div
+                    <Dialog.Panel
                         className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
                     >
                         {children}
-                    </div>
+                    </Dialog.Panel>
                 </Transition.Child>
-            </div>
-        </Transition>,
-        modalRoot
+            </Dialog>
+        </Transition>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Components/NavLink.jsx b/stubs/inertia-react/resources/js/Components/NavLink.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from '@inertiajs/inertia-react';
 
 export default function NavLink({ href, active, children }) {

diff --git a/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx b/stubs/inertia-react/resources/js/Components/PrimaryButton.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function PrimaryButton({ type = 'submit', className = '', processing, children, onClick }) {
     return (
         <button

diff --git a/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from '@inertiajs/inertia-react';
 
 export default function ResponsiveNavLink({ method = 'get', as = 'a', href, active = false, children }) {

diff --git a/stubs/inertia-react/resources/js/Components/SecondaryButton.jsx b/stubs/inertia-react/resources/js/Components/SecondaryButton.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function SecondaryButton({ type = 'button', className = '', processing, children, onClick }) {
     return (
         <button

diff --git a/stubs/inertia-react/resources/js/Components/TextInput.jsx b/stubs/inertia-react/resources/js/Components/TextInput.jsx
@@ -1,7 +1,7 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 
 export default forwardRef(function TextInput(
-    { type = 'text', name, value, className, autoComplete, required, isFocused, handleChange },
+    { type = 'text', name, id, value, className, autoComplete, required, isFocused, handleChange },
     ref
 ) {
     const input = ref ? ref : useRef();
@@ -17,6 +17,7 @@ export default forwardRef(function TextInput(
             <input
                 type={type}
                 name={name}
+                id={id}
                 value={value}
                 className={
                     `border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ` +

diff --git a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';

diff --git a/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx b/stubs/inertia-react/resources/js/Layouts/GuestLayout.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ApplicationLogo from '@/Components/ApplicationLogo';
 import { Link } from '@inertiajs/inertia-react';
 

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -40,6 +40,7 @@ export default function ConfirmPassword() {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import PrimaryButton from '@/Components/PrimaryButton';
@@ -33,6 +32,7 @@ export default function ForgotPassword({ status }) {
 
             <form onSubmit={submit}>
                 <TextInput
+                    id="password"
                     type="email"
                     name="email"
                     value={data.email}

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import Checkbox from '@/Components/Checkbox';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
@@ -41,6 +41,7 @@ export default function Login({ status, canResetPassword }) {
                     <InputLabel forInput="email" value="Email" />
 
                     <TextInput
+                        id="email"
                         type="email"
                         name="email"
                         value={data.email}
@@ -57,6 +58,7 @@ export default function Login({ status, canResetPassword }) {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -39,6 +39,7 @@ export default function Register() {
                     <InputLabel forInput="name" value="Name" />
 
                     <TextInput
+                        id="name"
                         name="name"
                         value={data.name}
                         className="mt-1 block w-full"
@@ -55,6 +56,7 @@ export default function Register() {
                     <InputLabel forInput="email" value="Email" />
 
                     <TextInput
+                        id="email"
                         type="email"
                         name="email"
                         value={data.email}
@@ -71,6 +73,7 @@ export default function Register() {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}
@@ -87,6 +90,7 @@ export default function Register() {
                     <InputLabel forInput="password_confirmation" value="Confirm Password" />
 
                     <TextInput
+                        id="password_confirmation"
                         type="password"
                         name="password_confirmation"
                         value={data.password_confirmation}

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
@@ -39,6 +39,7 @@ export default function ResetPassword({ token, email }) {
                     <InputLabel forInput="email" value="Email" />
 
                     <TextInput
+                        id="email"
                         type="email"
                         name="email"
                         value={data.email}
@@ -54,6 +55,7 @@ export default function ResetPassword({ token, email }) {
                     <InputLabel forInput="password" value="Password" />
 
                     <TextInput
+                        id="password"
                         type="password"
                         name="password"
                         value={data.password}

diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import GuestLayout from '@/Layouts/GuestLayout';
 import PrimaryButton from '@/Components/PrimaryButton';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';

diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head } from '@inertiajs/inertia-react';
 

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import DeleteUserForm from './Partials/DeleteUserForm';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm';

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import DangerButton from '@/Components/DangerButton';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import PrimaryButton from '@/Components/PrimaryButton';

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import InputError from '@/Components/InputError';
 import InputLabel from '@/Components/InputLabel';
 import PrimaryButton from '@/Components/PrimaryButton';

diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.jsx b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link, Head } from '@inertiajs/inertia-react';
 
 export default function Welcome(props) {

diff --git a/stubs/inertia-react/resources/js/app.jsx b/stubs/inertia-react/resources/js/app.jsx
@@ -1,7 +1,6 @@
 import './bootstrap';
 import '../css/app.css';
 
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import { InertiaProgress } from '@inertiajs/progress';

diff --git a/stubs/inertia-react/resources/js/ssr.jsx b/stubs/inertia-react/resources/js/ssr.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import createServer from '@inertiajs/server';

diff --git a/stubs/inertia-react/resources/views/app.blade.php b/stubs/inertia-react/resources/views/app.blade.php
@@ -17,6 +17,5 @@
     </head>
     <body class="font-sans antialiased">
         @inertia
-        <div id="modal-root"></div>
     </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,5 @@ @@
         </head>
         <body class="font-sans antialiased">
             @inertia
-            <div id="modal-root"></div>
         </body>
     </html>