feat: adds simple functionality to buttons in number component

2026-05-04 02:34:17 +02:00 · 2023-09-14 10:10:11 +02:00
parent 27520864c4
commit bbee77e231
7 changed files with 30 additions and 10 deletions
@@ -267,6 +267,20 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
    setCursorPosition(selectionStart);
  };

+  const handleClick = (event, action: 'plus' | 'minus') => {
+    const keyAction = action == 'plus' ? 'ArrowUp' : 'ArrowDown';
+    const { value: newValue } = handleArrowKey(
+      keyAction,
+      inputString,
+      inputString.length,
+      inputString.length
+    );
+
+    emitUpdate(name, parentPath, Number(newValue));
+
+    setInputString(newValue);
+  };
+
  const handleBlur = () => {
    if (!isInstantUpdate) {
      // If not in "instant update" mode, emit an update when the input field loses focus
@@ -296,10 +310,16 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
        </InputGroup>
        {!readOnly && (
          <div className="d-flex flex-column">
-            <Button className="numberComponentButton" variant="outline-secondary">
+            <Button
+              className="numberComponentButton"
+              variant="outline-secondary"
+              onClick={(event) => handleClick(event, 'plus')}>
              +
            </Button>
-            <Button className="numberComponentButton" variant="outline-secondary">
+            <Button
+              className="numberComponentButton"
+              variant="outline-secondary"
+              onClick={(event) => handleClick(event, 'minus')}>
              -
            </Button>
          </div>
@@ -1,13 +1,13 @@
 {
  "files": {
    "main.css": "/static/css/main.398bc7f8.css",
-    "main.js": "/static/js/main.1adac645.js",
+    "main.js": "/static/js/main.b02c4692.js",
    "index.html": "/index.html",
    "main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map",
-    "main.1adac645.js.map": "/static/js/main.1adac645.js.map"
+    "main.b02c4692.js.map": "/static/js/main.b02c4692.js.map"
  },
  "entrypoints": [
    "static/css/main.398bc7f8.css",
-    "static/js/main.1adac645.js"
+    "static/js/main.b02c4692.js"
  ]
 }
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.1adac645.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.b02c4692.js"></script><link href="/static/css/main.398bc7f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>