fix(file-explorer): adds property not to show hidden files (#488)

* fix 482: hidden-files-in-explorer * fix: SandpackFileExplorer show hidden files * refactor file-explorer and add tests * rename prop * adds property not to show hidden files * adds property not to show hidden files Co-authored-by: jerrywu <[email protected]> Co-authored-by: Danilo Woznica <[email protected]>
codesandbox · Jun 7, 2022 · 1048fe9 · 1048fe9
1 parent 6025c40
commit 1048fe9
Show file tree

Hide file tree

Showing 8 changed files with 294 additions and 95 deletions.
diff --git a/sandpack-client/src/types.ts b/sandpack-client/src/types.ts
@@ -2,6 +2,8 @@ import type { ITemplate } from "codesandbox-import-util-types";
 
 export interface SandpackBundlerFile {
   code: string;
+  hidden?: boolean;
+  active?: boolean;
   readOnly?: boolean;
 }
 

diff --git a/sandpack-react/src/Issues.stories.tsx b/sandpack-react/src/Issues.stories.tsx
@@ -1,12 +1,64 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
 
-import { Sandpack } from "./index";
+import {
+  Sandpack,
+  SandpackCodeEditor,
+  SandpackFileExplorer,
+  SandpackLayout,
+  SandpackProvider,
+} from "./index";
 
 export default {
   title: "Bug reports/Issues",
 };
 
+export const Issue482 = (): JSX.Element => {
+  const [hidden, setHidden] = useState(false);
+
+  const toggleHidden = (): void => {
+    setHidden((prevHidden) => !prevHidden);
+  };
+
+  return (
+    <>
+      <button onClick={toggleHidden}>toggle hidden</button>
+      <SandpackProvider
+        customSetup={{
+          entry: "/index.js",
+        }}
+        files={{
+          "/index.js": {
+            code: "// index.js",
+            active: true,
+          },
+          "/index2.js": {
+            code: "// index2.js",
+          },
+          "/src/index.js": {
+            code: "// this file is generated by vanilla template, but it is not needed",
+            hidden: true,
+          },
+          "/hidden.js": {
+            code: "// hidden.js",
+            hidden: true,
+          },
+        }}
+        options={{
+          visibleFiles: ["/index.js", "/hidden.js"],
+          activeFile: "/index.js",
+        }}
+        template={"vanilla"}
+      >
+        <SandpackLayout>
+          <SandpackFileExplorer autoHiddenFiles={hidden} />
+          <SandpackCodeEditor />
+        </SandpackLayout>
+      </SandpackProvider>
+    </>
+  );
+};
+
 export const Issue454 = (): JSX.Element => {
   const [readOnly, setReadOnly] = useState(false);
 

diff --git a/sandpack-react/src/components/FileExplorer/Directory.tsx b/sandpack-react/src/components/FileExplorer/Directory.tsx
@@ -1,52 +1,55 @@
 import type { SandpackBundlerFiles } from "@codesandbox/sandpack-client";
 import * as React from "react";
 
+import type { SandpackOptions } from "../..";
+
 import { File } from "./File";
 import { ModuleList } from "./ModuleList";
 
-export interface Props {
+import type { SandpackFileExplorerProp } from ".";
+
+export interface Props extends SandpackFileExplorerProp {
   prefixedPath: string;
   files: SandpackBundlerFiles;
   selectFile: (path: string) => void;
-  activeFile: string;
+  activeFile: NonNullable<SandpackOptions["activeFile"]>;
   depth: number;
+  visibleFiles: NonNullable<SandpackOptions["visibleFiles"]>;
 }
 
-interface State {
-  open: boolean;
-}
-
-export class Directory extends React.Component<Props, State> {
-  state = {
-    open: true,
-  };
-
-  toggleOpen = (): void => {
-    this.setState((state) => ({ open: !state.open }));
-  };
-
-  render(): React.ReactElement {
-    const { prefixedPath, files, selectFile, activeFile, depth } = this.props;
-
-    return (
-      <div key={prefixedPath}>
-        <File
-          depth={depth}
-          isDirOpen={this.state.open}
-          onClick={this.toggleOpen}
-          path={prefixedPath + "/"}
+export const Directory: React.FC<Props> = ({
+  prefixedPath,
+  files,
+  selectFile,
+  activeFile,
+  depth,
+  autoHiddenFiles,
+  visibleFiles,
+}) => {
+  const [open, setOpen] = React.useState(true);
+
+  const toggle = (): void => setOpen((prev) => !prev);
+
+  return (
+    <div key={prefixedPath}>
+      <File
+        depth={depth}
+        isDirOpen={open}
+        onClick={toggle}
+        path={prefixedPath + "/"}
+      />
+
+      {open && (
+        <ModuleList
+          activeFile={activeFile}
+          autoHiddenFiles={autoHiddenFiles}
+          depth={depth + 1}
+          files={files}
+          prefixedPath={prefixedPath}
+          selectFile={selectFile}
+          visibleFiles={visibleFiles}
         />
-
-        {this.state.open && (
-          <ModuleList
-            activeFile={activeFile}
-            depth={depth + 1}
-            files={files}
-            prefixedPath={prefixedPath}
-            selectFile={selectFile}
-          />
-        )}
-      </div>
-    );
-  }
-}
+      )}
+    </div>
+  );
+};
diff --git a/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx b/sandpack-react/src/components/FileExplorer/FileExplorer.stories.tsx
@@ -83,8 +83,10 @@ export const DirectoryIconStory: React.FC = () => (
         depth={1}
         files={{ App: { code: "" } }}
         prefixedPath="/src"
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        selectFile={(): any => null}
+        selectFile={(): void => {
+          //
+        }}
+        visibleFiles={[]}
       />
     </SandpackLayout>
   </SandpackProvider>

diff --git a/sandpack-react/src/components/FileExplorer/ModuleList.tsx b/sandpack-react/src/components/FileExplorer/ModuleList.tsx
@@ -1,64 +1,63 @@
 import type { SandpackBundlerFiles } from "@codesandbox/sandpack-client";
 import * as React from "react";
 
+import type { SandpackOptions } from "../../types";
+
 import { Directory } from "./Directory";
 import { File } from "./File";
+import { fromPropsToModules } from "./utils";
+
+import type { SandpackFileExplorerProp } from ".";
 
-export interface Props {
+export interface ModuleListProps extends SandpackFileExplorerProp {
   prefixedPath: string;
   files: SandpackBundlerFiles;
   selectFile: (path: string) => void;
-  activeFile: string;
+  activeFile: NonNullable<SandpackOptions["activeFile"]>;
   depth?: number;
+  visibleFiles: NonNullable<SandpackOptions["visibleFiles"]>;
 }
 
-export class ModuleList extends React.PureComponent<Props> {
-  render(): JSX.Element {
-    const {
-      depth = 0,
-      activeFile,
-      selectFile,
-      prefixedPath,
-      files,
-    } = this.props;
-
-    const fileListWithoutPrefix = Object.keys(files)
-      .filter((file) => file.startsWith(prefixedPath))
-      .map((file) => file.substring(prefixedPath.length));
-
-    const directoriesToShow = new Set(
-      fileListWithoutPrefix
-        .filter((file) => file.includes("/"))
-        .map((file) => `${prefixedPath}${file.split("/")[0]}/`)
-    );
-
-    const filesToShow = fileListWithoutPrefix
-      .filter((file) => !file.includes("/"))
-      .map((file) => ({ path: `${prefixedPath}${file}` }));
-
-    return (
-      <div>
-        {Array.from(directoriesToShow).map((dir) => (
-          <Directory
-            key={dir}
-            activeFile={activeFile}
-            depth={depth}
-            files={files}
-            prefixedPath={dir}
-            selectFile={selectFile}
-          />
-        ))}
-
-        {filesToShow.map((file) => (
-          <File
-            key={file.path}
-            active={activeFile === file.path}
-            depth={depth}
-            path={file.path}
-            selectFile={this.props.selectFile}
-          />
-        ))}
-      </div>
-    );
-  }
-}
+export const ModuleList: React.FC<ModuleListProps> = ({
+  depth = 0,
+  activeFile,
+  selectFile,
+  prefixedPath,
+  files,
+  autoHiddenFiles,
+  visibleFiles,
+}) => {
+  const { directories, modules } = fromPropsToModules({
+    visibleFiles,
+    autoHiddenFiles,
+    prefixedPath,
+    files,
+  });
+
+  return (
+    <div>
+      {directories.map((dir) => (
+        <Directory
+          key={dir}
+          activeFile={activeFile}
+          autoHiddenFiles={autoHiddenFiles}
+          depth={depth}
+          files={files}
+          prefixedPath={dir}
+          selectFile={selectFile}
+          visibleFiles={visibleFiles}
+        />
+      ))}
+
+      {modules.map((file) => (
+        <File
+          key={file}
+          active={activeFile === file}
+          depth={depth}
+          path={file}
+          selectFile={selectFile}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/sandpack-react/src/components/FileExplorer/index.tsx b/sandpack-react/src/components/FileExplorer/index.tsx
@@ -12,22 +12,36 @@ const fileExplorerClassName = css({
   height: "100%",
 });
 
+export interface SandpackFileExplorerProp {
+  /**
+   * enable auto hidden file in file explorer
+   *
+   * @description set with hidden property in files property
+   * @default false
+   */
+  autoHiddenFiles?: boolean;
+}
+
 /**
  * @category Components
  */
 export const SandpackFileExplorer = ({
   className,
+  autoHiddenFiles = false,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
+}: SandpackFileExplorerProp &
+  React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
   const { sandpack } = useSandpack();
 
   return (
     <div className={classNames(fileExplorerClassName, className)} {...props}>
       <ModuleList
         activeFile={sandpack.activeFile}
+        autoHiddenFiles={autoHiddenFiles}
         files={sandpack.files}
         prefixedPath="/"
         selectFile={sandpack.openFile}
+        visibleFiles={sandpack.visibleFiles}
       />
     </div>
   );