diff --git a/package-lock.json b/package-lock.json index 1bedea6..1800c8e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ab80eed..9019284 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..812ac4a --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/src/components/Qr.css b/src/components/Qr.css index 3f7c7d2..945aadd 100644 --- a/src/components/Qr.css +++ b/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; diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx index d808fc2..b55694c 100644 --- a/src/components/Qr.tsx +++ b/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(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(null); const dragOverItem = React.useRef(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()

Qr-Code Druck

Zurück zum Profil - -
- -
{fontSize}
- -
-
- 0} - changeEvent={checkBoxChange} - /> +
+
Schriftgröße
+
+ +
{fontSize}
+ +
+
+
Sichtbare Elemente
0} - changeEvent={checkBoxChange} - /> - 0} - changeEvent={checkBoxChange} - /> -
-
- {itemList.map((item, index) => ( -
(dragItem.current = index)} - onDragEnter={(e) => (dragOverItem.current = index)} - onDragEnd={handleSort} - onDragOver={(e) => e.preventDefault()}> -
{item.name}
-
- ))} + id='name' + label={'Name'} + checked={(visibleItem & 0b100) > 0} + changeEvent={checkBoxChange} + /> + 0} + changeEvent={checkBoxChange} + /> + 0} + changeEvent={checkBoxChange} + /> +
+
Reihenfolge
+
+ {itemList.map((item, index) => ( +
(dragItem.current = index)} + onDragEnter={(e) => (dragOverItem.current = index)} + onDragEnd={handleSort} + onDragOver={(e) => e.preventDefault()}> +
{item.name}
+
+ ))} +