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

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.

View File

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

View File

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

View File

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

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",

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

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",

View File

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

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

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"
}

File diff suppressed because it is too large Load Diff

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",
"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.12.0",
"@pnp/spfx-property-controls": "3.12.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",
"@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",
"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": "2.5.1",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.2",
"@types/jest": "26.0.4",
"@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.11.4",
"@types/webpack-env": "1.15.2",
"@types/xml2js": "0.4.14",
"ajv": "6.12.5",
"eslint": "8.7.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.5.5",
"typescript": "4.7.4",
"webpack-bundle-analyzer": "^3.1.0"
},
},
"solution": {
"developer": {
"name": "",

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,15 +816,10 @@ 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);
}
resolve(result);
});
});
const parser = new XMLParser();
try {
// Parse the XML string into a JSON object
const promise = parser.parse(recurrenceData);
const recurrenceInfo: any = await promise;
if (recurrenceInfo != null) {
@ -856,6 +851,11 @@ export class Event extends React.Component<IEventProps, IEventState> {
}
}
}
} catch (error) {
// Handle parsing errors by rejecting the promise
throw new Error(`Error parsing recurrence data: ${error.message}`);
}
}
@ -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} />

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) {
patern = 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 };
}
});
// daily Patern
if (patern.daily) {
recurrenceRule = 'daily';

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,
@ -111,7 +112,7 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
*/
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.setState({ endDate: date }, () => {
this.applyRecurrence();
}
);
@ -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;
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 };
}
});
// monthly Patern
if (patern.monthly) {
recurrenceRule = 'monthly';
@ -383,7 +387,7 @@ 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 ,
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',
@ -499,7 +503,7 @@ 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={[
@ -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>

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;
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 };
}
});
// daily Patern
if (patern.weekly) {

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,
@ -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;
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 };
}
});
// 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

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

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,