Merge pull request #1343 from rahulsuryawanshi/master
Upgraded sample to SharePoint Framework version 1.10.0
This commit is contained in:
commit
f6f8243e12
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.8.2",
|
||||
"version": "1.10.0",
|
||||
"libraryName": "react-carousel",
|
||||
"libraryId": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
|
||||
"environment": "spo",
|
||||
|
|
|
@ -1,19 +1,33 @@
|
|||
---
|
||||
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
|
||||
---
|
||||
|
||||
# React Carousel Web Part
|
||||
|
||||
## Summary
|
||||
|
||||
This web part show images and videos in carousel
|
||||
This web part show images and videos in carousel
|
||||
|
||||
It uses Microsoft Graph API to get image/video url and use PnPjs to load files from Picture library the images/videos are loading in lazy mode, progressively.
|
||||
|
||||
![carousel](./assets/carousel.gif)
|
||||
|
||||
##
|
||||
![calendar](/samples/react-carousel/assets/carousel.gif)
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
|
||||
![1.10](https://img.shields.io/badge/version-1.10.0-green.svg)
|
||||
|
||||
## Applies to
|
||||
|
||||
|
@ -30,20 +44,21 @@ Site Url of library | Text| yes|
|
|||
Picture Library| Choice/Dropdown | yes| this is filled with all Picture Libraries (BaseTemplate : 109)
|
||||
number images to load | number| yes | number between 1 and 200
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
The web part Use PnPjs library, Microsoft Graph API, Office-ui-fabric-react components, react-slick Compoment
|
||||
|
||||
The web part Use PnPjs library, Microsoft Graph API, Office-ui-fabric-react components, react-slick Component
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
Carousel Image/Video Web Part|João Mendes
|
||||
Carousel Image/Video Web Part|Rahul Suryawanshi ([@rahulsuryawansh](https://twitter.com/rahulsuryawansh))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|July 11, 2019|Initial release
|
||||
2.0.0|June 17, 2020|Upgraded to SPFx v1.10.0 (Rahul Suryawanshi)
|
||||
|
||||
|
||||
## Disclaimer
|
||||
|
@ -60,9 +75,9 @@ Version|Date|Comments
|
|||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- `Add to AppCatalog and deploy`
|
||||
|
||||
|
||||
- Make sure you have at least one **Picture Library** on one of your site collections
|
||||
- Add the web part to a page
|
||||
- In the web part's property pane, enter the **Site Url** (if library is on a different site collect) and select a **Picture Library** from the **Library** drop-down.
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-carousel" />
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-carousel-client-side-solution",
|
||||
"id": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
|
||||
"version": "1.0.0.0",
|
||||
"version": "2.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -14,40 +14,45 @@
|
|||
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-lodash-subset": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-property-pane": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-webpart-base": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-core-library": "1.10.0",
|
||||
"@microsoft/sp-http": "1.10.0",
|
||||
"@microsoft/sp-lodash-subset": "1.10.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
|
||||
"@microsoft/sp-property-pane": "1.10.0",
|
||||
"@microsoft/sp-webpart-base": "1.10.0",
|
||||
"@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/react": "16.7.22",
|
||||
"@types/react-dom": "16.8.0",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@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.182.0",
|
||||
"react": "16.7.0",
|
||||
"react-dom": "16.7.0",
|
||||
"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.7.22"
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.3": "~0.2.x",
|
||||
"@microsoft/sp-build-web": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-module-interfaces": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-tslint-rules": "1.8.2-plusbeta",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.2-plusbeta",
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.10.0",
|
||||
"@microsoft/sp-module-interfaces": "1.10.0",
|
||||
"@microsoft/sp-tslint-rules": "1.10.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.10.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/react": "^16.7.22",
|
||||
"@types/react": "16.8.8",
|
||||
"@voitanos/jest-preset-spfx-react16": "^1.1.0",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
|
@ -60,5 +65,6 @@
|
|||
"jest-junit": {
|
||||
"output": "temp/test/junit/junit.xml",
|
||||
"usePathForSuiteName": "true"
|
||||
}
|
||||
},
|
||||
"main": "lib/index.js"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue