chore: update props and code cleanup

Author: gjulivan

packages/pluggableWidgets/signature-web/README.md

@@ -1,3 +1,3 @@
 <!-- TODO: Update marketplace URL -->
 
-Please see [App Events](https://docs.mendix.com/appstore/widgets/) in the Mendix documentation for details.
+Please see [Signature](https://docs.mendix.com/appstore/widgets/) in the Mendix documentation for details.

packages/pluggableWidgets/signature-web/mendix-pluggable-widgets-tools.tgz

@@ -20,7 +20,7 @@
     },
     "packagePath": "com.mendix.widget.web",
     "marketplace": {
-        "minimumMXVersion": "10.8.0",
+        "minimumMXVersion": "11.8.0",
         "appNumber": 107984,
         "appName": "Signature",
         "reactReady": true
@@ -58,7 +58,6 @@
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-hooks": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
-        "@mendix/widget-plugin-test-utils": "workspace:*",
-        "cross-env": "^7.0.3"
+        "@mendix/widget-plugin-test-utils": "workspace:*"
     }
 }

packages/pluggableWidgets/signature-web/package.json

@@ -16,15 +16,15 @@ export function getProperties(
     values: SignaturePreviewProps,
     defaultProperties: Properties /* , target: Platform*/
 ): Properties {
-    if (values.heightUnit === "percentageOfWidth") {
+    if (values.heightUnit === "auto") {
         hidePropertyIn(defaultProperties, values, "height");
     } else {
         hidePropertiesIn(defaultProperties, values, [
             "minHeight",
             "minHeightUnit",
             "maxHeight",
             "maxHeightUnit",
-            "OverflowY"
+            "overflowY"
         ]);
     }
 
@@ -33,7 +33,7 @@ export function getProperties(
     }
 
     if (values.maxHeightUnit === "none") {
-        hidePropertiesIn(defaultProperties, values, ["maxHeight", "OverflowY"]);
+        hidePropertiesIn(defaultProperties, values, ["maxHeight", "overflowY"]);
     }
 
     return defaultProperties;

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

@@ -1,25 +1,9 @@
-import { ReactElement, useCallback } from "react";
+import { ReactElement } from "react";
 import { SignatureContainerProps } from "../typings/SignatureProps";
 import { SignatureComponent } from "./components/Signature";
 import "./ui/Signature.scss";
 
 export default function Signature(props: SignatureContainerProps): ReactElement {
-    const { class: className, onSignEndAction } = props;
-    const handleSignEnd = useCallback(
-        (imageDataUrl?: string) => {
-            if (onSignEndAction && !onSignEndAction.isExecuting && onSignEndAction.canExecute) {
-                onSignEndAction.execute({ signatureImage: imageDataUrl });
-            }
-        },
-        [onSignEndAction]
-    );
-    return (
-        <SignatureComponent
-            readOnly={false}
-            {...props}
-            className={className}
-            onSignEndAction={handleSignEnd}
-            clearSignature={false}
-        />
-    );
+    const { class: className } = props;
+    return <SignatureComponent {...props} className={className} />;
 }

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

@@ -17,6 +17,7 @@
                         <attributeType name="Boolean" />
                     </attributeTypes>
                 </property>
+                <systemProperty key="Editability" />
             </propertyGroup>
             <propertyGroup caption="Appearance">
                 <property key="penType" type="enumeration" defaultValue="fountain">
@@ -52,7 +53,7 @@
                     <caption>Height unit</caption>
                     <description />
                     <enumerationValues>
-                        <enumerationValue key="percentageOfWidth">Auto</enumerationValue>
+                        <enumerationValue key="auto">Auto</enumerationValue>
                         <enumerationValue key="pixels">Pixels</enumerationValue>
                         <enumerationValue key="percentageOfParent">Percentage</enumerationValue>
                         <enumerationValue key="percentageOfView">Viewport</enumerationValue>
@@ -90,7 +91,7 @@
                     <caption>Maximum height</caption>
                     <description />
                 </property>
-                <property key="OverflowY" type="enumeration" defaultValue="auto">
+                <property key="overflowY" type="enumeration" defaultValue="auto">
                     <caption>Vertical Overflow</caption>
                     <description />
                     <enumerationValues>

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

@@ -5,17 +5,10 @@ export interface GridBackgroundProps {
     gridCellHeight: number;
     gridBorderColor: string;
     gridBorderWidth: number;
-    showGrid?: boolean;
 }
-export const Grid: FC<GridBackgroundProps> = ({
-    gridCellWidth,
-    gridCellHeight,
-    gridBorderColor,
-    gridBorderWidth,
-    showGrid = true
-}) => {
+export const Grid: FC<GridBackgroundProps> = ({ gridCellWidth, gridCellHeight, gridBorderColor, gridBorderWidth }) => {
     const id = useId();
-    return showGrid ? (
+    return (
         <svg className="widget-signature-grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
             <defs>
                 <pattern id={id} width={gridCellWidth} height={gridCellHeight} patternUnits="userSpaceOnUse">
@@ -39,7 +32,7 @@ export const Grid: FC<GridBackgroundProps> = ({
             </defs>
             <rect width="100%" height="100%" fill={`url(#${id})`} />
         </svg>
-    ) : null;
+    );
 };
 
 Grid.displayName = "Grid";

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

@@ -2,23 +2,26 @@ import classNames from "classnames";
 import { ReactElement } from "react";
 
 import { useSignaturePad } from "src/utils/useSignaturePad";
-import Utils from "../utils/Utils";
-import { SignatureProps } from "../utils/customTypes";
 import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
+import { If } from "@mendix/widget-plugin-component-kit/If";
 import { Grid } from "./Grid";
 import { SizeContainer } from "./SizeContainer";
+import { SignatureProps } from "../utils/customTypes";
+import Utils from "../utils/Utils";
 
 export function SignatureComponent(props: SignatureProps): ReactElement {
     const { className, alertMessage, wrapperStyle, imageSource, onSignEndAction } = props;
+    const readOnly = imageSource.readOnly;
+    const showGrid = props.showGrid && !readOnly;
 
     const handleSignEnd = (imageDataUrl?: string): void => {
         if (imageDataUrl) {
             imageSource.setValue(Utils.convertUrlToBlob(imageDataUrl));
         }
 
         // Trigger microflow to update signature attribute
-        if (onSignEndAction) {
-            onSignEndAction(imageDataUrl);
+        if (onSignEndAction && !onSignEndAction.isExecuting && onSignEndAction.canExecute) {
+            onSignEndAction.execute({ signatureImage: imageDataUrl });
         }
     };
 
@@ -33,7 +36,9 @@ export function SignatureComponent(props: SignatureProps): ReactElement {
             onResize={onResize}
         >
             <Alert bootstrapStyle="danger">{alertMessage}</Alert>
-            <Grid {...props} />
+            <If condition={showGrid}>
+                <Grid {...props} />
+            </If>
             <canvas className="widget-signature-canvas" ref={canvasRef} />
         </SizeContainer>
     );

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

@@ -1,6 +1,6 @@
 import { createElement, CSSProperties, FC, PropsWithChildren } from "react";
 import classNames from "classnames";
-import { useResizeObserver } from "../utils/useResizeObserver";
+import { useResizeObserver } from "@mendix/widget-plugin-hooks/useResizeObserver";
 import { constructWrapperStyle, DimensionsProps } from "../utils/dimensions";
 
 export interface SizeProps extends DimensionsProps, PropsWithChildren {

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

@@ -1,21 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export default class Utils {
-    static parseStyle(style = ""): { [key: string]: string } {
-        try {
-            return style.split(";").reduce<{ [key: string]: string }>((styleObject, line) => {
-                const pair = line.split(":");
-                if (pair.length === 2) {
-                    const name = pair[0].trim().replace(/(-.)/g, match => match[1].toUpperCase());
-                    styleObject[name] = pair[1].trim();
-                }
-                return styleObject;
-            }, {});
-        } catch (error) {
-            window.console.log("Failed to parse style", style, error);
-        }
-        return {};
-    }
-
     static convertUrlToBlob(base64Uri: string): Blob {
         const contentType = "image/png";
         const sliceSize = 512;