gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: style tweaks to card view

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-05-12 11:47:44 -04:00
parent 8ba2ff15fc
commit 9d3b9f50f3
5 changed files with 53 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/collections/CollectionSearch.tsx
View File

@ -9,14 +9,14 @@ import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
interface CollectionSearchProps {
collections: Collections;
collection?: Collection;
searchTerm: string;
searchTerm: string | undefined;
onSubmit: (query: string, collection?: string) => void;
}
const CollectionSearch = ({
collections: collectionsMap,
collection,
searchTerm,
searchTerm = '',
onSubmit,
t,
}: TranslatedProps<CollectionSearchProps>) => {

4
packages/core/src/components/collections/entries/Entries.tsx
View File

@ -14,6 +14,7 @@ export interface BaseEntriesProps {
isFetching: boolean;
viewStyle: ViewStyle;
cursor: Cursor;
filterTerm: string;
handleCursorActions?: (action: string) => void;
}
@ -32,6 +33,7 @@ const Entries = ({
isFetching,
viewStyle,
cursor,
filterTerm,
handleCursorActions,
t,
page,
@ -62,6 +64,7 @@ const Entries = ({
handleCursorActions={handleCursorActions}
page={page}
isLoadingEntries={isFetching && page !== undefined && entries.length > 0}
filterTerm={filterTerm}
/>
) : (
<EntryListing
@ -73,6 +76,7 @@ const Entries = ({
handleCursorActions={handleCursorActions}
page={page}
isLoadingEntries={isFetching && page !== undefined && entries.length > 0}
filterTerm={filterTerm}
/>
);
}

2
packages/core/src/components/collections/entries/EntriesCollection.tsx
View File

@ -132,6 +132,7 @@ const EntriesCollection = ({
cursor={cursor}
handleCursorActions={handleCursorActions}
page={page}
filterTerm={filterTerm}
/>
</div>
);
@ -151,6 +152,7 @@ const EntriesCollection = ({
cursor={cursor}
handleCursorActions={handleCursorActions}
page={page}
filterTerm={filterTerm}
/>
);
};

4
packages/core/src/components/collections/entries/EntryListing.tsx
View File

@ -24,6 +24,7 @@ export interface BaseEntryListingProps {
viewStyle: ViewStyle;
cursor?: Cursor;
isLoadingEntries: boolean;
filterTerm: string;
handleCursorActions?: (action: string) => void;
page?: number;
}
@ -45,6 +46,7 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
cursor,
viewStyle,
isLoadingEntries,
filterTerm,
handleCursorActions,
t,
...otherProps
@ -169,7 +171,7 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
return (
<EntryListingGrid
key="grid"
key={'collection' in otherProps ? otherProps.collection.name : `search-grid-${filterTerm}`}
entryData={entryData}
onLoadMore={handleLoadMore}
canLoadMore={Boolean(hasMore && handleLoadMore)}

48
packages/core/src/components/collections/entries/EntryListingCardGrid.tsx
View File

@ -28,6 +28,7 @@ export interface EntryListingCardGridProps {
export interface CardGridItemData {
columnCount: number;
cardHeights: number[];
entryData: CollectionEntryData[];
t: t;
}
@ -36,7 +37,7 @@ const CardWrapper = ({
rowIndex,
columnIndex,
style,
data: { columnCount, entryData, t },
data: { columnCount, cardHeights, entryData, t },
}: GridChildComponentProps<CardGridItemData>) => {
const left = useMemo(
() =>
@ -60,6 +61,8 @@ const CardWrapper = ({
return null;
}
const data = entryData[index];
const cardHeight =
index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN : style.height;
return (
<div
@ -68,7 +71,7 @@ const CardWrapper = ({
left,
top,
width: style.width,
height: style.height,
height: cardHeight,
paddingRight: `${columnIndex + 1 === columnCount ? 0 : COLLECTION_CARD_MARGIN}px`,
paddingBottom: `${COLLECTION_CARD_MARGIN}px`,
}}
@ -103,6 +106,13 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
}, []);
const getDefaultHeight = useCallback((data?: CollectionEntryData) => {
console.log(
'DEFAULT HEIGHT',
data,
isNotNullish(data?.imageFieldName)
? COLLECTION_CARD_HEIGHT
: COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE,
);
return isNotNullish(data?.imageFieldName)
? COLLECTION_CARD_HEIGHT
: COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE;
@ -166,15 +176,41 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
: width * columnWidth + COLLECTION_CARD_MARGIN
}
rowCount={rowCount}
rowHeight={index =>
(cardHeights.length > index ? cardHeights[index] : getDefaultHeight()) +
COLLECTION_CARD_MARGIN
}
rowHeight={index => {
const rowStart = index * columnCount;
const rowEnd = (index + 1) * columnCount - 1;
let rowHeight = 0;
for (let i = rowStart; i <= rowEnd; i++) {
if (cardHeights.length <= i) {
break;
}
if (cardHeights[i] > rowHeight && cardHeights[i]) {
rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN;
console.log(
'HEIGHT @index',
i,
cardHeights[i],
cardHeights[i] + COLLECTION_CARD_MARGIN,
);
}
}
if (rowHeight === 0) {
rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN;
}
console.log('HEIGHT', index, rowHeight);
return rowHeight;
}}
width={width}
height={height}
itemData={
{
entryData,
cardHeights,
columnCount,
t,
} as CardGridItemData