honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix recurrent events endby date isn't applied correctly

This commit is contained in:
mohammadamer 2021-11-01 01:16:51 +02:00
parent 9b2d40a73d
commit a6c61538aa
4 changed files with 236 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
View File

@ -82,8 +82,10 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onStartDateChange(date: Date) { private onStartDateChange(date: Date) {
this.setState({ startDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ startDate: date }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -94,8 +96,10 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onEndDateChange(date: Date) { private onEndDateChange(date: Date) {
this.setState({ endDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ endDate: date}, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -153,24 +157,40 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @param {IChoiceGroupOption} option * @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ this.setState(
{
selectdateRangeOption: option.key, selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == 'endDate' ? false : true, disableEndDate: option.key == "endDate" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
private onPatternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { );
}
private onPatternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
this.setState({ //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState(
{
selectPatern: option.key, selectPatern: option.key,
disableNumberOfDays: option.key == 'every' ? false : true, disableNumberOfDays: option.key == "every" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
public async componentWillMount() { public async componentWillMount() {
// await this.load(); // await this.load();

78
samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
View File

@ -96,8 +96,10 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onStartDateChange(date: Date) { private onStartDateChange(date: Date) {
this.setState({ startDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ startDate: date }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -108,9 +110,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onEndDateChange(date: Date) { private onEndDateChange(date: Date) {
this.setState({ endDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ endDate: date}, () => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
/** /**
* *
@ -197,12 +202,16 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {string} value * @param {string} value
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) { private onNumberOfOcurrencesChange(
ev: React.SyntheticEvent<HTMLElement>,
value: string
) {
ev.preventDefault(); ev.preventDefault();
this.setState({ numberOcurrences: value }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ numberOcurrences: value }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
* *
* *
@ -211,16 +220,23 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IChoiceGroupOption} option * @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ this.setState(
{
selectdateRangeOption: option.key, selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == 'endDate' ? false : true, disableEndDate: option.key == "endDate" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
/** /**
* *
@ -230,15 +246,22 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IChoiceGroupOption} option * @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoMonthly * @memberof EventRecurrenceInfoMonthly
*/ */
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
this.setState({ //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState(
{
selectPatern: option.key, selectPatern: option.key,
disableDayOfMonth: option.key == 'monthly' ? false : true, disableDayOfMonth: option.key == "monthly" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
public async componentWillMount() { public async componentWillMount() {
await this.load(); await this.load();
@ -253,11 +276,17 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IDropdownOption} item * @param {IDropdownOption} item
* @memberof EventRecurrenceInfoMonthly * @memberof EventRecurrenceInfoMonthly
*/ */
private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void { private onWeekOrderMonthChange(
this.setState({selectedWeekOrderMonth: item.key.toString()}); ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ selectedWeekOrderMonth: item.key.toString() }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
* *
* *
@ -266,13 +295,14 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IDropdownOption} item * @param {IDropdownOption} item
* @memberof EventRecurrenceInfoMonthly * @memberof EventRecurrenceInfoMonthly
*/ */
private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void { private onSelectedWeekDayChange(
this.setState({selectedWeekDay: item.key}); ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ selectedWeekDay: item.key }, () => {
this.applyRecurrence(); this.applyRecurrence();
} });
public async componentDidUpdate(prevProps: IEventRecurrenceInfoMonthlyProps, prevState: IEventRecurrenceInfoMonthlyState) {
} }
/** /**

45
samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
View File

@ -97,8 +97,10 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onStartDateChange(date: Date) { private onStartDateChange(date: Date) {
this.setState({ startDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ startDate: date }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -109,10 +111,12 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onEndDateChange(date: Date) { private onEndDateChange(date: Date) {
this.setState({ endDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ endDate: date}, () => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
/** /**
* *
* *
@ -162,25 +166,40 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option * @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ this.setState(
{
selectdateRangeOption: option.key, selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == 'endDate' ? false : true, disableEndDate: option.key == "endDate" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
this.setState({ //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState(
{
selectPatern: option.key, selectPatern: option.key,
disableNumberOfWeeks: option.key == 'every' ? false : true, disableNumberOfWeeks: option.key == "every" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
public async componentWillMount() { public async componentWillMount() {
// await this.load(); // await this.load();

90
samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
View File

@ -93,8 +93,10 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onStartDateChange(date: Date) { private onStartDateChange(date: Date) {
this.setState({ startDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ startDate: date }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -105,8 +107,10 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onEndDateChange(date: Date) { private onEndDateChange(date: Date) {
this.setState({ endDate: date }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ endDate: date }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -134,9 +138,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
} }
private onMonthChange(ev: React.SyntheticEvent<HTMLElement>, item: IDropdownOption) { private onMonthChange(
this.setState({ selectedMonth: item.key }); ev: React.SyntheticEvent<HTMLElement>,
item: IDropdownOption
) {
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ selectedMonth: item.key }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -147,10 +156,15 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {string} value * @param {string} value
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) { private onNumberOfOcurrencesChange(
ev: React.SyntheticEvent<HTMLElement>,
value: string
) {
ev.preventDefault(); ev.preventDefault();
this.setState({ numberOcurrences: value }); //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ numberOcurrences: value }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -161,17 +175,23 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option * @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily * @memberof EventRecurrenceInfoDaily
*/ */
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ this.setState(
{
selectdateRangeOption: option.key, selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == 'endDate' ? false : true, disableEndDate: option.key == "endDate" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
/** /**
* *
@ -181,14 +201,22 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option * @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoYearly * @memberof EventRecurrenceInfoYearly
*/ */
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void { private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault(); ev.preventDefault();
this.setState({ //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState(
{
selectPatern: option.key, selectPatern: option.key,
disableDayOfMonth: option.key == 'yearly' ? false : true, disableDayOfMonth: option.key == "yearly" ? false : true,
}); },
() => {
this.applyRecurrence(); this.applyRecurrence();
} }
);
}
public async componentDidMount() { public async componentDidMount() {
@ -206,9 +234,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item * @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly * @memberof EventRecurrenceInfoYearly
*/ */
private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void { private onWeekOrderMonthChange(
this.setState({ selectedWeekOrderMonth: item.key.toString() }); ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ selectedWeekOrderMonth: item.key.toString() }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
@ -219,10 +252,16 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item * @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly * @memberof EventRecurrenceInfoYearly
*/ */
private onYearlyByDayMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void { private onYearlyByDayMonthChange(
this.setState({ selectedYearlyByDayMonth: item.key }); ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ selectedYearlyByDayMonth: item.key }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
/** /**
* *
* *
@ -231,9 +270,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item * @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly * @memberof EventRecurrenceInfoYearly
*/ */
private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void { private onSelectedWeekDayChange(
this.setState({ selectedWeekDay: item.key.toString() }); ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
//Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
this.setState({ selectedWeekDay: item.key.toString() }, () => {
this.applyRecurrence(); this.applyRecurrence();
});
} }
public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) { public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {