From 35a2d9083ba0dd118fc03a29f6677cb5bc2a2d23 Mon Sep 17 00:00:00 2001
From: Himenon <k.himeno314@gmail.com>
Date: Wed, 12 Aug 2020 18:09:41 +0900
Subject: [PATCH] feat: add full path params

---
 packages/react/public/main.css       | 29 +++++++++++++++++++++++++++-
 packages/react/src/Directory.tsx     |  7 ++++---
 packages/react/src/DirectoryTree.tsx | 10 ++++++----
 packages/react/src/File.tsx          |  3 ++-
 packages/react/src/Tree.tsx          | 10 +++++++++-
 5 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/react/public/main.css b/packages/react/public/main.css
index 2fd84bb..97620bc 100644
--- a/packages/react/public/main.css
+++ b/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;
+}
diff --git a/packages/react/src/Directory.tsx b/packages/react/src/Directory.tsx
index 5399563..9d554e2 100644
--- a/packages/react/src/Directory.tsx
+++ b/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>
diff --git a/packages/react/src/DirectoryTree.tsx b/packages/react/src/DirectoryTree.tsx
index 14f1fe8..ab069fc 100644
--- a/packages/react/src/DirectoryTree.tsx
+++ b/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} />;
diff --git a/packages/react/src/File.tsx b/packages/react/src/File.tsx
index 7a52c98..6723ce8 100644
--- a/packages/react/src/File.tsx
+++ b/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";
diff --git a/packages/react/src/Tree.tsx b/packages/react/src/Tree.tsx
index 4ace065..67eadf9 100644
--- a/packages/react/src/Tree.tsx
+++ b/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} />;
 };