Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change Confirmation Dialog

Browse Source 
Changed Confirmation Dialog to use chakra-ui alert dialog
This commit is contained in:
mickr777 2023-07-13 17:19:59 +10:00 committed by GitHub
parent 8a25e22fb0
commit d1ac50b061
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
invokeai/frontend/web/src/features/nodes/components/ui/ClearNodesButton.tsx
View File

@ -1,3 +1,15 @@
import { useState } from 'react';
import {
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Divider,
Text,
Button,
} from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { clearNodes } from 'features/nodes/store/nodesSlice'; import { clearNodes } from 'features/nodes/store/nodesSlice';
import { makeToast } from 'app/components/Toaster'; import { makeToast } from 'app/components/Toaster';
@ -10,31 +22,68 @@ import IAIIconButton from 'common/components/IAIIconButton';
const ClearNodesButton = () => { const ClearNodesButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const handleClearNodes = () => { const handleClearNodes = () => {
const confirmed = window.confirm(t('common.clearNodes')); setIsDialogOpen(true);
};
if (confirmed) { const handleConfirmClear = () => {
dispatch(clearNodes()); dispatch(clearNodes());
dispatch( dispatch(
addToast( addToast(
makeToast({ makeToast({
title: t('toast.nodesCleared'), title: t('toast.nodesCleared'),
status: 'success', status: 'success',
}) })
) )
); );
}
setIsDialogOpen(false);
};
const handleCancelClear = () => {
setIsDialogOpen(false);
}; };
return ( return (
<IAIIconButton <>
icon={<FaTrash />} <IAIIconButton
tooltip={t('nodes.clearNodes')} icon={<FaTrash />}
aria-label={t('nodes.clearNodes')} tooltip={t('nodes.clearNodes')}
onClick={handleClearNodes} aria-label={t('nodes.clearNodes')}
/> onClick={handleClearNodes}
/>
<AlertDialog
isOpen={isDialogOpen}
leastDestructiveRef={undefined}
onClose={handleCancelClear}
isCentered
>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{t('nodes.clearNodes')}
</AlertDialogHeader>
<AlertDialogBody>
<Text>{t('common.clearNodes')}</Text>
</AlertDialogBody>
<Divider />
<AlertDialogFooter>
<Button onClick={handleCancelClear}>{t('common.cancel')}</Button>
<Button colorScheme="red" ml={3} onClick={handleConfirmClear}>
{t('common.accept')}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
); );
}; };