Adding Click Outside

components/common/I18nWidget/I18nWidget.tsx

@@ -1,9 +1,10 @@
 import cn from 'classnames'
 import Link from 'next/link'
-import { FC, useState } from 'react'
+import { useRef, FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
+import ClickOutside from '@lib/click-outside'
 interface LOCALE_DATA {
   name: string
   img: {
@@ -37,12 +38,18 @@ const I18nWidget: FC = () => {
     defaultLocale = 'en-US',
     asPath: currentPath,
   } = useRouter()
+
   const options = locales?.filter((val) => val !== locale)
   const currentLocale = locale || defaultLocale
+  const ref = useRef<HTMLDivElement | null>(null)
 
   return (
+    <ClickOutside active={display} onClick={() => setDisplay(false)} ref={ref}>
       <nav className={s.root}>
-      <div className="flex items-center relative">
+        <div
+          className="flex items-center relative"
+          onClick={() => setDisplay(!display)}
+        >
           <button className={s.button} aria-label="Language selector">
             <img
               className="block mr-2 w-5"
@@ -50,10 +57,7 @@ const I18nWidget: FC = () => {
               alt={LOCALES_MAP[currentLocale].img.alt}
             />
             {options && (
-            <span
+              <span className="cursor-pointer">
-              className="cursor-pointer"
-              onClick={() => setDisplay(!display)}
-            >
                 <ChevronUp className={cn({ [s.icon]: display })} />
               </span>
             )}
@@ -75,7 +79,10 @@ const I18nWidget: FC = () => {
                 {options.map((locale) => (
                   <li key={locale}>
                     <Link href={currentPath} locale={locale}>
-                    <a className={cn(s.item)} onClick={() => setDisplay(false)}>
+                      <a
+                        className={cn(s.item)}
+                        onClick={() => setDisplay(false)}
+                      >
                         {LOCALES_MAP[locale].name}
                       </a>
                     </Link>
@@ -86,6 +93,7 @@ const I18nWidget: FC = () => {
           ) : null}
         </div>
       </nav>
+    </ClickOutside>
   )
 }
 

lib/click-outside/click-outside.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, useEffect, Ref, MouseEvent } from 'react'
+import hasParent from './has-parent'
+
+interface ClickOutsideProps {
+  active: boolean
+  onClick: (e?: MouseEvent) => void
+  children: any
+}
+
+const ClickOutside = (
+  { active = true, onClick, children }: ClickOutsideProps,
+  ref: Ref<HTMLDivElement> | null | any = {}
+) => {
+  console.log('--------', active, '-----------')
+  const innerRef = ref?.current
+
+  const handleClick = (event: any) => {
+    console.log(innerRef, event.target)
+    if (!hasParent(event.target, innerRef)) {
+      if (typeof onClick === 'function') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        onClick(event)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (active) {
+      document.addEventListener('mousedown', handleClick)
+      document.addEventListener('touchstart', handleClick)
+    }
+
+    return () => {
+      if (active) {
+        document.removeEventListener('mousedown', handleClick)
+        document.removeEventListener('touchstart', handleClick)
+      }
+    }
+  })
+
+  return React.cloneElement(children, { ref })
+}
+
+export default forwardRef(ClickOutside)

lib/click-outside/has-parent.js

@@ -0,0 +1,5 @@
+import isInDOM from './is-in-dom'
+
+export default function hasParent(element, root) {
+  return root && root.contains(element) && isInDOM(element)
+}

lib/click-outside/index.ts

@@ -0,0 +1 @@
+export { default } from './click-outside'

lib/click-outside/is-in-dom.js

@@ -0,0 +1,3 @@
+export default function isInDom(obj) {
+  return Boolean(obj.closest('body'))
+}