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
* @memberof EventRecurrenceInfoDaily
*/
private onStartDateChange(date: Date) {
this.setState({ startDate: date });
this.applyRecurrence();
private onStartDateChange(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({ startDate: date }, () => {
this.applyRecurrence();
});
}
/**
@ -93,9 +95,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onEndDateChange(date: Date) {
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();
});
}
/**
@ -153,23 +157,39 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily
*/
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true,
disableEndDate: option.key == 'endDate' ? false : true,
});
this.applyRecurrence();
//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(
{
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == "endDate" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
private onPatternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onPatternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectPatern: option.key,
disableNumberOfDays: option.key == 'every' ? false : true,
});
this.applyRecurrence();
//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,
disableNumberOfDays: option.key == "every" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
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
* @memberof EventRecurrenceInfoDaily
*/
private onStartDateChange(date: Date) {
this.setState({ startDate: date });
this.applyRecurrence();
private onStartDateChange(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({ startDate: date }, () => {
this.applyRecurrence();
});
}
/**
@ -107,9 +109,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onEndDateChange(date: Date) {
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();
}
);
}
/**
@ -197,12 +202,16 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {string} value
* @memberof EventRecurrenceInfoDaily
*/
private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) {
private onNumberOfOcurrencesChange(
ev: React.SyntheticEvent<HTMLElement>,
value: string
) {
ev.preventDefault();
this.setState({ numberOcurrences: value });
this.applyRecurrence();
//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();
});
}
/**
*
*
@ -211,15 +220,22 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily
*/
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true,
disableEndDate: option.key == 'endDate' ? false : true,
});
this.applyRecurrence();
//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(
{
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == "endDate" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
/**
@ -230,15 +246,22 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoMonthly
*/
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectPatern: option.key,
disableDayOfMonth: option.key == 'monthly' ? false : true,
});
this.applyRecurrence();
//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,
disableDayOfMonth: option.key == "monthly" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
public async componentWillMount() {
await this.load();
@ -253,11 +276,17 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoMonthly
*/
private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void {
this.setState({selectedWeekOrderMonth: item.key.toString()});
this.applyRecurrence();
private onWeekOrderMonthChange(
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();
});
}
/**
*
*
@ -266,13 +295,14 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoMonthly
*/
private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void {
this.setState({selectedWeekDay: item.key});
this.applyRecurrence();
}
public async componentDidUpdate(prevProps: IEventRecurrenceInfoMonthlyProps, prevState: IEventRecurrenceInfoMonthlyState) {
private onSelectedWeekDayChange(
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();
});
}
/**

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
* @memberof EventRecurrenceInfoDaily
*/
private onStartDateChange(date: Date) {
this.setState({ startDate: date });
this.applyRecurrence();
private onStartDateChange(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({ startDate: date }, () => {
this.applyRecurrence();
});
}
/**
@ -108,11 +110,13 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onEndDateChange(date: Date) {
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();
}
);
}
/**
*
*
@ -162,24 +166,39 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily
*/
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true,
disableEndDate: option.key == 'endDate' ? false : true,
});
this.applyRecurrence();
//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(
{
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == "endDate" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectPatern: option.key,
disableNumberOfWeeks: option.key == 'every' ? false : true,
});
this.applyRecurrence();
//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,
disableNumberOfWeeks: option.key == "every" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
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);
}
/**
/**
*
*
* @private
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onStartDateChange(date: Date) {
this.setState({ startDate: date });
this.applyRecurrence();
}
/**
*
*
* @private
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onEndDateChange(date: Date) {
this.setState({ endDate: date });
this.applyRecurrence();
}
private onStartDateChange(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({ startDate: date }, () => {
this.applyRecurrence();
});
}
/**
*
*
* @private
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
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) {
this.setState({ selectedMonth: item.key });
this.applyRecurrence();
private onMonthChange(
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();
});
}
/**
@ -147,10 +156,15 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {string} value
* @memberof EventRecurrenceInfoDaily
*/
private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) {
private onNumberOfOcurrencesChange(
ev: React.SyntheticEvent<HTMLElement>,
value: string
) {
ev.preventDefault();
this.setState({ numberOcurrences: value });
this.applyRecurrence();
//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();
});
}
/**
@ -161,18 +175,24 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily
*/
private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == 'endAfter' ? false : true,
disableEndDate: option.key == 'endDate' ? false : true,
});
this.applyRecurrence();
//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(
{
selectdateRangeOption: option.key,
disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == "endDate" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
/**
*
*
@ -181,13 +201,21 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoYearly
*/
private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
ev.preventDefault();
this.setState({
selectPatern: option.key,
disableDayOfMonth: option.key == 'yearly' ? false : true,
});
this.applyRecurrence();
//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,
disableDayOfMonth: option.key == "yearly" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
public async componentDidMount() {
@ -206,9 +234,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly
*/
private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
this.setState({ selectedWeekOrderMonth: item.key.toString() });
this.applyRecurrence();
private onWeekOrderMonthChange(
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();
});
}
/**
@ -219,10 +252,16 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly
*/
private onYearlyByDayMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
this.setState({ selectedYearlyByDayMonth: item.key });
this.applyRecurrence();
private onYearlyByDayMonthChange(
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();
});
}
/**
*
*
@ -231,9 +270,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly
*/
private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
this.setState({ selectedWeekDay: item.key.toString() });
this.applyRecurrence();
private onSelectedWeekDayChange(
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();
});
}
public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {