unsave-popup-demo

1import { Label } from "@/components/ui/label";
2import { X, Info } from "lucide-react";
3import { Input } from "@/components/ui/input";
4import { useState, useCallback, useMemo } from "react";
5import { Button } from "@/components/ui/button";
6import { UnsavePopup } from "@/components/kl-ui/unsave-popup";
7import { cn } from "@/lib/utils";
8 
9export function UnsavePopupDemo() {
10  const [value, setValue] = useState("");
11  const [showPopup, setShowPopup] = useState(false);
12  const [shouldBlockNav, setShouldBlockNav] = useState(false);
13  const [closeForm, setCloseForm] = useState(false);
14  const [isSaved, setIsSaved] = useState(false);
15 
16  const handleInputChange = useCallback(
17    (e: React.ChangeEvent<HTMLInputElement>) => {
18      setValue(e.target.value);
19      setShowPopup(true);
20      setIsSaved(false);
21    },
22    []
23  );
24 
25  const handleSave = useCallback(async () => {
26    await new Promise((resolve) => setTimeout(resolve, 1000));
27    setShowPopup(false);
28    setIsSaved(true);
29  }, []);
30 
31  const handleReset = useCallback(() => {
32    setValue("");
33    setShowPopup(false);
34    setShouldBlockNav(false);
35  }, []);
36 
37  const handleCloseFormClick = useCallback(() => {
38    if (value && !isSaved) {
39      setShouldBlockNav(true);
40      setTimeout(() => setShouldBlockNav(false), 100);
41      return;
42    }
43    setCloseForm(true);
44  }, [value, isSaved]);
45 
46  const shouldBlockFn = useCallback(() => shouldBlockNav, [shouldBlockNav]);
47 
48  const formContent = useMemo(
49    () => (
50      <div className="grid w-full max-w-sm items-center gap-1.5">
51        <Label htmlFor="name" className="font-medium">
52          Name
53        </Label>
54        <Input
55          placeholder="Type anything to trigger it..."
56          value={value}
57          className="text-sm"
58          onChange={handleInputChange}
59        />
60      </div>
61    ),
62    [value, handleInputChange]
63  );
64 
65  const popupContent = useMemo(
66    () => (
67      <>
68        <Info className="h-4 w-4" /> Try to press the &quot;x&quot; to close it!
69      </>
70    ),
71    []
72  );
73 
74  return (
75    <>
76      {!closeForm && (
77        <div
78          key="preview"
79          className="flex flex-col h-full items-center justify-center p-2"
80        >
81          <div
82            className={cn(
83              "flex items-center justify-center p-4 gap-2 border border-gray-200",
84              "rounded-lg w-full max-w-[500px] h-[300px] shadow-md relative"
85            )}
86          >
87            {formContent}
88            <div className="absolute top-1 right-1">
89// … truncated