flattentree
filip mertens 11 months ago
parent 3dbbe3cca9
commit 0ec979b2ef
  1. 2
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  2. 50
      libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
  3. 204
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@ -365,7 +365,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
display: 'flex',
flexDirection: 'column'
}}
className="h-100 ml-0 pl-1"
className="h-100 ml-0 pl-1"
>
<div key={`treeViewLiMenu`} data-id={`treeViewLiMenu`}>

@ -228,22 +228,22 @@ export const FlatTree = (props: FlatTreeProps) => {
}
return (<>
<div ref={containerRef} className='h-100 pl-1'>
<FlatTreeDrop
dragSource={dragSource}
getFlatTreeItem={getFlatTreeItem}
moveFile={moveFile}
moveFolder={moveFolder}
handleClickFolder={handleClickFolder}
expandPath={expandPath}
>
<div data-id="treeViewUltreeViewMenu"
className='d-flex h-100 w-100'
onClick={handleTreeClick}
onMouseLeave={onMouseLeave}
onMouseMove={onMouseMove}
onContextMenu={handleContextMenu}>
{showMouseOverTarget && mouseOverTarget && !isDragging &&
<div ref={containerRef} className='h-100 pl-1'>
<FlatTreeDrop
dragSource={dragSource}
getFlatTreeItem={getFlatTreeItem}
moveFile={moveFile}
moveFolder={moveFolder}
handleClickFolder={handleClickFolder}
expandPath={expandPath}
>
<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'
ref={ref}
@ -262,15 +262,15 @@ export const FlatTree = (props: FlatTreeProps) => {
{mouseOverTarget && mouseOverTarget.path}
</Popover.Content>
</Popover>
}
<Virtuoso
ref={virtuoso}
style={{ height: `${size}px`, width: '100%' }}
totalCount={Object.keys(flatTree).length}
itemContent={index => Row(index)}
/>
</div>
</FlatTreeDrop>
}
<Virtuoso
ref={virtuoso}
style={{ height: `${size}px`, width: '100%' }}
totalCount={Object.keys(flatTree).length}
itemContent={index => Row(index)}
/>
</div>
</FlatTreeDrop>
</div>
</>)

