github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): calculate gridTemplateColumns in selector

Browse Source
This commit is contained in:
psychedelicious
2025-06-25 10:46:29 +10:00
parent 8dd7b29966
commit 2c231075a3
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx
View File

@@ -1,4 +1,5 @@
import { Box, Flex, forwardRef, Grid, GridItem, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -33,7 +34,6 @@ const PAGE_SIZE = 100;
const VIEWPORT_BUFFER = 2048;
const SCROLL_SEEK_VELOCITY_THRESHOLD = 4096;
const DEBOUNCE_DELAY = 500;
const GRID_GAP = 1;
const SPINNER_OPACITY = 0.3;
type GridContext = {
@@ -428,18 +428,16 @@ const scrollSeekConfiguration: ScrollSeekConfiguration = {
// Styles
const style = { height: '100%', width: '100%' };
const selectGridTemplateColumns = createSelector(
selectGalleryImageMinimumWidth,
(galleryImageMinimumWidth) => `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr))`
);
// Grid components
const ListComponent: GridComponents<GridContext>['List'] = forwardRef((props, ref) => {
const galleryImageMinimumWidth = useAppSelector(selectGalleryImageMinimumWidth);
const gridTemplateColumns = useAppSelector(selectGridTemplateColumns);
return (
<Grid
ref={ref}
gridTemplateColumns={`repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr))`}
gap={GRID_GAP}
{...props}
/>
);
return <Grid ref={ref} gridTemplateColumns={gridTemplateColumns} gap={1} {...props} />;
});
ListComponent.displayName = 'ListComponent';