fixed dropdown

Author: priscilawebdev

i18n/translations/de-DE.json

@@ -135,5 +135,13 @@
         "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
         "theme-context-not-correct-used": "Der Theme-Kontext wurde nicht korrekt verwendet",
         "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
-    }
+    },
+    "lng": {
+        "english": "Englisch",
+        "portuguese": "Portugiesisch",
+        "spanish": "Spanisch",
+        "german": "Deutsch",
+        "chinese": "Chinesisch"
+    },
+    "help-to-translate": "Hilfe beim Übersetzen"
 }

i18n/translations/es-ES.json

@@ -135,5 +135,13 @@
         "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
         "theme-context-not-correct-used": "El contexto del tema no fue correctamente usado",
         "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
-    }
+    },
+    "lng": {
+        "english": "Inglés",
+        "portuguese": "Portugués",
+        "spanish": "Español",
+        "german": "Alemán",
+        "chinese": "Chino"
+    },
+    "help-to-translate": "Ayuda a traducir"
 }

i18n/translations/pt-BR.json

@@ -114,7 +114,7 @@
         }
     },
     "footer": {
-        "powered-by": "Distribuído por",
+        "powered-by": "Feito por",
         "made-with-love-on": "Feito com amor <0>♥</0> no(a)"
     },
     "button": {
@@ -135,5 +135,13 @@
         "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
         "theme-context-not-correct-used": "O contexto do tema não foi usado corretamente",
         "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
-    }
+    },
+    "lng": {
+        "english": "Inglês",
+        "portuguese": "Português",
+        "spanish": "Espanhol",
+        "german": "Alemão",
+        "chinese": "Chinês"
+    },
+    "help-to-translate": "Ajude a traduzir"
 }

i18n/translations/zh-CN.json

@@ -134,5 +134,13 @@
         },
         "app-context-not-correct-used": "The app context was not correct used",
         "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
-    }
+    },
+    "lng": {
+        "english": "英語",
+        "portuguese": "葡萄牙語",
+        "spanish": "西班牙文",
+        "german": "德語",
+        "chinese": "中文"
+    },
+    "help-to-translate": "幫助翻譯"
 }

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -1,35 +1,65 @@
 import React, { MouseEvent } from 'react';
 import LanguageIcon from '@material-ui/icons/Language';
