Feat: add reset button to the right of input box
This commit is contained in:
@@ -8,7 +8,7 @@ import Input from '@/components/ui/Input'
|
|||||||
import { controlButtonVariant } from '@/lib/constants'
|
import { controlButtonVariant } from '@/lib/constants'
|
||||||
import { useSettingsStore } from '@/stores/settings'
|
import { useSettingsStore } from '@/stores/settings'
|
||||||
|
|
||||||
import { SettingsIcon } from 'lucide-react'
|
import { SettingsIcon, Undo2 } from 'lucide-react'
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -44,13 +44,15 @@ const LabeledNumberInput = ({
|
|||||||
onEditFinished,
|
onEditFinished,
|
||||||
label,
|
label,
|
||||||
min,
|
min,
|
||||||
max
|
max,
|
||||||
|
defaultValue
|
||||||
}: {
|
}: {
|
||||||
value: number
|
value: number
|
||||||
onEditFinished: (value: number) => void
|
onEditFinished: (value: number) => void
|
||||||
label: string
|
label: string
|
||||||
min: number
|
min: number
|
||||||
max?: number
|
max?: number
|
||||||
|
defaultValue?: number
|
||||||
}) => {
|
}) => {
|
||||||
const [currentValue, setCurrentValue] = useState<number | null>(value)
|
const [currentValue, setCurrentValue] = useState<number | null>(value)
|
||||||
|
|
||||||
@@ -81,6 +83,13 @@ const LabeledNumberInput = ({
|
|||||||
}
|
}
|
||||||
}, [value, currentValue, onEditFinished])
|
}, [value, currentValue, onEditFinished])
|
||||||
|
|
||||||
|
const handleReset = useCallback(() => {
|
||||||
|
if (defaultValue !== undefined && value !== defaultValue) {
|
||||||
|
setCurrentValue(defaultValue)
|
||||||
|
onEditFinished(defaultValue)
|
||||||
|
}
|
||||||
|
}, [defaultValue, value, onEditFinished])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<label
|
<label
|
||||||
@@ -89,6 +98,7 @@ const LabeledNumberInput = ({
|
|||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</label>
|
</label>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
value={currentValue === null ? '' : currentValue}
|
value={currentValue === null ? '' : currentValue}
|
||||||
@@ -103,6 +113,19 @@ const LabeledNumberInput = ({
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
{defaultValue !== undefined && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-6 w-6 flex-shrink-0 hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||||
|
onClick={handleReset}
|
||||||
|
type="button"
|
||||||
|
title="重置为默认值"
|
||||||
|
>
|
||||||
|
<Undo2 className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -273,6 +296,7 @@ export default function Settings() {
|
|||||||
label={t('graphPanel.sideBar.settings.maxQueryDepth')}
|
label={t('graphPanel.sideBar.settings.maxQueryDepth')}
|
||||||
min={1}
|
min={1}
|
||||||
value={graphQueryMaxDepth}
|
value={graphQueryMaxDepth}
|
||||||
|
defaultValue={3}
|
||||||
onEditFinished={setGraphQueryMaxDepth}
|
onEditFinished={setGraphQueryMaxDepth}
|
||||||
/>
|
/>
|
||||||
<LabeledNumberInput
|
<LabeledNumberInput
|
||||||
@@ -280,6 +304,7 @@ export default function Settings() {
|
|||||||
min={1}
|
min={1}
|
||||||
max={1000}
|
max={1000}
|
||||||
value={graphMaxNodes}
|
value={graphMaxNodes}
|
||||||
|
defaultValue={1000}
|
||||||
onEditFinished={setGraphMaxNodes}
|
onEditFinished={setGraphMaxNodes}
|
||||||
/>
|
/>
|
||||||
<LabeledNumberInput
|
<LabeledNumberInput
|
||||||
@@ -287,6 +312,7 @@ export default function Settings() {
|
|||||||
min={1}
|
min={1}
|
||||||
max={30}
|
max={30}
|
||||||
value={graphLayoutMaxIterations}
|
value={graphLayoutMaxIterations}
|
||||||
|
defaultValue={15}
|
||||||
onEditFinished={setGraphLayoutMaxIterations}
|
onEditFinished={setGraphLayoutMaxIterations}
|
||||||
/>
|
/>
|
||||||
<Separator />
|
<Separator />
|
||||||
|
Reference in New Issue
Block a user