Be explicit about minimum and maximum delay

Use range correctly in the UI element and error messaging.
This commit is contained in:
Marc Brooks 2025-11-05 14:09:10 -06:00
parent 05057cb6fa
commit 49b9a35951
No known key found for this signature in database
GPG Key ID: 583A6AF2D6AE1DC6
1 changed files with 7 additions and 5 deletions

View File

@ -19,6 +19,8 @@ import { TextAreaWithLabel } from "@components/TextArea";
// uint32 max value / 4 // uint32 max value / 4
const pasteMaxLength = 1073741824; const pasteMaxLength = 1073741824;
const defaultDelay = 20; const defaultDelay = 20;
const minimumDelay = 10;
const maximumDelay = 65534;
export default function PasteModal() { export default function PasteModal() {
const TextAreaRef = useRef<HTMLTextAreaElement>(null); const TextAreaRef = useRef<HTMLTextAreaElement>(null);
@ -31,7 +33,7 @@ export default function PasteModal() {
const [invalidChars, setInvalidChars] = useState<string[]>([]); const [invalidChars, setInvalidChars] = useState<string[]>([]);
const [delayValue, setDelayValue] = useState(defaultDelay); const [delayValue, setDelayValue] = useState(defaultDelay);
const delay = useMemo(() => { const delay = useMemo(() => {
if (delayValue < 0 || delayValue > 65534) { if (delayValue < minimumDelay || delayValue > maximumDelay) {
return defaultDelay; return defaultDelay;
} }
return delayValue; return delayValue;
@ -189,18 +191,18 @@ export default function PasteModal() {
type="number" type="number"
label={m.paste_modal_delay_between_keys()} label={m.paste_modal_delay_between_keys()}
placeholder={m.paste_modal_delay_between_keys()} placeholder={m.paste_modal_delay_between_keys()}
min={50} min={minimumDelay}
max={65534} max={maximumDelay}
value={delayValue} value={delayValue}
onChange={e => { onChange={e => {
setDelayValue(parseInt(e.target.value, 10)); setDelayValue(parseInt(e.target.value, 10));
}} }}
/> />
{(delayValue < defaultDelay || delayValue > 65534) && ( {(delayValue < minimumDelay || delayValue > maximumDelay) && (
<div className="mt-2 flex items-center gap-x-2"> <div className="mt-2 flex items-center gap-x-2">
<ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" /> <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
<span className="text-xs text-red-500 dark:text-red-400"> <span className="text-xs text-red-500 dark:text-red-400">
{m.paste_modal_delay_out_of_range({ min: 50, max: 65534 })} {m.paste_modal_delay_out_of_range({ min: minimumDelay, max: maximumDelay })}
</span> </span>
</div> </div>
)} )}