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); 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(

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.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"
] ]
} }

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