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

Upgraded to 1.20.0 - Fixed bugs related to xml2js package

This commit is contained in:
Mohammad Amer 2024-11-03 20:02:39 +02:00
parent 0601b5ef4f
commit 67226beb0d
19 changed files with 24830 additions and 35245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/react-calendar/.devcontainer/devcontainer.json
View File

@ -1,7 +1,7 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.16.1",
"image": "docker.io/m365pnp/spfx:1.16.1",
"name": "SPFx 1.20.0",
"image": "docker.io/m365pnp/spfx:1.20.0",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.

1
samples/react-calendar/.gitignore vendored
View File

@ -12,6 +12,7 @@ lib
release
solution
temp
.heft
#*.sppkg
# Coverage directory used by tools like istanbul

3
samples/react-calendar/.nvmrc
View File

@ -1,2 +1 @@
v16.20.2
npm
18.19.1

2
samples/react-calendar/.stylelintrc
View File

@ -22,6 +22,6 @@
"global"
]
}
],
]
}
}

6
samples/react-calendar/.yo-rc.json
View File

@ -1,16 +1,16 @@
{
"@microsoft/generator-sharepoint": {
"@microsoft/generator-sharepoint": {
"nodeVersion": "16.20.2"
"nodeVersion": "18.19.1"
},
"sdksVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.4.1"
"@microsoft/teams-js": "2.24.0"
},
"plusBeta": false,
"isCreatingSolution": true,
"environment": "spo",
"version": "1.16.1",
"version": "1.20.0",
"libraryName": "react-calendar",
"libraryId": "3a13208b-3874-4036-9262-4edd22e88187",
"packageManager": "npm",

5
samples/react-calendar/README.md
View File

@ -57,8 +57,8 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
![Node.js v16](https://img.shields.io/badge/Node.js-v16-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@ -117,6 +117,7 @@ Version|Date|Comments
1.0.18|December 29, 2022|Fixed stylelint issue (#4029)| Cleaned up old Type script versions and Upgraded Type script version
1.0.19|June 28, 2024| added filter by category | fixed the packages.json issues which prevent solution to build successfully.
1.0.20|October 1, 2024| upgraded to SPFx 1.16.1
1.0.21|November 03, 2024| upgraded to SPFx 1.20.0
## Minimal Path to Awesome

4
samples/react-calendar/assets/sample.json
View File

@ -9,7 +9,7 @@
"This Web Part allows you to manage events in a calendar. Uses a list of existing calendars on any website. The location and name of the list and the dates of the events to be displayed are defined in the properties of the web part."
],
"creationDateTime": "2020-12-04",
"updateDateTime": "2024-10-01",
"updateDateTime": "2024-11-03",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
"value": "1.20.0"
},
{
"key": "SPFX-TEAMSTAB",

4
samples/react-calendar/config/copy-assets.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "./release/assets/"
}

2
samples/react-calendar/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "react-calendar-client-side-solution",
"id": "3a13208b-3874-4036-9262-4edd22e88187",
"version": "1.0.20.0",
"version": "1.0.21.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false

2
samples/react-calendar/config/serve.json
View File

@ -2,5 +2,5 @@
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx"
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

59580
samples/react-calendar/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

112
samples/react-calendar/package.json
View File

@ -4,7 +4,7 @@
"version": "1.0.12",
"private": true,
"engines": {
"node": ">=16.20.2 <17.0.0"
"node": ">=18.17.1 <19.0.0"
},
"scripts": {
"build": "gulp bundle",
@ -14,62 +14,60 @@
"test": "./node_modules/.bin/jest --config ./config/jest.config.json",
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
},
"dependencies": {
"@fluentui/react": "8.85.1",
"@microsoft/sp-adaptive-card-extension-base": "1.16.1",
"@microsoft/sp-core-library": "1.16.1",
"@microsoft/sp-lodash-subset": "1.16.1",
"@microsoft/sp-office-ui-fabric-core": "1.16.1",
"@microsoft/sp-property-pane": "1.16.1",
"@microsoft/sp-webpart-base": "1.16.1",
"@pnp/graph": "2.11.0",
"@pnp/sp": "2.11.0",
"@pnp/spfx-controls-react": "3.12.0",
"@pnp/spfx-property-controls": "3.12.0",
"jquery": "3.7.1",
"office-ui-fabric-react": "7.199.1",
"@uifabric/fluent-theme": "^0.16.7",
"react": "17.0.1",
"react-big-calendar": "1.13.0",
"react-dom": "17.0.1",
"react-select": "5.2.2",
"string-format": "2.0.0",
"tslib": "2.3.1",
"underscore": "^1.13.6",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"react-draft-wysiwyg": "1.15.0",
"globalize": "^1.4.2",
"immutable": "4.3.6"
},
"devDependencies": {
"@microsoft/eslint-plugin-spfx": "1.16.1",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/sp-build-web": "1.16.1",
"@microsoft/sp-module-interfaces": "1.16.1",
"@microsoft/sp-webpart-base": "1.16.1",
"@pnp/graph-commonjs": "2.11.0",
"@pnp/sp-commonjs": "2.11.0",
"@rushstack/eslint-config": "2.5.1",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.2",
"@types/jest": "26.0.4",
"@types/react": "17.0.45",
"@types/react-big-calendar": "1.8.9",
"@types/react-dom": "17.0.17",
"@types/string-format": "2.0.0",
"@types/underscore": "^1.11.4",
"@types/webpack-env": "1.15.2",
"@types/xml2js": "0.4.14",
"ajv": "6.12.5",
"eslint": "8.7.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"gulp-sequence": "1.0.0",
"identity-obj-proxy": "^3.0.0",
"typescript": "4.5.5",
"webpack-bundle-analyzer": "^3.1.0"
},
"dependencies": {
"@fluentui/react": "^8.106.8",
"@microsoft/sp-component-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/graph": "2.11.0",
"@pnp/sp": "2.11.0",
"@pnp/spfx-controls-react": "3.19.0",
"@pnp/spfx-property-controls": "3.18.0",
"@uifabric/fluent-theme": "^0.16.7",
"draftjs-to-html": "^0.9.1",
"fast-xml-parser": "^4.5.0",
"globalize": "^1.4.2",
"immutable": "4.3.6",
"jquery": "3.7.1",
"office-ui-fabric-react": "7.199.1",
"react": "17.0.1",
"react-big-calendar": "1.13.0",
"react-dom": "17.0.1",
"react-draft-wysiwyg": "1.15.0",
"react-select": "5.2.2",
"stream-browserify": "^3.0.0",
"string-format": "2.0.0",
"timers-browserify": "^2.0.12",
"tslib": "2.3.1",
"underscore": "1.13.7"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@pnp/graph-commonjs": "2.11.0",
"@pnp/sp-commonjs": "2.11.0",
"@rushstack/eslint-config": "4.0.1",
"@types/react": "17.0.45",
"@types/react-big-calendar": "1.8.9",
"@types/react-dom": "17.0.17",
"@types/string-format": "2.0.0",
"@types/underscore": "1.13.0",
"@types/webpack-env": "1.18.5",
"ajv": "8.17.1",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"gulp-sequence": "1.0.0",
"identity-obj-proxy": "^3.0.0",
"typescript": "4.7.4",
"webpack-bundle-analyzer": "^3.1.0"
},
"solution": {
"developer": {
"name": "",

92
samples/react-calendar/src/controls/Event/event.tsx
View File

@ -4,7 +4,7 @@ import * as strings from 'CalendarWebPartStrings';
import { IEventProps } from './IEventProps';
import { IEventState } from './IEventState';
import * as moment from 'moment';
import { parseString } from 'xml2js';
import { XMLParser } from "fast-xml-parser";
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import {
@ -411,7 +411,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
if (value.length === 0) {
returnMessage = strings.EventTitleErrorMessage;
} else {
this.setState({disableButton: false, errorMessage: '' });
this.setState({ disableButton: false, errorMessage: '' });
}
return returnMessage;
}
@ -421,9 +421,9 @@ export class Event extends React.Component<IEventProps, IEventState> {
* @private
* @memberof Event
*/
private onChangeEventTitle (event:any) {
private onChangeEventTitle(event: any) {
const eventTitle = event.target.value;
this.setState({eventData: {...this.state.eventData, title: eventTitle}});
this.setState({ eventData: { ...this.state.eventData, title: eventTitle } });
}
/**
@ -816,45 +816,45 @@ export class Event extends React.Component<IEventProps, IEventState> {
* @memberof Event
*/
private async returnExceptionRecurrenceInfo(recurrenceData: string) {
const promise = new Promise<object>((resolve, reject) => {
parseString(recurrenceData, (err, result) => {
if (err) {
reject(err);
}
const parser = new XMLParser();
try {
// Parse the XML string into a JSON object
const promise = parser.parse(recurrenceData);
resolve(result);
});
});
const recurrenceInfo: any = await promise;
if (recurrenceInfo != null) {
let keys = Object.keys(recurrenceInfo.recurrence.rule[0].repeat[0]);
const recurrenceTypes = ["daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"];
for (var key of keys) {
const rule = recurrenceInfo.recurrence.rule[0].repeat[0][key][0]['$'];
switch (recurrenceTypes.indexOf(key)) {
case 0:
return this.parseDailyRule(rule);
break;
case 1:
return this.parseWeeklyRule(rule);
break;
case 2:
return this.parseMonthlyRule(rule);
break;
case 3:
return this.parseMonthlyByDayRule(rule);
break;
case 4:
return this.parseYearlyRule(rule);
break;
case 5:
return this.parseYearlyByDayRule(rule);
break;
default:
continue;
const recurrenceInfo: any = await promise;
if (recurrenceInfo != null) {
let keys = Object.keys(recurrenceInfo.recurrence.rule[0].repeat[0]);
const recurrenceTypes = ["daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"];
for (var key of keys) {
const rule = recurrenceInfo.recurrence.rule[0].repeat[0][key][0]['$'];
switch (recurrenceTypes.indexOf(key)) {
case 0:
return this.parseDailyRule(rule);
break;
case 1:
return this.parseWeeklyRule(rule);
break;
case 2:
return this.parseMonthlyRule(rule);
break;
case 3:
return this.parseMonthlyByDayRule(rule);
break;
case 4:
return this.parseYearlyRule(rule);
break;
case 5:
return this.parseYearlyByDayRule(rule);
break;
default:
continue;
}
}
}
} catch (error) {
// Handle parsing errors by rejecting the promise
throw new Error(`Error parsing recurrence data: ${error.message}`);
}
}
@ -919,11 +919,11 @@ export class Event extends React.Component<IEventProps, IEventState> {
allowDisabledFocus={true}
onClick={this.onEditRecurrence}
disabled={
this.state.userPermissions.hasPermissionAdd ||
this.state.userPermissions.hasPermissionEdit
? false
: true
}
this.state.userPermissions.hasPermissionAdd ||
this.state.userPermissions.hasPermissionEdit
? false
: true
}
>
{strings.editRecurrenceSeries}
</DefaultButton>
@ -1210,7 +1210,7 @@ export class Event extends React.Component<IEventProps, IEventState> {
styles: { main: { maxWidth: 450 } }
}}
>
<Label>{this.state.recurrenceSeriesEdited ? strings.ConfirmeDeleteAllRecurrrencesMessage : strings.ConfirmeDeleteOneRecurrenceMessage }</Label>
<Label>{this.state.recurrenceSeriesEdited ? strings.ConfirmeDeleteAllRecurrrencesMessage : strings.ConfirmeDeleteOneRecurrenceMessage}</Label>
{
this.state.isDeleting &&
<Spinner size={SpinnerSize.medium} ariaLabel={strings.SpinnerDeletingLabel} />

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

@ -3,9 +3,8 @@ import styles from './EventRecurrenceInfoDaily.module.scss';
import * as strings from 'CalendarWebPartStrings';
import { IEventRecurrenceInfoDailyProps } from './IEventRecurrenceInfoDailyProps';
import { IEventRecurrenceInfoDailyState } from './IEventRecurrenceInfoDailyState';
import { escape } from '@microsoft/sp-lodash-subset';
import * as moment from 'moment';
import { parseString, Builder } from "xml2js";
import { XMLParser } from "fast-xml-parser";
import {
ChoiceGroup,
IChoiceGroupOption,
@ -209,25 +208,28 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
let recurrenceRule: string;
if (this.props.recurrenceData) {
const parser = new XMLParser({ignoreAttributes: false, attributeNamePrefix: ""});
const result = parser.parse(this.props.recurrenceData);
parseString(this.props.recurrenceData, { explicitArray: false }, (error, result) => {
let pattern;
let dateRange;
if (result.recurrence.rule.repeat) {
pattern = result.recurrence.rule.repeat;
}
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
if (result.recurrence.rule.repeat) {
patern = result.recurrence.rule.repeat;
}
//
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
});
// daily Patern
if (patern.daily) {
recurrenceRule = 'daily';

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

@ -5,7 +5,8 @@ import { IEventRecurrenceInfoMonthlyProps } from './IEventRecurrenceInfoMonthlyP
import { IEventRecurrenceInfoMonthlyState } from './IEventRecurrenceInfoMonthlyState';
import { escape } from '@microsoft/sp-lodash-subset';
import * as moment from 'moment';
import { parseString, Builder } from "xml2js";
//import { parseString, Builder } from "xml2js";
import { XMLParser } from "fast-xml-parser";
import {
ChoiceGroup,
IChoiceGroupOption,
@ -95,7 +96,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onStartDateChange(date: Date) {
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();
@ -109,11 +110,11 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {Date} date
* @memberof EventRecurrenceInfoDaily
*/
private onEndDateChange(date: Date) {
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();
}
this.setState({ endDate: date }, () => {
this.applyRecurrence();
}
);
}
@ -202,7 +203,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {string} value
* @memberof EventRecurrenceInfoDaily
*/
private onNumberOfOcurrencesChange(
private onNumberOfOcurrencesChange(
ev: React.SyntheticEvent<HTMLElement>,
value: string
) {
@ -220,7 +221,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily
*/
private onDataRangeOptionChange(
private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
@ -246,7 +247,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoMonthly
*/
private onPaternChange(
private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
@ -276,7 +277,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoMonthly
*/
private onWeekOrderMonthChange(
private onWeekOrderMonthChange(
ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
@ -295,7 +296,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoMonthly
*/
private onSelectedWeekDayChange(
private onSelectedWeekDayChange(
ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
@ -319,25 +320,28 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
let recurrenceRule: string;
if (this.props.recurrenceData) {
const parser = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: "", });
const result = parser.parse(this.props.recurrenceData);
parseString(this.props.recurrenceData, { explicitArray: false }, (error, result) => {
let pattern;
let dateRange;
if (result.recurrence.rule.repeat) {
patern = result.recurrence.rule.repeat;
}
if (result.recurrence.rule.repeat) {
pattern = result.recurrence.rule.repeat;
}
//
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
});
// monthly Patern
if (patern.monthly) {
recurrenceRule = 'monthly';
@ -383,10 +387,10 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
selectedRecurrenceRule: recurrenceRule,
selectPatern: patern.monthly ? 'monthly' : 'monthlyByDay',
dayOfMonth: monthlyPatern.day ? monthlyPatern.day : '1',
everyNumberOfMonths: monthlyPatern.monthFrequency ? monthlyPatern.monthFrequency : monthlyByDayPatern.monthFrequency ,
everyNumberOfMonthsWeekDay: monthlyByDayPatern.monthFrequency ? monthlyByDayPatern.monthFrequency : '1',
everyNumberOfMonths: monthlyPatern.monthFrequency ? monthlyPatern.monthFrequency : monthlyByDayPatern.monthFrequency,
everyNumberOfMonthsWeekDay: monthlyByDayPatern.monthFrequency ? monthlyByDayPatern.monthFrequency : '1',
selectedWeekOrderMonth: monthlyByDayPatern.weekdayOfMonth ? monthlyByDayPatern.weekdayOfMonth : 'first',
selectedWeekDay: monthlyByDayPatern.weekDay ? monthlyByDayPatern.weekDay : 'day',
selectedWeekDay: monthlyByDayPatern.weekDay ? monthlyByDayPatern.weekDay : 'day',
disableDayOfMonth: patern.monthly ? false : true,
selectdateRangeOption: selectDateRangeOption,
numberOcurrences: dateRange.repeatInstances ? dateRange.repeatInstances : '10',
@ -481,7 +485,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
const recurrenceXML = `<recurrence><rule><firstDayOfWeek>su</firstDayOfWeek><repeat>` + recurrencePatern;
// console.log(recurrenceXML);
// console.log(recurrenceXML);
this.props.returnRecurrenceData(this.state.startDate, recurrenceXML);
}
/**
@ -499,14 +503,14 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
</div>
<div style={{ width: '100%', paddingTop: '10px' }}>
<Label>{ strings.patternLabel }</Label>
<Label>{strings.patternLabel}</Label>
<ChoiceGroup
selectedKey={this.state.selectPatern}
options={[
{
key: 'monthly',
text: strings.dayLable,
ariaLabel: strings.dayLable,
ariaLabel: strings.dayLable,
onRenderField: (props, render) => {
return (
@ -548,7 +552,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
disabled={!this.state.disableDayOfMonth}
options={[
{ key: 'first', text: strings.firstLabel },
{ key: 'second', text: strings.secondLabel},
{ key: 'second', text: strings.secondLabel },
{ key: 'third', text: strings.thirdLabel },
{ key: 'fourth', text: strings.fourthLabel },
{ key: 'last', text: strings.lastLabel },
@ -564,12 +568,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
options={[
{ key: 'day', text: strings.dayLable },
{ key: 'weekday', text: strings.weekDayLabel },
{ key: 'weekendday', text:strings.weekEndDay },
{ key: 'sunday', text: strings.Sunday},
{ key: 'weekendday', text: strings.weekEndDay },
{ key: 'sunday', text: strings.Sunday },
{ key: 'monday', text: strings.Monday },
{ key: 'tuesday', text: strings.Tuesday },
{ key: 'wednesday', text: strings.Wednesday },
{ key: 'thursday', text: strings.Thursday},
{ key: 'thursday', text: strings.Thursday },
{ key: 'friday', text: strings.Friday },
{ key: 'saturday', text: strings.Saturday },
]}
@ -608,7 +612,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
label={strings.StartDateLabel}
value={this.state.startDate}
onSelectDate={this.onStartDateChange}
formatDate= {toLocaleShortDateString}
formatDate={toLocaleShortDateString}
/>
</div>

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

@ -3,9 +3,8 @@ import styles from './EventRecurrenceInfoWeekly.module.scss';
import * as strings from 'CalendarWebPartStrings';
import { IEventRecurrenceInfoWeeklyProps } from './IEventRecurrenceInfoWeeklyProps';
import { IEventRecurrenceInfoWeeklyState } from './IEventRecurrenceInfoWeeklyState';
import { escape } from '@microsoft/sp-lodash-subset';
import * as moment from 'moment';
import { parseString, Builder } from "xml2js";
import { XMLParser } from "fast-xml-parser";
import {
ChoiceGroup,
IChoiceGroupOption,
@ -218,25 +217,28 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
if (this.props.recurrenceData) {
const parser = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: "", });
const result = parser.parse(this.props.recurrenceData);
parseString(this.props.recurrenceData, { explicitArray: false }, (error, result) => {
let pattern;
let dateRange;
if (result.recurrence.rule.repeat) {
patern = result.recurrence.rule.repeat;
}
if (result.recurrence.rule.repeat) {
pattern = result.recurrence.rule.repeat;
}
//
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
});
// daily Patern
if (patern.weekly) {

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

@ -3,9 +3,8 @@ import styles from './EventRecurrenceInfoYearly.module.scss';
import * as strings from 'CalendarWebPartStrings';
import { IEventRecurrenceInfoYearlyProps } from './IEventRecurrenceInfoYearlyProps';
import { IEventRecurrenceInfoYearlyState } from './IEventRecurrenceInfoYearlyState';
import { escape } from '@microsoft/sp-lodash-subset';
import * as moment from 'moment';
import { parseString, Builder } from "xml2js";
import { XMLParser } from "fast-xml-parser";
import {
ChoiceGroup,
IChoiceGroupOption,
@ -15,7 +14,7 @@ import {
MaskedTextField
} from 'office-ui-fabric-react';
import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
import { toLocaleShortDateString } from '../../utils/dateUtils';
import { toLocaleShortDateString } from '../../utils/dateUtils';
import spservices from '../../services/spservices';
const DayPickerStrings: IDatePickerStrings = {
@ -85,33 +84,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) {
//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 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();
});
}
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();
});
}
/**
*
@ -156,7 +155,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {string} value
* @memberof EventRecurrenceInfoDaily
*/
private onNumberOfOcurrencesChange(
private onNumberOfOcurrencesChange(
ev: React.SyntheticEvent<HTMLElement>,
value: string
) {
@ -175,7 +174,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoDaily
*/
private onDataRangeOptionChange(
private onDataRangeOptionChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
@ -201,7 +200,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IChoiceGroupOption} option
* @memberof EventRecurrenceInfoYearly
*/
private onPaternChange(
private onPaternChange(
ev: React.SyntheticEvent<HTMLElement>,
option: IChoiceGroupOption
): void {
@ -234,7 +233,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly
*/
private onWeekOrderMonthChange(
private onWeekOrderMonthChange(
ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
@ -252,7 +251,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly
*/
private onYearlyByDayMonthChange(
private onYearlyByDayMonthChange(
ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
@ -270,7 +269,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
* @param {IDropdownOption} item
* @memberof EventRecurrenceInfoYearly
*/
private onSelectedWeekDayChange(
private onSelectedWeekDayChange(
ev: React.FormEvent<HTMLDivElement>,
item: IDropdownOption
): void {
@ -280,7 +279,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
});
}
public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {
public async componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {
}
@ -298,25 +297,28 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
let recurrenceRule: string;
if (this.props.recurrenceData) {
const parser = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: "", });
const result = parser.parse(this.props.recurrenceData);
parseString(this.props.recurrenceData, { explicitArray: false }, (error, result) => {
let pattern;
let dateRange;
if (result.recurrence.rule.repeat) {
patern = result.recurrence.rule.repeat;
}
if (result.recurrence.rule.repeat) {
pattern = result.recurrence.rule.repeat;
}
//
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
if (result.recurrence.rule.repeatForever) {
dateRange = { repeatForever: result.recurrence.rule.repeatForever };
}
if (result.recurrence.rule.repeatInstances) {
dateRange = { repeatInstances: result.recurrence.rule.repeatInstances };
}
if (result.recurrence.rule.windowEnd) {
dateRange = { windowEnd: result.recurrence.rule.windowEnd };
}
});
// yearly Patern
if (patern.yearly) {
recurrenceRule = 'yearly';
@ -567,7 +569,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
]}
/>
</div>
<Label styles={{ root: { display: 'inline-block', verticalAlign: 'top', width: '30px', paddingLeft: '10px' } }}>{ strings.ofMonthLabel} </Label>
<Label styles={{ root: { display: 'inline-block', verticalAlign: 'top', width: '30px', paddingLeft: '10px' } }}>{strings.ofMonthLabel} </Label>
<div style={{ display: 'inline-block', verticalAlign: 'top', width: '100px', paddingLeft: '5px' }}>
<Dropdown
selectedKey={this.state.selectedYearlyByDayMonth}
@ -602,7 +604,7 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
</div>
<div style={{ paddingTop: '22px' }}>
<Label>{ strings.dateRangeLabel }</Label>
<Label>{strings.dateRangeLabel}</Label>
<div style={{ display: 'inline-block', verticalAlign: 'top', paddingRight: '35px', paddingTop: '10px' }}>
<DatePicker

4
samples/react-calendar/src/webparts/calendar/CalendarWebPart.ts
View File

@ -90,10 +90,6 @@ export default class CalendarWebPart extends BaseClientSideWebPart<ICalendarWebP
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
/**
*
* @protected

2
samples/react-calendar/tsconfig.json
View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,