mirror of
https://github.com/tiqi-group/pydase.git
synced 2025-04-20 08:20:02 +02:00
feat: highlighted digits are overwritten in number components
This commit is contained in:
parent
d2b9dd832f
commit
050a718e44
@ -163,7 +163,12 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
|
|||||||
addNotification(notificationMsg);
|
addNotification(notificationMsg);
|
||||||
}, [props.value]);
|
}, [props.value]);
|
||||||
|
|
||||||
const handleNumericKey = (key: string, value: string, selectionStart: number) => {
|
const handleNumericKey = (
|
||||||
|
key: string,
|
||||||
|
value: string,
|
||||||
|
selectionStart: number,
|
||||||
|
selectionEnd: number
|
||||||
|
) => {
|
||||||
// Check if a number key or a decimal point key is pressed
|
// Check if a number key or a decimal point key is pressed
|
||||||
if (key === '.' && (value.includes('.') || props.type === 'int')) {
|
if (key === '.' && (value.includes('.') || props.type === 'int')) {
|
||||||
// Check if value already contains a decimal. If so, ignore input.
|
// Check if value already contains a decimal. If so, ignore input.
|
||||||
@ -171,8 +176,18 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
|
|||||||
console.warn('Invalid input! Ignoring...');
|
console.warn('Invalid input! Ignoring...');
|
||||||
return { value, selectionStart };
|
return { value, selectionStart };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let newValue = value;
|
||||||
|
|
||||||
// Add the new key at the cursor's position
|
// Add the new key at the cursor's position
|
||||||
const newValue = value.slice(0, selectionStart) + key + value.slice(selectionStart);
|
if (selectionEnd > selectionStart) {
|
||||||
|
// If there is a selection, replace it with the key
|
||||||
|
newValue = value.slice(0, selectionStart) + key + value.slice(selectionEnd);
|
||||||
|
} else {
|
||||||
|
// otherwise, append the key after the selection start
|
||||||
|
newValue = value.slice(0, selectionStart) + key + value.slice(selectionStart);
|
||||||
|
}
|
||||||
|
|
||||||
return { value: newValue, selectionStart: selectionStart + 1 };
|
return { value: newValue, selectionStart: selectionStart + 1 };
|
||||||
};
|
};
|
||||||
const handleKeyDown = (event) => {
|
const handleKeyDown = (event) => {
|
||||||
@ -204,13 +219,15 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
|
|||||||
({ value: newValue, selectionStart } = handleNumericKey(
|
({ value: newValue, selectionStart } = handleNumericKey(
|
||||||
key,
|
key,
|
||||||
value,
|
value,
|
||||||
selectionStart
|
selectionStart,
|
||||||
|
selectionEnd
|
||||||
));
|
));
|
||||||
} else if (key === '.') {
|
} else if (key === '.') {
|
||||||
({ value: newValue, selectionStart } = handleNumericKey(
|
({ value: newValue, selectionStart } = handleNumericKey(
|
||||||
key,
|
key,
|
||||||
value,
|
value,
|
||||||
selectionStart
|
selectionStart,
|
||||||
|
selectionEnd
|
||||||
));
|
));
|
||||||
} else if (key === 'ArrowUp' || key === 'ArrowDown') {
|
} else if (key === 'ArrowUp' || key === 'ArrowDown') {
|
||||||
({ value: newValue, selectionStart } = handleArrowKey(
|
({ value: newValue, selectionStart } = handleArrowKey(
|
||||||
|
@ -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.08739c9a.js",
|
"main.js": "/static/js/main.8b208e04.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.08739c9a.js.map": "/static/js/main.08739c9a.js.map"
|
"main.8b208e04.js.map": "/static/js/main.8b208e04.js.map"
|
||||||
},
|
},
|
||||||
"entrypoints": [
|
"entrypoints": [
|
||||||
"static/css/main.398bc7f8.css",
|
"static/css/main.398bc7f8.css",
|
||||||
"static/js/main.08739c9a.js"
|
"static/js/main.8b208e04.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.08739c9a.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.8b208e04.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
1
src/pydase/frontend/static/js/main.8b208e04.js.map
Normal file
1
src/pydase/frontend/static/js/main.8b208e04.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user