@@ -8,6 +8,7 @@ import { type CSSProperties, type FC, useState } from "react";
8
8
import { css } from "@emotion/react" ;
9
9
import { FileTree } from "utils/filetree" ;
10
10
import { DockerIcon } from "components/Icons/DockerIcon" ;
11
+ import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined" ;
11
12
12
13
const sortFileTree = ( fileTree : FileTree ) => ( a : string , b : string ) => {
13
14
const contentA = fileTree [ a ] ;
@@ -32,25 +33,26 @@ interface FileTreeViewProps {
32
33
onDelete : ( path : string ) => void ;
33
34
onRename : ( path : string ) => void ;
34
35
fileTree : FileTree ;
35
- activePath ?: string ;
36
36
}
37
37
38
38
export const FileTreeView : FC < FileTreeViewProps > = ( {
39
39
fileTree,
40
- activePath,
41
40
onDelete,
42
41
onRename,
43
42
onSelect,
44
43
} ) => {
45
44
const [ contextMenu , setContextMenu ] = useState < ContextMenu | undefined > ( ) ;
46
-
47
45
const buildTreeItems = (
48
46
filename : string ,
49
47
content ?: FileTree | string ,
50
48
parentPath ?: string ,
51
49
) : JSX . Element => {
52
50
const currentPath = parentPath ? `${ parentPath } /${ filename } ` : filename ;
53
- let icon : JSX . Element | null = null ;
51
+ const isFolder = typeof content === "object" ;
52
+ let icon : JSX . Element | null = isFolder ? null : (
53
+ < FormatAlignLeftOutlined />
54
+ ) ;
55
+
54
56
if ( filename . endsWith ( ".tf" ) ) {
55
57
icon = < FileTypeTerraform /> ;
56
58
}
@@ -69,39 +71,31 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
69
71
css = { ( theme ) => css `
70
72
overflow : hidden;
71
73
user-select : none;
72
- height : 32px ;
73
-
74
- & : focus : not (.active ) > .MuiTreeItem-content {
75
- background : ${ theme . palette . action . hover } ;
76
- color : ${ theme . palette . text . primary } ;
77
- }
78
-
79
- & : not (: focus ): not (.active ) > .MuiTreeItem-content : hover {
80
- background : ${ theme . palette . action . hover } ;
81
- color : ${ theme . palette . text . primary } ;
82
- }
83
74
84
75
& > .MuiTreeItem-content {
85
76
padding : 2px 16px ;
86
77
color : ${ theme . palette . text . secondary } ;
78
+ height : 32px ;
87
79
88
80
& svg {
89
- width : 16px ;
90
- height : 16px ;
81
+ width : 12px ;
82
+ height : 12px ;
83
+ color : ${ theme . palette . text . secondary } ;
91
84
}
92
85
93
86
& > .MuiTreeItem-label {
94
87
margin-left : 4px ;
95
88
font-size : 13px ;
96
89
color : inherit;
97
90
}
98
- }
99
91
100
- & .active {
101
- & > .MuiTreeItem-content {
92
+ & .Mui-selected {
102
93
color : ${ theme . palette . text . primary } ;
103
94
background : ${ theme . colors . gray [ 14 ] } ;
104
- pointer-events : none;
95
+ }
96
+
97
+ & .Mui-focused {
98
+ box-shadow : inset 0 0 0 1px ${ theme . palette . primary . main } ;
105
99
}
106
100
}
107
101
@@ -114,7 +108,6 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
114
108
}
115
109
}
116
110
` }
117
- className = { currentPath === activePath ? "active" : "" }
118
111
onClick = { ( ) => {
119
112
onSelect ( currentPath ) ;
120
113
} }
@@ -138,7 +131,7 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
138
131
} as CSSProperties
139
132
}
140
133
>
141
- { typeof content === "object" ? (
134
+ { isFolder ? (
142
135
Object . keys ( content )
143
136
. sort ( sortFileTree ( content ) )
144
137
. map ( ( filename ) => {
0 commit comments