tree visibility

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

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, startTransition, useEffect, useRef, useState } from 'react'
+import React, { SyntheticEvent, startTransition, useEffect, useRef, useState, RefObject, useMemo } from 'react'
 import { Popover } from 'react-bootstrap'
 import { FileType, WorkspaceElement } from '../types'
 import { ROOT_PATH } from '../utils/constants'
@@ -10,6 +10,23 @@ import { getEventTarget } from '../utils/getEventTarget';
 import { fileDecoration } from '@remix-ui/file-decorators';
 import { focusElement } from '../actions/payload';
 
+export default function useOnScreen(ref: RefObject<HTMLElement>) {
+
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  const observer = useMemo(() => new IntersectionObserver(
+    ([entry]) => setIntersecting(entry.isIntersecting)
+  ), [ref])
+
+
+  useEffect(() => {
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return isIntersecting
+}
+
 interface FlatTreeProps {
   files: { [x: string]: Record<string, FileType> },
   flatTree: { [x: string]: FileType },
@@ -50,6 +67,15 @@ export const FlatTree = (props: FlatTreeProps) => {
   const ref = useRef(null)
   const [size, setSize] = useState(0)
 
+  const isOnScreen = useOnScreen(props.treeRef)
+
+  useEffect(() => {
+    console.log('is on screen', isOnScreen)
+    if(isOnScreen) {
+      setViewPortHeight()
+    }
+  },[isOnScreen])
+
 
   const labelClass = (file: FileType) =>
     props.focusEdit.element === file.path
@@ -90,7 +116,6 @@ export const FlatTree = (props: FlatTreeProps) => {
   }
 
   const onDragStart = async (event: SyntheticEvent) => {
-    console.log('drag start', event)
     const target = await getEventTarget(event)
     console.log(flatTree[target.path], target.path)
     setDragSource(flatTree[target.path])
@@ -161,18 +186,28 @@ export const FlatTree = (props: FlatTreeProps) => {
     setShowMouseOverTarget(false)
   }
 
-  useEffect(() => {
-    console.log('tree ref', props.treeRef.current)
+
+  const setViewPortHeight = () => {
     const boundingRect = props.treeRef.current.getBoundingClientRect()
-    console.log('bounding rect', boundingRect)
     setSize(boundingRect.height - 100)
+  }
+
+
+  useEffect(() => {
+    window.addEventListener('resize', setViewPortHeight)
+    return () => {
+      window.removeEventListener('resize', setViewPortHeight)
+    }
+  }, [])
+
+  useEffect(() => {
+    setViewPortHeight()
   }, [props.treeRef.current])
 
 
   const Row = (index) => {
     const node = Object.keys(flatTree)[index]
     const file = flatTree[node]
-    //console.log('node', node)
     return (<li
       className={`${labelClass(file)}`}
       onMouseOver={() => setHover(file.path)}

libs/remix-ui/workspace/src/lib/reducers/workspace.ts

@@ -480,6 +480,7 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
   case 'REMOVE_INPUT_FIELD': {
     const payload = action.payload
     const fd = removeInputField(state, payload.path)
+    console.log('REMOVE_INPUT_FIELD', payload, fd)
     const flatTree = flattenTree(fd, state.mode === 'browser'? state.browser.expandPath : state.localhost.expandPath)
     return {
       ...state,
@@ -895,8 +896,9 @@ const flattenTree = (files, expandPath: string[]) =>{
   console.log('flattenTree', files, expandPath)
   const flatTree = {}
   const mapChild = (file: FileType) => {
-    if(!file.path) return
-    console.log('mapChild', file)
+
+    if(!file || !file.path) return
+
     flatTree[file.path] = file
     expandPath && expandPath.find((path) => path.startsWith(file.path)) &&
       file.child && Object.keys(file.child).map((key) => {
@@ -904,6 +906,7 @@ const flattenTree = (files, expandPath: string[]) =>{
     })
   }
   files && files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key) => {
+
     mapChild(files[ROOT_PATH][key])
   })
   console.log('flat tree', flatTree)
@@ -963,8 +966,8 @@ const removeInputField = (
 ): {[x: string]: Record<string, FileType>} => {
   let files =
     state.mode === 'browser' ? state.browser.files : state.localhost.files
-  const root = state.mode === 'browser' ? ROOT_PATH : state.mode
-
+  const root = ROOT_PATH
+  console.log('removeInputField', path, files, root)
   if (path === root) {
     delete files[root][path + '/' + 'blank']
     return files