File tree Expand file tree Collapse file tree 6 files changed +144
-0
lines changed Expand file tree Collapse file tree 6 files changed +144
-0
lines changed Original file line number Diff line number Diff line change 8
8
flex-direction : column;
9
9
align-items : stretch;
10
10
border : solid 1px # 999 ;
11
+ box-sizing : border-box;
11
12
}
Original file line number Diff line number Diff line change 1
1
@import "../header/header" ;
2
+ @import "../search/search" ;
2
3
@import "../stats/stats" ;
3
4
@import "../breadcrumbs/breadcrumbs" ;
4
5
@import "../filebox/filebox" ;
Original file line number Diff line number Diff line change 1
1
import h from 'virtual-dom/h' ;
2
2
import findSubtree from '../../services/find-subtree' ;
3
3
import header from '../header/header' ;
4
+ import search from '../search/search' ;
4
5
import stats from '../stats/stats' ;
5
6
import footer from '../footer/footer' ;
6
7
import filebox from '../filebox/filebox' ;
@@ -12,6 +13,7 @@ export default function report(state) {
12
13
className : 'report'
13
14
} , [
14
15
header ( state ) ,
16
+ search ( state ) ,
15
17
stats ( currentSubtree ) ,
16
18
filebox ( currentSubtree ) ,
17
19
footer ( state )
Original file line number Diff line number Diff line change
1
+ .search {
2
+ position : relative;
3
+ width : 55rem ;
4
+ margin-bottom : 0.5rem ;
5
+ }
6
+
7
+ /* --- search input --- */
8
+
9
+ .search__input {
10
+ display : block;
11
+ width : 100% ;
12
+ font-weight : normal;
13
+ padding : 0.3rem 0.5rem ;
14
+ box-sizing : border-box !important ;
15
+ font-size : 0.9rem ;
16
+ border : solid 1px var (--textSubColor );
17
+ }
18
+
19
+ .search__input ::placeholder {
20
+ color : # 999 ;
21
+ }
22
+
23
+ .search__input : focus {
24
+ outline : none;
25
+ }
26
+
27
+ /* --- search suggestion list --- */
28
+
29
+ .search__suggestion-list {
30
+ position : absolute;
31
+ left : 0 ;
32
+ right : 50% ;
33
+ top : calc (100% - 1px );
34
+ display : flex;
35
+ flex-direction : column;
36
+ background : # fff ;
37
+ box-sizing : border-box;
38
+ border : solid 1px var (--textSubColor );
39
+ }
40
+
41
+ .search__suggestion-list--visible {
42
+ @extend .search__suggestion-list ;
43
+ dis play: block;;
44
+ }
45
+
46
+ .search__suggestion-list--hidden {
47
+ @extend .search__suggestion-list ;
48
+ dis play: none;
49
+ }
50
+
51
+ /* --- search suggestion --- */
52
+
53
+ .search__suggestion {
54
+ display : block;
55
+ width : 100% ;
56
+ padding : 0.3rem 0.5rem ;
57
+ box-sizing : border-box;
58
+ font-size : 0.9rem ;
59
+ border-bottom : solid 1px var (--textSubColor );
60
+ color : var (--textColor );
61
+ text-decoration : none;
62
+ }
63
+
64
+ .search__suggestion : last-child {
65
+ border-bottom : none;
66
+ }
67
+
68
+ .search__suggestion : hover {
69
+ background-color : # bdc3c7 ;
70
+ }
Original file line number Diff line number Diff line change
1
+ import h from 'virtual-dom/h' ;
2
+ import store from '../../store' ;
3
+
4
+ function suggestionsSelector ( state ) {
5
+ const current = state . location . path [ 0 ] ;
6
+ return Object
7
+ . keys ( state . files . contents )
8
+ . filter ( fileName => {
9
+ return state . search && current !== fileName && fileName . includes ( state . search ) ;
10
+ } ) ;
11
+ }
12
+
13
+ function clearSearch ( ) {
14
+ store . dispatch ( {
15
+ type : 'SEARCH' ,
16
+ payload : ''
17
+ } ) ;
18
+ }
19
+
20
+ function runSearch ( searchText ) {
21
+ store . dispatch ( {
22
+ type : 'SEARCH' ,
23
+ payload : searchText
24
+ } ) ;
25
+ }
26
+
27
+ function searchInput ( searchText ) {
28
+ return h ( 'input' , {
29
+ type : 'text' ,
30
+ value : searchText ,
31
+ placeholder : 'Search for files in the project...' ,
32
+ className : 'search__input' ,
33
+ oninput : event => runSearch ( event . target . value )
34
+ } , [ ] ) ;
35
+ }
36
+
37
+ function searchSuggestion ( suggestion ) {
38
+ return h ( 'a' , {
39
+ href : `#/${ suggestion } ` ,
40
+ className : 'search__suggestion' ,
41
+ onclick : clearSearch ( )
42
+ } , [ suggestion ] ) ;
43
+ }
44
+
45
+ function searchSuggestionList ( suggestions ) {
46
+ return h ( 'div' , {
47
+ className : suggestions . length ?
48
+ 'search__suggestion-list--visible' :
49
+ 'search__suggestion-list--hidden'
50
+ } , suggestions . map ( searchSuggestion ) ) ;
51
+ }
52
+
53
+ export default function search ( state ) {
54
+ return h ( 'div' , {
55
+ className : 'search'
56
+ } , [
57
+ searchInput ( state . search ) ,
58
+ searchSuggestionList ( suggestionsSelector ( state ) )
59
+ ] ) ;
60
+ }
Original file line number Diff line number Diff line change @@ -13,8 +13,18 @@ function locationReducer(state = {}, action) {
13
13
}
14
14
}
15
15
16
+ function searchReducer ( state = '' , action ) {
17
+ switch ( action . type ) {
18
+ case 'SEARCH' :
19
+ return action . payload ;
20
+ default :
21
+ return state ;
22
+ }
23
+ }
24
+
16
25
export default combineReducers ( {
17
26
location : locationReducer ,
27
+ search : searchReducer ,
18
28
files : noopReducer ,
19
29
metrics : noopReducer ,
20
30
environment : noopReducer ,
You can’t perform that action at this time.
0 commit comments