@noya-app/noya-file-explorer 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,13 +20,13 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.63",
-    "@noya-app/noya-icons": "0.1.11",
-    "@noya-app/noya-multiplayer-react": "0.1.62",
-    "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/react-utils": "0.1.23",
-    "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-schemas": "0.1.5",
+    "@noya-app/noya-designsystem": "0.1.65",
+    "@noya-app/noya-icons": "0.1.13",
+    "@noya-app/noya-multiplayer-react": "0.1.64",
+    "@noya-app/noya-keymap": "0.1.4",
+    "@noya-app/react-utils": "0.1.25",
+    "@noya-app/noya-utils": "0.1.7",
+    "@noya-app/noya-schemas": "0.1.7",
     "imfs": "^0.1.0",
     "browser-fs-access": "0.35.0"
   },

package/src/MediaCollection.tsx

@@ -13,8 +13,12 @@ import {
   FileExplorerEmptyState,
   FileExplorerLayout,
   FileExplorerUploadButton,
+  formatByteSize,
   ListView,
   MediaThumbnail,
+  MediaThumbnailProps,
+  RelativeDropPosition,
+  useOpenConfirmationDialog,
 } from "@noya-app/noya-designsystem";
 import {
   DownloadIcon,
@@ -32,7 +36,12 @@ import {
   useAssetManager,
   useAssets,
 } from "@noya-app/noya-multiplayer-react";
-import { FileMediaItem, MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import {
+  AssetMediaItem,
+  FileMediaItem,
+  MediaItem,
+  MediaMap,
+} from "@noya-app/noya-schemas";
 import { groupBy, isDeepEqual } from "@noya-app/noya-utils";
 import {
   downloadUrl,
@@ -56,6 +65,7 @@ import {
   createMediaFile,
   createMediaFolder,
   createMediaItemTree,
+  MediaItemTree,
   PLACEHOLDER_ITEM_NAME,
   rootMediaItem,
   rootMediaItemName,
@@ -63,18 +73,17 @@ import {
 
 import { path } from "imfs";
 import React from "react";
-import { formatByteSize } from "./formatByteSize";
 import {
-  deleteMediaItems,
-  ExpandedMap,
-  FileKindFilter,
-  getDepthMap,
-  getVisibleItems,
-  moveMediaInsideFolder,
-  moveUpAFolder,
-  renameMediaItemAndDescendantPaths,
-  updateExpandedMap,
-  validateMediaItemRename,
+  mediaDeleteMediaItems,
+  MediaExpandedMap,
+  MediaFileKindFilter,
+  mediaGetDepthMap,
+  mediaGetVisibleItems,
+  mediaMoveMediaInsideFolder,
+  mediaMoveUpAFolder,
+  mediaRenameMediaItemAndDescendantPaths,
+  mediaUpdateExpandedMap,
+  mediaValidateMediaItemRename,
 } from "./utils/files";
 
 const extensionToContentType = {
@@ -119,8 +128,10 @@ const MediaThumbnailInternal = memoGeneric(
     selected,
     size,
     path: pathProp,
+    renderThumbnailIcon,
   }: CollectionThumbnailProps<MediaItem> & {
     path?: string;
+    renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
   }) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : undefined);
     const isRoot = item.id === rootMediaItem.id;
@@ -129,10 +140,14 @@ const MediaThumbnailInternal = memoGeneric(
 
     let contentType: string | undefined;
     let url: string | undefined;
+    let width: number | undefined;
+    let height: number | undefined;
 
     if (asset) {
       contentType = asset.contentType;
       url = asset.url;
+      width = asset.width ?? undefined;
+      height = asset.height ?? undefined;
     } else if (isFile && pathProp) {
       const encoded = encodeFileContentForThumbnail(pathProp, item);
 
@@ -143,6 +158,7 @@ const MediaThumbnailInternal = memoGeneric(
     }
 
     const fileName = pathProp ? path.basename(pathProp) : undefined;
+    const dimensions = width && height ? { width, height } : undefined;
 
     return (
       <MediaThumbnail
@@ -152,6 +168,8 @@ const MediaThumbnailInternal = memoGeneric(
         selected={selected}
         size={size}
         fileName={fileName}
+        renderThumbnailIcon={renderThumbnailIcon}
+        dimensions={dimensions}
       />
     );
   }
@@ -177,6 +195,7 @@ export type MediaCollectionRef = {
   moveUpAFolder: (selectedIds: string[]) => void;
   replace: (selectedItem: MediaItem) => void;
   preview: (selectedItems: MediaItem[]) => void;
+  getItemAtIndex: (index: number) => MediaItem | undefined;
 };
 
 type MediaCollectionProps = {
@@ -199,7 +218,7 @@ type MediaCollectionProps = {
    *
    * @default "all"
    * */
-  fileKindFilter?: FileKindFilter;
+  fileKindFilter?: MediaFileKindFilter;
   /**
    * Whether to show the root item
    *
@@ -207,7 +226,7 @@ type MediaCollectionProps = {
    * */
   showRootItem?: boolean;
   /** Whether to expand all directories by default */
-  initialExpanded?: ExpandedMap;
+  initialExpanded?: MediaExpandedMap;
   /**
    * Callback for when an item is double-clicked
    */
@@ -231,6 +250,9 @@ type MediaCollectionProps = {
   >;
   /** @default false */
   sortable?: boolean;
+  renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
+  onDidDeleteItems?: (items: [string, MediaItem][]) => void;
+  onAssetsUploaded?: (mediaMap: Record<string, AssetMediaItem>) => void;
 } & Pick<
   CollectionProps<MediaItem, MenuAction>,
   | "sortableId"
@@ -272,6 +294,9 @@ export const MediaCollection = memo(
       renderEmptyState,
       sharedDragProps,
       onClickItem,
+      renderThumbnailIcon,
+      onDidDeleteItems,
+      onAssetsUploaded,
     },
     ref
   ) {
@@ -312,10 +337,10 @@ export const MediaCollection = memo(
     );
     const assetManager = useAssetManager();
     const assets = useAssets();
-    const [expandedMap, setExpandedMap] = useState<ExpandedMap>({});
+    const [expandedMap, setExpandedMap] = useState<MediaExpandedMap>({});
     const visibleItems = useMemo(
       () =>
-        getVisibleItems({
+        mediaGetVisibleItems({
           expandedMap,
           fileKindFilter: fileKindFilter,
           rootItemId,
@@ -333,7 +358,8 @@ export const MediaCollection = memo(
       ]
     );
     const depthMap = useMemo(
-      () => getDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
+      () =>
+        mediaGetDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
       [treeWithTempItem, showAllDescendants]
     );
     const collectionRef = useRef<CollectionRef>(null);
@@ -384,17 +410,46 @@ export const MediaCollection = memo(
       [expandedMap, expandable]
     );
 
+    const openConfirmationDialog = useOpenConfirmationDialog();
+
     const handleDelete = useCallback(
-      (selectedIds: string[]) => {
-        const newMedia = deleteMediaItems({
+      async (selectedIds: string[]) => {
+        const ok = await openConfirmationDialog({
+          title: "Delete items",
+          description:
+            "Are you sure you want to delete these items? This action cannot be undone.",
+        });
+
+        if (!ok) return;
+
+        const deletedItems = Object.entries(media).flatMap(
+          ([path, item]): [string, MediaItem][] => {
+            if (selectedIds.includes(item.id)) {
+              return [[path, item]];
+            }
+            return [];
+          }
+        );
+
+        const newMedia = mediaDeleteMediaItems({
           selectedIds,
           media,
           tree,
         });
+
         setSelectedIds([rootMediaItem.id]);
         setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+
+        onDidDeleteItems?.(deletedItems);
       },
-      [media, setMedia, setSelectedIds, tree]
+      [
+        media,
+        setMedia,
+        setSelectedIds,
+        tree,
+        onDidDeleteItems,
+        openConfirmationDialog,
+      ]
     );
 
     const onRename = useCallback(
@@ -404,7 +459,7 @@ export const MediaCollection = memo(
           selectedItem.id
         );
         if (!selectedItemPath) return;
-        const renameIsValid = validateMediaItemRename({
+        const renameIsValid = mediaValidateMediaItemRename({
           basename: newName,
           selectedItemPath,
           media: temp.media,
@@ -414,7 +469,7 @@ export const MediaCollection = memo(
           return;
         }
         const mediaWithRenamedDescendantPaths =
-          renameMediaItemAndDescendantPaths({
+          mediaRenameMediaItemAndDescendantPaths({
             newName,
             selectedItemPath,
             media: temp.media,
@@ -468,7 +523,7 @@ export const MediaCollection = memo(
 
     const handleMoveUpAFolder = useCallback(
       (selectedIds: string[]) => {
-        const newMedia = moveUpAFolder({
+        const newMedia = mediaMoveUpAFolder({
           tree,
           media,
           selectedIds,
@@ -485,6 +540,7 @@ export const MediaCollection = memo(
       async (selectedId: string) => {
         try {
           const files = await fileOpen({ multiple: true });
+
           if (!files || !Array.isArray(files) || files.length === 0) return;
 
           const parentPath = tree.idToPathMap.get(selectedId);
@@ -502,24 +558,31 @@ export const MediaCollection = memo(
 
           setIsUploading(true);
 
-          const newMediaMap = await Promise.all(uploadPromises);
+          const uploadedAssets = await Promise.all(uploadPromises);
+          const newMediaMap = Object.fromEntries(
+            uploadedAssets.map(({ assetPath, asset }) => [assetPath, asset])
+          );
 
           setMedia(
             { name: "Add media items", timestamp: Date.now() },
             {
               ...media,
-              ...Object.fromEntries(
-                newMediaMap.map(({ assetPath, asset }) => [assetPath, asset])
-              ),
+              ...newMediaMap,
             }
           );
+
+          onAssetsUploaded?.(newMediaMap);
         } catch (error) {
-          console.error("Failed to upload files:", error);
+          if (error instanceof Error && error.name === "AbortError") {
+            // Ignore user-cancelled file picker
+          } else {
+            console.error("Failed to upload files:", error);
+          }
         } finally {
           setIsUploading(false);
         }
       },
-      [tree.idToPathMap, setMedia, media, assetManager]
+      [tree.idToPathMap, setMedia, media, assetManager, onAssetsUploaded]
     );
 
     const handleDownload = useCallback(
@@ -573,7 +636,11 @@ export const MediaCollection = memo(
             }
           );
         } catch (error) {
-          console.error("Failed to upload file:", error);
+          if (error instanceof Error && error.name === "AbortError") {
+            // Ignore user-cancelled file picker
+          } else {
+            console.error("Failed to upload files:", error);
+          }
         }
       },
       [media, setMedia, assetManager, tree]
@@ -588,15 +655,13 @@ export const MediaCollection = memo(
 
     const handleMoveMediaInsideFolder = useCallback(
       (sourceItem: MediaItem, targetItem: MediaItem) => {
-        const sourceItemPath = tree.idToPathMap.get(sourceItem.id);
-        const targetItemPath = tree.idToPathMap.get(targetItem.id);
-        if (!sourceItemPath || !targetItemPath) return;
-        const newMedia = moveMediaInsideFolder({
+        const newMedia = mediaMoveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
           targetItemId: targetItem.id,
           media,
           tree,
         });
+
         setMedia(
           {
             name: "Move media file inside folder",
@@ -630,12 +695,12 @@ export const MediaCollection = memo(
         ],
         [
           onlySingleFolderSelected && {
-            title: "Add media",
+            title: "Upload Files",
             value: "upload",
             icon: <UploadIcon />,
           },
           onlySingleFolderSelected && {
-            title: "Add a Folder",
+            title: "Add Folder",
             value: "addFolder",
             icon: <FolderIcon />,
           },
@@ -717,7 +782,7 @@ export const MediaCollection = memo(
     const handleSetExpanded = useCallback(
       (item: MediaItem, expanded: boolean) => {
         setExpandedMap((prev) =>
-          updateExpandedMap({
+          mediaUpdateExpandedMap({
             item,
             expanded,
             expandable,
@@ -768,6 +833,7 @@ export const MediaCollection = memo(
       replace: handleReplace,
       preview: handlePreview,
       moveMediaInsideFolder: handleMoveMediaInsideFolder,
+      getItemAtIndex: (index) => visibleItems[index],
     }));
 
     return (
@@ -810,6 +876,7 @@ export const MediaCollection = memo(
                   return "Enter folder name";
                 case "asset":
                 case "file":
+                case "noyaFile":
                   return "Enter file name";
               }
             }}
@@ -832,6 +899,7 @@ export const MediaCollection = memo(
               <MediaThumbnailInternal
                 {...props}
                 path={tree.idToPathMap.get(props.item.id)}
+                renderThumbnailIcon={renderThumbnailIcon}
               />
             )}
             renderAction={renderAction}
@@ -849,7 +917,7 @@ export const MediaCollection = memo(
               renderEmptyState?.() ?? <FileExplorerEmptyState />
             }
             itemRoleDescription="clickable file item"
-            getDropTargetParentIndex={(overIndex: number) => {
+            getDropTargetParentIndex={(overIndex) => {
               const item = visibleItems[overIndex];
               const parentIndex = visibleItems.findIndex(
                 (i) => i.id === tree.getParentIdForId(item.id)
@@ -867,79 +935,70 @@ export const MediaCollection = memo(
                 return false;
               }
 
-              const sourceItem = visibleItems[sourceIndex];
-              const targetItem = visibleItems[targetIndex];
-
-              if (position !== "inside" || targetItem.kind === "asset") {
+              if (sourceListId !== sortableId || targetListId !== sortableId) {
                 return false;
               }
-              const sourcePath = tree.findPath(
-                rootMediaItem,
-                (item) => item.id === sourceItem.id
-              );
-              const targetPath = tree.findPath(
-                rootMediaItem,
-                (item) => item.id === targetItem.id
-              );
 
-              // Don't allow dragging into a descendant
-              if (!sourcePath || !targetPath) return false;
-              if (
-                isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))
-              ) {
-                return false;
-              }
+              const sourceItem = visibleItems[sourceIndex];
+              const targetItem = visibleItems[targetIndex];
 
-              return true;
+              return acceptsMediaItemDrop({
+                position,
+                sourceItem,
+                targetItem,
+                tree,
+              });
             }}
-            onMoveItem={({ sourceIndex, targetIndex, position }) => {
+            onMoveItem={({
+              sourceListId,
+              sourceIndex,
+              targetListId,
+              targetIndex,
+              position,
+            }) => {
+              if (sourceListId !== sortableId || targetListId !== sortableId) {
+                return;
+              }
+
               const sourceItem = visibleItems[sourceIndex];
               const targetItem = visibleItems[targetIndex];
               if (position === "inside") {
                 handleMoveMediaInsideFolder(sourceItem, targetItem);
               }
             }}
-            onFilesDrop={async (event: React.DragEvent<Element>) => {
-              event.preventDefault();
-
-              const files = Array.from(event.dataTransfer.files);
-              if (files.length === 0) return;
-
-              try {
-                // Upload all dropped files
-                const uploadPromises = files.map(async (file) => {
-                  const asset = await assetManager.create(file);
-                  return {
-                    asset: createMediaAsset({
-                      assetId: asset.id,
-                    }),
-                    name: file.name,
-                  };
-                });
-
-                const newMediaItems = await Promise.all(uploadPromises);
-                const rootItemPath = tree.idToPathMap.get(rootItemId);
-                if (!rootItemPath) return;
-                // Add all the media file references to our state
-                setMedia(
-                  { name: "Add media files", timestamp: Date.now() },
-                  {
-                    ...media,
-                    ...Object.fromEntries(
-                      newMediaItems.map((item) => [
-                        path.join(rootItemPath, item.name),
-                        item.asset,
-                      ])
-                    ),
-                  }
-                );
-              } catch (error) {
-                console.error("Failed to upload dropped files:", error);
-              }
-            }}
           />
         </FileExplorerLayout>
       </>
     );
   })
 );
+
+export function acceptsMediaItemDrop(parameters: {
+  position: RelativeDropPosition;
+  sourceItem: MediaItem;
+  targetItem: MediaItem;
+  tree: MediaItemTree;
+}) {
+  const { position, sourceItem, targetItem, tree } = parameters;
+
+  if (position !== "inside" || targetItem.kind === "asset") {
+    return false;
+  }
+  const sourcePath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === sourceItem.id
+  );
+  const targetPath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === targetItem.id
+  );
+
+  // Don't allow dragging into a descendant
+  if (!sourcePath || !targetPath) return false;
+
+  if (isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))) {
+    return false;
+  }
+
+  return true;
+}