import {ENTER_IN, ENTER_OUT} from '../animations'; import locales from '../i18n/locales.json'; import {ArrowUpIcon} from '@primer/octicons-react'; import classnames from 'classnames'; import {memo, useRef, useCallback} from 'react'; import {useTranslation} from 'react-i18next'; import {useTransition, animated} from 'react-spring'; import {useClickAway} from 'react-use'; function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) { const {t, i18n} = useTranslation(); const currentLanguage = Object.keys(locales).includes(i18n?.language) ? i18n?.language : i18n?.options?.fallbackLng[0]; const transitions = useTransition(showLanguageSwitcher, { from: ENTER_OUT, enter: ENTER_IN, leave: ENTER_OUT, config: { mass: 1, tension: 100, friction: 15, }, }); const languageSwitcherRef = useRef(); useClickAway(languageSwitcherRef, (e) => { if (e.target.className !== 'navbar-left') { setShowLanguageSwitcher(false); } }); const switchLanguage = useCallback( (languageKey) => { if (i18n) i18n.changeLanguage(languageKey); }, [i18n] ); return transitions( (style, item) => item && ( <animated.div className="LanguageSwitcher" ref={languageSwitcherRef} {...{style}} > <h3>{t('We speak the following languages')}</h3> <div className="languages"> {Object.keys(locales).map((languageKey) => ( <div key={languageKey} className={classnames('language', { 'is-highlighted': currentLanguage === languageKey, })} onClick={switchLanguage.bind(this, languageKey)} > <span>{locales[languageKey]}</span> </div> ))} </div> <div className="close-button" onClick={setShowLanguageSwitcher.bind(this, false)} > <ArrowUpIcon size={16} /> </div> </animated.div> ) ); } export default memo(LanguageSwitcher);