Cascading dropdown without custom controls sample (#68)
This commit is contained in:
Waldek Mastykarz
Vesa Juvonen
parent
9a333aebff
commit
d8d52a4df3
|
|
@ -12,6 +12,12 @@ Drop-down that loads its options asynchronously.
|
|||
|
||||
This control supports promises and chaining for cascading drop-downs where value from one field determines values in other drop-down fields.
|
||||
|
||||
### Drop-down with external data without using a custom control
|
||||
|
||||
Cascading drop-downs in the property pane both using external data.
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||
|
|
@ -27,6 +33,7 @@ react-custompropertypanecontrols|Waldek Mastykarz (MVP, Rencore, @waldekm)
|
|||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
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
|
||||
|
||||
## Disclaimer
|
||||
|
|
@ -44,6 +51,10 @@ Version|Date|Comments
|
|||
|
||||
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.
|
||||
|
||||
## Features
|
||||
|
||||
Sample web parts in this solution illustrate the following concepts on top of the SharePoint Framework:
|
||||
|
|
@ -54,5 +65,9 @@ Sample web parts in this solution illustrate the following concepts on top of th
|
|||
- linking multiple custom property pane controls together
|
||||
- loading data for use in custom property pane controls asynchronously without blocking the web part
|
||||
- forcing React components to repaint using an external trigger
|
||||
- displaying a custom loading indicator
|
||||
- reacting to web part property changes
|
||||
- updating properties of web part property pane controls
|
||||
- refreshing the web part property pane from web part
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
|
|
@ -4,6 +4,11 @@
|
|||
"entry": "./lib/webparts/dropdownWithRemoteData/DropdownWithRemoteDataWebPart.js",
|
||||
"manifest": "./src/webparts/dropdownWithRemoteData/DropdownWithRemoteDataWebPart.manifest.json",
|
||||
"outputPath": "./dist/dropdown-with-remote-data.bundle.js"
|
||||
},
|
||||
{
|
||||
"entry": "./lib/webparts/dropdownWithRemoteDataWithoutCustomControls/DropdownWithRemoteDataWithoutCustomControlsWebPart.js",
|
||||
"manifest": "./src/webparts/dropdownWithRemoteDataWithoutCustomControls/DropdownWithRemoteDataWithoutCustomControlsWebPart.manifest.json",
|
||||
"outputPath": "./dist/dropdown-with-remote-data-without-custom-controls.bundle.js"
|
||||
}
|
||||
],
|
||||
"externals": {
|
||||
|
|
@ -16,6 +21,7 @@
|
|||
"react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js"
|
||||
},
|
||||
"localizedResources": {
|
||||
"dropdownWithRemoteDataStrings": "webparts/dropdownWithRemoteData/loc/{locale}.js"
|
||||
"dropdownWithRemoteDataStrings": "webparts/dropdownWithRemoteData/loc/{locale}.js",
|
||||
"dropdownWithRemoteDataWithoutCustomControlsStrings": "webparts/dropdownWithRemoteDataWithoutCustomControls/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"solution": {
|
||||
"name": "react-custompropertypanecontrols-client-side-solution",
|
||||
"id": "21ba0db9-71ef-4f6b-8463-ce29e77e19f4",
|
||||
"version": "1.0.0.0"
|
||||
"version": "2.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-custompropertypanecontrols.spapp"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,771 @@
|
|||
{
|
||||
"name": "react-custompropertypanecontrols",
|
||||
"version": "2.0.0",
|
||||
"dependencies": {
|
||||
"@microsoft/load-themed-styles": {
|
||||
"version": "1.2.2",
|
||||
"from": "@microsoft/load-themed-styles@>=1.2.2 <1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.2.2.tgz"
|
||||
},
|
||||
"@microsoft/office-ui-fabric-react-bundle": {
|
||||
"version": "0.3.0",
|
||||
"from": "@microsoft/office-ui-fabric-react-bundle@>=0.3.0 <0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/office-ui-fabric-react-bundle/-/office-ui-fabric-react-bundle-0.3.0.tgz",
|
||||
"dependencies": {
|
||||
"office-ui-fabric-react": {
|
||||
"version": "0.52.0",
|
||||
"from": "office-ui-fabric-react@0.52.0",
|
||||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-0.52.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"@microsoft/sp-client-base": {
|
||||
"version": "0.3.0",
|
||||
"from": "@microsoft/sp-client-base@>=0.3.0 <0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/sp-client-base/-/sp-client-base-0.3.0.tgz"
|
||||
},
|
||||
"@microsoft/sp-client-preview": {
|
||||
"version": "0.4.0",
|
||||
"from": "@microsoft/sp-client-preview@>=0.4.0 <0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/sp-client-preview/-/sp-client-preview-0.4.0.tgz",
|
||||
"dependencies": {
|
||||
"office-ui-fabric-react": {
|
||||
"version": "0.52.0",
|
||||
"from": "office-ui-fabric-react@0.52.0",
|
||||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-0.52.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"version": "0.3.0",
|
||||
"from": "@microsoft/sp-lodash-subset@>=0.3.0 <0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/sp-lodash-subset/-/sp-lodash-subset-0.3.0.tgz"
|
||||
},
|
||||
"@microsoft/sp-module-interfaces": {
|
||||
"version": "0.3.0",
|
||||
"from": "@microsoft/sp-module-interfaces@>=0.3.0 <0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/sp-module-interfaces/-/sp-module-interfaces-0.3.0.tgz"
|
||||
},
|
||||
"@microsoft/sp-module-loader": {
|
||||
"version": "0.3.0",
|
||||
"from": "@microsoft/sp-module-loader@>=0.3.0 <0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/sp-module-loader/-/sp-module-loader-0.3.0.tgz"
|
||||
},
|
||||
"acorn": {
|
||||
"version": "3.3.0",
|
||||
"from": "acorn@>=3.1.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz"
|
||||
},
|
||||
"amdefine": {
|
||||
"version": "1.0.1",
|
||||
"from": "amdefine@>=0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz"
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.0.0",
|
||||
"from": "ansi-regex@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.0.0.tgz"
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "2.2.1",
|
||||
"from": "ansi-styles@>=2.2.1 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
|
||||
},
|
||||
"asap": {
|
||||
"version": "2.0.5",
|
||||
"from": "asap@>=2.0.3 <2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.5.tgz"
|
||||
},
|
||||
"asn1": {
|
||||
"version": "0.2.3",
|
||||
"from": "asn1@>=0.2.3 <0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz"
|
||||
},
|
||||
"assert-plus": {
|
||||
"version": "0.2.0",
|
||||
"from": "assert-plus@>=0.2.0 <0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz"
|
||||
},
|
||||
"ast-types": {
|
||||
"version": "0.9.2",
|
||||
"from": "ast-types@0.9.2",
|
||||
"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.2.tgz"
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"from": "asynckit@>=0.4.0 <0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
|
||||
},
|
||||
"aws-sign2": {
|
||||
"version": "0.6.0",
|
||||
"from": "aws-sign2@>=0.6.0 <0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz"
|
||||
},
|
||||
"aws4": {
|
||||
"version": "1.5.0",
|
||||
"from": "aws4@>=1.2.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.5.0.tgz"
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "0.4.2",
|
||||
"from": "balanced-match@>=0.4.1 <0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
|
||||
},
|
||||
"base62": {
|
||||
"version": "1.1.2",
|
||||
"from": "base62@>=1.1.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/base62/-/base62-1.1.2.tgz"
|
||||
},
|
||||
"bcrypt-pbkdf": {
|
||||
"version": "1.0.0",
|
||||
"from": "bcrypt-pbkdf@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"boom": {
|
||||
"version": "2.10.1",
|
||||
"from": "boom@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.6",
|
||||
"from": "brace-expansion@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz"
|
||||
},
|
||||
"caseless": {
|
||||
"version": "0.11.0",
|
||||
"from": "caseless@>=0.11.0 <0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz"
|
||||
},
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"from": "chalk@>=1.1.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
|
||||
},
|
||||
"clone": {
|
||||
"version": "1.0.2",
|
||||
"from": "clone@>=1.0.2 <1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
|
||||
},
|
||||
"color-functions": {
|
||||
"version": "1.1.0",
|
||||
"from": "color-functions@1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/color-functions/-/color-functions-1.1.0.tgz"
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.5",
|
||||
"from": "combined-stream@>=1.0.5 <1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz"
|
||||
},
|
||||
"combokeys": {
|
||||
"version": "2.4.6",
|
||||
"from": "combokeys@2.4.6",
|
||||
"resolved": "https://registry.npmjs.org/combokeys/-/combokeys-2.4.6.tgz"
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.9.0",
|
||||
"from": "commander@>=2.7.1 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz"
|
||||
},
|
||||
"commoner": {
|
||||
"version": "0.10.8",
|
||||
"from": "commoner@>=0.10.1 <0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz"
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"from": "concat-map@0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
|
||||
},
|
||||
"core-js": {
|
||||
"version": "1.2.7",
|
||||
"from": "core-js@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz"
|
||||
},
|
||||
"cryptiles": {
|
||||
"version": "2.0.5",
|
||||
"from": "cryptiles@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz"
|
||||
},
|
||||
"dashdash": {
|
||||
"version": "1.14.0",
|
||||
"from": "dashdash@>=1.12.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.0.tgz",
|
||||
"dependencies": {
|
||||
"assert-plus": {
|
||||
"version": "1.0.0",
|
||||
"from": "assert-plus@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"deep-equal": {
|
||||
"version": "1.0.1",
|
||||
"from": "deep-equal@>=1.0.1 <1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz"
|
||||
},
|
||||
"defined": {
|
||||
"version": "1.0.0",
|
||||
"from": "defined@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz"
|
||||
},
|
||||
"delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"from": "delayed-stream@>=1.0.0 <1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
|
||||
},
|
||||
"detective": {
|
||||
"version": "4.3.2",
|
||||
"from": "detective@>=4.3.1 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/detective/-/detective-4.3.2.tgz"
|
||||
},
|
||||
"ecc-jsbn": {
|
||||
"version": "0.1.1",
|
||||
"from": "ecc-jsbn@>=0.1.1 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"encoding": {
|
||||
"version": "0.1.12",
|
||||
"from": "encoding@>=0.1.11 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz"
|
||||
},
|
||||
"envify": {
|
||||
"version": "3.4.1",
|
||||
"from": "envify@>=3.0.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz"
|
||||
},
|
||||
"es6-collections": {
|
||||
"version": "0.5.6",
|
||||
"from": "es6-collections@0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/es6-collections/-/es6-collections-0.5.6.tgz"
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "3.1.2",
|
||||
"from": "es6-promise@3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.1.2.tgz"
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"from": "escape-string-regexp@>=1.0.2 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
|
||||
},
|
||||
"esprima-fb": {
|
||||
"version": "15001.1.0-dev-harmony-fb",
|
||||
"from": "esprima-fb@>=15001.1.0-dev-harmony-fb <15002.0.0",
|
||||
"resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz"
|
||||
},
|
||||
"eventemitter3": {
|
||||
"version": "1.2.0",
|
||||
"from": "eventemitter3@>=1.2.0 <1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz"
|
||||
},
|
||||
"extend": {
|
||||
"version": "3.0.0",
|
||||
"from": "extend@>=3.0.0 <3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz"
|
||||
},
|
||||
"extsprintf": {
|
||||
"version": "1.0.2",
|
||||
"from": "extsprintf@1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz"
|
||||
},
|
||||
"fast-diff": {
|
||||
"version": "1.1.1",
|
||||
"from": "fast-diff@>=1.0.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.1.tgz"
|
||||
},
|
||||
"fbemitter": {
|
||||
"version": "2.1.1",
|
||||
"from": "fbemitter@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-2.1.1.tgz",
|
||||
"dependencies": {
|
||||
"fbjs": {
|
||||
"version": "0.8.6",
|
||||
"from": "fbjs@>=0.8.4 <0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.6.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"fbjs": {
|
||||
"version": "0.1.0-alpha.7",
|
||||
"from": "fbjs@0.1.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.1.0-alpha.7.tgz",
|
||||
"dependencies": {
|
||||
"whatwg-fetch": {
|
||||
"version": "0.9.0",
|
||||
"from": "whatwg-fetch@>=0.9.0 <0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"flux": {
|
||||
"version": "2.1.1",
|
||||
"from": "flux@2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/flux/-/flux-2.1.1.tgz"
|
||||
},
|
||||
"forever-agent": {
|
||||
"version": "0.6.1",
|
||||
"from": "forever-agent@>=0.6.1 <0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
|
||||
},
|
||||
"form-data": {
|
||||
"version": "2.1.2",
|
||||
"from": "form-data@>=2.1.1 <2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz"
|
||||
},
|
||||
"generate-function": {
|
||||
"version": "2.0.0",
|
||||
"from": "generate-function@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz"
|
||||
},
|
||||
"generate-object-property": {
|
||||
"version": "1.2.0",
|
||||
"from": "generate-object-property@>=1.1.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz"
|
||||
},
|
||||
"getpass": {
|
||||
"version": "0.1.6",
|
||||
"from": "getpass@>=0.1.1 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
|
||||
"dependencies": {
|
||||
"assert-plus": {
|
||||
"version": "1.0.0",
|
||||
"from": "assert-plus@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"glob": {
|
||||
"version": "5.0.15",
|
||||
"from": "glob@>=5.0.15 <6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz"
|
||||
},
|
||||
"graceful-fs": {
|
||||
"version": "4.1.10",
|
||||
"from": "graceful-fs@>=4.1.2 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.10.tgz"
|
||||
},
|
||||
"graceful-readlink": {
|
||||
"version": "1.0.1",
|
||||
"from": "graceful-readlink@>=1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
|
||||
},
|
||||
"har-validator": {
|
||||
"version": "2.0.6",
|
||||
"from": "har-validator@>=2.0.6 <2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz"
|
||||
},
|
||||
"has-ansi": {
|
||||
"version": "2.0.0",
|
||||
"from": "has-ansi@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
|
||||
},
|
||||
"hawk": {
|
||||
"version": "3.1.3",
|
||||
"from": "hawk@>=3.1.3 <3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz"
|
||||
},
|
||||
"hoek": {
|
||||
"version": "2.16.3",
|
||||
"from": "hoek@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz"
|
||||
},
|
||||
"http-signature": {
|
||||
"version": "1.1.1",
|
||||
"from": "http-signature@>=1.1.0 <1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz"
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.14",
|
||||
"from": "iconv-lite@>=0.4.13 <0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.14.tgz"
|
||||
},
|
||||
"immutable": {
|
||||
"version": "3.8.1",
|
||||
"from": "immutable@>=3.7.4 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.1.tgz"
|
||||
},
|
||||
"inflight": {
|
||||
"version": "1.0.6",
|
||||
"from": "inflight@>=1.0.4 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"from": "inherits@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
|
||||
},
|
||||
"is-my-json-valid": {
|
||||
"version": "2.15.0",
|
||||
"from": "is-my-json-valid@>=2.12.4 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz"
|
||||
},
|
||||
"is-property": {
|
||||
"version": "1.0.2",
|
||||
"from": "is-property@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
|
||||
},
|
||||
"is-stream": {
|
||||
"version": "1.1.0",
|
||||
"from": "is-stream@>=1.0.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz"
|
||||
},
|
||||
"is-typedarray": {
|
||||
"version": "1.0.0",
|
||||
"from": "is-typedarray@>=1.0.0 <1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
|
||||
},
|
||||
"isomorphic-fetch": {
|
||||
"version": "2.2.1",
|
||||
"from": "isomorphic-fetch@>=2.1.1 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz"
|
||||
},
|
||||
"isstream": {
|
||||
"version": "0.1.2",
|
||||
"from": "isstream@>=0.1.2 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
|
||||
},
|
||||
"jodid25519": {
|
||||
"version": "1.0.2",
|
||||
"from": "jodid25519@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "2.0.0",
|
||||
"from": "js-tokens@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-2.0.0.tgz"
|
||||
},
|
||||
"jsbn": {
|
||||
"version": "0.1.0",
|
||||
"from": "jsbn@>=0.1.0 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.0.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"json-schema": {
|
||||
"version": "0.2.3",
|
||||
"from": "json-schema@0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
|
||||
},
|
||||
"json-stringify-safe": {
|
||||
"version": "5.0.1",
|
||||
"from": "json-stringify-safe@>=5.0.1 <5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
|
||||
},
|
||||
"jsonpointer": {
|
||||
"version": "4.0.0",
|
||||
"from": "jsonpointer@>=4.0.0 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.0.tgz"
|
||||
},
|
||||
"jsprim": {
|
||||
"version": "1.3.1",
|
||||
"from": "jsprim@>=1.2.2 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz"
|
||||
},
|
||||
"jstransform": {
|
||||
"version": "11.0.3",
|
||||
"from": "jstransform@>=11.0.3 <12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz",
|
||||
"dependencies": {
|
||||
"object-assign": {
|
||||
"version": "2.1.1",
|
||||
"from": "object-assign@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"load-themed-styles": {
|
||||
"version": "1.1.0",
|
||||
"from": "load-themed-styles@>=1.1.0 <1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/load-themed-styles/-/load-themed-styles-1.1.0.tgz"
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.15.0",
|
||||
"from": "lodash@>=4.15.0 <4.16.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.15.0.tgz"
|
||||
},
|
||||
"lodash.get": {
|
||||
"version": "4.4.2",
|
||||
"from": "lodash.get@>=4.1.2 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz"
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.3.0",
|
||||
"from": "loose-envify@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.0.tgz"
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.25.0",
|
||||
"from": "mime-db@>=1.25.0 <1.26.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.25.0.tgz"
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.13",
|
||||
"from": "mime-types@>=2.1.7 <2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.13.tgz"
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.0.3",
|
||||
"from": "minimatch@>=2.0.0 <3.0.0||>=3.0.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz"
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"from": "minimist@0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"from": "mkdirp@>=0.5.0 <0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz"
|
||||
},
|
||||
"mobservable": {
|
||||
"version": "1.2.5",
|
||||
"from": "mobservable@1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/mobservable/-/mobservable-1.2.5.tgz"
|
||||
},
|
||||
"mobservable-react": {
|
||||
"version": "2.1.5",
|
||||
"from": "mobservable-react@2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/mobservable-react/-/mobservable-react-2.1.5.tgz"
|
||||
},
|
||||
"node-fetch": {
|
||||
"version": "1.6.3",
|
||||
"from": "node-fetch@>=1.0.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz"
|
||||
},
|
||||
"oauth-sign": {
|
||||
"version": "0.8.2",
|
||||
"from": "oauth-sign@>=0.8.1 <0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz"
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.0",
|
||||
"from": "object-assign@>=4.1.0 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz"
|
||||
},
|
||||
"office-ui-fabric-react": {
|
||||
"version": "0.36.0",
|
||||
"from": "office-ui-fabric-react@0.36.0",
|
||||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-0.36.0.tgz"
|
||||
},
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"from": "once@>=1.3.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
|
||||
},
|
||||
"parchment": {
|
||||
"version": "1.0.0-rc.2",
|
||||
"from": "parchment@1.0.0-rc.2",
|
||||
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.0.0-rc.2.tgz"
|
||||
},
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"from": "path-is-absolute@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
|
||||
},
|
||||
"pinkie": {
|
||||
"version": "2.0.4",
|
||||
"from": "pinkie@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz"
|
||||
},
|
||||
"pinkie-promise": {
|
||||
"version": "2.0.1",
|
||||
"from": "pinkie-promise@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
|
||||
},
|
||||
"private": {
|
||||
"version": "0.1.6",
|
||||
"from": "private@>=0.1.6 <0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/private/-/private-0.1.6.tgz"
|
||||
},
|
||||
"promise": {
|
||||
"version": "7.1.1",
|
||||
"from": "promise@>=7.1.1 <8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz"
|
||||
},
|
||||
"punycode": {
|
||||
"version": "1.4.1",
|
||||
"from": "punycode@>=1.4.1 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz"
|
||||
},
|
||||
"q": {
|
||||
"version": "1.4.1",
|
||||
"from": "q@>=1.1.2 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz"
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.3.0",
|
||||
"from": "qs@>=6.3.0 <6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.3.0.tgz"
|
||||
},
|
||||
"quill": {
|
||||
"version": "1.0.0",
|
||||
"from": "quill@1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/quill/-/quill-1.0.0.tgz"
|
||||
},
|
||||
"react": {
|
||||
"version": "0.14.8",
|
||||
"from": "react@0.14.8",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-0.14.8.tgz",
|
||||
"dependencies": {
|
||||
"fbjs": {
|
||||
"version": "0.6.1",
|
||||
"from": "fbjs@>=0.6.1 <0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.6.1.tgz"
|
||||
},
|
||||
"whatwg-fetch": {
|
||||
"version": "0.9.0",
|
||||
"from": "whatwg-fetch@>=0.9.0 <0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "0.14.8",
|
||||
"from": "react-dom@0.14.8",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.14.8.tgz"
|
||||
},
|
||||
"recast": {
|
||||
"version": "0.11.17",
|
||||
"from": "recast@>=0.11.17 <0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/recast/-/recast-0.11.17.tgz",
|
||||
"dependencies": {
|
||||
"esprima": {
|
||||
"version": "3.1.1",
|
||||
"from": "esprima@>=3.1.0 <3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.1.tgz"
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.6",
|
||||
"from": "source-map@>=0.5.0 <0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"request": {
|
||||
"version": "2.79.0",
|
||||
"from": "request@>=2.54.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz"
|
||||
},
|
||||
"rich-text": {
|
||||
"version": "3.0.2",
|
||||
"from": "rich-text@>=3.0.2 <3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/rich-text/-/rich-text-3.0.2.tgz"
|
||||
},
|
||||
"sntp": {
|
||||
"version": "1.0.9",
|
||||
"from": "sntp@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz"
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.4.4",
|
||||
"from": "source-map@>=0.4.2 <0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz"
|
||||
},
|
||||
"sshpk": {
|
||||
"version": "1.10.1",
|
||||
"from": "sshpk@>=1.7.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.1.tgz",
|
||||
"dependencies": {
|
||||
"assert-plus": {
|
||||
"version": "1.0.0",
|
||||
"from": "assert-plus@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.5",
|
||||
"from": "stringstream@>=0.0.4 <0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz"
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"from": "strip-ansi@>=3.0.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"from": "supports-color@>=2.0.0 <3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
|
||||
},
|
||||
"systemjs": {
|
||||
"version": "0.19.25",
|
||||
"from": "systemjs@0.19.25",
|
||||
"resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.19.25.tgz"
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"from": "through@>=2.3.4 <2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
|
||||
},
|
||||
"tiny-sha256": {
|
||||
"version": "1.0.2",
|
||||
"from": "tiny-sha256@1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/tiny-sha256/-/tiny-sha256-1.0.2.tgz"
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.3.2",
|
||||
"from": "tough-cookie@>=2.3.0 <2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz"
|
||||
},
|
||||
"tunnel-agent": {
|
||||
"version": "0.4.3",
|
||||
"from": "tunnel-agent@>=0.4.1 <0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz"
|
||||
},
|
||||
"tweetnacl": {
|
||||
"version": "0.14.3",
|
||||
"from": "tweetnacl@>=0.14.0 <0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.3.tgz",
|
||||
"optional": true
|
||||
},
|
||||
"ua-parser-js": {
|
||||
"version": "0.7.12",
|
||||
"from": "ua-parser-js@>=0.7.9 <0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.12.tgz"
|
||||
},
|
||||
"uuid": {
|
||||
"version": "3.0.0",
|
||||
"from": "uuid@>=3.0.0 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.0.tgz"
|
||||
},
|
||||
"validator": {
|
||||
"version": "5.7.0",
|
||||
"from": "validator@>=5.0.0 <6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/validator/-/validator-5.7.0.tgz"
|
||||
},
|
||||
"verror": {
|
||||
"version": "1.3.6",
|
||||
"from": "verror@1.3.6",
|
||||
"resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz"
|
||||
},
|
||||
"whatwg-fetch": {
|
||||
"version": "0.11.0",
|
||||
"from": "whatwg-fetch@0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.11.0.tgz"
|
||||
},
|
||||
"when": {
|
||||
"version": "3.7.7",
|
||||
"from": "when@>=3.7.5 <4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/when/-/when-3.7.7.tgz"
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"from": "wrappy@>=1.0.0 <2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
|
||||
},
|
||||
"xtend": {
|
||||
"version": "4.0.1",
|
||||
"from": "xtend@>=4.0.0 <5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz"
|
||||
},
|
||||
"z-schema": {
|
||||
"version": "3.17.0",
|
||||
"from": "z-schema@3.17.0",
|
||||
"resolved": "https://registry.npmjs.org/z-schema/-/z-schema-3.17.0.tgz"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-custompropertypanecontrols",
|
||||
"version": "1.0.0",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
.dropdownWithRemoteDataWithoutCustomControls {
|
||||
.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 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
max-width: 715px;
|
||||
margin: 5px auto 5px auto;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "ec34b5c6-7708-42ad-841e-46f2b75a074e",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "ec34b5c6-7708-42ad-841e-46f2b75a074e",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "Dropdown with remote data (without custom controls)" },
|
||||
"description": { "default": "Sample web part using a property bound to the standard dropdown control with remote data" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"list": "",
|
||||
"item": ""
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneSettings,
|
||||
IWebPartContext,
|
||||
PropertyPaneDropdown
|
||||
} from '@microsoft/sp-client-preview';
|
||||
import { IDropdownOption } from 'office-ui-fabric-react';
|
||||
// import { IListInfo } from './IListInfo';
|
||||
|
||||
import * as strings from 'dropdownWithRemoteDataWithoutCustomControlsStrings';
|
||||
import DropdownWithRemoteDataWithoutCustomControls, { IDropdownWithRemoteDataWithoutCustomControlsProps } from './components/DropdownWithRemoteDataWithoutCustomControls';
|
||||
import { IDropdownWithRemoteDataWithoutCustomControlsWebPartProps } from './IDropdownWithRemoteDataWithoutCustomControlsWebPartProps';
|
||||
|
||||
export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends BaseClientSideWebPart<IDropdownWithRemoteDataWithoutCustomControlsWebPartProps> {
|
||||
private lists: IDropdownOption[];
|
||||
private items: IDropdownOption[];
|
||||
private itemsDropdownDisabled: boolean;
|
||||
|
||||
public constructor(context: IWebPartContext) {
|
||||
super(context);
|
||||
}
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
this.itemsDropdownDisabled = !this.properties.list;
|
||||
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'lists');
|
||||
|
||||
return this.loadLists()
|
||||
.then((listOptions: IDropdownOption[]): Promise<IDropdownOption[]> => {
|
||||
this.lists = listOptions;
|
||||
return this.loadItems();
|
||||
})
|
||||
.then((itemOptions: IDropdownOption[]): void => {
|
||||
this.items = itemOptions;
|
||||
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
||||
});
|
||||
}
|
||||
|
||||
protected onPropertyChange(propertyPath: string, newValue: any): void {
|
||||
if (propertyPath === 'list' &&
|
||||
newValue) {
|
||||
// push new list value
|
||||
super.onPropertyChange(propertyPath, newValue);
|
||||
// reset selected item
|
||||
this.properties.item = undefined;
|
||||
// push new item value
|
||||
this.onPropertyChange('item', this.properties.item);
|
||||
// disable item selector until new items are loaded
|
||||
this.itemsDropdownDisabled = true;
|
||||
// refresh the item selector control by repainting the property pane
|
||||
this.configureStart();
|
||||
// communicate loading items
|
||||
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'items');
|
||||
|
||||
this.loadItems()
|
||||
.then((itemOptions: IDropdownOption[]): void => {
|
||||
// store items
|
||||
this.items = itemOptions;
|
||||
// enable item selector
|
||||
this.itemsDropdownDisabled = false;
|
||||
// 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.configureStart();
|
||||
});
|
||||
}
|
||||
else {
|
||||
super.onPropertyChange(propertyPath, newValue);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IDropdownWithRemoteDataWithoutCustomControlsProps> = React.createElement(DropdownWithRemoteDataWithoutCustomControls, {
|
||||
list: this.properties.list,
|
||||
item: this.properties.item
|
||||
});
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected get propertyPaneSettings(): IPropertyPaneSettings {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown('list', {
|
||||
label: strings.ListFieldLabel,
|
||||
options: this.lists
|
||||
}),
|
||||
PropertyPaneDropdown('item', {
|
||||
label: strings.ItemFieldLabel,
|
||||
options: this.items,
|
||||
isDisabled: this.itemsDropdownDisabled
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
private loadLists(): Promise<IDropdownOption[]> {
|
||||
return new Promise<IDropdownOption[]>((resolve: (options: IDropdownOption[]) => void, reject: (error: any) => void) => {
|
||||
// uncomment to load mock lists
|
||||
setTimeout(() => {
|
||||
resolve([{
|
||||
key: 'sharedDocuments',
|
||||
text: 'Shared Documents'
|
||||
},
|
||||
{
|
||||
key: 'myDocuments',
|
||||
text: 'My Documents'
|
||||
}]);
|
||||
}, 2000);
|
||||
|
||||
// uncomment to load lists from the current web
|
||||
// this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + '/_api/web/lists?$select=Id,Title', {
|
||||
// headers: {
|
||||
// 'Accept': 'application/json;odata=nometadata',
|
||||
// 'odata-version': ''
|
||||
// }
|
||||
// })
|
||||
// .then((response: Response): Promise<{ value: IListInfo[] }> => {
|
||||
// return response.json();
|
||||
// })
|
||||
// .then((listsResponse: { value: IListInfo[] }): void => {
|
||||
// resolve(listsResponse.value.map((value: IListInfo, index: number, array: IListInfo[]): IDropdownOption => {
|
||||
// return {
|
||||
// key: value.Id,
|
||||
// text: value.Title
|
||||
// };
|
||||
// }));
|
||||
// }, (error: any): void => {
|
||||
// reject(error);
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
private loadItems(): Promise<IDropdownOption[]> {
|
||||
if (!this.properties.list) {
|
||||
// resolve to empty options since no list has been selected
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
// uncomment to load mock items
|
||||
const wp: DropdownWithRemoteDataWithoutCustomControlsWebPart = this;
|
||||
|
||||
return new Promise<IDropdownOption[]>((resolve: (options: IDropdownOption[]) => void, reject: (error: any) => void) => {
|
||||
// uncomment to load mock items
|
||||
setTimeout(() => {
|
||||
const items = {
|
||||
sharedDocuments: [
|
||||
{
|
||||
key: 'spfx_presentation.pptx',
|
||||
text: 'SPFx for the masses'
|
||||
},
|
||||
{
|
||||
key: 'hello-world.spapp',
|
||||
text: 'hello-world.spapp'
|
||||
}
|
||||
],
|
||||
myDocuments: [
|
||||
{
|
||||
key: 'clippy_cv.docx',
|
||||
text: 'Clippy CV'
|
||||
},
|
||||
{
|
||||
key: 'clippy_expenses.xlsx',
|
||||
text: 'Clippy Expenses'
|
||||
}
|
||||
]
|
||||
};
|
||||
resolve(items[wp.properties.list]);
|
||||
}, 2000);
|
||||
|
||||
// uncomment to load items from the current list
|
||||
// this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists('${this.properties.list}')/items?$select=Id,Title`, {
|
||||
// headers: {
|
||||
// 'Accept': 'application/json;odata=nometadata',
|
||||
// 'odata-version': ''
|
||||
// }
|
||||
// })
|
||||
// .then((response: Response): Promise<{ value: IListInfo[] }> => {
|
||||
// return response.json();
|
||||
// })
|
||||
// .then((listsResponse: { value: IListInfo[] }): void => {
|
||||
// resolve(listsResponse.value.map((value: IListInfo, index: number, array: IListInfo[]): IDropdownOption => {
|
||||
// return {
|
||||
// key: value.Id,
|
||||
// text: value.Title
|
||||
// };
|
||||
// }));
|
||||
// }, (error: any): void => {
|
||||
// reject(error);
|
||||
// });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export interface IDropdownWithRemoteDataWithoutCustomControlsWebPartProps {
|
||||
list: string;
|
||||
item: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export interface IListInfo {
|
||||
Id: string;
|
||||
Title: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import * as React from 'react';
|
||||
import { css } from 'office-ui-fabric-react';
|
||||
|
||||
import styles from '../DropdownWithRemoteDataWithoutCustomControls.module.scss';
|
||||
import { IDropdownWithRemoteDataWithoutCustomControlsWebPartProps } from '../IDropdownWithRemoteDataWithoutCustomControlsWebPartProps';
|
||||
|
||||
export interface IDropdownWithRemoteDataWithoutCustomControlsProps extends IDropdownWithRemoteDataWithoutCustomControlsWebPartProps {
|
||||
}
|
||||
|
||||
export default class DropdownWithRemoteDataWithoutCustomControls extends React.Component<IDropdownWithRemoteDataWithoutCustomControlsProps, {}> {
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<div className={styles.dropdownWithRemoteDataWithoutCustomControls}>
|
||||
<div className={styles.container}>
|
||||
<div className={css('ms-Grid-row ms-bgColor-themeDark ms-fontColor-white', styles.row)}>
|
||||
<div className='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>
|
||||
<span className='ms-font-xl ms-fontColor-white'>
|
||||
Welcome to SharePoint!
|
||||
</span>
|
||||
<p className='ms-font-l ms-fontColor-white'>
|
||||
Customize SharePoint experiences using Web Parts.
|
||||
</p>
|
||||
<p className='ms-font-l ms-fontColor-white'>
|
||||
Selected list ID: {this.props.list || 'no list selected'}
|
||||
</p>
|
||||
<p className='ms-font-l ms-fontColor-white'>
|
||||
Selected item ID: {this.props.item || 'no item selected'}
|
||||
</p>
|
||||
<a
|
||||
className={css('ms-Button', styles.button)}
|
||||
href='https://github.com/SharePoint/sp-dev-docs/wiki'
|
||||
>
|
||||
<span className='ms-Button-label'>Learn more</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
define([], function () {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"ListFieldLabel": "List",
|
||||
"ItemFieldLabel": "Item"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
declare interface IDropdownWithRemoteDataWithoutCustomControlsStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
ListFieldLabel: string;
|
||||
ItemFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'dropdownWithRemoteDataWithoutCustomControlsStrings' {
|
||||
const strings: IDropdownWithRemoteDataWithoutCustomControlsStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import * as assert from 'assert';
|
||||
|
||||
describe('DropdownWithRemoteDataWithoutCustomControlsWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue