fix: convert size container into jsx and add filename property

Author: gjulivan

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

@@ -10,6 +10,10 @@
                     <caption>Image value</caption>
                     <description />
                 </property>
+                <property key="fileName" type="textTemplate" required="false">
+                    <caption>File name</caption>
+                    <description>Custom filename for the file (without extension). If empty, generates automatically based on format and value.</description>
+                </property>
                 <property key="hasSignatureAttribute" type="attribute" required="false">
                     <caption>Has signature</caption>
                     <description>Optional boolean attribute, which will be set to true after the canvas is signed. When the attribute is set to false, the signature is cleared, but will not clear the stored image</description>

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

@@ -10,13 +10,14 @@ import { SignatureProps } from "../utils/customTypes";
 import Utils from "../utils/Utils";
 
 export function SignatureComponent(props: SignatureProps): ReactElement {
-    const { className, alertMessage, wrapperStyle, imageSource, onSignEndAction } = props;
+    const { className, alertMessage, wrapperStyle, imageSource, fileName, onSignEndAction } = props;
     const readOnly = imageSource.readOnly;
     const showGrid = props.showGrid && !readOnly;
 
     const handleSignEnd = (imageDataUrl?: string): void => {
         if (imageDataUrl) {
-            imageSource.setValue(Utils.convertUrlToBlob(imageDataUrl));
+            const customFileName = fileName?.value || Utils.generateFileName("signature");
+            imageSource.setValue(Utils.convertUrlToBlob(imageDataUrl, customFileName));
         }
 
         // Trigger microflow to update signature attribute

…ture-web/src/components/SizeContainer.ts …ure-web/src/components/SizeContainer.tsxpackages/pluggableWidgets/signature-web/src/components/SizeContainer.ts renamed to packages/pluggableWidgets/signature-web/src/components/SizeContainer.tsx packages/pluggableWidgets/signature-web/src/components/SizeContainer.ts renamed to packages/pluggableWidgets/signature-web/src/components/SizeContainer.tsx

@@ -1,5 +1,5 @@
-import { createElement, CSSProperties, FC, PropsWithChildren } from "react";
 import classNames from "classnames";
+import { CSSProperties, FC, PropsWithChildren } from "react";
 import { useResizeObserver } from "@mendix/widget-plugin-hooks/useResizeObserver";
 import { constructWrapperStyle, DimensionsProps } from "../utils/dimensions";
 
@@ -13,35 +13,23 @@ export interface SizeProps extends DimensionsProps, PropsWithChildren {
 
 export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
     const { className, children, classNameInner, readOnly = false, style, onResize } = props;
-    const ref = useResizeObserver(() => onResize?.());
+    const ref = useResizeObserver(() => onResize?.()) as React.RefObject<HTMLDivElement>;
     const wrapperStyle = constructWrapperStyle(props);
-    return createElement(
-        "div",
-        {
-            ref,
-            className: classNames(className, "size-box"),
-            style: {
+
+    return (
+        <div
+            ref={ref}
+            className={classNames(className, "size-box")}
+            style={{
                 position: "relative",
                 ...wrapperStyle,
                 ...style
-            }
-        },
-        createElement(
-            "div",
-            {
-                className: classNames("size-box-inner", classNameInner),
-                readOnly,
-                disabled: readOnly,
-                style: {
-                    position: "absolute",
-                    top: "0",
-                    right: "0",
-                    bottom: "0",
-                    left: "0"
-                }
-            },
-            children
-        )
+            }}
+        >
+            <div className={classNames("size-box-inner", classNameInner)} aria-disabled={readOnly}>
+                {children}
+            </div>
+        </div>
     );
 };
 

packages/pluggableWidgets/signature-web/src/ui/Signature.scss

@@ -15,4 +15,12 @@
     .alert {
         position: absolute;
     }
+
+    .size-box-inner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
 }

packages/pluggableWidgets/signature-web/src/utils/Utils.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export default class Utils {
-    static convertUrlToBlob(base64Uri: string): Blob {
+    static convertUrlToBlob(base64Uri: string, fileName: string): File {
         const contentType = "image/png";
         const sliceSize = 512;
         const byteCharacters = atob(base64Uri.split(";base64,")[1]);
@@ -16,6 +16,29 @@ export default class Utils {
             byteArrays.push(byteArray);
         }
 
-        return new Blob(byteArrays, { type: contentType });
+        const blob = new Blob(byteArrays, { type: contentType });
+        const fullFileName = fileName.endsWith(".png") ? fileName : `${fileName}.png`;
+        return new File([blob], fullFileName, { type: contentType });
+    }
+
+    static generateFileName(prefix: string): string {
+        // Auto-generate filename with format and hash
+        const timestamp = Utils.generateTimestamp();
+        return `${prefix}_${timestamp}.png`;
+    }
+
+    static generateTimestamp(): string {
+        // Get current date and time
+        const now = new Date();
+
+        // Format: YYYYMMDD_HHMMSS
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, "0");
+        const day = String(now.getDate()).padStart(2, "0");
+        const hours = String(now.getHours()).padStart(2, "0");
+        const minutes = String(now.getMinutes()).padStart(2, "0");
+        const seconds = String(now.getSeconds()).padStart(2, "0");
+
+        return `${year}${month}${day}_${hours}${minutes}${seconds}`;
     }
 }

packages/pluggableWidgets/signature-web/typings/SignatureProps.d.ts

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { CSSProperties } from "react";
-import { ActionValue, EditableValue, EditableImageValue, Option, WebImage } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, EditableImageValue, Option, WebImage } from "mendix";
 
 export type PenTypeEnum = "fountain" | "ballpoint" | "marker";
 
@@ -24,6 +24,7 @@ export interface SignatureContainerProps {
     style?: CSSProperties;
     tabIndex?: number;
     imageSource: EditableImageValue<WebImage>;
+    fileName?: DynamicValue<string>;
     hasSignatureAttribute?: EditableValue<boolean>;
     penType: PenTypeEnum;
     penColor: string;
@@ -56,6 +57,7 @@ export interface SignaturePreviewProps {
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
     imageSource: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+    fileName: string;
     hasSignatureAttribute: string;
     penType: PenTypeEnum;
     penColor: string;