fix(file-explorer): introduce initialCollapsedFolders (#756)

codesandbox · Feb 22, 2023 · 27b075e · 27b075e · vercel · Feb 22, 2023
1 parent f4235df
commit 27b075e
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 1 deletion.
diff --git a/sandpack-react/src/components/FileExplorer/Directory.tsx b/sandpack-react/src/components/FileExplorer/Directory.tsx
@@ -25,8 +25,11 @@ export const Directory: React.FC<Props> = ({
   depth,
   autoHiddenFiles,
   visibleFiles,
+  initialCollapsedFolder,
 }) => {
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(
+    !initialCollapsedFolder?.includes(prefixedPath)
+  );
 
   const toggle = (): void => setOpen((prev) => !prev);
 
@@ -45,6 +48,7 @@ export const Directory: React.FC<Props> = ({
           autoHiddenFiles={autoHiddenFiles}
           depth={depth + 1}
           files={files}
+          initialCollapsedFolder={initialCollapsedFolder}
           prefixedPath={prefixedPath}
           selectFile={selectFile}
           visibleFiles={visibleFiles}

diff --git a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx
@@ -52,6 +52,43 @@ export const Component: React.FC = () => (
   </>
 );
 
+export const InitialCollapsedFolder: React.FC = () => (
+  <>
+    <SandpackProvider
+      customSetup={{
+        entry: "/index.tsx",
+      }}
+      files={{
+        "/index.tsx": "",
+        "/src/app.tsx": "",
+        "/src/components/button.tsx": "",
+      }}
+    >
+      <SandpackLayout>
+        <SandpackFileExplorer initialCollapsedFolder={["/src/components/"]} />
+        <SandpackCodeEditor closableTabs />
+      </SandpackLayout>
+    </SandpackProvider>
+
+    <SandpackProvider
+      customSetup={{
+        entry: "/index.tsx",
+      }}
+      files={{
+        "/index.tsx": "",
+        "/src/app.tsx": "",
+        "/src/components/button.tsx": "",
+        "/src/components/really-loooooooong-naaameeee.tsx": "",
+      }}
+      theme="dark"
+    >
+      <SandpackLayout>
+        <SandpackFileExplorer initialCollapsedFolder={["/src/components/"]} />
+      </SandpackLayout>
+    </SandpackProvider>
+  </>
+);
+
 export const LongFileTree: React.FC = () => (
   <SandpackProvider
     customSetup={{

diff --git a/sandpack-react/src/components/FileExplorer/ModuleList.tsx b/sandpack-react/src/components/FileExplorer/ModuleList.tsx
@@ -26,6 +26,7 @@ export const ModuleList: React.FC<ModuleListProps> = ({
   files,
   autoHiddenFiles,
   visibleFiles,
+  initialCollapsedFolder,
 }) => {
   const { directories, modules } = fromPropsToModules({
     visibleFiles,
@@ -43,6 +44,7 @@ export const ModuleList: React.FC<ModuleListProps> = ({
           autoHiddenFiles={autoHiddenFiles}
           depth={depth}
           files={files}
+          initialCollapsedFolder={initialCollapsedFolder}
           prefixedPath={dir}
           selectFile={selectFile}
           visibleFiles={visibleFiles}

diff --git a/sandpack-react/src/components/FileExplorer/index.tsx b/sandpack-react/src/components/FileExplorer/index.tsx
@@ -22,11 +22,14 @@ export interface SandpackFileExplorerProp {
    * @default false
    */
   autoHiddenFiles?: boolean;
+
+  initialCollapsedFolder?: string[];
 }
 
 export const SandpackFileExplorer = ({
   className,
   autoHiddenFiles = false,
+  initialCollapsedFolder = [],
   ...props
 }: SandpackFileExplorerProp &
   React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
@@ -83,6 +86,7 @@ export const SandpackFileExplorer = ({
           activeFile={activeFile}
           autoHiddenFiles={autoHiddenFiles}
           files={orderedFiles}
+          initialCollapsedFolder={initialCollapsedFolder}
           prefixedPath="/"
           selectFile={openFile}
           visibleFiles={visibleFilesFromProps}

diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
@@ -397,6 +397,7 @@ export default () => (
 | :---------------- | :--------------------------------------- | :--- | :------ |
 | `autoHiddenFiles` | Enable auto hidden file in file explorer |
 | `boolean`         | `false`                                  |
+| `initialCollapsedFolder`         | Initial state of folder (collapsed or not) | `string[]` e.g. `["/components/src/"]` | `undefined` |
 
 </details>