@noya-app/noya-file-explorer 0.0.2 → 0.0.3

package/dist/index.mjs

@@ -1222,10 +1222,33 @@ var getParentDirectories = (mediaMap, folderId) => {
   if (!indexPath) return [rootMediaItem];
   return tree.accessPath(rootMediaItem, indexPath);
 };
+var renameMediaItemAndDescendantPaths = ({
+  newName,
+  selectedItemPath,
+  media,
+  tree
+}) => {
+  const mediaClone = { ...media };
+  const selectedItem = mediaClone[selectedItemPath];
+  if (!selectedItem) return mediaClone;
+  const parentPath = path2.dirname(selectedItemPath);
+  const newItemPath = path2.join(parentPath, newName);
+  const descendants = tree.flat(selectedItem).map((item) => tree.idToPathMap.get(item.id));
+  for (const descendantPath of descendants) {
+    if (!descendantPath) continue;
+    const newDescendantPath = descendantPath.replace(
+      selectedItemPath,
+      newItemPath
+    );
+    mediaClone[newDescendantPath] = mediaClone[descendantPath];
+    delete mediaClone[descendantPath];
+  }
+  return mediaClone;
+};
 
 // src/MediaCollection.tsx
 var MediaThumbnailInternal = memoGeneric(
-  ({ item, selected }) => {
+  ({ item, selected, size }) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : void 0);
     const isRoot = item.id === rootMediaItem.id;
     const isFolder = item.kind === "folder";
@@ -1235,7 +1258,8 @@ var MediaThumbnailInternal = memoGeneric(
         contentType: asset?.contentType,
         iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
         url: asset?.url,
-        selected
+        selected,
+        size
       }
     );
   }
@@ -1269,13 +1293,24 @@ var MediaCollection = memo(
     const [tempItem, setTempItem] = useState(
       void 0
     );
-    const treeWithTempItem = useMemo(
-      () => createMediaItemTree({
+    const mediaWithTempItem = useMemo(
+      () => ({
         ...media,
         ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
       }),
       [media, tempItem]
     );
+    const treeWithTempItem = useMemo(
+      () => createMediaItemTree(mediaWithTempItem),
+      [mediaWithTempItem]
+    );
+    const temp = useMemo(
+      () => ({
+        media: mediaWithTempItem,
+        tree: treeWithTempItem
+      }),
+      [mediaWithTempItem, treeWithTempItem]
+    );
     const [selectedIds, setSelectedIds] = useControlledOrUncontrolled(
       {
         defaultValue: [],
@@ -1330,12 +1365,6 @@ var MediaCollection = memo(
       if (!itemPath || !firstSelectedPath) return false;
       return itemPath.startsWith(path3.dirname(firstSelectedPath));
     });
-    const gridSize = useMemo(() => {
-      if (viewType === "grid") {
-        return size;
-      }
-      return "medium";
-    }, [viewType, size]);
     useEffect(() => {
       if (initialExpanded) {
         setExpandedMap(initialExpanded);
@@ -1369,31 +1398,28 @@ var MediaCollection = memo(
           selectedItem.id
         );
         if (!selectedItemPath) return;
-        const mediaWithTempItem = {
-          ...media,
-          ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
-        };
         const renameIsValid = validateMediaItemRename({
           basename: newName,
           selectedItemPath,
-          media: mediaWithTempItem
+          media: temp.media
         });
         if (!renameIsValid) {
           setTempItem(void 0);
           return;
         }
-        const mediaClone = { ...media };
-        delete mediaClone[selectedItemPath];
+        const mediaWithRenamedDescendantPaths = renameMediaItemAndDescendantPaths({
+          newName,
+          selectedItemPath,
+          media: temp.media,
+          tree: temp.tree
+        });
         setMedia(
           { name: "Rename media item", timestamp: Date.now() },
-          {
-            ...mediaClone,
-            [path3.join(path3.dirname(selectedItemPath), newName)]: selectedItem
-          }
+          mediaWithRenamedDescendantPaths
         );
         setTempItem(void 0);
       },
-      [media, renamable, setMedia, tempItem, treeWithTempItem.idToPathMap]
+      [renamable, setMedia, temp.media, temp.tree, treeWithTempItem.idToPathMap]
     );
     const handleAddFolder = useCallback(
       (currentFolderId) => {
@@ -1673,6 +1699,7 @@ var MediaCollection = memo(
           onSelect: (action) => handleMenuAction(action, selectedMediaItems),
           selected,
           onOpenChange,
+          variant: viewType === "grid" ? "normal" : "bare",
           style: {
             backgroundColor: selected ? cssVars.colors.primaryPastel : "transparent"
           }
@@ -1682,7 +1709,8 @@ var MediaCollection = memo(
       assetContextMenuItems,
       handleMenuAction,
       renderActionProp,
-      selectedMediaItems
+      selectedMediaItems,
+      viewType
     ]);
     useImperativeHandle(ref, () => ({
       upload: (selectedId) => handleUpload(selectedId),
@@ -1717,7 +1745,7 @@ var MediaCollection = memo(
           scrollable,
           items: visibleItems,
           viewType,
-          size: gridSize,
+          size,
           getId: (file) => file.id,
           getName: (file) => {
             if (file.id === tempItem?.[1].id) {
@@ -1756,7 +1784,7 @@ var MediaCollection = memo(
             if (file.kind !== "asset") return null;
             const asset = assets.find((a) => a.id === file.assetId);
             if (!asset) return null;
-            return /* @__PURE__ */ React.createElement(FileExplorerDetail, { selected }, (asset.size / 1024).toFixed(1), "KB");
+            return /* @__PURE__ */ React.createElement(FileExplorerDetail, { selected, size }, (asset.size / 1024).toFixed(1), "KB");
           },
           renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ React.createElement(FileExplorerEmptyState, null),
           itemRoleDescription: "clickable file item",
@@ -1848,6 +1876,7 @@ export {
   moveMediaInsideFolder,
   movePathsIntoTarget,
   moveUpAFolder,
+  renameMediaItemAndDescendantPaths,
   rootMediaItem,
   rootMediaItemName,
   rootMediaItemPath,