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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.16",
+  "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.64",
-    "@noya-app/noya-icons": "0.1.12",
-    "@noya-app/noya-multiplayer-react": "0.1.63",
+    "@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.24",
-    "@noya-app/noya-utils": "0.1.6",
-    "@noya-app/noya-schemas": "0.1.6",
+    "@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

@@ -18,6 +18,7 @@ import {
   MediaThumbnail,
   MediaThumbnailProps,
   RelativeDropPosition,
+  useOpenConfirmationDialog,
 } from "@noya-app/noya-designsystem";
 import {
   DownloadIcon,
@@ -35,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,
@@ -68,18 +74,17 @@ import {
 import { path } from "imfs";
 import React from "react";
 import {
-  deleteMediaItems,
-  ExpandedMap,
-  FileKindFilter,
-  getDepthMap,
-  getVisibleItems,
-  moveMediaInsideFolder,
-  moveUpAFolder,
-  renameMediaItemAndDescendantPaths,
-  updateExpandedMap,
-  validateMediaItemRename,
+  mediaDeleteMediaItems,
+  MediaExpandedMap,
+  MediaFileKindFilter,
+  mediaGetDepthMap,
+  mediaGetVisibleItems,
+  mediaMoveMediaInsideFolder,
+  mediaMoveUpAFolder,
+  mediaRenameMediaItemAndDescendantPaths,
+  mediaUpdateExpandedMap,
+  mediaValidateMediaItemRename,
 } from "./utils/files";
-import { handleDataTransfer } from "./utils/handleFileDrop";
 
 const extensionToContentType = {
   svg: "image/svg+xml",
@@ -135,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);
 
@@ -149,6 +158,7 @@ const MediaThumbnailInternal = memoGeneric(
     }
 
     const fileName = pathProp ? path.basename(pathProp) : undefined;
+    const dimensions = width && height ? { width, height } : undefined;
 
     return (
       <MediaThumbnail
@@ -159,6 +169,7 @@ const MediaThumbnailInternal = memoGeneric(
         size={size}
         fileName={fileName}
         renderThumbnailIcon={renderThumbnailIcon}
+        dimensions={dimensions}
       />
     );
   }
@@ -207,7 +218,7 @@ type MediaCollectionProps = {
    *
    * @default "all"
    * */
-  fileKindFilter?: FileKindFilter;
+  fileKindFilter?: MediaFileKindFilter;
   /**
    * Whether to show the root item
    *
@@ -215,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
    */
@@ -241,6 +252,7 @@ type MediaCollectionProps = {
   sortable?: boolean;
   renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
   onDidDeleteItems?: (items: [string, MediaItem][]) => void;
+  onAssetsUploaded?: (mediaMap: Record<string, AssetMediaItem>) => void;
 } & Pick<
   CollectionProps<MediaItem, MenuAction>,
   | "sortableId"
@@ -284,6 +296,7 @@ export const MediaCollection = memo(
       onClickItem,
       renderThumbnailIcon,
       onDidDeleteItems,
+      onAssetsUploaded,
     },
     ref
   ) {
@@ -324,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,
@@ -345,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);
@@ -396,8 +410,18 @@ export const MediaCollection = memo(
       [expandedMap, expandable]
     );
 
+    const openConfirmationDialog = useOpenConfirmationDialog();
+
     const handleDelete = useCallback(
-      (selectedIds: string[]) => {
+      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)) {
@@ -407,7 +431,7 @@ export const MediaCollection = memo(
           }
         );
 
-        const newMedia = deleteMediaItems({
+        const newMedia = mediaDeleteMediaItems({
           selectedIds,
           media,
           tree,
@@ -418,7 +442,14 @@ export const MediaCollection = memo(
 
         onDidDeleteItems?.(deletedItems);
       },
-      [media, setMedia, setSelectedIds, tree, onDidDeleteItems]
+      [
+        media,
+        setMedia,
+        setSelectedIds,
+        tree,
+        onDidDeleteItems,
+        openConfirmationDialog,
+      ]
     );
 
     const onRename = useCallback(
@@ -428,7 +459,7 @@ export const MediaCollection = memo(
           selectedItem.id
         );
         if (!selectedItemPath) return;
-        const renameIsValid = validateMediaItemRename({
+        const renameIsValid = mediaValidateMediaItemRename({
           basename: newName,
           selectedItemPath,
           media: temp.media,
@@ -438,7 +469,7 @@ export const MediaCollection = memo(
           return;
         }
         const mediaWithRenamedDescendantPaths =
-          renameMediaItemAndDescendantPaths({
+          mediaRenameMediaItemAndDescendantPaths({
             newName,
             selectedItemPath,
             media: temp.media,
@@ -492,7 +523,7 @@ export const MediaCollection = memo(
 
     const handleMoveUpAFolder = useCallback(
       (selectedIds: string[]) => {
-        const newMedia = moveUpAFolder({
+        const newMedia = mediaMoveUpAFolder({
           tree,
           media,
           selectedIds,
@@ -527,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(
@@ -598,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]
@@ -613,7 +655,7 @@ export const MediaCollection = memo(
 
     const handleMoveMediaInsideFolder = useCallback(
       (sourceItem: MediaItem, targetItem: MediaItem) => {
-        const newMedia = moveMediaInsideFolder({
+        const newMedia = mediaMoveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
           targetItemId: targetItem.id,
           media,
@@ -740,7 +782,7 @@ export const MediaCollection = memo(
     const handleSetExpanded = useCallback(
       (item: MediaItem, expanded: boolean) => {
         setExpandedMap((prev) =>
-          updateExpandedMap({
+          mediaUpdateExpandedMap({
             item,
             expanded,
             expandable,
@@ -924,27 +966,6 @@ export const MediaCollection = memo(
                 handleMoveMediaInsideFolder(sourceItem, targetItem);
               }
             }}
-            onFilesDrop={async (event: React.DragEvent<Element>) => {
-              event.preventDefault();
-
-              const rootItemPath = tree.idToPathMap.get(rootItemId);
-
-              if (!rootItemPath) return;
-
-              const newMedia = await handleDataTransfer({
-                dataTransfer: event.dataTransfer,
-                rootItemPath,
-                media,
-                uploadAsset: (file) => assetManager.create(file),
-              });
-
-              if (!newMedia) return;
-
-              setMedia(
-                { name: "Add media files", timestamp: Date.now() },
-                newMedia
-              );
-            }}
           />
         </FileExplorerLayout>
       </>