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

Merge pull request #1586 from DonKirkham/upgrade-react-carousel

This commit is contained in:
Hugo Bernier 2020-11-04 17:31:10 -05:00 committed by GitHub
parent c2cdb33313 2d1c2c8c1d
commit 9012702df9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 3293 additions and 5125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react-carousel/.yo-rc.json
View File

@ -1,6 +1,6 @@
{ {
"@microsoft/generator-sharepoint": { "@microsoft/generator-sharepoint": {
"version": "1.10.0", "version": "1.11.0",
"libraryName": "react-carousel", "libraryName": "react-carousel",
"libraryId": "263a1d21-f4c7-4a46-a364-e5f995286b9b", "libraryId": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
"environment": "spo", "environment": "spo",

4
samples/react-carousel/README.md
View File

@ -27,7 +27,7 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
## Used SharePoint Framework Version ## Used SharePoint Framework Version
![1.10](https://img.shields.io/badge/version-1.10.0-green.svg) ![1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
## Applies to ## Applies to
@ -60,6 +60,7 @@ Solution|Author(s)
--------|--------- --------|---------
Carousel Image/Video Web Part|João Mendes Carousel Image/Video Web Part|João Mendes
Carousel Image/Video Web Part|Rahul Suryawanshi ([@rahulsuryawansh](https://twitter.com/rahulsuryawansh)) Carousel Image/Video Web Part|Rahul Suryawanshi ([@rahulsuryawansh](https://twitter.com/rahulsuryawansh))
Carousel Image/Video Web Part|Don Kirkham ([@DonKirkham](https://twitter.com/DonKirkham))
## Version history ## Version history
@ -67,6 +68,7 @@ Version|Date|Comments
-------|----|-------- -------|----|--------
1.0.0|July 11, 2019|Initial release 1.0.0|July 11, 2019|Initial release
2.0.0|June 17, 2020|Upgraded to SPFx v1.10.0 (Rahul Suryawanshi) 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)
## Disclaimer ## Disclaimer

11
samples/react-carousel/config/package-solution.json
View File

@ -3,10 +3,17 @@
"solution": { "solution": {
"name": "react-carousel-client-side-solution", "name": "react-carousel-client-side-solution",
"id": "263a1d21-f4c7-4a46-a364-e5f995286b9b", "id": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
"version": "2.0.0.0", "version": "3.0.0.0",
"includeClientSideAssets": true, "includeClientSideAssets": true,
"skipFeatureDeployment": true, "skipFeatureDeployment": true,
"isDomainIsolated": false "isDomainIsolated": false,
"developer": {
"name": "Contoso",
"privacyUrl": "https://contoso.com/privacy",
"termsOfUseUrl": "https://contoso.com/terms-of-use",
"websiteUrl": "https://contoso.com/my-app",
"mpnId": "000000"
}
}, },
"paths": { "paths": {
"zippedPackage": "solution/react-carousel.sppkg" "zippedPackage": "solution/react-carousel.sppkg"

7816
samples/react-carousel/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
samples/react-carousel/package.json
View File

@ -14,12 +14,12 @@
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll" "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-core-library": "1.10.0", "@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-http": "1.10.0", "@microsoft/sp-http": "1.11.0",
"@microsoft/sp-lodash-subset": "1.10.0", "@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0", "@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.10.0", "@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.10.0", "@microsoft/sp-webpart-base": "1.11.0",
"@microsoft/teams-js": "^1.6.0", "@microsoft/teams-js": "^1.6.0",
"@pnp/common": "^1.3.11", "@pnp/common": "^1.3.11",
"@pnp/graph": "^1.3.11", "@pnp/graph": "^1.3.11",
@ -46,10 +46,10 @@
}, },
"devDependencies": { "devDependencies": {
"@microsoft/rush-stack-compiler-3.3": "0.3.5", "@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.10.0", "@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.10.0", "@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.10.0", "@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.10.0", "@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34", "@types/chai": "3.4.34",
"@types/mocha": "2.2.38", "@types/mocha": "2.2.38",
"@types/react": "16.8.8", "@types/react": "16.8.8",

18
samples/react-carousel/src/webparts/carousel/components/Carousel.tsx
View File

@ -85,10 +85,14 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
let mediaType: string = ''; let mediaType: string = '';
switch (image.File_x0020_Type) { switch (image.File_x0020_Type) {
case ('jpg' || 'jpeg' || 'png' || 'tiff' || 'gif'): case 'jpg':
case 'jpeg':
case 'png':
case 'tiff':
case 'gif':
mediaType = 'image'; mediaType = 'image';
break; break;
case ('mp4'): case 'mp4':
mediaType = 'video'; mediaType = 'video';
break; break;
default: default:
@ -135,8 +139,8 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
height={'400px'} height={'400px'}
imageFit={ImageFit.cover} imageFit={ImageFit.cover}
/> />
<div style={{ background: 'rgba(0, 0, 0, 0.3)',overflow:'hidden', fontSize: FontSizes.size16, top:0, transition: '.7s ease', textAlign: 'left', width: '200px', height: '350px', position: 'absolute', color: '#ffffff', padding: '25px' }}> <div style={{ background: 'rgba(0, 0, 0, 0.3)', overflow: 'hidden', fontSize: FontSizes.size16, top: 0, transition: '.7s ease', textAlign: 'left', width: '200px', height: '350px', position: 'absolute', color: '#ffffff', padding: '25px' }}>
<h2 style={{fontSize: FontSizes.size20, textTransform: 'uppercase', color: 'white' }}>{galleryImage.caption}</h2> <h2 style={{ fontSize: FontSizes.size20, textTransform: 'uppercase', color: 'white' }}>{galleryImage.caption}</h2>
<p>{galleryImage.description}</p> <p>{galleryImage.description}</p>
</div> </div>
@ -216,9 +220,9 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
<Label style={{ width: '250px', margin: 'auto', fontSize: FontSizes.size20 }}>No images in the library</Label> <Label style={{ width: '250px', margin: 'auto', fontSize: FontSizes.size20 }}>No images in the library</Label>
</div> </div>
: :
<div style={{ width: '100%', height: '100%'}}> <div style={{ width: '100%', height: '100%' }}>
<div style={{ width: '100%'}}> <div style={{ width: '100%' }}>
<Slider <Slider
{...sliderSettings} {...sliderSettings}
autoplay={true} autoplay={true}
@ -233,7 +237,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
</div> </div>
{ {
this.state.loadingImage && 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 }}></Spinner>
} }
</div> </div>
} }

3
samples/react-carousel/tsconfig.json
View File

@ -29,7 +29,8 @@
] ]
}, },
"include": [ "include": [
"src/**/*.ts" "src/**/*.ts",
"src/**/*.tsx"
], ],
"exclude": [ "exclude": [
"node_modules", "node_modules",