ioedeveloper
3 years ago
parent
85b63b9268
commit
c13301fda9
@ -0,0 +1,59 @@ |
|||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
import React, { useEffect, useRef } from 'react' |
||||||
|
import { FileType } from '../types' |
||||||
|
|
||||||
|
export interface FileLabelProps { |
||||||
|
file: FileType, |
||||||
|
focusEdit: { |
||||||
|
element: string |
||||||
|
type: string |
||||||
|
isNew: boolean |
||||||
|
lastEdit: string |
||||||
|
} |
||||||
|
editModeOff: (content: string) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const FileLabel = (props: FileLabelProps) => { |
||||||
|
const { file, focusEdit, editModeOff } = props |
||||||
|
const isEditable = focusEdit.element === file.path |
||||||
|
const labelRef = useRef(null) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (isEditable) { |
||||||
|
setTimeout(() => { |
||||||
|
labelRef.current.focus() |
||||||
|
}, 0) |
||||||
|
} |
||||||
|
}, [isEditable]) |
||||||
|
|
||||||
|
const handleEditInput = (event: React.KeyboardEvent<HTMLDivElement>) => { |
||||||
|
if (event.which === 13) { |
||||||
|
event.preventDefault() |
||||||
|
editModeOff(labelRef.current.innerText) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleEditBlur = (event: React.SyntheticEvent) => { |
||||||
|
event.stopPropagation() |
||||||
|
editModeOff(labelRef.current.innerText) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className='remixui_items d-inline-block w-100' |
||||||
|
ref={labelRef} |
||||||
|
suppressContentEditableWarning={true} |
||||||
|
contentEditable={isEditable} |
||||||
|
onKeyDown={handleEditInput} |
||||||
|
onBlur={handleEditBlur} |
||||||
|
> |
||||||
|
<span |
||||||
|
title={file.path} |
||||||
|
className={'remixui_label ' + (file.isDirectory ? 'folder' : 'remixui_leaf')} |
||||||
|
data-path={file.path} |
||||||
|
> |
||||||
|
{ file.name } |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,116 @@ |
|||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
import React, { SyntheticEvent, useState } from 'react' |
||||||
|
import { FileType } 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' |
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
import { FileLabel } from './file-label' |
||||||
|
|
||||||
|
export interface RenderFileProps { |
||||||
|
file: FileType, |
||||||
|
index: number, |
||||||
|
focusEdit: { element: string, type: string, isNew: boolean, lastEdit: string }, |
||||||
|
focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[], |
||||||
|
focusContext: { element: string, x: number, y: number, type: string }, |
||||||
|
ctrlKey: boolean, |
||||||
|
expandPath: string[], |
||||||
|
editModeOff: (content: string) => void, |
||||||
|
handleClickFolder: (path: string, type: string) => void, |
||||||
|
handleClickFile: (path: string, type: string) => void, |
||||||
|
handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const FileRender = (props: RenderFileProps) => { |
||||||
|
const { file } = props |
||||||
|
|
||||||
|
if (!file || !file.path || typeof file === 'string' || typeof file === 'number' || typeof file === 'boolean') return |
||||||
|
const [hover, setHover] = useState<boolean>(false) |
||||||
|
const labelClass = props.focusEdit.element === file.path |
||||||
|
? 'bg-light' : props.focusElement.findIndex(item => item.key === file.path) !== -1 |
||||||
|
? 'bg-secondary' : hover |
||||||
|
? 'bg-light border' : (props.focusContext.element === file.path) && (props.focusEdit.element !== file.path) |
||||||
|
? 'bg-light border' : '' |
||||||
|
const icon = getPathIcon(file.path) |
||||||
|
const spreadProps = { |
||||||
|
onClick: (e) => e.stopPropagation() |
||||||
|
} |
||||||
|
|
||||||
|
const handleFolderClick = (event: SyntheticEvent) => { |
||||||
|
event.stopPropagation() |
||||||
|
if (props.focusEdit.element !== file.path) props.handleClickFolder(file.path, file.type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleFileClick = (event: SyntheticEvent) => { |
||||||
|
event.stopPropagation() |
||||||
|
if (props.focusEdit.element !== file.path) props.handleClickFile(file.path, file.type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleContextMenu = (event: PointerEvent) => { |
||||||
|
event.preventDefault() |
||||||
|
event.stopPropagation() |
||||||
|
props.handleContextMenu(event.pageX, event.pageY, file.path, (event.target as HTMLElement).textContent, file.type) |
||||||
|
} |
||||||
|
|
||||||
|
const handleMouseOut = (event: SyntheticEvent) => { |
||||||
|
event.stopPropagation() |
||||||
|
setHover(false) |
||||||
|
} |
||||||
|
|
||||||
|
const handleMouseOver = (event: SyntheticEvent) => { |
||||||
|
event.stopPropagation() |
||||||
|
setHover(true) |
||||||
|
} |
||||||
|
|
||||||
|
if (file.isDirectory) { |
||||||
|
return ( |
||||||
|
<TreeViewItem |
||||||
|
id={`treeViewItem${file.path}`} |
||||||
|
iconX='pr-3 fa fa-folder' |
||||||
|
iconY='pr-3 fa fa-folder-open' |
||||||
|
key={`${file.path + props.index}`} |
||||||
|
label={<FileLabel file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />} |
||||||
|
onClick={handleFolderClick} |
||||||
|
onContextMenu={handleContextMenu} |
||||||
|
labelClass={labelClass} |
||||||
|
controlBehaviour={ props.ctrlKey } |
||||||
|
expand={props.expandPath.includes(file.path)} |
||||||
|
onMouseOver={handleMouseOver} |
||||||
|
onMouseOut={handleMouseOut} |
||||||
|
> |
||||||
|
{ |
||||||
|
file.child ? <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps }>{ |
||||||
|
Object.keys(file.child).map((key, index) => <FileRender |
||||||
|
file={file.child[key]} |
||||||
|
index={index} |
||||||
|
focusContext={props.focusContext} |
||||||
|
focusEdit={props.focusEdit} |
||||||
|
focusElement={props.focusElement} |
||||||
|
ctrlKey={props.ctrlKey} |
||||||
|
editModeOff={props.editModeOff} |
||||||
|
handleClickFile={props.handleClickFile} |
||||||
|
handleClickFolder={props.handleClickFolder} |
||||||
|
handleContextMenu={props.handleContextMenu} |
||||||
|
expandPath={props.expandPath} |
||||||
|
/>) |
||||||
|
} |
||||||
|
</TreeView> : <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps }/> |
||||||
|
} |
||||||
|
</TreeViewItem> |
||||||
|
) |
||||||
|
} else { |
||||||
|
return ( |
||||||
|
<TreeViewItem |
||||||
|
id={`treeViewItem${file.path}`} |
||||||
|
key={`treeView${file.path}`} |
||||||
|
label={<FileLabel file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />} |
||||||
|
onClick={handleFileClick} |
||||||
|
onContextMenu={handleContextMenu} |
||||||
|
icon={icon} |
||||||
|
labelClass={labelClass} |
||||||
|
onMouseOver={handleMouseOver} |
||||||
|
onMouseOut={handleMouseOut} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,61 +0,0 @@ |
|||||||
.remixui_container { |
|
||||||
display : flex; |
|
||||||
flex-direction : row; |
|
||||||
width : 100%; |
|
||||||
height : 100%; |
|
||||||
box-sizing : border-box; |
|
||||||
} |
|
||||||
.remixui_fileexplorer { |
|
||||||
display : flex; |
|
||||||
flex-direction : column; |
|
||||||
position : relative; |
|
||||||
width : 100%; |
|
||||||
padding-left : 6px; |
|
||||||
padding-right : 6px; |
|
||||||
padding-top : 6px; |
|
||||||
} |
|
||||||
.remixui_fileExplorerTree { |
|
||||||
cursor : default; |
|
||||||
} |
|
||||||
.remixui_gist { |
|
||||||
padding : 10px; |
|
||||||
} |
|
||||||
.remixui_gist i { |
|
||||||
cursor : pointer; |
|
||||||
} |
|
||||||
.remixui_gist i:hover { |
|
||||||
color : orange; |
|
||||||
} |
|
||||||
.remixui_connectToLocalhost { |
|
||||||
padding : 10px; |
|
||||||
} |
|
||||||
.remixui_connectToLocalhost i { |
|
||||||
cursor : pointer; |
|
||||||
} |
|
||||||
.remixui_connectToLocalhost i:hover { |
|
||||||
color : var(--secondary) |
|
||||||
} |
|
||||||
.remixui_uploadFile { |
|
||||||
padding : 10px; |
|
||||||
} |
|
||||||
.remixui_uploadFile label:hover { |
|
||||||
color : var(--secondary) |
|
||||||
} |
|
||||||
.remixui_uploadFile label { |
|
||||||
cursor : pointer; |
|
||||||
} |
|
||||||
.remixui_treeview { |
|
||||||
overflow-y : auto; |
|
||||||
} |
|
||||||
.remixui_dialog { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.remixui_dialogParagraph { |
|
||||||
margin-bottom: 2em; |
|
||||||
word-break: break-word; |
|
||||||
} |
|
||||||
.remixui_menuicon { |
|
||||||
padding-right : 10px; |
|
||||||
} |
|
||||||
|
|
||||||
Loading…
Reference in new issue