import React , { useState } from 'react' ; import { components } from 'react-select' ; import 'react-day-picker/lib/style.css' ; import { Text } from 'design' ; import Dialog from 'design/DialogConfirmation' ; import { displayDate } from 'shared/services/loc' ; import CustomRange from './Custom' ; import { EventRange } from './utils' ; import Select , { Option , DarkStyledSelect } from 'shared/components/Select' ; import { State } from 'teleport/Audit/useAuditEvents' ; export default function DataRange ( { ml , range , onChangeRange , ranges } ) { const [ isPickerOpen , openDayPicker ] = useState ( false ) ; const [ rangeOptions ] = useState ( ( ) => ranges . map ( range => ( { value : range , label : range . name } ) ) ) ; function handleOnChange ( option ) { if ( option . value . isCustom ) { openDayPicker ( true ) ; } else { onChangeRange ( option . value ) ; } } function onClosePicker ( ) { openDayPicker ( false ) ; } function onSetCustomRange ( from , to ) { onChangeRange ( { isCustom : true , from , to } ) ; onClosePicker ( ) ; } return ( < > < DarkStyledSelect ml = { ml } width = "210px" > < Select isSearchable = { false } components = { { ValueContainer } } options = { rangeOptions } onChange = { handleOnChange } value = { { value : range , label : range . name } } /> < /DarkStyledSelect> < Dialog dialogCss = { ( ) => ( { padding : '0' } ) } disableEscapeKeyDown = { false } onClose = { onClosePicker } open = { isPickerOpen } > < CustomRange from = { range . from } to = { range . to } onChange = { onSetCustomRange } onClosePicker = { onClosePicker } / > < /Dialog> < />); } const ValueContainer = ( { children , ... props } ) => { const { isCustom , from , to } = props . getValue ( ) [ 0 ] . value ; if ( isCustom ) { return ( < components . ValueContainer { ... props } > < Text color = "text.primary" > { `${ displayDate ( from ) } - ${ displayDate ( to ) }` } < /Text> { children } < /components.ValueContainer>); } return ( < components . ValueContainer { ... props } > { children } < /components.ValueContainer>); } ; type Props = { ml ? : string | number ; range : State [ 'range' ] ; onChangeRange : State [ 'setRange' ] ; ranges : State [ 'rangeOptions' ] ; } ;