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

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

@ -81,9 +81,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ startDate: date }, () => {
this.applyRecurrence();
});
} }
/** /**
@ -93,9 +95,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ endDate: date}, () => {
this.applyRecurrence();
});
} }
/** /**
@ -153,23 +157,39 @@ 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, {
disableNumberOcurrences: option.key == 'endAfter' ? false : true, selectdateRangeOption: option.key,
disableEndDate: option.key == 'endDate' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? 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.
selectPatern: option.key, this.setState(
disableNumberOfDays: option.key == 'every' ? false : true, {
}); selectPatern: option.key,
this.applyRecurrence(); disableNumberOfDays: option.key == "every" ? false : true,
},
() => {
this.applyRecurrence();
}
);
} }
public async componentWillMount() { public async componentWillMount() {

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

@ -95,9 +95,11 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ startDate: date }, () => {
this.applyRecurrence();
});
} }
/** /**
@ -107,9 +109,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ endDate: date}, () => {
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.applyRecurrence(); this.setState({ numberOcurrences: value }, () => {
this.applyRecurrence();
});
} }
/** /**
* *
* *
@ -211,15 +220,22 @@ 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, {
disableNumberOcurrences: option.key == 'endAfter' ? false : true, selectdateRangeOption: option.key,
disableEndDate: option.key == 'endDate' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? 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.
selectPatern: option.key, this.setState(
disableDayOfMonth: option.key == 'monthly' ? false : true, {
}); selectPatern: option.key,
this.applyRecurrence(); disableDayOfMonth: option.key == "monthly" ? false : true,
},
() => {
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>,
this.applyRecurrence(); 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();
});
} }
/** /**
* *
* *
@ -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>,
this.applyRecurrence(); 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.
public async componentDidUpdate(prevProps: IEventRecurrenceInfoMonthlyProps, prevState: IEventRecurrenceInfoMonthlyState) { this.setState({ selectedWeekDay: item.key }, () => {
this.applyRecurrence();
});
} }
/** /**

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

@ -96,9 +96,11 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ startDate: date }, () => {
this.applyRecurrence();
});
} }
/** /**
@ -108,11 +110,13 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ endDate: date}, () => {
this.applyRecurrence();
}
);
} }
/** /**
* *
* *
@ -162,24 +166,39 @@ 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, {
disableNumberOcurrences: option.key == 'endAfter' ? false : true, selectdateRangeOption: option.key,
disableEndDate: option.key == 'endDate' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? 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.
selectPatern: option.key, this.setState(
disableNumberOfWeeks: option.key == 'every' ? false : true, {
}); selectPatern: option.key,
this.applyRecurrence(); disableNumberOfWeeks: option.key == "every" ? false : true,
},
() => {
this.applyRecurrence();
}
);
} }
public async componentWillMount() { public async componentWillMount() {

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

@ -85,29 +85,33 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
this.spService = new spservices(this.props.context); this.spService = new spservices(this.props.context);
} }
/** /**
* *
* *
* @private * @private
* @param {Date} date * @param {Date} date
* @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.applyRecurrence(); this.setState({ startDate: date }, () => {
} this.applyRecurrence();
});
/** }
*
* /**
* @private *
* @param {Date} date *
* @memberof EventRecurrenceInfoDaily * @private
*/ * @param {Date} date
private onEndDateChange(date: Date) { * @memberof EventRecurrenceInfoDaily
this.setState({ endDate: date }); */
this.applyRecurrence(); private onEndDateChange(date: 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();
});
}
/** /**
* *
@ -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>,
this.applyRecurrence(); 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();
});
} }
/** /**
@ -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.applyRecurrence(); this.setState({ numberOcurrences: value }, () => {
this.applyRecurrence();
});
} }
/** /**
@ -161,18 +175,24 @@ 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, {
disableNumberOcurrences: option.key == 'endAfter' ? false : true, selectdateRangeOption: option.key,
disableEndDate: option.key == 'endDate' ? false : true, disableNumberOcurrences: option.key == "endAfter" ? false : true,
}); disableEndDate: option.key == "endDate" ? false : true,
this.applyRecurrence(); },
() => {
this.applyRecurrence();
}
);
} }
/** /**
* *
* *
@ -181,13 +201,21 @@ 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.
selectPatern: option.key, this.setState(
disableDayOfMonth: option.key == 'yearly' ? false : true, {
}); selectPatern: option.key,
this.applyRecurrence(); disableDayOfMonth: option.key == "yearly" ? false : true,
},
() => {
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>,
this.applyRecurrence(); 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();
});
} }
/** /**
@ -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>,
this.applyRecurrence(); 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();
});
} }
/** /**
* *
* *
@ -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>,
this.applyRecurrence(); 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();
});
} }
public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) { public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {