Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Hotfix] Calendar widget : Default date is not updated dynamically and widget crashes for invalid dates (#4095)

Browse source 
* hotfix: pr-4073

* hack to update the exposed variable
This commit is contained in:
Arpit 2022-09-22 19:21:12 +05:30 committed by GitHub
parent dabd9459df
commit 3e6c98ebcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/Editor/Components/Calendar.jsx
View file

@ -3,6 +3,7 @@ import { Calendar as ReactCalendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment'; import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css'; import 'react-big-calendar/lib/css/react-big-calendar.css';
import { CalendarEventPopover } from './CalendarPopover'; import { CalendarEventPopover } from './CalendarPopover';
import _ from 'lodash';
const localizer = momentLocalizer(moment); const localizer = momentLocalizer(moment);
@ -12,7 +13,16 @@ const prepareEvent = (event, dateFormat) => ({
end: moment(event.end, dateFormat).toDate(), end: moment(event.end, dateFormat).toDate(),
}); });
const parseDate = (date, dateFormat) => moment(date, dateFormat).toDate(); const parseDate = (date, dateFormat) => {
const parsed = moment(date, dateFormat).toDate();
//handle invalid dates
if (isNaN(parsed.getTime())) {
return null;
}
return parsed;
};
const allowedCalendarViews = ['month', 'week', 'day']; const allowedCalendarViews = ['month', 'week', 'day'];
@ -39,6 +49,7 @@ export const Calendar = function ({
const startTime = properties.startTime ? parseDate(properties.startTime, properties.dateFormat) : todayStartTime; const startTime = properties.startTime ? parseDate(properties.startTime, properties.dateFormat) : todayStartTime;
const endTime = properties.endTime ? parseDate(properties.endTime, properties.dateFormat) : todayEndTime; const endTime = properties.endTime ? parseDate(properties.endTime, properties.dateFormat) : todayEndTime;
const [currentDate, setCurrentDate] = useState(defaultDate);
const [eventPopoverOptions, setEventPopoverOptions] = useState({ show: false }); const [eventPopoverOptions, setEventPopoverOptions] = useState({ show: false });
const eventPropGetter = (event) => { const eventPropGetter = (event) => {
@ -82,9 +93,15 @@ export const Calendar = function ({
: allowedCalendarViews[0]; : allowedCalendarViews[0];
useEffect(() => { useEffect(() => {
setExposedVariable('currentView', defaultView); //check if the default date is a valid date
if (defaultDate !== null && !_.isEqual(exposedVariables.currentDate, properties.defaultDate)) {
setExposedVariable('currentDate', moment(defaultDate).format(properties.dateFormat));
setCurrentDate(defaultDate);
}
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultView]); }, [JSON.stringify(moment(defaultDate).format('DD-MM-YYYY'))]);
const components = { const components = {
timeGutterHeader: () => <div style={{ height: '100%', display: 'flex', alignItems: 'flex-end' }}>All day</div>, timeGutterHeader: () => <div style={{ height: '100%', display: 'flex', alignItems: 'flex-end' }}>All day</div>,
@ -93,7 +110,10 @@ export const Calendar = function ({
}, },
}; };
if (exposedVariables.currentDate === undefined) setExposedVariable('currentDate', properties.defaultDate); //! hack
if (exposedVariables.currentDate === undefined) {
setExposedVariable('currentDate', moment(defaultDate).format(properties.dateFormat));
}
return ( return (
<div id={id} style={{ display: styles.visibility ? 'block' : 'none' }}> <div id={id} style={{ display: styles.visibility ? 'block' : 'none' }}>
@ -105,7 +125,7 @@ export const Calendar = function ({
${exposedVariables.currentView === 'week' ? 'resources-week-cls' : ''} ${exposedVariables.currentView === 'week' ? 'resources-week-cls' : ''}
${properties.displayViewSwitcher ? '' : 'hide-view-switcher'}`} ${properties.displayViewSwitcher ? '' : 'hide-view-switcher'}`}
localizer={localizer} localizer={localizer}
defaultDate={defaultDate} date={currentDate}
events={events} events={events}
startAccessor="start" startAccessor="start"
endAccessor="end" endAccessor="end"
@ -136,7 +156,9 @@ export const Calendar = function ({
}); });
}} }}
onNavigate={(date) => { onNavigate={(date) => {
setExposedVariable('currentDate', moment(date).format(properties.dateFormat)); const formattedDate = moment(date).format(properties.dateFormat);
setExposedVariable('currentDate', formattedDate);
setCurrentDate(date);
fireEvent('onCalendarNavigate'); fireEvent('onCalendarNavigate');
}} }}
selectable={true} selectable={true}