fix: based on code review

Author: gjulivan

packages/pluggableWidgets/events-web/package.json

@@ -53,11 +53,9 @@
     "@mendix/widget-plugin-hooks": "workspace:*",
     "@mendix/widget-plugin-platform": "workspace:*",
     "@mendix/widget-plugin-test-utils": "workspace:*",
-    "@types/deep-equal": "^1.0.1",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "classnames": "^2.3.2",
-    "deep-equal": "^2.2.3"
+    "classnames": "^2.3.2"
   }
 }

packages/pluggableWidgets/events-web/src/Events.editorConfig.ts

@@ -1,7 +1,11 @@
 import { Properties, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
 import {
     StructurePreviewProps,
-    structurePreviewPalette
+    structurePreviewPalette,
+    rowLayout,
+    container,
+    svgImage,
+    text
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { EventsPreviewProps } from "../typings/EventsProps";
 
@@ -21,55 +25,33 @@ export function getProperties(
 }
 
 export function getPreview(values: EventsPreviewProps, isDarkMode: boolean): StructurePreviewProps {
-    const eventsCount = Number(!!values.onComponentLoad) + Number(!!values.onEventChange);
+    const eventsCount = getEventsCount(values);
 
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const activeSVG = isDarkMode ? EventsPreviewDarkSVGActive : EventsPreviewSVGActive;
     const normalSVG = isDarkMode ? EventsPreviewDarkSVG : EventsPreviewSVG;
     const variant = eventsCount > 0 ? activeSVG : normalSVG;
     const doc = decodeURIComponent(variant.replace("data:image/svg+xml,", ""));
 
-    return {
-        type: "RowLayout",
-        columnSize: "grow",
-        borders: true,
-        backgroundColor: palette.background.containerFill,
-        children: [
-            {
-                type: "Container"
-            },
-            {
-                type: "RowLayout", // fills space on the right
-                grow: 2,
-                padding: 8,
-                children: [
-                    {
-                        type: "Image",
-                        document: doc,
-                        height: 15,
-                        grow: 1,
-                        width: 15
-                    },
-                    {
-                        type: "Text",
-                        content:
-                            eventsCount <= 0
-                                ? "[Configure events]"
-                                : `[${eventsCount}] Event${eventsCount > 1 ? "s" : ""}`,
-                        fontColor: palette.text.primary,
-                        grow: 10
-                    }
-                ]
-            },
-            {
-                type: "Container"
-            }
-        ]
-    };
+    return rowLayout({ columnSize: "grow", borders: true, backgroundColor: palette.background.containerFill })(
+        container()(),
+        rowLayout({ grow: 2, padding: 8 })(
+            svgImage(doc, 15, 15),
+            text({ fontColor: palette.text.primary, grow: 10 })(getCaption(eventsCount))
+        ),
+        container()()
+    );
 }
 
 export function getCustomCaption(values: EventsPreviewProps, _platform = "desktop"): string {
-    const eventsCount = Number(!!values.onComponentLoad) + Number(!!values.onEventChange);
+    const caption = getCaption(getEventsCount(values));
+    return caption;
+}
+
+export function getEventsCount(values: EventsPreviewProps): number {
+    return Number(!!values.onComponentLoad) + Number(!!values.onEventChange);
+}
 
+export function getCaption(eventsCount: number): string {
     return eventsCount <= 0 ? "[Configure events]" : `[${eventsCount}] Event${eventsCount > 1 ? "s" : ""}`;
 }

packages/pluggableWidgets/events-web/src/Events.editorPreview.tsx

@@ -2,15 +2,16 @@ import { ReactElement, createElement } from "react";
 import { EventsIcon } from "./assets/icons";
 import "./ui/EventsPreview.css";
 import { EventsPreviewProps } from "typings/EventsProps";
+import { getEventsCount, getCaption } from "./Events.editorConfig";
 import classNames from "classnames";
 
 export function preview(props: EventsPreviewProps): ReactElement {
-    const eventsCount = Number(!!props.onComponentLoad) + Number(!!props.onEventChange);
+    const eventsCount = getEventsCount(props);
 
     return (
         <div className={classNames("widget-events-preview", { active: eventsCount > 0 })}>
             <EventsIcon isActive={eventsCount > 0} />
-            {eventsCount <= 0 ? "[Configure events]" : `[${eventsCount}] Event${eventsCount > 1 ? "s" : ""}`}
+            {getCaption(eventsCount)}
         </div>
     );
 }

packages/pluggableWidgets/events-web/src/Events.tsx

@@ -12,7 +12,7 @@ export default function Events(props: EventsContainerProps): ReactElement {
         componentLoadDelay,
         componentLoadRepeat,
         componentLoadRepeatInterval,
-        optionsSourceAttributeDataSource,
+        onEventChangeAttribute,
         onEventChange,
         onEventChangeDelay
         // optionsSourceType
@@ -29,23 +29,23 @@ export default function Events(props: EventsContainerProps): ReactElement {
     useActionTimer({
         canExecute: onEventChange?.canExecute,
         execute: () => {
-            if (optionsSourceAttributeDataSource?.status === "loading") {
+            if (onEventChangeAttribute?.status === "loading") {
                 return;
             }
             if (prevOnChangeAttributeValue?.current?.value === undefined) {
                 // ignore initial load
-                prevOnChangeAttributeValue.current = optionsSourceAttributeDataSource;
+                prevOnChangeAttributeValue.current = onEventChangeAttribute;
             } else {
-                if (optionsSourceAttributeDataSource?.value !== prevOnChangeAttributeValue.current?.value) {
-                    prevOnChangeAttributeValue.current = optionsSourceAttributeDataSource;
+                if (onEventChangeAttribute?.value !== prevOnChangeAttributeValue.current?.value) {
+                    prevOnChangeAttributeValue.current = onEventChangeAttribute;
                     onEventChange?.execute();
                 }
             }
         },
         delay: onEventChangeDelay,
         interval: 0,
         repeat: false,
-        attribute: optionsSourceAttributeDataSource
+        attribute: onEventChangeAttribute
     });
     return <div className={classnames("widget-events", className)}></div>;
 }

packages/pluggableWidgets/events-web/src/Events.xml

@@ -25,7 +25,7 @@
                 </property>
             </propertyGroup>
             <propertyGroup caption="On change">
-                <property key="optionsSourceAttributeDataSource" type="attribute" required="false">
+                <property key="onEventChangeAttribute" type="attribute" required="false">
                     <caption>Attribute</caption>
                     <description />
                     <attributeTypes>

packages/pluggableWidgets/events-web/typings/EventsProps.d.ts

@@ -16,7 +16,7 @@ export interface EventsContainerProps {
     componentLoadDelay: number;
     componentLoadRepeat: boolean;
     componentLoadRepeatInterval: number;
-    optionsSourceAttributeDataSource?: EditableValue<Big | any | boolean | Date | string>;
+    onEventChangeAttribute?: EditableValue<Big | any | boolean | Date | string>;
     onEventChange?: ActionValue;
     onEventChangeDelay: number;
 }
@@ -34,7 +34,7 @@ export interface EventsPreviewProps {
     componentLoadDelay: number | null;
     componentLoadRepeat: boolean;
     componentLoadRepeatInterval: number | null;
-    optionsSourceAttributeDataSource: string;
+    onEventChangeAttribute: string;
     onEventChange: {} | null;
     onEventChangeDelay: number | null;
 }