Merge pull request #376 from eccenca/fix/activityControlWidgetHooks

Fix conditional hook problem in ActivityControlWidget

Author: haschek

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -222,42 +222,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
             >
                 {activityActions &&
-                    activityActions.map((action, idx) => {
-                        const actionButtonRef = React.useRef(null);
-                        const ActionButton = () => (
-                            <IconButton
-                                data-test-id={action["data-test-id"]}
-                                data-testid={action["data-testid"]}
-                                name={action.icon}
-                                text={action.tooltip}
-                                onClick={action.action}
-                                disabled={action.disabled}
-                                intent={action.hasStateWarning ? "warning" : undefined}
-                                tooltipProps={{
-                                    hoverOpenDelay: 200,
-                                    placement: "bottom"
-                                }}
-                                active={action.active}
-                            />
-                        )
-                        return action.notification ?
-                            <>
-                                <span key={idx} ref={actionButtonRef}>
-                                    <ActionButton />
-                                </span>
-                                {actionButtonRef.current && (
-                                    <DecoupledOverlay targetSelectorOrElement={actionButtonRef.current} paddingSize={"small"}>
-                                        <Notification
-                                            message={action.notification.message}
-                                            intent={action.notification.intent ?? "neutral"}
-                                            onDismiss={action.notification.onClose}
-                                            timeout={action.notification.timeout}
-                                        />
-                                    </DecoupledOverlay>
-                                )}
-                            </> :
-                            <ActionButton key={idx} />
-                    })}
+                    activityActions.map((action, idx) => <ActivityActionButton
+                            key={idx}
+                            action={action}
+                        />
+                    )}
                 {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
@@ -290,3 +259,44 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
         <div className={classname}>{widget}</div>
     );
 }
+
+interface ActivityActionButtonProps {
+    action: ActivityControlWidgetAction
+}
+
+const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
+    const actionButtonRef = React.useRef(null);
+    const ActionButton = () => (
+        <IconButton
+            data-test-id={action["data-test-id"]}
+            data-testid={action["data-testid"]}
+            name={action.icon}
+            text={action.tooltip}
+            onClick={action.action}
+            disabled={action.disabled}
+            intent={action.hasStateWarning ? "warning" : undefined}
+            tooltipProps={{
+                hoverOpenDelay: 200,
+                placement: "bottom"
+            }}
+            active={action.active}
+        />
+    )
+    return action.notification ?
+        <>
+                                <span ref={actionButtonRef}>
+                                    <ActionButton/>
+                                </span>
+            {actionButtonRef.current && (
+                <DecoupledOverlay targetSelectorOrElement={actionButtonRef.current} paddingSize={"small"}>
+                    <Notification
+                        message={action.notification.message}
+                        intent={action.notification.intent ?? "neutral"}
+                        onDismiss={action.notification.onClose}
+                        timeout={action.notification.timeout}
+                    />
+                </DecoupledOverlay>
+            )}
+        </> :
+        <ActionButton/>
+}