Skip to content

Commit 39da766

Browse files
gjulivangjulivan
committed
fix: based on code review
1 parent 4e73b40 commit 39da766

13 files changed

+68
-84
lines changed

‎packages/pluggableWidgets/document-viewer-web/components/BaseViewer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const BaseControlViewer = (props: BaseControlViewerProps): ReactElement => {
7979
>
8080
<div
8181
className="widget-document-viewer-zoom-container"
82-
style={{ "--default-zoom-scale": zoomLevel } as React.CSSProperties}
82+
style={{ "--current-zoom-scale": zoomLevel } as React.CSSProperties}
8383
>
8484
{children}
8585
</div>

‎packages/pluggableWidgets/document-viewer-web/components/DocxViewer.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ const DocxViewer: DocRendererElement = (props: DocumentRendererProps) => {
4343
const controller = new AbortController();
4444
const { signal } = controller;
4545
if (file.status === "available" && file.value.uri) {
46-
console.log("fetch file", file.value.uri);
4746
fetch(file.value.uri, { method: "GET", signal })
4847
.then(res => res.arrayBuffer())
4948
.then(response => {
@@ -65,7 +64,6 @@ const DocxViewer: DocRendererElement = (props: DocumentRendererProps) => {
6564

6665
DocxViewer.contentTypes = [
6766
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
68-
"application/msword",
6967
"application/vnd.ms-word",
7068
"application/vnd.ms-word.document.macroEnabled.12",
7169
"application/vnd.openxmlformats-officedocument.wordprocessingml.template",

‎packages/pluggableWidgets/document-viewer-web/components/ExcelViewer.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ const ExcelViewer: DocRendererElement = (props: DocumentRendererProps) => {
4646

4747
ExcelViewer.contentTypes = [
4848
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
49-
"application/vnd.ms-excel",
5049
"application/vnd.ms-excel.sheet.macroEnabled.12",
5150
"application/vnd.ms-excel.sheet.binary.macroEnabled.12",
5251
"application/vnd.ms-excel.template.macroEnabled.12",

‎packages/pluggableWidgets/document-viewer-web/components/ImageViewer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const ImageViewer: DocRendererElement = (props: DocumentRendererProps) => {
1212
);
1313
};
1414

15-
ImageViewer.contentTypes = ["image/*", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tiff", "image/webp"];
15+
ImageViewer.contentTypes = ["image/*"];
1616

17-
ImageViewer.fileTypes = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "webp"];
17+
ImageViewer.fileTypes = ["jpg", "jpe", "jpeg", "png", "gif", "bmp", "tif", "tiff", "webp"];
1818

1919
export default ImageViewer;

‎packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,6 @@ const PDFViewer: DocRendererElement = (props: DocumentRendererProps) => {
101101

102102
PDFViewer.contentTypes = ["application/pdf", "application/x-pdf", "application/acrobat", "text/pdf", "text/html"];
103103

104-
PDFViewer.fileTypes = ["pdf", "pdfx"];
104+
PDFViewer.fileTypes = ["pdf"];
105105

106106
export default PDFViewer;

‎packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.editorConfig.ts

+33-61
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-
22
import {
33
RowLayoutProps,
44
StructurePreviewProps,
5-
structurePreviewPalette
5+
structurePreviewPalette,
6+
rowLayout,
7+
container,
8+
text
69
} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
710
import { DocumentViewerPreviewProps } from "typings/DocumentViewerProps";
811

@@ -18,7 +21,7 @@ export function getProperties(values: DocumentViewerPreviewProps, defaultPropert
1821
"minHeightUnit",
1922
"maxHeight",
2023
"maxHeightUnit",
21-
"OverflowY"
24+
"overflowY"
2225
]);
2326
}
2427

@@ -27,78 +30,47 @@ export function getProperties(values: DocumentViewerPreviewProps, defaultPropert
2730
}
2831

2932
if (values.maxHeightUnit === "none") {
30-
hidePropertiesIn(defaultProperties, values, ["maxHeight", "OverflowY"]);
33+
hidePropertiesIn(defaultProperties, values, ["maxHeight", "overflowY"]);
3134
}
3235

3336
return defaultProperties;
3437
}
3538

3639
export function getPreview(values: DocumentViewerPreviewProps, isDarkMode: boolean): StructurePreviewProps {
3740
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
38-
const titleHeader: RowLayoutProps = {
39-
type: "RowLayout",
41+
const titleHeader: RowLayoutProps = rowLayout({
4042
columnSize: "fixed",
4143
backgroundColor: palette.background.topbarData,
4244
borders: true,
43-
borderWidth: 1,
44-
children: [
45-
{
46-
type: "Container",
47-
padding: 4,
48-
children: [
49-
{
50-
type: "Text",
51-
content: "Document Viewer",
52-
fontColor: palette.text.data
53-
}
54-
]
55-
}
56-
]
57-
};
58-
const content = {
59-
type: "RowLayout",
45+
borderWidth: 1
46+
})(
47+
container({
48+
padding: 4
49+
})(text({ fontColor: palette.text.data })("Document Viewer"))
50+
);
51+
52+
const content = rowLayout({
6053
columnSize: "fixed",
61-
borders: true,
62-
children: [
63-
{
64-
type: "Container",
65-
children: [
66-
{
67-
type: "RowLayout",
68-
grow: 2,
69-
columnSize: "grow",
70-
backgroundColor: values.readOnly
71-
? palette.background.containerDisabled
72-
: palette.background.container,
73-
children: [
74-
{
75-
type: "Container",
76-
grow: 1,
77-
padding: 4,
78-
children: [
79-
{
80-
type: "Text",
81-
content: getCustomCaption(values),
82-
fontColor: palette.text.data
83-
}
84-
]
85-
}
86-
],
87-
padding: 8
88-
}
89-
],
90-
backgroundColor: palette.background.container,
91-
borderRadius: 8
92-
}
93-
]
94-
} as RowLayoutProps;
54+
borders: true
55+
})(
56+
container()(
57+
rowLayout({
58+
grow: 2,
59+
columnSize: "grow",
60+
backgroundColor: values.readOnly ? palette.background.containerDisabled : palette.background.container
61+
})(
62+
container({
63+
grow: 1,
64+
padding: 4
65+
})(text({ fontColor: palette.text.data })(getCustomCaption(values)))
66+
)
67+
)
68+
);
9569

96-
return {
97-
type: "Container",
70+
return container({
9871
borderRadius: 2,
99-
borderWidth: 1,
100-
children: [titleHeader, content]
101-
};
72+
borderWidth: 1
73+
})(titleHeader, content);
10274
}
10375

10476
export function getCustomCaption(values: DocumentViewerPreviewProps): string {

‎packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.editorPreview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const preview = (props: DocumentViewerPreviewProps): ReactElement => {
1717
minHeight: props.minHeight ?? 250,
1818
maxHeightUnit: props.maxHeightUnit,
1919
maxHeight: props.maxHeight ?? 500,
20-
OverflowY: props.OverflowY
20+
overflowY: props.overflowY
2121
});
2222
return (
2323
<div className={classNames(props.class, "widget-document-viewer", "form-control")} style={wrapperStyle}>

‎packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.xml

+5-5
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<enumerationValues>
2222
<enumerationValue key="pixels">Pixels</enumerationValue>
2323
<enumerationValue key="percentage">Percentage</enumerationValue>
24-
<enumerationValue key="contentFit">Fit to Content</enumerationValue>
24+
<enumerationValue key="contentFit">Fit to content</enumerationValue>
2525
</enumerationValues>
2626
</property>
2727
<property key="width" type="integer" defaultValue="100">
@@ -43,7 +43,7 @@
4343
<description />
4444
</property>
4545
<property key="minHeightUnit" type="enumeration" defaultValue="none">
46-
<caption>Minimum Height unit</caption>
46+
<caption>Minimum height unit</caption>
4747
<description />
4848
<enumerationValues>
4949
<enumerationValue key="none">None</enumerationValue>
@@ -57,7 +57,7 @@
5757
<description />
5858
</property>
5959
<property key="maxHeightUnit" type="enumeration" defaultValue="none">
60-
<caption>Maximum Height unit</caption>
60+
<caption>Maximum height unit</caption>
6161
<description />
6262
<enumerationValues>
6363
<enumerationValue key="none">None</enumerationValue>
@@ -70,8 +70,8 @@
7070
<caption>Maximum height</caption>
7171
<description />
7272
</property>
73-
<property key="OverflowY" type="enumeration" defaultValue="auto">
74-
<caption>Vertical Overflow</caption>
73+
<property key="overflowY" type="enumeration" defaultValue="auto">
74+
<caption>Vertical overflow</caption>
7575
<description />
7676
<enumerationValues>
7777
<enumerationValue key="auto">Auto</enumerationValue>

‎packages/pluggableWidgets/document-viewer-web/typings/DocumentViewerProps.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface DocumentViewerContainerProps {
3030
minHeight: number;
3131
maxHeightUnit: MaxHeightUnitEnum;
3232
maxHeight: number;
33-
OverflowY: OverflowYEnum;
33+
overflowY: OverflowYEnum;
3434
}
3535

3636
export interface DocumentViewerPreviewProps {
@@ -53,5 +53,5 @@ export interface DocumentViewerPreviewProps {
5353
minHeight: number | null;
5454
maxHeightUnit: MaxHeightUnitEnum;
5555
maxHeight: number | null;
56-
OverflowY: OverflowYEnum;
56+
overflowY: OverflowYEnum;
5757
}

‎packages/pluggableWidgets/document-viewer-web/ui/documentViewer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ div.widget-document-viewer {
6868
}
6969

7070
&-zoom-container {
71-
transform: scale(var(--default-zoom-scale));
71+
transform: scale(var(--current-zoom-scale, --default-zoom-scale));
7272
transform-origin: 0 0;
7373
}
7474

‎packages/pluggableWidgets/document-viewer-web/utils/dimension.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ export interface DimensionContainerProps {
1616
minHeight: number;
1717
maxHeightUnit: MaxHeightUnitEnum;
1818
maxHeight: number;
19-
OverflowY: OverflowYEnum;
19+
overflowY: OverflowYEnum;
2020
}
2121

2222
function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
2323
return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
2424
}
2525

2626
export function constructWrapperStyle<T extends DimensionContainerProps>(props: T): CSSProperties {
27-
const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
27+
const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, overflowY } =
2828
props;
2929

3030
const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
@@ -41,7 +41,7 @@ export function constructWrapperStyle<T extends DimensionContainerProps>(props:
4141

4242
if (maxHeightUnit !== "none") {
4343
wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
44-
wrapperStyle.overflowY = OverflowY;
44+
wrapperStyle.overflowY = overflowY;
4545
}
4646
} else {
4747
wrapperStyle.height = getHeightScale(height, heightUnit);

‎packages/pluggableWidgets/document-viewer-web/utils/useRendererSelector.ts

+6
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ export function useRendererSelector(props: DocumentViewerContainerProps): Docume
2828
DocumentRenderers.forEach(renderer => {
2929
if (renderer.contentTypes.includes(contentType)) {
3030
selectedRenderer.push(renderer);
31+
} else {
32+
renderer.contentTypes.forEach(type => {
33+
if (contentType.match(type)) {
34+
selectedRenderer.push(renderer);
35+
}
36+
});
3137
}
3238
});
3339
if (selectedRenderer.length > 1) {

‎packages/pluggableWidgets/document-viewer-web/utils/useZoomScale.ts

+13-4
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,27 @@ import { useState } from "react";
44
const ZOOMIN_MULTIPLIER = 1.2;
55
const ZOOMOUT_MULTIPLIER = 0.8;
66

7-
export function useZoomScale() {
7+
type zoomFn = () => void;
8+
9+
type zoomObjects = {
10+
zoomLevel: number;
11+
zoomIn: zoomFn;
12+
zoomOut: zoomFn;
13+
reset: zoomFn;
14+
};
15+
16+
export function useZoomScale(): zoomObjects {
817
const [zoomLevel, setZoomLevel] = useState(1);
918

10-
const zoomIn = () => {
19+
const zoomIn: zoomFn = () => {
1120
setZoomLevel(prev => Math.min(prev * ZOOMIN_MULTIPLIER, 10));
1221
};
1322

14-
const zoomOut = () => {
23+
const zoomOut: zoomFn = () => {
1524
setZoomLevel(prev => Math.max(prev * ZOOMOUT_MULTIPLIER, 0.3));
1625
};
1726

18-
const reset = () => {
27+
const reset: zoomFn = () => {
1928
setZoomLevel(1);
2029
};
2130

0 commit comments

Comments
 (0)