Skip to content

Commit 4b26164

Browse files
yordan-styordan-st
committed
feat: changelog update
1 parent 9e6165a commit 4b26164

File tree

4 files changed

+128
-52
lines changed

4 files changed

+128
-52
lines changed

‎packages/pluggableWidgets/gallery-web/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Fixed
10+
11+
- We fixed an issue where the configured column count wouldn't show up in the preview of the widget
12+
913
### Added
1014

1115
- Added a 'horizontal divider' option to Borders design property for Gallery list items, allowing improved visual separation and customization.

‎packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,22 @@ import { createElement, ReactElement, ReactNode, useCallback, useMemo } from "re
1111
import { GalleryPreviewProps } from "../typings/GalleryProps";
1212
import { Gallery as GalleryComponent } from "./components/Gallery";
1313
import { useItemEventsController } from "./features/item-interaction/ItemEventsController";
14-
import { useGridPositions } from "./features/useGridPositions";
14+
import { useGridPositionsPreview } from "./features/useGridPositionsPreview";
1515
import { useItemPreviewHelper } from "./helpers/ItemPreviewHelper";
1616
import { useItemSelectHelper } from "./helpers/useItemSelectHelper";
1717
import "./ui/GalleryPreview.scss";
1818

19-
const numberOfItems = 3;
20-
2119
const SortAPI = getGlobalSortContext();
2220

2321
function Preview(props: GalleryPreviewProps): ReactElement {
2422
const { emptyPlaceholder } = props;
23+
const { numberOfColumns, numberOfRows, containerRef, numberOfItems } = useGridPositionsPreview({
24+
phoneItems: props.phoneItems ?? 1,
25+
tabletItems: props.tabletItems ?? 1,
26+
desktopItems: props.desktopItems ?? 1,
27+
totalItems: props.pageSize ?? 3
28+
});
29+
2530
const items: ObjectItem[] = Array.from({ length: numberOfItems }).map((_, index) => ({
2631
id: String(index) as GUID
2732
}));
@@ -66,48 +71,49 @@ function Preview(props: GalleryPreviewProps): ReactElement {
6671
);
6772

6873
return (
69-
<GalleryComponent
70-
className={props.class}
71-
desktopItems={props.content.widgetCount > 0 ? numberOfItems : props.desktopItems!}
72-
emptyPlaceholderRenderer={useCallback(
73-
(renderWrapper: (children: ReactNode) => ReactElement) => (
74-
<emptyPlaceholder.renderer caption="Empty list message: Place widgets here">
75-
{renderWrapper(null)}
76-
</emptyPlaceholder.renderer>
77-
),
78-
[emptyPlaceholder]
79-
)}
80-
header={
81-
<SortAPI.Provider value={sortAPI}>
82-
<props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
83-
<div />
84-
</props.filtersPlaceholder.renderer>
85-
</SortAPI.Provider>
86-
}
87-
showHeader
88-
hasMoreItems={false}
89-
items={items}
90-
itemHelper={useItemPreviewHelper({
91-
contentValue: props.content,
92-
hasOnClick: props.onClick !== null
93-
})}
94-
numberOfItems={props.pageSize ?? numberOfItems}
95-
page={0}
96-
pageSize={props.pageSize ?? numberOfItems}
97-
paging={props.pagination === "buttons"}
98-
paginationPosition={props.pagingPosition}
99-
paginationType={props.pagination}
100-
showPagingButtons={props.showPagingButtons}
101-
showEmptyStatePreview={props.showEmptyPlaceholder === "custom"}
102-
phoneItems={props.phoneItems!}
103-
tabletItems={props.tabletItems!}
104-
selectHelper={selectHelper}
105-
itemEventsController={itemEventsController}
106-
focusController={focusController}
107-
getPosition={getPositionCallback}
108-
showRefreshIndicator={false}
109-
preview
110-
/>
74+
<div ref={containerRef}>
75+
<GalleryComponent
76+
className={props.class}
77+
desktopItems={props.desktopItems!}
78+
emptyPlaceholderRenderer={useCallback(
79+
(renderWrapper: (children: ReactNode) => ReactElement) => (
80+
<emptyPlaceholder.renderer caption="Empty list message: Place widgets here">
81+
{renderWrapper(null)}
82+
</emptyPlaceholder.renderer>
83+
),
84+
[emptyPlaceholder]
85+
)}
86+
header={
87+
<SortAPI.Provider value={sortAPI}>
88+
<props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
89+
<div />
90+
</props.filtersPlaceholder.renderer>
91+
</SortAPI.Provider>
92+
}
93+
showHeader
94+
hasMoreItems={false}
95+
items={items}
96+
itemHelper={useItemPreviewHelper({
97+
contentValue: props.content,
98+
hasOnClick: props.onClick !== null
99+
})}
100+
numberOfItems={props.pageSize!}
101+
page={0}
102+
pageSize={props.pageSize!}
103+
paging={props.pagination === "buttons"}
104+
paginationPosition={props.pagingPosition}
105+
paginationType={props.pagination}
106+
showPagingButtons={props.showPagingButtons}
107+
showEmptyStatePreview={props.showEmptyPlaceholder === "custom"}
108+
phoneItems={props.phoneItems!}
109+
tabletItems={props.tabletItems!}
110+
selectHelper={selectHelper}
111+
itemEventsController={itemEventsController}
112+
focusController={focusController}
113+
getPosition={getPositionCallback}
114+
preview
115+
/>
116+
</div>
111117
);
112118
}
113119

