From aad486e59e1f373b0057802d18392a814d20fa0a Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Mon, 29 Jan 2024 10:27:47 -0500 Subject: [PATCH] try using fns instead; --- .../web/src/app/components/InvokeAIUI.tsx | 6 +- .../store/nanostores/customNavComponent.ts | 3 +- .../src/app/store/nanostores/galleryHeader.ts | 3 +- .../web/src/app/store/nanostores/logo.ts | 3 +- .../components/ImageGalleryContent.tsx | 45 +++++++++++--- .../components/InvokeAILogoComponent.tsx | 2 +- .../src/features/ui/components/InvokeTabs.tsx | 59 +++++++++++++++---- 7 files changed, 92 insertions(+), 29 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index 12611943bc..6fdc7a82a5 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -34,10 +34,10 @@ interface Props extends PropsWithChildren { openAPISchemaUrl?: string; token?: string; config?: PartialAppConfig; - customNavComponent?: ReactNode; + customNavComponent?: () => JSX.Element; middleware?: Middleware[]; projectId?: string; - galleryHeader?: ReactNode; + galleryHeader?: () => JSX.Element; queueId?: string; selectedImage?: { imageName: string; @@ -46,7 +46,7 @@ interface Props extends PropsWithChildren { customStarUi?: CustomStarUi; socketOptions?: Partial; isDebugging?: boolean; - logo?: ReactNode; + logo?: () => JSX.Element; workflowCategories?: WorkflowCategory[]; } diff --git a/invokeai/frontend/web/src/app/store/nanostores/customNavComponent.ts b/invokeai/frontend/web/src/app/store/nanostores/customNavComponent.ts index 1a6a5571a0..b15d56f979 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/customNavComponent.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/customNavComponent.ts @@ -1,4 +1,3 @@ import { atom } from 'nanostores'; -import type { ReactNode } from 'react'; -export const $customNavComponent = atom(undefined); +export const $customNavComponent = atom JSX.Element)>(undefined); diff --git a/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts b/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts index 5de7b1dd40..4d510127db 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts @@ -1,4 +1,3 @@ import { atom } from 'nanostores'; -import type { ReactNode } from 'react'; -export const $galleryHeader = atom(undefined); +export const $galleryHeader = atom JSX.Element)>(undefined); diff --git a/invokeai/frontend/web/src/app/store/nanostores/logo.ts b/invokeai/frontend/web/src/app/store/nanostores/logo.ts index 5fd94ebd90..a7a941d959 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/logo.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/logo.ts @@ -1,4 +1,3 @@ import { atom } from 'nanostores'; -import type { ReactNode } from 'react'; -export const $logo = atom(undefined); +export const $logo = atom JSX.Element)>(undefined); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx index bd9afcd417..bd2b26e79a 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx @@ -1,4 +1,14 @@ -import { Box, Button, ButtonGroup, Flex, Tab, TabList, Tabs, useDisclosure, VStack } from '@invoke-ai/ui-library'; +import { + Box, + Button, + ButtonGroup, + Flex, + Tab, + TabList, + Tabs, + useDisclosure, + VStack, +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $galleryHeader } from 'app/store/nanostores/galleryHeader'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -20,7 +30,8 @@ const ImageGalleryContent = () => { const galleryView = useAppSelector((s) => s.gallery.galleryView); const dispatch = useAppDispatch(); const galleryHeader = useStore($galleryHeader); - const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = useDisclosure({ defaultIsOpen: true }); + const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = + useDisclosure({ defaultIsOpen: true }); const handleClickImages = useCallback(() => { dispatch(galleryViewChanged('images')); @@ -31,11 +42,26 @@ const ImageGalleryContent = () => { }, [dispatch]); return ( - - {galleryHeader} + + {galleryHeader && galleryHeader()} - - + + @@ -44,7 +70,12 @@ const ImageGalleryContent = () => { - + { }, [appVersion]); if (logoOverride) { - return logoOverride; + return logoOverride(); } return ( diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index efff22bb02..de3627d1a0 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -1,4 +1,14 @@ -import { Flex, IconButton, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs, Tooltip } from '@invoke-ai/ui-library'; +import { + Flex, + IconButton, + Spacer, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, + Tooltip, +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { $customNavComponent } from 'app/store/nanostores/customNavComponent'; @@ -15,14 +25,23 @@ import type { UsePanelOptions } from 'features/ui/hooks/usePanel'; import { usePanel } from 'features/ui/hooks/usePanel'; import { usePanelStorage } from 'features/ui/hooks/usePanelStorage'; import type { InvokeTabName } from 'features/ui/store/tabMap'; -import { activeTabIndexSelector, activeTabNameSelector } from 'features/ui/store/uiSelectors'; +import { + activeTabIndexSelector, + activeTabNameSelector, +} from 'features/ui/store/uiSelectors'; import { setActiveTab } from 'features/ui/store/uiSlice'; import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react'; import { memo, useCallback, useMemo, useRef } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiFlowArrowBold } from 'react-icons/pi'; -import { RiBox2Line, RiBrushLine, RiImage2Line, RiInputMethodLine, RiPlayList2Fill } from 'react-icons/ri'; +import { + RiBox2Line, + RiBrushLine, + RiImage2Line, + RiInputMethodLine, + RiPlayList2Fill, +} from 'react-icons/ri'; import type { ImperativePanelGroupHandle } from 'react-resizable-panels'; import { Panel, PanelGroup } from 'react-resizable-panels'; @@ -81,8 +100,9 @@ const tabs: InvokeTabInfo[] = [ }, ]; -const enabledTabsSelector = createMemoizedSelector(selectConfigSlice, (config) => - tabs.filter((tab) => !config.disabledTabs.includes(tab.id)) +const enabledTabsSelector = createMemoizedSelector( + selectConfigSlice, + (config) => tabs.filter((tab) => !config.disabledTabs.includes(tab.id)) ); export const NO_GALLERY_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue']; @@ -108,8 +128,14 @@ const InvokeTabs = () => { e.target.blur(); } }, []); - const shouldShowOptionsPanel = useMemo(() => !NO_OPTIONS_PANEL_TABS.includes(activeTabName), [activeTabName]); - const shouldShowGalleryPanel = useMemo(() => !NO_GALLERY_PANEL_TABS.includes(activeTabName), [activeTabName]); + const shouldShowOptionsPanel = useMemo( + () => !NO_OPTIONS_PANEL_TABS.includes(activeTabName), + [activeTabName] + ); + const shouldShowGalleryPanel = useMemo( + () => !NO_GALLERY_PANEL_TABS.includes(activeTabName), + [activeTabName] + ); const tabs = useMemo( () => @@ -133,7 +159,8 @@ const InvokeTabs = () => { ); const tabPanels = useMemo( - () => enabledTabs.map((tab) => {tab.content}), + () => + enabledTabs.map((tab) => {tab.content}), [enabledTabs] ); @@ -227,7 +254,7 @@ const InvokeTabs = () => { - {customNavComponent ? customNavComponent : } + {customNavComponent ? customNavComponent() : } { onExpand={optionsPanel.onExpand} collapsible > - {activeTabName === 'nodes' ? : } + {activeTabName === 'nodes' ? ( + + ) : ( + + )} { )} - {shouldShowOptionsPanel && } - {shouldShowGalleryPanel && } + {shouldShowOptionsPanel && ( + + )} + {shouldShowGalleryPanel && ( + + )} ); };