flex in tree

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

@@ -365,52 +365,46 @@ export const FileExplorer = (props: FileExplorerProps) => {
         display: 'flex',
         flexDirection: 'column'
       }}
-      className="h-100"
+        className="h-100 ml-0 pl-1"
       >
-        <TreeView id="treeView">
-          <li key={`treeViewLiMenu`} data-id={`treeViewLiMenu`} className="li_tv">
-            <div
-              key={`treeViewDivMenu`}
-              data-id={`treeViewDivMenu`}
-              className={`d-flex flex-row align-items-center`}
-            >
-              <span className="w-100 pl-2 mt-1">
-                <div onClick={handleFileExplorerMenuClick}>
-                  <FileExplorerMenu
-                    title={''}
-
-                    menuItems={props.menuItems}
-                    createNewFile={handleNewFileInput}
-                    createNewFolder={handleNewFolderInput}
-                    publishToGist={publishToGist}
-                    uploadFile={uploadFile}
-                    uploadFolder={uploadFolder}
-                  />
-                </div>
-              </span>
-            </div>
-          </li>
-          <div style={{ flexGrow: 2 }}>
-            <div>
-              <FlatTree
-                treeRef={treeRef}
-                handleTreeClick={handleTreeClick}
-                focusEdit={state.focusEdit}
-                focusElement={props.focusElement}
-                focusContext={state.focusContext}
-                editModeOff={editModeOff}
-                files={files}
-                flatTree={flatTree}
-                fileState={fileState}
-                expandPath={props.expandPath}
-                handleContextMenu={handleContextMenu}
-                moveFile={handleFileMove}
-                moveFolder={handleFolderMove}
-                handleClickFolder={handleClickFolder}
-              />
-            </div>
+
+        <div key={`treeViewLiMenu`} data-id={`treeViewLiMenu`}>
+          <div
+            key={`treeViewDivMenu`}
+            data-id={`treeViewDivMenu`}
+            className={`d-flex flex-row align-items-center`}
+          >
+            <span className="w-100 pl-2 mt-1">
+              <div onClick={handleFileExplorerMenuClick}>
+                <FileExplorerMenu
+                  title={''}
+
+                  menuItems={props.menuItems}
+                  createNewFile={handleNewFileInput}
+                  createNewFolder={handleNewFolderInput}
+                  publishToGist={publishToGist}
+                  uploadFile={uploadFile}
+                  uploadFolder={uploadFolder}
+                />
+              </div>
+            </span>
           </div>
-        </TreeView>
+        </div>
+        <FlatTree
+          handleTreeClick={handleTreeClick}
+          focusEdit={state.focusEdit}
+          focusElement={props.focusElement}
+          focusContext={state.focusContext}
+          editModeOff={editModeOff}
+          files={files}
+          flatTree={flatTree}
+          fileState={fileState}
+          expandPath={props.expandPath}
+          handleContextMenu={handleContextMenu}
+          moveFile={handleFileMove}
+          moveFolder={handleFolderMove}
+          handleClickFolder={handleClickFolder}
+        />
       </div>
     </div>
   )

libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx

@@ -82,5 +82,6 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
 
   return (<div
     onDrop={onDrop} onDragOver={onDragOver}
+    className="d-flex h-100"
   >{props.children}</div>)
 }

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -38,7 +38,6 @@ interface FlatTreeProps {
   handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void
   handleTreeClick: (e: SyntheticEvent) => void
   handleClickFolder: (path: string, type: string) => void
-  treeRef: React.MutableRefObject<HTMLDivElement>
   moveFile: (dest: string, src: string) => void
   moveFolder: (dest: string, src: string) => void
   fileState: fileDecoration[]
@@ -68,8 +67,9 @@ export const FlatTree = (props: FlatTreeProps) => {
   const [isDragging, setIsDragging] = useState<boolean>(false)
   const ref = useRef(null)
   const [size, setSize] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null)
 
-  const isOnScreen = useOnScreen(props.treeRef)
+  const isOnScreen = useOnScreen(containerRef)
 
   useEffect(() => {
     if (isOnScreen) {
@@ -176,8 +176,8 @@ export const FlatTree = (props: FlatTreeProps) => {
 
 
   const setViewPortHeight = () => {
-    const boundingRect = props.treeRef.current.getBoundingClientRect()
-    setSize(boundingRect.height - 100)
+    const boundingRect = containerRef.current.getBoundingClientRect()
+    setSize(boundingRect.height-40)
   }
 
 
@@ -190,13 +190,13 @@ export const FlatTree = (props: FlatTreeProps) => {
 
   useEffect(() => {
     setViewPortHeight()
-  }, [props.treeRef.current])
+  }, [containerRef.current])
 
 
   const Row = (index: number) => {
     const node = Object.keys(flatTree)[index]
     const file = flatTree[node]
-    return (<li
+    return (<div
       className={`${labelClass(file)}`}
       onMouseOver={() => setHover(file.path)}
       onMouseOut={() => setHover(file.path)}
@@ -207,7 +207,7 @@ export const FlatTree = (props: FlatTreeProps) => {
       <div data-id={`treeViewDivtreeViewItem${file.path}`} className={`d-flex flex-row align-items-center`}>
         {getIndentLevelDiv(file.path)}
 
-        <div className={`pr-2 pl-2 ${file.isDirectory ? expandPath && expandPath.includes(file.path) ? 'fa fa-folder-open' : 'fa fa-folder' : getPathIcon(file.path)} caret caret_tv`}></div>
+        <div className={`pl-2 ${file.isDirectory ? expandPath && expandPath.includes(file.path) ? 'fa fa-folder-open' : 'fa fa-folder' : `${getPathIcon(file.path)} pr-2 caret caret_tv`} `}></div>
         {focusEdit && file.path && focusEdit.element === file.path ?
           <FlatTreeItemInput
             editModeOff={editModeOff}
@@ -224,10 +224,11 @@ export const FlatTree = (props: FlatTreeProps) => {
           </div>
         }
       </div>
-    </li>)
+    </div>)
   }
 
   return (<>
+  <div ref={containerRef} className='h-100 pl-1'>
     <FlatTreeDrop
       dragSource={dragSource}
       getFlatTreeItem={getFlatTreeItem}
@@ -236,7 +237,12 @@ export const FlatTree = (props: FlatTreeProps) => {
       handleClickFolder={handleClickFolder}
       expandPath={expandPath}
     >
-      <div data-id="treeViewUltreeViewMenu" onClick={handleTreeClick} onMouseLeave={onMouseLeave} onMouseMove={onMouseMove} onContextMenu={handleContextMenu}>
+      <div data-id="treeViewUltreeViewMenu" 
+      className='d-flex h-100 w-100'
+      onClick={handleTreeClick} 
+      onMouseLeave={onMouseLeave} 
+      onMouseMove={onMouseMove} 
+      onContextMenu={handleContextMenu}>
         {showMouseOverTarget && mouseOverTarget && !isDragging &&
           <Popover id='popover-basic'
             placement='top'
@@ -258,12 +264,13 @@ export const FlatTree = (props: FlatTreeProps) => {
           </Popover>
         }
         <Virtuoso
-          style={{ height: `${size}px` }}
+          style={{ height: `${size}px`, width: '100%' }}
           totalCount={Object.keys(flatTree).length}
           itemContent={index => Row(index)}
         />
       </div>
     </FlatTreeDrop>
+    </div>
   </>)
 
 }