@ -1044,57 +1044,57 @@ export function Workspace() {
)}
{!(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && global.fs.mode === 'browser' && currentWorkspace !== NO_WORKSPACE && (
<FileExplorer
fileState={global.fs.browser.fileState}
name={currentWorkspace}
menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '']}
contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
files={global.fs.browser.files}
flatTree={global.fs.browser.flatTree}
workspaceState={state}
expandPath={global.fs.browser.expandPath}
focusEdit={global.fs.focusEdit}
focusElement={global.fs.focusElement}
hideIconsMenu={hideIconsMenu}
showIconsMenu={showIconsMenu}
dispatchCreateNewFile={global.dispatchCreateNewFile}
modal={global.modal}
dispatchCreateNewFolder={global.dispatchCreateNewFolder}
readonly={global.fs.readonly}
toast={global.toast}
dispatchDeletePath={global.dispatchDeletePath}
dispatchRenamePath={global.dispatchRenamePath}
dispatchDownloadPath={global.dispatchDownloadPath}
dispatchUploadFile={global.dispatchUploadFile}
dispatchUploadFolder={global.dispatchUploadFolder}
dispatchCopyFile={global.dispatchCopyFile}
dispatchCopyFolder={global.dispatchCopyFolder}
dispatchPublishToGist={global.dispatchPublishToGist}
dispatchRunScript={global.dispatchRunScript}
dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
dispatchHandleClickFile={global.dispatchHandleClickFile}
dispatchSetFocusElement={global.dispatchSetFocusElement}
dispatchFetchDirectory={global.dispatchFetchDirectory}
dispatchRemoveInputField={global.dispatchRemoveInputField}
dispatchAddInputField={global.dispatchAddInputField}
dispatchHandleExpandPath={global.dispatchHandleExpandPath}
dispatchMoveFile={global.dispatchMoveFile}
dispatchMoveFolder={global.dispatchMoveFolder}
handleCopyClick={handleCopyClick}
handlePasteClick={handlePasteClick}
addMenuItems={addMenuItems}
removeMenuItems={removeMenuItems}
handleContextMenu={handleContextMenu}
uploadFile={uploadFile}
uploadFolder={uploadFolder}
getFocusedFolder={getFocusedFolder}
toGist={toGist}
editModeOn={editModeOn}
handleNewFileInput={handleNewFileInput}
handleNewFolderInput={handleNewFolderInput}
dragStatus={dragStatus}
/>
<FileExplorer
fileState={global.fs.browser.fileState}
name={currentWorkspace}
menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '']}
contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
files={global.fs.browser.files}
flatTree={global.fs.browser.flatTree}
workspaceState={state}
expandPath={global.fs.browser.expandPath}
focusEdit={global.fs.focusEdit}
focusElement={global.fs.focusElement}
hideIconsMenu={hideIconsMenu}
showIconsMenu={showIconsMenu}
dispatchCreateNewFile={global.dispatchCreateNewFile}
modal={global.modal}
dispatchCreateNewFolder={global.dispatchCreateNewFolder}
readonly={global.fs.readonly}
toast={global.toast}
dispatchDeletePath={global.dispatchDeletePath}
dispatchRenamePath={global.dispatchRenamePath}
dispatchDownloadPath={global.dispatchDownloadPath}
dispatchUploadFile={global.dispatchUploadFile}
dispatchUploadFolder={global.dispatchUploadFolder}
dispatchCopyFile={global.dispatchCopyFile}
dispatchCopyFolder={global.dispatchCopyFolder}
dispatchPublishToGist={global.dispatchPublishToGist}
dispatchRunScript={global.dispatchRunScript}
dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
dispatchHandleClickFile={global.dispatchHandleClickFile}
dispatchSetFocusElement={global.dispatchSetFocusElement}
dispatchFetchDirectory={global.dispatchFetchDirectory}
dispatchRemoveInputField={global.dispatchRemoveInputField}
dispatchAddInputField={global.dispatchAddInputField}
dispatchHandleExpandPath={global.dispatchHandleExpandPath}
dispatchMoveFile={global.dispatchMoveFile}
dispatchMoveFolder={global.dispatchMoveFolder}
handleCopyClick={handleCopyClick}
handlePasteClick={handlePasteClick}
addMenuItems={addMenuItems}
removeMenuItems={removeMenuItems}
handleContextMenu={handleContextMenu}
uploadFile={uploadFile}
uploadFolder={uploadFolder}
getFocusedFolder={getFocusedFolder}
toGist={toGist}
editModeOn={editModeOn}
handleNewFileInput={handleNewFileInput}
handleNewFolderInput={handleNewFolderInput}
dragStatus={dragStatus}
/>
)}
{global.fs.localhost.isRequestingLocalhost && (
@ -1103,57 +1103,57 @@ export function Workspace() {
</div>
)}
{global.fs.mode === 'localhost' && global.fs.localhost.isSuccessfulLocalhost && (
<FileExplorer
name="localhost"
menuItems={['createNewFile', 'createNewFolder']}
contextMenuItems={global.fs.localhost.contextMenu.registeredMenuItems}
removedContextMenuItems={global.fs.localhost.contextMenu.removedMenuItems}
files={global.fs.localhost.files}
flatTree={global.fs.localhost.flatTree}
fileState={[]}
workspaceState={state}
expandPath={global.fs.localhost.expandPath}
focusEdit={global.fs.focusEdit}
focusElement={global.fs.focusElement}
hideIconsMenu={hideIconsMenu}
showIconsMenu={showIconsMenu}
dispatchCreateNewFile={global.dispatchCreateNewFile}
modal={global.modal}
dispatchCreateNewFolder={global.dispatchCreateNewFolder}
readonly={global.fs.readonly}
toast={global.toast}
dispatchDeletePath={global.dispatchDeletePath}
dispatchRenamePath={global.dispatchRenamePath}
dispatchDownloadPath={global.dispatchDownloadPath}
dispatchUploadFile={global.dispatchUploadFile}
dispatchUploadFolder={global.dispatchUploadFolder}
dispatchCopyFile={global.dispatchCopyFile}
dispatchCopyFolder={global.dispatchCopyFolder}
dispatchPublishToGist={global.dispatchPublishToGist}
dispatchRunScript={global.dispatchRunScript}
dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
dispatchHandleClickFile={global.dispatchHandleClickFile}
dispatchSetFocusElement={global.dispatchSetFocusElement}
dispatchFetchDirectory={global.dispatchFetchDirectory}
dispatchRemoveInputField={global.dispatchRemoveInputField}
dispatchAddInputField={global.dispatchAddInputField}
dispatchHandleExpandPath={global.dispatchHandleExpandPath}
dispatchMoveFile={global.dispatchMoveFile}
dispatchMoveFolder={global.dispatchMoveFolder}
handleCopyClick={handleCopyClick}
handlePasteClick={handlePasteClick}
addMenuItems={addMenuItems}
removeMenuItems={removeMenuItems}
handleContextMenu={handleContextMenu}
uploadFile={uploadFile}
uploadFolder={uploadFolder}
getFocusedFolder={getFocusedFolder}
toGist={toGist}
editModeOn={editModeOn}
handleNewFileInput={handleNewFileInput}
handleNewFolderInput={handleNewFolderInput}
dragStatus={dragStatus}
/>
<FileExplorer
name="localhost"
menuItems={['createNewFile', 'createNewFolder']}
contextMenuItems={global.fs.localhost.contextMenu.registeredMenuItems}
removedContextMenuItems={global.fs.localhost.contextMenu.removedMenuItems}
files={global.fs.localhost.files}
flatTree={global.fs.localhost.flatTree}
fileState={[]}
workspaceState={state}
expandPath={global.fs.localhost.expandPath}
focusEdit={global.fs.focusEdit}
focusElement={global.fs.focusElement}
hideIconsMenu={hideIconsMenu}
showIconsMenu={showIconsMenu}
dispatchCreateNewFile={global.dispatchCreateNewFile}
modal={global.modal}
dispatchCreateNewFolder={global.dispatchCreateNewFolder}
readonly={global.fs.readonly}
toast={global.toast}
dispatchDeletePath={global.dispatchDeletePath}
dispatchRenamePath={global.dispatchRenamePath}
dispatchDownloadPath={global.dispatchDownloadPath}
dispatchUploadFile={global.dispatchUploadFile}
dispatchUploadFolder={global.dispatchUploadFolder}
dispatchCopyFile={global.dispatchCopyFile}
dispatchCopyFolder={global.dispatchCopyFolder}
dispatchPublishToGist={global.dispatchPublishToGist}
dispatchRunScript={global.dispatchRunScript}
dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
dispatchHandleClickFile={global.dispatchHandleClickFile}
dispatchSetFocusElement={global.dispatchSetFocusElement}
dispatchFetchDirectory={global.dispatchFetchDirectory}
dispatchRemoveInputField={global.dispatchRemoveInputField}
dispatchAddInputField={global.dispatchAddInputField}
dispatchHandleExpandPath={global.dispatchHandleExpandPath}
dispatchMoveFile={global.dispatchMoveFile}
dispatchMoveFolder={global.dispatchMoveFolder}
handleCopyClick={handleCopyClick}
handlePasteClick={handlePasteClick}
addMenuItems={addMenuItems}
removeMenuItems={removeMenuItems}
handleContextMenu={handleContextMenu}
uploadFile={uploadFile}
uploadFolder={uploadFolder}
getFocusedFolder={getFocusedFolder}
toGist={toGist}
editModeOn={editModeOn}
handleNewFileInput={handleNewFileInput}
handleNewFolderInput={handleNewFolderInput}
dragStatus={dragStatus}
/>
)}
</div>
</div>

Loading…
Cancel
Save