Merge pull request #2226 from AJIXuMuK/react-pp-dropdown

react-custompropertypanecontrols updates
This commit is contained in:
Hugo Bernier 2022-01-27 16:58:24 -05:00 committed by GitHub
commit 2794a8c868
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 768075 additions and 10873 deletions

View File

@ -1,25 +0,0 @@
# 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

View File

@ -7,6 +7,7 @@ npm-debug.log*
node_modules
# Build generated files
release
dist
lib
solution

View File

@ -1,31 +1,41 @@
{
// See http://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"version": "2.0.0",
"command": "gulp",
"isShellCommand": true,
"showOutput": "always",
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "bundle",
"isBuildCommand": true,
"label": "bundle",
"type": "gulp",
"task": "--no-color",
"problemMatcher": [
"$tsc"
]
],
"group": {
"_id": "build",
"isDefault": false
}
},
{
"taskName": "test",
"isTestCommand": true,
"label": "test",
"type": "gulp",
"task": "--no-color",
"problemMatcher": [
"$tsc"
]
],
"group": {
"_id": "test",
"isDefault": false
}
},
{
"taskName": "serve",
"isWatching": true,
"label": "serve",
"type": "gulp",
"task": "--no-color",
"isBackground": true,
"problemMatcher": [
"$tsc"
]

View File

@ -35,12 +35,12 @@ Cascading drop-downs in the property pane both using external data.
## Compatibility
![SPFx 1.8.1](https://img.shields.io/badge/SPFx-1.8.1-green.svg)
![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg)
![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14-green.svg)
![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-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 "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)
@ -53,16 +53,19 @@ Cascading drop-downs in the property pane both using external data.
Solution|Author(s)
--------|---------
react-custompropertypanecontrols|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
react-custompropertypanecontrols|Waldek Mastykarz (MVP, Rencore, @waldekm)
react-custompropertypanecontrols|[Alex Terentiev](https://github.com/AJIXuMuK) ([@alexaterentiev](https://twitter.com/alexaterentiev))
## Version history
Version|Date|Comments
-------|----|--------
2.0.2|Jan 26, 2022|Upgraded to SPFx 1.14.0-beta.5. This new version contains updated API for `showLoadingIndicator`
2.0.1|May 1, 2017|Updated to SPFx GA
2.0.0|November 22, 2016|Added new sample web part (Dropdown with remote data (without custom controls))
1.0.0|October 17, 2016|Initial release
## Minimal Path to Awesome
- clone this repo
@ -71,11 +74,11 @@ Version|Date|Comments
### Asynchronous drop-down
By default the control uses mock data. If you want to test the control with SharePoint, change the commented sections in the **DropdownWithRemoteDataWebPart.ts** file inside the **loadLists** and **loadItems** functions and deploy the sample web part to your SharePoint developer tenant.
By default the control uses mock data. If you want to test the control with SharePoint, change the commented sections in the `DropdownWithRemoteDataWebPart.ts` file inside the `loadLists` and `loadItems` functions and deploy the sample web part to your SharePoint developer tenant.
### Drop-down with external data without using a custom control
By default the web part uses mock data. If you want to test it with SharePoint, change the commented sections in the **DropdownWithRemoteDataWithoutCustomControlsWebPart.ts** file inside the **loadLists** and **loadItems** methods and deploy the sample web part to your SharePoint tenant.
By default the web part uses mock data. If you want to test it with SharePoint, change the commented sections in the `DropdownWithRemoteDataWithoutCustomControlsWebPart.ts` file inside the `loadLists` and `loadItems` methods and deploy the sample web part to your SharePoint tenant.
## Features
@ -92,21 +95,22 @@ Sample web parts in this solution illustrate the following concepts on top of th
- updating properties of web part property pane controls
- refreshing the web part property pane from the web part
## Help
We do not support samples, but 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're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-custompropertypanecontrols%22) to see if anybody else is having the same issues.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Areact-custompropertypanecontrols) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-custompropertypanecontrols) and see what the community is saying.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Areact-custompropertypanecontrols) and see what the community is saying.
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%2Csample%3A%20react-custompropertypanecontrols&template=bug-report.yml&sample=react-custompropertypanecontrols&authors=@waldekmastykarz&title=react-custompropertypanecontrols%20-%20).
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-custompropertypanecontrols&authors=@AJIXuMuK&title=react-custompropertypanecontrols%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%3Aquestion%2Csample%3A%20react-custompropertypanecontrols&template=question.yml&sample=react-custompropertypanecontrols&authors=@waldekmastykarz&title=react-custompropertypanecontrols%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-custompropertypanecontrols&authors=@AJIXuMuK&title=react-custompropertypanecontrols%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%3Aenhancement%2Csample%3A%20react-custompropertypanecontrols&template=suggestion.yml&sample=react-custompropertypanecontrols&authors=@waldekmastykarz&title=react-custompropertypanecontrols%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-custompropertypanecontrols&authors=@AJIXuMuK&title=react-custompropertypanecontrols%20-%20).
## Disclaimer

View File

@ -9,7 +9,7 @@
"Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts."
],
"creationDateTime": "2017-05-01",
"updateDateTime": "2017-05-01",
"updateDateTime": "2026-01-22",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "drop4"
"value": "1.14.0"
}
],
"thumbnails": [
@ -44,6 +44,12 @@
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
},
{
"gitHubAccount": "AJIXuMuK",
"company": "Microsoft",
"pictureUrl": "https://github.com/AJIXuMuK.png",
"name": "Alex Terentiev"
}
],
"references": [

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,6 +1,6 @@
{
"$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": "react-custompropertypanecontrols",
"accessKey": "<!-- ACCESS KEY -->"

View File

@ -5,7 +5,14 @@
"id": "21ba0db9-71ef-4f6b-8463-ce29e77e19f4",
"version": "2.0.1.0",
"includeClientSideAssets": true,
"isDomainIsolated": false
"isDomainIsolated": false,
"developer": {
"name": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": "",
"mpnId": "Undefined-1.13.1"
}
},
"paths": {
"zippedPackage": "solution/react-custompropertypanecontrols.sppkg"

View File

@ -1,10 +1,6 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
"https": true
}

View File

@ -1,8 +1,16 @@
'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);
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

View File

@ -2,39 +2,30 @@
"name": "react-custompropertypanecontrols",
"version": "2.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"engines": "undefined",
"main": "lib/index.js",
"dependencies": {
"@microsoft/sp-core-library": "1.8.1",
"@microsoft/sp-http": "1.8.1",
"@microsoft/sp-lodash-subset": "1.8.1",
"@microsoft/sp-property-pane": "1.8.1",
"@microsoft/sp-webpart-base": "1.8.1",
"@pnp/spfx-controls-react": "1.12.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "5.132.0",
"react": "16.7.0",
"react-addons-update": "^15.5.2",
"react-dom": "16.7.0"
"@microsoft/sp-core-library": "1.14.0-beta.5",
"@microsoft/sp-http": "1.14.0-beta.5",
"@microsoft/sp-lodash-subset": "1.14.0-beta.5",
"@microsoft/sp-property-pane": "1.14.0-beta.5",
"@microsoft/sp-webpart-base": "1.14.0-beta.5",
"@pnp/spfx-controls-react": "3.5.0",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-addons-update": "15.6.3",
"react-dom": "16.13.1"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-2.7": "0.4.0",
"@microsoft/sp-build-web": "1.8.1",
"@microsoft/sp-module-interfaces": "1.8.1",
"@microsoft/sp-tslint-rules": "1.8.1",
"@microsoft/sp-webpart-workbench": "1.8.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "5.2.2",
"assert": "1.4.1",
"gulp": "~3.9.1",
"tslint": "5.0.0",
"tslint-microsoft-contrib": "5.0.0",
"typescript": "2.4.2"
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"@microsoft/sp-build-web": "1.14.0-beta.5",
"@microsoft/sp-module-interfaces": "1.14.0-beta.5",
"@microsoft/sp-tslint-rules": "1.14.0-beta.5",
"@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"
},
"scripts": {
"build": "gulp bundle",

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -106,7 +106,7 @@ export default class DropdownWithRemoteDataWebPart extends BaseClientSideWebPart
});
}
private loadItems(): Promise<IDropdownOption[]> {
private loadItems(): Promise<IDropdownOption[] | void> {
if (!this.properties.list) {
// resolve to empty options since no list has been selected
return Promise.resolve();

View File

@ -1,9 +0,0 @@
/// <reference types="mocha" />
import * as assert from 'assert';
describe('DropdownWithRemoteDataWebPart', () => {
it('should do something', () => {
assert.ok(true);
});
});

View File

@ -39,7 +39,7 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
return;
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'lists');
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'lists', undefined, this.clearDomNode);
this.loadLists().then((listOptions: IDropdownOption[]) => {
this.lists = listOptions;
@ -79,7 +79,7 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
// refresh the item selector control by repainting the property pane
this.context.propertyPane.refresh();
// communicate loading items
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'items');
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'items', undefined, this.clearDomNode);
this.loadItems()
.then((itemOptions: IDropdownOption[]): void => {
@ -87,12 +87,14 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
this.items = itemOptions;
// enable item selector
this.itemsDropdownDisabled = false;
setTimeout(() => {
// clear status indicator
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
// re-render the web part as clearing the loading indicator removes the web part body
this.render();
// refresh the item selector control by repainting the property pane
this.context.propertyPane.refresh();
}, 5000);
});
}
else {
@ -160,7 +162,7 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
});
}
private loadItems(): Promise<IDropdownOption[]> {
private loadItems(): Promise<IDropdownOption[] | void> {
if (!this.properties.list) {
// resolve to empty options since no list has been selected
return Promise.resolve();
@ -175,9 +177,11 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
.then((response) => {
var options: IDropdownOption[] = [];
if (response && response.length) {
response.forEach((item: IListItem) => {
options.push({ "key": item.Id, "text": item.Title });
});
}
resolve(options);
});
@ -196,4 +200,8 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
private configureWebPart(): void {
this.context.propertyPane.open();
}
private clearDomNode = (domNode: HTMLElement): void => {
ReactDom.unmountComponentAtNode(domNode);
}
}

View File

@ -1,9 +0,0 @@
/// <reference types="mocha" />
import * as assert from 'assert';
describe('DropdownWithRemoteDataWithoutCustomControlsWebPart', () => {
it('should do something', () => {
assert.ok(true);
});
});

View File

@ -16,23 +16,21 @@
"lib": [
"es5",
"dom",
"es2015.collection"
"es2015.collection",
"es2015.promise"
],
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
]
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",
"lib"
],
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json"
"exclude": [],
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
}

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,

