From 86bd2a542038b67df808bd3708e10bfc99f9a1ab Mon Sep 17 00:00:00 2001 From: Tal Leibman Date: Sat, 11 Jan 2020 14:54:19 +0200 Subject: [PATCH] widgets: RRule support bymonth repeat for multiple values --- src/widgets/RRule.tsx | 125 +++++++++++++++++++++++++++++------------- 1 file changed, 87 insertions(+), 38 deletions(-) diff --git a/src/widgets/RRule.tsx b/src/widgets/RRule.tsx index aa85190..de37845 100644 --- a/src/widgets/RRule.tsx +++ b/src/widgets/RRule.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { TextField, Select, MenuItem, FormGroup, FormControlLabel, Checkbox, InputLabel, FormControl } from '@material-ui/core'; +import { TextField, Select, MenuItem, FormGroup, FormControlLabel, Checkbox, InputLabel, FormControl, FormLabel } from '@material-ui/core'; import DateTimePicker from '../widgets/DateTimePicker'; import { isNumber } from 'util'; import * as ICAL from 'ical.js'; @@ -58,21 +58,30 @@ enum WeekDay { Fr, Sa, } - -const menuItemsMonths = Object.keys(Months).filter((key) => Number(key)).map((key) => { - return ( - {Months[key]} - ); -}); const menuItemsEnds = [Ends.Never, Ends.Date, Ends.After].map((key) => { return ( {Ends[key]} ); }); const weekdays = [WeekDay.Su, WeekDay.Mo, WeekDay.Tu, WeekDay.We, WeekDay.Th, WeekDay.Fr, WeekDay.Sa]; +const months = [ + Months.Jan, + Months.Feb, + Months.Mar, + Months.Apr, + Months.May, + Months.Jun, + Months.Jul, + Months.Aug, + Months.Sep, + Months.Oct, + Months.Nov, + Months.Dec, +]; + const menuItemsFrequency = ['YEARLY', 'MONTHLY', 'WEEKLY', 'DAILY'].map((value) => { return ( - {value} + {value.toLowerCase()} ); }); @@ -109,7 +118,28 @@ export default function RRuleEteSync(props: PropsType) { } updateRule({ byday: byweekday }); } - + function handleCheckboxMonth(event: React.FormEvent<{ value: unknown }>): void { + const checkbox = event.target as HTMLInputElement; + const month = Number(checkbox.value); + let bymonthArray = options.bymonth as Months[]; + let bymonth; + if (!checkbox.checked && bymonthArray) { + bymonth = bymonthArray.filter((day) => day !== month); + } else if (bymonthArray) { + bymonthArray = bymonthArray.filter((day) => day !== month); + bymonth = [...bymonthArray, month]; + } else { + bymonth = [month]; + } + updateRule({ bymonth: bymonth }); + } + function isMonthChecked(month: number): boolean { + if (options.bymonth) { + return isNumber(options.bymonth.find((value) => Months[value] === Months[month])); + } else { + return false; + } + } function isWeekdayChecked(day: number): boolean { if (options.byday) { return isNumber(options.byday.find((value) => WeekDay[value] === WeekDay[day])); @@ -117,6 +147,20 @@ export default function RRuleEteSync(props: PropsType) { return false; } } + const checkboxMonths = months.map((month) => { + return ( + } + key={month} + label={Months[month]} /> + ); + }); const checkboxWeekDays = weekdays.map((day) => { return ( @@ -173,8 +217,26 @@ export default function RRuleEteSync(props: PropsType) { {menuItemsFrequency} + {options.bymonthday && + ) => { + event.preventDefault(); + const value = (event.currentTarget as HTMLInputElement).value; + const numberValue = Number(value); + if (value === '') { + updateRule({ bymonthday: undefined }); + } else if (numberValue < 32 && numberValue > 0) { + updateRule({ bymonthday: [numberValue] }); + } + }} + /> + }
- {(options.freq === 'MONTHLY') && } - {(options.freq === 'YEARLY' && options.bymonth) && - - } - {options.bymonthday && - ) => { - event.preventDefault(); - const value = (event.currentTarget as HTMLInputElement).value; - const numberValue = Number(value); - if (value === '') { - updateRule({ bymonthday: undefined }); - } else if (numberValue < 32 && numberValue > 0) { - updateRule({ bymonthday: [numberValue] }); - } - }} - /> + + {(options.freq === 'YEARLY' && options.bymonth) && + + Months + + {checkboxMonths} + + }
+ {(options.freq && options.freq !== 'DAILY') && - {checkboxWeekDays} + + Weekdays + + {checkboxWeekDays} + + } Ends