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
*/
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();
});
}
/**
@ -94,8 +96,10 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
* @memberof EventRecurrenceInfoDaily
*/
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();
});
}
/**
@ -153,24 +157,40 @@ 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({
//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,
});
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({
//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,
});
disableNumberOfDays: option.key == "every" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
public async componentWillMount() {
// 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
*/
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();
});
}
/**
@ -108,9 +110,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @memberof EventRecurrenceInfoDaily
*/
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();
}
);
}
/**
*
@ -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 });
//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,16 +220,23 @@ 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({
//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,
});
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({
//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,
});
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()});
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});
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();
}
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
*/
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();
});
}
/**
@ -109,10 +111,12 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
* @memberof EventRecurrenceInfoDaily
*/
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();
}
);
}
/**
*
*
@ -162,25 +166,40 @@ 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({
//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,
});
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({
//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,
});
disableNumberOfWeeks: option.key == "every" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
public async componentWillMount() {
// 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
*/
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();
});
}
/**
@ -105,8 +107,10 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @memberof EventRecurrenceInfoDaily
*/
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();
});
}
/**
@ -134,9 +138,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
}
private onMonthChange(ev: React.SyntheticEvent<HTMLElement>, item: IDropdownOption) {
this.setState({ selectedMonth: item.key });
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 });
//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,17 +175,23 @@ 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({
//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,
});
disableNumberOcurrences: option.key == "endAfter" ? false : true,
disableEndDate: option.key == "endDate" ? false : true,
},
() => {
this.applyRecurrence();
}
);
}
/**
*
@ -181,14 +201,22 @@ 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({
//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,
});
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() });
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 });
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() });
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) {