Skip to content

Commit 736beb7

Browse files
r0b1nr0b1n
authored
[WC-1301]: update structure preview for data grid 2 (#176)
2 parents 427274f + 337c4b4 commit 736beb7

File tree

9 files changed

+144
-167
lines changed

9 files changed

+144
-167
lines changed

‎packages/pluggableWidgets/datagrid-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+
### Changed
10+
11+
- We improved structure preview of the widget in Studio Pro 9.20 and above.
12+
913
## [2.4.2] - 2022-09-01
1014

1115
### Fixed

‎packages/pluggableWidgets/datagrid-web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "datagrid-web",
33
"widgetName": "Datagrid",
4-
"version": "2.4.2",
4+
"version": "2.4.3",
55
"description": "",
66
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
77
"private": true,

‎packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts‎

Lines changed: 107 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import {
2-
ContainerProps,
3-
DropZoneProps,
4-
RowLayoutProps,
5-
StructurePreviewProps
2+
container,
3+
datasource,
4+
dropzone,
5+
rowLayout,
6+
selectable,
7+
StructurePreviewProps,
8+
text
69
} from "@mendix/pluggable-widgets-commons";
710
import {
811
changePropertyIn,
@@ -130,7 +133,16 @@ export function getProperties(
130133
return defaultProperties;
131134
}
132135

133-
export const getPreview = (values: DatagridPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
136+
export const getPreview = (
137+
values: DatagridPreviewProps,
138+
isDarkMode: boolean,
139+
spVersion: number[] = [0, 0, 0]
140+
): StructurePreviewProps => {
141+
const [x, y] = spVersion;
142+
const canHideDataSourceHeader = x >= 9 && y >= 20;
143+
144+
const modeColor = (colorDark: string, colorLight: string) => (isDarkMode ? colorDark : colorLight);
145+
134146
const hasColumns = values.columns && values.columns.length > 0;
135147
const columnProps: ColumnsPreviewType[] = hasColumns
136148
? values.columns
@@ -154,173 +166,117 @@ export const getPreview = (values: DatagridPreviewProps, isDarkMode: boolean): S
154166
wrapText: false
155167
}
156168
];
157-
const columns: RowLayoutProps = {
158-
type: "RowLayout",
159-
columnSize: "fixed",
160-
children: columnProps.map(
161-
column =>
162-
({
163-
type: "Container",
164-
borders: true,
165-
grow: column.width === "manual" && column.size ? column.size : 1,
166-
backgroundColor:
167-
values.columnsHidable && column.hidable === "hidden"
168-
? isDarkMode
169-
? "#3E3E3E"
170-
: "#F5F5F5"
171-
: undefined,
172-
children: [
173-
column.showContentAs === "customContent"
174-
? {
175-
type: "DropZone",
176-
property: column.content
177-
}
178-
: {
179-
type: "Container",
180-
padding: 8,
181-
children: [
182-
{
183-
type: "Text",
184-
content:
185-
column.showContentAs === "dynamicText"
186-
? column.dynamicText ?? "Dynamic text"
187-
: `[${
188-
column.attribute ? column.attribute : "No attribute selected"
189-
}]`,
190-
fontSize: 10
191-
}
192-
]
193-
}
194-
]
195-
} as ContainerProps)
169+
const columns = rowLayout({
170+
columnSize: "fixed"
171+
})(
172+
...columnProps.map(column =>
173+
container({
174+
borders: true,
175+
grow: column.width === "manual" && column.size ? column.size : 1,
176+
backgroundColor:
177+
values.columnsHidable && column.hidable === "hidden" ? modeColor("#3E3E3E", "#F5F5F5") : undefined
178+
})(
179+
column.showContentAs === "customContent"
180+
? dropzone(dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader))(column.content)
181+
: container({
182+
padding: 8
183+
})(
184+
text({ fontSize: 10 })(
185+
column.showContentAs === "dynamicText"
186+
? column.dynamicText ?? "Dynamic text"
187+
: `[${column.attribute ? column.attribute : "No attribute selected"}]`
188+
)
189+
)
190+
)
196191
)
197-
};
198-
const titleHeader: RowLayoutProps = {
199-
type: "RowLayout",
200-
columnSize: "fixed",
201-
backgroundColor: isDarkMode ? "#3B5C8F" : "#DAEFFB",
202-
borders: true,
203-
borderWidth: 1,
204-
children: [
205-
{
206-
type: "Container",
207-
padding: 4,
208-
children: [
209-
{
210-
type: "Text",
211-
content: "Data grid 2",
212-
fontColor: isDarkMode ? "#6DB1FE" : "#2074C8"
213-
}
214-
]
215-
}
216-
]
217-
};
218-
const headerFilters = {
219-
type: "RowLayout",
192+
);
193+
const titleHeader = rowLayout({
220194
columnSize: "fixed",
195+
backgroundColor: modeColor("#3B5C8F", "#DAEFFB"),
221196
borders: true,
222-
children: [
223-
{
224-
type: "DropZone",
225-
property: values.filtersPlaceholder,
226-
placeholder: "Place filter widget(s) here"
227-
} as DropZoneProps
228-
]
229-
} as RowLayoutProps;
230-
const headers: RowLayoutProps = {
231-
type: "RowLayout",
197+
borderWidth: 1
198+
})(
199+
container({
200+
padding: 4
201+
})(text({ fontColor: modeColor("#6DB1FE", "#2074C8") })("Data grid 2"))
202+
);
203+
const headerFilters = rowLayout({
232204
columnSize: "fixed",
233-
children: columnProps.map(column => {
205+
borders: true
206+
})(
207+
dropzone(
208+
dropzone.placeholder("Place filter widget(s) here"),
209+
dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
210+
)(values.filtersPlaceholder)
211+
);
212+
213+
const headers = rowLayout({
214+
columnSize: "fixed"
215+
})(
216+
...columnProps.map(column => {
234217
const isColumnHidden = values.columnsHidable && column.hidable === "hidden";
235-
const content: ContainerProps = {
236-
type: "Container",
218+
const content = container({
237219
borders: true,
238220
grow:
239221
values.columns.length > 0
240222
? column.width === "manual" && column.size
241223
? column.size
242224
: 1
243225
: undefined,
244-
backgroundColor: isColumnHidden
245-
? isDarkMode
246-
? "#4F4F4F"
247-
: "#DCDCDC"
248-
: isDarkMode
249-
? "#3E3E3E"
250-
: "#F5F5F5",
251-
children: [
252-
{
253-
type: "Container",
254-
padding: 8,
255-
children: [
256-
{
257-
type: "Text",
258-
bold: true,
259-
fontSize: 10,
260-
content: column.header ? column.header : "Header",
261-
fontColor: column.header
262-
? undefined
263-
: isColumnHidden
264-
? isDarkMode
265-
? "#4F4F4F"
266-
: "#DCDCDC"
267-
: isDarkMode
268-
? "#3E3E3E"
269-
: "#F5F5F5"
270-
}
271-
]
272-
},
273-
...(hasColumns && values.columnsFilterable
274-
? [
275-
{
276-
type: "DropZone",
277-
property: column.filter,
278-
placeholder: "Place filter widget here"
279-
} as DropZoneProps
280-
]
281-
: [])
282-
]
283-
};
226+
backgroundColor: isColumnHidden ? modeColor("#4F4F4F", "#DCDCDC") : modeColor("#3E3E3E", "#F5F5F5")
227+
})(
228+
container({
229+
padding: 8
230+
})(
231+
text({
232+
bold: true,
233+
fontSize: 10,
234+
fontColor: column.header
235+
? undefined
236+
: isColumnHidden
237+
? modeColor("#4F4F4F", "#DCDCDC")
238+
: modeColor("#3E3E3E", "#F5F5F5")
239+
})(column.header ? column.header : "Header")
240+
),
241+
...(hasColumns && values.columnsFilterable
242+
? [
243+
dropzone(
244+
dropzone.placeholder("Place filter widget here"),
245+
dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
246+
)(column.filter)
247+
]
248+
: [])
249+
);
284250
return values.columns.length > 0
285-
? {
286-
type: "Selectable",
287-
object: column,
288-
grow: column.width === "manual" && column.size ? column.size : 1,
289-
child: {
290-
type: "Container",
291-
children: [content]
292-
}
293-
}
251+
? selectable(column, { grow: column.width === "manual" && column.size ? column.size : 1 })(
252+
container()(content)
253+
)
294254
: content;
295255
})
296-
};
256+
);
297257
const footer =
298258
values.showEmptyPlaceholder === "custom"
299259
? [
300-
{
301-
type: "RowLayout",
260+
rowLayout({
302261
columnSize: "fixed",
303-
borders: true,
304-
children: [
305-
{
306-
type: "DropZone",
307-
property: values.emptyPlaceholder,
308-
placeholder: "Empty list message: Place widgets here"
309-
} as DropZoneProps
310-
]
311-
} as RowLayoutProps
262+
borders: true
263+
})(
264+
dropzone(
265+
dropzone.placeholder("Empty list message: Place widgets here"),
266+
dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
267+
)(values.emptyPlaceholder)
268+
)
312269
]
313270
: [];
314-
return {
315-
type: "Container",
316-
children: [
317-
titleHeader,
318-
...(values.showHeaderFilters && values.filterList.length > 0 ? [headerFilters] : []),
319-
headers,
320-
...Array.from({ length: 5 }).map(() => columns),
321-
...footer
322-
]
323-
};
271+
272+
return container()(
273+
titleHeader,
274+
...(canHideDataSourceHeader ? [datasource(values.datasource)()] : []),
275+
...(values.showHeaderFilters && values.filterList.length > 0 ? [headerFilters] : []),
276+
headers,
277+
...Array.from({ length: 5 }).map(() => columns),
278+
...footer
279+
);
324280
};
325281

326282
export function check(values: DatagridPreviewProps): Problem[] {

‎packages/pluggableWidgets/datagrid-web/src/package.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="Datagrid" version="2.4.2" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="Datagrid" version="2.4.3" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="Datagrid.xml" />
66
</widgetFiles>

‎packages/pluggableWidgets/html-element-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 with HTML Element widget producing errors in Studio Pro versions below 9.18.
12+
913
## [1.0.0] - 2022-11-24
1014

1115
### Added

‎packages/pluggableWidgets/html-element-web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "html-element-web",
33
"widgetName": "HTMLElement",
4-
"version": "1.0.0",
4+
"version": "1.0.1",
55
"description": "Displays custom HTML",
66
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
77
"license": "Apache-2.0",

‎packages/pluggableWidgets/html-element-web/src/HTMLElement.editorConfig.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -189,18 +189,16 @@ export function getPreview(
189189
)
190190
: container({ padding: 0 })(
191191
text()(`<${tagName}>`),
192-
dropzone(
193-
canHideDataSourceHeader
194-
? {
195-
showDataSourceHeader: false
196-
}
197-
: {}
198-
)(values.tagUseRepeat ? values.tagContentRepeatContainer : values.tagContentContainer),
192+
dropzone(dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader))(
193+
values.tagUseRepeat ? values.tagContentRepeatContainer : values.tagContentContainer
194+
),
199195
text()(`</${tagName}>`)
200196
);
201197

202198
return container({ grow: 1, borders: true, borderWidth: 1 })(
203-
values.tagContentRepeatDataSource ? datasource(values.tagContentRepeatDataSource)() : container()(),
199+
values.tagContentRepeatDataSource && canHideDataSourceHeader
200+
? datasource(values.tagContentRepeatDataSource)()
201+
: container()(),
204202
isVoidElement(tagName) ? voidElementPreview(tagName) : flowElementPreview()
205203
);
206204
}

‎packages/pluggableWidgets/html-element-web/src/package.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="HTMLElement" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="HTMLElement" version="1.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="HTMLElement.xml" />
66
</widgetFiles>

0 commit comments

Comments
 (0)