Chore: Adding functionality to QueryItem.ValueSelector.NumberInput (#326

)

src/components/data-entry/QueryItem/NumberInput.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof QueryItem.ValueSelector.NumberInput> = {
     },
   },
   args: {
-    onChange: (value: number) => {
+    onChange: (value: number | undefined) => {
       console.log(value)
     },
   },

src/components/data-entry/QueryItem/NumberInput.tsx

@@ -2,16 +2,16 @@ import './query-item.css'
 import { InputNumber } from 'src/components'
 import { Typography } from 'src/components/general/Typography/Typography'
 
-interface INumberInputProps {
-  value?: number
+export interface INumberInputProps {
+  value?: number | undefined
   disabled?: boolean
   errorMessage?: string
   autoFocus: boolean
   placeholder?: string
   min?: number
   max?: number
   step?: number
-  onChange?: (value: number) => void
+  onChange?: (value: number | undefined) => void
   onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
@@ -21,6 +21,11 @@ const NumberInput = (props: INumberInputProps) => {
   let inputClasses = `query-item query-item--input-number`
   if (props.errorMessage) inputClasses += ' query-item--error'
 
+  const handleOnChange = (value: string | number | null | undefined) => {
+    const floatValue = parseFloat(value as string)
+    isNaN(floatValue) ? props.onChange?.(undefined) : props.onChange?.(floatValue)
+  }
+
   return (
     <>
       <InputNumber
@@ -34,9 +39,7 @@ const NumberInput = (props: INumberInputProps) => {
         min={props.min}
         step={props.step}
         onPressEnter={props.onPressEnter}
-        onChange={(value: string | number | null) => {
-          props.onChange?.(parseFloat(value as string))
-        }}
+        onChange={handleOnChange}
       />
 
       {props.errorMessage && <Typography.Text type="danger">{props.errorMessage}</Typography.Text>}

src/components/index.ts

@@ -21,6 +21,7 @@ export { TimePicker, type ITimePickerProps } from './data-entry/TimePicker/TimeP
 export { Transfer, type ITransferProps } from './data-entry/Transfer/Transfer'
 export { QueryItem } from './data-entry/QueryItem/QueryItem'
 export type { IQueryItemQualifierOption } from './data-entry/QueryItem/Qualifier'
+export type { INumberInputProps } from './data-entry/QueryItem/NumberInput'
 export { Collapse, type ICollapseProps } from './data-display/Collapse/Collapse'
 export { Timeline, type ITimelineProps } from './data-display/Timeline/Timeline'
 export { Calendar, type ICalendarProps } from './data-display/Calendar/Calendar'
@@ -122,4 +123,4 @@ export {
   useNewExperienceReminder,
   type INewExperienceReminderOptions,
   type NewExperienceReminderHook,
-} from '../hooks/NewExperienceReminder/useNewExperienceReminder'
+} from '../hooks/NewExperienceReminder/useNewExperienceReminder'