import { Form , Space , Switch } from 'antd' ; import { Trans , t } from '@lingui/macro' ; import { useEffect , useState } from 'react' ; import FormattedNumberInput from '../inputs/FormattedNumberInput' ; import { FormItemExt } from './formItemExt' ; export default function ProjectDuration ( { name , formItemProps , value , isRecurring , hideLabel , onToggleRecurring , onValueChange , } ) { const [ showDurationInput , setShowDurationInput ] = useState < boolean > ( ) ; useEffect ( ( ) => { if ( value && value !== '0' ) setShowDurationInput ( true ) ; } , [ value ] ) ; return ( < div > < Space direction = "vertical" > < div > < Space > < Switch checked = { showDurationInput } onChange = { checked => { setShowDurationInput ( checked ) ; onValueChange ( checked ? '30' : '0' ) ; if ( ! isRecurring && ! checked ) { onToggleRecurring ( ) ; } } } /> < label > < Trans > Set a funding cycle duration < /Trans> < /label> < /Space> < /div> < Form . Item extra = { t `How long one funding cycle will last. Changes to upcoming funding cycles will only take effect once the current cycle has ended.` } name = { name } label = { hideLabel ? undefined : t `Funding cycle duration` } { ... formItemProps } style = { { display : showDurationInput ? 'block' : 'none' } } > < FormattedNumberInput placeholder = "30" value = { value } suffix = "days" onChange = { onValueChange } min = { 1 } / > < /Form.Item> < /Space> < /div>); }