@muhgholy/next-drive 4.23.23 → 4.23.24

package/dist/client/index.js

@@ -1530,9 +1530,16 @@ var DriveDndContext = createContext({
 var useDriveDnd = () => useContext(DriveDndContext);
 var DriveDndProvider = (props) => {
   const { children } = props;
-  const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView } = useDrive();
+  const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView, selectedFileIds, setSelectedFiles } = useDrive();
   const [dragOverFolderId, setDragOverFolderId] = useState(null);
   const [draggingItemId, setDraggingItemId] = useState(null);
+  const moveSelection = useCallback(async (activeId, targetFolderId) => {
+    const ids = selectedFileIds.includes(activeId) && selectedFileIds.length > 1 ? selectedFileIds : [activeId];
+    if (ids.length === 1) return moveItem(ids[0], targetFolderId);
+    setItems((prev) => prev.filter((i) => !ids.includes(i.id)));
+    setSelectedFiles([]);
+    await callAPI("move", { method: "POST", body: JSON.stringify({ ids, targetFolderId }) });
+  }, [selectedFileIds, moveItem, setItems, setSelectedFiles, callAPI]);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -1567,12 +1574,12 @@ var DriveDndProvider = (props) => {
     if (overId.startsWith("path-")) {
       const pathId = overId.slice(5);
       const targetFolderId = pathId === "root" || pathId === "null" ? "root" : pathId;
-      await moveItem(active.id, targetFolderId);
+      await moveSelection(active.id, targetFolderId);
       return;
     }
     const overItem = items.find((i) => i.id === over.id);
     if (overItem?.information.type === "FOLDER") {
-      await moveItem(active.id, over.id);
+      await moveSelection(active.id, over.id);
       return;
     }
     const oldIndex = items.findIndex((i) => i.id === active.id);
@@ -1582,7 +1589,7 @@ var DriveDndProvider = (props) => {
     setItems(reordered);
     if (sortBy.field !== "order") setSortBy({ field: "order", order: 1 });
     await callAPI("reorder", { method: "POST", body: JSON.stringify({ ids: reordered.map((i) => i.id) }) });
-  }, [items, setItems, sortBy, setSortBy, moveItem, callAPI]);
+  }, [items, setItems, sortBy, setSortBy, moveSelection, callAPI]);
   const enableDnd = currentView === "BROWSE";
   return /* @__PURE__ */ jsx(DriveDndContext.Provider, { value: { dragOverFolderId, draggingItemId }, children: enableDnd ? /* @__PURE__ */ jsx(
     DndContext,
@@ -1948,6 +1955,49 @@ var DriveItemRename = (props) => {
     }
   ) });
 };
