diff --git a/src/components/data-entry/QueryItem/NumberInput.stories.tsx b/src/components/data-entry/QueryItem/NumberInput.stories.tsx index 0cdeaa3c3..d8a24aa9a 100644 --- a/src/components/data-entry/QueryItem/NumberInput.stories.tsx +++ b/src/components/data-entry/QueryItem/NumberInput.stories.tsx @@ -12,7 +12,7 @@ const meta: Meta = { }, }, args: { - onChange: (value: number) => { + onChange: (value: number | undefined) => { console.log(value) }, }, diff --git a/src/components/data-entry/QueryItem/NumberInput.tsx b/src/components/data-entry/QueryItem/NumberInput.tsx index 31b5bae25..5214b4ef1 100644 --- a/src/components/data-entry/QueryItem/NumberInput.tsx +++ b/src/components/data-entry/QueryItem/NumberInput.tsx @@ -2,8 +2,8 @@ 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 @@ -11,7 +11,7 @@ interface INumberInputProps { min?: number max?: number step?: number - onChange?: (value: number) => void + onChange?: (value: number | undefined) => void onPressEnter?: (e: React.KeyboardEvent) => 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 ( <> { min={props.min} step={props.step} onPressEnter={props.onPressEnter} - onChange={(value: string | number | null) => { - props.onChange?.(parseFloat(value as string)) - }} + onChange={handleOnChange} /> {props.errorMessage && {props.errorMessage}} diff --git a/src/components/index.ts b/src/components/index.ts index a8bcb88dc..2eb83dd37 100644 --- a/src/components/index.ts +++ b/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' \ No newline at end of file +} from '../hooks/NewExperienceReminder/useNewExperienceReminder'