132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import { Plus, Minus } from 'lucide-react';
|
|
|
|
interface QuantityDisplayProps {
|
|
itemId: string;
|
|
currentQuantity: number;
|
|
onQuantityChange: (newQty: number) => Promise<void>;
|
|
}
|
|
|
|
export default function QuantityDisplay({
|
|
itemId,
|
|
currentQuantity,
|
|
onQuantityChange,
|
|
}: QuantityDisplayProps) {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [localQuantity, setLocalQuantity] = useState(currentQuantity);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
setLocalQuantity(currentQuantity);
|
|
}, [currentQuantity]);
|
|
|
|
useEffect(() => {
|
|
if (isEditing && inputRef.current) {
|
|
inputRef.current.focus();
|
|
inputRef.current.select();
|
|
}
|
|
}, [isEditing]);
|
|
|
|
const handleTapToEdit = () => {
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const handleIncrement = () => {
|
|
setLocalQuantity(prev => Math.max(0, prev + 1));
|
|
};
|
|
|
|
const handleDecrement = () => {
|
|
setLocalQuantity(prev => Math.max(0, prev - 1));
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
if (value === '' || /^\d+$/.test(value)) {
|
|
setLocalQuantity(value === '' ? 0 : parseInt(value, 10));
|
|
}
|
|
};
|
|
|
|
const handleCommit = async () => {
|
|
if (localQuantity === currentQuantity) {
|
|
setIsEditing(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
await onQuantityChange(localQuantity);
|
|
setIsEditing(false);
|
|
} catch (error) {
|
|
// Revert on error
|
|
setLocalQuantity(currentQuantity);
|
|
setIsEditing(false);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setLocalQuantity(currentQuantity);
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter') {
|
|
handleCommit();
|
|
} else if (e.key === 'Escape') {
|
|
handleCancel();
|
|
}
|
|
};
|
|
|
|
if (isEditing) {
|
|
return (
|
|
<div className="flex items-center gap-2 bg-black border border-border px-3 py-2">
|
|
<button
|
|
onClick={handleDecrement}
|
|
disabled={isLoading}
|
|
aria-label="Decrease quantity"
|
|
className="p-1 hover:bg-black border border-transparent hover:border-border text-secondary hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<Minus size={16} />
|
|
</button>
|
|
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={localQuantity}
|
|
onChange={handleInputChange}
|
|
onBlur={handleCommit}
|
|
onKeyDown={handleKeyDown}
|
|
disabled={isLoading}
|
|
aria-label="Quantity"
|
|
className="w-12 text-center bg-transparent text-primary font-normal focus:outline-none disabled:opacity-50"
|
|
/>
|
|
|
|
<button
|
|
onClick={handleIncrement}
|
|
disabled={isLoading}
|
|
aria-label="Increase quantity"
|
|
className="p-1 hover:bg-black border border-transparent hover:border-border text-secondary hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<Plus size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleTapToEdit}
|
|
disabled={isLoading}
|
|
aria-label={`Quantity: ${currentQuantity}. Tap to edit`}
|
|
className="text-lg font-normal text-primary hover:bg-black border border-transparent hover:border-border px-3 py-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{currentQuantity}
|
|
</button>
|
|
);
|
|
}
|