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

Introduce "awaitable-component"

Browse Source
This commit is contained in:
schroda
2025-11-02 17:18:49 +01:00
parent 7502393f40
commit 02621dec98
19 changed files with 136 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/base/AppAwaitableComponent.ts Normal file
View File

@@ -0,0 +1,12 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { AwaitableComponent } from 'awaitable-component';
import { ConfirmDialog } from '@/base/components/modals/ConfirmDialog.tsx';
export const Confirmation = AwaitableComponent.create(ConfirmDialog);

4
src/base/components/feedback/SnackbarWithDescription.tsx
View File

@@ -17,7 +17,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
import { extractGraphqlExceptionInfo } from '@/lib/HelperFunctions.ts';
import { TranslationKey } from '@/base/Base.types.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { Confirmation } from '@/base/AppAwaitableComponent.ts';
const MAX_DESCRIPTION_LENGTH = 200;
@@ -83,7 +83,7 @@ export const SnackbarWithDescription = memo(
{isDescriptionTooLong || (isGraphqlException && graphqlStackTrace) ? (
<Button
onClick={() => {
GlobalDialogManager.confirm({
Confirmation.show({
title:
typeof message === 'string'
? message

19
src/base/components/modals/ConfirmDialog.tsx
View File

@@ -13,6 +13,7 @@ import DialogTitle from '@mui/material/DialogTitle';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import { AwaitableComponentProps } from 'awaitable-component';
type Action = {
show?: boolean;
@@ -31,15 +32,15 @@ export const ConfirmDialog = ({
message,
actions: passedActions,
onExtra,
onCancel,
onConfirm,
}: {
onDismiss,
onSubmit,
isVisible,
onExitComplete,
}: AwaitableComponentProps & {
title: string;
message: string;
actions?: Actions;
onExtra?: () => void;
onCancel: () => void;
onConfirm: () => void;
}) => {
const { t } = useTranslation();
@@ -66,7 +67,7 @@ export const ConfirmDialog = ({
} satisfies Actions;
return (
<Dialog open onClose={onCancel}>
<Dialog open={isVisible} onTransitionExited={onExitComplete} onClose={onDismiss}>
<DialogTitle>{title}</DialogTitle>
<DialogContent
sx={{
@@ -87,7 +88,7 @@ export const ConfirmDialog = ({
{actions.extra.show && (
<Button
onClick={() => {
onCancel();
onDismiss();
onExtra?.();
}}
variant={actions.extra.contain ? 'contained' : undefined}
@@ -102,12 +103,12 @@ export const ConfirmDialog = ({
}}
>
{actions.cancel.show && (
<Button onClick={onCancel} variant={actions.cancel.contain ? 'contained' : undefined}>
<Button onClick={onDismiss} variant={actions.cancel.contain ? 'contained' : undefined}>
{actions.cancel.title}
</Button>
)}
{actions.confirm.show && (
<Button onClick={onConfirm} variant={actions.confirm.contain ? 'contained' : undefined}>
<Button onClick={onSubmit} variant={actions.confirm.contain ? 'contained' : undefined}>
{actions.confirm.title}
</Button>
)}

15
src/base/global-dialog/GlobalDialog.tsx
View File

@@ -1,15 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useSyncExternalStore } from 'react';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
export const GlobalDialog = () =>
useSyncExternalStore(GlobalDialogManager.subscribe.bind(GlobalDialogManager), () =>
GlobalDialogManager.getActive(),
);

140
src/base/global-dialog/GlobalDialogManager.tsx
View File

@@ -1,140 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ComponentProps, ComponentType, ReactNode } from 'react';
import { ControlledPromise } from '@/lib/ControlledPromise.ts';
import { ConfirmDialog } from '@/base/components/modals/ConfirmDialog.tsx';
type Id = string;
export interface DialogProps<T = any> {
onCancel: () => void;
onConfirm: (value: T) => void;
}
type DialogPropsParam<Props extends {}> = Omit<Props, keyof DialogProps>;
type ExtractDialogReturnType<T> = T extends DialogProps<infer U> ? U : never;
export class GlobalDialogManager {
private static subscriberCounter = 0;
private static queue = new Set<Id>();
private static dialogs = new Map<Id, ReactNode>();
private static subscribers = new Map<Id, () => void>();
private static getNextId = (): Id => {
this.subscriberCounter = (this.subscriberCounter + 1) % Number.MAX_SAFE_INTEGER;
return this.subscriberCounter.toString();
};
private static notify(): void {
this.subscribers.forEach((callback) => {
callback();
});
}
private static add(id: Id, dialog: ReactNode): void {
this.queue.delete(id);
this.queue.add(id);
this.dialogs.set(id, dialog);
const showDialog = !(this.dialogs.size - 1);
if (showDialog) {
this.notify();
}
}
private static remove(id: Id): void {
this.queue.delete(id);
this.dialogs.delete(id);
this.notify();
}
private static unsubscribe(key: Id): void {
this.subscribers.delete(key);
}
static subscribe(callback: () => void): () => void {
const key = this.getNextId();
this.subscribers.set(key, callback);
return () => this.unsubscribe(key);
}
static getActive(): ReactNode {
const id = [...this.queue].slice(-1)[0];
return this.dialogs.get(id);
}
static async show<AllProps extends DialogProps>(
Dialog: ComponentType<AllProps>,
...args: HasRequiredKeys<DialogPropsParam<AllProps>> extends true
? [props: DialogPropsParam<AllProps>]
: [props?: DialogPropsParam<AllProps>]
): Promise<ExtractDialogReturnType<AllProps>>;
static async show<AllProps extends DialogProps>(
id: Id,
Dialog: ComponentType<AllProps>,
...args: HasRequiredKeys<DialogPropsParam<AllProps>> extends true
? [props: DialogPropsParam<AllProps>]
: [props?: DialogPropsParam<AllProps>]
): Promise<ExtractDialogReturnType<AllProps>>;
static async show<AllProps extends DialogProps>(
idOrDialog: Id | ComponentType<AllProps>,
dialogOrProps?: ComponentType<AllProps> | DialogPropsParam<AllProps>,
propsOrNothing?: DialogPropsParam<AllProps> | never,
): Promise<ExtractDialogReturnType<AllProps>> {
const dialogPromise = new ControlledPromise<ExtractDialogReturnType<AllProps>>();
const wasIdPassed = typeof idOrDialog === 'string';
const id = wasIdPassed ? idOrDialog : this.getNextId();
const Dialog = (wasIdPassed ? dialogOrProps : idOrDialog) as ComponentType<AllProps>;
const props = (wasIdPassed ? propsOrNothing : dialogOrProps) as DialogPropsParam<AllProps> | undefined;
const dialog = (
<Dialog
{...({
...(props ?? {}),
onCancel: () => dialogPromise.reject(new Error('Dialog was cancelled')),
onConfirm: dialogPromise.resolve.bind(dialogPromise),
} as unknown as AllProps)}
/>
);
this.add(id, dialog);
try {
return await dialogPromise.promise;
} finally {
this.remove(id);
}
}
static confirm(
props: DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
): Promise<ExtractDialogReturnType<ComponentProps<typeof ConfirmDialog>>>;
static confirm(
id: Id,
props: DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
): Promise<ExtractDialogReturnType<ComponentProps<typeof ConfirmDialog>>>;
static confirm(
idOrProps: Id | DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
propsOrNothing?: DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
): Promise<ExtractDialogReturnType<ComponentProps<typeof ConfirmDialog>>> {
if (typeof idOrProps === 'string') {
return this.show(idOrProps, ConfirmDialog, propsOrNothing!);
}
return this.show(ConfirmDialog, idOrProps);
}
}