| | |
| | | import React, { useEffect, useMemo, useState } from 'react'; |
| | | import React, { useMemo } from 'react'; |
| | | import { useInput, useTranslate } from 'react-admin'; |
| | | import { |
| | | Box, |
| | |
| | | ? { source, ...rest } |
| | | : { source, defaultValue: DEFAULT_CRON_EXPRESSION, ...rest }; |
| | | const { field } = useInput(inputConfig); |
| | | const [state, setState] = useState(() => |
| | | parseCronExpression(field.value || DEFAULT_CRON_EXPRESSION) |
| | | ); |
| | | const [ready, setReady] = useState(!waitForValue); |
| | | const hasFieldValue = typeof field.value === 'string' && field.value.length > 0; |
| | | |
| | | useEffect(() => { |
| | | const parsedState = useMemo(() => { |
| | | if (!hasFieldValue) { |
| | | if (!waitForValue) { |
| | | setReady(true); |
| | | return waitForValue ? null : parseCronExpression(DEFAULT_CRON_EXPRESSION); |
| | | } |
| | | return; |
| | | } |
| | | const parsed = parseCronExpression(field.value); |
| | | setState(parsed); |
| | | setReady(true); |
| | | }, [hasFieldValue, field.value, waitForValue]); |
| | | return parseCronExpression(field.value); |
| | | }, [field.value, hasFieldValue, waitForValue]); |
| | | |
| | | useEffect(() => { |
| | | if (!state) { |
| | | return; |
| | | } |
| | | const cron = buildCronExpression(state); |
| | | if (cron !== field.value) { |
| | | const state = parsedState || DEFAULT_SCHEDULE_STATE; |
| | | |
| | | const handleUpdate = (nextState) => { |
| | | const cron = buildCronExpression(nextState); |
| | | field.onChange(cron); |
| | | } |
| | | }, [state, field]); |
| | | }; |
| | | |
| | | const handleModeChange = (event) => { |
| | | const mode = event.target.value; |
| | | setState((prev) => ({ |
| | | ...prev, |
| | | handleUpdate({ |
| | | ...state, |
| | | mode, |
| | | weekDays: mode === SCHEDULE_MODES.WEEKLY ? prev.weekDays || DEFAULT_SCHEDULE_STATE.weekDays : prev.weekDays, |
| | | monthDays: mode === SCHEDULE_MODES.MONTHLY ? prev.monthDays || DEFAULT_SCHEDULE_STATE.monthDays : prev.monthDays, |
| | | })); |
| | | weekDays: |
| | | mode === SCHEDULE_MODES.WEEKLY |
| | | ? state.weekDays || DEFAULT_SCHEDULE_STATE.weekDays |
| | | : state.weekDays, |
| | | monthDays: |
| | | mode === SCHEDULE_MODES.MONTHLY |
| | | ? state.monthDays || DEFAULT_SCHEDULE_STATE.monthDays |
| | | : state.monthDays, |
| | | }); |
| | | }; |
| | | |
| | | const handleTimeChange = (event) => { |
| | | const newTime = event.target.value; |
| | | setState((prev) => ({ ...prev, time: newTime })); |
| | | handleUpdate({ |
| | | ...state, |
| | | time: event.target.value, |
| | | }); |
| | | }; |
| | | |
| | | const handleWeekDaysChange = (_, newDays) => { |
| | | if (!newDays.length) { |
| | | return; |
| | | } |
| | | setState((prev) => ({ ...prev, weekDays: newDays })); |
| | | handleUpdate({ |
| | | ...state, |
| | | weekDays: newDays, |
| | | }); |
| | | }; |
| | | |
| | | const handleMonthDaysChange = (_, newDays) => { |
| | | if (!newDays.length) { |
| | | newDays = DEFAULT_SCHEDULE_STATE.monthDays; |
| | | } |
| | | setState((prev) => ({ ...prev, monthDays: newDays })); |
| | | handleUpdate({ |
| | | ...state, |
| | | monthDays: (newDays.length ? newDays : DEFAULT_SCHEDULE_STATE.monthDays), |
| | | }); |
| | | }; |
| | | |
| | | const cronExpression = useMemo( |
| | | () => (state ? buildCronExpression(state) : DEFAULT_CRON_EXPRESSION), |
| | | [state] |
| | | ); |
| | | const cronExpression = useMemo(() => buildCronExpression(state), [state]); |
| | | const description = useMemo( |
| | | () => describeCronExpression(cronExpression, translate), |
| | | [cronExpression, translate] |
| | | ); |
| | | |
| | | if (!ready || !state) { |
| | | if (waitForValue && !hasFieldValue) { |
| | | return <Skeleton variant="rectangular" height={180} sx={{ borderRadius: 1 }} />; |
| | | } |
| | | |