#

vincentlu

2025-02-10 a36a12c2bc4a5348c7eb7b890608822c448b62c4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { useState } from 'react';
import { useStore, useTranslate, ToggleThemeButton } from 'react-admin';
import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
import ColorLensIcon from '@mui/icons-material/ColorLens';
import { DEFAULT_THEME_NAME } from '@/config/setting';
 
import { themes } from './themes';
 
export const ThemeSwapper = () => {
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
 
    const [themeName, setThemeName] = useStore('themeName', DEFAULT_THEME_NAME);
    const handleChange = (_, index) => {
        const newTheme = themes[index];
        setThemeName(newTheme.name);
        setAnchorEl(null);
    };
    const currentTheme = themes.find(theme => theme.name === themeName);
 
    const translate = useTranslate();
    const toggleThemeTitle = translate('pos.action.change_theme', {
        _: 'Change Theme',
    });
 
    return (
        <>
            <Tooltip title={toggleThemeTitle} enterDelay={300}>
                <IconButton
                    onClick={handleClick}
                    color="inherit"
                    aria-label={toggleThemeTitle}
                >
                    <ColorLensIcon />
                </IconButton>
            </Tooltip>
            {currentTheme?.dark ? <ToggleThemeButton /> : null}
            <Menu open={open} onClose={handleClose} anchorEl={anchorEl}>
                {themes.map((theme, index) => (
                    <MenuItem
                        onClick={event => handleChange(event, index)}
                        value={theme.name}
                        key={theme.name}
                        selected={theme.name === themeName}
                    >
                        {ucFirst(theme.name)}
                    </MenuItem>
                ))}
            </Menu>
        </>
    );
};
 
const ucFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);