ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Format number inputs with commas

Browse Source 
Formats numeric input fields to display commas for every three digits.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 04:08:55 +00:00
parent 136df4a5e9
commit 2071453b2b
3 changed files with 65 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/BudgetInputCard.tsx
View File

@@ -27,21 +27,18 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
});
const [isOpen, setIsOpen] = useState(false);
// Format for display without commas
const formatForInput = (amount: number) => {
return amount.toString();
};
// Format with commas for display
const formatWithCommas = (amount: string) => {
return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// Remove commas first to handle re-formatting
const numericValue = amount.replace(/,/g, '');
return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
useEffect(() => {
setBudgetInputs({
daily: formatForInput(initialBudgets.daily),
weekly: formatForInput(initialBudgets.weekly),
monthly: formatForInput(initialBudgets.monthly)
daily: initialBudgets.daily.toString(),
weekly: initialBudgets.weekly.toString(),
monthly: initialBudgets.monthly.toString()
});
}, [initialBudgets]);
@@ -55,7 +52,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
};
const handleSave = () => {
const amount = parseInt(budgetInputs[selectedTab], 10) || 0;
const amount = parseInt(budgetInputs[selectedTab].replace(/,/g, ''), 10) || 0;
onSave(selectedTab, amount);
// Close the collapsible after saving
setIsOpen(false);
@@ -86,7 +83,12 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
<TabsContent value="daily" className="space-y-4 mt-0">
<div className="flex items-center space-x-2">
<Input value={budgetInputs.daily} onChange={e => handleInputChange(e.target.value, 'daily')} placeholder="목표 금액 입력" className="neuro-pressed" />
<Input
value={formatWithCommas(budgetInputs.daily)}
onChange={e => handleInputChange(e.target.value, 'daily')}
placeholder="목표 금액 입력"
className="neuro-pressed"
/>
<Button onClick={handleSave} size="icon" className="neuro-flat text-slate-50 bg-slate-400 hover:bg-slate-300">
<Check size={18} />
</Button>
@@ -96,7 +98,12 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
<TabsContent value="weekly" className="space-y-4 mt-0">
<div className="flex items-center space-x-2">
<Input value={budgetInputs.weekly} onChange={e => handleInputChange(e.target.value, 'weekly')} placeholder="목표 금액 입력" className="neuro-pressed" />
<Input
value={formatWithCommas(budgetInputs.weekly)}
onChange={e => handleInputChange(e.target.value, 'weekly')}
placeholder="목표 금액 입력"
className="neuro-pressed"
/>
<Button onClick={handleSave} size="icon" className="neuro-flat bg-slate-400 hover:bg-slate-300">
<Check size={18} />
</Button>
@@ -106,7 +113,12 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
<TabsContent value="monthly" className="space-y-4 mt-0">
<div className="flex items-center space-x-2">
<Input value={budgetInputs.monthly} onChange={e => handleInputChange(e.target.value, 'monthly')} placeholder="목표 금액 입력" className="neuro-pressed" />
<Input
value={formatWithCommas(budgetInputs.monthly)}
onChange={e => handleInputChange(e.target.value, 'monthly')}
placeholder="목표 금액 입력"
className="neuro-pressed"
/>
<Button onClick={handleSave} size="icon" className="neuro-flat bg-slate-400 hover:bg-slate-300">
<Check size={18} />
</Button>