ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use "notistack" to display toasts

Browse Source
This commit is contained in:
schroda
2024-09-07 01:27:07 +02:00
parent fea710b5dc
commit 74944407f7
5 changed files with 31 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -52,6 +52,7 @@
"jsonrepair": "3.8.0",
"material-ui-popup-state": "5.3.1",
"mui-nested-menu": "3.4.0",
"notistack": "^3.0.1",
"p-limit": "6.1.0",
"react": "18.3.1",
"react-beautiful-dnd": "13.1.1",

3
src/components/context/AppContext.tsx
View File

@@ -16,6 +16,7 @@ import { CacheProvider, EmotionCache } from '@emotion/react';
import createCache from '@emotion/cache';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import { SnackbarProvider } from 'notistack';
import { createAndSetTheme } from '@/theme';
import { useLocalStorage } from '@/util/useStorage.tsx';
import { ThemeMode, ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
@@ -101,7 +102,7 @@ export const AppContext: React.FC<Props> = ({ children }) => {
<LibraryOptionsContextProvider>
<NavBarContextProvider>
<ActiveDevice.Provider value={activeDeviceContext}>
{children}
<SnackbarProvider>{children}</SnackbarProvider>
</ActiveDevice.Provider>
</NavBarContextProvider>
</LibraryOptionsContextProvider>

73
src/components/util/Toast.tsx
View File

@@ -6,69 +6,14 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React from 'react';
import Slide, { SlideProps } from '@mui/material/Slide';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertColor as Severity } from '@mui/material/Alert';
import { createRoot, Root } from 'react-dom/client';
import { enqueueSnackbar, OptionsObject, SnackbarKey } from 'notistack';
function removeToast(root: Root) {
root.unmount();
}
function Transition(props: SlideProps) {
return <Slide {...props} direction="up" />;
}
interface IToastProps {
message: string;
severity: Severity;
}
export function Toast(props: IToastProps) {
const { message, severity } = props;
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<Snackbar
open={open}
onClose={handleClose}
autoHideDuration={3000}
TransitionComponent={Transition}
message="I love snacks"
>
<MuiAlert elevation={6} variant="filled" onClose={handleClose} severity={severity}>
{message}
</MuiAlert>
</Snackbar>
);
}
export function makeToast(message: string, severity: Severity) {
const id = Math.floor(Math.random() * 1000);
const container = document.createElement('div');
container.id = `alert-${id}`;
document.body.appendChild(container);
const root = createRoot(container!);
root.render(<Toast message={message} severity={severity} />);
setTimeout(() => removeToast(root), 3500);
}
export function makeToaster([toasts, setToasts]: [React.ReactElement[], (arg0: React.ReactElement[]) => void]): [
React.ReactElement[],
(message: string, severity: Severity) => void,
] {
return [
toasts,
(message: string, severity: Severity) => {
setToasts([<Toast key={Math.floor(Math.random() * 1000) + 1} message={message} severity={severity} />]);
},
];
export function makeToast(message: string, severity?: OptionsObject['variant']): SnackbarKey;
export function makeToast(message: string, options?: OptionsObject): SnackbarKey;
export function makeToast(message: string, options: OptionsObject['variant'] | OptionsObject = 'default'): SnackbarKey {
if (typeof options === 'string') {
return enqueueSnackbar(message, { variant: options });
}
return enqueueSnackbar(message, options);
}

2
src/screens/settings/appearance/theme/ThemePreview.tsx
View File

@@ -24,7 +24,7 @@ import { ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
import { AppTheme, loadThemeFonts } from '@/lib/ui/AppThemes.ts';
import { createTheme } from '@/theme.ts';
import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
import { makeToast } from '@/components/util/Toast.tsx';
import { makeToast } from '@/components/util/Toast';
const ThemePreviewBadge = styled(Box)(() => ({
width: '15px',

18
yarn.lock
View File

@@ -3998,6 +3998,11 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
clsx@^1.1.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
clsx@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -5174,6 +5179,11 @@ globrex@^0.1.2:
resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
goober@^2.0.33:
version "2.1.14"
resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
gopd@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -6236,6 +6246,14 @@ normalize-path@^2.1.1:
dependencies:
remove-trailing-separator "^1.0.1"
notistack@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
dependencies:
clsx "^1.1.0"
goober "^2.0.33"
npm-run-path@^5.1.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.3.0.tgz#e23353d0ebb9317f174e93417e4a4d82d0249e9f"