add decorators

flattentree
bunsenstraat 11 months ago
parent 1f20f96266
commit e25db2149f
  1. 1
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  2. 16
      libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
  3. 7
      libs/remix-ui/workspace/src/lib/reducers/workspace.ts
  4. 2
      libs/remix-ui/workspace/src/lib/utils/index.ts

@ -438,6 +438,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
focusContext={state.focusContext} focusContext={state.focusContext}
editModeOff={editModeOff} editModeOff={editModeOff}
files={files} files={files}
fileState={fileState}
expandPath={props.expandPath} expandPath={props.expandPath}
handleContextMenu={handleContextMenu} handleContextMenu={handleContextMenu}
moveFile={handleFileMove} moveFile={handleFileMove}

@ -7,6 +7,7 @@ import { Virtuoso } from 'react-virtuoso'
import { RecursiveItemInput } from './file-recursive-item-input'; import { RecursiveItemInput } from './file-recursive-item-input';
import { FlatTreeDrop } from './flat-tree-drop'; import { FlatTreeDrop } from './flat-tree-drop';
import { getEventTarget } from '../utils/getEventTarget'; import { getEventTarget } from '../utils/getEventTarget';
import { fileDecoration } from '@remix-ui/file-decorators';
interface FlatTreeProps { interface FlatTreeProps {
files: { [x: string]: Record<string, FileType> }, files: { [x: string]: Record<string, FileType> },
@ -20,6 +21,7 @@ interface FlatTreeProps {
treeRef: React.MutableRefObject<HTMLDivElement> treeRef: React.MutableRefObject<HTMLDivElement>
moveFile: (dest: string, src: string) => void moveFile: (dest: string, src: string) => void
moveFolder: (dest: string, src: string) => void moveFolder: (dest: string, src: string) => void
fileState: fileDecoration[]
} }
let mouseTimer: any = { let mouseTimer: any = {
@ -28,7 +30,7 @@ let mouseTimer: any = {
} }
export const FlatTree = (props: FlatTreeProps) => { export const FlatTree = (props: FlatTreeProps) => {
const { files, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder } = props const { files, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState } = props
const [flatTree, setFlatTree] = useState<{ [x: string]: FileType }>({}) const [flatTree, setFlatTree] = useState<{ [x: string]: FileType }>({})
const [hover, setHover] = useState<string>('') const [hover, setHover] = useState<string>('')
const [mouseOverTarget, setMouseOverTarget] = useState<{ const [mouseOverTarget, setMouseOverTarget] = useState<{
@ -123,6 +125,16 @@ export const FlatTree = (props: FlatTreeProps) => {
return flatTree[path] return flatTree[path]
} }
const getFileStateClasses = (file: FileType) => {
const state = fileState.find((state: fileDecoration) => {
if (state.path === file.path) return true
if (state.bubble && file.isDirectory && state.path.startsWith(file.path)) return true
})
if (state && state.fileStateLabelClass) {
return state.fileStateLabelClass
}
}
const onMouseMove = async (e: any) => { const onMouseMove = async (e: any) => {
///console.log('mouse move', e) ///console.log('mouse move', e)
const target = await getEventTarget(e, true) const target = await getEventTarget(e, true)
@ -180,7 +192,7 @@ export const FlatTree = (props: FlatTreeProps) => {
<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={`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>
{focusEdit && file.path && focusEdit.element === file.path ? {focusEdit && file.path && focusEdit.element === file.path ?
<RecursiveItemInput editModeOff={editModeOff} file={file}/>: <RecursiveItemInput editModeOff={editModeOff} file={file}/>:
<div draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd} className={`ml-1 pl-2 text-nowrap remixui_leaf`} data-label-type={file.isDirectory ? 'folder' : 'file'} data-label-path={`${file.path}`} key={index}>{file.name} <div draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd} className={`ml-1 pl-2 text-nowrap remixui_leaf ${getFileStateClasses(file)}`} data-label-type={file.isDirectory ? 'folder' : 'file'} data-label-path={`${file.path}`} key={index}>{file.name}
</div>} </div>}
</div>) </div>)
} }

@ -4,6 +4,7 @@ import * as _ from 'lodash'
import {fileDecoration} from '@remix-ui/file-decorators' import {fileDecoration} from '@remix-ui/file-decorators'
import {ROOT_PATH} from '../utils/constants' import {ROOT_PATH} from '../utils/constants'
import isElectron from 'is-electron' import isElectron from 'is-electron'
import { fileKeySort } from '../utils'
export interface BrowserState { export interface BrowserState {
browser: { browser: {
currentWorkspace: string currentWorkspace: string
@ -187,6 +188,7 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
const startTime = new Date().getTime() const startTime = new Date().getTime()
const fd = fetchDirectoryContent(state, payload) const fd = fetchDirectoryContent(state, payload)
const endTime = new Date().getTime() const endTime = new Date().getTime()
console.log('fetchDirectoryContent tree', endTime - startTime, fd) console.log('fetchDirectoryContent tree', endTime - startTime, fd)
return { return {
@ -258,6 +260,11 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
const startTime = new Date().getTime() const startTime = new Date().getTime()
const fd = fetchWorkspaceDirectoryContent(state, payload) const fd = fetchWorkspaceDirectoryContent(state, payload)
const endTime = new Date().getTime() const endTime = new Date().getTime()
console.log(fd[payload.path])
const sortedKeys = fileKeySort(fd[payload.path])
console.log('sortedKeys', sortedKeys)
console.log('fetchDirectoryContent tree', endTime - startTime, fd) console.log('fetchDirectoryContent tree', endTime - startTime, fd)
return { return {

@ -124,7 +124,7 @@ export const contextMenuActions: MenuItems = [{
platform: appPlatformTypes.web platform: appPlatformTypes.web
}] }]
export const fileKeySort = (children: FileType[]): string[] => { export const fileKeySort = (children: any): string[] => {
const directories = Object.keys(children).filter((key: string) => children[key].isDirectory && children[key].name !== '') const directories = Object.keys(children).filter((key: string) => children[key].isDirectory && children[key].name !== '')
// sort case insensitive // sort case insensitive

Loading…
Cancel
Save