flex in tree

flattentree
filip mertens 10 months ago
parent 85ece23f64
commit 5241f041dc
  1. 82
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  2. 1
      libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
  3. 27
      libs/remix-ui/workspace/src/lib/components/flat-tree.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>
)

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

@ -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>
</>)
}
Loading…
Cancel
Save