remove unused
This commit is contained in:
@@ -1,89 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
|
|
||||||
import LightModeIcon from '@mui/icons-material/LightModeRounded';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton';
|
|
||||||
import Menu from '@mui/material/Menu';
|
|
||||||
import MenuItem from '@mui/material/MenuItem';
|
|
||||||
import { useColorScheme } from '@mui/material/styles';
|
|
||||||
|
|
||||||
export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
|
|
||||||
const { mode, systemMode, setMode } = useColorScheme();
|
|
||||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
||||||
const open = Boolean(anchorEl);
|
|
||||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
|
|
||||||
setMode(targetMode);
|
|
||||||
handleClose();
|
|
||||||
};
|
|
||||||
if (!mode) {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
data-screenshot="toggle-mode"
|
|
||||||
sx={(theme) => ({
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
display: 'inline-flex',
|
|
||||||
width: '2.25rem',
|
|
||||||
height: '2.25rem',
|
|
||||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
|
||||||
border: '1px solid',
|
|
||||||
borderColor: (theme.vars || theme).palette.divider,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const resolvedMode = (systemMode || mode) as 'light' | 'dark';
|
|
||||||
const icon = {
|
|
||||||
light: <LightModeIcon />,
|
|
||||||
dark: <DarkModeIcon />,
|
|
||||||
}[resolvedMode];
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<IconButton
|
|
||||||
data-screenshot="toggle-mode"
|
|
||||||
onClick={handleClick}
|
|
||||||
disableRipple
|
|
||||||
size="small"
|
|
||||||
aria-controls={open ? 'color-scheme-menu' : undefined}
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded={open ? 'true' : undefined}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
id="account-menu"
|
|
||||||
open={open}
|
|
||||||
onClose={handleClose}
|
|
||||||
onClick={handleClose}
|
|
||||||
slotProps={{
|
|
||||||
paper: {
|
|
||||||
variant: 'outlined',
|
|
||||||
elevation: 0,
|
|
||||||
sx: {
|
|
||||||
my: '4px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
||||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
||||||
>
|
|
||||||
<MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
|
|
||||||
System
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
|
|
||||||
Light
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
|
|
||||||
Dark
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { useColorScheme } from '@mui/material/styles';
|
|
||||||
import MenuItem from '@mui/material/MenuItem';
|
|
||||||
import Select, { SelectProps } from '@mui/material/Select';
|
|
||||||
|
|
||||||
export default function ColorModeSelect(props: SelectProps) {
|
|
||||||
const { mode, setMode } = useColorScheme();
|
|
||||||
if (!mode) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Select
|
|
||||||
value={mode}
|
|
||||||
onChange={(event) =>
|
|
||||||
setMode(event.target.value as 'system' | 'light' | 'dark')
|
|
||||||
}
|
|
||||||
SelectDisplayProps={{
|
|
||||||
// @ts-ignore
|
|
||||||
'data-screenshot': 'toggle-mode',
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<MenuItem value="system">System</MenuItem>
|
|
||||||
<MenuItem value="light">Light</MenuItem>
|
|
||||||
<MenuItem value="dark">Dark</MenuItem>
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user