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

fix(ui): DeleteBoardModal must be a singleton

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 13:00:21 +10:00
parent ff1972fbb3
commit c385e76356
2 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
View File

@ -1,9 +1,8 @@
import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library'; import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants'; import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useMemo, useState } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi'; import { PiCaretDownBold } from 'react-icons/pi';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards'; import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
@ -15,15 +14,15 @@ import NoBoardBoard from './NoBoardBoard';
type Props = { type Props = {
isPrivate: boolean; isPrivate: boolean;
setBoardToDelete: (board?: BoardDTO) => void;
}; };
export const BoardsList = ({ isPrivate }: Props) => { export const BoardsList = ({ isPrivate, setBoardToDelete }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText); const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const queryArgs = useAppSelector(selectListBoardsQueryArgs); const queryArgs = useAppSelector(selectListBoardsQueryArgs);
const { data: boards } = useListAllBoardsQuery(queryArgs); const { data: boards } = useListAllBoardsQuery(queryArgs);
const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards); const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true }); const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
@ -63,7 +62,7 @@ export const BoardsList = ({ isPrivate }: Props) => {
}); });
return elements; return elements;
}, [filteredBoards, isPrivate, allowPrivateBoards, boardSearchText, selectedBoardId]); }, [allowPrivateBoards, isPrivate, boardSearchText.length, filteredBoards, selectedBoardId, setBoardToDelete]);
const boardListTitle = useMemo(() => { const boardListTitle = useMemo(() => {
if (allowPrivateBoards) { if (allowPrivateBoards) {
@ -74,53 +73,50 @@ export const BoardsList = ({ isPrivate }: Props) => {
}, [isPrivate, allowPrivateBoards, t]); }, [isPrivate, allowPrivateBoards, t]);
return ( return (
<> <Flex direction="column">
<Flex direction="column"> <Flex
<Flex position="sticky"
position="sticky" w="full"
w="full" justifyContent="space-between"
justifyContent="space-between" alignItems="center"
alignItems="center" ps={2}
ps={2} py={1}
py={1} zIndex={1}
zIndex={1} top={0}
top={0} bg="base.900"
bg="base.900" >
> {allowPrivateBoards ? (
{allowPrivateBoards ? ( <Button variant="unstyled" onClick={onToggle}>
<Button variant="unstyled" onClick={onToggle}> <Flex gap="2" alignItems="center">
<Flex gap="2" alignItems="center"> <Icon
<Icon boxSize={4}
boxSize={4} as={PiCaretDownBold}
as={PiCaretDownBold} transform={isOpen ? undefined : 'rotate(-90deg)'}
transform={isOpen ? undefined : 'rotate(-90deg)'} fill="base.500"
fill="base.500" />
/> <Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
<Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500"> {boardListTitle}
{boardListTitle} </Text>
</Text> </Flex>
</Flex> </Button>
</Button> ) : (
<Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
{boardListTitle}
</Text>
)}
<AddBoardButton isPrivateBoard={isPrivate} />
</Flex>
<Collapse in={isOpen}>
<Flex direction="column" gap={1}>
{boardElements.length ? (
boardElements
) : ( ) : (
<Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500"> <Text variant="subtext" textAlign="center">
{boardListTitle} {t('boards.noBoards', { boardType: boardSearchText.length ? 'Matching' : '' })}
</Text> </Text>
)} )}
<AddBoardButton isPrivateBoard={isPrivate} />
</Flex> </Flex>
<Collapse in={isOpen}> </Collapse>
<Flex direction="column" gap={1}> </Flex>
{boardElements.length ? (
boardElements
) : (
<Text variant="subtext" textAlign="center">
{t('boards.noBoards', { boardType: boardSearchText.length ? 'Matching' : '' })}
</Text>
)}
</Flex>
</Collapse>
</Flex>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
); );
}; };

22
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsListWrapper.tsx
View File

@ -1,9 +1,11 @@
import { Box } from '@invoke-ai/ui-library'; import { Box } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo } from 'react'; import { memo, useState } from 'react';
import type { BoardDTO } from 'services/api/types';
import { BoardsList } from './BoardsList'; import { BoardsList } from './BoardsList';
@ -14,16 +16,20 @@ const overlayScrollbarsStyles: CSSProperties = {
const BoardsListWrapper = () => { const BoardsListWrapper = () => {
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards); const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
return ( return (
<Box position="relative" w="full" h="full"> <>
<Box position="absolute" top={0} right={0} bottom={0} left={0}> <Box position="relative" w="full" h="full">
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> <Box position="absolute" top={0} right={0} bottom={0} left={0}>
{allowPrivateBoards && <BoardsList isPrivate={true} />} <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<BoardsList isPrivate={false} /> {allowPrivateBoards && <BoardsList isPrivate={true} setBoardToDelete={setBoardToDelete} />}
</OverlayScrollbarsComponent> <BoardsList isPrivate={false} setBoardToDelete={setBoardToDelete} />
</OverlayScrollbarsComponent>
</Box>
</Box> </Box>
</Box> <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
); );
}; };
export default memo(BoardsListWrapper); export default memo(BoardsListWrapper);