mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-27 16:36:06 +00:00
SPFX Tour sample WebPart - react-tour-pnpjs (#1082)
* Initial commit * first commit * first release * rework * load fix and styling * fix webpart select * css ReactTourJS fix * css fix * added assets * Update README.md * fix webPartData undefined on Text Webpart
This commit is contained in:
Federico
Vesa Juvonen
parent
225ecb3a16
commit
2d9b61fc4d
25
samples/react-tour-pnpjs/.editorconfig
Normal file
25
samples/react-tour-pnpjs/.editorconfig
Normal file
@ -0,0 +1,25 @@
|
||||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
32
samples/react-tour-pnpjs/.gitignore
vendored
Normal file
32
samples/react-tour-pnpjs/.gitignore
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
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
|
||||
5
samples/react-tour-pnpjs/.vscode/extensions.json
vendored
Normal file
5
samples/react-tour-pnpjs/.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"msjsdiag.debugger-for-chrome"
|
||||
]
|
||||
}
|
||||
43
samples/react-tour-pnpjs/.vscode/launch.json
vendored
Normal file
43
samples/react-tour-pnpjs/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
/**
|
||||
* Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
|
||||
* Chrome browser: https://aka.ms/spfx-debugger-extensions
|
||||
*/
|
||||
"version": "0.2.0",
|
||||
"configurations": [{
|
||||
"name": "Local workbench",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "https://localhost:4321/temp/workbench.html",
|
||||
"webRoot": "${workspaceRoot}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:///.././src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../../src/*": "${webRoot}/src/*"
|
||||
},
|
||||
"runtimeArgs": [
|
||||
"--remote-debugging-port=9222"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Hosted workbench",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
|
||||
"webRoot": "${workspaceRoot}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:///.././src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../../src/*": "${webRoot}/src/*"
|
||||
},
|
||||
"runtimeArgs": [
|
||||
"--remote-debugging-port=9222",
|
||||
"-incognito"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
13
samples/react-tour-pnpjs/.vscode/settings.json
vendored
Normal file
13
samples/react-tour-pnpjs/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// Place your settings in this file to overwrite default and user settings.
|
||||
{
|
||||
// Configure glob patterns for excluding files and folders in the file explorer.
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/bower_components": true,
|
||||
"**/coverage": true,
|
||||
"**/lib-amd": true,
|
||||
"src/**/*.scss.ts": true
|
||||
},
|
||||
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
|
||||
}
|
||||
12
samples/react-tour-pnpjs/.yo-rc.json
Normal file
12
samples/react-tour-pnpjs/.yo-rc.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.9.1",
|
||||
"libraryName": "react-tour-pnpjs",
|
||||
"libraryId": "9060fda4-14af-4588-aa3a-b746b46420d8",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
70
samples/react-tour-pnpjs/README.md
Normal file
70
samples/react-tour-pnpjs/README.md
Normal file
@ -0,0 +1,70 @@
|
||||
# react-tour-pnpjs - SharePoint modern page tutorial: SPFX Tour sample WebPart.
|
||||
|
||||
## Summary
|
||||
|
||||
A SPFx WebPart using [PnP/PnPjs](https://pnp.github.io/pnpjs/), [@pnp/spfx-property-controls](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/) and [ReactTourJS](https://reactour.js.org/).
|
||||
It allows to create a configurable tutorial/tour of a SharePoint modern page for adoption scope.
|
||||
When you start the tour, a modal will be displayed, with a description of the highlighted area, and you can go to the next step or go back, thus navigating inside the page. The user will see the descriptions and will have the opportunity to preview the advice that the publisher thought for him.
|
||||
The property pane shows dinamically all webparts in the current page, using [PnP/PnPjs](https://pnp.github.io/pnpjs/) to make easy page tour configuration.
|
||||
|
||||
## react-tour-pnpjs in action
|
||||
|
||||
|
||||
## react-tour-pnpjs tour configuration property
|
||||
|
||||
|
||||
## react-tour-pnpjs configurations
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-tour-pnpjs | [Federico Porceddu](https://www.federicoporceddu.com)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|November 23, 2019|Initial release
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* Clone this repository
|
||||
* in the command line run:
|
||||
* restore dependencies: `npm install`
|
||||
* build solution `gulp build --ship`
|
||||
* bundle solution: `gulp bundle --ship`
|
||||
* package solution: `gulp package-solution --ship`
|
||||
* locate solution at `.\sharepoint\solution\react-tour-pnpjs.sppkg`
|
||||
* upload it to your tenant app catalog
|
||||
* add `react-tour-pnpjs` app to your site
|
||||
* add `react-tour-pnpjs` webpart to your page to see it in action
|
||||
|
||||
## Features
|
||||
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* How to use [@pnp/spfx-property-controls - PropertyFieldCollectionData](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/).
|
||||
* How to extend with custom render [@pnp/spfx-property-controls - PropertyFieldCollectionData](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/).
|
||||
* How to retrieve all SPFx WebPart in the current page using [PnP/PnPjs](https://pnp.github.io/pnpjs/)
|
||||
* How to include external React Component [ReactTourJS](https://reactour.js.org/)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/react-tour-pnpjs" />
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
19
samples/react-tour-pnpjs/config/config.json
Normal file
19
samples/react-tour-pnpjs/config/config.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"tour-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/tour/TourWebPart.js",
|
||||
"manifest": "./src/webparts/tour/TourWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"TourWebPartStrings": "lib/webparts/tour/loc/{locale}.js",
|
||||
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
4
samples/react-tour-pnpjs/config/copy-assets.json
Normal file
4
samples/react-tour-pnpjs/config/copy-assets.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-tour-pnpjs",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
13
samples/react-tour-pnpjs/config/package-solution.json
Normal file
13
samples/react-tour-pnpjs/config/package-solution.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-tour-pnpjs-client-side-solution",
|
||||
"id": "9060fda4-14af-4588-aa3a-b746b46420d8",
|
||||
"version": "1.0.1.9",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-tour-pnpjs.sppkg"
|
||||
}
|
||||
}
|
||||
10
samples/react-tour-pnpjs/config/serve.json
Normal file
10
samples/react-tour-pnpjs/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-tour-pnpjs/config/write-manifests.json
Normal file
4
samples/react-tour-pnpjs/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 -->"
|
||||
}
|
||||
7
samples/react-tour-pnpjs/gulpfile.js
vendored
Normal file
7
samples/react-tour-pnpjs/gulpfile.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
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.`);
|
||||
|
||||
build.initialize(gulp);
|
||||
18692
samples/react-tour-pnpjs/package-lock.json
generated
Normal file
18692
samples/react-tour-pnpjs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
samples/react-tour-pnpjs/package.json
Normal file
51
samples/react-tour-pnpjs/package.json
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "react-tour-pnpjs",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.9.1",
|
||||
"@microsoft/sp-lodash-subset": "1.9.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
|
||||
"@microsoft/sp-webpart-base": "1.9.1",
|
||||
"@pnp/common": "^1.3.7",
|
||||
"@pnp/graph": "^1.3.7",
|
||||
"@pnp/logging": "^1.3.7",
|
||||
"@pnp/odata": "^1.3.7",
|
||||
"@pnp/sp": "^1.3.7",
|
||||
"@pnp/spfx-property-controls": "1.16.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"body-scroll-lock": "^2.6.4",
|
||||
"office-ui-fabric-react": "^6.189.2",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5",
|
||||
"reactour": "^1.15.5",
|
||||
"styled-components": "^4.4.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.16",
|
||||
"@microsoft/sp-build-web": "1.9.1",
|
||||
"@microsoft/sp-module-interfaces": "1.9.1",
|
||||
"@microsoft/sp-tslint-rules": "1.9.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.9.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/reactour": "^1.13.1",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1"
|
||||
}
|
||||
}
|
||||
1
samples/react-tour-pnpjs/src/index.ts
Normal file
1
samples/react-tour-pnpjs/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,28 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "ca659f89-c656-43a6-a0e8-d0bdba90123f",
|
||||
"alias": "TourWebPart",
|
||||
"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": "Tour - Tutorial WebPart" },
|
||||
"description": { "default": "Start page tutorial to discover all the features" },
|
||||
"officeFabricIconFontName": "HintText",
|
||||
"properties": {
|
||||
"actionValue": "Start page tour",
|
||||
"description": "Start page tutorial to discover all the features."
|
||||
}
|
||||
}]
|
||||
}
|
||||
179
samples/react-tour-pnpjs/src/webparts/tour/TourWebPart.ts
Normal file
179
samples/react-tour-pnpjs/src/webparts/tour/TourWebPart.ts
Normal file
@ -0,0 +1,179 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import * as strings from 'TourWebPartStrings';
|
||||
import Tour from './components/Tour';
|
||||
import { ITourProps } from './components/ITourProps';
|
||||
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';
|
||||
import { sp, ClientSidePage, ClientSideWebpart, IClientControlEmphasis } from '@pnp/sp';
|
||||
|
||||
|
||||
export interface ITourWebPartProps {
|
||||
actionValue: string;
|
||||
description: string;
|
||||
collectionData: any[];
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default class TourWebPart extends BaseClientSideWebPart<ITourWebPartProps> {
|
||||
|
||||
private loadIndicator: boolean = true;
|
||||
private webpartList: any[] = new Array<any[]>();
|
||||
|
||||
public onInit(): Promise<void> {
|
||||
|
||||
return super.onInit().then(_ => {
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<ITourProps> = React.createElement(
|
||||
Tour,
|
||||
{
|
||||
actionValue: this.properties.actionValue,
|
||||
description: this.properties.description,
|
||||
collectionData: this.properties.collectionData,
|
||||
}
|
||||
);
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
public async GetAllWebpart(): Promise<any[]> {
|
||||
// page file
|
||||
const file = sp.web.getFileByServerRelativePath(this.context.pageContext.site.serverRequestPath);
|
||||
|
||||
const page = await ClientSidePage.fromFile(file);
|
||||
|
||||
const wpData: any[] = [];
|
||||
|
||||
page.sections.forEach(section => {
|
||||
section.columns.forEach(column => {
|
||||
column.controls.forEach(control => {
|
||||
var wpName = {}
|
||||
var wp = {};
|
||||
if (control.data.webPartData != undefined) {
|
||||
wpName = `sec[${section.order}] col[${column.order}] - ${control.data.webPartData.title}`;
|
||||
wp = { text: wpName, key: control.data.webPartData.instanceId };
|
||||
wpData.push(wp);
|
||||
} else {
|
||||
wpName = `sec[${section.order}] col[${column.order}] - "Webpart"`;
|
||||
wp = { text: wpName, key: control.data.id };
|
||||
}
|
||||
wpData.push(wp);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
return wpData;
|
||||
}
|
||||
|
||||
protected onPropertyPaneConfigurationStart(): void {
|
||||
var self = this;
|
||||
this.GetAllWebpart().then(res => {
|
||||
self.webpartList = res;
|
||||
self.loadIndicator = false;
|
||||
self.context.propertyPane.refresh();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('actionValue', {
|
||||
label: strings.ActionValueFieldLabel
|
||||
}),
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
}),
|
||||
PropertyFieldCollectionData("collectionData", {
|
||||
key: "collectionData",
|
||||
label: "Tour steps",
|
||||
panelHeader: "Collection data panel header",
|
||||
manageBtnLabel: "Configure tour steps",
|
||||
value: this.properties.collectionData,
|
||||
fields: [
|
||||
{
|
||||
id: "WebPart",
|
||||
title: "section[x] column[y] - WebPart Title",
|
||||
type: CustomCollectionFieldType.dropdown,
|
||||
options: this.webpartList,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: "StepDescription",
|
||||
title: "Step Description",
|
||||
type: CustomCollectionFieldType.custom,
|
||||
onCustomRender: (field, value, onUpdate, item, itemId) => {
|
||||
return (
|
||||
React.createElement("div", null,
|
||||
React.createElement("textarea",
|
||||
{
|
||||
style: { width: "600px", height: "100px" },
|
||||
placeholder: "Step description",
|
||||
key: itemId,
|
||||
value: value,
|
||||
onChange: (event: React.FormEvent<HTMLTextAreaElement>) => {
|
||||
console.log(event);
|
||||
onUpdate(field.id, event.currentTarget.value);
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "Position",
|
||||
title: "Position",
|
||||
type: CustomCollectionFieldType.number,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
id: "Enabled",
|
||||
title: "Enabled",
|
||||
type: CustomCollectionFieldType.boolean,
|
||||
defaultValue: true
|
||||
}
|
||||
],
|
||||
disabled: false
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadingIndicatorDelayTime: 5,
|
||||
showLoadingIndicator: this.loadIndicator
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export interface ITourProps {
|
||||
description: string;
|
||||
actionValue: string;
|
||||
collectionData: any[];
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.reactTourCustomCss {
|
||||
--reactour-accent: #5cb7b7 !important;
|
||||
line-height: 1.3 !important;
|
||||
color: #2d2323 !important;
|
||||
font-family: -apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
'Oxygen',
|
||||
'Ubuntu',
|
||||
'Cantarell',
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetical Neue',
|
||||
sans-serif !important;
|
||||
}
|
||||
|
||||
.tour {
|
||||
.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;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.tutorialButton{
|
||||
width: 100%;
|
||||
max-width: initial!important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Tour.module.scss';
|
||||
import { ITourProps } from './ITourProps';
|
||||
import Tours from 'reactour';
|
||||
import { CompoundButton } from 'office-ui-fabric-react';
|
||||
import { TourHelper } from './TourHelper';
|
||||
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
|
||||
|
||||
|
||||
|
||||
export interface ITourState {
|
||||
isTourOpen: boolean;
|
||||
steps: any[];
|
||||
tourDisabled: boolean;
|
||||
}
|
||||
|
||||
export default class Tour extends React.Component<ITourProps, ITourState> {
|
||||
|
||||
constructor(props: ITourProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isTourOpen: false,
|
||||
steps: [],
|
||||
tourDisabled: true
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.setState({ steps: TourHelper.getTourSteps(this.props.collectionData) });
|
||||
if (this.props.collectionData != undefined && this.props.collectionData.length > 0) {
|
||||
this.setState({ tourDisabled: false });
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate(newProps) {
|
||||
if (JSON.stringify(this.props.collectionData) != JSON.stringify(newProps.collectionData)) {
|
||||
this.setState({ steps: TourHelper.getTourSteps(this.props.collectionData) });
|
||||
if (this.props.collectionData != undefined && this.props.collectionData.length > 0) {
|
||||
this.setState({ tourDisabled: false });
|
||||
} else {
|
||||
this.setState({ tourDisabled: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public render(): React.ReactElement<ITourState> {
|
||||
return (
|
||||
<div className={styles.tour}>
|
||||
<CompoundButton primary text={this.props.actionValue} secondaryText={this.props.description}
|
||||
disabled={this.state.tourDisabled} onClick={this._openTour} checked={this.state.isTourOpen}
|
||||
className={styles.tutorialButton}>
|
||||
|
||||
</CompoundButton>
|
||||
<Tours
|
||||
onRequestClose={this._closeTour}
|
||||
startAt={0}
|
||||
steps={this.state.steps}
|
||||
isOpen={this.state.isTourOpen}
|
||||
maskClassName="mask"
|
||||
className={styles.reactTourCustomCss}
|
||||
accentColor={"#5cb7b7"}
|
||||
rounded={5}
|
||||
onAfterOpen={this._disableBody}
|
||||
onBeforeClose={this._enableBody}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private _disableBody = target => disableBodyScroll(target);
|
||||
private _enableBody = target => enableBodyScroll(target);
|
||||
|
||||
private _closeTour = () => {
|
||||
this.setState({ isTourOpen: false });
|
||||
}
|
||||
|
||||
private _openTour = () => {
|
||||
this.setState({ isTourOpen: true });
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import {
|
||||
sp
|
||||
} from "@pnp/sp";
|
||||
import { graph } from "@pnp/graph";
|
||||
|
||||
|
||||
|
||||
|
||||
export class TourHelper {
|
||||
|
||||
public static getTourSteps(settings: any[]): any[] {
|
||||
|
||||
var result: any[] = new Array<any>();
|
||||
|
||||
if (settings != undefined) {
|
||||
settings.forEach(ele => {
|
||||
if (ele.Enabled) {
|
||||
result.push(
|
||||
{
|
||||
selector: '[data-sp-feature-instance-id=\'' + ele.WebPart + '\']',
|
||||
content: ele.StepDescription
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
8
samples/react-tour-pnpjs/src/webparts/tour/loc/en-us.js
vendored
Normal file
8
samples/react-tour-pnpjs/src/webparts/tour/loc/en-us.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Configure the tutorial to explain your users all features of the page",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Tour Description",
|
||||
"ActionValueFieldLabel":"Button Label",
|
||||
}
|
||||
});
|
||||
12
samples/react-tour-pnpjs/src/webparts/tour/loc/mystrings.d.ts
vendored
Normal file
12
samples/react-tour-pnpjs/src/webparts/tour/loc/mystrings.d.ts
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
declare interface ITourWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
ActionValueFieldLabel: string;
|
||||
PropertyPaneActionValue: string;
|
||||
}
|
||||
|
||||
declare module 'TourWebPartStrings' {
|
||||
const strings: ITourWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
38
samples/react-tour-pnpjs/tsconfig.json
Normal file
38
samples/react-tour-pnpjs/tsconfig.json
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/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": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
30
samples/react-tour-pnpjs/tslint.json
Normal file
30
samples/react-tour-pnpjs/tslint.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"extends": "@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