View File

@ -0,0 +1,104 @@
{
"bundles": {
"my-approvals-web-part": {
"dependencies": [
{
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"componentName": "@microsoft/sp-property-pane",
"componentVersion": "1.13.1",
"isDirectDependency": true
},
{
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
"componentName": "@microsoft/sp-loader",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
"componentName": "@ms/sp-telemetry",
"componentVersion": "0.19.42",
"isDirectDependency": false
},
{
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
"componentName": "@microsoft/sp-dynamic-data",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"componentName": "@microsoft/sp-lodash-subset",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"componentName": "@microsoft/sp-core-library",
"componentVersion": "1.13.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.192",
"isDirectDependency": false
},
{
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
"componentName": "@microsoft/sp-diagnostics",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
"componentName": "@microsoft/sp-page-context",
"componentVersion": "1.13.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.13.1",
"isDirectDependency": false
},
{
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"componentName": "react",
"componentVersion": "16.13.1",
"isDirectDependency": false
},
{
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"componentName": "react-dom",
"componentVersion": "16.13.1",
"isDirectDependency": false
},
{
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
"componentName": "@microsoft/sp-webpart-base",
"componentVersion": "1.13.1",
"isDirectDependency": true
},
{
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"componentName": "@microsoft/sp-component-base",
"componentVersion": "1.13.1",
"isDirectDependency": false
}
]
}
}
}

File diff suppressed because one or more lines are too long