‎packages/pluggableWidgets/gallery-web/src/features/useGridPositionsPreview.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { ObjectItem } from "mendix";
2+
import { useEffect, useState, useRef } from "react";
3+
import { GalleryProps } from "../components/Gallery";
4+
5+
export type GridPositionsProps = Pick<GalleryProps<ObjectItem>, "desktopItems" | "phoneItems" | "tabletItems"> & {
6+
totalItems: number;
7+
};
8+
9+
type GridPositionReturn = {
10+
numberOfColumns: number;
11+
numberOfRows: number;
12+
numberOfItems: number;
13+
};
14+
15+
function useNumberOfRows(): [React.RefObject<HTMLDivElement>, number] {
16+
const containerRef = useRef<HTMLDivElement>(null);
17+
const [numberOfColumns, setNumberOfColumns] = useState(12);
18+
19+
useEffect(() => {
20+
if (!containerRef.current) return;
21+
22+
const resizeObserver = new ResizeObserver(() => {
23+
if (!containerRef.current) return;
24+
25+
setNumberOfColumns(
26+
getComputedStyle(containerRef.current.querySelector(".widget-gallery-items")!)
27+
.getPropertyValue("grid-template-columns")
28+
.split(" ").length
29+
);
30+
});
31+
32+
resizeObserver.observe(containerRef.current);
33+
34+
setNumberOfColumns(containerRef.current.offsetWidth);
35+
36+
return () => resizeObserver.disconnect();
37+
}, []);
38+
39+
return [containerRef, numberOfColumns];
40+
}
41+
42+
export function useGridPositionsPreview(
43+
config: GridPositionsProps
44+
): GridPositionReturn & { containerRef: React.RefObject<HTMLDivElement> } {
45+
const [containerRef, numberOfColumns] = useNumberOfRows();
46+
const maxItems = numberOfColumns * 3;
47+
const numberOfItems = Math.min(maxItems, config.totalItems);
48+
const numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
49+
50+
return {
51+
containerRef,
52+
numberOfColumns,
53+
numberOfRows,
54+
numberOfItems
55+
};
56+
}

‎packages/pluggableWidgets/gallery-web/src/ui/GalleryPreview.scss‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
.widget-gallery {
2-
.widget-gallery-preview:nth-last-child(2) > div {
3-
opacity: 0.5;
4-
}
1+
.widget-gallery-content {
2+
position: relative;
3+
}
54

6-
.widget-gallery-preview:last-child > div {
7-
opacity: 0.2;
8-
}
5+
.widget-gallery-content::before {
6+
content: "";
7+
display: block;
8+
position: absolute;
9+
width: 100%;
10+
height: 100%;
11+
background: linear-gradient(
12+
to bottom,
13+
rgba(255, 255, 255, 0) 0%,
14+
rgba(255, 255, 255, 0) 33.33%,
15+
rgba(255, 255, 255, 0.5) 66.66%,
16+
rgba(255, 255, 255, 0.75) 100%
17+
);
18+
z-index: 1;
919
}

0 commit comments

Comments
 (0)