From ec0e77ed1659d930b178b4d89240481156c1daf1 Mon Sep 17 00:00:00 2001
From: andreas <andreas@wellenvogel.de>
Date: Mon, 2 Dec 2024 18:36:39 +0100
Subject: [PATCH] rewrite DialogButton

---
 viewer/components/DialogButton.jsx | 28 ++++++++++++----------------
 viewer/util/GuiHelpers.js          |  3 +++
 viewer/util/keys.jsx               |  1 -
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/viewer/components/DialogButton.jsx b/viewer/components/DialogButton.jsx
index 8958c794..592edec5 100644
--- a/viewer/components/DialogButton.jsx
+++ b/viewer/components/DialogButton.jsx
@@ -1,27 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import GuiHelper from '../util/GuiHelpers.js';
+import {useKeyEventHandlerPlain} from '../util/GuiHelpers.js';
 import KeyHandler from '../util/keyhandler';
 
-class DialogButton extends React.Component {
-    constructor(props){
-        super(props);
-        KeyHandler.registerDialogComponent("dialogButton");
-        GuiHelper.keyEventHandler(this,(component,action)=>{
-            if (this.props.onClick && ! this.props.disabled && this.props.visible !== false) this.props.onClick();
-        },"dialogButton",this.props.name);
-    }
-    render() {
-        let {icon,style,disabled,visible,...forward}=this.props;
+const COMPONENT="dialogButton";
+const DialogButton=(props)=>{
+        KeyHandler.registerDialogComponent(COMPONENT);
+        useKeyEventHandlerPlain(props.name,COMPONENT,()=>{
+            if (props.onClick && ! props.disabled && props.visible !== false) props.onClick();
+        });
+        let {icon,style,disabled,visible,name,className,toggle,children,...forward}=props;
         if (visible === false) return null;
-        let className = this.props.className || "";
-        className += " dialogButton " + this.props.name;
+        if (className === undefined) className="";
+        className += " dialogButton " + name;
         let spanStyle={};
         if (icon !== undefined) {
             className+=" icon";
             spanStyle.backgroundImage = "url(" + icon + ")";
         }
-        className+=this.props.toggle?" active":" inactive";
+        className+=toggle?" active":" inactive";
         let add = {};
         if (disabled) {
             add.disabled = true;
@@ -29,11 +26,10 @@ class DialogButton extends React.Component {
         return (
             <button {...forward} {...add} className={className}>
             <span style={spanStyle}/>
-                {this.props.children}
+                {children}
             </button>
         );
     }
-}
 
 DialogButton.propTypes={
     onClick: PropTypes.func,
diff --git a/viewer/util/GuiHelpers.js b/viewer/util/GuiHelpers.js
index 26cb454e..19181f15 100644
--- a/viewer/util/GuiHelpers.js
+++ b/viewer/util/GuiHelpers.js
@@ -291,6 +291,9 @@ export const useKeyEventHandler=(props,component,opt_callback)=>{
         }
     },[])
 }
+export const useKeyEventHandlerPlain=(name,component,callback)=>{
+    return useKeyEventHandler({name:name},component,callback);
+}
 
 //from https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling
 //returns:
diff --git a/viewer/util/keys.jsx b/viewer/util/keys.jsx
index 58f9581a..694285bf 100644
--- a/viewer/util/keys.jsx
+++ b/viewer/util/keys.jsx
@@ -238,7 +238,6 @@ let keys={
             propertySequence:K,
             propertiesLoaded: K,
             hasActiveInputs: K,
-            currentDialog: K, //holds the data for the currently visible dialog - if any
             windowDimensions: K,
             layoutEditing:K,
             layoutSequence: K, //updated on layout load