Merge pull request #17 from Himenon/feat/add-full-path-params

feat: add full path params

Author: Himenon

packages/react/public/main.css

@@ -20,8 +20,24 @@
   display: inline;
 }
 
+.directory-item[data-open=false]::before {
+  content: "+";
+  padding-left: 4px;
+  margin-right: 3px;
+  display: inline-block;
+  width: 1em;
+}
+
+.directory-item[data-open=true]::before {
+  content: "-";
+  padding-left: 4px;
+  margin-right: 3px;
+  display: inline-block;
+  width: 1em;
+}
+
 .directory-item-name {
-  display: block;
+  display: inline-block;
   padding-bottom: 1px;
 }
 
@@ -49,3 +65,14 @@
   background-color: #EEEEEE;
   cursor: pointer;
 }
+
+.file-item::before {
+  content: "";
+  display: inline-block;
+  padding-left: 4px;
+  margin-right: 3px;
+  width: 1em;
+  height: 1em;
+  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M198.765%2C0L53.398%2C145.383V512h405.204V0H198.765z%20M196.634%2C49.667v93.576h-93.577L196.634%2C49.667z%20M424.995%2C478.393H87.005V172.897h139.29V33.614h198.7V478.393z%22%20style%3D%22fill%3A%20rgb(75%2C%2075%2C%2075)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+}

packages/react/src/Directory.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 export interface Props {
+  name: string;
   path: string;
   level: number;
 }
@@ -10,10 +11,10 @@ export type ComponentType = React.ComponentType<Props>;
 export const Component: ComponentType = (props) => {
   const [isActive, toggle] = React.useState(false);
   return (
-    <ul className="tree-item directory" key={props.path}>
-      <li className="directory-item" key={props.path}>
+    <ul className="tree-item directory" key={props.name}>
+      <li className="directory-item" key={props.name} data-open={isActive}>
         <span className="directory-item-name" aria-pressed={isActive} onClick={() => toggle(!isActive)}>
-          {props.path}
+          {props.name}
         </span>
         {isActive && props.children}
       </li>

packages/react/src/DirectoryTree.tsx

@@ -21,10 +21,11 @@ const createTreeComponent = (
   } else {
     visited.push(edge);
   }
-  const [type, name] = edge.split(":");
+  const [type, fullPath] = edge.split(":");
   if (type === "file") {
     const props: File.Props = {
-      path: basename(name),
+      path: fullPath,
+      name: basename(fullPath),
       level,
     };
     return <FileComponent key={edge} {...props} />;
@@ -33,10 +34,11 @@ const createTreeComponent = (
     return createTreeComponent(childEdge, treeData, visited, { FileComponent, DirectoryComponent }, level + 1);
   });
   const props: Directory.Props = {
-    path: basename(name),
+    path: fullPath,
+    name: basename(fullPath),
     level,
   };
-  if (props.path === ".") {
+  if (props.name === ".") {
     return <React.Fragment key={`level-${level}`}>{children}</React.Fragment>;
   }
   return <DirectoryComponent key={edge} {...props} children={children} />;

packages/react/src/File.tsx

@@ -2,13 +2,14 @@ import * as React from "react";
 
 export interface Props {
   path: string;
+  name: string;
   level: number;
 }
 
 export type ComponentType = React.ComponentType<Props>;
 
 export const Component: ComponentType = (props) => {
-  return <p className="tree-item file-item">{props.path}</p>;
+  return <p className="tree-item file-item">{props.name}</p>;
 };
 
 Component.displayName = "File";

packages/react/src/Tree.tsx

@@ -13,7 +13,7 @@ export interface Props {
   DirectoryComponent?: Directory.ComponentType;
 }
 
-export const Component: React.FC<Props> = (props) => {
+const useTree = (props: Props) => {
   const [{ pathItems: inputPathItems, FileComponent = File.Component, DirectoryComponent = Directory.Component }, updateProps] = React.useState(
     props,
   );
@@ -34,6 +34,14 @@ export const Component: React.FC<Props> = (props) => {
     return item;
   });
   const treeData = collect(pathItems);
+  return {
+    componentSet,
+    treeData,
+  };
+};
+
+export const Component: React.FC<Props> = (props) => {
+  const { treeData, componentSet } = useTree(props);
   return <DirectoryTree.Component treeData={treeData} componentSet={componentSet} />;
 };