fix(SW-184): fixed implementation of useTrapFocus

2024-08-26 08:09:32 +02:00
parent bdec054ecd
commit a02dcd3428
13 changed files with 324 additions and 79 deletions
--- a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
+++ b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Lang, languages } from "@/constants/languages"
+import useDropdownStore from "@/stores/main-menu"
+
+import { CheckIcon, ChevronLeftIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import useLang from "@/hooks/useLang"
+import { useTrapFocus } from "@/hooks/useTrapFocus"
+
+import styles from "./languageSwitcher.module.css"
+
+import { LanguageSwitcherProps } from "@/types/components/header/languageSwitcher"
+
+export default function LanguageSwitcherContent({
+  urls,
+  variant,
+}: LanguageSwitcherProps) {
+  const intl = useIntl()
+  const currentLanguage = useLang()
+  const { isLanguageSwitcherOpen, toggleLanguageSwitcher } = useDropdownStore()
+  const languageSwitcherRef = useTrapFocus()
+  const urlKeys = Object.keys(urls) as Lang[]
+
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isLanguageSwitcherOpen) {
+      toggleLanguageSwitcher()
+    }
+  })
+
+  return (
+    <div className={styles.content} ref={languageSwitcherRef}>
+      {variant === "mobileHeader" ? (
+        <div className={styles.backWrapper}>
+          <button
+            type="button"
+            className={styles.backButton}
+            onClick={toggleLanguageSwitcher}
+          >
+            <ChevronLeftIcon color="red" />
+            <Subtitle type="one">Main Menu</Subtitle>
+          </button>
+        </div>
+      ) : null}
+
+      <div className={styles.languageWrapper}>
+        <Subtitle className={styles.subtitle} type="two">
+          {intl.formatMessage({ id: "Select your language" })}
+        </Subtitle>
+        <ul className={styles.list}>
+          {urlKeys.map((key) => {
+            const url = urls[key]?.url
+            const isActive = currentLanguage === key
+            if (url) {
+              return (
+                <li key={key}>
+                  <Link
+                    className={`${styles.link} ${isActive ? styles.active : ""}`}
+                    color="burgundy"
+                    href={url}
+                  >
+                    {languages[key]}
+                    {isActive ? <CheckIcon color="burgundy" /> : null}
+                  </Link>
+                </li>
+              )
+            }
+          })}
+        </ul>
+      </div>
+    </div>
+  )
+}