refactor(web): number inputs to use Base UI NumberField (#33539)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
yyh
2026-03-17 18:45:02 +08:00
committed by GitHub
parent d1961c261e
commit 3db1ba36e0
30 changed files with 1340 additions and 1273 deletions

View File

@ -0,0 +1,35 @@
import { fireEvent, render, screen } from '@testing-library/react'
import TopKAndScoreThreshold from '../top-k-and-score-threshold'
describe('TopKAndScoreThreshold', () => {
const defaultProps = {
topK: 3,
onTopKChange: vi.fn(),
scoreThreshold: 0.4,
onScoreThresholdChange: vi.fn(),
isScoreThresholdEnabled: true,
onScoreThresholdEnabledChange: vi.fn(),
}
beforeEach(() => {
vi.clearAllMocks()
})
it('should round top-k input values before notifying the parent', () => {
render(<TopKAndScoreThreshold {...defaultProps} />)
const [topKInput] = screen.getAllByRole('textbox')
fireEvent.change(topKInput, { target: { value: '3.7' } })
expect(defaultProps.onTopKChange).toHaveBeenCalledWith(4)
})
it('should round score-threshold input values to two decimals', () => {
render(<TopKAndScoreThreshold {...defaultProps} />)
const [, scoreThresholdInput] = screen.getAllByRole('textbox')
fireEvent.change(scoreThresholdInput, { target: { value: '0.456' } })
expect(defaultProps.onScoreThresholdChange).toHaveBeenCalledWith(0.46)
})
})

View File

@ -1,8 +1,15 @@
import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { InputNumber } from '@/app/components/base/input-number'
import Switch from '@/app/components/base/switch'
import Tooltip from '@/app/components/base/tooltip'
import {
NumberField,
NumberFieldControls,
NumberFieldDecrement,
NumberFieldGroup,
NumberFieldIncrement,
NumberFieldInput,
} from '@/app/components/base/ui/number-field'
import { env } from '@/env'
export type TopKAndScoreThresholdProps = {
@ -40,17 +47,11 @@ const TopKAndScoreThreshold = ({
}: TopKAndScoreThresholdProps) => {
const { t } = useTranslation()
const handleTopKChange = useCallback((value: number) => {
let notOutRangeValue = Number.parseInt(value.toFixed(0))
notOutRangeValue = Math.max(TOP_K_VALUE_LIMIT.min, notOutRangeValue)
notOutRangeValue = Math.min(TOP_K_VALUE_LIMIT.max, notOutRangeValue)
onTopKChange?.(notOutRangeValue)
onTopKChange?.(Number.parseInt(value.toFixed(0)))
}, [onTopKChange])
const handleScoreThresholdChange = (value: number) => {
let notOutRangeValue = Number.parseFloat(value.toFixed(2))
notOutRangeValue = Math.max(SCORE_THRESHOLD_VALUE_LIMIT.min, notOutRangeValue)
notOutRangeValue = Math.min(SCORE_THRESHOLD_VALUE_LIMIT.max, notOutRangeValue)
onScoreThresholdChange?.(notOutRangeValue)
onScoreThresholdChange?.(Number.parseFloat(value.toFixed(2)))
}
return (
@ -63,14 +64,22 @@ const TopKAndScoreThreshold = ({
popupContent={t('datasetConfig.top_kTip', { ns: 'appDebug' })}
/>
</div>
<InputNumber
<NumberField
disabled={readonly}
type="number"
{...TOP_K_VALUE_LIMIT}
size="regular"
step={TOP_K_VALUE_LIMIT.amount}
min={TOP_K_VALUE_LIMIT.min}
max={TOP_K_VALUE_LIMIT.max}
value={topK}
onChange={handleTopKChange}
/>
onValueChange={value => handleTopKChange(value ?? 0)}
>
<NumberFieldGroup size="regular">
<NumberFieldInput size="regular" />
<NumberFieldControls>
<NumberFieldIncrement size="regular" />
<NumberFieldDecrement size="regular" />
</NumberFieldControls>
</NumberFieldGroup>
</NumberField>
</div>
{
!hiddenScoreThreshold && (
@ -90,14 +99,22 @@ const TopKAndScoreThreshold = ({
popupContent={t('datasetConfig.score_thresholdTip', { ns: 'appDebug' })}
/>
</div>
<InputNumber
<NumberField
disabled={readonly || !isScoreThresholdEnabled}
type="number"
{...SCORE_THRESHOLD_VALUE_LIMIT}
size="regular"
value={scoreThreshold}
onChange={handleScoreThresholdChange}
/>
step={SCORE_THRESHOLD_VALUE_LIMIT.step}
min={SCORE_THRESHOLD_VALUE_LIMIT.min}
max={SCORE_THRESHOLD_VALUE_LIMIT.max}
value={scoreThreshold ?? null}
onValueChange={value => handleScoreThresholdChange(value ?? 0)}
>
<NumberFieldGroup size="regular">
<NumberFieldInput size="regular" />
<NumberFieldControls>
<NumberFieldIncrement size="regular" />
<NumberFieldDecrement size="regular" />
</NumberFieldControls>
</NumberFieldGroup>
</NumberField>
</div>
)
}