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
Download Patch File Download Diff File Expand all files Collapse all files

12
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 { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useMemo, useState } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
@ -15,15 +14,15 @@ import NoBoardBoard from './NoBoardBoard';
type Props = {
isPrivate: boolean;
setBoardToDelete: (board?: BoardDTO) => void;
};
export const BoardsList = ({ isPrivate }: Props) => {
export const BoardsList = ({ isPrivate, setBoardToDelete }: Props) => {
const { t } = useTranslation();
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const queryArgs = useAppSelector(selectListBoardsQueryArgs);
const { data: boards } = useListAllBoardsQuery(queryArgs);
const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
@ -63,7 +62,7 @@ export const BoardsList = ({ isPrivate }: Props) => {
});
return elements;
}, [filteredBoards, isPrivate, allowPrivateBoards, boardSearchText, selectedBoardId]);
}, [allowPrivateBoards, isPrivate, boardSearchText.length, filteredBoards, selectedBoardId, setBoardToDelete]);
const boardListTitle = useMemo(() => {
if (allowPrivateBoards) {
@ -74,7 +73,6 @@ export const BoardsList = ({ isPrivate }: Props) => {
}, [isPrivate, allowPrivateBoards, t]);
return (
<>
<Flex direction="column">
<Flex
position="sticky"
@ -120,7 +118,5 @@ export const BoardsList = ({ isPrivate }: Props) => {
</Flex>
</Collapse>
</Flex>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
);
};

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