import './react-filter-box.scss' ; import './react-datepicker.scss' ; import React , { useEffect , useState } from 'react' ; import ReactDatePicker from 'react-datepicker' ; import ReactFilterBox , { Expression } from 'react-filter-box' ; class SimpleReactFilterBox extends ReactFilterBox { constructor ( props ) { super ( props ) ; if ( props . query ) { this . onSubmit ( props . query ) ; } } needAutoCompleteValues ( codeMirror , text ) { return this . parser . getSuggestions ( text ) . filter ( hintInfo => { return ! [ '(' , ')' , 'OR' ] . includes ( hintInfo . value as string ) ; } ) ; } } const customRenderCompletionItem = ( self , data , registerAndGetPickFunc , query ) => { if ( data . value ?. customType === 'date' ) { const pick = registerAndGetPickFunc ( ) ; const start = self . from . ch ; const date = query . substr ( start ) . split ( ' ' ) [ 0 ] ; const selected = ! isNaN ( new Date ( date ) . getTime ( ) ) ? new Date ( date ) : new Date ( ) ; return ( < div > < ReactDatePicker selected = { selected } onChange = { ( date ) => { const dateString = date ?. toISOString ( ) . split ( 'T' ) [ 0 ] ; self . to . ch = start + dateString . length + 1 ; pick ( dateString ) ; } } inline / > < /div>); } else { const className = ` hint-value cm-${ data . type }` ; return < div className = { className } > { data . value } < /div>; } } ; const FilterBox = ( props ) => { const [ query , setQuery ] = useState ( props . defaultQuery ( ) ) ; useEffect ( ( ) => { props . autoCompleteHandler . setQuery ( query ) ; } , [ query ] ) ; return ( < div className = "form-control" > < SimpleReactFilterBox options = { props . options } strictMode = { true } query = { props . defaultQuery ( ) } autoCompleteHandler = { props . autoCompleteHandler } customRenderCompletionItem = { ( self , data , registerAndGetPickFunc ) => customRenderCompletionItem ( self , data , registerAndGetPickFunc , query ) } onChange = { ( query ) => setQuery ( query ) } onParseOk = { ( expressions ) => { props . onParseOk ( expressions ) ; ( document ?. activeElement as HTMLElement ) ?. blur ( ) ; } } /> < /div>); } ; export default FilterBox ;