update bc button is only ever used in modal context

This commit is contained in:
Mary Hipp 2024-02-12 12:57:51 -05:00 committed by psychedelicious
parent 6301e58a2e
commit 3ecb1e580f
2 changed files with 16 additions and 33 deletions

View File

@ -1,19 +1,16 @@
import { Button, IconButton } from '@invoke-ai/ui-library'; import { Button } from '@invoke-ai/ui-library';
import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile'; import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
import { memo, useCallback, useRef } from 'react'; import { memo, useCallback, useRef } from 'react';
import { useDropzone } from 'react-dropzone'; import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiUploadSimpleBold } from 'react-icons/pi'; import { PiUploadSimpleBold } from 'react-icons/pi';
interface Props { const UploadWorkflowButton = () => {
full?: boolean;
onSuccess?: () => void;
}
const UploadWorkflowMenuItem = ({ full, onSuccess }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const resetRef = useRef<() => void>(null); const resetRef = useRef<() => void>(null);
const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess }); const { onClose } = useWorkflowLibraryModalContext();
const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
const onDropAccepted = useCallback( const onDropAccepted = useCallback(
(files: File[]) => { (files: File[]) => {
@ -32,28 +29,16 @@ const UploadWorkflowMenuItem = ({ full, onSuccess }: Props) => {
multiple: false, multiple: false,
}); });
return ( return (
<> <Button
{full ? ( aria-label={t('workflows.uploadWorkflow')}
<Button tooltip={t('workflows.uploadWorkflow')}
aria-label={t('workflows.uploadWorkflow')} leftIcon={<PiUploadSimpleBold />}
tooltip={t('workflows.uploadWorkflow')} {...getRootProps()}
leftIcon={<PiUploadSimpleBold />} pointerEvents="auto"
{...getRootProps()} >
pointerEvents="auto" {t('workflows.uploadWorkflow')}
> </Button>
{t('workflows.uploadWorkflow')}
</Button>
) : (
<IconButton
aria-label={t('workflows.uploadWorkflow')}
tooltip={t('workflows.uploadWorkflow')}
icon={<PiUploadSimpleBold />}
{...getRootProps()}
pointerEvents="auto"
/>
)}
</>
); );
}; };
export default memo(UploadWorkflowMenuItem); export default memo(UploadWorkflowButton);

View File

@ -21,7 +21,6 @@ import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableCon
import type { WorkflowCategory } from 'features/nodes/types/workflow'; import type { WorkflowCategory } from 'features/nodes/types/workflow';
import WorkflowLibraryListItem from 'features/workflowLibrary/components/WorkflowLibraryListItem'; import WorkflowLibraryListItem from 'features/workflowLibrary/components/WorkflowLibraryListItem';
import WorkflowLibraryPagination from 'features/workflowLibrary/components/WorkflowLibraryPagination'; import WorkflowLibraryPagination from 'features/workflowLibrary/components/WorkflowLibraryPagination';
import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import type { ChangeEvent, KeyboardEvent } from 'react'; import type { ChangeEvent, KeyboardEvent } from 'react';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -59,7 +58,6 @@ const WorkflowLibraryList = () => {
const [selectedCategory, setSelectedCategory] = useState<WorkflowCategory>('user'); const [selectedCategory, setSelectedCategory] = useState<WorkflowCategory>('user');
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const { onClose } = useWorkflowLibraryModalContext();
const projectId = useStore($projectId); const projectId = useStore($projectId);
const orderByOptions = useMemo(() => { const orderByOptions = useMemo(() => {
@ -229,7 +227,7 @@ const WorkflowLibraryList = () => {
<Flex w="full"> <Flex w="full">
<Box flex="1"> <Box flex="1">
<UploadWorkflowButton full={true} onSuccess={onClose} /> <UploadWorkflowButton />
</Box> </Box>
<Box flex="1" textAlign="center"> <Box flex="1" textAlign="center">
{data && <WorkflowLibraryPagination data={data} page={page} setPage={setPage} />} {data && <WorkflowLibraryPagination data={data} page={page} setPage={setPage} />}