steps to flatten tree

flattentree
filip mertens 11 months ago
parent a42fcebef2
commit 9875c999ee
  1. 2
      apps/remix-ide/src/app/files/electronProvider.ts
  2. 2
      apps/remix-ide/src/app/files/fileProvider.ts
  3. 3
      apps/remix-ide/src/index.tsx
  4. 13
      libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
  5. 23
      libs/remix-ui/workspace/src/lib/actions/workspace.ts
  6. 17
      libs/remix-ui/workspace/src/lib/components/file-blok.tsx
  7. 17
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  8. 4
      libs/remix-ui/workspace/src/lib/components/file-label.tsx
  9. 84
      libs/remix-ui/workspace/src/lib/components/file-render.tsx

@ -44,6 +44,7 @@ export class ElectronProvider extends FileProvider {
// isDirectory is already included
// this is a more efficient version of the default implementation
async resolveDirectory(path, cb) {
console.log('resolveDirectory', path)
path = this.removePrefix(path)
if (path.indexOf('/') !== 0) path = '/' + path
try {
@ -58,6 +59,7 @@ export class ElectronProvider extends FileProvider {
// ^ ret does not accept path starting with '/'
}
}
console.log('resolveDirectory done')
if (cb) cb(null, ret)
return ret
} catch (error) {

@ -272,6 +272,7 @@ export default class FileProvider {
}
async resolveDirectory (path, cb) {
const startTime = Date.now()
path = this.removePrefix(path)
if (path.indexOf('/') !== 0) path = '/' + path
try {
@ -286,6 +287,7 @@ export default class FileProvider {
// ^ ret does not accept path starting with '/'
}
}
console.log(`resolveDirectory ${path} took ${Date.now() - startTime} ms`)
if (cb) cb(null, ret)
return ret
} catch (error) {

@ -19,9 +19,8 @@ import {Storage} from '@remix-project/remix-lib'
theme.initTheme()
render(
<React.StrictMode>
<Preload></Preload>
</React.StrictMode>,
,
document.getElementById('root')
)

@ -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(() => {
setIsExpanded(expand)
}, [expand])
//consolelog('tree view item', id)
},[id])
return (
<li ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className="li_tv" {...otherProps}>
@ -17,16 +17,17 @@ 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={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
<div className={expand ? `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>
{isExpanded ? children : null}
{expand ? children : null}
</li>
)
}

@ -140,7 +140,7 @@ export const createWorkspace = async (
await plugin.setWorkspace({ name: workspaceName, isLocalhost: false })
await plugin.workspaceCreated(workspaceName)
if (isGitRepo && createCommit) {
if (isGitRepo && createCommit && false) {
const name = await plugin.call('settings', 'get', 'settings/github-user-name')
const email = await plugin.call('settings', 'get', 'settings/github-email')
const currentBranch = await plugin.call('dGitProvider', 'currentbranch')
@ -182,8 +182,8 @@ export const createWorkspace = async (
cb && cb(null, workspaceName)
if (isGitRepo) {
await checkGit()
const isActive = await plugin.call('manager', 'isActive', 'dgit')
if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
//const isActive = await plugin.call('manager', 'isActive', 'dgit')
//if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
}
if (workspaceTemplateName === 'semaphore' || workspaceTemplateName === 'hashchecker' || workspaceTemplateName === 'rln') {
const isCircomActive = await plugin.call('manager', 'isActive', 'circuit-compiler')
@ -453,8 +453,8 @@ export const switchToWorkspace = async (name: string) => {
await plugin.setWorkspace({ name, isLocalhost: false })
const isGitRepo = await plugin.fileManager.isGitRepo()
if (isGitRepo) {
const isActive = await plugin.call('manager', 'isActive', 'dgit')
if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
//const isActive = await plugin.call('manager', 'isActive', 'dgit')
//if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
}
dispatch(setMode('browser'))
dispatch(setCurrentWorkspace({ name, isGitRepo }))
@ -610,9 +610,9 @@ export const cloneRepository = async (url: string) => {
dispatch(cloneRepositoryRequest())
promise
.then(async () => {
const isActive = await plugin.call('manager', 'isActive', 'dgit')
//const isActive = await plugin.call('manager', 'isActive', 'dgit')
if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
//if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
await fetchWorkspaceDirectory(ROOT_PATH)
const workspacesPath = plugin.fileProviders.workspace.workspacesPath
const branches = await getGitRepoBranches(workspacesPath + '/' + repoName)
@ -648,6 +648,7 @@ export const cloneRepository = async (url: string) => {
}
export const checkGit = async () => {
return
const isGitRepo = await plugin.fileManager.isGitRepo()
const hasGitSubmodule = await plugin.fileManager.hasGitSubmodules()
dispatch(setCurrentWorkspaceIsGitRepo(isGitRepo))
@ -677,6 +678,7 @@ export const getRepositoryTitle = async (url: string) => {
}
export const getGitRepoBranches = async (workspacePath: string) => {
return []
const gitConfig: { fs: IndexedDBStorage; dir: string } = {
fs: window.remixFileSystemCallback,
dir: addSlash(workspacePath),
@ -686,6 +688,7 @@ export const getGitRepoBranches = async (workspacePath: string) => {
}
export const getGitRepoCurrentBranch = async (workspaceName: string) => {
return ''
const gitConfig: { fs: IndexedDBStorage; dir: string } = {
fs: window.remixFileSystemCallback,
dir: addSlash(workspaceName),
@ -695,8 +698,9 @@ export const getGitRepoCurrentBranch = async (workspaceName: string) => {
}
export const showAllBranches = async () => {
const isActive = await plugin.call('manager', 'isActive', 'dgit')
if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
return
//const isActive = await plugin.call('manager', 'isActive', 'dgit')
//if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
plugin.call('menuicons', 'select', 'dgit')
plugin.call('dgit', 'open', 'branches')
}
@ -896,6 +900,7 @@ export const removeRecentElectronFolder = async (path: string) => {
}
export const hasLocalChanges = async () => {
return []
const filesStatus = await plugin.call('dGitProvider', 'status')
const uncommittedFiles = getUncommittedFiles(filesStatus)

@ -0,0 +1,17 @@
import { getPathIcon } from '@remix-ui/helper'
import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
export const FileBlok = (props: any) => {
const { file } = props
const handleFileClick = (event: SyntheticEvent) => {
event.stopPropagation()
props.handleClickFile(file.path, file.type)
}
return (
<>
<div className={`pr-2 pl-2 ${getPathIcon(props.file.path)} caret caret_tv`}></div>
<div onClick={handleFileClick} className="btn">{props.file.name}</div>
</>)
}

@ -13,6 +13,7 @@ import {Drag, Draggable} from '@remix-ui/drag-n-drop'
import {ROOT_PATH} from '../utils/constants'
import { fileKeySort } from '../utils'
import { moveFileIsAllowed, moveFolderIsAllowed } from '../actions'
import { FileBlok } from './file-blok'
export const FileExplorer = (props: FileExplorerProps) => {
const intl = useIntl()
@ -334,11 +335,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
}
}
useEffect(() => {
console.log('fe files changed', ROOT_PATH)
},[files])
useEffect(() => {
console.log('FE RENDER', ROOT_PATH)
},[])
const dragStatus = (isDragged: boolean) => {
props.dragStatus(isDragged)
}
useEffect(() => {
console.log('fe props', files)
return
console.log('fe props', files[ROOT_PATH])
if (files[ROOT_PATH]){
try {
const children: FileType[] = files[ROOT_PATH] as any
@ -380,7 +393,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
<div>
<TreeView id="treeViewMenu">
{files[ROOT_PATH] &&
childrenKeys.map((key, index) => (
Object.keys(files[ROOT_PATH]).map((key, index) => (
<>
<FileRender
file={files[ROOT_PATH][key]}
fileDecorations={fileState}
@ -399,6 +413,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
hideIconsMenu={props.hideIconsMenu}
dragStatus={state.dragStatus}
/>
</>
))
}
</TreeView>

@ -23,6 +23,10 @@ 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)

@ -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,19 +29,24 @@ export interface RenderFileProps {
}
export const FileRender = (props: RenderFileProps) => {
const [file, setFile] = useState<FileType>({} as FileType)
const { file } = props
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) {
setFile(props.file)
setIcon(getPathIcon(props.file.path))
}
//if (props.file && props.file.path && props.file.type) {
// //consolelog('set icon', props.file.path)
// 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
@ -96,8 +101,13 @@ export const FileRender = (props: RenderFileProps) => {
event.stopPropagation()
setHover(true)
}
//consolelog('eval file render', file.path)
if (file.isDirectory) {
if (!file.path) return (<></>)
///return (<><div className='btn btn-primary'>file</div></>)
if (file.isDirectory && false) {
return (
<TreeViewItem
id={`treeViewItem${file.path}`}
@ -124,7 +134,7 @@ export const FileRender = (props: RenderFileProps) => {
>
{file.child ? (
<TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps}>
{childrenKeys.map((key, index) => (
{Object.keys(file.child).map((key, index) => (
<FileRender
file={file.child[key]}
fileDecorations={props.fileDecorations}
@ -148,28 +158,24 @@ export const FileRender = (props: RenderFileProps) => {
)}
</TreeViewItem>
)
} else {
} else if (!file.isDirectory) {
//consolelog('start do file render', file.path)
return (
<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}
/>
<>
<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>
</>
)
} else {
return <></>
}
}

Loading…
Cancel
Save