-import { useTranslation } from 'react-i18next';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import i18n from 'i18next';
+import i18next, { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Popper from '@material-ui/core/Popper';
+import MenuList from '@material-ui/core/MenuList';
 import styled from '@emotion/styled';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
 
+import Paper from '../../muiComponents/Paper';
+import MenuItem from '../../muiComponents/MenuItem';
 import Button from '../../muiComponents/Button';
 import Tooltip from '../../muiComponents/Tooltip';
 import Divider from '../../muiComponents/Divider';
 import Box from '../../muiComponents/Box';
-import Link from '../Link';
 import { Theme } from '../../design-tokens/theme';
+import Link from '../Link';
+import Icon from '../Icon';
 
-import LanguageSwitchMenuItemContent from './LanguageSwitchMenuItemContent';
+const getTranslatedCurrentLanguage = (
+  t: TFunction
+): { [key: string]: { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } } => ({
+  'en-us': {
+    translation: t('lng.english'),
+    icon: 'usa',
+  },
+  'pt-br': {
+    translation: t('lng.portuguese'),
+    icon: 'brazil',
+  },
+  'de-de': {
+    translation: t('lng.german'),
+    icon: 'germany',
+  },
+  'es-es': {
+    translation: t('lng.spanish'),
+    icon: 'spain',
+  },
+  'zh-cn': {
+    translation: t('lng.chinese'),
+    icon: 'china',
+  },
+});
 
 const LanguageSwitch = () => {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef<HTMLButtonElement>(null);
 
-  const languages = i18n.options.resources ? Object.keys(i18n.options.resources) : [];
-  const userLanguage = i18n.language || i18n.options?.fallbackLng?.[0];
+  const languages = i18next.options.resources ? Object.keys(i18next.options.resources) : [];
+  const currentLanguage = i18next.language || i18next.options?.fallbackLng?.[0];
+
+  const { translation: userLanguage } = getTranslatedCurrentLanguage(t)[currentLanguage.toLowerCase()];
 
   const handleToggle = () => {
     setOpen(prevOpen => !prevOpen);
   };
 
-  const handleClose = (event: MouseEvent<HTMLLIElement | HTMLUListElement>) => {
+  const handleClose = (event: MouseEvent<HTMLLIElement | Document | HTMLAnchorElement>) => {
     if (anchorRef.current) {
       if (anchorRef.current.contains(event.currentTarget)) {
         return;
@@ -52,7 +82,7 @@ const LanguageSwitch = () => {
   }, [open]);
 
   const handleSwitchLanguage = (language: string) => (event: MouseEvent<HTMLLIElement>) => {
-    i18n.changeLanguage(language);
+    i18next.changeLanguage(language);
     handleClose(event);
   };
 
@@ -65,23 +95,38 @@ const LanguageSwitch = () => {
           <ExpandMoreIcon fontSize="small" />
         </SwitchButton>
       </Tooltip>
-      <Menu anchorEl={anchorRef.current} onClose={handleClose} open={open}>
-        {languages.map(language => (
-          <MenuItem key={language} onClick={handleSwitchLanguage(language)} selected={userLanguage === language}>
-            <LanguageSwitchMenuItemContent language={language} />
-          </MenuItem>
-        ))}
-        <Box my={1}>
-          <Divider />
-        </Box>
-        <MenuItem
-          component="a"
-          href="https://github.com/verdaccio/ui#translations"
-          onClick={handleClose}
-          target="_blank">
-          {`${t('help-to-translate')}`}
-        </MenuItem>
-      </Menu>
+      <Popper anchorEl={anchorRef.current} disablePortal={true} open={open} role={undefined} transition={true}>
+        {({ TransitionProps }) => (
+          <Grow {...TransitionProps}>
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList>
+                  {languages.map(language => {
+                    const { icon, translation } = getTranslatedCurrentLanguage(t)[language.toLowerCase()];
+                    return (
+                      <StyledMenuItem
+                        key={language}
+                        onClick={handleSwitchLanguage(language)}
+                        selected={userLanguage === translation}>
+                        <Icon name={icon} size="md" />
+                        {translation}
+                      </StyledMenuItem>
+                    );
+                  })}
+                  <Box my={1}>
+                    <Divider />
+                  </Box>
+                  <MenuItem button={true}>
+                    <StyledLink external={true} onClick={handleClose} to="https://github.com/verdaccio/ui#translations">
+                      {`${t('help-to-translate')}`}
+                    </StyledLink>
+                  </MenuItem>
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
     </>
   );
 };
@@ -96,7 +141,17 @@ const SwitchButton = withStyles((theme: Theme) => ({
   },
 }))(Button);
 
+const StyledMenuItem = withStyles((theme: Theme) => ({
+  root: {
+    display: 'grid',
+    cursor: 'pointer',
+    gridGap: theme?.spacing(0.5),
+    gridTemplateColumns: '20px 1fr',
+    alignItems: 'center',
+  },
+}))(MenuItem);
+
 const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.white,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.text.primary,
   textDecoration: 'none',
 }));

src/components/LanguageSwitch/LanguageSwitchMenuItemContent.tsx

@@ -5,20 +5,12 @@ import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/
 type HTMLElementTagName = keyof HTMLElementTagNameMap;
 type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
 
-interface Props extends Omit<MenuItemProps, 'component'> {
-  component?: HTMLElementTagName;
-}
-
-const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
+const MenuItem = forwardRef<MenuItemRef, MenuItemProps>(function MenuItem(props, ref) {
   // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return <StyledMaterialUIMenuItem {...props} button={button as any} ref={ref as any} />;
+  // @ts-ignore Type Types of property 'button' are incompatible.
+  return <StyledMaterialUIMenuItem {...props} ref={ref as any} />;
 });
 
-MenuItem.defaultProps = {
-  component: 'li',
-};
-
 export default MenuItem;
 
 const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({

src/muiComponents/MenuItem/MenuItem.tsx

@@ -1,6 +1,6 @@
 import { isObject } from 'util';
 
-import i18n from 'i18next';
+import i18next from 'i18next';
 import { UpLinks } from '@verdaccio/types';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
@@ -93,5 +93,5 @@ export function getRecentReleases(time: Time = {}): Time[] {
 }
 
 export function getAuthorName(authorName: string): string {
-  return authorName.toLowerCase() === 'anonymous' ? i18n.t('author-anonymous') : authorName;
+  return authorName.toLowerCase() === 'anonymous' ? i18next.t('author-anonymous') : authorName;
 }