feat: handle only valid numbers on UnitsInput

Author: itofarina

dist/index.js

@@ -1,6 +1,6 @@
 declare const shortenAddress: (address: string) => string;
 declare const removeEmptySpaces: (str: string) => string;
 declare const maxSupportedNumber = 99999999999999;
-declare const minSupportedNumber = 1e-12;
+declare const minSupportedNumber = 0.000001;
 declare const validatedNumber: (num: number) => number;
 export { shortenAddress, removeEmptySpaces, maxSupportedNumber, minSupportedNumber, validatedNumber, };

dist/index.js.map

@@ -47,7 +47,7 @@ const RangeSliderWithInputs: FC<RangeSliderWithInputsProps> = ({
   const handleStartInputChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ): void => {
-    const newStartValue = validatedNumber(Number(event.target.value)) || startValue
+    const newStartValue = validatedNumber(Number(event.target.value)) || minValue
     handleChange({ min: newStartValue, max: endValue })
   }
 

dist/index.modern.js

@@ -55,8 +55,16 @@ const UnitsInput: FC<UnitsInputProps> = ({
   handleOnChange,
   ...rest
 }) => {
-
   const classes = useStyles()
+
+  const handleChange = (event) => {
+    const { target: { value: newValue } } = event
+    const numberValue = Number(newValue)
+
+    // we only handle the change if it's a number
+    if (numberValue || numberValue === 0) handleOnChange(event)
+  }
+
   return (
     <React.Fragment>
       <Grid className={classes.root} container spacing={1}>
@@ -65,7 +73,7 @@ const UnitsInput: FC<UnitsInputProps> = ({
             className={classes.input}
             classes={{ input: classes.input }}
             value={value}
-            onChange={handleOnChange}
+            onChange={handleChange}
             onBlur={handleOnBlur}
             inputProps={{
               step,

dist/index.modern.js.map

@@ -3,12 +3,20 @@ const shortenAddress = (address: string): string => `${address.substr(0, 6)}...$
 const removeEmptySpaces = (str: string): string => str.replace(/\s/g, '')
 
 const maxSupportedNumber = 99999999999999
-const minSupportedNumber = 0.000000000001
+const minSupportedNumber = 0.000001
 
 const validatedNumber = (num: number): number => {
-  if (num > maxSupportedNumber) return maxSupportedNumber
+  if (num > 0) {
+    if (num > maxSupportedNumber) return maxSupportedNumber
 
-  if (num < minSupportedNumber) return minSupportedNumber
+    if (num < minSupportedNumber) return minSupportedNumber
+  }
+
+  if (num < 0) {
+    if (num < -maxSupportedNumber) return -maxSupportedNumber
+
+    if (num > -minSupportedNumber) return -minSupportedNumber
+  }
   return num
 }