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

package/src/MediaCollection.tsx

@@ -71,12 +71,13 @@ import {
   getVisibleItems,
   moveMediaInsideFolder,
   moveUpAFolder,
+  renameMediaItemAndDescendantPaths,
   updateExpandedMap,
   validateMediaItemRename,
 } from "./utils/files";
 
 const MediaThumbnailInternal = memoGeneric(
-  ({ item, selected }: CollectionThumbnailProps<MediaItem>) => {
+  ({ item, selected, size }: CollectionThumbnailProps<MediaItem>) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : undefined);
     const isRoot = item.id === rootMediaItem.id;
     const isFolder = item.kind === "folder";
@@ -86,6 +87,7 @@ const MediaThumbnailInternal = memoGeneric(
         iconName={isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : undefined}
         url={asset?.url}
         selected={selected}
+        size={size}
       />
     );
   }
@@ -200,14 +202,24 @@ export const MediaCollection = memo(
     const [tempItem, setTempItem] = useState<[string, MediaItem] | undefined>(
       undefined
     );
-    const treeWithTempItem = useMemo(
-      () =>
-        createMediaItemTree({
-          ...media,
-          ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
-        }),
+    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<string[]>(
       {
         defaultValue: [],
@@ -273,14 +285,6 @@ export const MediaCollection = memo(
       return itemPath.startsWith(path.dirname(firstSelectedPath));
     });
 
-    // Convert size prop to grid size if in grid view
-    const gridSize = useMemo(() => {
-      if (viewType === "grid") {
-        return size;
-      }
-      return "medium";
-    }, [viewType, size]);
-
     useEffect(() => {
       if (initialExpanded) {
         setExpandedMap(initialExpanded);
@@ -318,31 +322,29 @@ export const 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(undefined);
           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,
-            [path.join(path.dirname(selectedItemPath), newName)]: selectedItem,
-          }
+          mediaWithRenamedDescendantPaths
         );
         setTempItem(undefined);
       },
-      [media, renamable, setMedia, tempItem, treeWithTempItem.idToPathMap]
+      [renamable, setMedia, temp.media, temp.tree, treeWithTempItem.idToPathMap]
     );
 
     const handleAddFolder = useCallback(
@@ -650,6 +652,7 @@ export const MediaCollection = memo(
           onSelect={(action) => handleMenuAction(action, selectedMediaItems)}
           selected={selected}
           onOpenChange={onOpenChange}
+          variant={viewType === "grid" ? "normal" : "bare"}
           style={{
             backgroundColor: selected
               ? cssVars.colors.primaryPastel
@@ -662,6 +665,7 @@ export const MediaCollection = memo(
       handleMenuAction,
       renderActionProp,
       selectedMediaItems,
+      viewType,
     ]);
 
     useImperativeHandle(ref, () => ({
@@ -696,7 +700,7 @@ export const MediaCollection = memo(
             scrollable={scrollable}
             items={visibleItems}
             viewType={viewType}
-            size={gridSize}
+            size={size}
             getId={(file) => file.id}
             getName={(file) => {
               if (file.id === tempItem?.[1].id) {
@@ -736,7 +740,7 @@ export const MediaCollection = memo(
               const asset = assets.find((a) => a.id === file.assetId);
               if (!asset) return null;
               return (
-                <FileExplorerDetail selected={selected}>
+                <FileExplorerDetail selected={selected} size={size}>
                   {(asset.size / 1024).toFixed(1)}KB
                 </FileExplorerDetail>
               );

package/src/__tests__/renameMediaItemAndDescendantPaths.test.ts

@@ -0,0 +1,139 @@
+import { MediaMap } from "@noya-app/noya-schemas";
+import { expect, it } from "bun:test";
+import { renameMediaItemAndDescendantPaths } from "../utils/files";
+import {
+  createMediaAsset,
+  createMediaFolder,
+  createMediaItemTree,
+} from "../utils/mediaItemTree";
+
+it("should rename a folder with no children", () => {
+  const dir1 = createMediaFolder();
+  const media: MediaMap = { dir1 };
+
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({ "renamed-dir": dir1 });
+  expect(result).not.toHaveProperty("dir1");
+});
+
+it("should rename a folder and update paths of its immediate children", () => {
+  const dir1 = createMediaFolder();
+  const child1 = createMediaAsset({ assetId: "asset1" });
+  const child2 = createMediaFolder();
+  const media: MediaMap = {
+    dir1,
+    "dir1/child1": child1,
+    "dir1/child2": child2,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    "renamed-dir": dir1,
+    "renamed-dir/child1": child1,
+    "renamed-dir/child2": child2,
+  });
+  expect(result).not.toHaveProperty("dir1");
+  expect(result).not.toHaveProperty("dir1/child1");
+  expect(result).not.toHaveProperty("dir1/child2");
+});
+
+it("should rename a folder and update paths of all nested descendants", () => {
+  const dir1 = createMediaFolder();
+  const dir2 = createMediaFolder();
+  const dir3 = createMediaFolder();
+  const asset1 = createMediaAsset({ assetId: "asset1" });
+  const media: MediaMap = {
+    dir1,
+    "dir1/dir2": dir2,
+    "dir1/dir2/dir3": dir3,
+    "dir1/dir2/dir3/asset1": asset1,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    "renamed-dir": dir1,
+    "renamed-dir/dir2": dir2,
+    "renamed-dir/dir2/dir3": dir3,
+    "renamed-dir/dir2/dir3/asset1": asset1,
+  });
+  expect(result).not.toHaveProperty("dir1");
+  expect(result).not.toHaveProperty("dir1/dir2");
+  expect(result).not.toHaveProperty("dir1/dir2/dir3");
+  expect(result).not.toHaveProperty("dir1/dir2/dir3/asset1");
+});
+
+it("should rename a file (asset) correctly", () => {
+  const dir1 = createMediaFolder();
+  const asset1 = createMediaAsset({ assetId: "asset1" });
+  const asset2 = createMediaAsset({ assetId: "asset2" });
+  const media: MediaMap = {
+    dir1,
+    "dir1/asset1": asset1,
+    "dir1/asset2": asset2,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-asset.png",
+    selectedItemPath: "dir1/asset1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    dir1,
+    "dir1/renamed-asset.png": asset1,
+    "dir1/asset2": asset2,
+  });
+  expect(result).not.toHaveProperty("dir1/asset1");
+});
+
+it("should preserve other unrelated paths when renaming", () => {
+  const dir1 = createMediaFolder();
+  const dir2 = createMediaFolder();
+  const asset1 = createMediaAsset({ assetId: "asset1" });
+  const asset2 = createMediaAsset({ assetId: "asset2" });
+  const media: MediaMap = {
+    dir1,
+    dir2,
+    "dir1/asset1": asset1,
+    "dir2/asset2": asset2,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    "renamed-dir": dir1,
+    "renamed-dir/asset1": asset1,
+    dir2,
+    "dir2/asset2": asset2,
+  });
+});

package/src/utils/files.ts

@@ -90,6 +90,7 @@ export const validateMediaItemRename = ({
   if (newPathExists) return false;
   return true;
 };
+
 export const movePathsIntoTarget = ({
   media,
   sourceItemPaths,
@@ -135,6 +136,7 @@ export const movePathsIntoTarget = ({
   }
   return mediaClone;
 };
+
 export const moveUpAFolder = ({
   tree,
   media,
@@ -168,6 +170,7 @@ export const moveUpAFolder = ({
     tree,
   });
 };
+
 export const getDepthMap = (
   item: MediaItem,
   tree: MediaItemTree,
@@ -183,6 +186,7 @@ export const getDepthMap = (
   });
   return depthMap;
 };
+
 export const updateExpandedMap = ({
   item,
   expanded,
@@ -211,6 +215,7 @@ export const updateExpandedMap = ({
   inner(item, expanded);
   return newExpandedMap;
 };
+
 export const deleteMediaItems = ({
   selectedIds,
   media,
@@ -235,6 +240,7 @@ export const deleteMediaItems = ({
     Object.entries(media).filter(([key]) => !itemKeysToDelete.has(key))
   );
 };
+
 export const moveMediaInsideFolder = ({
   sourceItemIds,
   targetItemId,
@@ -260,6 +266,7 @@ export const moveMediaInsideFolder = ({
     tree,
   });
 };
+
 export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
   const tree = createMediaItemTree(mediaMap);
 
@@ -272,3 +279,41 @@ export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
 
   return tree.accessPath(rootMediaItem, indexPath);
 };
+
+export const renameMediaItemAndDescendantPaths = ({
+  newName,
+  selectedItemPath,
+  media,
+  tree,
+}: {
+  newName: string;
+  selectedItemPath: string;
+  media: MediaMap;
+  tree: MediaItemTree;
+}) => {
+  const mediaClone = { ...media };
+  const selectedItem = mediaClone[selectedItemPath];
+  if (!selectedItem) return mediaClone;
+
+  const parentPath = path.dirname(selectedItemPath);
+  const newItemPath = path.join(parentPath, newName);
+
+  const descendants = tree
+    .flat(selectedItem)
+    .map((item) => tree.idToPathMap.get(item.id));
+
+  // Update all descendants' paths
+  for (const descendantPath of descendants) {
+    if (!descendantPath) continue;
+
+    // Use the same approach as movePathsIntoTarget
+    const newDescendantPath = descendantPath.replace(
+      selectedItemPath,
+      newItemPath
+    );
+    mediaClone[newDescendantPath] = mediaClone[descendantPath];
+    delete mediaClone[descendantPath];
+  }
+
+  return mediaClone;
+};

package/tsup.config.ts

@@ -1,4 +1,3 @@
-import fixReactVirtualized from "esbuild-plugin-react-virtualized";
 import { defineConfig } from "tsup";
 
 export default defineConfig({
@@ -6,8 +5,7 @@ export default defineConfig({
   format: ["cjs", "esm"],
   dts: true,
   sourcemap: true,
-  noExternal: ["react-virtualized", "@noya-app/noya-designsystem/index.css"],
-  esbuildPlugins: [fixReactVirtualized],
+  noExternal: ["@noya-app/noya-designsystem/index.css"],
   // https://github.com/egoist/tsup/issues/619
   splitting: false,
 });