ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-20 00:10:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

frontend: implementing distinction between int and float NumberComponent

Browse Source
This commit is contained in:
Mose Müller 2023-08-02 12:06:20 +02:00
parent 50162cdc82
commit 2a6574fea1
2 changed files with 18 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/App.tsx
View File

@ -133,23 +133,12 @@ const App = () => {
/>
</div>
);
} else if (value.type === 'int') {
return (
<div key={key}>
<NumberComponent
name={key}
parent_path="DataService"
docString={value.doc}
readOnly={value.readonly}
value={Number(value.value)}
/>
</div>
);
} else if (value.type === 'float') {
} else if (value.type === 'float' || value.type === 'int') {
return (
<div key={key}>
<NumberComponent
name={key}
type={value.type}
parent_path="DataService"
docString={value.doc}
readOnly={value.readonly}

39
frontend/src/components/NumberComponent.tsx
View File

@ -1,38 +1,19 @@
import React, { useEffect, useRef, useState } from 'react';
import {
OverlayTrigger,
Badge,
Tooltip,
Form,
InputGroup,
Button
} from 'react-bootstrap';
import { Form, InputGroup, Button } from 'react-bootstrap';
import { socket } from '../socket';
import { DocStringComponent } from './DocStringComponent';
// TODO: add button functionality
interface ButtonComponentProps {
interface NumberComponentProps {
name: string;
type: 'float' | 'int';
parent_path?: string;
value: number;
readOnly: boolean;
docString: string;
}
const handleNumericKey = (key: string, value: string, selectionStart: number) => {
// Check if a number key or a decimal point key is pressed
if (key === '.' && value.includes('.')) {
// Check if value already contains a decimal. If so, ignore input.
// eslint-disable-next-line no-console
console.warn('Number already contains decimal! Ignoring...');
return { value, selectionStart };
}
// Add the new key at the cursor's position
const newValue = value.slice(0, selectionStart) + key + value.slice(selectionStart);
return { value: newValue, selectionStart: selectionStart + 1 };
};
// TODO: highlight the digit that is being changed by setting both selectionStart and
// selectionEnd
const handleArrowKey = (
@ -116,7 +97,7 @@ const handleDeleteKey = (
return { value, selectionStart };
};
export const NumberComponent = React.memo((props: ButtonComponentProps) => {
export const NumberComponent = React.memo((props: NumberComponentProps) => {
const renderCount = useRef(0);
// Create a state for the cursor position
const [cursorPosition, setCursorPosition] = useState(null);
@ -139,6 +120,18 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
const { name, parent_path, value, readOnly, docString } = props;
const handleNumericKey = (key: string, value: string, selectionStart: 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.
// eslint-disable-next-line no-console
console.warn('Invalid input! Ignoring...');
return { value, selectionStart };
}
// Add the new key at the cursor's position
const newValue = value.slice(0, selectionStart) + key + value.slice(selectionStart);
return { value: newValue, selectionStart: selectionStart + 1 };
};
const handleKeyDown = (event) => {
const { key, target } = event;
if (key === 'F5' || key === 'ArrowRight' || key === 'ArrowLeft') {