131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname, useSearchParams } from "next/navigation"
|
|
import { useRef } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Lang, languages } from "@/constants/languages"
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
|
|
import useClickOutside from "@/hooks/useClickOutside"
|
|
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import Caption from "../TempDesignSystem/Text/Caption"
|
|
import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
|
|
import LanguageSwitcherContent from "./LanguageSwitcherContent"
|
|
import { languageSwitcherVariants } from "./variants"
|
|
|
|
import styles from "./languageSwitcher.module.css"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
import {
|
|
type LanguageSwitcherProps,
|
|
LanguageSwitcherTypesEnum,
|
|
} from "@/types/components/languageSwitcher/languageSwitcher"
|
|
import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
|
|
|
|
export default function LanguageSwitcher({
|
|
urls,
|
|
type,
|
|
}: LanguageSwitcherProps) {
|
|
const intl = useIntl()
|
|
const currentLanguage = useLang()
|
|
const {
|
|
toggleDropdown,
|
|
isFooterLanguageSwitcherOpen,
|
|
isHeaderLanguageSwitcherMobileOpen,
|
|
isHeaderLanguageSwitcherOpen,
|
|
} = useDropdownStore()
|
|
const searchParams = useSearchParams()
|
|
const pathname = usePathname()
|
|
const queryParams = new URLSearchParams(searchParams.toString())
|
|
|
|
const languageSwitcherRef = useRef<HTMLDivElement>(null)
|
|
const isFooter = type === LanguageSwitcherTypesEnum.Footer
|
|
const isHeader = !isFooter
|
|
const globeIconSize = type === "desktopHeader" ? 16 : 20
|
|
|
|
const currentUrl = `${pathname}?${queryParams.toString()}`
|
|
|
|
const fullUrls = Object.entries(urls).reduce((acc, [lang, { url }]) => {
|
|
const newUrl = currentUrl.replace(/^\/[a-z]{2}\//, url)
|
|
acc[lang as Lang] = { url: newUrl }
|
|
return acc
|
|
}, {} as LanguageSwitcherData)
|
|
|
|
const position = isFooter ? "footer" : "header"
|
|
|
|
const dropdownType = {
|
|
footer: DropdownTypeEnum.FooterLanguageSwitcher,
|
|
desktopHeader: DropdownTypeEnum.HeaderLanguageSwitcher,
|
|
mobileHeader: DropdownTypeEnum.HeaderLanguageSwitcherMobile,
|
|
}[type]
|
|
|
|
const isLanguageSwitcherOpen =
|
|
(isFooter && isFooterLanguageSwitcherOpen) ||
|
|
(isHeader &&
|
|
(isHeaderLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen))
|
|
|
|
useHandleKeyUp((event: KeyboardEvent) => {
|
|
if (event.key === "Escape" && isLanguageSwitcherOpen) {
|
|
toggleDropdown(dropdownType)
|
|
}
|
|
})
|
|
|
|
function handleClick() {
|
|
const scrollPosition = window.scrollY
|
|
toggleDropdown(dropdownType)
|
|
|
|
requestAnimationFrame(() => {
|
|
window.scrollTo(0, scrollPosition)
|
|
})
|
|
}
|
|
useClickOutside(
|
|
languageSwitcherRef,
|
|
isLanguageSwitcherOpen && !isHeaderLanguageSwitcherMobileOpen,
|
|
() => toggleDropdown(dropdownType)
|
|
)
|
|
|
|
const classNames = languageSwitcherVariants({ position })
|
|
|
|
return (
|
|
<div className={classNames} ref={languageSwitcherRef}>
|
|
<button
|
|
type="button"
|
|
className={styles.button}
|
|
aria-label={intl.formatMessage({
|
|
id: isLanguageSwitcherOpen
|
|
? "Close language menu"
|
|
: "Open language menu",
|
|
})}
|
|
onClick={handleClick}
|
|
>
|
|
<GlobeIcon width={globeIconSize} height={globeIconSize} />
|
|
<Caption className={styles.buttonText} type="regular" asChild>
|
|
<span>{languages[currentLanguage]}</span>
|
|
</Caption>
|
|
<ChevronDownSmallIcon
|
|
className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</button>
|
|
|
|
<div
|
|
className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
|
|
>
|
|
{isLanguageSwitcherOpen ? (
|
|
<LanguageSwitcherContainer type={type}>
|
|
<LanguageSwitcherContent
|
|
urls={fullUrls}
|
|
onLanguageSwitch={() => toggleDropdown(dropdownType)}
|
|
/>
|
|
</LanguageSwitcherContainer>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|