quantity-input-basic

1"use client";
2import { cn } from "@/lib/utils";
3import { Minus, Plus } from "lucide-react";
4import { ChangeEvent, useState, useEffect } from "react";
5 
6interface QuantityInputBasicProps {
7  quantity: number;
8  min?: number;
9  max?: number | null;
10  step?: number;
11  disabled?: boolean;
12  onChange: (quantity: number) => void;
13  className?: string;
14}
15 
16const QuantityInputBasic = ({
17  className,
18  disabled = false,
19  max = null,
20  min = 1,
21  onChange,
22  quantity,
23  step = 1,
24}: QuantityInputBasicProps) => {
25  // Internal state to handle input field text during editing
26  const [inputValue, setInputValue] = useState(quantity.toString());
27 
28  // Update internal input value when external quantity prop changes
29  useEffect(() => {
30    setInputValue(quantity.toString());
31  }, [quantity]);
32 
33  const handleDecrease = () => {
34    if (quantity - step >= min) {
35      onChange(quantity - step);
36    }
37  };
38 
39  const handleIncrease = () => {
40    if (max === null || quantity + step <= max) {
41      onChange(quantity + step);
42    }
43  };
44 
45  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
46    // Allow any input including empty string during editing
47    setInputValue(e.target.value);
48 
49    // If the input is a valid number, update the parent component
50    const value = parseInt(e.target.value);
51    if (!isNaN(value) && value >= min && (max === null || value <= max)) {
52      onChange(value);
53    }
54  };
55 
56  const handleBlur = () => {
57    // When the field loses focus, ensure we have a valid value
58    const value = parseInt(inputValue);
59    if (isNaN(value) || value < min) {
60      // If invalid or below min, reset to min
61      setInputValue(min.toString());
62      onChange(min);
63    } else if (max !== null && value > max) {
64      // If above max and max is defined, reset to max
65      setInputValue(max.toString());
66      onChange(max);
67    } else {
68      // Ensure the displayed value matches the actual value
69      setInputValue(value.toString());
70      onChange(value);
71    }
72  };
73 
74  return (
75    <div
76      className={cn(
77        "inline-flex cursor-pointer rounded-lg shadow-xs shadow-black/5",
78        className
79      )}
80    >
81      <button
82        className={cn(
83          "hover:bg-muted-foreground/10 flex cursor-pointer items-center justify-center rounded-s-lg border px-3 py-1 focus-visible:z-10 disabled:cursor-not-allowed disabled:opacity-50",
84          disabled && "pointer-events-none"
85        )}
86        onClick={handleDecrease}
87// … truncated