Merge pull request #5304 from mohammadamer/react-my-dashboard-spfx-upgrade

This commit is contained in:
Hugo Bernier 2024-10-20 20:30:49 -07:00 committed by GitHub
commit 2496583401
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 36757 additions and 38056 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.12.1",
"image": "docker.io/m365pnp/spfx:1.12.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.
@ -21,7 +21,7 @@
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
@ -36,4 +36,4 @@
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}
}

View File

@ -0,0 +1,5 @@
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};

View File

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

View File

View File

@ -0,0 +1 @@
20.16.0

View File

@ -1,6 +1,13 @@
{
"@microsoft/generator-sharepoint": {
"version": "1.12.1",
"@microsoft/generator-sharepoint": {
"nodeVersion": "20.16.0"
},
"sdksVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.24.0"
},
"version": "1.20.0",
"libraryName": "react-carousel",
"libraryId": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
"environment": "spo",

View File

@ -1,20 +1,3 @@
---
page_type: sample
products:
- office-sp
- sharepoint
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- React
createdDate: 06/17/2016 12:00:00 AM
---
# Images and Videos in a Carousel
## Summary
@ -32,8 +15,8 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
| 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.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v20 ](https://img.shields.io/badge/Node.js-v20-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")
@ -66,10 +49,11 @@ For all available methods, go [here](https://react-slick.neostack.com/docs/api#m
## Contributors
* [João Mendes](https://github.com/joaojmendes)
- [João Mendes](https://github.com/joaojmendes)
- [Rahul Suryawanshi](https://github.com/Rahul)
- [Harsha Vardhini](https://github.com/Harshagracy)
- [Giuliano De Luca](https://github.com/giuleon)
- [Mohammad Amer](https://github.com/mohammadamer)
## Version history
@ -79,7 +63,7 @@ Version|Date|Comments
2.0.0|June 17, 2020|Upgraded to SPFx v1.10.0 (Rahul Suryawanshi)
3.0.0|October 31, 2020|Upgraded to SPFx v1.11.0 (Don Kirkham)
4.0.0|June 10, 2021|Upgraded to SPFx v1.12.1 (Giuliano De Luca)
5.0.0|October 15, 2024|Upgraded to SPFx v1.20.0 (Mohammad Amer)
## Minimal Path to Awesome

View File

@ -9,7 +9,7 @@
"This web part show images and videos in carousel"
],
"creationDateTime": "2020-10-31",
"updateDateTime": "2020-06-12",
"updateDateTime": "2024-10-15",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.12.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-carousel-client-side-solution",
"id": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
"version": "4.0.0.0",
"version": "5.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
@ -13,7 +13,29 @@
"termsOfUseUrl": "https://contoso.com/terms-of-use",
"websiteUrl": "https://contoso.com/my-app",
"mpnId": "m365pnp"
}
},
"metadata": {
"shortDescription": {
"default": "react-carousel shows images and videos in carousel"
},
"longDescription": {
"default": "react-carousel shows images and videos in carousel"
},
"screenshotPaths": [],
"videoUrl": "",
"categories": []
},
"features": [
{
"title": "react-carousel CarouselWebPart Feature",
"description": "The feature that activates CarouselWebPart from the react-carousel solution.",
"id": "6d2b91a3-2b33-492b-a372-f7d97dfc06cd",
"version": "4.0.0.0",
"componentIds": [
"6d2b91a3-2b33-492b-a372-f7d97dfc06cd"
]
}
]
},
"paths": {
"zippedPackage": "solution/react-carousel.sppkg"

View File

@ -0,0 +1,3 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}

View File

@ -1,10 +1,6 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
"initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx"
}

File diff suppressed because it is too large Load Diff

View File

@ -2,7 +2,9 @@
"name": "react-carousel",
"version": "4.0.0",
"private": true,
"engines": "undefined",
"engines": {
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
@ -12,53 +14,56 @@
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
},
"dependencies": {
"@microsoft/sp-core-library": "1.12.1",
"@microsoft/sp-http": "1.12.1",
"@microsoft/sp-lodash-subset": "1.12.1",
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
"@microsoft/sp-property-pane": "1.12.1",
"@microsoft/sp-webpart-base": "1.12.1",
"@microsoft/teams-js": "^1.6.0",
"@pnp/common": "^1.3.11",
"@pnp/graph": "^1.3.11",
"@pnp/pnpjs": "^1.3.3",
"@pnp/sp": "^1.3.11",
"@pnp/spfx-controls-react": "1.13.2",
"@pnp/spfx-property-controls": "1.15.0",
"@types/es6-promise": "0.0.33",
"@types/jquery": "^3.3.30",
"@types/webpack-env": "1.13.1",
"@uifabric/fluent-theme": "^0.16.9",
"@uifabric/styling": "^7.12.1",
"jquery": "^3.4.1",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-dom": "16.8.5",
"react-slick": "^0.24.0",
"slick-carousel": "^1.8.1",
"video-react": "^0.14.0"
},
"resolutions": {
"@types/react": "16.8.8"
"@fluentui/react": "8.121.3",
"@microsoft/sp-adaptive-card-extension-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-http": "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",
"@microsoft/teams-js": "2.29.0",
"@pnp/common": "2.15.0",
"@pnp/graph": "2.15.0",
"@pnp/pnpjs": "2.15.0",
"@pnp/sp": "2.15.0",
"@pnp/spfx-controls-react": "3.19.0",
"@pnp/spfx-property-controls": "3.18.0",
"@types/es6-promise": "3.3.0",
"@types/jquery": "3.5.31",
"@uifabric/fluent-theme": "7.7.33",
"@uifabric/styling": "7.25.1",
"jquery": "3.7.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-slick": "0.30.2",
"slick-carousel": "1.8.1",
"tslib": "2.7.0",
"video-react": "0.16.0"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
"@microsoft/sp-build-web": "1.18.0",
"@microsoft/sp-module-interfaces": "1.12.1",
"@microsoft/sp-tslint-rules": "1.12.1",
"@microsoft/sp-webpart-workbench": "1.12.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"@types/react": "16.9.36",
"@types/react-dom": "16.9.8",
"@voitanos/jest-preset-spfx-react16": "^1.1.0",
"ajv": "~5.2.2",
"@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",
"@rushstack/eslint-config": "4.0.1",
"@types/chai": "5.0.0",
"@types/mocha": "10.0.9",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/react-slick": "^0.23.13",
"@types/video-react": "^0.15.8",
"@types/webpack-env": "1.15.2",
"@voitanos/jest-preset-spfx-react16": "1.5.0",
"ajv": "^8.5.0",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"gulp-sequence": "1.0.0",
"jest": "^23.6.0",
"jest": "26.6.3",
"jest-junit": "^6.3.0",
"typescript": "~3.3.x",
"typescript": "4.7.4",
"webpack-bundle-analyzer": "^4.10.2"
},
"jest-junit": {

View File

@ -1,20 +1,9 @@
// João Mendes
// March 2019
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { sp, Fields, Web, SearchResults, Field, PermissionKind, RegionalSettings, PagedItemCollection } from '@pnp/sp';
import { sp } from "@pnp/sp/presets/all";
import { graph, } from "@pnp/graph";
import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions, HttpClient, MSGraphClient } from '@microsoft/sp-http';
import * as $ from 'jquery';
import { MSGraphClient } from '@microsoft/sp-http';
import { registerDefaultFontFaces } from "@uifabric/styling";
import * as moment from 'moment';
import { SiteUser } from "@pnp/sp/src/siteusers";
import { dateAdd } from "@pnp/common";
import { escape, update } from '@microsoft/sp-lodash-subset';
// Class Services
export default class spservices {
private graphClient: MSGraphClient = null;
@ -22,11 +11,11 @@ export default class spservices {
constructor(private context: WebPartContext) {
// Setuo Context to PnPjs and MSGraph
sp.setup({
spfxContext: this.context
spfxContext: this.context as any
});
graph.setup({
spfxContext: this.context
spfxContext: this.context as any
});
// Init
this.onInit();
@ -44,7 +33,7 @@ export default class spservices {
}
try {
const web = new Web(siteUrl);
const web = sp.web;
results = await web.lists
.select("Title", "ID")
.filter('BaseTemplate eq 109')
@ -57,12 +46,10 @@ export default class spservices {
return results;
}
public async getImages(siteUrl: string, listId: string, numberImages: number): Promise<any[]> {
let results: any[] = [];
try {
const web = new Web(siteUrl);
const web = sp.web;
results = await web.lists
.getById(listId).items
.select('Title','Description','File_x0020_Type', 'FileSystemObjectType','File/Name', 'File/ServerRelativeUrl', 'File/Title', 'File/Id', 'File/TimeLastModified')
@ -75,8 +62,6 @@ export default class spservices {
} catch (error) {
return Promise.reject(error);
}
// sort by name
return results;
}
}

View File

@ -1,4 +1,3 @@
//import '@pnp/polyfill-ie11';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
@ -67,9 +66,8 @@ export default class CarouselWebPart extends BaseClientSideWebPart<ICarouselWebP
this.listsDropdownDisabled = false;
this.context.propertyPane.refresh();
}
} catch (error) {
console.log('error', error);
}
}

View File

@ -1,4 +1,4 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~@fluentui/react/dist/sass/References.scss';
.carousel {
.container {
max-width: 700px;

View File

@ -2,18 +2,16 @@ import * as React from 'react';
import styles from './Carousel.module.scss';
import { ICarouselProps } from './ICarouselProps';
import { ICarouselState } from './ICarouselState';
import { escape } from '@microsoft/sp-lodash-subset';
import spservices from '../../../spservices/spservices';
import * as microsoftTeams from '@microsoft/teams-js';
import { ICarouselImages } from './ICarouselmages';
import 'video-react/dist/video-react.css'; // import css
import 'video-react/dist/video-react.css';
import { Player, BigPlayButton } from 'video-react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import * as $ from 'jquery';
import { FontSizes, } from '@uifabric/fluent-theme/lib/fluent/FluentType';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import * as strings from 'CarouselWebPartStrings';
import { DisplayMode } from '@microsoft/sp-core-library';
@ -81,7 +79,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
if (image.FileSystemObjectType == 1) continue; // by pass folder item
const pURL = `${tenantUrl}/_api/v2.0/sharePoint:${image.File.ServerRelativeUrl}:/driveItem/thumbnails/0/large/content?preferNoRedirect=true `;
const thumbnailUrl = `${tenantUrl}/_api/v2.0/sharePoint:${image.File.ServerRelativeUrl}:/driveItem/thumbnails/0/c240x240/content?preferNoRedirect=true `;
//const thumbnailUrl = `${tenantUrl}/_api/v2.0/sharePoint:${image.File.ServerRelativeUrl}:/driveItem/thumbnails/0/c240x240/content?preferNoRedirect=true `;
let mediaType: string = '';
switch (image.File_x0020_Type) {
@ -112,20 +110,19 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
);
// Create Carousel Slides from Images
carouselImages = galleryImages.map((galleryImage, i) => {
return (
<div className='slideLoading' >
{galleryImage.mediaType == 'video' ?
<div >
<Player
poster={galleryImage.imageUrl}
style={{ width: '100%', height: '400px' }}>
<BigPlayButton position="center" />
<source src={galleryImage.serverRelativeUrl}
/>
</Player>
<div style={{ width: '100%', height: '400px' }}>
<Player
poster={galleryImage.imageUrl}>
<BigPlayButton position="center" />
<source src={galleryImage.serverRelativeUrl} />
</Player>
</div>
</div>
:
<div>
@ -182,7 +179,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
lazyLoad: 'progressive',
lazyLoad: 'progressive' as 'ondemand' | 'progressive',
autoplaySpeed: 3000,
initialSlide: this.state.photoIndex,
arrows: true,
@ -237,7 +234,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
</div>
{
this.state.loadingImage &&
<Spinner size={SpinnerSize.small} label={'Loading...'} style={{ verticalAlign: 'middle', right: '30%', top: 20, position: 'absolute', fontSize: FontSizes.size18, color: CommunicationColors.primary }}></Spinner>
<Spinner size={SpinnerSize.small} label={'Loading...'} style={{ verticalAlign: 'middle', right: '30%', top: 20, position: 'absolute', fontSize: FontSizes.size18, color: CommunicationColors.primary }} />
}
</div>
}

View File

@ -1,4 +1,3 @@
import { ICarouselImages } from './ICarouselmages';
export interface ICarouselState {
carouselImages: any[];
isLoading: boolean;

View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
@ -14,12 +14,16 @@
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"noImplicitAny": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"webpack-env"
"webpack-env",
"@types/jest"
],
"lib": [
"es5",
@ -29,8 +33,8 @@
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": []
}

View File

@ -1,30 +0,0 @@
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}