diff --git a/packages/desktop-client/src/components/schedules/CustomUpcomingLength.tsx b/packages/desktop-client/src/components/schedules/CustomUpcomingLength.tsx new file mode 100644 index 00000000000..d84b50c5290 --- /dev/null +++ b/packages/desktop-client/src/components/schedules/CustomUpcomingLength.tsx @@ -0,0 +1,58 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Input } from '../common/Input'; +import { Select } from '../common/Select'; + +type CustomUpcomingLengthProps = { + onChange: (value: string) => void; + tempValue: string; +}; + +export function CustomUpcomingLength({ + onChange, + tempValue, +}: CustomUpcomingLengthProps) { + const { t } = useTranslation(); + + const options = [ + { value: 'day', label: t('Days') }, + { value: 'week', label: t('Weeks') }, + { value: 'month', label: t('Months') }, + { value: 'year', label: t('Years') }, + ]; + + let timePeriod = []; + if (tempValue === 'custom') { + timePeriod = ['1', 'day']; + } else { + timePeriod = tempValue.split('-'); + } + + const [numValue, setNumValue] = useState(parseInt(timePeriod[0])); + const [unit, setUnit] = useState(timePeriod[1]); + + useEffect(() => { + onChange(`${numValue}-${unit}`); + }, [numValue, onChange, unit]); + + return ( +
+ setNumValue(parseInt(e.target.value))} + defaultValue={numValue || 1} + /> +