Skip to content

Commit b0d9476

Browse files
gjulivangjulivan
committed
chore: update signature widget
1 parent 3b76deb commit b0d9476

14 files changed

Lines changed: 268 additions & 129 deletions

‎packages/pluggableWidgets/signature-web/src/Signature.editorConfig.ts‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Properties } from "@mendix/pluggable-widgets-tools";
1+
import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
22
import {
33
container,
44
rowLayout,
@@ -13,9 +13,29 @@ import SignaturePreviewSVG from "./assets/Signature.icon.svg";
1313
import SignaturePreviewDarkSVG from "./assets/Signature.icon.dark.svg";
1414

1515
export function getProperties(
16-
_values: SignaturePreviewProps,
16+
values: SignaturePreviewProps,
1717
defaultProperties: Properties /* , target: Platform*/
1818
): Properties {
19+
if (values.heightUnit === "percentageOfWidth") {
20+
hidePropertyIn(defaultProperties, values, "height");
21+
} else {
22+
hidePropertiesIn(defaultProperties, values, [
23+
"minHeight",
24+
"minHeightUnit",
25+
"maxHeight",
26+
"maxHeightUnit",
27+
"OverflowY"
28+
]);
29+
}
30+
31+
if (values.minHeightUnit === "none") {
32+
hidePropertyIn(defaultProperties, values, "minHeight");
33+
}
34+
35+
if (values.maxHeightUnit === "none") {
36+
hidePropertiesIn(defaultProperties, values, ["maxHeight", "OverflowY"]);
37+
}
38+
1939
return defaultProperties;
2040
}
2141

‎packages/pluggableWidgets/signature-web/src/Signature.icon.dark.png‎

506 Bytes
Loading

‎packages/pluggableWidgets/signature-web/src/Signature.icon.png‎

546 Bytes
Loading

‎packages/pluggableWidgets/signature-web/src/Signature.tile.dark.png‎

2.71 KB
Loading

‎packages/pluggableWidgets/signature-web/src/Signature.tile.png‎

2.85 KB
Loading

‎packages/pluggableWidgets/signature-web/src/Signature.xml‎

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,31 +35,71 @@
3535
</propertyGroup>
3636
</propertyGroup>
3737
<propertyGroup caption="Dimensions">
38-
<property key="widthUnit" type="enumeration" defaultValue="percentage">
39-
<caption>Width unit</caption>
40-
<description />
41-
<enumerationValues>
42-
<enumerationValue key="percentage">Percentage</enumerationValue>
43-
<enumerationValue key="pixels">Pixels</enumerationValue>
44-
</enumerationValues>
45-
</property>
46-
<property key="width" type="integer" defaultValue="100">
47-
<caption>Width</caption>
48-
<description />
49-
</property>
50-
<property key="heightUnit" type="enumeration" defaultValue="percentageOfWidth">
51-
<caption>Height unit</caption>
52-
<description>'Percentage of width' is the aspect ratio, 'Pixels' is absolute. Warning: When using 'Percentage of parent' the parent container must have an absolute height, else nothing is displayed.</description>
53-
<enumerationValues>
54-
<enumerationValue key="percentageOfWidth">Percentage of width</enumerationValue>
55-
<enumerationValue key="pixels">Pixels</enumerationValue>
56-
<enumerationValue key="percentageOfParent">Percentage of parent</enumerationValue>
57-
</enumerationValues>
58-
</property>
59-
<property key="height" type="integer" defaultValue="50">
60-
<caption>Height</caption>
61-
<description />
62-
</property>
38+
<propertyGroup caption="Dimensions">
39+
<property key="widthUnit" type="enumeration" defaultValue="percentage">
40+
<caption>Width unit</caption>
41+
<description />
42+
<enumerationValues>
43+
<enumerationValue key="pixels">Pixels</enumerationValue>
44+
<enumerationValue key="percentage">Percentage</enumerationValue>
45+
</enumerationValues>
46+
</property>
47+
<property key="width" type="integer" defaultValue="100">
48+
<caption>Width</caption>
49+
<description />
50+
</property>
51+
<property key="heightUnit" type="enumeration" defaultValue="pixels">
52+
<caption>Height unit</caption>
53+
<description />
54+
<enumerationValues>
55+
<enumerationValue key="percentageOfWidth">Auto</enumerationValue>
56+
<enumerationValue key="pixels">Pixels</enumerationValue>
57+
<enumerationValue key="percentageOfParent">Percentage</enumerationValue>
58+
<enumerationValue key="percentageOfView">Viewport</enumerationValue>
59+
</enumerationValues>
60+
</property>
61+
<property key="height" type="integer" defaultValue="250">
62+
<caption>Height</caption>
63+
<description />
64+
</property>
65+
<property key="minHeightUnit" type="enumeration" defaultValue="pixels">
66+
<caption>Minimum Height unit</caption>
67+
<description />
68+
<enumerationValues>
69+
<enumerationValue key="none">None</enumerationValue>
70+
<enumerationValue key="pixels">Pixels</enumerationValue>
71+
<enumerationValue key="percentageOfParent">Percentage</enumerationValue>
72+
<enumerationValue key="percentageOfView">Viewport</enumerationValue>
73+
</enumerationValues>
74+
</property>
75+
<property key="minHeight" type="integer" defaultValue="250">
76+
<caption>Minimum height</caption>
77+
<description />
78+
</property>
79+
<property key="maxHeightUnit" type="enumeration" defaultValue="none">
80+
<caption>Maximum Height unit</caption>
81+
<description />
82+
<enumerationValues>
83+
<enumerationValue key="none">None</enumerationValue>
84+
<enumerationValue key="pixels">Pixels</enumerationValue>
85+
<enumerationValue key="percentageOfParent">Percentage</enumerationValue>
86+
<enumerationValue key="percentageOfView">Viewport</enumerationValue>
87+
</enumerationValues>
88+
</property>
89+
<property key="maxHeight" type="integer" defaultValue="250">
90+
<caption>Maximum height</caption>
91+
<description />
92+
</property>
93+
<property key="OverflowY" type="enumeration" defaultValue="auto">
94+
<caption>Vertical Overflow</caption>
95+
<description />
96+
<enumerationValues>
97+
<enumerationValue key="auto">Auto</enumerationValue>
98+
<enumerationValue key="scroll">Scroll</enumerationValue>
99+
<enumerationValue key="hidden">Hidden</enumerationValue>
100+
</enumerationValues>
101+
</property>
102+
</propertyGroup>
63103
</propertyGroup>
64104
<propertyGroup caption="Advanced">
65105
<property key="showGrid" type="boolean" defaultValue="false">

‎packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.png‎

1.76 KB
Loading

‎packages/pluggableWidgets/signature-web/src/assets/Signature.icon.png‎

1.83 KB
Loading

‎packages/pluggableWidgets/signature-web/src/components/Signature.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,20 @@ import { Grid } from "./Grid";
99
import { SizeContainer } from "./SizeContainer";
1010

1111
export function SignatureComponent(props: SignatureProps): ReactElement {
12-
const { className, alertMessage, wrapperStyle, imageSource, hasSignatureAttribute, onSignEndAction } = props;
12+
const { className, alertMessage, wrapperStyle, imageSource, onSignEndAction } = props;
1313

1414
const handleSignEnd = (imageDataUrl?: string): void => {
1515
if (imageDataUrl) {
1616
imageSource.setValue(Utils.convertUrlToBlob(imageDataUrl));
1717
}
1818

19-
if (hasSignatureAttribute) {
20-
hasSignatureAttribute.setValue(true);
21-
}
22-
2319
// Trigger microflow to update signature attribute
2420
if (onSignEndAction) {
2521
onSignEndAction(imageDataUrl);
2622
}
2723
};
2824

29-
const { canvasRef, signaturePadRef } = useSignaturePad(props, handleSignEnd);
30-
31-
const onResize = (): void => {
32-
if (canvasRef.current) {
33-
canvasRef.current.width =
34-
canvasRef.current && canvasRef.current.parentElement ? canvasRef.current.parentElement.offsetWidth : 0;
35-
canvasRef.current.height =
36-
canvasRef.current && canvasRef.current.parentElement ? canvasRef.current.parentElement.offsetHeight : 0;
37-
signaturePadRef.current?.redraw();
38-
}
39-
};
25+
const { canvasRef, onResize } = useSignaturePad(props, handleSignEnd);
4026

4127
return (
4228
<SizeContainer

‎packages/pluggableWidgets/signature-web/src/components/SizeContainer.ts‎

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,31 @@
11
import { createElement, CSSProperties, FC, PropsWithChildren } from "react";
22
import classNames from "classnames";
33
import { useResizeObserver } from "../utils/useResizeObserver";
4-
import { Dimensions, HeightUnitType, WidthUnitType } from "../utils/customTypes";
4+
// import { Dimensions, HeightUnitType, WidthUnitType } from "../utils/customTypes";
5+
import { constructWrapperStyle, DimensionsProps } from "../utils/dimensions";
56

6-
export interface SizeProps extends Dimensions, PropsWithChildren {
7+
export interface SizeProps extends DimensionsProps, PropsWithChildren {
78
className: string;
89
classNameInner?: string;
910
readOnly?: boolean;
1011
style?: CSSProperties;
1112
onResize?: () => void;
1213
}
1314

14-
export const SizeContainer: FC<SizeProps> = ({
15-
className,
16-
classNameInner,
17-
widthUnit,
18-
width,
19-
heightUnit,
20-
height,
21-
children,
22-
style,
23-
readOnly = false,
24-
onResize
25-
}) => {
15+
export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
16+
const { className, children, classNameInner, readOnly = false, style, onResize } = props;
2617
const ref = useResizeObserver(() => onResize?.());
2718

28-
const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
19+
// const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
20+
const wrapperStyle = constructWrapperStyle(props);
2921
return createElement(
3022
"div",
3123
{
3224
ref,
3325
className: classNames(className, "size-box"),
3426
style: {
3527
position: "relative",
36-
width: styleWidth,
37-
...getHeight(heightUnit, height, widthUnit, width),
28+
...wrapperStyle,
3829
...style
3930
}
4031
},
@@ -59,26 +50,26 @@ export const SizeContainer: FC<SizeProps> = ({
5950

6051
SizeContainer.displayName = "SizeContainer";
6152

62-
const getHeight = (
63-
heightUnit: HeightUnitType,
64-
height: number,
65-
widthUnit: WidthUnitType,
66-
width: number
67-
): CSSProperties => {
68-
const style: CSSProperties = {};
69-
if (heightUnit === "percentageOfWidth") {
70-
const ratio = (height / 100) * width;
71-
if (widthUnit === "percentage") {
72-
style.height = "auto";
73-
style.paddingBottom = `${ratio}%`;
74-
} else {
75-
style.height = `${ratio}px`;
76-
}
77-
} else if (heightUnit === "pixels") {
78-
style.height = `${height}px`;
79-
} else if (heightUnit === "percentageOfParent") {
80-
style.height = `${height}%`;
81-
}
53+
// const getHeight = (
54+
// heightUnit: HeightUnitType,
55+
// height: number,
56+
// widthUnit: WidthUnitType,
57+
// width: number
58+
// ): CSSProperties => {
59+
// const style: CSSProperties = {};
60+
// if (heightUnit === "percentageOfWidth") {
61+
// const ratio = (height / 100) * width;
62+
// if (widthUnit === "percentage") {
63+
// style.height = "auto";
64+
// style.paddingBottom = `${ratio}%`;
65+
// } else {
66+
// style.height = `${ratio}px`;
67+
// }
68+
// } else if (heightUnit === "pixels") {
69+
// style.height = `${height}px`;
70+
// } else if (heightUnit === "percentageOfParent") {
71+
// style.height = `${height}%`;
72+
// }
8273

83-
return style;
84-
};
74+
// return style;
75+
// };

0 commit comments

Comments
 (0)