@@ -5,114 +5,90 @@ import TreeView from "@material-ui/lab/TreeView"
55import TreeItem from "@material-ui/lab/TreeItem"
66import Menu from "@material-ui/core/Menu"
77import MenuItem from "@material-ui/core/MenuItem"
8- import { FC , useMemo , useState } from "react"
9- import { TemplateVersionFiles } from "util/templateVersion "
8+ import { FC , useState } from "react"
9+ import { FileTree } from "util/filetree "
1010import { DockerIcon } from "components/Icons/DockerIcon"
1111
12- export interface File {
12+ const sortFileTree = ( fileTree : FileTree ) => ( a : string , b : string ) => {
13+ const contentA = fileTree [ a ]
14+ const contentB = fileTree [ b ]
15+ if ( typeof contentA === "object" ) {
16+ return - 1
17+ }
18+ if ( typeof contentB === "object" ) {
19+ return 1
20+ }
21+ return a . localeCompare ( b )
22+ }
23+
24+ type ContextMenu = {
1325 path : string
14- content ?: string
15- children : Record < string , File >
26+ clientX : number
27+ clientY : number
1628}
1729
18- export const FileTree : FC < {
19- onSelect : ( file : File ) => void
20- onDelete : ( file : File ) => void
21- onRename : ( file : File ) => void
22- files : TemplateVersionFiles
23- activeFile ?: File
24- } > = ( { activeFile , files , onDelete, onRename, onSelect } ) => {
30+ export const FileTreeView : FC < {
31+ onSelect : ( path : string ) => void
32+ onDelete : ( path : string ) => void
33+ onRename : ( path : string ) => void
34+ fileTree : FileTree
35+ activePath ?: string
36+ } > = ( { fileTree , activePath , onDelete, onRename, onSelect } ) => {
2537 const styles = useStyles ( )
26- const fileTree = useMemo < Record < string , File > > ( ( ) => {
27- const paths = Object . keys ( files )
28- const roots : Record < string , File > = { }
29- paths . forEach ( ( path ) => {
30- const pathParts = path . split ( "/" )
31- const firstPart = pathParts . shift ( )
32- if ( ! firstPart ) {
33- // Not possible!
34- return
35- }
36- let activeFile = roots [ firstPart ]
37- if ( ! activeFile ) {
38- activeFile = {
39- path : firstPart ,
40- children : { } ,
41- }
42- roots [ firstPart ] = activeFile
43- }
44- while ( pathParts . length > 0 ) {
45- const pathPart = pathParts . shift ( )
46- if ( ! pathPart ) {
47- continue
48- }
49- if ( ! activeFile . children [ pathPart ] ) {
50- activeFile . children [ pathPart ] = {
51- path : activeFile . path + "/" + pathPart ,
52- children : { } ,
53- }
54- }
55- activeFile = activeFile . children [ pathPart ]
56- }
57- activeFile . content = files [ path ]
58- activeFile . path = path
59- } )
60- return roots
61- } , [ files ] )
62- const [ contextMenu , setContextMenu ] = useState <
63- | {
64- file : File
65- clientX : number
66- clientY : number
67- }
68- | undefined
69- > ( )
70-
71- const buildTreeItems = ( name : string , file : File ) : JSX . Element => {
38+ const [ contextMenu , setContextMenu ] = useState < ContextMenu | undefined > ( )
39+
40+ const buildTreeItems = (
41+ filename : string ,
42+ content ?: FileTree | string ,
43+ parentPath ?: string ,
44+ ) : JSX . Element => {
45+ const currentPath = parentPath ? `${ parentPath } ${ filename } : filename
7246 let icon : JSX . Element | null = null
73- if ( file . path . endsWith ( ".tf" ) ) {
47+ if ( filename . endsWith ( ".tf" ) ) {
7448 icon = < FileTypeTerraform />
7549 }
76- if ( file . path . endsWith ( ".md" ) ) {
50+ if ( filename . endsWith ( ".md" ) ) {
7751 icon = < FileTypeMarkdown />
7852 }
79- if ( file . path . endsWith ( "Dockerfile" ) ) {
53+ if ( filename . endsWith ( "Dockerfile" ) ) {
8054 icon = < FileTypeDockerfile />
8155 }
8256
8357 return (
8458 < TreeItem
85- nodeId = { file . path }
86- key = { file . path }
87- label = { name }
59+ nodeId = { currentPath }
60+ key = { currentPath }
61+ label = { filename }
8862 className = { `${ styles . fileTreeItem } ${
89- file . path === activeFile ?. path ? "active" : ""
63+ currentPath === activePath ? "active" : ""
9064 } `}
9165 onClick = { ( ) => {
92- if ( file . content ) {
93- onSelect ( file )
94- }
66+ onSelect ( currentPath )
9567 } }
9668 onContextMenu = { ( event ) => {
9769 event . preventDefault ( )
98- if ( ! file . content ) {
99- return
100- }
10170 setContextMenu (
10271 contextMenu
10372 ? undefined
10473 : {
105- file : file ,
74+ path : currentPath ,
10675 clientY : event . clientY ,
10776 clientX : event . clientX ,
10877 } ,
10978 )
11079 } }
11180 icon = { icon }
11281 >
113- { Object . entries ( file . children || { } ) . map ( ( [ name , file ] ) => {
114- return buildTreeItems ( name , file )
115- } ) }
82+ { typeof content === "object" ? (
83+ Object . keys ( content )
84+ . sort ( sortFileTree ( content ) )
85+ . map ( ( filename ) => {
86+ const child = content [ filename ]
87+ return buildTreeItems ( filename , child , currentPath )
88+ } )
89+ ) : (
90+ < > </ >
91+ ) }
11692 </ TreeItem >
11793 )
11894 }
@@ -124,9 +100,12 @@ export const FileTree: FC<{
124100 aria-label = "Files"
125101 className = { styles . fileTree }
126102 >
127- { Object . entries ( fileTree ) . map ( ( [ name , file ] ) => {
128- return buildTreeItems ( name , file )
129- } ) }
103+ { Object . keys ( fileTree )
104+ . sort ( sortFileTree ( fileTree ) )
105+ . map ( ( filename ) => {
106+ const child = fileTree [ filename ]
107+ return buildTreeItems ( filename , child )
108+ } ) }
130109
131110 < Menu
132111 onClose = { ( ) => setContextMenu ( undefined ) }
@@ -154,7 +133,7 @@ export const FileTree: FC<{
154133 if ( ! contextMenu ) {
155134 return
156135 }
157- onRename ( contextMenu . file )
136+ onRename ( contextMenu . path )
158137 setContextMenu ( undefined )
159138 } }
160139 >
@@ -165,7 +144,7 @@ export const FileTree: FC<{
165144 if ( ! contextMenu ) {
166145 return
167146 }
168- onDelete ( contextMenu . file )
147+ onDelete ( contextMenu . path )
169148 setContextMenu ( undefined )
170149 } }
171150 >
0 commit comments