feat(events-web): implement useDelayAndInterval hook for managing delay and interval values

Author: yordan-st

packages/pluggableWidgets/events-web/CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this widget will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.1.0] - 2025-07-14
+## [Unreleased]
 
 ### Added
 

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

@@ -3,6 +3,7 @@ import { EditableValue } from "mendix";
 import { ReactElement, createElement, useRef } from "react";
 import { EventsContainerProps } from "../typings/EventsProps";
 import { useActionTimer } from "./hooks/timer";
+import { useDelayAndInterval } from "./hooks/delayAndInterval";
 import "./ui/Events.scss";
 
 export default function Events(props: EventsContainerProps): ReactElement {
@@ -23,38 +24,24 @@ export default function Events(props: EventsContainerProps): ReactElement {
         onEventChangeDelayExpression
     } = props;
     const prevOnChangeAttributeValue = useRef<EditableValue<any> | undefined>();
-    let loadDelay;
-    let repeatInterval;
-    let onEventChangeDelay;
-    if (componentLoadDelayParameterType === "number") {
-        loadDelay = componentLoadDelayInteger;
-    } else {
-        loadDelay =
-            componentLoadDelayExpression.status === "available"
-                ? componentLoadDelayExpression.value.toNumber()
-                : undefined;
-    }
-    if (componentLoadRepeatParameterType === "number") {
-        repeatInterval = componentLoadRepeatInterval;
-    } else {
-        repeatInterval =
-            componentLoadRepeatExpression?.status === "available"
-                ? componentLoadRepeatExpression.value.toNumber()
-                : undefined;
-    }
-    if (onEventChangeDelayParameterType === "number") {
-        onEventChangeDelay = onEventChangeDelayInteger;
-    } else {
-        onEventChangeDelay =
-            onEventChangeDelayExpression?.status === "available"
-                ? onEventChangeDelayExpression.value.toNumber()
-                : undefined;
-    }
+
+    const [delayValue, intervalValue] = useDelayAndInterval({
+        componentLoadDelayParameterType,
+        componentLoadRepeatParameterType,
+        onEventChangeDelayParameterType,
+        componentLoadDelayInteger,
+        componentLoadRepeatInterval,
+        onEventChangeDelayInteger,
+        componentLoadRepeatExpression,
+        componentLoadDelayExpression,
+        onEventChangeDelayExpression
+    });
+
     useActionTimer({
         canExecute: onComponentLoad?.canExecute,
         execute: onComponentLoad?.execute,
-        delay: loadDelay,
-        interval: repeatInterval,
+        delay: delayValue,
+        interval: intervalValue,
         repeat: componentLoadRepeat,
         attribute: undefined
     });
@@ -73,7 +60,7 @@ export default function Events(props: EventsContainerProps): ReactElement {
                 }
             }
         },
-        delay: onEventChangeDelay,
+        delay: delayValue,
         interval: 0,
         repeat: false,
         attribute: onEventChangeAttribute

packages/pluggableWidgets/events-web/src/hooks/delayAndInterval.ts

@@ -0,0 +1,52 @@
+interface ParameterTypeProps {
+    componentLoadDelayParameterType: string;
+    componentLoadRepeatParameterType: string;
+    onEventChangeDelayParameterType: string;
+    componentLoadDelayInteger?: number;
+    componentLoadRepeatInterval?: number;
+    onEventChangeDelayInteger?: number;
+    componentLoadRepeatExpression?: { status: string; value: { toNumber: () => number } | undefined };
+    componentLoadDelayExpression?: { status: string; value: { toNumber: () => number } | undefined };
+    onEventChangeDelayExpression?: { status: string; value: { toNumber: () => number } | undefined };
+}
+
+export function useDelayAndInterval(props: ParameterTypeProps): [number | undefined, number | undefined] {
+    let delayValue: number | undefined;
+    let intervalValue: number | undefined;
+    const {
+        componentLoadDelayParameterType,
+        componentLoadRepeatParameterType,
+        onEventChangeDelayParameterType,
+        componentLoadDelayInteger,
+        componentLoadRepeatInterval,
+        onEventChangeDelayInteger,
+        componentLoadRepeatExpression,
+        componentLoadDelayExpression,
+        onEventChangeDelayExpression
+    } = props;
+    if (componentLoadDelayParameterType === "number") {
+        delayValue = componentLoadDelayInteger;
+    } else {
+        delayValue =
+            componentLoadDelayExpression?.status === "available" && componentLoadDelayExpression.value !== undefined
+                ? componentLoadDelayExpression.value.toNumber()
+                : undefined;
+    }
+    if (componentLoadRepeatParameterType === "number") {
+        intervalValue = componentLoadRepeatInterval;
+    } else {
+        intervalValue =
+            componentLoadRepeatExpression?.status === "available" && componentLoadRepeatExpression.value !== undefined
+                ? componentLoadRepeatExpression.value.toNumber()
+                : undefined;
+    }
+    if (onEventChangeDelayParameterType === "number") {
+        delayValue = onEventChangeDelayInteger;
+    } else {
+        delayValue =
+            onEventChangeDelayExpression?.status === "available" && onEventChangeDelayExpression.value !== undefined
+                ? onEventChangeDelayExpression.value.toNumber()
+                : undefined;
+    }
+    return [delayValue, intervalValue];
+}