gallery:

2026-05-25 09:35:57 +03:30
parent cbdc7edbf5
commit 83b2fd809c
19 changed files with 413 additions and 163 deletions
@@ -0,0 +1,105 @@
+import { type FC, useState } from "react";
+import { Trash } from "iconsax-react";
+import UploadBoxDraggble from "@/components/UploadBoxDraggble";
+import { useEditorStore } from "@/pages/editor/store/editorStore";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
+import { createScopedId } from "@/pages/editor/store/editorStore.helpers";
+import { GALLERY_DRAG_MIME } from "@/pages/editor/types/GalleryTypes";
+
+const ImageGallery: FC = () => {
+    const { gallery, addGalleryItem, removeGalleryItem } = useEditorStore();
+    const { mutateAsync: uploadFile } = useSingleUpload();
+    const [isUploading, setIsUploading] = useState(false);
+
+    const handleFileChange = async (files: File[]) => {
+        if (files.length === 0) return;
+
+        setIsUploading(true);
+        try {
+            for (const file of files) {
+                const result = await uploadFile(file);
+                const imageUrl = result?.data?.url;
+                if (!imageUrl) continue;
+
+                const dimensions = await loadImageDimensions(imageUrl);
+                addGalleryItem({
+                    id: createScopedId("gallery"),
+                    url: imageUrl,
+                    width: dimensions.width,
+                    height: dimensions.height,
+                });
+            }
+        } catch {
+            // TODO: show error toast
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    const handleDragStart = (e: React.DragEvent<HTMLImageElement>, url: string) => {
+        e.dataTransfer.setData(GALLERY_DRAG_MIME, url);
+        e.dataTransfer.effectAllowed = "copy";
+    };
+
+    return (
+        <div className="space-y-3">
+            <div className="text-base font-bold">گالری</div>
+            <p className="text-sm text-gray-600">
+                تصویر را آپلود کنید، سپس از گالری بکشید و روی صفحه رها کنید
+            </p>
+
+            <UploadBoxDraggble
+                label="تصویر مورد نظر را آپلود کنید"
+                onChange={handleFileChange}
+                isMultiple={true}
+                hidePreview
+                isLoading={isUploading}
+            />
+
+            {gallery.length === 0 && !isUploading && (
+                <p className="text-sm text-gray-500">گالری خالی است</p>
+            )}
+
+            {gallery.length > 0 && (
+                <div className="grid grid-cols-3 gap-2 max-h-[320px] overflow-y-auto">
+                    {gallery.map((item) => (
+                        <div
+                            key={item.id}
+                            className="group relative flex aspect-square items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-1 hover:border-blue-300 hover:bg-blue-50 transition-colors"
+                        >
+                            <img
+                                src={item.url}
+                                alt=""
+                                draggable
+                                onDragStart={(e) => handleDragStart(e, item.url)}
+                                className="max-h-full max-w-full object-contain cursor-grab active:cursor-grabbing"
+                            />
+                            <button
+                                type="button"
+                                onClick={() => removeGalleryItem(item.id)}
+                                className="absolute -left-1 -top-1 hidden size-5 items-center justify-center rounded-full bg-white shadow group-hover:flex"
+                                title="حذف از گالری"
+                            >
+                                <Trash size={12} color="#ef4444" variant="Bold" />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const loadImageDimensions = (url: string): Promise<{ width: number; height: number }> =>
+    new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        };
+        img.onerror = () => {
+            resolve({ width: 100, height: 100 });
+        };
+        img.src = url;
+    });
+
+export default ImageGallery;