1import { useState } from "react";
2import {
3 MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
4 MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
5} from "@t3tools/contracts";
6
7import { AppTextInput } from "../../../components/AppText";
8
9export interface AutoSettleDaysFieldProps {
10 readonly value: number;
11 readonly onValueChange: (value: number) => void;
12 readonly disabled?: boolean;
13}
14
15export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {
16 const [draft, setDraft] = useState<string | null>(null);
17 const commit = () => {
18 if (props.disabled) {
19 setDraft(null);
20 return;
21 }
22 const text = (draft ?? "").trim();
23 setDraft(null);
24 // Validate the whole input; decimals and trailing text must not become whole days.
25 const parsed = /^\d+$/.test(text) ? Number(text) : Number.NaN;
26 if (
27 Number.isInteger(parsed) &&
28 parsed >= MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
29 parsed <= MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
30 parsed !== props.value
31 ) {
32 props.onValueChange(parsed);
33 }
34 };
35 return (
36 <AppTextInput
37 className="min-h-10 w-20 rounded-xl px-3 py-2 text-center text-base"
38 keyboardType="number-pad"
39 returnKeyType="done"
40 value={draft ?? String(props.value)}
41 onChangeText={setDraft}
42 onBlur={commit}
43 onSubmitEditing={commit}
44 accessibilityLabel="Days before auto-settle"
45 editable={!props.disabled}
46 />
47 );
48}