widgets: RRule layout and styles

master
Tal Leibman 5 years ago committed by Tom Hacohen
parent 2dcf86238b
commit c7c8b09e41

@ -100,6 +100,10 @@ const menuItemsWeekDays = weekdays.map((day) => {
<MenuItem key={day} value={day}>{WeekDay[day]}</MenuItem>
);
});
const styles = {
multiSelect: { minWidth: 120, maxWidth: '100%' },
width: { width: 120 },
};
export default function RRuleEteSync(props: PropsType) {
const options = props.rrule;
function updateRule(newOptions: Partial<RRuleOptions>): void {
@ -148,25 +152,6 @@ export default function RRuleEteSync(props: PropsType) {
{menuItemsFrequency}
</Select>
</div>
{options.bymonthday &&
<TextField
type="number"
value={options.bymonthday[0]}
label="Month day"
style={{ width: 100 }}
inputProps={{ min: 1, step: 1, max: 31 }}
onChange={(event: React.FormEvent<{ value: unknown }>) => {
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] });
}
}}
/>
}
{
!disableComplex && <div style={{ display: 'flex' }}>
{(options.freq === 'MONTHLY') &&
@ -193,26 +178,56 @@ export default function RRuleEteSync(props: PropsType) {
<MenuItem value={-1}>Last</MenuItem>
</Select>}
</div>}
<FormControl>
<InputLabel>Ends</InputLabel>
<Select
value={getEnds()}
style={styles.width}
onChange={(event: React.FormEvent<{ value: unknown }>) => {
const value = Number((event.target as HTMLSelectElement).value);
let updateOptions;
if (value === Ends.Date) {
updateOptions = { count: undefined, until: ICAL.Time.now() };
} else if (value === Ends.After) {
updateOptions = { until: undefined, count: 1 };
} else {
updateOptions = { count: undefined, until: undefined };
}
updateRule(updateOptions);
}}>
{menuItemsEnds}
</Select>
</FormControl>
{options.until &&
<DateTimePicker
dateOnly
value={options.until?.toJSDate() || undefined}
placeholder="Ends"
onChange={(date?: Date) => {
const value = date ? date : null;
updateRule({ until: ICAL.Time.fromJSDate(value, true) });
}}
/>
}
{options.count &&
<TextField
type="number"
value={options.count}
label="Count"
style={{ width: 60 }}
inputProps={{ min: 1, step: 1 }}
onChange={(event: React.FormEvent<{ value: unknown }>) => {
event.preventDefault();
const inputNode = event.currentTarget as HTMLInputElement;
if (inputNode.value === '') {
updateRule({ count: 1 });
} else if (inputNode.valueAsNumber) {
updateRule({ count: inputNode.valueAsNumber });
}
}}
/>
}
<div>
{options.freq === 'YEARLY' &&
<div>
<FormControl>
<InputLabel>Months</InputLabel>
<Select
style={{ width: 200 }}
value={options.bymonth ? options.bymonth : []}
multiple
onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
const value = event.target.value as string[];
if (value) {
updateRule({ bymonth: value.map((month) => Number(month)) });
}
}}>
{menuItemMonths}
</Select>
</FormControl>
</div>
}
{(options.freq && options.freq !== 'DAILY') &&
<div>
<FormControl>
@ -220,7 +235,7 @@ export default function RRuleEteSync(props: PropsType) {
<Select
value={options.byday ? options.byday : []}
multiple
style={{ width: 200 }}
style={styles.multiSelect}
onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
const value = event.target.value as string[];
if (value) {
@ -232,54 +247,44 @@ export default function RRuleEteSync(props: PropsType) {
</FormControl>
</div>
}
<FormControl>
<InputLabel>Ends</InputLabel>
<Select
value={getEnds()}
onChange={(event: React.FormEvent<{ value: unknown }>) => {
const value = Number((event.target as HTMLSelectElement).value);
let updateOptions;
if (value === Ends.Date) {
updateOptions = { count: undefined, until: ICAL.Time.now() };
} else if (value === Ends.After) {
updateOptions = { until: undefined, count: 1 };
} else {
updateOptions = { count: undefined, until: undefined };
}
updateRule(updateOptions);
}}>
{menuItemsEnds}
</Select>
</FormControl>
{options.until &&
<DateTimePicker
dateOnly
value={options.until?.toJSDate() || undefined}
placeholder="Ends"
onChange={(date?: Date) => {
const value = date ? date : null;
updateRule({ until: ICAL.Time.fromJSDate(value, true) });
}}
/>
}
{options.count &&
{options.freq === 'MONTHLY' &&
<TextField
type="number"
value={options.count}
label="Count"
style={{ width: 60 }}
inputProps={{ min: 1, step: 1 }}
value={options.bymonthday ? options.bymonthday[0] : undefined}
label="Month day"
style={styles.width}
inputProps={{ min: 1, step: 1, max: 31 }}
onChange={(event: React.FormEvent<{ value: unknown }>) => {
event.preventDefault();
const inputNode = event.currentTarget as HTMLInputElement;
if (inputNode.value === '') {
updateRule({ count: 1 });
} else if (inputNode.valueAsNumber) {
updateRule({ count: inputNode.valueAsNumber });
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' &&
<div>
<FormControl>
<InputLabel>Months</InputLabel>
<Select
style={styles.multiSelect}
value={options.bymonth ? options.bymonth : []}
multiple
onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
const value = event.target.value as string[];
if (value) {
updateRule({ bymonth: value.map((month) => Number(month)) });
}
}}>
{menuItemMonths}
</Select>
</FormControl>
</div>
}
</div>
</>
);

Loading…
Cancel
Save