Removing HeadlessUI and React-Aria

components/ui/Modal/Modal.tsx

@@ -1,10 +1,13 @@
-import { FC, useRef } from 'react'
-import s from './Modal.module.css'
-import { FocusScope } from '@react-aria/focus'
-import { Transition } from '@headlessui/react'
-import { Cross } from '@components/icons'
-import { useOverlay, OverlayContainer } from '@react-aria/overlays'
+import { FC, useRef, useEffect } from 'react'
 import Portal from '@reach/portal'
+import s from './Modal.module.css'
+import { Cross } from '@components/icons'
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+  clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
+
 interface Props {
   className?: string
   children?: any
@@ -12,48 +15,41 @@ interface Props {
   onClose: () => void
 }
 
-const Modal: FC<Props> = ({ children, open = false, onClose, ...props }) => {
-  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  let { overlayProps } = useOverlay(
-    {
-      isOpen: open,
-      isDismissable: false,
-      onClose: onClose,
-      ...props,
-    },
-    ref
-  )
+const Modal: FC<Props> = ({ children, open, onClose }) => {
+  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+
+  useEffect(() => {
+    if (ref.current) {
+      if (open) {
+        disableBodyScroll(ref.current)
+      } else {
+        enableBodyScroll(ref.current)
+      }
+    }
+    return () => {
+      clearAllBodyScrollLocks()
+    }
+  }, [open])
 
   return (
-    <Transition show={open}>
-      <OverlayContainer>
-        <FocusScope contain restoreFocus autoFocus>
-          <div className={s.root}>
-            <Transition.Child
-              enter="transition-opacity ease-linear duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="transition-opacity ease-linear duration-300"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className={s.modal} {...overlayProps} ref={ref}>
-                <div className="h-7 flex items-center justify-end w-full">
-                  <button
-                    onClick={() => onClose()}
-                    aria-label="Close panel"
-                    className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
-                  >
-                    <Cross className="h-6 w-6" />
-                  </button>
-                </div>
-                {children}
-              </div>
-            </Transition.Child>
+    <Portal>
+      {open ? (
+        <div className={s.root} ref={ref}>
+          <div className={s.modal}>
+            <div className="h-7 flex items-center justify-end w-full">
+              <button
+                onClick={() => onClose()}
+                aria-label="Close panel"
+                className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
+              >
+                <Cross className="h-6 w-6" />
+              </button>
+            </div>
+            {children}
           </div>
-        </FocusScope>
-      </OverlayContainer>
-    </Transition>
+        </div>
+      ) : null}
+    </Portal>
   )
 }