Merge pull request #2741 from proddy/dev

factor rendering in webUI
This commit is contained in:
Proddy
2025-11-13 21:09:24 +01:00
committed by GitHub
3 changed files with 35 additions and 34 deletions

View File

@@ -41,7 +41,7 @@
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-router": "^7.9.5",
"react-router": "^7.9.6",
"react-toastify": "^11.0.5",
"typesafe-i18n": "^5.26.2",
"typescript": "^5.9.3"

View File

@@ -63,8 +63,8 @@ importers:
specifier: ^5.5.0
version: 5.5.0(react@19.2.0)
react-router:
specifier: ^7.9.5
version: 7.9.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
specifier: ^7.9.6
version: 7.9.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
react-toastify:
specifier: ^11.0.5
version: 11.0.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1027,8 +1027,8 @@ packages:
base64-js@1.5.1:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
baseline-browser-mapping@2.8.27:
resolution: {integrity: sha512-2CXFpkjVnY2FT+B6GrSYxzYf65BJWEqz5tIRHCvNsZZ2F3CmsCB37h8SpYgKG7y9C4YAeTipIPWG7EmFmhAeXA==}
baseline-browser-mapping@2.8.28:
resolution: {integrity: sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==}
hasBin: true
bin-build@3.0.0:
@@ -2528,8 +2528,8 @@ packages:
react-is@19.2.0:
resolution: {integrity: sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==}
react-router@7.9.5:
resolution: {integrity: sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==}
react-router@7.9.6:
resolution: {integrity: sha512-Y1tUp8clYRXpfPITyuifmSoE2vncSME18uVLgaqyxh9H35JWpIfzHo+9y3Fzh5odk/jxPW29IgLgzcdwxGqyNA==}
engines: {node: '>=20.0.0'}
peerDependencies:
react: '>=18'
@@ -3963,7 +3963,7 @@ snapshots:
base64-js@1.5.1: {}
baseline-browser-mapping@2.8.27: {}
baseline-browser-mapping@2.8.28: {}
bin-build@3.0.0:
dependencies:
@@ -4020,7 +4020,7 @@ snapshots:
browserslist@4.28.0:
dependencies:
baseline-browser-mapping: 2.8.27
baseline-browser-mapping: 2.8.28
caniuse-lite: 1.0.30001754
electron-to-chromium: 1.5.250
node-releases: 2.0.27
@@ -5532,7 +5532,7 @@ snapshots:
react-is@19.2.0: {}
react-router@7.9.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
react-router@7.9.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
dependencies:
cookie: 1.0.2
react: 19.2.0

View File

@@ -25,6 +25,7 @@ export const extractEventValue = (
normalizedValue.endsWith('.') ||
normalizedValue === '-' ||
normalizedValue === '-.' ||
normalizedValue === '-0' ||
endsWithDecimalAndZeros;
if (isIncomplete) {
@@ -45,15 +46,15 @@ type UpdateEntity<S> = (state: (prevState: Readonly<S>) => S) => void;
*/
export const updateValue =
<S extends Record<string, unknown>>(updateEntity: UpdateEntity<S>) =>
(event: React.ChangeEvent<HTMLInputElement>): void => {
const { name } = event.target;
const value = extractEventValue(event);
(event: React.ChangeEvent<HTMLInputElement>): void => {
const { name } = event.target;
const value = extractEventValue(event);
updateEntity((prevState) => ({
...prevState,
[name]: value
}));
};
updateEntity((prevState) => ({
...prevState,
[name]: value
}));
};
/**
* Creates an event handler that tracks dirty flags for modified fields.
@@ -66,22 +67,22 @@ export const updateValueDirty =
setDirtyFlags: React.Dispatch<React.SetStateAction<string[]>>,
updateDataValue: (updater: (prevState: T) => T) => void
) =>
(event: React.ChangeEvent<HTMLInputElement>): void => {
const { name } = event.target;
const updatedValue = extractEventValue(event);
(event: React.ChangeEvent<HTMLInputElement>): void => {
const { name } = event.target;
const updatedValue = extractEventValue(event);
updateDataValue((prevState) => ({
...prevState,
[name]: updatedValue
}));
updateDataValue((prevState) => ({
...prevState,
[name]: updatedValue
}));
const isDirty = origData[name] !== updatedValue;
const wasDirty = dirtyFlags.includes(name);
const isDirty = origData[name] !== updatedValue;
const wasDirty = dirtyFlags.includes(name);
// Only update dirty flags if the state changed
if (isDirty !== wasDirty) {
setDirtyFlags(
isDirty ? [...dirtyFlags, name] : dirtyFlags.filter((f) => f !== name)
);
}
};
// Only update dirty flags if the state changed
if (isDirty !== wasDirty) {
setDirtyFlags(
isDirty ? [...dirtyFlags, name] : dirtyFlags.filter((f) => f !== name)
);
}
};