feat: adds simple functionality to buttons in number component

This commit is contained in:
Mose Müller 2023-09-14 10:10:11 +02:00
parent 27520864c4
commit bbee77e231
7 changed files with 30 additions and 10 deletions

View File

@ -267,6 +267,20 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
setCursorPosition(selectionStart); 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 = () => { const handleBlur = () => {
if (!isInstantUpdate) { if (!isInstantUpdate) {
// If not in "instant update" mode, emit an update when the input field loses focus // 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> </InputGroup>
{!readOnly && ( {!readOnly && (
<div className="d-flex flex-column"> <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>
<Button className="numberComponentButton" variant="outline-secondary"> <Button
className="numberComponentButton"
variant="outline-secondary"
onClick={(event) => handleClick(event, 'minus')}>
- -
</Button> </Button>
</div> </div>

View File

@ -1,13 +1,13 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.398bc7f8.css", "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", "index.html": "/index.html",
"main.398bc7f8.css.map": "/static/css/main.398bc7f8.css.map", "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": [ "entrypoints": [
"static/css/main.398bc7f8.css", "static/css/main.398bc7f8.css",
"static/js/main.1adac645.js" "static/js/main.b02c4692.js"
] ]
} }

View File

@ -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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long