@stakefish/ui/components/LanguageDropdown.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { styled, useTheme } from '@mui/material/styles';
import MuiClickAwayListener from '@mui/material/ClickAwayListener';
import useMediaQuery from '@mui/material/useMediaQuery';
import MuiPopper from '@mui/material/Popper';
import MuiFade from '@mui/material/Fade';
import MuiBox from '@mui/material/Box';
import Button from './Button.js';
import Icon from './Icon.js';
import boxShadow from '../theme/boxShadow.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';

var textStyles = function (theme) { return ({
    languagePrimary: {
        fontWeight: 500,
        fontSize: theme.typography.fontSizeS,
        lineHeight: theme.typography.lineHeightM
    },
    languageSecondary: {
        fontSize: theme.typography.fontSizeXs1,
        lineHeight: theme.typography.lineHeightS,
        color: theme.palette.text.secondary
    }
}); };
var StyledLanguageButton = styled(Button)(function (_a) {
    var theme = _a.theme;
    return ({
        "&.MuiButton-root": {
            fontWeight: theme.typography.fontWeightNormal
        }
    });
});
var StyledWebMenu = styled(MuiBox)(function (_a) {
    var theme = _a.theme;
    return ({
        backgroundColor: theme.palette.gray.white,
        borderRadius: "".concat(theme.borders.radius.md, "px"),
        boxShadow: boxShadow.lg,
        padding: theme.spacing(2),
        justifyContent: "space-between",
        display: "grid",
        gridTemplateColumns: "repeat(2, auto)",
        gap: "1rem",
        zIndex: 10
    });
});
var StyledWebMenuItem = styled(Button)(function (_a) {
    var theme = _a.theme;
    var _b = textStyles(theme), languagePrimary = _b.languagePrimary, languageSecondary = _b.languageSecondary;
    return {
        "&": {
            backgroundColor: "".concat(theme.palette.gray.white, " !important"),
            borderRadius: "".concat(theme.borders.radius.md, "px"),
            textAlign: "center",
            margin: theme.spacing(0),
            padding: theme.spacing(1, 3),
            display: "block",
            flex: "1 0 calc(50% - 32px)",
            minWidth: "180px",
            boxShadow: "none !important",
            transform: "none !important",
            "&:active, &:hover, &:focus": {
                backgroundColor: "".concat(theme.palette.primary.main, " !important")
            },
            "& .primaryLanguage": __assign({ display: "block" }, languagePrimary),
            "& .secondaryLanguage": __assign(__assign({ display: "block" }, languageSecondary), { marginBlockStart: theme.spacing(-1) })
        },
        "&.StyledWebMenu-selected": {
            backgroundColor: "".concat(theme.palette.gray[900], " !important"),
            color: "".concat(theme.palette.gray.white, " !important"),
            textAlign: "center",
            "&:active, &:hover, &:focus": {
                color: theme.palette.gray.white
            },
            "& .secondaryLanguage": {
                display: "none"
            }
        }
    };
});
var StyledMobileMenu = styled(MuiBox)(function (_a) {
    var theme = _a.theme;
    return ({
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        overflow: "auto",
        backgroundColor: theme.palette.gray[900],
        paddingTop: theme.spacing(2),
        zIndex: 1000,
        "&.open": {
            display: "block"
        },
        "&.closed": {
            display: "none"
        },
        "& .StyledMobileMenu-menuHeader": {
            position: "fixed",
            zIndex: 1,
            backgroundColor: theme.palette.gray[900],
            top: 0,
            left: 0,
            right: 0,
            padding: theme.spacing(1),
            "& .MuiButton-root": {
                padding: theme.spacing(1.5)
            }
        },
        "& .StyledMobileMenu-menuList": {
            listStyle: "none",
            padding: theme.spacing(2, 0, 0, 0),
            "& > li": {
                padding: theme.spacing(0, 1)
            }
        }
    });
});
var StyledMobileMenuItem = styled(Button)(function (_a) {
    var theme = _a.theme;
    var _b = textStyles(theme), languagePrimary = _b.languagePrimary, languageSecondary = _b.languageSecondary;
    return {
        "&": {
            display: "block",
            textAlign: "left",
            padding: theme.spacing(1, 2),
            boxShadow: "none !important",
            transform: "none !important",
            "& .primaryLanguage": __assign({}, languagePrimary),
            "& .secondaryLanguage": __assign(__assign({}, languageSecondary), { marginBlockStart: theme.spacing(1), marginInlineStart: theme.spacing(1) })
        }
    };
});
var LanguageDropdown = function (_a) {
    var languages = _a.languages, onLanguageChange = _a.onLanguageChange, value = _a.value;
    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
    var theme = useTheme();
    var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
    var handleButtonClick = function (event) {
        setAnchorEl(!isOpen ? event.currentTarget : null);
        setIsOpen(!isOpen);
    };
    var handleMenuClose = function () {
        if (anchorEl)
            anchorEl.focus();
        setIsOpen(false);
        setAnchorEl(null);
    };
    var handleMenuClick = function (language) {
        onLanguageChange(language);
        setIsOpen(false);
        setAnchorEl(null);
    };
    var renderMenu = function () {
        if (isMobile) {
            return (jsxs(StyledMobileMenu, __assign({ "aria-haspopup": "true", className: isOpen ? "opened" : "closed" }, { children: [jsx("div", __assign({ className: "StyledMobileMenu-menuHeader" }, { children: jsx(Button, __assign({ color: "secondary", variant: "text", size: "sm", onClick: handleMenuClose }, { children: jsx(Icon, { iconKey: "close", size: "sm" }, void 0) }), void 0) }), void 0), jsx("ul", __assign({ className: "StyledMobileMenu-menuList" }, { children: languages.map(function (_a, i) {
                            var path = _a.path, locale = _a.locale, translatedLocale = _a.translatedLocale;
                            var isSelected = path === value.path;
                            return (jsx("li", { children: jsxs(StyledMobileMenuItem, __assign({ color: isSelected ? "primary" : "secondary", endIcon: isSelected ? jsx(Icon, { iconKey: "successCircle" }, void 0) : undefined, onClick: function () { return handleMenuClick({ path: path, locale: locale, translatedLocale: translatedLocale }); }, fullWidth: true }, { children: [jsx("span", __assign({ className: "primaryLanguage" }, { children: locale }), void 0), jsx("span", __assign({ className: "secondaryLanguage" }, { children: translatedLocale }), void 0)] }), void 0) }, "".concat(path, "-").concat(i)));
                        }) }), void 0)] }), void 0));
        }
        return (jsx(MuiClickAwayListener, __assign({ onClickAway: function (event) {
                setIsOpen(!!(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.contains(event.target)));
            } }, { children: jsx(MuiPopper, { open: isOpen, anchorEl: anchorEl, placement: "bottom-start", children: function () { return (jsx(MuiFade, __assign({ in: isOpen }, { children: jsx("div", { children: jsx(StyledWebMenu, { children: languages.map(function (_a, i) {
                                var path = _a.path, locale = _a.locale, translatedLocale = _a.translatedLocale;
                                return (jsxs(StyledWebMenuItem, __assign({ className: path === value.path ? "StyledWebMenu-selected" : "", onClick: function () { return handleMenuClick({ path: path, locale: locale, translatedLocale: translatedLocale }); } }, { children: [jsx("span", __assign({ className: "primaryLanguage" }, { children: locale }), void 0), jsx("span", __assign({ className: "secondaryLanguage" }, { children: translatedLocale }), void 0)] }), "".concat(path, "-").concat(i)));
                            }) }, void 0) }, void 0) }), void 0)); } }, void 0) }), void 0));
    };
    return (jsxs("div", { children: [jsx(StyledLanguageButton, __assign({ variant: "text", color: "secondary", size: "md", startIcon: jsx(Icon, { iconKey: "globe" }, void 0), onClick: handleButtonClick }, { children: value.locale }), void 0), renderMenu()] }, void 0));
};

export { LanguageDropdown as default };