import { createElement , CSSProperties , ReactElement , useCallback , useEffect , useRef , useState } from "react" ; import { FilterSelector } from "@mendix/piw-utils-internal/components/web" ; import { DefaultFilterEnum } from "../../typings/DatagridDateFilterProps" ; import DatePickerComponent from "react-datepicker" ; import { DatePicker } from "./DatePicker" ; import classNames from "classnames" ; interface FilterComponentProps { adjustable : boolean ; calendarStartDay ? : number ; className ? : string ; defaultFilter : DefaultFilterEnum ; defaultValue ? : Date ; dateFormat ? : string ; locale ? : string ; id ? : string ; placeholder ? : string ; screenReaderButtonCaption ? : string ; screenReaderCalendarCaption ? : string ; screenReaderInputCaption ? : string ; tabIndex ? : number ; styles ? : CSSProperties ; updateFilters ? : ( value : Date | null , type : DefaultFilterEnum ) => void ; } export function FilterComponent ( props ) { const [ type , setType ] = useState < DefaultFilterEnum > ( props . defaultFilter ) ; const [ value , setValue ] = useState < Date | null > ( null ) ; const pickerRef = useRef < DatePickerComponent | null > ( null ) ; useEffect ( ( ) => { if ( props . defaultValue ) { setValue ( props . defaultValue ) ; } } , [ props . defaultValue ] ) ; useEffect ( ( ) => { props . updateFilters ?. ( value , type ) ; } , [ value , type ] ) ; const focusInput = useCallback ( ( ) => { if ( pickerRef . current ) { pickerRef . current . setFocus ( ) ; } } , [ pickerRef . current ] ) ; return ( < div className = { classNames ( "filter-container" , props . className ) } data - focusindex = { props . tabIndex ?? 0 } style = { props . styles } > { props . adjustable && ( < FilterSelector ariaLabel = { props . screenReaderButtonCaption } defaultFilter = { props . defaultFilter } id = { props . id } onChange = { useCallback ( type => { setType ( prev => { if ( prev === type ) { return prev ; } focusInput ( ) ; return type ; } ) ; } , [ focusInput ] ) } options = { [ { value : "greater" , label : "Greater than" } , { value : "greaterEqual" , label : "Greater than or equal" } , { value : "equal" , label : "Equal" } , { value : "notEqual" , label : "Not equal" } , { value : "smaller" , label : "Smaller than" } , { value : "smallerEqual" , label : "Smaller than or equal" } ] as Array < { value : DefaultFilterEnum ; label : string ; } > } />)} < DatePicker adjustable = { props . adjustable } calendarStartDay = { props . calendarStartDay } dateFormat = { props . dateFormat } locale = { props . locale } id = { props . id } placeholder = { props . placeholder } ref = { pickerRef } screenReaderCalendarCaption = { props . screenReaderCalendarCaption } screenReaderInputCaption = { props . screenReaderInputCaption } setValue = { setValue } value = { value } / > < /div>); }