diff --git a/src/components/DebouncedInput/DebouncedNumerInput.tsx b/src/components/DebouncedInput/DebouncedNumerInput.tsx new file mode 100644 index 0000000000..509256010a --- /dev/null +++ b/src/components/DebouncedInput/DebouncedNumerInput.tsx @@ -0,0 +1,23 @@ +import type {NumberInputProps} from '@gravity-ui/uikit'; +import {NumberInput} from '@gravity-ui/uikit'; + +import {useDebouncedValue} from '../../utils/hooks/useDebouncedValue'; + +interface DebouncedInputProps extends NumberInputProps { + debounce?: number; +} + +export const DebouncedNumberInput = ({ + onUpdate, + value = null, + debounce = 200, + ...rest +}: DebouncedInputProps) => { + const [currentValue, handleUpdate] = useDebouncedValue({ + value, + onUpdate, + debounce, + }); + + return ; +}; diff --git a/src/components/DebouncedInput/DebouncedTextInput.tsx b/src/components/DebouncedInput/DebouncedTextInput.tsx index c7fab6d4f5..509351385b 100644 --- a/src/components/DebouncedInput/DebouncedTextInput.tsx +++ b/src/components/DebouncedInput/DebouncedTextInput.tsx @@ -7,7 +7,7 @@ interface DebouncedInputProps extends TextInputProps { debounce?: number; } -export const DebouncedInput = ({ +export const DebouncedTextInput = ({ onUpdate, value = '', debounce = 200, diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 4923baedc5..2d5971afff 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type {TextInputProps} from '@gravity-ui/uikit'; import {cn} from '../../utils/cn'; -import {DebouncedInput} from '../DebouncedInput/DebouncedTextInput'; +import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput'; import './Search.scss'; @@ -27,7 +27,7 @@ export const Search = ({ ...props }: SearchProps) => { return ( - { return b('row', { active: Boolean( - String(row.Offset) === selectedOffset || + safeParseNumber(row.Offset) === selectedOffset || String(row.Offset) === activeOffset, ), removed: row.removed, diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx index f36b64cdd3..2f952f9cde 100644 --- a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx +++ b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx @@ -18,7 +18,7 @@ import { } from '@gravity-ui/uikit'; import {isNil} from 'lodash'; -import {DebouncedInput} from '../../../../../components/DebouncedInput/DebouncedTextInput'; +import {DebouncedNumberInput} from '../../../../../components/DebouncedInput/DebouncedNumerInput'; import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types'; import {formatNumber} from '../../../../../utils/dataFormatters/dataFormatters'; import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage'; @@ -137,7 +137,7 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) { [handleTopicDataFilterChange, handleSelectedOffsetChange, handleStartTimestampChange], ); const onStartOffsetChange = React.useCallback( - (value: string) => { + (value: number | null) => { handleSelectedOffsetChange(value); }, [handleSelectedOffsetChange], @@ -176,19 +176,20 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) { {topicDataFilter === 'OFFSET' && ( -