github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 15:25:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): update workflow library modal to use nanostore to track open/close

Browse Source
This commit is contained in:
Mary Hipp
2024-09-18 10:48:39 -04:00
committed by Mary Hipp Rogers
parent 13db18f76f
commit 59460df41e
7 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx
View File

@@ -1,6 +1,6 @@
import { Button } from '@invoke-ai/ui-library';
import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback, useRef } from 'react';
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
@@ -9,9 +9,11 @@ import { PiUploadSimpleBold } from 'react-icons/pi';
const UploadWorkflowButton = () => {
const { t } = useTranslation();
const resetRef = useRef<() => void>(null);
const { onClose } = useWorkflowLibraryModalContext();
const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
const onClose = useCallback(() => {
$isWorkflowLibraryModalOpen.set(false);
}, []);
const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
const onDropAccepted = useCallback(
(files: File[]) => {
if (!files[0]) {

17
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
View File

@@ -1,6 +1,6 @@
import { IconButton, useDisclosure } from '@invoke-ai/ui-library';
import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
import { memo } from 'react';
import { IconButton } from '@invoke-ai/ui-library';
import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiFolderOpenBold } from 'react-icons/pi';
@@ -8,19 +8,22 @@ import WorkflowLibraryModal from './WorkflowLibraryModal';
const WorkflowLibraryButton = () => {
const { t } = useTranslation();
const disclosure = useDisclosure();
const onClick = useCallback(() => {
$isWorkflowLibraryModalOpen.set(true);
}, []);
return (
<WorkflowLibraryModalContext.Provider value={disclosure}>
<>
<IconButton
aria-label={t('workflows.workflowLibrary')}
tooltip={t('workflows.workflowLibrary')}
icon={<PiFolderOpenBold />}
onClick={disclosure.onOpen}
onClick={onClick}
pointerEvents="auto"
/>
<WorkflowLibraryModal />
</WorkflowLibraryModalContext.Provider>
</>
);
};

6
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
View File

@@ -3,9 +3,9 @@ import { EMPTY_OBJECT } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import dateFormat, { masks } from 'dateformat';
import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import type { WorkflowRecordListItemDTO } from 'services/api/types';
@@ -17,7 +17,9 @@ type Props = {
const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
const { t } = useTranslation();
const workflowId = useAppSelector(selectWorkflowId);
const { onClose } = useWorkflowLibraryModalContext();
const onClose = useCallback(() => {
$isWorkflowLibraryModalOpen.set(false);
}, []);
const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow(EMPTY_OBJECT);
const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });

14
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
View File

@@ -7,16 +7,22 @@ import {
ModalHeader,
ModalOverlay,
} from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
import { memo } from 'react';
import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const WorkflowLibraryModal = () => {
const { t } = useTranslation();
const { isOpen, onClose } = useWorkflowLibraryModalContext();
const isWorkflowLibraryModalOpen = useStore($isWorkflowLibraryModalOpen);
const onClose = useCallback(() => {
$isWorkflowLibraryModalOpen.set(false);
}, []);
return (
<Modal isOpen={isOpen} onClose={onClose} isCentered useInert={false}>
<Modal isOpen={isWorkflowLibraryModalOpen} onClose={onClose} isCentered useInert={false}>
<ModalOverlay />
<ModalContent w="80%" h="80%" minW="unset" minH="unset" maxW="1200px" maxH="664px">
<ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>