Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 71x 8x 8x 3x 3x 71x 71x 8x 71x 20x 20x 20x 9x 11x 8x 8x 3x 3x 9x 20x 2x 2x 1x 2x 20x 1x 1x 1x 20x 9x | import { useEffect, useState } from "react";
import { ConfirmationDialog } from "@/components/ConfirmationDialog";
import { Observer } from "@/utils/basic-observable";
export type UserPrompt = {
header: string;
body: string;
cancelButtonText?: string;
acceptButtonText?: string;
areButtonsReversed?: boolean;
onAccept: () => void;
onCancel?: () => void;
};
class UserPromptObserver extends Observer<UserPrompt> {
create = (data: UserPrompt) => {
this.publish(data);
this.observed = { ...data };
};
dismiss = () => {
this.publish(null);
this.observed = null;
};
}
const userPromptState = new UserPromptObserver();
export const userPrompt = (newUserPrompt: UserPrompt) => {
return userPromptState.create(newUserPrompt);
};
export const UserPrompt = () => {
const [activeUserPrompt, setActiveUserPrompt] = useState<UserPrompt | null>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
useEffect(() => {
const unsubscribe = userPromptState.subscribe((userPrompt) => {
if (userPrompt) {
setActiveUserPrompt(userPrompt);
setIsOpen(true);
} else {
// artificial delay to prevent content from disappearing first
setTimeout(() => setActiveUserPrompt(null), 100);
setIsOpen(false);
}
});
return unsubscribe;
}, []);
const onCancel = () => {
Eif (activeUserPrompt) {
if (activeUserPrompt.onCancel) {
activeUserPrompt.onCancel();
}
userPromptState.dismiss();
}
};
const onAccept = () => {
Eif (activeUserPrompt) {
activeUserPrompt.onAccept();
userPromptState.dismiss();
}
};
if (activeUserPrompt === null) {
return null;
}
return (
<ConfirmationDialog
open={isOpen}
title={activeUserPrompt.header}
body={activeUserPrompt.body}
onAccept={onAccept}
onCancel={onCancel}
cancelButtonText={activeUserPrompt.cancelButtonText}
acceptButtonText={activeUserPrompt.acceptButtonText}
areButtonsReversed={activeUserPrompt.areButtonsReversed}
/>
);
};
|