.

src/js/views/explorer/ExplorerNode.tsx

@@ -1,63 +1,107 @@
 import { useEffect, useState } from 'react';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
 
-import Node from '@/state/Node';
+import Show from '@/components/helpers/Show.tsx';
+import Node, { DIR_VALUE } from '@/state/Node';
 
 type Props = {
   node: Node;
+  value?: any;
   level?: number;
   expanded?: boolean;
   name?: string;
+  parentCounter?: number;
 };
 
-export default function ExplorerNode({ node, level = 0, expanded = false, name }: Props) {
-  const [children, setChildren] = useState<{ [key: string]: Node }>({});
+const VALUE_TRUNCATE_LENGTH = 50;
+
+export default function ExplorerNode({
+  node,
+  value = DIR_VALUE,
+  level = 0,
+  expanded = false,
+  name,
+  parentCounter = 0,
+}: Props) {
+  const [children, setChildren] = useState<{ [key: string]: { node: Node; value: any } }>({});
   const [isOpen, setIsOpen] = useState(expanded);
+  const [showMore, setShowMore] = useState(false);
+
+  const isDirectory = value === DIR_VALUE;
 
   useEffect(() => {
-    node.map((_value, key) => {
+    if (!isDirectory) return;
+    return node.map((value, key) => {
       if (!children[key]) {
-        setChildren((prev) => {
-          const childName = key.split('/').pop()!;
-          return { ...prev, [key]: node.get(childName) };
-        });
+        const childName = key.split('/').pop()!;
+        setChildren((prev) => ({
+          ...prev,
+          [key]: { node: node.get(childName), value },
+        }));
       }
     });
-  }, [node.id]);
+  }, [node.id, value]);
 
-  const toggleOpen = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const isEven = level % 2 === 0;
+  const toggleOpen = () => setIsOpen(!isOpen);
+  const rowColor = parentCounter % 2 === 0 ? 'bg-gray-800' : 'bg-gray-700';
   const displayName = name || node.id.split('/').pop()!;
 
+  const renderValue = (value) => {
+    if (typeof value === 'string') {
+      return (
+        <span className="text-xs text-blue-400">
+          {value.length > VALUE_TRUNCATE_LENGTH && (
+            <span
+              className="text-xs text-blue-200 cursor-pointer"
+              onClick={() => setShowMore(!showMore)}
+            >
+              Show {showMore ? 'less' : 'more'}{' '}
+            </span>
+          )}
+          "
+          {showMore
+            ? value
+            : value.length > VALUE_TRUNCATE_LENGTH
+            ? `${value.substring(0, VALUE_TRUNCATE_LENGTH)}...`
+            : value}
+          "
+        </span>
+      );
+    }
+    return <span className="text-xs text-green-400">{JSON.stringify(value)}</span>;
+  };
+
   return (
-    <div className={`relative ${isEven ? 'bg-gray-800' : 'bg-gray-700'}`}>
-      <div className="flex items-center cursor-pointer text-white" onClick={toggleOpen}>
-        <div className={`transition ${isOpen ? 'transform rotate-90' : ''}`}>
-          <svg
-            className="w-4 h-4"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M9 5l7 7-7 7"
-            ></path>
-          </svg>
+    <div className={`relative w-full ${rowColor}`}>
+      <div
+        className={`flex items-center text-white ${isDirectory ? 'cursor-pointer' : null}`}
+        onClick={toggleOpen}
+        style={{ paddingLeft: `${level * 15}px` }}
+      >
+        <Show when={isDirectory}>
+          <ChevronRightIcon
+            className={`w-4 h-4 transition ${isOpen ? 'transform rotate-90' : ''}`}
+          />
+        </Show>
+        <span className="ml-2 w-1/3 truncate">{displayName}</span>
+        <Show when={!isDirectory}>
+          <div className="ml-auto w-1/2">{renderValue(value)}</div>
+        </Show>
+      </div>
+      {isOpen ? (
+        <div>
+          {Object.values(children).map((child, index) => (
+            <ExplorerNode
+              key={node.id + child.node.id}
+              node={child.node}
+              level={level + 1}
+              expanded={false}
+              value={child.value}
+              parentCounter={parentCounter + index + 1}
+            />
+          ))}
         </div>
-        <span className="ml-2">{displayName}</span>
-      </div>
-      <div className={`ml-6 ${isOpen ? 'block' : 'hidden'}`}>
-        {Object.values(children).map((child) => (
-          <ExplorerNode key={node.id + child.id} node={child} level={level + 1} expanded={false} />
-        ))}
-      </div>
+      ) : null}
     </div>
   );
 }