Merge pull request #2647 from AJIXuMuK/page-sections-nav-1-14

update Page Sections Navigation to 1.14.0
This commit is contained in:
Hugo Bernier 2022-06-04 08:22:01 -07:00 committed by GitHub
commit 540e68c9aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 15377 additions and 10755 deletions

View File

@ -1,7 +1,7 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.8.0",
"image": "docker.io/m365pnp/spfx:1.8.0",
"name": "SPFx 1.14.0",
"image": "docker.io/m365pnp/spfx:1.14.0",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
@ -12,8 +12,7 @@
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
4321,
35729,
5432
35729
],
"portsAttributes": {
"4321": {
@ -22,11 +21,12 @@
"onAutoForward": "silent",
"requireLocalPort": true
},
"5432": {
"protocol": "https",
"label": "Workbench",
"onAutoForward": "silent"
},
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
// "onAutoForward": "silent"
// },
"35729": {
"protocol": "https",
"label": "LiveReload",
@ -36,4 +36,4 @@
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}
}

View File

@ -7,9 +7,11 @@ echo
echo -e "\e[1;94mGenerating dev certificate\e[0m"
gulp trust-dev-cert
# Convert the generated PEM certificate to a CER certificate
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem
# Copy the PEM ecrtificate for non-Windows hosts
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
## add *.cer to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.cer' ./.gitignore

View File

@ -8,6 +8,7 @@ node_modules
# Build generated files
dist
release
lib
solution
temp

View File

@ -0,0 +1,16 @@
!dist
config
gulpfile.js
release
src
temp
tsconfig.json
tslint.json
*.log
.yo-rc.json
.vscode

View File

@ -2,10 +2,10 @@
"@microsoft/generator-sharepoint": {
"isCreatingSolution": false,
"environment": "spo",
"version": "1.7.1",
"version": "1.14.0",
"libraryName": "page-sections-navigation",
"libraryId": "bf7b299c-3bac-47cc-9f44-43eb180335d8",
"packageManager": "npm",
"componentType": "webpart"
}
}
}

View File

@ -4,15 +4,14 @@ Sample web parts allowing to add sections navigation to the SharePoint page.
![Navigation configuration](./assets/page-nav.gif)
## Compatibility
![SPFx 1.8](https://img.shields.io/badge/SPFx-1.8.0-green.svg)
![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg)
![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14-green.svg)
![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
@ -33,24 +32,25 @@ Version|Date|Comments
-------|----|--------
1.0|February 27, 2019|Initial release
1.1|March 22, 2019| Update to SPFx 1.8, additional theme, comments
1.2|April 25, 2022 | Update to SPFx 1.14.0
## Minimal Path to Awesome
* clone this repo
* move to right folder
* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-page-sections-navigation) then unzip it)
* From your command line, change your current directory to the directory containing this sample (`react-page-sections-navigation`, located under `samples`)
* in the command line run:
* `npm install`
* `gulp bundle --ship`
* `gulp package-solution --ship`
* from the _sharepoint/solution_ folder, deploy the .sppkg file to the App catalog in your tenant
* from the `sharepoint/solution` folder, deploy the `.sppkg` file to the App catalog in your tenant
* in the site where you want to test this solution
* add the app named _page-sections-navigation-client-side-solution_
* add the app named `page-sections-navigation-client-side-solution`
* edit a page
* add _Page Sections Navigation_ web part
* add as much _Page Sections Navigation Anchor_ web parts as you want - each anchor adds an item to the navigation
* add **Page Sections Navigation** web part
* add as much **Page Sections Navigation Anchor** web parts as you want - each anchor adds an item to the navigation
* configure web parts
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
## Features
@ -58,7 +58,8 @@ This sample illustrates how to use SharePoint Framework Dynamic Data features to
It also can be used as ready-to-go solution to add page sections navigation to SharePoint pages.
## Custom CSS
The web parts in the sample allow to use custom CSS to override the styles. You can set _Custom CSS URL_ property of *Page Sections Navigation* web part and include css classes for both Navigation and Anchor in referenced file.
The web parts in the sample allow to use custom CSS to override the styles. You can set **Custom CSS URL** property of **Page Sections Navigation** web part and include css classes for both Navigation and Anchor in referenced file.
Please, refer [custom css sample](./assets/psn-custom.css) for the CSS sample.
## Help
@ -77,9 +78,8 @@ For questions regarding this sample, [create a new question](https://github.com/
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%3Aenhancement%2Csample%3A%20react-page-sections-navigation&template=suggestion.yml&sample=react-page-sections-navigation&authors=@AJIXuMuK&title=react-page-sections-navigation%20-%20).
## 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.**
**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.**
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-page-sections-navigation" />

