widgets: RRule layout and styles
Tal Leibman
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,13 +178,100 @@ 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 && options.freq !== 'DAILY') &&
|
||||
<div>
|
||||
<FormControl>
|
||||
<InputLabel>Weekdays</InputLabel>
|
||||
<Select
|
||||
value={options.byday ? options.byday : []}
|
||||
multiple
|
||||
style={styles.multiSelect}
|
||||
onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
|
||||
const value = event.target.value as string[];
|
||||
if (value) {
|
||||
updateRule({ byday: value.map((day) => Number(day)) });
|
||||
}
|
||||
}}>
|
||||
{menuItemsWeekDays}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
}
|
||||
{options.freq === 'MONTHLY' &&
|
||||
<TextField
|
||||
type="number"
|
||||
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 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={{ width: 200 }}
|
||||
style={styles.multiSelect}
|
||||
value={options.bymonth ? options.bymonth : []}
|
||||
multiple
|
||||
onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
|
||||
|
|
@ -213,73 +285,6 @@ export default function RRuleEteSync(props: PropsType) {
|
|||
</FormControl>
|
||||
</div>
|
||||
}
|
||||
{(options.freq && options.freq !== 'DAILY') &&
|
||||
<div>
|
||||
<FormControl>
|
||||
<InputLabel>Weekdays</InputLabel>
|
||||
<Select
|
||||
value={options.byday ? options.byday : []}
|
||||
multiple
|
||||
style={{ width: 200 }}
|
||||
onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
|
||||
const value = event.target.value as string[];
|
||||
if (value) {
|
||||
updateRule({ byday: value.map((day) => Number(day)) });
|
||||
}
|
||||
}}>
|
||||
{menuItemsWeekDays}
|
||||
</Select>
|
||||
</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 &&
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue