Added specific error messages to numeric range field and made character counter field

This commit is contained in:
Kayvon Martinez 2024-03-07 01:07:03 -06:00
parent f9cb3979d8
commit 7413f5e3c9

View File

@ -66,10 +66,10 @@ export default function NumericRangeField({
// and a decimal point if needed. For example, 1000 will become 1,000 // and a decimal point if needed. For example, 1000 will become 1,000
// or 1000.5 will become 1,000.5 // or 1000.5 will become 1,000.5
numberString = numberString.replace(/,/g, ''); const numberStringNoCommas = numberString.replace(/,/g, '');
if (numberString) { if (numberStringNoCommas) {
const parts = numberString.split('.'); const parts = numberStringNoCommas.split('.');
const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.length > 1 ? `${integerPart}.${parts[1]}` : integerPart; return parts.length > 1 ? `${integerPart}.${parts[1]}` : integerPart;
} }
@ -91,9 +91,9 @@ export default function NumericRangeField({
} }
const minNumber = schema.minimum; const minNumber = schema.minimum;
const maxNumber = schema.maximum; const maxNumber = schema.maximum;
let min = formData?.min; const min = formData?.min;
const [minValue, setMinValue] = React.useState(min?.toString() || ''); const [minValue, setMinValue] = React.useState(min?.toString() || '');
let max = formData?.max; const max = formData?.max;
const [maxValue, setMaxValue] = React.useState(max?.toString() || ''); const [maxValue, setMaxValue] = React.useState(max?.toString() || '');
// the text input eventually breaks when the number gets too big. // the text input eventually breaks when the number gets too big.
@ -102,7 +102,7 @@ export default function NumericRangeField({
const onChangeLocal = (nameToChange: any, event: any) => { const onChangeLocal = (nameToChange: any, event: any) => {
event.preventDefault(); event.preventDefault();
let numberValue = parseNumberString(event.target.value); const numberValue = parseNumberString(event.target.value);
// Validate and update the numeric range based on user input // Validate and update the numeric range based on user input
if (nameToChange === 'min') { if (nameToChange === 'min') {
setMinValue(formatNumberString(numberValue?.toString() || '')); setMinValue(formatNumberString(numberValue?.toString() || ''));