View File

@ -9,7 +9,7 @@
"Sample web parts allowing to add sections navigation to the SharePoint page."
],
"creationDateTime": "2019-03-22",
"updateDateTime": "2019-03-22",
"updateDateTime": "2022-04-25",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.8.0"
"value": "1.14.0"
},
{
"key": "SPFX-FULLPAGEAPP",

View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

View File

@ -1,7 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"workingDir": "./release/assets/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "page-sections-navigation",
"accessKey": "<!-- ACCESS KEY -->"
}
}

View File

@ -3,9 +3,35 @@
"solution": {
"name": "page-sections-navigation-client-side-solution",
"id": "bf7b299c-3bac-47cc-9f44-43eb180335d8",
"version": "1.0.0.4",
"version": "1.2.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
"skipFeatureDeployment": true,
"developer": {
"name": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": "",
"mpnId": "Undefined-1.14.0"
},
"metadata": {
"shortDescription": {
"default": "page-sections-navigation description"
},
"longDescription": {
"default": "page-sections-navigation description"
},
"screenshotPaths": [],
"videoUrl": "",
"categories": []
},
"features": [
{
"title": "page-sections-navigation Feature",
"description": "The feature that activates elements of the page-sections-navigation solution.",
"id": "50df5ee0-812b-4221-8650-e4d769f2f755",
"version": "1.2.0.0"
}
]
},
"paths": {
"zippedPackage": "solution/page-sections-navigation.sppkg"

View File

@ -2,9 +2,5 @@
"$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/"
}
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
}

View File

@ -4,4 +4,13 @@ const gulp = require('gulp');
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(gulp);

File diff suppressed because it is too large Load Diff

View File

@ -1,41 +1,39 @@
{
"name": "page-sections-navigation",
"version": "0.0.1",
"version": "1.2.0",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"engines": "undefined",
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.8.0",
"@microsoft/sp-lodash-subset": "1.8.0",
"@microsoft/sp-office-ui-fabric-core": "1.8.0",
"@microsoft/sp-webpart-base": "1.8.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1",
"react": "16.3.2",
"react-dom": "16.3.2",
"@microsoft/sp-core-library": "1.14.0",
"@microsoft/sp-lodash-subset": "1.14.0",
"@microsoft/sp-office-ui-fabric-core": "1.14.0",
"@microsoft/sp-property-pane": "1.14.0",
"@microsoft/sp-webpart-base": "1.14.0",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"scrollparent": "^2.0.1",
"smoothscroll-polyfill": "^0.4.3"
},
"resolutions": {
"@types/react": "16.4.2"
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.8.0",
"@microsoft/sp-tslint-rules": "1.8.0",
"@microsoft/sp-module-interfaces": "1.8.0",
"@microsoft/sp-webpart-workbench": "1.8.0",
"@microsoft/rush-stack-compiler-3.3": "0.1.7",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"@microsoft/sp-build-web": "1.14.0",
"@microsoft/sp-module-interfaces": "1.14.0",
"@microsoft/sp-tslint-rules": "1.14.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"gulp": "4.0.2"
}
}

View File

@ -13,6 +13,7 @@
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportsFullBleed": true,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

View File

