import { Button , ButtonVariant , TextInput , Toolbar , ToolbarContent , ToolbarGroup , ToolbarItem , ToolbarToggleGroup , } from '@patternfly/react-core' ; import { FilterIcon , SearchIcon } from '@patternfly/react-icons' ; import React , { useState } from 'react' ; import { IOptions } from '../../utils/interfaces' ; interface IPageToolbarProps { name : string ; options : IOptions ; setOptions : ( data : IOptions ) => void ; } const PageToolbar = ( { name , options , setOptions } ) => { const [ data , setData ] = useState < IOptions > ( options ) ; const changeQuery = ( value ) : void => { setData ( { ... data , query : value } ) ; } ; const onEnter = ( e ) : void => { if ( e ?. key === 'Enter' && ! e . shiftKey ) { setOptions ( data ) ; } } ; return ( < Toolbar id = "sonarqube-toolbar" style = { { paddingBottom : '0px' , zIndex : 300 } } > < ToolbarContent style = { { padding : '0px' } } > < ToolbarToggleGroup style = { { width : '100%' } } toggleIcon = { < FilterIcon / > } breakpoint = "lg" > < ToolbarGroup style = { { width : '100%' } } > < ToolbarItem style = { { width : '100%' } } > < TextInput aria - label = "Query" type = "text" value = { data . query } onChange = { changeQuery } onKeyDown = { onEnter } / > < /ToolbarItem> < ToolbarItem > < Button variant = { ButtonVariant . primary } icon = { < SearchIcon / > } onClick = { ( ) : void => setOptions ( data ) } > Search < /Button> < /ToolbarItem> < /ToolbarGroup> < /ToolbarToggleGroup> < /ToolbarContent> < /Toolbar>); } ; export default PageToolbar ;