@@ -7,9 +7,10 @@ import update from 'immutability-helper';
77import ClearIcon from 'react-icons/lib/md/clear-all' ;
88import { Decode , Console as ConsoleFeed } from 'console-feed' ;
99
10+ import Select from 'common/components/Select' ;
1011import Input from './Input' ;
1112
12- import { Container , Messages , inspectorTheme } from './elements' ;
13+ import { Container , Messages , inspectorTheme , FilterInput } from './elements' ;
1314
1415export type IMessage = {
1516 type : 'message' | 'command' | 'return' ,
@@ -22,6 +23,8 @@ class Console extends React.Component {
2223 messages : [ ] ,
2324 scrollToBottom : true ,
2425 initialClear : true ,
26+ filter : [ ] ,
27+ searchKeywords : '' ,
2528 } ;
2629
2730 listener ;
@@ -104,6 +107,14 @@ class Console extends React.Component {
104107 }
105108 break ;
106109 }
110+ case 'search-log' : {
111+ this . setState ( { searchKeywords : data . value } ) ;
112+ break ;
113+ }
114+ case 'filter-log' : {
115+ this . setState ( { filter : data . filters } ) ;
116+ break ;
117+ }
107118 default : {
108119 break ;
109120 }
@@ -193,6 +204,7 @@ class Console extends React.Component {
193204 return null ;
194205 }
195206
207+ const { messages, filter, searchKeywords } = this . state ;
196208 return (
197209 < Container >
198210 < Messages
@@ -201,9 +213,11 @@ class Console extends React.Component {
201213 } }
202214 >
203215 < ConsoleFeed
204- logs = { this . state . messages }
216+ logs = { messages }
205217 variant = { this . props . theme . light ? 'light' : 'dark' }
206218 styles = { inspectorTheme ( this . props . theme ) }
219+ filter = { filter }
220+ searchKeywords = { searchKeywords }
207221 />
208222 </ Messages >
209223 < Input evaluateConsole = { this . evaluateConsole } />
@@ -212,6 +226,40 @@ class Console extends React.Component {
212226 }
213227}
214228
229+ const ConsoleFilterInput = ( { style } ) => (
230+ < FilterInput
231+ placeholder = "Filter"
232+ style = { style }
233+ onChange = { ( { target : { value } } ) =>
234+ dispatch ( { type : 'search-log' , value } )
235+ }
236+ />
237+ ) ;
238+
239+ const ConsoleFilterSelect = props => {
240+ const handleOnChange = ( { target : { value } } ) => {
241+ if ( value === 'all' ) {
242+ dispatch ( { type : 'filter-log' , filters : [ ] } ) ;
243+ } else {
244+ const filters = value === 'info' ? [ 'info' , 'log' ] : [ value ] ;
245+ dispatch ( { type : 'filter-log' , filters } ) ;
246+ }
247+ } ;
248+
249+ return (
250+ < Select
251+ style = { { ...props . style , borderColor : '#2c2e30' } }
252+ onChange = { handleOnChange }
253+ >
254+ < option value = "all" > All</ option >
255+ < option value = "info" > Info</ option >
256+ < option value = "warn" > Warning</ option >
257+ < option value = "error" > Error</ option >
258+ < option value = "debug" > Debug</ option >
259+ </ Select >
260+ ) ;
261+ } ;
262+
215263export default {
216264 title : 'Console' ,
217265 Content : withTheme ( Console ) ,
@@ -223,5 +271,17 @@ export default {
223271 } ,
224272 Icon : ClearIcon ,
225273 } ,
274+ {
275+ title : 'Search' ,
276+ onClick : ( ) => {
277+ dispatch ( { type : 'Search Click' } ) ;
278+ } ,
279+ Icon : withTheme ( ConsoleFilterInput ) ,
280+ } ,
281+ {
282+ title : 'Log Filter' ,
283+ onClick : ( ) => { } ,
284+ Icon : withTheme ( ConsoleFilterSelect ) ,
285+ } ,
226286 ] ,
227287} ;
0 commit comments