github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use singleton for clear q confirm dialog

Browse Source
This commit is contained in:
psychedelicious
2024-08-23 19:44:58 +10:00
parent 9b1ee633e6
commit 2ca5aeda96
9 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
View File

@@ -1,19 +1,17 @@
import type { IconButtonProps } from '@invoke-ai/ui-library';
import { IconButton, useDisclosure, useShiftModifier } from '@invoke-ai/ui-library';
import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
import { useClearQueueConfirmationAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
import { useClearQueue } from 'features/queue/hooks/useClearQueue';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
type ClearQueueButtonProps = Omit<IconButtonProps, 'aria-label'>;
type ClearQueueIconButtonProps = ClearQueueButtonProps & {
onOpen: () => void;
};
export const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButtonProps) => {
export const ClearAllQueueIconButton = memo((props: ClearQueueButtonProps) => {
const { t } = useTranslation();
const dialogState = useClearQueueConfirmationAlertDialog();
const { isLoading, isDisabled } = useClearQueue();
return (
@@ -24,14 +22,16 @@ export const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButt
tooltip={t('queue.clearTooltip')}
icon={<PiTrashSimpleBold size="16px" />}
colorScheme="error"
onClick={onOpen}
onClick={dialogState.setTrue}
data-testid={t('queue.clear')}
{...props}
/>
);
};
});
const ClearSingleQueueItemIconButton = (props: ClearQueueButtonProps) => {
ClearAllQueueIconButton.displayName = 'ClearAllQueueIconButton';
const ClearSingleQueueItemIconButton = memo((props: ClearQueueButtonProps) => {
const { t } = useTranslation();
const { cancelQueueItem, isLoading, isDisabled } = useCancelCurrentQueueItem();
@@ -48,22 +48,20 @@ const ClearSingleQueueItemIconButton = (props: ClearQueueButtonProps) => {
{...props}
/>
);
};
});
export const ClearQueueIconButton = (props: ClearQueueButtonProps) => {
ClearSingleQueueItemIconButton.displayName = 'ClearSingleQueueItemIconButton';
export const ClearQueueIconButton = memo((props: ClearQueueButtonProps) => {
// Show the single item clear button when shift is pressed
// Otherwise show the clear queue button
const shift = useShiftModifier();
const disclosure = useDisclosure();
return (
<>
{shift ? (
<ClearAllQueueIconButton {...props} onOpen={disclosure.onOpen} />
) : (
<ClearSingleQueueItemIconButton {...props} />
)}
<ClearQueueConfirmationAlertDialog disclosure={disclosure} />
</>
);
};
if (shift) {
return <ClearAllQueueIconButton {...props} />;
}
return <ClearSingleQueueItemIconButton {...props} />;
});
ClearQueueIconButton.displayName = 'ClearQueueIconButton';