From aa839b08e547854f9c4a693d5d1aea031bd7f99d Mon Sep 17 00:00:00 2001 From: Donkie Date: Tue, 18 Mar 2025 21:27:00 +0100 Subject: [PATCH] Handle input number formatting better Now it doesn't interfer with the user writing until the user leaves the element Resolves #633 Resolves #632 --- client/src/pages/filaments/create.tsx | 8 ++++---- client/src/pages/filaments/edit.tsx | 10 +++++----- client/src/pages/spools/create.tsx | 10 +++++----- client/src/pages/spools/edit.tsx | 10 +++++----- client/src/utils/parsing.tsx | 24 ++++++++++++++++++++---- 5 files changed, 39 insertions(+), 23 deletions(-) diff --git a/client/src/pages/filaments/create.tsx b/client/src/pages/filaments/create.tsx index 75ec761..a67962c 100644 --- a/client/src/pages/filaments/create.tsx +++ b/client/src/pages/filaments/create.tsx @@ -8,7 +8,7 @@ import { useEffect, useState } from "react"; import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields"; import { FilamentImportModal } from "../../components/filamentImportModal"; import { MultiColorPicker } from "../../components/multiColorPicker"; -import { numberFormatter, numberParser, numberParserAllowEmpty } from "../../utils/parsing"; +import { formatNumberOnUserInput, numberParser, numberParserAllowEmpty } from "../../utils/parsing"; import { ExternalFilament } from "../../utils/queryExternalDB"; import { EntityType, useGetFields } from "../../utils/queryFields"; import { getCurrencySymbol, useCurrency } from "../../utils/settings"; @@ -250,7 +250,7 @@ export const FilamentCreate: React.FC @@ -266,7 +266,7 @@ export const FilamentCreate: React.FC - + - + = () => { formProps.onFinish = (allValues: IFilamentParsedExtras) => { if (allValues !== undefined && allValues !== null) { if (colorType == "single") { - allValues.multi_color_hexes = ''; + allValues.multi_color_hexes = ""; } // Lot of stupidity here to make types work const stringifiedAllValues = StringifiedExtras(allValues); @@ -228,7 +228,7 @@ export const FilamentEdit: React.FC = () => { @@ -244,7 +244,7 @@ export const FilamentEdit: React.FC = () => { }, ]} > - + = () => { }, ]} > - + @@ -391,7 +391,7 @@ export const SpoolCreate: React.FC = () => { @@ -380,7 +380,7 @@ export const SpoolEdit: React.FC = () => { min={0} addonAfter="g" precision={1} - formatter={numberFormatter} + formatter={formatNumberOnUserInput} parser={numberParser} disabled={weightToEnter != WeightToEnter.used_weight} value={usedWeight} @@ -394,7 +394,7 @@ export const SpoolEdit: React.FC = () => { min={0} addonAfter="g" precision={1} - formatter={numberFormatter} + formatter={formatNumberOnUserInput} parser={numberParser} disabled={weightToEnter != WeightToEnter.remaining_weight} value={getRemainingWeight()} @@ -408,7 +408,7 @@ export const SpoolEdit: React.FC = () => { min={0} addonAfter="g" precision={1} - formatter={numberFormatter} + formatter={formatNumberOnUserInput} parser={numberParser} disabled={weightToEnter != WeightToEnter.measured_weight} value={getMeasuredWeight()} diff --git a/client/src/utils/parsing.tsx b/client/src/utils/parsing.tsx index 376be60..5a4663e 100644 --- a/client/src/utils/parsing.tsx +++ b/client/src/utils/parsing.tsx @@ -24,6 +24,22 @@ export function formatNumberWithSpaceSeparator(input: string): string { return formattedNumber; } +/** + * Number formatter compatible with Ant Design's InputNumber component, handling UX properly. + * @param value + * @param info + * @returns + */ +export function formatNumberOnUserInput( + value: number | string | undefined, + info: { userTyping: boolean; input: string } +): string { + if (info.userTyping) { + return info.input; + } + return numberFormatter(value); +} + /** * Number formatter that nicely formats numbers with correct decimal separator based on locale * Always uses blank space as thousands separator to prevent confusion with the decimal separator @@ -116,10 +132,10 @@ export function enrichText(text: string | undefined) { */ export function formatWeight(weightInGrams: number, precision: number = 2): string { if (weightInGrams >= 1000) { - const kilograms = removeTrailingZeros((weightInGrams / 1000).toFixed(precision)) + const kilograms = removeTrailingZeros((weightInGrams / 1000).toFixed(precision)); return `${kilograms} kg`; } else { - const grams = removeTrailingZeros(weightInGrams.toFixed(precision)) + const grams = removeTrailingZeros(weightInGrams.toFixed(precision)); return `${grams} g`; } } @@ -133,7 +149,7 @@ export function formatWeight(weightInGrams: number, precision: number = 2): stri */ export function formatLength(lengthInMillimeter: number, precision: number = 2): string { if (lengthInMillimeter >= 1000) { - const meters = removeTrailingZeros((lengthInMillimeter / 1000).toFixed(precision)) + const meters = removeTrailingZeros((lengthInMillimeter / 1000).toFixed(precision)); return `${meters} m`; } else { return `${lengthInMillimeter} mm`; @@ -158,5 +174,5 @@ export function formatLength(lengthInMillimeter: number, precision: number = 2): * ``` */ function removeTrailingZeros(num: string): string { - return num.replace(/(\.\d*?[1-9])0+|\.0*$/, '$1'); + return num.replace(/(\.\d*?[1-9])0+|\.0*$/, "$1"); }