ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-11 07:47:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: highlighted digits are overwritten in number components

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/NumberComponent.tsx
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(