tree building

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -5,11 +5,11 @@ import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
   const {id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = '', icon, controlBehaviour = false, innerRef, showIcon = true, ...otherProps} = props
-
+  const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
-    //consolelog('tree view item', id)
-  },[id])
+    setIsExpanded(expand)
+  }, [expand])
 
   return (
     <li ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className="li_tv" {...otherProps}>
@@ -17,17 +17,16 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
         key={`treeViewDiv${id}`}
         data-id={`treeViewDiv${id}`}
         className={`d-flex flex-row align-items-center ${labelClass}`}
-        onClick={() => !controlBehaviour // && setIsExpanded(!isExpanded)
-      }
+        onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}
       >
         {children && showIcon ? (
-          <div className={expand ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
+          <div className={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
         ) : icon ? (
           <div className={`pr-2 pl-2 ${icon} caret caret_tv`}></div>
         ) : null}
         <span className="w-100 ml-1 pl-2">{label}</span>
       </div>
-      {expand ? children : null}
+      {isExpanded ? children : null}
     </li>
   )
 }

libs/remix-ui/workspace/src/lib/components/file-label.tsx

@@ -23,10 +23,6 @@ export const FileLabel = (props: FileLabelProps) => {
   const [fileStateClasses, setFileStateClasses] = useState<string>('')
   const labelRef = useRef(null)
 
-  useEffect(() => {
-    //consolelog('file label', file)
-  },[file])
-
   useEffect(() => {
     if (focusEdit.element && file.path) {
       setIsEditable(focusEdit.element === file.path)

libs/remix-ui/workspace/src/lib/components/file-render.tsx

@@ -1,21 +1,21 @@
 // eslint-disable-next-line no-use-before-define
-import React, { SyntheticEvent, useEffect, useState } from 'react'
-import { FileType, WorkspaceElement } from '../types'
+import React, {SyntheticEvent, useEffect, useState} from 'react'
+import {FileType, WorkspaceElement} from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
-import { getPathIcon } from '@remix-ui/helper'
+import {TreeView, TreeViewItem} from '@remix-ui/tree-view'
+import {getPathIcon} from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { FileLabel } from './file-label'
-import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'
-import { Draggable } from '@remix-ui/drag-n-drop'
+import {FileLabel} from './file-label'
+import {fileDecoration, FileDecorationIcons} from '@remix-ui/file-decorators'
+import {Draggable} from '@remix-ui/drag-n-drop'
 import { fileKeySort } from '../utils'
 
 export interface RenderFileProps {
   file: FileType
   index: number
-  focusEdit: { element: string; type: string; isNew: boolean; lastEdit: string }
-  focusElement: { key: string; type: WorkspaceElement }[]
-  focusContext: { element: string; x: number; y: number; type: string }
+  focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string}
+  focusElement: {key: string; type: WorkspaceElement}[]
+  focusContext: {element: string; x: number; y: number; type: string}
   ctrlKey: boolean
   expandPath: string[]
   hideIconsMenu?: React.Dispatch<React.SetStateAction<boolean>>
@@ -29,24 +29,19 @@ export interface RenderFileProps {
 }
 
 export const FileRender = (props: RenderFileProps) => {
-  const { file } = props
+  const [file, setFile] = useState<FileType>({} as FileType)
   const [hover, setHover] = useState<boolean>(false)
-  //const [icon, setIcon] = useState<string>('')
+  const [icon, setIcon] = useState<string>('')
   const [childrenKeys, setChildrenKeys] = useState<string[]>([])
 
   useEffect(() => {
-    //if (props.file && props.file.path && props.file.type) {
-    //  //consolelog('set icon', props.file.path)
-    //  setIcon(getPathIcon(props.file.path))
-    //}
+    if (props.file && props.file.path && props.file.type) {
+      setFile(props.file)
+      setIcon(getPathIcon(props.file.path))
+    }
   }, [props.file])
 
   useEffect(() => {
-    //consolelog('file render', props.file.path)
-  }, [])
-
-  useEffect(() => {
-    return
     if (file.child) {
       try {
         const children: FileType[] = file.child as any
@@ -101,13 +96,8 @@ export const FileRender = (props: RenderFileProps) => {
     event.stopPropagation()
     setHover(true)
   }
-  //consolelog('eval file render', file.path)
 
-  if (!file.path) return (<></>)
-
-  ///return (<><div className='btn btn-primary'>file</div></>)
-
-  if (file.isDirectory && false) {
+  if (file.isDirectory) {
     return (
       <TreeViewItem
         id={`treeViewItem${file.path}`}
@@ -134,7 +124,7 @@ export const FileRender = (props: RenderFileProps) => {
       >
         {file.child ? (
           <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps}>
-            {Object.keys(file.child).map((key, index) => (
+            {childrenKeys.map((key, index) => (
               <FileRender
                 file={file.child[key]}
                 fileDecorations={props.fileDecorations}
@@ -158,24 +148,28 @@ export const FileRender = (props: RenderFileProps) => {
         )}
       </TreeViewItem>
     )
-  } else if (!file.isDirectory) {
-    //consolelog('start do file render', file.path)
+  } else {
     return (
-      <>
-        <li ref={null} key={`treeViewLi${file.path}`} data-id={`treeViewLi${file.path}`} className="li_tv">
-          <div
-            key={`treeViewDiv${file.path}`}
-            data-id={`treeViewDiv${file.path}`}
-            className={`d-flex flex-row align-items-center ${labelClass}`}
-            onClick={() => {}}
-          >
-            <div className={`pr-2 pl-2 ${getPathIcon(file.path)} caret caret_tv`}></div>
-            <span className="w-100 ml-1 pl-2">{file.name}</span>
-          </div>
-        </li>
-      </>
+      <TreeViewItem
+        id={`treeViewItem${file.path}`}
+        key={`treeView${file.path}`}
+        label={
+          <>
+            <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
+              <div className="d-flex flex-row">
+                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} dragStatus={props.dragStatus} />
+                <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
+              </div>
+            </Draggable>
+          </>
+        }
+        onClick={handleFileClick}
+        onContextMenu={handleContextMenu}
+        icon={icon}
+        labelClass={labelClass}
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
+      />
     )
-  } else {
-    return <></>
   }
 }