button geht nicht; qr

package-lock.json

@@ -20,6 +20,7 @@
         "env-cmd": "^10.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-repeatable": "^2.0.1",
         "react-router-dom": "^6.4.5",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
@@ -5370,6 +5371,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/chained-function": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/chained-function/-/chained-function-0.5.0.tgz",
+      "integrity": "sha512-Cq1nLFdK/dxHZNLjmA+LpH4ABI4knigZoCQEDzZt6AAG0GlylcRlTSu2qbwq3O5fJ8TosEJwB0YjtpHsb2FIGA=="
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -14030,6 +14036,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-repeatable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-repeatable/-/react-repeatable-2.0.1.tgz",
+      "integrity": "sha512-i4IA2s+1Fo59VtVN3lPi2sYUv3etug846YbT2gXBPNo+qfoAmoi2kDWY/truOqAxxza67wR67wqGEQYHVctDWw==",
+      "dependencies": {
+        "chained-function": "^0.5.0",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || >=15.0.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.5.tgz",

package.json

@@ -15,6 +15,7 @@
     "env-cmd": "^10.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-repeatable": "^2.0.1",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",

src/components/Button.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react'
+
+let timer : NodeJS.Timer; //you need to have a global variable for your `timer`
+
+export default function Button(
+    { 
+        label, 
+        MouseAction,
+    }:
+    { 
+        label: string, 
+        MouseAction: () => void
+    }
+        ) 
+{
+    const [mouseDown, setMouseDown] = useState(false);
+    const [forceRender, setForceRender] = useState(0);
+  
+    useEffect(() => 
+    {
+      if(mouseDown) 
+      { //if holding mouse, we trigger `repeat`
+        repeat(() => 
+        {
+            MouseAction();
+            //setForceRender(forceRender + 1);
+            //console.log("\nuseEffect mouseDown " + forceRender);
+        });
+      } 
+      else 
+      {
+        stop() //stop it if releasing mouse holding
+        //console.log("\nuseEffect stop " + forceRender);
+    }
+    }, [mouseDown, MouseAction]) //to track mouse holding behaviour changes
+  
+    const repeat = (what: () => void) =>   
+    {
+        timer = setInterval(what, 100)
+    };
+    
+    function start()
+    {
+        console.log("\nstart");
+        setMouseDown(true);
+    }
+
+    function stop()
+    {
+        console.log("\nstop");
+        clearInterval(timer);
+        setMouseDown(false);
+    }
+
+    return (
+    <div>
+        <button 
+            onMouseDown={start}
+            onMouseUp={stop}
+        >{label}</button>     
+    </div>
+  )
+}

src/components/Qr.css

@@ -19,7 +19,14 @@ img
 {
     display: flex;
     flex-direction: row;
+}
 
+.qrSettings
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .vertFont
@@ -38,6 +45,14 @@ img
     width: 2.4cm;
 }
 
+.spinBtn
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
 .frame
 {
     border-style: solid;

src/components/Qr.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
 import Checkbox from './Checkbox';
@@ -11,7 +11,6 @@ type ListItemT =
     ordernum: number;
 }
 
-
 export default function Qr() 
 {
     const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
@@ -24,25 +23,29 @@ export default function Qr()
                                                 {name:'Telefon', ordernum: 2},
                                                 {name:'Email', ordernum: 3}
                                              ]);
+                                             
     //save reference for dragItem and dragOverItem
     const dragItem = React.useRef<any>(null);
     const dragOverItem = React.useRef<any>(null);
 
-    function incrementFontSize()  
+    const incrementFontSize = (():void =>
     {
         if(fontSize < 200)
         {
             setFontSize(fontSize + 1);
         }
-    }
 
-    function decrementFontSize() 
+        console.log("\nincrementFontSize " + fontSize);
+    });
+
+    const decrementFontSize = (():void =>  
     {
         if(fontSize > 1)
         {
-            setFontSize(fontSize - 1);
+            setFontSize(fontSize -1);
         }
-    }
+        console.log("\ndecrementFontSize " + fontSize);
+    });
 
     function setBitField(val: number, checked: boolean, bit: number) : number
     {
@@ -132,45 +135,49 @@ export default function Qr()
             <div>
                 <h1>Qr-Code Druck</h1>
                 <Link to={"/profil"}>Zurück zum Profil</Link>
-
+                <div className='qrSettings'>
-                <div> 
+                    <div>Schriftgröße</div>
-                    <button onClick={incrementFontSize}>up</button>
+                    <div className='spinBtn'> 
-                    <div>{fontSize}</div>
+                        <button onClick={decrementFontSize}>-</button>
-                    <button onClick={decrementFontSize}>down</button>
+                        <div>{fontSize}</div>
-                </div>
+                        <button onClick={incrementFontSize}>+</button>
-                <div>
+                    </div>
-                <Checkbox 
+                    <div>
-                        id='name' 
+                    <div>Sichtbare Elemente</div>
-                        label={'Name'} 
-                        checked={(visibleItem & 0b100) > 0} 
-                        changeEvent={checkBoxChange}
-                        />
                     <Checkbox 
-                        id='phone' 
+                            id='name' 
-                        label={'Telefon'} 
+                            label={'Name'} 
-                        checked={(visibleItem & 0b010) > 0} 
+                            checked={(visibleItem & 0b100) > 0} 
-                        changeEvent={checkBoxChange}
+                            changeEvent={checkBoxChange}
-                        />
+                            />
-                    <Checkbox 
+                        <Checkbox 
-                        id='email' 
+                            id='phone' 
-                        label={'Email'} 
+                            label={'Telefon'} 
-                        checked={(visibleItem & 0b001) > 0} 
+                            checked={(visibleItem & 0b010) > 0} 
-                        changeEvent={checkBoxChange}
+                            changeEvent={checkBoxChange}
-                        />
+                            />
-                </div>
+                        <Checkbox 
-                <div className="list-container">
+                            id='email' 
-				{itemList.map((item, index) => (
+                            label={'Email'} 
-					<div
+                            checked={(visibleItem & 0b001) > 0} 
-						key={index}
+                            changeEvent={checkBoxChange}
-						className="list-item"
+                            />
-						draggable
+                    </div>
-						onDragStart={(e) => (dragItem.current = index)}
+                    <div>Reihenfolge</div>
-						onDragEnter={(e) => (dragOverItem.current = index)}
+                    <div className="list-container">
-						onDragEnd={handleSort}
+                    {itemList.map((item, index) => (
-						onDragOver={(e) => e.preventDefault()}>
+                        <div
-						<h6>{item.name}</h6>
+                            key={index}
-					</div>
+                            className="list-item"
-				))}
+                            draggable
+                            onDragStart={(e) => (dragItem.current = index)}
+                            onDragEnter={(e) => (dragOverItem.current = index)}
+                            onDragEnd={handleSort}
+                            onDragOver={(e) => e.preventDefault()}>
+                            <h6>{item.name}</h6>
+                        </div>
+                    ))}
+                    </div>
                 </div>
                 
                 <div className='blockRepeat'>