mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-18 19:07:12 +00:00
Merge pull request #1952 from omarelanis/master
This commit is contained in:
Hugo Bernier
GitHub
commit
8886c54222
@ -0,0 +1,104 @@
|
|||||||
|
{
|
||||||
|
"bundles": {
|
||||||
|
"greetings-webpart-web-part": {
|
||||||
|
"dependencies": [
|
||||||
|
{
|
||||||
|
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||||
|
"componentName": "@microsoft/sp-property-pane",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
|
||||||
|
"componentName": "@microsoft/sp-loader",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
|
||||||
|
"componentName": "@ms/sp-telemetry",
|
||||||
|
"componentVersion": "0.19.2",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
|
||||||
|
"componentName": "@microsoft/sp-dynamic-data",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||||||
|
"componentName": "@microsoft/sp-lodash-subset",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||||
|
"componentName": "@microsoft/sp-core-library",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
|
||||||
|
"componentName": "tslib",
|
||||||
|
"componentVersion": "1.10.0",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
|
||||||
|
"componentName": "@ms/odsp-core-bundle",
|
||||||
|
"componentVersion": "1.1.13",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
|
||||||
|
"componentName": "@microsoft/sp-diagnostics",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
|
||||||
|
"componentName": "@microsoft/sp-page-context",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
|
||||||
|
"componentName": "@microsoft/load-themed-styles",
|
||||||
|
"componentVersion": "0.1.2",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
|
||||||
|
"componentName": "@microsoft/sp-http",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||||
|
"componentName": "react",
|
||||||
|
"componentVersion": "16.9.0",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||||
|
"componentName": "react-dom",
|
||||||
|
"componentVersion": "16.9.0",
|
||||||
|
"isDirectDependency": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||||
|
"componentName": "@microsoft/sp-webpart-base",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||||||
|
"componentName": "@microsoft/sp-component-base",
|
||||||
|
"componentVersion": "1.12.1",
|
||||||
|
"isDirectDependency": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
{
|
||||||
|
"id": "795ddcba-0fda-4d13-8bfe-8c5d4222ef59",
|
||||||
|
"alias": "GreetingsWebpartWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
"supportedHosts": [
|
||||||
|
"SharePointWebPart"
|
||||||
|
],
|
||||||
|
"preconfiguredEntries": [
|
||||||
|
{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||||
|
"group": {
|
||||||
|
"default": "Other"
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"default": "Greetings Webpart"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"default": "Greetings Webpart description"
|
||||||
|
},
|
||||||
|
"officeFabricIconFontName": "Page",
|
||||||
|
"properties": {
|
||||||
|
"description": "Greetings Webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"loaderConfig": {
|
||||||
|
"internalModuleBaseUrls": [
|
||||||
|
"<!-- PATH TO CDN -->"
|
||||||
|
],
|
||||||
|
"entryModuleId": "greetings-webpart-web-part",
|
||||||
|
"scriptResources": {
|
||||||
|
"greetings-webpart-web-part": {
|
||||||
|
"type": "path",
|
||||||
|
"path": "greetings-webpart-web-part.js"
|
||||||
|
},
|
||||||
|
"sp-pnp-js": {
|
||||||
|
"type": "path",
|
||||||
|
"path": "https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js"
|
||||||
|
},
|
||||||
|
"@microsoft/sp-property-pane": {
|
||||||
|
"type": "component",
|
||||||
|
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||||
|
"version": "1.12.1"
|
||||||
|
},
|
||||||
|
"@microsoft/sp-core-library": {
|
||||||
|
"type": "component",
|
||||||
|
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||||
|
"version": "1.12.1"
|
||||||
|
},
|
||||||
|
"GreetingsWebpartWebPartStrings": {
|
||||||
|
"type": "path",
|
||||||
|
"path": "GreetingsWebpartWebPartStrings_en-us.js"
|
||||||
|
},
|
||||||
|
"angular": {
|
||||||
|
"type": "path",
|
||||||
|
"path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js",
|
||||||
|
"globalName": "angular"
|
||||||
|
},
|
||||||
|
"@microsoft/sp-webpart-base": {
|
||||||
|
"type": "component",
|
||||||
|
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||||
|
"version": "1.12.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
33
samples/react-hero-webpart/.gitignore
vendored
Normal file
33
samples/react-hero-webpart/.gitignore
vendored
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
release
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
12
samples/react-hero-webpart/.yo-rc.json
Normal file
12
samples/react-hero-webpart/.yo-rc.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.12.1",
|
||||||
|
"libraryName": "hero-webpart",
|
||||||
|
"libraryId": "5efc0426-3e59-4fc7-b638-73eb77aaf788",
|
||||||
|
"environment": "spo",
|
||||||
|
"packageManager": "npm",
|
||||||
|
"isCreatingSolution": true,
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"componentType": "webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
86
samples/react-hero-webpart/README.md
Normal file
86
samples/react-hero-webpart/README.md
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
# Hero web part
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Compatibility
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
- [SharePoint Framework](https://aka.ms/spfx)
|
||||||
|
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
|
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||||
|
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
hero-webpart | [Omar El-Anis](https://github.com/omarelanis) @ SP Bytes www.spbytes.com
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.1|March 10, 2021|Update comment
|
||||||
|
1.0|January 29, 2021|Initial release
|
||||||
|
|
||||||
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
|
- Clone this repository
|
||||||
|
- Ensure that you are at the solution folder
|
||||||
|
- in the command-line run:
|
||||||
|
- **npm install**
|
||||||
|
- **gulp serve**
|
||||||
|
|
||||||
|
> Include any additional steps as needed.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
Description of the extension that expands upon high-level summary above.
|
||||||
|
|
||||||
|
This extension illustrates the following concepts:
|
||||||
|
|
||||||
|
- Store data (images) in a collection from property panel using the file picker module
|
||||||
|
- Load the data into a paginated list
|
||||||
|
- Display the data in a Hero style format
|
||||||
|
|
||||||
|
> Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.
|
||||||
|
|
||||||
|
> Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||||
|
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||||
|
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||||
|
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||||
|
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||||
|
|
||||||
|
## Help
|
||||||
|
|
||||||
|
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||||
|
|
||||||
|
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-hero-webpart&authors=@omarelanis&title=react-hero-webpart%20-%20).
|
||||||
|
|
||||||
|
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-hero-webpart&authors=@omarelanis&title=react-hero-webpart%20-%20).
|
||||||
|
|
||||||
|
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-hero-webpart&authors=@omarelanis&title=react-hero-webpart%20-%20).
|
||||||
|
|
||||||
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-hero-webpart" />
|
||||||
BIN
samples/react-hero-webpart/assets/Hero-Webpart.gif
Normal file
BIN
samples/react-hero-webpart/assets/Hero-Webpart.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
50
samples/react-hero-webpart/assets/sample.json
Normal file
50
samples/react-hero-webpart/assets/sample.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "pnp-sp-dev-spfx-web-parts-react-hero-webpart",
|
||||||
|
"source": "pnp",
|
||||||
|
"title": "Hero Web Part",
|
||||||
|
"shortDescription": "This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control ",
|
||||||
|
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart",
|
||||||
|
"longDescription": [
|
||||||
|
"This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control "
|
||||||
|
],
|
||||||
|
"creationDateTime": "2021-04-02",
|
||||||
|
"updateDateTime": "2021-04-02",
|
||||||
|
"products": [
|
||||||
|
"SharePoint",
|
||||||
|
"Office"
|
||||||
|
],
|
||||||
|
"metadata": [
|
||||||
|
{
|
||||||
|
"key": "CLIENT-SIDE-DEV",
|
||||||
|
"value": "React"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "SPFX-VERSION",
|
||||||
|
"value": "1.12.1"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"thumbnails": [
|
||||||
|
{
|
||||||
|
"type": "image",
|
||||||
|
"order": 100,
|
||||||
|
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-hero-webpart/assets/Hero-Webpart.gif",
|
||||||
|
"alt": "Preview"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"gitHubAccount": "omarelanis",
|
||||||
|
"pictureUrl": "https://github.com/omarelanis.png",
|
||||||
|
"name": "Omar El-Anis"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"name": "Build your first SharePoint client-side web part",
|
||||||
|
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||||
|
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
20
samples/react-hero-webpart/config/config.json
Normal file
20
samples/react-hero-webpart/config/config.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"hero-webpart-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/heroWebpart/HeroWebpartWebPart.js",
|
||||||
|
"manifest": "./src/webparts/heroWebpart/HeroWebpartWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {},
|
||||||
|
"localizedResources": {
|
||||||
|
"HeroWebpartWebPartStrings": "lib/webparts/heroWebpart/loc/{locale}.js",
|
||||||
|
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
|
||||||
|
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
4
samples/react-hero-webpart/config/copy-assets.json
Normal file
4
samples/react-hero-webpart/config/copy-assets.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "./release/assets/"
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./release/assets/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "hero-webpart",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
21
samples/react-hero-webpart/config/package-solution.json
Normal file
21
samples/react-hero-webpart/config/package-solution.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "Hero Layout Webpart",
|
||||||
|
"id": "5efc0426-3e59-4fc7-b638-73eb77aaf788",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"skipFeatureDeployment": true,
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"developer": {
|
||||||
|
"name": "Omar El-Anis",
|
||||||
|
"websiteUrl": "www.spbytes.com",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"mpnId": "6238832"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/hero-webpart.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
10
samples/react-hero-webpart/config/serve.json
Normal file
10
samples/react-hero-webpart/config/serve.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
4
samples/react-hero-webpart/config/write-manifests.json
Normal file
4
samples/react-hero-webpart/config/write-manifests.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
16
samples/react-hero-webpart/gulpfile.js
vendored
Normal file
16
samples/react-hero-webpart/gulpfile.js
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
|
||||||
|
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
|
|
||||||
|
var getTasks = build.rig.getTasks;
|
||||||
|
build.rig.getTasks = function () {
|
||||||
|
var result = getTasks.call(build.rig);
|
||||||
|
|
||||||
|
result.set('serve', result.get('serve-deprecated'));
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
build.initialize(require('gulp'));
|
||||||
22918
samples/react-hero-webpart/package-lock.json
generated
Normal file
22918
samples/react-hero-webpart/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
samples/react-hero-webpart/package.json
Normal file
37
samples/react-hero-webpart/package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "hero-webpart",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "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",
|
||||||
|
"@pnp/sp": "^2.6.0",
|
||||||
|
"@pnp/spfx-controls-react": "^3.2.1",
|
||||||
|
"@pnp/spfx-property-controls": "3.2.0",
|
||||||
|
"node-sass": "^6.0.1",
|
||||||
|
"office-ui-fabric-react": "7.156.0",
|
||||||
|
"react": "16.9.0",
|
||||||
|
"react-dom": "16.9.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "16.9.36",
|
||||||
|
"@types/react-dom": "16.9.8",
|
||||||
|
"@microsoft/sp-build-web": "1.12.1",
|
||||||
|
"@microsoft/sp-tslint-rules": "1.12.1",
|
||||||
|
"@microsoft/sp-module-interfaces": "1.12.1",
|
||||||
|
"@microsoft/sp-webpart-workbench": "1.12.1",
|
||||||
|
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
|
||||||
|
"gulp": "~4.0.2",
|
||||||
|
"ajv": "~5.2.2",
|
||||||
|
"@types/webpack-env": "1.13.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
samples/react-hero-webpart/src/index.ts
Normal file
1
samples/react-hero-webpart/src/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "71d58a4f-1896-46aa-94a5-dbef33d14166",
|
||||||
|
"alias": "HeroWebpartWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
|
||||||
|
// The "*" signifies that the version should be taken from the package.json
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||||
|
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||||
|
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
"supportedHosts": ["SharePointWebPart"],
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "Hero Layout Webpart" },
|
||||||
|
"description": { "default": "Provides a customisable Hero webpart that displays 5 images in a standlone or carousel view" },
|
||||||
|
"officeFabricIconFontName": "Page",
|
||||||
|
"properties": {
|
||||||
|
"description": "Hero Layout Webpart",
|
||||||
|
"isPaginated":false,
|
||||||
|
"hideFirstPageJump":false,
|
||||||
|
"hideLastPageJump":false,
|
||||||
|
"showAllHero":false
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
@ -0,0 +1,68 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { IHeroLayoutProps } from "./IHeroLayoutProps";
|
||||||
|
import styles from './HeroWebpart.module.scss';
|
||||||
|
|
||||||
|
// Used to render list grid
|
||||||
|
import { List } from 'office-ui-fabric-react/lib/List';
|
||||||
|
import { IRectangle, ISize } from 'office-ui-fabric-react/lib/Utilities';
|
||||||
|
|
||||||
|
|
||||||
|
export default class Hero extends React.Component<IHeroLayoutProps> {
|
||||||
|
|
||||||
|
|
||||||
|
public render(): React.ReactElement<IHeroLayoutProps> {
|
||||||
|
const items = this.props.items;
|
||||||
|
var arr = [];
|
||||||
|
arr.push(items);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div role="group">
|
||||||
|
<List
|
||||||
|
role="presentation"
|
||||||
|
className={styles.heroItem}
|
||||||
|
items={arr}
|
||||||
|
getItemCountForPage={this._getItemCountForPage}
|
||||||
|
onRenderCell={this._onRenderHeroItem}
|
||||||
|
{...this.props.listProps}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _onRenderHeroItem = (items: any, index: number | undefined): JSX.Element => {
|
||||||
|
const thumbRend = "https://media.akamai.odsp.cdn.office.net/uksouth1-mediap.svc.ms/transform/thumbnail?provider=url&inputFormat=jpg&docid=";
|
||||||
|
const secondItems = items.slice(1,5);
|
||||||
|
const firstItem = items.slice(0,1)[0];
|
||||||
|
var firstItemUrl = firstItem.filePicker[0].Hyperlink ? firstItem.filePicker[0].Hyperlink : "#";
|
||||||
|
var smalltemUrl;
|
||||||
|
return(
|
||||||
|
<div className={styles.heroItem}>
|
||||||
|
<div className={styles["flexcontainer"]}>
|
||||||
|
<div className={styles.focusItem}>
|
||||||
|
<div className={styles["flexitems"]}>
|
||||||
|
<a href={firstItemUrl}>
|
||||||
|
<img src={firstItem.filePicker[0].fileNameWithoutExtension=='blankEntry154873'?firstItem.filePicker[0].fileAbsoluteUrl:thumbRend+firstItem.filePicker[0].fileAbsoluteUrl+"&w=960"}/>
|
||||||
|
<div className={styles.description}><div className={styles.heroTitle}>{firstItem.Title}</div>{firstItem.Description ? firstItem.Description.length>150 ? firstItem.Description.substring(0, 150)+".." : firstItem.Description : "Description coming soon"}</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles["flexcontainer"]}>
|
||||||
|
{secondItems.map((item) => (
|
||||||
|
smalltemUrl= item.filePicker[0].Hyperlink ? item.filePicker[0].Hyperlink : "#",
|
||||||
|
<div className={styles["flexitems"]}>
|
||||||
|
<a href={smalltemUrl}>
|
||||||
|
<img src={item.filePicker[0].fileNameWithoutExtension=='blankEntry154873'?item.filePicker[0].fileAbsoluteUrl:thumbRend+item.filePicker[0].fileAbsoluteUrl+"&w=960"}/>
|
||||||
|
<div className={styles.description}><div className={styles.heroTitle}>{item.Title}</div>{item.Description ? item.Description.length>150 ? item.Description.substring(0, 150)+".." : item.Description : "Description coming soon"}</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,294 @@
|
|||||||
|
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||||
|
|
||||||
|
.heroWebpart {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include ms-Grid-row;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
background-color: $ms-color-themeDark;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-lg10;
|
||||||
|
@include ms-xl8;
|
||||||
|
@include ms-xlPush2;
|
||||||
|
@include ms-lgPush1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleHead {
|
||||||
|
@include ms-font-xl;
|
||||||
|
@include ms-fontColor-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
border-color: $ms-color-themePrimary;
|
||||||
|
color: $ms-color-white;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
font-weight: $ms-font-weight-regular;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: $ms-font-weight-semibold;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContent{
|
||||||
|
color:"[theme: themeSecondary, default: #0078d7]";
|
||||||
|
min-height:600px;
|
||||||
|
height:600px;
|
||||||
|
}
|
||||||
|
.carouselButtonsContainer{
|
||||||
|
color:"[theme: themeSecondary, default: #0078d7]";
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContentOne, .carouselContentTwo, .carouselContentThree, .carouselContentFour{
|
||||||
|
color:"[theme: themeSecondary, default: #0078d7]";
|
||||||
|
min-height:530px;
|
||||||
|
height:530px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContentOne{
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
width: 100%!important;
|
||||||
|
padding:0%
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell div) {
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContentTwo {
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
width: 46%!important;
|
||||||
|
padding:2%
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell div) {
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContentThree{
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
width: 29%!important;
|
||||||
|
padding:2%
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell div) {
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselContentFour{
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
width: 24%!important;
|
||||||
|
padding:1%
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell div) {
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle{
|
||||||
|
@include ms-font-xl;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroItem {
|
||||||
|
flex: auto;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.flexcontainer .flexitems:hover .description {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexcontainer .flexitems .description{
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
color: #f1f1f1;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
transition: .5s ease;
|
||||||
|
opacity: 0;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 20px 0px;;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexcontainer .flexitems{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexcontainer:nth-child(1){
|
||||||
|
flex: auto;
|
||||||
|
flex-basis: 40%;
|
||||||
|
flex-shrink: 1;
|
||||||
|
padding-right:5px;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
|
||||||
|
*{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
height: fit-content;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focusItem {
|
||||||
|
overflow: hidden;
|
||||||
|
.flexitems {
|
||||||
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-basis: auto;
|
||||||
|
align-self: auto;
|
||||||
|
order: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
img{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexcontainer:nth-child(2) {
|
||||||
|
flex: auto;
|
||||||
|
flex-basis: 60%;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
img{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
width: calc(100% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexitems{
|
||||||
|
padding-right:5px;
|
||||||
|
flex-basis: calc(50% - 5px);
|
||||||
|
flex-shrink: 1;
|
||||||
|
align-self: auto;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 768px) {
|
||||||
|
.heroItem {
|
||||||
|
flex-direction: column;
|
||||||
|
.flexcontainer:nth-child(1){
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
.flexcontainer:nth-child(2) {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.carouselContentOne, .carouselContentTwo, .carouselContentThree, .carouselContentFour{
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
width: 100%!important;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell img){
|
||||||
|
width: 100%!important;
|
||||||
|
height: 100px!important;
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell .ms-Image){
|
||||||
|
width: 100%!important;
|
||||||
|
height: 100px!important;
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell div){
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell div){
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell .ms-DocumentCardLocation){
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
.subGroup{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
.subGroup ~ .subGroup{
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
.subGroup ~ .subGroup a{
|
||||||
|
display:inline-block;
|
||||||
|
width: 48%!important;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell){
|
||||||
|
.subGroup ~ .subGroup a *{
|
||||||
|
font-size:8px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.ms-List-page .ms-List-cell .ms-DocumentCardDetails .ms-DocumentCardTitle:nth-child(2)){
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import styles from './HeroWebpart.module.scss';
|
||||||
|
import { IHeroWebpartProps } from './IHeroWebpartProps';
|
||||||
|
import {IHeroState} from './IHeroWebpartState';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import { Pagination } from "@pnp/spfx-controls-react/lib/pagination";
|
||||||
|
import { PnPClientStorage } from "@pnp/common";
|
||||||
|
import { IHeroLayoutProps } from './IHeroLayoutProps';
|
||||||
|
import Hero from './HeroLayout';
|
||||||
|
import { sp } from '@pnp/sp';
|
||||||
|
import { Stack, IStackProps, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
|
||||||
|
import { Label } from 'office-ui-fabric-react/lib/Label';
|
||||||
|
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
|
||||||
|
|
||||||
|
const stackTokens: IStackTokens = { childrenGap: 20 };
|
||||||
|
|
||||||
|
const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };
|
||||||
|
|
||||||
|
const tokens = {
|
||||||
|
sectionStack: {
|
||||||
|
childrenGap: 10,
|
||||||
|
},
|
||||||
|
spinnerStack: {
|
||||||
|
childrenGap: 20,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const storage = new PnPClientStorage();
|
||||||
|
|
||||||
|
export default class HeroWebpart extends React.Component<IHeroWebpartProps, IHeroState> {
|
||||||
|
|
||||||
|
constructor(props: IHeroWebpartProps) {
|
||||||
|
super(props);
|
||||||
|
sp.setup({
|
||||||
|
spfxContext: this.props.spfxContext
|
||||||
|
});
|
||||||
|
this.state = {
|
||||||
|
items: this.props.items || [],
|
||||||
|
itemsPaginated: this.props.items.length>0?this.props.items.slice(0,5):[],
|
||||||
|
currentPage: 1,
|
||||||
|
totalPages: this.props.items.length>0?Math.ceil(this.props.items.length / 5):1,
|
||||||
|
pageLimit: this.props.pageLimit
|
||||||
|
};
|
||||||
|
this._getItems();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getItems(){
|
||||||
|
let empty=[];
|
||||||
|
if(this.state.items.length>0){
|
||||||
|
this.setState({itemsPaginated:this.state.items.slice(0,5)}),this.setState({totalPages:Math.ceil(this.state.items.length / 5)});
|
||||||
|
}else{
|
||||||
|
empty=this.emptyHeroItem();this.setState({items:empty}),this.setState({itemsPaginated:empty});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getPage(page: number){
|
||||||
|
this.setState({currentPage: page});
|
||||||
|
var itemsSlice:any[], totalPages:number;
|
||||||
|
itemsSlice = this.state.items.slice((page - 1) * this.state.pageLimit, ((page - 1) * this.state.pageLimit) + this.state.pageLimit);
|
||||||
|
itemsSlice.length==0 ? this.setState({itemsPaginated: this.emptyHeroItem()}) : this.setState({itemsPaginated: itemsSlice},this.render);
|
||||||
|
}
|
||||||
|
|
||||||
|
private emptyHeroItem(){
|
||||||
|
var b=[];
|
||||||
|
for (let i = 0; i < this.state.pageLimit; i++) {
|
||||||
|
b.push({
|
||||||
|
Title: "Coming soon!",
|
||||||
|
description: "We don't have anything here yet, we're always open to suggestions!",
|
||||||
|
Hyperlink:"",
|
||||||
|
filePicker:[{fileAbsoluteUrl:require('../assets/blankEntry154873.jpg'),fileName:'blankEntry154873.jpg',fileNameWithoutExtension:'blankEntry154873'}]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): React.ReactElement<IHeroWebpartProps> {
|
||||||
|
if(this.state.items.length<=0){
|
||||||
|
this._getItems();
|
||||||
|
return(
|
||||||
|
<Stack {...rowProps} tokens={tokens.spinnerStack}>
|
||||||
|
<Label>Loading</Label>
|
||||||
|
<Spinner size={SpinnerSize.large} />
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
var itemList:any[];
|
||||||
|
this.props.showAllHero ? itemList = this.state.itemsPaginated : itemList = this.state.items;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.heroWebpart}>
|
||||||
|
<div className={styles.titleHead}>
|
||||||
|
{this.props.title}
|
||||||
|
</div>
|
||||||
|
<Hero items={this.props.showAllHero ? this.state.itemsPaginated : this.state.items.slice(0, 5)}/>
|
||||||
|
{this.props.showAllHero ?
|
||||||
|
<Pagination
|
||||||
|
currentPage={this.state.currentPage}
|
||||||
|
totalPages={this.state.totalPages}
|
||||||
|
onChange={(page) => this._getPage(page)}
|
||||||
|
limiter={5} // Optional - default value 3
|
||||||
|
hideFirstPageJump={this.props.hideFirstPageJump} // Optional
|
||||||
|
hideLastPageJump={this.props.hideLastPageJump} // Optional
|
||||||
|
limiterIcon={"Emoji12"} // Optional
|
||||||
|
/> : "" }
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { IListProps } from 'office-ui-fabric-react/lib/List';
|
||||||
|
|
||||||
|
|
||||||
|
export interface IHeroLayoutProps {
|
||||||
|
items:any[];
|
||||||
|
listProps?: Partial<IListProps>;
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
|
export interface IHeroWebpartProps {
|
||||||
|
title: string;
|
||||||
|
spfxContext: WebPartContext;
|
||||||
|
isPaginated: boolean;
|
||||||
|
pageLimit: number;
|
||||||
|
hideFirstPageJump: boolean;
|
||||||
|
hideLastPageJump: boolean;
|
||||||
|
showAllHero: boolean;
|
||||||
|
items:any[];
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export interface IHeroState {
|
||||||
|
items: any[];
|
||||||
|
itemsPaginated: any[];
|
||||||
|
currentPage: number;
|
||||||
|
totalPages: number;
|
||||||
|
pageLimit: number;
|
||||||
|
}
|
||||||
7
samples/react-hero-webpart/src/webparts/heroWebpart/loc/en-us.js
vendored
Normal file
7
samples/react-hero-webpart/src/webparts/heroWebpart/loc/en-us.js
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Set the images, links and details of the Hero items",
|
||||||
|
"BasicGroupName": "Hero Settings",
|
||||||
|
"TitleFieldLabel": "Webpart Title"
|
||||||
|
}
|
||||||
|
});
|
||||||
10
samples/react-hero-webpart/src/webparts/heroWebpart/loc/mystrings.d.ts
vendored
Normal file
10
samples/react-hero-webpart/src/webparts/heroWebpart/loc/mystrings.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
declare interface IHeroWebpartWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
TitleFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'HeroWebpartWebPartStrings' {
|
||||||
|
const strings: IHeroWebpartWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
35
samples/react-hero-webpart/tsconfig.json
Normal file
35
samples/react-hero-webpart/tsconfig.json
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "lib",
|
||||||
|
"inlineSources": false,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection",
|
||||||
|
"es2015.promise"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx"
|
||||||
|
]
|
||||||
|
}
|
||||||
30
samples/react-hero-webpart/tslint.json
Normal file
30
samples/react-hero-webpart/tslint.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user