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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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 -->"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -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'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Set the images, links and details of the Hero items",
|
||||
"BasicGroupName": "Hero Settings",
|
||||
"TitleFieldLabel": "Webpart Title"
|
||||
}
|
||||
});
|
||||
|
|
@ -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 |
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
@ -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…
Reference in New Issue