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/src/Signature.editorConfig.ts

@@ -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.tsx

@@ -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} readOnly={props.imageSource.readOnly} className={className} />;
 }

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

@@ -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/components/Signature.tsx

@@ -17,8 +17,8 @@ export function SignatureComponent(props: SignatureProps): ReactElement {
         }
 
         // Trigger microflow to update signature attribute
-        if (onSignEndAction) {
-            onSignEndAction(imageDataUrl);
+        if (onSignEndAction && !onSignEndAction.isExecuting && onSignEndAction.canExecute) {
+            onSignEndAction.execute({ signatureImage: imageDataUrl });
         }
     };
 

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

@@ -1,17 +1,15 @@
 import { PenTypeEnum, SignatureContainerProps } from "../../typings/SignatureProps";
 
-export interface SignatureProps extends Omit<SignatureContainerProps, "onSignEndAction"> {
+export interface SignatureProps extends SignatureContainerProps {
     className: string;
     alertMessage?: string;
-    clearSignature: boolean;
     showGrid: boolean;
     gridCellWidth: number;
     gridCellHeight: number;
     gridBorderColor: string;
     gridBorderWidth: number;
     penType: PenTypeEnum;
     penColor: string;
-    onSignEndAction?: (imageUrl?: string) => void;
     wrapperStyle?: object;
     readOnly: boolean;
 }

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

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 
 export type WidthUnitEnum = "pixels" | "percentage";
 
-export type HeightUnitEnum = "percentageOfWidth" | "pixels" | "percentageOfParent" | "percentageOfView";
+export type HeightUnitEnum = "auto" | "pixels" | "percentageOfParent" | "percentageOfView";
 
 export type MinHeightUnitEnum = "none" | "pixels" | "percentageOfParent" | "percentageOfView";
 
@@ -19,22 +19,22 @@ export type DimensionsProps = {
     minHeight: number;
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number;
-    OverflowY: OverflowYEnum;
+    overflowY: OverflowYEnum;
 };
 
 function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
     return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
 }
 
 export function constructWrapperStyle(props: DimensionsProps): CSSProperties {
-    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
+    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, overflowY } =
         props;
 
     const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
         {};
 
     wrapperStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
-    if (heightUnit === "percentageOfWidth") {
+    if (heightUnit === "auto") {
         wrapperStyle.height = "auto";
 
         if (minHeightUnit !== "none") {
@@ -43,7 +43,7 @@ export function constructWrapperStyle(props: DimensionsProps): CSSProperties {
 
         if (maxHeightUnit !== "none") {
             wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
-            wrapperStyle.overflowY = OverflowY;
+            wrapperStyle.overflowY = overflowY;
         }
     } else {
         wrapperStyle.height = getHeightScale(height, heightUnit);

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

@@ -10,7 +10,7 @@ export type PenTypeEnum = "fountain" | "ballpoint" | "marker";
 
 export type WidthUnitEnum = "pixels" | "percentage";
 
-export type HeightUnitEnum = "percentageOfWidth" | "pixels" | "percentageOfParent" | "percentageOfView";
+export type HeightUnitEnum = "auto" | "pixels" | "percentageOfParent" | "percentageOfView";
 
 export type MinHeightUnitEnum = "none" | "pixels" | "percentageOfParent" | "percentageOfView";
 
@@ -35,7 +35,7 @@ export interface SignatureContainerProps {
     minHeight: number;
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number;
-    OverflowY: OverflowYEnum;
+    overflowY: OverflowYEnum;
     onSignEndAction?: ActionValue<{ signatureImage: Option<string> }>;
     showGrid: boolean;
     gridBorderColor: string;
@@ -67,7 +67,7 @@ export interface SignaturePreviewProps {
     minHeight: number | null;
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number | null;
-    OverflowY: OverflowYEnum;
+    overflowY: OverflowYEnum;
     onSignEndAction: {} | null;
     showGrid: boolean;
     gridBorderColor: string;