filip mertens
11 months ago
parent
e6fb5d5fb4
commit
c46792e04f
@ -0,0 +1,59 @@ |
||||
import React, { useState, useRef, useEffect } from "react" |
||||
import { FileType } from "../types" |
||||
|
||||
interface RecursiveItemInputProps { |
||||
file: FileType |
||||
editModeOff: (content: string) => void |
||||
} |
||||
|
||||
export const RecursiveItemInput = (props: RecursiveItemInputProps) => { |
||||
const { file, editModeOff } = props |
||||
const [value, setValue] = useState<string>(file.name) |
||||
const ref = useRef(null) |
||||
|
||||
const handleKeyDown = (e: any) => { |
||||
if (e.which === 13) { |
||||
e.preventDefault() |
||||
editModeOff(value) |
||||
} |
||||
if (e.which === 27) { |
||||
e.preventDefault() |
||||
// don't change it
|
||||
editModeOff(file.name) |
||||
} |
||||
} |
||||
|
||||
const handleEditBlur = (event: React.SyntheticEvent) => { |
||||
event.stopPropagation() |
||||
// don't change it
|
||||
editModeOff(file.name) |
||||
} |
||||
|
||||
const handleFocus = (e: any) => { |
||||
// select the file name without the extension
|
||||
const val = e.target.value |
||||
const dotIndex = val.lastIndexOf('.') |
||||
if (dotIndex > 0) { |
||||
e.target.setSelectionRange(0, dotIndex) |
||||
} else { |
||||
e.target.setSelectionRange(0, val.length) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
ref.current.focus() |
||||
},[]) |
||||
|
||||
return(<input
|
||||
onBlur={handleEditBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
ref={ref}
|
||||
style={{ |
||||
height: '1.5em', |
||||
}} |
||||
className='form-control p-0 ml-2'
|
||||
onFocus={handleFocus}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
defaultValue={file.name}> |
||||
</input>) |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
import { getPathIcon } from "@remix-ui/helper"; |
||||
import React, { useEffect, useState } from "react"; |
||||
import { FileType, WorkspaceElement } from "../types"; |
||||
import { RecursiveItemInput } from "./file-recursive-item-input"; |
||||
|
||||
interface RecursiveTreeItemProps { |
||||
file: FileType |
||||
expandPath?: string[] |
||||
focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string} |
||||
editModeOff: (content: string) => void |
||||
focusElement: {key: string; type: WorkspaceElement}[] |
||||
focusContext: {element: string; x: number; y: number; type: string} |
||||
} |
||||
|
||||
export const RecursiveTreeItem = (props: RecursiveTreeItemProps) => { |
||||
|
||||
const [hover, setHover] = useState<boolean>(false) |
||||
const { file, expandPath, focusEdit, editModeOff } = props |
||||
|
||||
useEffect(() => { |
||||
console.log('item render') |
||||
},[]) |
||||
|
||||
const labelClass = |
||||
props.focusEdit.element === file.path |
||||
? 'bg-light' |
||||
: props.focusElement.findIndex((item) => item.key === file.path) !== -1 |
||||
? 'bg-secondary' |
||||
: hover |
||||
? 'bg-light border-no-shift' |
||||
: props.focusContext.element === file.path && props.focusEdit.element !== file.path |
||||
? 'bg-light border-no-shift' |
||||
: '' |
||||
|
||||
return ( |
||||
<> |
||||
<li ref={null} key={`treeViewLi${file.path}`} data-type={file.isDirectory ? 'folder' : 'file'} data-path={`${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}`} |
||||
onMouseOver={() => setHover(true)} |
||||
onMouseOut={() => setHover(false)} |
||||
> |
||||
<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 ?
|
||||
<RecursiveItemInput editModeOff={editModeOff} file={file}/>: |
||||
<span draggable="true" className="ml-1 pl-2" data-label-type={file.isDirectory ? 'folder' : 'file'} data-label-path={`${file.path}`}>{file.name}</span>} |
||||
</div> |
||||
<ul className="ul_tv ml-0 pl-1" > |
||||
{ |
||||
expandPath && expandPath.includes(file.path) && |
||||
file.child && Object.keys(file.child).map((key, index) => { |
||||
//console.log('recursive tree', file.child[key])
|
||||
return (<RecursiveTreeItem |
||||
editModeOff={editModeOff} |
||||
focusElement={props.focusElement} |
||||
focusContext={props.focusContext} |
||||
focusEdit={props.focusEdit} |
||||
expandPath={expandPath} key={index} file={file.child[key]} />) |
||||
}) |
||||
} |
||||
</ul> |
||||
</li> |
||||
</>) |
||||
} |
||||
Loading…
Reference in new issue