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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,11 +20,11 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.62",
-    "@noya-app/noya-icons": "0.1.10",
-    "@noya-app/noya-multiplayer-react": "0.1.61",
+    "@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.22",
+    "@noya-app/react-utils": "0.1.23",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-schemas": "0.1.5",
     "imfs": "^0.1.0",

package/src/MediaCollection.tsx

@@ -63,6 +63,7 @@ import {
 
 import { path } from "imfs";
 import React from "react";
+import { formatByteSize } from "./formatByteSize";
 import {
   deleteMediaItems,
   ExpandedMap,
@@ -239,6 +240,7 @@ type MediaCollectionProps = {
   | "scrollable"
   | "renderEmptyState"
   | "sharedDragProps"
+  | "onClickItem"
 >;
 
 export const MediaCollection = memo(
@@ -269,6 +271,7 @@ export const MediaCollection = memo(
       sortable = false,
       renderEmptyState,
       sharedDragProps,
+      onClickItem,
     },
     ref
   ) {
@@ -371,8 +374,7 @@ export const MediaCollection = memo(
       }
     }, [initialExpanded]);
 
-    // Handle expansion state
-    const handleExpanded = useCallback(
+    const getExpanded = useCallback(
       (item: MediaItem) => {
         if (!expandable) return undefined;
         if (item.kind !== "folder") return undefined;
@@ -477,6 +479,8 @@ export const MediaCollection = memo(
       [media, tree, setMedia]
     );
 
+    const [isUploading, setIsUploading] = useState(false);
+
     const handleUpload = useCallback(
       async (selectedId: string) => {
         try {
@@ -496,6 +500,8 @@ export const MediaCollection = memo(
             };
           });
 
+          setIsUploading(true);
+
           const newMediaMap = await Promise.all(uploadPromises);
 
           setMedia(
@@ -509,6 +515,8 @@ export const MediaCollection = memo(
           );
         } catch (error) {
           console.error("Failed to upload files:", error);
+        } finally {
+          setIsUploading(false);
         }
       },
       [tree.idToPathMap, setMedia, media, assetManager]
@@ -771,6 +779,7 @@ export const MediaCollection = memo(
               <FileExplorerUploadButton
                 showUploadButton={showUploadButton}
                 onUpload={() => handleUpload(rootMediaItem.id)}
+                isUploading={isUploading}
               >
                 {right}
               </FileExplorerUploadButton>
@@ -804,7 +813,7 @@ export const MediaCollection = memo(
                   return "Enter file name";
               }
             }}
-            getExpanded={handleExpanded}
+            getExpanded={getExpanded}
             setExpanded={handleSetExpanded}
             getRenamable={(item) => {
               if (item.id === rootMediaItem.id) return false;
@@ -814,6 +823,7 @@ export const MediaCollection = memo(
             menuItems={assetContextMenuItems}
             onSelectMenuItem={handleMenuAction}
             onSelectionChange={setSelectedIds}
+            onClickItem={onClickItem}
             onDoubleClickItem={onDoubleClickItem}
             onRename={onRename}
             renamable={renamable}
@@ -831,7 +841,7 @@ export const MediaCollection = memo(
               if (!asset) return null;
               return (
                 <FileExplorerDetail selected={selected} size={size}>
-                  {(asset.size / 1024).toFixed(1)}KB
+                  {formatByteSize(asset.size)}
                 </FileExplorerDetail>
               );
             }}

package/src/formatByteSize.ts

@@ -0,0 +1,8 @@
+const byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+export function formatByteSize(size: number) {
+  const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
+  const unit = byteSizeUnits[unitIndex];
+  const value = size / Math.pow(1024, unitIndex);
+  return `${value.toFixed(1)} ${unit}`;
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 import "./index.css";
+export * from "./formatByteSize";
 export * from "./MediaCollection";
 export * from "./utils/files";
 export * from "./utils/mediaItemTree";