62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Save } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type FormSaveButtonProps = {
|
|
formId: string;
|
|
label?: string;
|
|
};
|
|
|
|
function serializeForm(form: HTMLFormElement) {
|
|
return JSON.stringify(
|
|
Array.from(new FormData(form).entries()).map(([key, value]) => [
|
|
key,
|
|
value instanceof File ? `${value.name}:${value.size}:${value.type}` : value,
|
|
]),
|
|
);
|
|
}
|
|
|
|
export function FormSaveButton({
|
|
formId,
|
|
label = "Speichern",
|
|
}: FormSaveButtonProps) {
|
|
const [isDirty, setIsDirty] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const form = document.getElementById(formId);
|
|
|
|
if (!(form instanceof HTMLFormElement)) {
|
|
setIsDirty(false);
|
|
return undefined;
|
|
}
|
|
|
|
const initialSnapshot = serializeForm(form);
|
|
|
|
const updateDirtyState = () => {
|
|
setIsDirty(serializeForm(form) !== initialSnapshot);
|
|
};
|
|
|
|
updateDirtyState();
|
|
|
|
form.addEventListener("input", updateDirtyState);
|
|
form.addEventListener("change", updateDirtyState);
|
|
form.addEventListener("reset", updateDirtyState);
|
|
|
|
return () => {
|
|
form.removeEventListener("input", updateDirtyState);
|
|
form.removeEventListener("change", updateDirtyState);
|
|
form.removeEventListener("reset", updateDirtyState);
|
|
};
|
|
}, [formId]);
|
|
|
|
return (
|
|
<Button type="submit" form={formId} disabled={!isDirty}>
|
|
<Save className="h-4 w-4" />
|
|
{label}
|
|
</Button>
|
|
);
|
|
}
|