ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions 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>