+var useMarquee = (onSelectIds) => {
+  const [box, setBox] = useState(null);
+  const onMouseDown = (e) => {
+    if (e.button !== 0 || e.target.closest("[data-marquee-id]")) return;
+    const container = e.currentTarget;
+    const start = { x: e.clientX, y: e.clientY };
+    let moved = false;
+    const handleMove = (ev) => {
+      if (!moved && Math.abs(ev.clientX - start.x) < 4 && Math.abs(ev.clientY - start.y) < 4) return;
+      moved = true;
+      const left = Math.min(start.x, ev.clientX);
+      const top = Math.min(start.y, ev.clientY);
+      const right = Math.max(start.x, ev.clientX);
+      const bottom = Math.max(start.y, ev.clientY);
+      const cRect = container.getBoundingClientRect();
+      setBox({
+        left: left - cRect.left + container.scrollLeft,
+        top: top - cRect.top + container.scrollTop,
+        width: right - left,
+        height: bottom - top
+      });
+      const ids = [];
+      container.querySelectorAll("[data-marquee-id]").forEach((el) => {
+        const r = el.getBoundingClientRect();
+        if (r.left < right && r.right > left && r.top < bottom && r.bottom > top) ids.push(el.dataset.marqueeId);
+      });
+      onSelectIds(ids);
+    };
+    const handleUp = () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+      if (!moved) onSelectIds([]);
+      setBox(null);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+  };
+  const overlay = box ? React3__default.createElement("div", {
+    className: "nd:absolute nd:z-50 nd:rounded-sm nd:border nd:border-primary nd:bg-primary/10 nd:pointer-events-none",
+    style: { left: box.left, top: box.top, width: box.width, height: box.height }
+  }) : null;
+  return { onMouseDown, overlay };
+};
 var SortableItem = (props) => {
   const { id, children, disabled, isDragOverTarget } = props;
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
@@ -1958,7 +2008,7 @@ var SortableItem = (props) => {
     zIndex: isDragging ? 50 : "auto",
     position: "relative"
   };
-  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, "data-marquee-id": id, style, ...attributes, ...listeners, children });
 };
 var FileItem = (props) => {
   const { item, isSelected, isDragOver, onSelect, onDoubleClick, onRename, onDelete, onRestore } = props;
@@ -2045,6 +2095,8 @@ var DriveFileGrid = (props) => {
     sortBy,
     selectedFileIds,
     toggleSelected,
+    setSelectedFiles,
+    selectionMode,
     navigateToFolder,
     hasMore,
     loadMore,
@@ -2056,6 +2108,19 @@ var DriveFileGrid = (props) => {
     restoreItem
   } = useDrive();
   const { dragOverFolderId } = useDriveDnd();
+  const { onMouseDown: marqueeMouseDown, overlay: marqueeOverlay } = useMarquee((ids) => {
+    let files = items.filter((i) => ids.includes(i.id)).map((i) => ({
+      id: i.id,
+      file: {
+        name: i.name,
+        mime: i.information.type === "FILE" ? i.information.mime : "",
+        size: i.information.type === "FILE" ? i.information.sizeInBytes : 0
+      }
+    }));
+    if (selectionMode.type === "SINGLE") files = files.slice(0, 1);
+    else if (selectionMode.maxFile) files = files.slice(0, selectionMode.maxFile);
+    setSelectedFiles(files);
+  });
   const [dialogs, setDialogs] = React3__default.useState({ newFolder: false, rename: false, delete: false });
   const [itemToDelete, setItemToDelete] = React3__default.useState(null);
   const [itemToRename, setItemToRename] = React3__default.useState(null);
@@ -2178,7 +2243,8 @@ var DriveFileGrid = (props) => {
         indicatorClassName: "nd:bg-primary"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:relative nd:p-2 nd:sm:p-3 nd:md:p-4", className), onMouseDown: marqueeMouseDown, children: [
+      marqueeOverlay,
       /* @__PURE__ */ jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { children: [
         groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "nd:text-xs nd:font-semibold nd:text-muted-foreground nd:uppercase nd:tracking-wide nd:mb-2 nd:sm:mb-3 nd:px-1", children: [
           groupName,
@@ -3829,7 +3895,7 @@ var SortableItem2 = (props) => {
     zIndex: isDragging ? 50 : "auto",
     position: "relative"
   };
-  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, "data-marquee-id": id, style, ...attributes, ...listeners, children });
 };
 var DriveExplorer = (props) => {
   const { onItemClick, onItemDoubleClick, mimeFilter, className, selectableFolders = false } = props;
@@ -3846,6 +3912,8 @@ var DriveExplorer = (props) => {
     setSortBy,
     selectedFileIds,
     toggleSelected,
+    setSelectedFiles,
+    selectionMode,
     navigateToFolder,
     hasMore,
     loadMore,
@@ -3875,6 +3943,13 @@ var DriveExplorer = (props) => {
   const handleDragStart = (event) => {
     setDraggingItemId(event.active.id);
   };
+  const moveSelection = async (activeId, targetFolderId) => {
+    const ids = selectedFileIds.includes(activeId) && selectedFileIds.length > 1 ? selectedFileIds : [activeId];
+    if (ids.length === 1) return moveItem(ids[0], targetFolderId);
+    setItems((prev) => prev.filter((i) => !ids.includes(i.id)));
+    setSelectedFiles([]);
+    await callAPI("move", { method: "POST", body: JSON.stringify({ ids, targetFolderId }) });
+  };
   const handleDragOver = (event) => {
     const { over } = event;
     if (!over) {
@@ -3898,13 +3973,13 @@ var DriveExplorer = (props) => {
     const overId = over.id;
     if (overId.startsWith("path-")) {
       const targetFolderId = overId.replace("path-", "");
-      await moveItem(active.id, targetFolderId === "root" ? "root" : targetFolderId);
+      await moveSelection(active.id, targetFolderId === "root" ? "root" : targetFolderId);
       return;
     }
     const overItem = items.find((i) => i.id === over.id);
     const activeItem = items.find((i) => i.id === active.id);
     if (overItem?.information.type === "FOLDER" && activeItem) {
-      await moveItem(active.id, over.id);
+      await moveSelection(active.id, over.id);
       return;
     }
     setItems((prevItems) => {
@@ -4008,6 +4083,19 @@ var DriveExplorer = (props) => {
     } else onItemDoubleClick?.(item);
   };
   const enableDrag = currentView === "BROWSE";
+  const { onMouseDown: marqueeMouseDown, overlay: marqueeOverlay } = useMarquee((ids) => {
+    let files = items.filter((i) => ids.includes(i.id)).map((i) => ({
+      id: i.id,
+      file: {
+        name: i.name,
+        mime: i.information.type === "FILE" ? i.information.mime : "",
+        size: i.information.type === "FILE" ? i.information.sizeInBytes : 0
+      }
+    }));
+    if (selectionMode.type === "SINGLE") files = files.slice(0, 1);
+    else if (selectionMode.maxFile) files = files.slice(0, selectionMode.maxFile);
+    setSelectedFiles(files);
+  });
   const stateContent = (() => {
     if (isLoading && items.length === 0) {
       return /* @__PURE__ */ jsx("div", { className: "nd:flex nd:items-center nd:justify-center nd:py-12 nd:flex-1", children: /* @__PURE__ */ jsx(Loader2, { className: "nd:size-6 nd:animate-spin nd:text-muted-foreground" }) });
@@ -4038,7 +4126,8 @@ var DriveExplorer = (props) => {
     ] }),
     /* @__PURE__ */ jsx("div", { className: "nd:lg:hidden nd:px-3 nd:py-2 nd:border-b nd:bg-background/95 nd:dark:bg-background/80 nd:backdrop-blur-sm", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
     stateContent || /* @__PURE__ */ jsxs(ContextMenu, { children: [
-      /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+      /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:relative nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), onMouseDown: marqueeMouseDown, children: [
+        marqueeOverlay,
         /* @__PURE__ */ jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6 nd:pb-8 nd:sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { className: "nd:space-y-3", children: [
           groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "nd:text-sm nd:font-medium nd:text-muted-foreground nd:flex nd:items-center nd:gap-2", children: [
             groupName,