feat: highlighted digits are overwritten in number components

This commit is contained in:
Mose Müller 2023-09-14 08:25:40 +02:00
parent d2b9dd832f
commit 050a718e44
7 changed files with 29 additions and 12 deletions

View File

@ -163,7 +163,12 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
addNotification(notificationMsg);
}, [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
if (key === '.' && (value.includes('.') || props.type === 'int')) {
// 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...');
return { value, selectionStart };
}
let newValue = value;
// 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 };
};
const handleKeyDown = (event) => {
@ -204,13 +219,15 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
({ value: newValue, selectionStart } = handleNumericKey(
key,
value,
selectionStart
selectionStart,
selectionEnd
));
} else if (key === '.') {
({ value: newValue, selectionStart } = handleNumericKey(
key,
value,
selectionStart
selectionStart,
selectionEnd
));
} else if (key === 'ArrowUp' || key === 'ArrowDown') {
({ value: newValue, selectionStart } = handleArrowKey(

View File

@ -1,13 +1,13 @@
{
"files": {
"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",
"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": [
"static/css/main.398bc7f8.css",
"static/js/main.08739c9a.js"
"static/js/main.8b208e04.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.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