@ -1,14 +1,14 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version, DisplayMode } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneDropdown,
PropertyPaneChoiceGroup,
PropertyPaneCheckbox,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
} from '@microsoft/sp-property-pane';
//import { SPComponentLoader } from '@microsoft/sp-loader';
import * as strings from 'PageSectionsNavigationStrings';
import { PageSectionsNavigation, IPageSectionsNavigationProps } from './components/PageSectionsNavigation';
@ -120,9 +120,9 @@ export default class PageSectionsNavigationWebPart extends BaseClientSideWebPart
* Manual handling of changed properties.
* If position has been changed we need to notify subscribers
* If custom css has been changed we need to add new CSS to the page
* @param propertyPath
* @param oldValue
* @param newValue
* @param propertyPath
* @param oldValue
* @param newValue
*/
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any) {
if (propertyPath === 'position') {

View File

@ -1,10 +1,10 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~office-ui-fabric-react/dist/sass/References.scss';
.psnLayer {
position: sticky;
top: 0;
z-index: 500;
.pageSectionsNavigation {
border-bottom: 1px solid;
border-bottom-color: "[theme:neutralLighter, default: #f4f4f4]";
@ -16,13 +16,13 @@
padding-inline-start: 40px;
padding-inline-end: 40px;
margin: 0;
.navItem {
margin-right: 20px;
display: flex;
align-items: center;
height: 100%;
.navItemLink {
cursor: pointer;
min-width: 20px;
@ -70,4 +70,4 @@
}
}
}
}
}

View File

@ -94,12 +94,12 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
const navItems: JSX.Element[] = this.props.anchors.map((anchor) => {
return <li className={css(styles.navItem, 'psn-navItem')}>
<a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={this._onClick.bind(this, anchor)}>{anchor.title}</a>
<a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={() => { this._onClick(anchor); }}>{anchor.title}</a>
</li>;
});
if (homeItem) {
navItems.unshift(<li className={css(styles.navItem, 'psn-navItem')}>
<a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={this._onHomeClick.bind(this)}>{homeItem}</a>
<a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={this._onHomeClick}>{homeItem}</a>
</li>);
}
@ -128,7 +128,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
);
}
private _onHomeClick() {
private _onHomeClick = () => {
// home click
if (!this._scrollableParent) {
this._initScrollParent();
@ -139,7 +139,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
});
}
private _onClick(anchor: IAnchorItem, index: number) {
private _onClick = (anchor: IAnchorItem) => {
// click on one of anchor's nav items
if (anchor.domElement) {
@ -154,7 +154,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
* creates layer element to host the navigation outside of normal DOM hierarchy
* @param position - current position value
*/
private _getLayerElement(position?: NavPosition): HTMLElement | undefined {
private _getLayerElement = (position?: NavPosition): HTMLElement | undefined => {
const host = this._getHost(position);
if (host !== this._host) {
@ -180,7 +180,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
return this._layerElement;
}
private _removeLayerElement(): void {
private _removeLayerElement = (): void => {
if (this._layerElement) {
const parentNode = this._layerElement.parentNode;
@ -195,7 +195,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
* gets host DOM element based on position property
* @param position - current position value
*/
private _getHost(position?: NavPosition): Node | undefined {
private _getHost = (position?: NavPosition): Node | undefined => {
const navPos = position || this.props.position;
@ -203,7 +203,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
if (!doc) {
return undefined;
}
let hostNode: Node;
if (navPos === 'section') {
@ -216,7 +216,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
return hostNode;
}
private _initScrollParent() {
private _initScrollParent = () => {
if (this._sectionHostSpanRef.current) {
this._scrollableParent = Scrollparent(this._sectionHostSpanRef.current);
}

View File

@ -13,6 +13,7 @@
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportsFullBleed": true,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

View File

@ -1,11 +1,11 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneCheckbox
} from '@microsoft/sp-webpart-base';
} from '@microsoft/sp-property-pane';
import * as strings from 'PageSectionsNavigationStrings';
import {

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 933 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 933 B

View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
@ -11,25 +11,26 @@
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
"es2015.collection",
"es2015.promise"
]
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",
"lib"
]
"exclude": []
}

View File

@ -1,5 +1,5 @@
{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
@ -17,7 +17,6 @@
"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,
@ -27,4 +26,4 @@
"variable-name": false,
"whitespace": false
}
}
}