├── LICENSE ├── PropertyPanes ├── .editorconfig ├── .gitignore ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json ├── .yo-rc.json ├── README.md ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ └── write-manifests.json ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ ├── index.ts │ └── webparts │ │ ├── accordionPane │ │ ├── AccordionPaneWebPart.manifest.json │ │ ├── AccordionPaneWebPart.ts │ │ ├── components │ │ │ ├── AccordionPane.module.scss │ │ │ ├── AccordionPane.tsx │ │ │ └── IAccordionPaneProps.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── choiceGroup │ │ ├── ChoiceGroupWebPart.manifest.json │ │ ├── ChoiceGroupWebPart.ts │ │ ├── assets │ │ │ ├── brick.svg │ │ │ ├── carousel.svg │ │ │ └── grid.svg │ │ ├── components │ │ │ ├── ChoiceGroup.module.scss │ │ │ ├── ChoiceGroup.tsx │ │ │ └── IChoiceGroupProps.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── conditionalField │ │ ├── ConditionalFieldWebPart.manifest.json │ │ ├── ConditionalFieldWebPart.ts │ │ ├── components │ │ │ ├── ConditionalField.module.scss │ │ │ ├── ConditionalField.tsx │ │ │ └── IConditionalFieldProps.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── conditionalGroup │ │ ├── ConditionalGroupWebPart.manifest.json │ │ ├── ConditionalGroupWebPart.ts │ │ ├── components │ │ │ ├── ConditionalGroup.module.scss │ │ │ ├── ConditionalGroup.tsx │ │ │ └── IConditionalGroupProps.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── loadingIndicator │ │ ├── LoadingIndicatorWebPart.manifest.json │ │ ├── LoadingIndicatorWebPart.ts │ │ ├── components │ │ │ ├── ILoadingIndicatorProps.ts │ │ │ ├── LoadingIndicator.module.scss │ │ │ └── LoadingIndicator.tsx │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── nonReactive │ │ ├── NonReactiveWebPart.manifest.json │ │ ├── NonReactiveWebPart.ts │ │ ├── components │ │ │ ├── INonReactiveProps.ts │ │ │ ├── NonReactive.module.scss │ │ │ └── NonReactive.tsx │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── singlePane │ │ ├── SinglePaneWebPart.manifest.json │ │ ├── SinglePaneWebPart.ts │ │ ├── components │ │ │ ├── ISinglePaneProps.ts │ │ │ ├── SinglePane.module.scss │ │ │ └── SinglePane.tsx │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ └── stepsPane │ │ ├── StepsPaneWebPart.manifest.json │ │ ├── StepsPaneWebPart.ts │ │ ├── components │ │ ├── IStepsPaneProps.ts │ │ ├── StepsPane.module.scss │ │ └── StepsPane.tsx │ │ └── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts ├── teams │ ├── 613b2be5-7d0d-4aa6-b186-04020eae9fdd_color.png │ ├── 613b2be5-7d0d-4aa6-b186-04020eae9fdd_outline.png │ ├── 645e0330-e33b-46cb-97ec-74be85f65a33_color.png │ ├── 645e0330-e33b-46cb-97ec-74be85f65a33_outline.png │ ├── 74299444-3d61-4ef6-8689-c6aac4ed0db5_color.png │ ├── 74299444-3d61-4ef6-8689-c6aac4ed0db5_outline.png │ ├── 8e494adf-a15a-4ff4-b2b8-94a84f4e2496_color.png │ ├── 8e494adf-a15a-4ff4-b2b8-94a84f4e2496_outline.png │ ├── 9777980f-b674-4ced-ac4d-1caaab4ae22d_color.png │ ├── 9777980f-b674-4ced-ac4d-1caaab4ae22d_outline.png │ ├── bb1411b0-c355-465d-a4c6-14588ff85ffd_color.png │ ├── bb1411b0-c355-465d-a4c6-14588ff85ffd_outline.png │ ├── e0ff7aa5-f2fe-46ae-9b6c-75ff8f246723_color.png │ ├── e0ff7aa5-f2fe-46ae-9b6c-75ff8f246723_outline.png │ ├── e9181701-08e4-4b3f-9e43-ec1238becd93_color.png │ ├── e9181701-08e4-4b3f-9e43-ec1238becd93_outline.png │ ├── ed29d6e3-033a-427f-8c37-70a73c823c4b_color.png │ ├── ed29d6e3-033a-427f-8c37-70a73c823c4b_outline.png │ ├── f7a66efd-a8a3-4b2c-8b05-3330582bffc7_color.png │ └── f7a66efd-a8a3-4b2c-8b05-3330582bffc7_outline.png ├── tsconfig.json └── tslint.json ├── README.md ├── WebPartLayouts ├── .editorconfig ├── .gitignore ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json ├── .yo-rc.json ├── README.md ├── assets │ ├── CustomGridControl.gif │ └── image-1564342248026.png ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ └── write-manifests.json ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ ├── components │ │ ├── carouselLayout │ │ │ ├── CarouselLayout.module.scss │ │ │ ├── CarouselLayout.tsx │ │ │ ├── CarouselLayout.types.ts │ │ │ ├── CarouselSlide.module.scss │ │ │ ├── CarouselSlide.tsx │ │ │ ├── CarouselSlide.types.ts │ │ │ └── index.ts │ │ ├── compactLayout │ │ │ ├── CompactLayout.module.scss │ │ │ ├── CompactLayout.tsx │ │ │ ├── CompactLayout.types.ts │ │ │ └── index.ts │ │ ├── filmstripLayout │ │ │ ├── FilmstripLayout.module.scss │ │ │ ├── FilmstripLayout.tsx │ │ │ └── index.ts │ │ ├── gridLayout │ │ │ ├── GridLayout.module.scss │ │ │ ├── GridLayout.tsx │ │ │ ├── GridLayout.types.ts │ │ │ └── index.ts │ │ └── paging │ │ │ ├── Paging.module.scss │ │ │ ├── Paging.tsx │ │ │ ├── Paging.types.ts │ │ │ └── index.ts │ ├── index.ts │ └── webparts │ │ ├── carousel │ │ ├── CarouselWebPart.manifest.json │ │ ├── CarouselWebPart.ts │ │ ├── components │ │ │ ├── Carousel.module.scss │ │ │ ├── Carousel.tsx │ │ │ └── ICarousel.types.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── compact │ │ ├── CompactWebPart.manifest.json │ │ ├── CompactWebPart.ts │ │ ├── components │ │ │ ├── Compact.module.scss │ │ │ ├── Compact.tsx │ │ │ └── Compact.types.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── filmstrip │ │ ├── FilmstripWebPart.manifest.json │ │ ├── FilmstripWebPart.ts │ │ ├── components │ │ │ ├── Filmstrip.module.scss │ │ │ ├── Filmstrip.tsx │ │ │ └── IFilmstrip.types.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ └── grid │ │ ├── GridWebPart.manifest.json │ │ ├── GridWebPart.ts │ │ ├── components │ │ ├── Grid.module.scss │ │ ├── Grid.tsx │ │ └── Grid.types.ts │ │ └── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts ├── teams │ ├── 39aa93a3-fd4f-4359-87e7-5f93aa31e6b4_color.png │ ├── 39aa93a3-fd4f-4359-87e7-5f93aa31e6b4_outline.png │ ├── 4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff_color.png │ ├── 4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff_outline.png │ ├── 5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003_color.png │ ├── 5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003_outline.png │ ├── 851b9a1e-300e-44fd-b63e-ebe360938abb_color.png │ ├── 851b9a1e-300e-44fd-b63e-ebe360938abb_outline.png │ ├── a8d7e892-1284-4f3a-8f63-858698f125b2_color.png │ └── a8d7e892-1284-4f3a-8f63-858698f125b2_outline.png ├── tsconfig.json └── tslint.json ├── WebPartTitles ├── .editorconfig ├── .gitignore ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json ├── .yo-rc.json ├── README.md ├── config │ ├── config.json │ ├── copy-assets.json │ ├── deploy-azure-storage.json │ ├── package-solution.json │ ├── serve.json │ └── write-manifests.json ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ ├── index.ts │ └── webparts │ │ ├── editableTitle │ │ ├── EditableTitleWebPart.manifest.json │ │ ├── EditableTitleWebPart.ts │ │ ├── components │ │ │ ├── EditableTitle.module.scss │ │ │ ├── EditableTitle.tsx │ │ │ └── IEditableTitleProps.ts │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ ├── placeholderTitle │ │ ├── PlaceholderTitleWebPart.manifest.json │ │ ├── PlaceholderTitleWebPart.ts │ │ ├── components │ │ │ ├── IPlaceholderTitleProps.ts │ │ │ ├── PlaceholderTitle.module.scss │ │ │ └── PlaceholderTitle.tsx │ │ └── loc │ │ │ ├── en-us.js │ │ │ └── mystrings.d.ts │ │ └── webPartDescription │ │ ├── WebPartDescriptionWebPart.manifest.json │ │ ├── WebPartDescriptionWebPart.ts │ │ ├── components │ │ ├── IWebPartDescriptionProps.ts │ │ ├── WebPartDescription.module.scss │ │ └── WebPartDescription.tsx │ │ └── loc │ │ ├── en-us.js │ │ └── mystrings.d.ts ├── teams │ ├── 277d2a92-4efd-4ffd-a4fc-8abc68cfaf03_color.png │ ├── 277d2a92-4efd-4ffd-a4fc-8abc68cfaf03_outline.png │ ├── 4f98e248-2c7f-45f4-9982-1c75d0e5a073_color.png │ ├── 4f98e248-2c7f-45f4-9982-1c75d0e5a073_outline.png │ ├── 920ed53b-6b0b-4548-b17a-2e8b61de888c_color.png │ └── 920ed53b-6b0b-4548-b17a-2e8b61de888c_outline.png ├── tsconfig.json └── tslint.json ├── node_modules └── @rehooks │ └── component-size │ ├── LICENSE │ ├── README.md │ ├── index.d.ts │ ├── index.js │ ├── index.js.flow │ └── package.json └── package-lock.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Hugo Bernier 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PropertyPanes/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /PropertyPanes/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /PropertyPanes/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "msjsdiag.debugger-for-chrome" 4 | ] 5 | } -------------------------------------------------------------------------------- /PropertyPanes/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Local workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://localhost:4321/temp/workbench.html", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///.././src/*": "${webRoot}/src/*", 16 | "webpack:///../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../src/*": "${webRoot}/src/*", 18 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 19 | }, 20 | "runtimeArgs": [ 21 | "--remote-debugging-port=9222" 22 | ] 23 | }, 24 | { 25 | "name": "Hosted workbench", 26 | "type": "chrome", 27 | "request": "launch", 28 | "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 29 | "webRoot": "${workspaceRoot}", 30 | "sourceMaps": true, 31 | "sourceMapPathOverrides": { 32 | "webpack:///.././src/*": "${webRoot}/src/*", 33 | "webpack:///../../../src/*": "${webRoot}/src/*", 34 | "webpack:///../../../../src/*": "${webRoot}/src/*", 35 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 36 | }, 37 | "runtimeArgs": [ 38 | "--remote-debugging-port=9222", 39 | "-incognito" 40 | ] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /PropertyPanes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /PropertyPanes/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "isCreatingSolution": false, 4 | "environment": "spo", 5 | "version": "1.8.2", 6 | "libraryName": "web-part-property-panes", 7 | "libraryId": "943d74b4-3c40-4128-8272-8beef057ae7f", 8 | "packageManager": "npm", 9 | "isDomainIsolated": false, 10 | "componentType": "webpart" 11 | } 12 | } -------------------------------------------------------------------------------- /PropertyPanes/README.md: -------------------------------------------------------------------------------- 1 | ## web-part-property-panes 2 | 3 | This is where you include your WebPart documentation. 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /PropertyPanes/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "single-pane-web-part": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/webparts/singlePane/SinglePaneWebPart.js", 9 | "manifest": "./src/webparts/singlePane/SinglePaneWebPart.manifest.json" 10 | } 11 | ] 12 | }, 13 | "accordion-pane-web-part": { 14 | "components": [ 15 | { 16 | "entrypoint": "./lib/webparts/accordionPane/AccordionPaneWebPart.js", 17 | "manifest": "./src/webparts/accordionPane/AccordionPaneWebPart.manifest.json" 18 | } 19 | ] 20 | }, 21 | "steps-pane-web-part": { 22 | "components": [ 23 | { 24 | "entrypoint": "./lib/webparts/stepsPane/StepsPaneWebPart.js", 25 | "manifest": "./src/webparts/stepsPane/StepsPaneWebPart.manifest.json" 26 | } 27 | ] 28 | }, 29 | "non-reactive-web-part": { 30 | "components": [ 31 | { 32 | "entrypoint": "./lib/webparts/nonReactive/NonReactiveWebPart.js", 33 | "manifest": "./src/webparts/nonReactive/NonReactiveWebPart.manifest.json" 34 | } 35 | ] 36 | }, 37 | "loading-indicator-web-part": { 38 | "components": [ 39 | { 40 | "entrypoint": "./lib/webparts/loadingIndicator/LoadingIndicatorWebPart.js", 41 | "manifest": "./src/webparts/loadingIndicator/LoadingIndicatorWebPart.manifest.json" 42 | } 43 | ] 44 | }, 45 | "choice-group-web-part": { 46 | "components": [ 47 | { 48 | "entrypoint": "./lib/webparts/choiceGroup/ChoiceGroupWebPart.js", 49 | "manifest": "./src/webparts/choiceGroup/ChoiceGroupWebPart.manifest.json" 50 | } 51 | ] 52 | }, 53 | "conditional-field-web-part": { 54 | "components": [ 55 | { 56 | "entrypoint": "./lib/webparts/conditionalField/ConditionalFieldWebPart.js", 57 | "manifest": "./src/webparts/conditionalField/ConditionalFieldWebPart.manifest.json" 58 | } 59 | ] 60 | }, 61 | "conditional-group-web-part": { 62 | "components": [ 63 | { 64 | "entrypoint": "./lib/webparts/conditionalGroup/ConditionalGroupWebPart.js", 65 | "manifest": "./src/webparts/conditionalGroup/ConditionalGroupWebPart.manifest.json" 66 | } 67 | ] 68 | } 69 | }, 70 | "externals": {}, 71 | "localizedResources": { 72 | "SinglePaneWebPartStrings": "lib/webparts/singlePane/loc/{locale}.js", 73 | "AccordionPaneWebPartStrings": "lib/webparts/accordionPane/loc/{locale}.js", 74 | "StepsPaneWebPartStrings": "lib/webparts/stepsPane/loc/{locale}.js", 75 | "NonReactiveWebPartStrings": "lib/webparts/nonReactive/loc/{locale}.js", 76 | "LoadingIndicatorWebPartStrings": "lib/webparts/loadingIndicator/loc/{locale}.js", 77 | "ChoiceGroupWebPartStrings": "lib/webparts/choiceGroup/loc/{locale}.js", 78 | "ConditionalFieldWebPartStrings": "lib/webparts/conditionalField/loc/{locale}.js", 79 | "ConditionalGroupWebPartStrings": "lib/webparts/conditionalGroup/loc/{locale}.js" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /PropertyPanes/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "temp/deploy" 4 | } 5 | -------------------------------------------------------------------------------- /PropertyPanes/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./temp/deploy/", 4 | "account": "", 5 | "container": "web-part-property-panes", 6 | "accessKey": "" 7 | } -------------------------------------------------------------------------------- /PropertyPanes/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "name": "web-part-property-panes-client-side-solution", 5 | "id": "943d74b4-3c40-4128-8272-8beef057ae7f", 6 | "version": "1.0.0.0", 7 | "includeClientSideAssets": true, 8 | "isDomainIsolated": false 9 | }, 10 | "paths": { 11 | "zippedPackage": "solution/web-part-property-panes.sppkg" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /PropertyPanes/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", 3 | "port": 4321, 4 | "https": true, 5 | "initialPage": "https://localhost:5432/workbench", 6 | "api": { 7 | "port": 5432, 8 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } -------------------------------------------------------------------------------- /PropertyPanes/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 6 | 7 | build.initialize(gulp); 8 | -------------------------------------------------------------------------------- /PropertyPanes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-part-property-panes", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "scripts": { 9 | "build": "gulp bundle", 10 | "clean": "gulp clean", 11 | "test": "gulp test" 12 | }, 13 | "dependencies": { 14 | "@microsoft/sp-core-library": "1.8.2", 15 | "@microsoft/sp-lodash-subset": "1.8.2", 16 | "@microsoft/sp-office-ui-fabric-core": "1.8.2", 17 | "@microsoft/sp-property-pane": "1.8.2", 18 | "@microsoft/sp-webpart-base": "1.8.2", 19 | "@types/es6-promise": "0.0.33", 20 | "@types/react": "16.7.22", 21 | "@types/react-dom": "16.8.0", 22 | "@types/webpack-env": "1.13.1", 23 | "office-ui-fabric-react": "6.143.0", 24 | "react": "16.7.0", 25 | "react-dom": "16.7.0" 26 | }, 27 | "resolutions": { 28 | "@types/react": "16.7.22" 29 | }, 30 | "devDependencies": { 31 | "@microsoft/sp-build-web": "1.8.2", 32 | "@microsoft/sp-tslint-rules": "1.8.2", 33 | "@microsoft/sp-module-interfaces": "1.8.2", 34 | "@microsoft/sp-webpart-workbench": "1.8.2", 35 | "@microsoft/rush-stack-compiler-2.9": "0.7.7", 36 | "gulp": "~3.9.1", 37 | "@types/chai": "3.4.34", 38 | "@types/mocha": "2.2.38", 39 | "ajv": "~5.2.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /PropertyPanes/src/index.ts: -------------------------------------------------------------------------------- 1 | // A file is required to be in the root of the /src directory by the TypeScript compiler 2 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/AccordionPaneWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "613b2be5-7d0d-4aa6-b186-04020eae9fdd", 4 | "alias": "AccordionPaneWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Accordion Pane" }, 21 | "description": { "default": "Demonstrates how to create an accordion pane property pane" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "demoProperty1": "Accordion Pane" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/AccordionPaneWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'AccordionPaneWebPartStrings'; 11 | import AccordionPane from './components/AccordionPane'; 12 | import { IAccordionPaneProps } from './components/IAccordionPaneProps'; 13 | 14 | export interface IAccordionPaneWebPartProps { 15 | demoProperty1: string; 16 | demoProperty2: string; 17 | demoProperty3: string; 18 | demoProperty4: string; 19 | demoProperty5: string; 20 | demoProperty6: string; 21 | } 22 | 23 | export default class AccordionPaneWebPart extends BaseClientSideWebPart { 24 | 25 | public render(): void { 26 | const element: React.ReactElement = React.createElement( 27 | AccordionPane, 28 | { 29 | description: this.properties.demoProperty1 30 | } 31 | ); 32 | 33 | ReactDom.render(element, this.domElement); 34 | } 35 | 36 | protected onDispose(): void { 37 | ReactDom.unmountComponentAtNode(this.domElement); 38 | } 39 | 40 | protected get dataVersion(): Version { 41 | return Version.parse('1.0'); 42 | } 43 | 44 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 45 | return { 46 | pages: [ 47 | { 48 | header: { 49 | description: "This web part demonstrates how to use an accordion property pane" 50 | }, 51 | // ADDED: to turn groups into accordions 52 | displayGroupsAsAccordion: true, 53 | // END added 54 | groups: [ 55 | { 56 | groupName: "Group 1", 57 | // ADDED: to collapse group initially 58 | isCollapsed: true, 59 | // END added 60 | groupFields: [ 61 | PropertyPaneTextField('demoProperty1', { 62 | label: "Property 1" 63 | }), 64 | PropertyPaneTextField('demoProperty2', { 65 | label: "Property 2" 66 | }) 67 | ] 68 | }, 69 | // ADDED: Group 2 and 3 for accordion support 70 | { 71 | groupName: "Group 2", 72 | // ADDED: to collapse group initially 73 | isCollapsed: true, 74 | // END added 75 | groupFields: [ 76 | PropertyPaneTextField('demoProperty3', { 77 | label: "Property 3" 78 | }), 79 | PropertyPaneTextField('demoProperty4', { 80 | label: "Property 4" 81 | }) 82 | ] 83 | }, 84 | { 85 | groupName: "Group 3", 86 | // ADDED: to collapse group initially 87 | isCollapsed: true, 88 | // END added 89 | groupFields: [ 90 | PropertyPaneTextField('demoProperty5', { 91 | label: "Property 5" 92 | }), 93 | PropertyPaneTextField('demoProperty6', { 94 | label: "Property 6" 95 | }) 96 | ] 97 | } 98 | // 99 | 100 | ] 101 | } 102 | ] 103 | }; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/components/AccordionPane.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .accordionPane { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/components/AccordionPane.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './AccordionPane.module.scss'; 3 | import { IAccordionPaneProps } from './IAccordionPaneProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class AccordionPane extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 | Welcome to SharePoint! 14 |

Customize SharePoint experiences using Web Parts.

15 |

{escape(this.props.description)}

16 | 17 | Learn more 18 | 19 |
20 |
21 |
22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/components/IAccordionPaneProps.ts: -------------------------------------------------------------------------------- 1 | export interface IAccordionPaneProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/accordionPane/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IAccordionPaneWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'AccordionPaneWebPartStrings' { 8 | const strings: IAccordionPaneWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/ChoiceGroupWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "645e0330-e33b-46cb-97ec-74be85f65a33", 4 | "alias": "ChoiceGroupWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Choice Group" }, 21 | "description": { "default": "Demonstrates how to use a choice group in a property pane" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "layout": "Brick", 25 | "shape": "Square" 26 | } 27 | }] 28 | } 29 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/ChoiceGroupWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneChoiceGroup 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'ChoiceGroupWebPartStrings'; 11 | import ChoiceGroup from './components/ChoiceGroup'; 12 | import { IChoiceGroupProps } from './components/IChoiceGroupProps'; 13 | 14 | export interface IChoiceGroupWebPartProps { 15 | layout: 'Brick'|'Grid'|'Carousel'; 16 | shape: 'Circle'|'Square'|'Triangle'; 17 | } 18 | 19 | export default class ChoiceGroupWebPart extends BaseClientSideWebPart { 20 | 21 | public render(): void { 22 | const element: React.ReactElement = React.createElement( 23 | ChoiceGroup, 24 | { 25 | layout: this.properties.layout, 26 | shape: this.properties.shape 27 | } 28 | ); 29 | 30 | ReactDom.render(element, this.domElement); 31 | } 32 | 33 | protected onDispose(): void { 34 | ReactDom.unmountComponentAtNode(this.domElement); 35 | } 36 | 37 | protected get dataVersion(): Version { 38 | return Version.parse('1.0'); 39 | } 40 | 41 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 42 | const layoutBrick: string = require('./assets/brick.svg'); 43 | const layoutGrid: string = require('./assets/grid.svg'); 44 | const layoutCarousel: string = require('./assets/carousel.svg'); 45 | return { 46 | pages: [ 47 | { 48 | header: { 49 | description: null 50 | }, 51 | groups: [ 52 | { 53 | //groupName: strings.BasicGroupName, 54 | groupFields: [ 55 | PropertyPaneChoiceGroup('layout', { 56 | label: "Layout", // don't forget to localize your test in a real-world solution 57 | options: [ 58 | { 59 | key: 'Brick', 60 | text: 'Brick', 61 | selectedImageSrc: layoutBrick, 62 | imageSrc: layoutBrick, 63 | }, 64 | { 65 | key: 'Grid', 66 | text: 'Grid', 67 | selectedImageSrc: layoutGrid, 68 | imageSrc: layoutGrid, 69 | }, 70 | { 71 | key: 'Carousel', 72 | text: 'Carousel', 73 | selectedImageSrc: layoutCarousel, 74 | imageSrc: layoutCarousel, 75 | } 76 | ] 77 | }), 78 | PropertyPaneChoiceGroup('shape', { 79 | label: "Shape", // don't forget to localize your test in a real-world solution 80 | options: [ 81 | { 82 | key: 'Circle', 83 | text: 'Circle', 84 | iconProps: { 85 | officeFabricIconFontName: 'CircleShapeSolid' 86 | } 87 | }, 88 | { 89 | key: 'Square', 90 | text: 'Square', 91 | iconProps: { 92 | officeFabricIconFontName: 'SquareShapeSolid' 93 | } 94 | }, 95 | { 96 | key: 'Triangle', 97 | text: 'Triangle', 98 | iconProps: { 99 | officeFabricIconFontName: 'TriangleShapeSolid' 100 | } 101 | } 102 | ] 103 | }), 104 | ] 105 | } 106 | ] 107 | } 108 | ] 109 | }; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/assets/brick.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 19 | 23 | 24 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/assets/carousel.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 16 | 18 | image/svg+xml 19 | 21 | 22 | 23 | 24 | 25 | 27 | 30 | 34 | 38 | 42 | 43 | 46 | 50 | 54 | 58 | 59 | 62 | 66 | 70 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/components/ChoiceGroup.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .choiceGroup { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | } 8 | 9 | .row { 10 | @include ms-Grid-row; 11 | @include ms-fontColor-white; 12 | background-color: $ms-color-themeDark; 13 | padding: 20px; 14 | } 15 | 16 | .column { 17 | @include ms-Grid-col; 18 | @include ms-lg10; 19 | @include ms-xl8; 20 | @include ms-xlPush2; 21 | @include ms-lgPush1; 22 | } 23 | 24 | .title { 25 | @include ms-font-xl; 26 | @include ms-fontColor-white; 27 | } 28 | 29 | .subTitle { 30 | @include ms-font-l; 31 | @include ms-fontColor-white; 32 | } 33 | 34 | .description { 35 | @include ms-font-l; 36 | @include ms-fontColor-white; 37 | } 38 | 39 | .button { 40 | // Our button 41 | text-decoration: none; 42 | height: 32px; 43 | 44 | // Primary Button 45 | min-width: 80px; 46 | background-color: $ms-color-themePrimary; 47 | border-color: $ms-color-themePrimary; 48 | color: $ms-color-white; 49 | 50 | // Basic Button 51 | outline: transparent; 52 | position: relative; 53 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 54 | -webkit-font-smoothing: antialiased; 55 | font-size: $ms-font-size-m; 56 | font-weight: $ms-font-weight-regular; 57 | border-width: 0; 58 | text-align: center; 59 | cursor: pointer; 60 | display: inline-block; 61 | padding: 0 16px; 62 | 63 | .label { 64 | font-weight: $ms-font-weight-semibold; 65 | font-size: $ms-font-size-m; 66 | height: 32px; 67 | line-height: 32px; 68 | margin: 0 4px; 69 | vertical-align: top; 70 | display: inline-block; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/components/ChoiceGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './ChoiceGroup.module.scss'; 3 | import { IChoiceGroupProps } from './IChoiceGroupProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class ChoiceGroup extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 |

Layout: {escape(this.props.layout)}

14 |

Shape: {escape(this.props.shape)}

15 |
16 |
17 | 18 |
19 |
20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/components/IChoiceGroupProps.ts: -------------------------------------------------------------------------------- 1 | export interface IChoiceGroupProps { 2 | layout: string; 3 | shape: string; 4 | } 5 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/choiceGroup/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IChoiceGroupWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | LayoutFieldLabel: string; 5 | } 6 | 7 | declare module 'ChoiceGroupWebPartStrings' { 8 | const strings: IChoiceGroupWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/ConditionalFieldWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "f7a66efd-a8a3-4b2c-8b05-3330582bffc7", 4 | "alias": "ConditionalFieldWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Conditional Field" }, 21 | "description": { "default": "Demonstrates how to hide/show a field based on another field's selection" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "conversationSource": "Group", 25 | "searchCriteria": "", 26 | "numberOfConversations": 8 27 | } 28 | }] 29 | } 30 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/ConditionalFieldWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField, 8 | PropertyPaneDropdown 9 | } from '@microsoft/sp-property-pane'; 10 | 11 | import * as strings from 'ConditionalFieldWebPartStrings'; 12 | import ConditionalField from './components/ConditionalField'; 13 | import { IConditionalFieldProps } from './components/IConditionalFieldProps'; 14 | 15 | export interface IConditionalFieldWebPartProps { 16 | conversationSource: 'Group'|'User'|'Topic'|'Home'; 17 | searchCriteria: string; 18 | numberOfConversations: number; 19 | } 20 | 21 | export default class ConditionalFieldWebPart extends BaseClientSideWebPart { 22 | 23 | public render(): void { 24 | const element: React.ReactElement = React.createElement( 25 | ConditionalField, 26 | { 27 | conversationSource: this.properties.conversationSource, 28 | searchCriteria: this.properties.searchCriteria, 29 | numberOfConversations: this.properties.numberOfConversations 30 | } 31 | ); 32 | 33 | ReactDom.render(element, this.domElement); 34 | } 35 | 36 | protected onDispose(): void { 37 | ReactDom.unmountComponentAtNode(this.domElement); 38 | } 39 | 40 | protected get dataVersion(): Version { 41 | return Version.parse('1.0'); 42 | } 43 | 44 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 45 | return { 46 | pages: [ 47 | { 48 | header: { 49 | description: "Select conversation source from groups, topics, users, or home." 50 | }, 51 | groups: [ 52 | { 53 | groupFields: [ 54 | PropertyPaneDropdown('conversationSource',{ 55 | label: "Select conversation source", 56 | selectedKey: this.properties.conversationSource, 57 | options: [ 58 | { 59 | key: "Group", 60 | text: "Group" 61 | }, 62 | { 63 | key: "User", 64 | text: "User" 65 | }, 66 | { 67 | key: "Topic", 68 | text: "Topic" 69 | }, 70 | { 71 | key: "Home", 72 | text: "Home" 73 | }, 74 | 75 | ] 76 | }), 77 | this.properties.conversationSource !== "Home" && PropertyPaneTextField('searchCriteria', { 78 | label: "Search for a source", 79 | placeholder: "Type to search" 80 | }), 81 | PropertyPaneDropdown('numberOfConversations',{ 82 | disabled: this.properties.conversationSource !== "Home", 83 | label: "Number of conversations to show", 84 | selectedKey: this.properties.conversationSource, 85 | options: [ 86 | { 87 | key: 4, 88 | text: "Small - 4 conversations" 89 | }, 90 | { 91 | key: 8, 92 | text: "Medium - 8 conversations" 93 | }, 94 | { 95 | key: 12, 96 | text: "Large - 12 conversations" 97 | } 98 | ] 99 | }) 100 | ] 101 | } 102 | ] 103 | } 104 | ] 105 | }; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/components/ConditionalField.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .conditionalField { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/components/ConditionalField.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './ConditionalField.module.scss'; 3 | import { IConditionalFieldProps } from './IConditionalFieldProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class ConditionalField extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 |

Source: {this.props.conversationSource}

14 |

Search criteria: {escape(this.props.searchCriteria)}

15 |

Number of conversations: {this.props.numberOfConversations}

16 |
17 |
18 |
19 |
20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/components/IConditionalFieldProps.ts: -------------------------------------------------------------------------------- 1 | export interface IConditionalFieldProps { 2 | conversationSource: string; 3 | searchCriteria: string; 4 | numberOfConversations: number; 5 | } 6 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalField/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IConditionalFieldWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'ConditionalFieldWebPartStrings' { 8 | const strings: IConditionalFieldWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/ConditionalGroupWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "8e494adf-a15a-4ff4-b2b8-94a84f4e2496", 4 | "alias": "ConditionalGroupWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Conditional Group" }, 21 | "description": { "default": "Demonstrates how to create a conditional property pane group" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "chartType": "Column" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/ConditionalGroupWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneChoiceGroup, 8 | PropertyPaneLabel 9 | } from '@microsoft/sp-property-pane'; 10 | 11 | import * as strings from 'ConditionalGroupWebPartStrings'; 12 | import ConditionalGroup from './components/ConditionalGroup'; 13 | import { IConditionalGroupProps } from './components/IConditionalGroupProps'; 14 | 15 | export interface IConditionalGroupWebPartProps { 16 | chartType: "Column" | "Pie"; 17 | } 18 | 19 | export default class ConditionalGroupWebPart extends BaseClientSideWebPart { 20 | 21 | public render(): void { 22 | const element: React.ReactElement = React.createElement( 23 | ConditionalGroup, 24 | { 25 | chartType: this.properties.chartType 26 | } 27 | ); 28 | 29 | ReactDom.render(element, this.domElement); 30 | } 31 | 32 | protected onDispose(): void { 33 | ReactDom.unmountComponentAtNode(this.domElement); 34 | } 35 | 36 | protected get dataVersion(): Version { 37 | return Version.parse('1.0'); 38 | } 39 | 40 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 41 | const chartDescription: string = this.properties.chartType === "Column" ? 42 | "Use a column chart to show data changes over time or comparisons among items. Categories are typically shown along the horizontal axis and values along the vertical axis." 43 | : "Use a pie chart to show percentages of a whole. Best when used with fewer than seven categories."; 44 | 45 | const configuration: IPropertyPaneConfiguration = { 46 | pages: [ 47 | { 48 | header: { 49 | description: "Select a chart type and then select a data source. You can enter up to 12 data points, or show up to 50 data points if you use a SharePoint list on this site as the data source." 50 | }, 51 | displayGroupsAsAccordion: true, 52 | groups: [ 53 | { 54 | groupName: "Chart type", 55 | groupFields: [ 56 | PropertyPaneChoiceGroup('chartType', { 57 | options: [ 58 | { 59 | key: 'Column', 60 | text: 'Column chart', 61 | iconProps: { 62 | officeFabricIconFontName: 'BarChart4' 63 | } 64 | }, 65 | { 66 | key: 'Pie', 67 | text: 'Pie chart', 68 | iconProps: { 69 | officeFabricIconFontName: 'PieDouble' 70 | } 71 | } 72 | ] 73 | }), 74 | PropertyPaneLabel('chartType', { 75 | text: chartDescription 76 | }), 77 | 78 | ] 79 | }, 80 | { 81 | groupName: "Data", 82 | isCollapsed: false, 83 | groupFields: [ 84 | PropertyPaneLabel('data', { 85 | text: "This is some sample text for the data property group." 86 | }), 87 | ] 88 | } 89 | ] 90 | } 91 | ] 92 | }; 93 | 94 | // If the selected type is not Column, we don't need to make any further changes 95 | if (this.properties.chartType !== "Column") { 96 | return configuration; 97 | } 98 | 99 | // Get the list of property groups 100 | const { groups } = configuration.pages[0]; 101 | 102 | // Insert a property pane 103 | groups.push({ 104 | groupName: "Layout", 105 | isCollapsed: false, 106 | groupFields: [ 107 | PropertyPaneLabel('layout', { 108 | text: "This is some sample text for the layout property group." 109 | }), 110 | ] 111 | }); 112 | 113 | return configuration; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/components/ConditionalGroup.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .conditionalGroup { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/components/ConditionalGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './ConditionalGroup.module.scss'; 3 | import { IConditionalGroupProps } from './IConditionalGroupProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class ConditionalGroup extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 |

Chart type: {escape(this.props.chartType)}

14 |
15 |
16 |
17 |
18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/components/IConditionalGroupProps.ts: -------------------------------------------------------------------------------- 1 | export interface IConditionalGroupProps { 2 | chartType: string; 3 | } 4 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/conditionalGroup/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IConditionalGroupWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'ConditionalGroupWebPartStrings' { 8 | const strings: IConditionalGroupWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/loadingIndicator/LoadingIndicatorWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "e9181701-08e4-4b3f-9e43-ec1238becd93", 4 | "alias": "LoadingIndicatorWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Loading Indicator" }, 21 | "description": { "default": "Demonstrates how to create a property pane with a loading indicator" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "description": "Loading Indicator" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/loadingIndicator/components/ILoadingIndicatorProps.ts: -------------------------------------------------------------------------------- 1 | export interface ILoadingIndicatorProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/loadingIndicator/components/LoadingIndicator.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .loadingIndicator { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/loadingIndicator/components/LoadingIndicator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './LoadingIndicator.module.scss'; 3 | import { ILoadingIndicatorProps } from './ILoadingIndicatorProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class LoadingIndicator extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 | Welcome to SharePoint! 14 |

Customize SharePoint experiences using Web Parts.

15 |

{escape(this.props.description)}

16 | 17 | Learn more 18 | 19 |
20 |
21 |
22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/loadingIndicator/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/loadingIndicator/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ILoadingIndicatorWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'LoadingIndicatorWebPartStrings' { 8 | const strings: ILoadingIndicatorWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/NonReactiveWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "bb1411b0-c355-465d-a4c6-14588ff85ffd", 4 | "alias": "NonReactiveWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Non-Reactive" }, 21 | "description": { "default": "Demonstrates how to create a non-reactive web part" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "description": "Non-Reactive" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/NonReactiveWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'NonReactiveWebPartStrings'; 11 | import NonReactive from './components/NonReactive'; 12 | import { INonReactiveProps } from './components/INonReactiveProps'; 13 | 14 | export interface INonReactiveWebPartProps { 15 | description: string; 16 | } 17 | 18 | export default class NonReactiveWebPart extends BaseClientSideWebPart { 19 | 20 | public render(): void { 21 | const element: React.ReactElement = React.createElement( 22 | NonReactive, 23 | { 24 | description: this.properties.description 25 | } 26 | ); 27 | 28 | ReactDom.render(element, this.domElement); 29 | } 30 | 31 | protected onDispose(): void { 32 | ReactDom.unmountComponentAtNode(this.domElement); 33 | } 34 | 35 | protected get dataVersion(): Version { 36 | return Version.parse('1.0'); 37 | } 38 | 39 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 40 | return { 41 | pages: [ 42 | { 43 | header: { 44 | description: strings.PropertyPaneDescription 45 | }, 46 | groups: [ 47 | { 48 | groupName: strings.BasicGroupName, 49 | groupFields: [ 50 | PropertyPaneTextField('description', { 51 | label: strings.DescriptionFieldLabel 52 | }) 53 | ] 54 | } 55 | ] 56 | } 57 | ] 58 | }; 59 | } 60 | 61 | // ADDED:to make web part non-reactice 62 | protected get disableReactivePropertyChanges(): boolean { 63 | return true; 64 | } 65 | // END: added 66 | } 67 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/components/INonReactiveProps.ts: -------------------------------------------------------------------------------- 1 | export interface INonReactiveProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/components/NonReactive.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .nonReactive { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/components/NonReactive.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './NonReactive.module.scss'; 3 | import { INonReactiveProps } from './INonReactiveProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class NonReactive extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 | Welcome to SharePoint! 14 |

Customize SharePoint experiences using Web Parts.

15 |

{escape(this.props.description)}

16 | 17 | Learn more 18 | 19 |
20 |
21 |
22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/nonReactive/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface INonReactiveWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'NonReactiveWebPartStrings' { 8 | const strings: INonReactiveWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/SinglePaneWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "74299444-3d61-4ef6-8689-c6aac4ed0db5", 4 | "alias": "SinglePaneWebPart", 5 | "componentType": "WebPart", 6 | 7 | "version": "*", 8 | "manifestVersion": 2, 9 | 10 | "requiresCustomScript": false, 11 | "supportedHosts": ["SharePointWebPart"], 12 | 13 | "preconfiguredEntries": [{ 14 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", 15 | "group": { "default": "Other" }, 16 | "title": { "default": "Single Pane" }, 17 | "description": { "default": "Displays a single pane property pane" }, 18 | "officeFabricIconFontName": "Page", 19 | "properties": { 20 | "description": "SinglePane" 21 | } 22 | }] 23 | } 24 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/SinglePaneWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'SinglePaneWebPartStrings'; 11 | import SinglePane from './components/SinglePane'; 12 | import { ISinglePaneProps } from './components/ISinglePaneProps'; 13 | 14 | export interface ISinglePaneWebPartProps { 15 | description: string; 16 | } 17 | 18 | export default class SinglePaneWebPart extends BaseClientSideWebPart { 19 | 20 | public render(): void { 21 | const element: React.ReactElement = React.createElement( 22 | SinglePane, 23 | { 24 | description: this.properties.description 25 | } 26 | ); 27 | 28 | ReactDom.render(element, this.domElement); 29 | } 30 | 31 | protected onDispose(): void { 32 | ReactDom.unmountComponentAtNode(this.domElement); 33 | } 34 | 35 | protected get dataVersion(): Version { 36 | return Version.parse('1.0'); 37 | } 38 | 39 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 40 | return { 41 | pages: [ 42 | { 43 | // REMOVED: To hide the property pane page description 44 | // header: { 45 | // description: "This is the pane description" 46 | // }, 47 | groups: [ 48 | { 49 | //REMOVED: For single pane property pane 50 | //groupName: "This is the group name", 51 | groupFields: [ 52 | PropertyPaneTextField('description', { 53 | label: "This is the field label" 54 | }) 55 | ] 56 | } 57 | ] 58 | } 59 | ] 60 | }; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/components/ISinglePaneProps.ts: -------------------------------------------------------------------------------- 1 | export interface ISinglePaneProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/components/SinglePane.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .singlePane { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/components/SinglePane.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './SinglePane.module.scss'; 3 | import { ISinglePaneProps } from './ISinglePaneProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class SinglePane extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 | Welcome to SharePoint! 14 |

Customize SharePoint experiences using Web Parts.

15 |

{escape(this.props.description)}

16 | 17 | Learn more 18 | 19 |
20 |
21 |
22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "This web part demonstrates how to create a single pane property pane.", 4 | "DescriptionFieldLabel": "Description Field" 5 | } 6 | }); 7 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/singlePane/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ISinglePaneWebPartStrings { 2 | PropertyPaneDescription: string; 3 | DescriptionFieldLabel: string; 4 | } 5 | 6 | declare module 'SinglePaneWebPartStrings' { 7 | const strings: ISinglePaneWebPartStrings; 8 | export = strings; 9 | } 10 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/stepsPane/StepsPaneWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "ed29d6e3-033a-427f-8c37-70a73c823c4b", 4 | "alias": "StepsPaneWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Steps Pane" }, 21 | "description": { "default": "Demonstrates how to create a steps pane property pane web part" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "description": "Steps Pane" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/stepsPane/components/IStepsPaneProps.ts: -------------------------------------------------------------------------------- 1 | export interface IStepsPaneProps { 2 | description: string; 3 | } 4 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/stepsPane/components/StepsPane.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .stepsPane { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/stepsPane/components/StepsPane.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './StepsPane.module.scss'; 3 | import { IStepsPaneProps } from './IStepsPaneProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | export default class StepsPane extends React.Component { 7 | public render(): React.ReactElement { 8 | return ( 9 |
10 |
11 |
12 |
13 | Welcome to SharePoint! 14 |

Customize SharePoint experiences using Web Parts.

15 |

{escape(this.props.description)}

16 | 17 | Learn more 18 | 19 |
20 |
21 |
22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/stepsPane/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /PropertyPanes/src/webparts/stepsPane/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IStepsPaneWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'StepsPaneWebPartStrings' { 8 | const strings: IStepsPaneWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /PropertyPanes/teams/613b2be5-7d0d-4aa6-b186-04020eae9fdd_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/613b2be5-7d0d-4aa6-b186-04020eae9fdd_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/613b2be5-7d0d-4aa6-b186-04020eae9fdd_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/613b2be5-7d0d-4aa6-b186-04020eae9fdd_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/645e0330-e33b-46cb-97ec-74be85f65a33_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/645e0330-e33b-46cb-97ec-74be85f65a33_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/645e0330-e33b-46cb-97ec-74be85f65a33_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/645e0330-e33b-46cb-97ec-74be85f65a33_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/74299444-3d61-4ef6-8689-c6aac4ed0db5_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/74299444-3d61-4ef6-8689-c6aac4ed0db5_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/74299444-3d61-4ef6-8689-c6aac4ed0db5_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/74299444-3d61-4ef6-8689-c6aac4ed0db5_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/8e494adf-a15a-4ff4-b2b8-94a84f4e2496_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/8e494adf-a15a-4ff4-b2b8-94a84f4e2496_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/8e494adf-a15a-4ff4-b2b8-94a84f4e2496_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/8e494adf-a15a-4ff4-b2b8-94a84f4e2496_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/9777980f-b674-4ced-ac4d-1caaab4ae22d_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/9777980f-b674-4ced-ac4d-1caaab4ae22d_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/9777980f-b674-4ced-ac4d-1caaab4ae22d_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/9777980f-b674-4ced-ac4d-1caaab4ae22d_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/bb1411b0-c355-465d-a4c6-14588ff85ffd_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/bb1411b0-c355-465d-a4c6-14588ff85ffd_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/bb1411b0-c355-465d-a4c6-14588ff85ffd_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/bb1411b0-c355-465d-a4c6-14588ff85ffd_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/e0ff7aa5-f2fe-46ae-9b6c-75ff8f246723_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/e0ff7aa5-f2fe-46ae-9b6c-75ff8f246723_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/e0ff7aa5-f2fe-46ae-9b6c-75ff8f246723_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/e0ff7aa5-f2fe-46ae-9b6c-75ff8f246723_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/e9181701-08e4-4b3f-9e43-ec1238becd93_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/e9181701-08e4-4b3f-9e43-ec1238becd93_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/e9181701-08e4-4b3f-9e43-ec1238becd93_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/e9181701-08e4-4b3f-9e43-ec1238becd93_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/ed29d6e3-033a-427f-8c37-70a73c823c4b_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/ed29d6e3-033a-427f-8c37-70a73c823c4b_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/ed29d6e3-033a-427f-8c37-70a73c823c4b_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/ed29d6e3-033a-427f-8c37-70a73c823c4b_outline.png -------------------------------------------------------------------------------- /PropertyPanes/teams/f7a66efd-a8a3-4b2c-8b05-3330582bffc7_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/f7a66efd-a8a3-4b2c-8b05-3330582bffc7_color.png -------------------------------------------------------------------------------- /PropertyPanes/teams/f7a66efd-a8a3-4b2c-8b05-3330582bffc7_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/PropertyPanes/teams/f7a66efd-a8a3-4b2c-8b05-3330582bffc7_outline.png -------------------------------------------------------------------------------- /PropertyPanes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "forceConsistentCasingInFileNames": true, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "jsx": "react", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "experimentalDecorators": true, 12 | "skipLibCheck": true, 13 | "outDir": "lib", 14 | "inlineSources": false, 15 | "strictNullChecks": false, 16 | "noUnusedLocals": false, 17 | "typeRoots": [ 18 | "./node_modules/@types", 19 | "./node_modules/@microsoft" 20 | ], 21 | "types": [ 22 | "es6-promise", 23 | "webpack-env" 24 | ], 25 | "lib": [ 26 | "es5", 27 | "dom", 28 | "es2015.collection" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "lib" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /PropertyPanes/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@microsoft/sp-tslint-rules/base-tslint.json", 3 | "rules": { 4 | "class-name": false, 5 | "export-name": false, 6 | "forin": false, 7 | "label-position": false, 8 | "member-access": true, 9 | "no-arg": false, 10 | "no-console": false, 11 | "no-construct": false, 12 | "no-duplicate-variable": true, 13 | "no-eval": false, 14 | "no-function-expression": true, 15 | "no-internal-module": true, 16 | "no-shadowed-variable": true, 17 | "no-switch-case-fall-through": true, 18 | "no-unnecessary-semicolons": true, 19 | "no-unused-expression": true, 20 | "no-use-before-declare": true, 21 | "no-with-statement": true, 22 | "semicolon": true, 23 | "trailing-comma": false, 24 | "typedef": false, 25 | "typedef-whitespace": false, 26 | "use-named-parameter": true, 27 | "variable-name": false, 28 | "whitespace": false 29 | } 30 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Part Design Series 2 | Web part solutions to accompany [a series of posts](https://tahoeninjas.blog/2019/07/08/introducing-the-sharepoint-framework-design-series/) on SPFx Web Part Design. 3 | -------------------------------------------------------------------------------- /WebPartLayouts/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /WebPartLayouts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /WebPartLayouts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "msjsdiag.debugger-for-chrome" 4 | ] 5 | } -------------------------------------------------------------------------------- /WebPartLayouts/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Local workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://localhost:4321/temp/workbench.html", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///.././src/*": "${webRoot}/src/*", 16 | "webpack:///../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../src/*": "${webRoot}/src/*", 18 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 19 | }, 20 | "runtimeArgs": [ 21 | "--remote-debugging-port=9222" 22 | ] 23 | }, 24 | { 25 | "name": "Hosted workbench", 26 | "type": "chrome", 27 | "request": "launch", 28 | "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 29 | "webRoot": "${workspaceRoot}", 30 | "sourceMaps": true, 31 | "sourceMapPathOverrides": { 32 | "webpack:///.././src/*": "${webRoot}/src/*", 33 | "webpack:///../../../src/*": "${webRoot}/src/*", 34 | "webpack:///../../../../src/*": "${webRoot}/src/*", 35 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 36 | }, 37 | "runtimeArgs": [ 38 | "--remote-debugging-port=9222", 39 | "-incognito" 40 | ] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /WebPartLayouts/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /WebPartLayouts/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "isCreatingSolution": false, 4 | "environment": "spo", 5 | "version": "1.8.2", 6 | "libraryName": "web-part-layouts", 7 | "libraryId": "3a0b107e-af35-4d55-8a2e-61ae9dfaa21c", 8 | "packageManager": "npm", 9 | "isDomainIsolated": false, 10 | "componentType": "webpart" 11 | } 12 | } -------------------------------------------------------------------------------- /WebPartLayouts/README.md: -------------------------------------------------------------------------------- 1 | # WebPartLayouts 2 | 3 | ## Summary 4 | 5 | Shows how to use the various web part layouts. 6 | 7 | ### Grid Control 8 | 9 | ![Grid Control Sample](./assets/CustomGridControl.gif) 10 | 11 | ![Out-of-the-box vs. Custome](./assets/image-1564342248026.png) 12 | 13 | ## Used SharePoint Framework Version 14 | 15 | ![SPFx v1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) 16 | 17 | ## Applies to 18 | 19 | * [SharePoint Framework](https:/dev.office.com/sharepoint) 20 | * [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) 21 | 22 | ## Prerequisites 23 | 24 | There are no pre-requisites 25 | 26 | ## Solution 27 | 28 | Solution|Author(s) 29 | --------|--------- 30 | WebPartLayouts | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), [@bernierh](https://www.twitter.com/bernierh)) 31 | 32 | ## Version history 33 | 34 | Version|Date|Comments 35 | -------|----|-------- 36 | 1.0|July 28, 2019|Initial release 37 | 38 | ## Disclaimer 39 | 40 | **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.** 41 | 42 | --- 43 | 44 | ## Minimal Path to Awesome 45 | 46 | * Clone this repository 47 | * in the command line run: 48 | * `npm install` 49 | * `gulp serve` 50 | 51 | 52 | ## Features 53 | 54 | This solution contains the following features: 55 | 56 | * Grid Layout control 57 | -------------------------------------------------------------------------------- /WebPartLayouts/assets/CustomGridControl.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/assets/CustomGridControl.gif -------------------------------------------------------------------------------- /WebPartLayouts/assets/image-1564342248026.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/assets/image-1564342248026.png -------------------------------------------------------------------------------- /WebPartLayouts/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "grid-layout-web-part": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/webparts/grid/GridWebPart.js", 9 | "manifest": "./src/webparts/grid/GridWebPart.manifest.json" 10 | } 11 | ] 12 | }, 13 | "filmstrip-web-part": { 14 | "components": [ 15 | { 16 | "entrypoint": "./lib/webparts/filmstrip/FilmstripWebPart.js", 17 | "manifest": "./src/webparts/filmstrip/FilmstripWebPart.manifest.json" 18 | } 19 | ] 20 | }, 21 | "carousel-web-part": { 22 | "components": [ 23 | { 24 | "entrypoint": "./lib/webparts/carousel/CarouselWebPart.js", 25 | "manifest": "./src/webparts/carousel/CarouselWebPart.manifest.json" 26 | } 27 | ] 28 | }, 29 | "compact-web-part": { 30 | "components": [ 31 | { 32 | "entrypoint": "./lib/webparts/compact/CompactWebPart.js", 33 | "manifest": "./src/webparts/compact/CompactWebPart.manifest.json" 34 | } 35 | ] 36 | } 37 | }, 38 | "externals": {}, 39 | "localizedResources": { 40 | "GridWebPartStrings": "lib/webparts/grid/loc/{locale}.js", 41 | "FilmstripWebPartStrings": "lib/webparts/filmstrip/loc/{locale}.js", 42 | "CarouselWebPartStrings": "lib/webparts/carousel/loc/{locale}.js", 43 | "CompactWebPartStrings": "lib/webparts/compact/loc/{locale}.js" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /WebPartLayouts/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "temp/deploy" 4 | } 5 | -------------------------------------------------------------------------------- /WebPartLayouts/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./temp/deploy/", 4 | "account": "", 5 | "container": "web-part-layouts", 6 | "accessKey": "" 7 | } -------------------------------------------------------------------------------- /WebPartLayouts/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "name": "web-part-layouts-client-side-solution", 5 | "id": "3a0b107e-af35-4d55-8a2e-61ae9dfaa21c", 6 | "version": "1.0.0.0", 7 | "includeClientSideAssets": true, 8 | "isDomainIsolated": false 9 | }, 10 | "paths": { 11 | "zippedPackage": "solution/web-part-layouts.sppkg" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /WebPartLayouts/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", 3 | "port": 4321, 4 | "https": true, 5 | "initialPage": "https://localhost:5432/workbench", 6 | "api": { 7 | "port": 5432, 8 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /WebPartLayouts/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } -------------------------------------------------------------------------------- /WebPartLayouts/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 6 | 7 | build.initialize(gulp); 8 | -------------------------------------------------------------------------------- /WebPartLayouts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-part-layouts", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "scripts": { 9 | "build": "gulp bundle", 10 | "clean": "gulp clean", 11 | "test": "gulp test" 12 | }, 13 | "dependencies": { 14 | "@microsoft/sp-core-library": "1.9.1", 15 | "@microsoft/sp-lodash-subset": "1.9.1", 16 | "@microsoft/sp-office-ui-fabric-core": "1.9.1", 17 | "@microsoft/sp-property-pane": "1.8.2", 18 | "@microsoft/sp-webpart-base": "1.9.1", 19 | "@rehooks/component-size": "^1.0.3", 20 | "@types/es6-promise": "0.0.33", 21 | "@types/react": "16.8.8", 22 | "@types/react-dom": "16.8.3", 23 | "@types/webpack-env": "1.13.1", 24 | "office-ui-fabric-react": "6.189.2", 25 | "react": "16.8.5", 26 | "react-dom": "16.8.5", 27 | "react-slick": "^0.23.2", 28 | "slick-carousel": "^1.8.1" 29 | }, 30 | "resolutions": { 31 | "@types/react": "16.8.8" 32 | }, 33 | "devDependencies": { 34 | "@microsoft/sp-build-web": "1.9.1", 35 | "@microsoft/sp-tslint-rules": "1.9.1", 36 | "@microsoft/sp-module-interfaces": "1.9.1", 37 | "@microsoft/sp-webpart-workbench": "1.9.1", 38 | "@microsoft/rush-stack-compiler-2.9": "0.7.16", 39 | "gulp": "~3.9.1", 40 | "@types/chai": "3.4.34", 41 | "@types/mocha": "2.2.38", 42 | "ajv": "~5.2.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/carouselLayout/CarouselLayout.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | :export { 4 | centerPadding: 50px; 5 | } 6 | 7 | .carouselLayout { 8 | position: relative; 9 | 10 | &.carouselStrip { 11 | margin: 0 -10px; 12 | 13 | :global(.slick-slide) { 14 | box-sizing: border-box; 15 | padding: 0 10px; 16 | } 17 | } 18 | 19 | .sliderButtons { 20 | opacity: 0; 21 | } 22 | 23 | .sliderButtonRight { 24 | right: 10px; 25 | } 26 | 27 | .sliderButtonLeft { 28 | left: 10px; 29 | } 30 | 31 | &:hover .sliderButtons { 32 | opacity: 1; 33 | 34 | &:hover { 35 | color: $ms-color-white; 36 | } 37 | } 38 | } 39 | 40 | .indexButtonContainer { 41 | position: absolute; 42 | top: 0; 43 | bottom: 0; 44 | z-index: 1; 45 | } 46 | 47 | .indexButton { 48 | font-size: 17px; 49 | font-weight: 300; 50 | height: 40px; 51 | padding: 0; 52 | border: 0; 53 | background: 0 0; 54 | cursor: pointer; 55 | color: $ms-color-white; 56 | width: 40px; 57 | min-width: 20px; 58 | margin-left: 0; 59 | line-height: 40px; 60 | box-sizing: content-box; 61 | background-color: $ms-color-black; 62 | opacity: 0.6; 63 | position: absolute; 64 | top: 50%; 65 | transform: translateY(-50%); 66 | transition: all 0.3s; 67 | 68 | .currentActiveItem { 69 | font-size: 17px; 70 | font-weight: 300; 71 | text-align: center; 72 | padding: 16px; 73 | } 74 | 75 | &:hover { 76 | color: $ms-color-white; 77 | } 78 | 79 | &:active { 80 | outline: -webkit-focus-ring-color auto 1px; 81 | } 82 | } 83 | 84 | .indexButton:global(.ms-Button-flexContainer):hover:global(.ms-Icon), 85 | .indexButton:global(.ms-Icon:hover), 86 | .indexButton:hover:global(.ms-Icon) { 87 | color: $ms-color-white; 88 | } 89 | 90 | .leftPositioned { 91 | left: 0; 92 | } 93 | 94 | .rightPositioned { 95 | right: 0; 96 | } 97 | 98 | .currentActiveItem { 99 | font-size: 17px; 100 | font-weight: 300; 101 | text-align: center; 102 | padding: 16px; 103 | text-align: center; 104 | color: #333; 105 | } 106 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/carouselLayout/CarouselLayout.types.ts: -------------------------------------------------------------------------------- 1 | export interface ICarouselLayoutProps { 2 | ariaLabel?: string; 3 | pagingTemplate?: string; 4 | items: ICarouselItem[]; 5 | onSlideClick?: (currentIndex: number) => void; 6 | onBeforeChange?: (currentIndex: number) => void; 7 | onAfterChange?: (currentIndex: number) => void; 8 | } 9 | 10 | export interface ICarouselLayoutState { 11 | currentSlide: number; 12 | width: number; 13 | height: number; 14 | } 15 | 16 | export interface ICarouselItem { 17 | imageSrc: string; 18 | title: string; 19 | location: string; 20 | } 21 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/carouselLayout/CarouselSlide.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | .carouselSlideWrapper { 4 | text-align: center; 5 | width: 100%; 6 | 7 | .carouselSlide { 8 | background-color: $ms-color-neutralLighter; 9 | -webkit-transition: -webkit-transform 0.1s linear; 10 | transition: -webkit-transform 0.1s linear; 11 | transition: transform 0.1s linear; 12 | transition: transform 0.1s linear, -webkit-transform 0.1s linear; 13 | position: relative; 14 | display: inline-block; 15 | left: 0; 16 | right: 0; 17 | top: 0; 18 | bottom: 0; 19 | cursor: pointer; 20 | -webkit-touch-callout: none; 21 | -webkit-user-select: none; 22 | -moz-user-select: none; 23 | -ms-user-select: none; 24 | user-select: none; 25 | overflow: hidden; 26 | -webkit-box-sizing: border-box; 27 | box-sizing: border-box; 28 | 29 | &:active { 30 | -webkit-transform: scale(0.96); 31 | transform: scale(0.96); 32 | } 33 | 34 | .carouselSlideContent { 35 | width: 100%; 36 | height: 100%; 37 | 38 | .carouselSlideFileContainer { 39 | border-width: 1px; 40 | border-style: solid; 41 | border-color: $ms-color-neutralLight; 42 | background-color: $ms-color-neutralLighter; 43 | position: absolute; 44 | left: 0; 45 | right: 0; 46 | top: 0; 47 | bottom: 0; 48 | 49 | .carouselSlideThumbnail { 50 | text-align: center; 51 | overflow: hidden; 52 | width: 100%; 53 | height: 100%; 54 | } 55 | 56 | .carouselSlideNamePlate { 57 | opacity: 0.95; 58 | border-top-width: 1px; 59 | border-top-style: solid; 60 | border-top-color: $ms-color-neutralLight; 61 | min-height: 35px; 62 | position: absolute; 63 | bottom: 0; 64 | left: 0; 65 | right: 0; 66 | min-height: 20px; 67 | padding: 4px 8px 8px; 68 | background-color: $ms-color-white; 69 | color: $ms-color-neutralPrimary; 70 | white-space: nowrap; 71 | text-overflow: ellipsis; 72 | 73 | .carouselSlideName { 74 | font-size: 15px; 75 | line-height: 20px; 76 | overflow: hidden; 77 | white-space: nowrap; 78 | text-overflow: ellipsis; 79 | } 80 | 81 | .carouselSlideSubText { 82 | font-size: 11px; 83 | opacity: 0.7; 84 | overflow: hidden; 85 | white-space: nowrap; 86 | text-overflow: ellipsis; 87 | } 88 | } 89 | } 90 | } 91 | 92 | &:focus { 93 | .carouselSlideContent { 94 | content: ''; 95 | position: absolute; 96 | right: 2px; 97 | left: 2px; 98 | top: 2px; 99 | bottom: 2px; 100 | border-width: 1px; 101 | border-style: solid; 102 | border-color: $ms-color-white; 103 | -webkit-box-shadow: 0 0 0 2px $ms-color-neutralSecondary; 104 | box-shadow: 0 0 0 2px $ms-color-neutralSecondary; 105 | } 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/carouselLayout/CarouselSlide.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './CarouselSlide.module.scss'; 3 | import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image'; 4 | import { ICarouselSlideProps, ICarouselSlideState } from './CarouselSlide.types'; 5 | 6 | export class CarouselSlide extends React.Component { 7 | public render(): React.ReactElement { 8 | const { imageSrc, title, location, height, width, onClick } = this.props; 9 | return ( 10 |
11 | { onClick(); }}> 12 |
15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | {title} 23 |
24 |
25 | {location} 26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 | ); 34 | } 35 | } 36 | 37 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/carouselLayout/CarouselSlide.types.ts: -------------------------------------------------------------------------------- 1 | export interface ICarouselSlideProps { 2 | imageSrc: string; 3 | title: string; 4 | location: string; 5 | height: number; 6 | width: number; 7 | onClick?: () => void; 8 | } 9 | 10 | export interface ICarouselSlideState { } 11 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/carouselLayout/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CarouselLayout"; 2 | export * from "./CarouselLayout.types"; 3 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/compactLayout/CompactLayout.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | :export { 4 | padding: 20; 5 | minWidth: 210; 6 | maxWidth: 320; 7 | rowsPerPage: 3; 8 | } 9 | 10 | .compactLayout { 11 | overflow: hidden; 12 | font-size: 0; 13 | position: relative; 14 | background-color: transparent; 15 | 16 | :global(.ms-DocumentCard) { 17 | position: relative; 18 | background-color: $ms-color-white; 19 | height: 100%; 20 | 21 | &:global(.ms-DocumentCard--compact), &:global(.ms-DocumentCard--actionable) { 22 | border: none; 23 | 24 | :global(.ms-DocumentCardPreview) { 25 | -ms-flex-negative: 0; 26 | flex-shrink: 0; 27 | width: 48px; 28 | } 29 | 30 | :global(.ms-DocumentCardTitle) { 31 | font-weight: 400; 32 | } 33 | 34 | &:hover { 35 | border: none; 36 | 37 | &::after { 38 | border:none; 39 | } 40 | } 41 | } 42 | } 43 | 44 | :global(.ms-List-cell) { 45 | vertical-align: top; 46 | display: inline-block; 47 | margin-bottom: 20px; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/compactLayout/CompactLayout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './CompactLayout.module.scss'; 3 | 4 | import { FocusZone, FocusZoneDirection, List, css } from "office-ui-fabric-react"; 5 | import { ICompactLayoutProps, ICompactLayoutState } from './CompactLayout.types'; 6 | import { IRectangle } from 'office-ui-fabric-react/lib/Utilities'; 7 | 8 | const ROWS_PER_PAGE: number = +styles.rowsPerPage; 9 | const MAX_ROW_HEIGHT: number = +styles.maxWidth; 10 | const PADDING: number = +styles.padding; 11 | const MIN_WIDTH: number = +styles.minWidth; 12 | 13 | 14 | export default class CompactLayout extends React.Component { 15 | private _columnCount: number; 16 | private _columnWidth: number; 17 | private _rowHeight: number; 18 | 19 | constructor(props: ICompactLayoutProps) { 20 | super(props); 21 | 22 | this.state = { 23 | events: [], 24 | currentPage: 1 25 | }; 26 | } 27 | 28 | public render(): React.ReactElement { 29 | const { 30 | currentPage 31 | } = this.state; 32 | 33 | const { items } = this.props; 34 | 35 | let pagedItems: any[] = items; 36 | let usePaging: boolean = false; 37 | 38 | return ( 39 |
40 | 45 | 54 | 55 |
56 | ); 57 | } 58 | 59 | private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => { 60 | if (itemIndex === 0) { 61 | this._columnCount = Math.ceil(surfaceRect.width / (MAX_ROW_HEIGHT)); 62 | this._columnWidth = Math.max(MIN_WIDTH, Math.floor(surfaceRect.width / this._columnCount) + Math.floor(PADDING / this._columnCount)); 63 | this._rowHeight = this._columnWidth; 64 | } 65 | 66 | return this._columnCount * ROWS_PER_PAGE; 67 | } 68 | 69 | private _getPageHeight = (): number => { 70 | return this._rowHeight * ROWS_PER_PAGE; 71 | } 72 | 73 | private _onRenderCell = (item: any, index: number | undefined): JSX.Element => { 74 | const cellPadding: number = index % this._columnCount !== this._columnCount - 1 && PADDING; 75 | const cellWidth: number = this._columnWidth - PADDING; 76 | return ( 77 |
83 | {this.props.onRenderGridItem(item, index)} 84 |
85 | ); 86 | } 87 | } 88 | 89 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/compactLayout/CompactLayout.types.ts: -------------------------------------------------------------------------------- 1 | import { IListProps } from 'office-ui-fabric-react/lib/List'; 2 | import { IPagingProps } from '../paging/index'; 3 | 4 | export interface ICompactLayoutProps { 5 | ariaLabel?: string; 6 | items: any[]; 7 | 8 | /** 9 | * In case you want to override the underlying list 10 | */ 11 | listProps?: Partial; 12 | 13 | /** 14 | * The method to render each cell item 15 | */ 16 | onRenderGridItem: (item: any, index: number) => JSX.Element; 17 | } 18 | 19 | export interface ICompactLayoutState { 20 | events: any[]; 21 | currentPage: number; 22 | } 23 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/compactLayout/index.ts: -------------------------------------------------------------------------------- 1 | export * from './CompactLayout'; 2 | export * from './CompactLayout.types'; 3 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/filmstripLayout/FilmstripLayout.module.scss: -------------------------------------------------------------------------------- 1 | @import "~office-ui-fabric-react/dist/sass/References.scss"; 2 | :export { 3 | centerPadding: 50px; 4 | } 5 | 6 | .filmstripLayout { 7 | position: relative; 8 | 9 | &.filmStrip { 10 | margin-bottom: 27px; 11 | margin-left: -10px; 12 | margin-right: -10px; 13 | 14 | :global(.slick-slide) { 15 | box-sizing: border-box; 16 | padding: 0 10px; 17 | } 18 | } 19 | 20 | .sliderButtons { 21 | opacity: 0; 22 | } 23 | 24 | &:hover .sliderButtons { 25 | opacity: 1; 26 | 27 | &:hover { 28 | color: $ms-color-white; 29 | } 30 | } 31 | } 32 | 33 | .indexButtonContainer { 34 | position: absolute; 35 | top: 0; 36 | bottom: 0; 37 | z-index: 1; 38 | } 39 | 40 | .indexButton { 41 | font-size: 28px; 42 | font-weight: 400; 43 | height: 40px; 44 | padding: 0; 45 | border: 0; 46 | background: 0 0; 47 | cursor: pointer; 48 | color: $ms-color-white; 49 | width: 40px; 50 | min-width: 20px; 51 | margin-left: 0; 52 | line-height: 40px; 53 | box-sizing: content-box; 54 | background-color: $ms-color-black; 55 | opacity: 0.6; 56 | position: absolute; 57 | top: 50%; 58 | transform: translateY(-50%); 59 | transition: all 0.3s; 60 | 61 | &:hover { 62 | color: $ms-color-white; 63 | background-color: $ms-color-black; 64 | opacity: 0.6; 65 | } 66 | 67 | &:active { 68 | outline: -webkit-focus-ring-color auto 1px; 69 | } 70 | } 71 | 72 | .carouselDotsContainer { 73 | .carouselDot { 74 | display: inline-block; 75 | background-color: $ms-color-black; 76 | height: 4px; 77 | width: 4px; 78 | opacity: 0.5; 79 | border: 2px solid $ms-color-black; 80 | border-radius: 4px; 81 | cursor: pointer; 82 | opacity: 0.25; 83 | outline: 0; 84 | 85 | &:hover { 86 | opacity: 1; 87 | } 88 | } 89 | } 90 | 91 | :global(.slick-active) { 92 | .carouselDotsContainer { 93 | .carouselDot { 94 | background-color: $ms-color-themeDark; //"[theme:themeDark, default: #005a9e]"; 95 | opacity: 0.75; 96 | border-color: $ms-color-themeDark;// "[theme:themeDark, default: #005a9e]"; 97 | 98 | &:hover { 99 | background-color: $ms-color-themeDarker;//"[theme:themeDarker, default: #004578]"; 100 | } 101 | } 102 | } 103 | } 104 | 105 | .indexButton:global(.ms-Button-flexContainer):hover:global(.ms-Icon), 106 | .indexButton:global(.ms-Icon:hover), 107 | .indexButton:hover:global(.ms-Icon) { 108 | color: $ms-color-white; 109 | } 110 | 111 | .leftPositioned { 112 | left: 0; 113 | } 114 | 115 | .rightPositioned { 116 | right: 0; 117 | } 118 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/filmstripLayout/FilmstripLayout.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@uifabric/utilities/lib/css'; 2 | import { IconButton } from 'office-ui-fabric-react/lib/Button'; 3 | import * as React from 'react'; 4 | import Slider from 'react-slick'; 5 | import { SPComponentLoader } from '@microsoft/sp-loader'; 6 | import styles from "./FilmstripLayout.module.scss"; 7 | import { useRef } from 'react'; 8 | import useComponentSize, { ComponentSize } from '@rehooks/component-size'; 9 | 10 | /** 11 | * Filmstrip layout 12 | * Presents the child compoments as a slick slide 13 | */ 14 | export const FilmstripLayout = (props: { children: any; ariaLabel?: string; }) => { 15 | let ref: React.MutableRefObject = useRef(null); 16 | let size: ComponentSize = useComponentSize(ref); 17 | let { width } = size; 18 | 19 | // // the slick slider used in normal views 20 | let _slider: React.MutableRefObject = useRef(null); 21 | 22 | SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'); 23 | SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'); 24 | 25 | // slick seems to have an issue with having "infinite" mode set to true and having less items than the number of slides per page 26 | // set infinite to true only if there are more than 3 children 27 | let numSlides: number = 3; 28 | if (width) { 29 | if (width > 927) { 30 | numSlides = 4; 31 | } else if (width <= 695) { 32 | numSlides = 2; 33 | } 34 | } 35 | 36 | var isInfinite: boolean = React.Children.count(props.children) > numSlides; 37 | var settings: any = { 38 | accessibility: true, 39 | arrows: false, 40 | autoplaySpeed: 5000, 41 | dots: true, 42 | customPaging: (i: number) => { 43 | return ( 44 | 45 |
46 | 47 |
48 | 49 | ); 50 | }, 51 | infinite: isInfinite, 52 | slidesToShow: numSlides, 53 | slidesToScroll: numSlides, 54 | speed: 500, 55 | centerPadding: styles.centerPadding, 56 | pauseOnHover: true, 57 | variableWidth: false, 58 | useCSS: true, 59 | rows: 1, 60 | respondTo: "slider", 61 | }; 62 | 63 | return ( 64 |
65 |
66 | 67 | {props.children} 68 | 69 |
_slider.current.slickPrev()} 73 | > 74 | 78 |
79 |
_slider.current.slickNext()} 83 | > 84 | 88 |
89 |
90 |
91 | ); 92 | }; 93 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/filmstripLayout/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FilmstripLayout"; 2 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/gridLayout/GridLayout.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | :export { 4 | padding: 20; 5 | minWidth: 210; 6 | maxWidth: 320; 7 | compactThreshold: 480; 8 | rowsPerPage: 3; 9 | } 10 | 11 | .gridLayout { 12 | overflow: hidden; 13 | font-size: 0; 14 | position: relative; 15 | background-color: transparent; 16 | 17 | :global(.ms-DocumentCard) { 18 | position: relative; 19 | background-color: $ms-color-white; 20 | height: 100%; 21 | 22 | &:global(.ms-DocumentCard--compact) { 23 | :global(.ms-DocumentCardPreview) { 24 | -ms-flex-negative: 0; 25 | flex-shrink: 0; 26 | width: 144px; 27 | } 28 | } 29 | 30 | :global(.ms-DocumentCardPreview-icon) img { 31 | width: 32px; 32 | height: 32px; 33 | } 34 | } 35 | 36 | :global(.ms-DocumentCard:not(.ms-DocumentCard--compact)) { 37 | min-width: 212px; 38 | max-width: 286px; 39 | 40 | :global(.ms-DocumentCardActivity) { 41 | padding-bottom: 16px; 42 | } 43 | 44 | :global(.ms-DocumentCardTile-titleArea) { 45 | height: 81px; 46 | } 47 | 48 | :global(.ms-DocumentCardLocation) { 49 | padding: 12px 16px 5px 16px; 50 | overflow: hidden; 51 | text-overflow: ellipsis; 52 | } 53 | } 54 | 55 | :global(.ms-List-cell) { 56 | vertical-align: top; 57 | display: inline-block; 58 | margin-bottom: 20px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/gridLayout/GridLayout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './GridLayout.module.scss'; 3 | 4 | // Used to render list grid 5 | import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; 6 | import { List } from 'office-ui-fabric-react/lib/List'; 7 | import { IRectangle, ISize } from 'office-ui-fabric-react/lib/Utilities'; 8 | 9 | import { IGridLayoutProps, IGridLayoutState } from './GridLayout.types'; 10 | 11 | const ROWS_PER_PAGE: number = +styles.rowsPerPage; 12 | const MAX_ROW_HEIGHT: number = +styles.maxWidth; 13 | const PADDING: number = +styles.padding; 14 | const MIN_WIDTH: number = +styles.minWidth; 15 | const COMPACT_THRESHOLD: number = +styles.compactThreshold; 16 | 17 | export class GridLayout extends React.Component { 18 | private _columnCount: number; 19 | private _columnWidth: number; 20 | private _rowHeight: number; 21 | private _isCompact: boolean; 22 | 23 | public render(): React.ReactElement { 24 | return ( 25 |
26 | 27 | 36 | 37 |
38 | ); 39 | } 40 | 41 | private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => { 42 | if (itemIndex === 0) { 43 | this._isCompact = surfaceRect.width < COMPACT_THRESHOLD; 44 | if (this._isCompact) { 45 | this._columnCount = 1; 46 | this._columnWidth = surfaceRect.width; 47 | } else { 48 | this._columnCount = Math.ceil(surfaceRect.width / (MAX_ROW_HEIGHT)); 49 | this._columnWidth = Math.max(MIN_WIDTH, Math.floor(surfaceRect.width / this._columnCount) + Math.floor(PADDING / this._columnCount)); 50 | this._rowHeight = this._columnWidth; 51 | } 52 | } 53 | 54 | return this._columnCount * ROWS_PER_PAGE; 55 | } 56 | 57 | private _getPageHeight = (): number => { 58 | return this._rowHeight * ROWS_PER_PAGE; 59 | } 60 | 61 | private _onRenderCell = (item: any, index: number | undefined): JSX.Element => { 62 | const isCompact: boolean = this._isCompact; 63 | const cellPadding: number = index % this._columnCount !== this._columnCount - 1 && !isCompact ? PADDING : 0; 64 | const finalSize: ISize = { width: this._columnWidth, height: this._rowHeight }; 65 | const cellWidth: number = isCompact ? this._columnWidth + PADDING : this._columnWidth - PADDING; 66 | return ( 67 |
73 | {this.props.onRenderGridItem(item, finalSize, isCompact)} 74 |
75 | ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/gridLayout/GridLayout.types.ts: -------------------------------------------------------------------------------- 1 | import { ISize } from 'office-ui-fabric-react/lib/Utilities'; 2 | import { IListProps } from 'office-ui-fabric-react/lib/List'; 3 | 4 | export interface IGridLayoutProps { 5 | /** 6 | * Accessible text for the grid layout 7 | */ 8 | ariaLabel?: string; 9 | 10 | /** 11 | * The array of items to display 12 | */ 13 | items: any[]; 14 | 15 | /** 16 | * In case you want to override the underlying list 17 | */ 18 | listProps?: Partial; 19 | 20 | /** 21 | * The method to render each cell item 22 | */ 23 | onRenderGridItem: (item: any, finalSize: ISize, isCompact: boolean) => JSX.Element; 24 | } 25 | 26 | export interface IGridLayoutState {} 27 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/gridLayout/index.ts: -------------------------------------------------------------------------------- 1 | export * from './GridLayout.types'; 2 | export * from './GridLayout'; 3 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/paging/Paging.module.scss: -------------------------------------------------------------------------------- 1 | @import '~office-ui-fabric-react/dist/sass/References.scss'; 2 | 3 | .Paging { 4 | width: 100%; 5 | min-width: 240px; 6 | text-align: center; 7 | margin: 0; 8 | padding: 2px 0; 9 | border: 1px solid transparent; 10 | position: relative; 11 | } 12 | 13 | .Paging .next, 14 | .Paging .prev { 15 | margin: 0; 16 | display: inline-block; 17 | border: none; 18 | } 19 | 20 | .Paging button { 21 | font-size: 14px; 22 | font-weight: 400; 23 | padding: 8px 4px; 24 | margin: 0 8px; 25 | cursor: pointer; 26 | cursor: hand; 27 | position: relative; 28 | height: 32px!important; 29 | display: none; 30 | outline: 0; 31 | } 32 | 33 | .Paging.noPageNum { 34 | text-align: left; 35 | } 36 | 37 | .noPageNum .next { 38 | float: right; 39 | } 40 | 41 | .Paging .next, 42 | .Paging .prev { 43 | margin: 0; 44 | display: inline-block; 45 | border: none; 46 | } 47 | 48 | .Paging button { 49 | font-size: 14px; 50 | font-weight: 400; 51 | padding: 8px 4px; 52 | margin: 0 8px; 53 | cursor: pointer; 54 | cursor: hand; 55 | position: relative; 56 | height: 32px!important; 57 | display: none; 58 | outline: 0; 59 | } 60 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/paging/Paging.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { css } from '@uifabric/utilities/lib/css'; 3 | import { ActionButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; 4 | import { Icon } from 'office-ui-fabric-react/lib/Icon'; 5 | 6 | import { IPagingProps, IPagingState } from "./index"; 7 | import styles from "./Paging.module.scss"; 8 | 9 | /** 10 | * A custom pagination control designed to look & feel like Office UI Fabric 11 | */ 12 | export class Paging extends React.Component { 13 | public render(): React.ReactElement { 14 | 15 | const { currentPage, nextButtonLabel, previousButtonLabel, nextButtonAriaLabel, previousButtonAriaLabel } = this.props; 16 | 17 | // calculate the page situation 18 | const numberOfPages: number = this._getNumberOfPages(); 19 | 20 | // we disable the previous button if we're on page 1 21 | const prevDisabled: boolean = currentPage < 2; 22 | 23 | // we disable the next button if we're on the last page 24 | const nextDisabled: boolean = currentPage >= numberOfPages; 25 | 26 | return ( 27 |
28 | { 30 | // we use the render custom icon method to render the icon consistently with the right icon 31 | return ( 32 | 33 | ); 34 | }} 35 | disabled={prevDisabled} 36 | onClick={this._prevPage} 37 | ariaLabel={previousButtonAriaLabel} 38 | > 39 | {previousButtonLabel} 40 | 41 | {/* NOT IMPLEMENTED: Page numbers aren't shown here, but we'll need them if we want this control to be reusable */} 42 | { 45 | // we use the render custom menu icon method to render the icon to the right of the text 46 | return ( 47 | 48 | ); 49 | }} 50 | onClick={this._nextPage} 51 | ariaLabel={nextButtonAriaLabel} 52 | > 53 | {nextButtonLabel} 54 | 55 |
56 | ); 57 | } 58 | 59 | /** 60 | * Increments the page number unless we're on the last page 61 | */ 62 | private _nextPage = (): void => { 63 | const numberOfPages: number = this._getNumberOfPages(); 64 | if (this.props.currentPage < numberOfPages) { 65 | this.props.onPageUpdate(this.props.currentPage + 1); 66 | } 67 | } 68 | 69 | /** 70 | * Decrements the page number unless we're on the first page 71 | */ 72 | private _prevPage = (): void => { 73 | if (this.props.currentPage > 1) { 74 | this.props.onPageUpdate(this.props.currentPage - 1); 75 | } 76 | } 77 | 78 | /** 79 | * Calculates how many pages there will be 80 | */ 81 | private _getNumberOfPages(): number { 82 | const { totalItems, itemsCountPerPage } = this.props; 83 | let numPages: number = Math.round(totalItems / itemsCountPerPage); 84 | return numPages; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/paging/Paging.types.ts: -------------------------------------------------------------------------------- 1 | export interface IPagingProps { 2 | currentPage: number; 3 | totalItems: number; 4 | itemsCountPerPage: number; 5 | showPageNumber: boolean; 6 | nextButtonLabel: string; 7 | previousButtonLabel: string; 8 | nextButtonAriaLabel?: string; 9 | previousButtonAriaLabel?: string; 10 | onPageUpdate: (pageNumber: number) => void; 11 | } 12 | 13 | export interface IPagingState { } 14 | -------------------------------------------------------------------------------- /WebPartLayouts/src/components/paging/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Paging"; 2 | export * from "./Paging.types"; 3 | -------------------------------------------------------------------------------- /WebPartLayouts/src/index.ts: -------------------------------------------------------------------------------- 1 | // A file is required to be in the root of the /src directory by the TypeScript compiler 2 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/CarouselWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "39aa93a3-fd4f-4359-87e7-5f93aa31e6b4", 4 | "alias": "CarouselWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "Carousel" }, 21 | "description": { "default": "Demonstrates how to create a web part with the carousel layout" }, 22 | "iconImageUrl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E %3Cg%3E %3Cpath d='M0,4v25h32V4H0z M30,27H2V6h28V27z' class='themeableSvgPath'/%3E %3Cpath d='M0,4v25h32V4H0z M30,27H2V6h28V27z' class='themeableSvgPath'/%3E %3Cpath d='M0,4v25h32V4H0z M30,27H2V6h28V27z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpolygon points='8.9,18.2 7,16.2 8.9,14.3 7.9,13.3 4.9,16.2 7.9,19.2' class='themeableSvgPath'/%3E %3Cpolygon points='8.9,18.2 7,16.2 8.9,14.3 7.9,13.3 4.9,16.2 7.9,19.2' class='themeableSvgPath'/%3E %3Cpolygon points='8.9,18.2 7,16.2 8.9,14.3 7.9,13.3 4.9,16.2 7.9,19.2' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpolygon points='24.5,19.2 27.5,16.2 24.5,13.3 23.4,14.3 25.3,16.2 23.4,18.2' class='themeableSvgPath'/%3E %3Cpolygon points='24.5,19.2 27.5,16.2 24.5,13.3 23.4,14.3 25.3,16.2 23.4,18.2' class='themeableSvgPath'/%3E %3Cpolygon points='24.5,19.2 27.5,16.2 24.5,13.3 23.4,14.3 25.3,16.2 23.4,18.2' class='themeableSvgPath'/%3E %3C/g%3E %3C/svg%3E ", 23 | "properties": { 24 | "description": "Carousel" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/CarouselWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'CarouselWebPartStrings'; 11 | import Carousel from './components/Carousel'; 12 | import { ICarouselProps } from './components/ICarousel.types'; 13 | 14 | export interface ICarouselWebPartProps { 15 | description: string; 16 | } 17 | 18 | export default class CarouselWebPart extends BaseClientSideWebPart { 19 | 20 | public render(): void { 21 | const element: React.ReactElement = React.createElement( 22 | Carousel, 23 | { 24 | description: this.properties.description 25 | } 26 | ); 27 | 28 | ReactDom.render(element, this.domElement); 29 | } 30 | 31 | protected onDispose(): void { 32 | ReactDom.unmountComponentAtNode(this.domElement); 33 | } 34 | 35 | protected get dataVersion(): Version { 36 | return Version.parse('1.0'); 37 | } 38 | 39 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 40 | return { 41 | pages: [ 42 | { 43 | header: { 44 | description: strings.PropertyPaneDescription 45 | }, 46 | groups: [ 47 | { 48 | groupName: strings.BasicGroupName, 49 | groupFields: [ 50 | PropertyPaneTextField('description', { 51 | label: strings.DescriptionFieldLabel 52 | }) 53 | ] 54 | } 55 | ] 56 | } 57 | ] 58 | }; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/components/Carousel.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | .carousel { 4 | color: inherit; 5 | } 6 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/components/Carousel.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './Carousel.module.scss'; 3 | import { ICarouselProps, ICarouselState } from './ICarousel.types'; 4 | 5 | 6 | import { CarouselLayout } from '../../../components/carouselLayout'; 7 | 8 | 9 | export default class Carousel extends React.Component { 10 | constructor(props: ICarouselProps) { 11 | super(props); 12 | 13 | this.state = { 14 | items: [{ 15 | imageSrc: "https://lorempixel.com/744/418/technics/1/", 16 | title: "Adventures in SPFx", 17 | location: "SharePoint", 18 | }, { 19 | imageSrc: "https://lorempixel.com/744/418/technics/2", 20 | title: "The Wild, Untold Story of SharePoint!", 21 | location: "SharePoint", 22 | }, { 23 | imageSrc: "https://lorempixel.com/744/418/technics/4", 24 | title: "Not Your Grandpa's SharePoint", 25 | location: "SharePoint", 26 | }, { 27 | imageSrc: "https://lorempixel.com/744/418/technics/5/", 28 | title: "Get with the Flow", 29 | location: "Flow", 30 | }] 31 | }; 32 | } 33 | 34 | public render(): React.ReactElement { 35 | 36 | return ( 37 |
38 | { alert(`You clicked on slide ${currentSlide+1}`); }} 43 | > 44 | 45 |
46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/components/ICarousel.types.ts: -------------------------------------------------------------------------------- 1 | export interface ICarouselProps { 2 | description: string; 3 | } 4 | 5 | export interface ICarouselState { 6 | items: any[]; 7 | } 8 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/carousel/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ICarouselWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'CarouselWebPartStrings' { 8 | const strings: ICarouselWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/compact/CompactWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff", 4 | "alias": "CompactWebPart", 5 | "componentType": "WebPart", 6 | 7 | "version": "*", 8 | "manifestVersion": 2, 9 | 10 | "requiresCustomScript": false, 11 | "supportedHosts": ["SharePointWebPart"], 12 | 13 | "preconfiguredEntries": [{ 14 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", 15 | "group": { "default": "Other" }, 16 | "title": { "default": "Compact" }, 17 | "description": { "default": "Demonstrates how to use the compact layout" }, 18 | "iconImageUrl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E %3Cg%3E %3Cpath d='M0,0v14h32V0H0z M2,2h9v10H2V2z M30,12H13V2h17V12z' class='themeableSvgPath'/%3E %3Cpath d='M0,0v14h32V0H0z M2,2h9v10H2V2z M30,12H13V2h17V12z' class='themeableSvgPath'/%3E %3Cpath d='M0,0v14h32V0H0z M2,2h9v10H2V2z M30,12H13V2h17V12z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M0,32h32V18H0V32z M30,30H13V20h17V30z M2,20h9v10H2V20z' class='themeableSvgPath'/%3E %3Cpath d='M0,32h32V18H0V32z M30,30H13V20h17V30z M2,20h9v10H2V20z' class='themeableSvgPath'/%3E %3Cpath d='M0,32h32V18H0V32z M30,30H13V20h17V30z M2,20h9v10H2V20z' class='themeableSvgPath'/%3E %3C/g%3E %3C/svg%3E", 19 | "properties": { 20 | "description": "Compact" 21 | } 22 | }] 23 | } 24 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/compact/CompactWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { 5 | BaseClientSideWebPart, 6 | IPropertyPaneConfiguration, 7 | PropertyPaneToggle 8 | } from '@microsoft/sp-webpart-base'; 9 | 10 | import * as strings from 'CompactWebPartStrings'; 11 | import Compact from './components/Compact'; 12 | import { ICompactProps } from './components/Compact.types'; 13 | 14 | export interface ICompactWebPartProps { 15 | usePaging: boolean; 16 | } 17 | 18 | export default class CompactWebPart extends BaseClientSideWebPart { 19 | 20 | public render(): void { 21 | const element: React.ReactElement = React.createElement( 22 | Compact, 23 | { 24 | usePaging: this.properties.usePaging 25 | } 26 | ); 27 | 28 | ReactDom.render(element, this.domElement); 29 | } 30 | 31 | protected onDispose(): void { 32 | ReactDom.unmountComponentAtNode(this.domElement); 33 | } 34 | 35 | protected get dataVersion(): Version { 36 | return Version.parse('1.0'); 37 | } 38 | 39 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 40 | return { 41 | pages: [ 42 | { 43 | header: { 44 | description: strings.PropertyPaneDescription 45 | }, 46 | groups: [ 47 | { 48 | groupName: strings.BasicGroupName, 49 | groupFields: [ 50 | PropertyPaneToggle('usePaging', { 51 | label: strings.UsePagingFieldLabel, 52 | checked: this.properties.usePaging === true, 53 | onText: "Yes", 54 | offText: "No" 55 | 56 | }) 57 | ] 58 | } 59 | ] 60 | } 61 | ] 62 | }; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/compact/components/Compact.module.scss: -------------------------------------------------------------------------------- 1 | @import '~office-ui-fabric-react/dist/sass/References.scss'; 2 | 3 | .compact { 4 | color: inherit; 5 | } 6 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/compact/components/Compact.types.ts: -------------------------------------------------------------------------------- 1 | export interface ICompactProps { 2 | usePaging: boolean; 3 | } 4 | 5 | export interface ICompactState { 6 | items: any[]; 7 | currentPage: number; 8 | } 9 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/compact/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | PreviousLabel: "Previous", 4 | NextLabel: "Next", 5 | "PropertyPaneDescription": "Description", 6 | "BasicGroupName": "Group Name", 7 | "UsePagingFieldLabel": "Use Pagination?" 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/compact/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ICompactWebPartStrings { 2 | PreviousLabel: string; 3 | NextLabel: string; 4 | PropertyPaneDescription: string; 5 | BasicGroupName: string; 6 | UsePagingFieldLabel: string; 7 | } 8 | 9 | declare module 'CompactWebPartStrings' { 10 | const strings: ICompactWebPartStrings; 11 | export = strings; 12 | } 13 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/filmstrip/FilmstripWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003", 4 | "alias": "FilmstripWebPart", 5 | "componentType": "WebPart", 6 | 7 | "version": "*", 8 | "manifestVersion": 2, 9 | 10 | "requiresCustomScript": false, 11 | "supportedHosts": ["SharePointWebPart"], 12 | 13 | "preconfiguredEntries": [{ 14 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", 15 | "group": { "default": "Other" }, 16 | "title": { "default": "Filmstrip" }, 17 | "description": { "default": "Demonstrates how to render a filmstrip web part" }, 18 | "iconImageUrl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E %3Cpath d='M10,0v28h12V0H10z M20,26h-8V2h8V26z' class='themeableSvgPath'/%3E %3Cpolygon points='0,2 5,2 5,26 0,26 0,28 7,28 7,0 0,0 ' class='themeableSvgPath'/%3E %3Crect width='2' height='2' x='9' y='30' class='themeableSvgPath'/%3E %3Crect width='2' height='2' x='15' y='30' class='themeableSvgPath'/%3E %3Cpolygon points='32,2 32,0 25,0 25,28 32,28 32,26 27,26 27,2 ' class='themeableSvgPath'/%3E %3Crect width='2' height='2' x='21' y='30' class='themeableSvgPath'/%3E %3C/svg%3E", 19 | "properties": { 20 | "description": "Filmstrip" 21 | } 22 | }] 23 | } 24 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/filmstrip/FilmstripWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'FilmstripWebPartStrings'; 11 | import Filmstrip from './components/Filmstrip'; 12 | import { IFilmstripProps } from './components/IFilmstrip.types'; 13 | 14 | export interface IFilmstripWebPartProps { 15 | description: string; 16 | } 17 | 18 | export default class FilmstripWebPart extends BaseClientSideWebPart { 19 | 20 | public render(): void { 21 | const element: React.ReactElement = React.createElement( 22 | Filmstrip, 23 | { 24 | } 25 | ); 26 | 27 | ReactDom.render(element, this.domElement); 28 | } 29 | 30 | protected onDispose(): void { 31 | ReactDom.unmountComponentAtNode(this.domElement); 32 | } 33 | 34 | protected get dataVersion(): Version { 35 | return Version.parse('1.0'); 36 | } 37 | 38 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 39 | return { 40 | pages: [ 41 | { 42 | header: { 43 | description: strings.PropertyPaneDescription 44 | }, 45 | groups: [ 46 | { 47 | groupName: strings.BasicGroupName, 48 | groupFields: [ 49 | PropertyPaneTextField('description', { 50 | label: strings.DescriptionFieldLabel 51 | }) 52 | ] 53 | } 54 | ] 55 | } 56 | ] 57 | }; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/filmstrip/components/Filmstrip.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .filmstrip { 4 | .documentTile { 5 | background-color: transparent; 6 | outline: transparent; 7 | position: relative; 8 | } 9 | 10 | } 11 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/filmstrip/components/IFilmstrip.types.ts: -------------------------------------------------------------------------------- 1 | export interface IFilmstripProps { 2 | 3 | } 4 | 5 | export interface IFilmstripState { 6 | items: any[]; 7 | } 8 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/filmstrip/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/filmstrip/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IFilmstripWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'FilmstripWebPartStrings' { 8 | const strings: IFilmstripWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/GridWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "851b9a1e-300e-44fd-b63e-ebe360938abb", 4 | "alias": "GridWebPart", 5 | "componentType": "WebPart", 6 | 7 | "version": "*", 8 | "manifestVersion": 2, 9 | 10 | "requiresCustomScript": false, 11 | "supportedHosts": ["SharePointWebPart"], 12 | 13 | "preconfiguredEntries": [{ 14 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", 15 | "group": { "default": "Other" }, 16 | "title": { "default": "Grid" }, 17 | "description": { "default": "Demonstrates how to create a web part that uses a grid layout" }, 18 | "iconImageUrl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E %3Cg%3E %3Cpath d='M0,10h10V0H0V10z M2,2h6v6H2V2z' class='themeableSvgPath'/%3E %3Cpath d='M0,10h10V0H0V10z M2,2h6v6H2V2z' class='themeableSvgPath'/%3E %3Cpath d='M0,10h10V0H0V10z M2,2h6v6H2V2z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M0,21h10V11H0V21z M2,13h6v6H2V13z' class='themeableSvgPath'/%3E %3Cpath d='M0,21h10V11H0V21z M2,13h6v6H2V13z' class='themeableSvgPath'/%3E %3Cpath d='M0,21h10V11H0V21z M2,13h6v6H2V13z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M0,32h10V22H0V32z M2,24h6v6H2V24z' class='themeableSvgPath'/%3E %3Cpath d='M0,32h10V22H0V32z M2,24h6v6H2V24z' class='themeableSvgPath'/%3E %3Cpath d='M0,32h10V22H0V32z M2,24h6v6H2V24z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M11,10h10V0H11V10z M13,2h6v6h-6V2z' class='themeableSvgPath'/%3E %3Cpath d='M11,10h10V0H11V10z M13,2h6v6h-6V2z' class='themeableSvgPath'/%3E %3Cpath d='M11,10h10V0H11V10z M13,2h6v6h-6V2z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M22,0v10h10V0H22z M30,8h-6V2h6V8z' class='themeableSvgPath'/%3E %3Cpath d='M22,0v10h10V0H22z M30,8h-6V2h6V8z' class='themeableSvgPath'/%3E %3Cpath d='M22,0v10h10V0H22z M30,8h-6V2h6V8z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M11,21h10V11H11V21z M13,13h6v6h-6V13z' class='themeableSvgPath'/%3E %3Cpath d='M11,21h10V11H11V21z M13,13h6v6h-6V13z' class='themeableSvgPath'/%3E %3Cpath d='M11,21h10V11H11V21z M13,13h6v6h-6V13z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M22,21h10V11H22V21z M24,13h6v6h-6V13z' class='themeableSvgPath'/%3E %3Cpath d='M22,21h10V11H22V21z M24,13h6v6h-6V13z' class='themeableSvgPath'/%3E %3Cpath d='M22,21h10V11H22V21z M24,13h6v6h-6V13z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M11,32h10V22H11V32z M13,24h6v6h-6V24z' class='themeableSvgPath'/%3E %3Cpath d='M11,32h10V22H11V32z M13,24h6v6h-6V24z' class='themeableSvgPath'/%3E %3Cpath d='M11,32h10V22H11V32z M13,24h6v6h-6V24z' class='themeableSvgPath'/%3E %3C/g%3E %3Cg%3E %3Cpath d='M22,32h10V22H22V32z M24,24h6v6h-6V24z' class='themeableSvgPath'/%3E %3Cpath d='M22,32h10V22H22V32z M24,24h6v6h-6V24z' class='themeableSvgPath'/%3E %3Cpath d='M22,32h10V22H22V32z M24,24h6v6h-6V24z' class='themeableSvgPath'/%3E %3C/g%3E %3C/svg%3E ", 19 | "properties": { 20 | 21 | } 22 | }] 23 | } 24 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/GridWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import Grid from './components/Grid'; 6 | import { IGridProps } from './components/Grid.types'; 7 | 8 | export interface IGridWebPartProps { 9 | description: string; 10 | } 11 | 12 | export default class GridWebPart extends BaseClientSideWebPart { 13 | 14 | public render(): void { 15 | const element: React.ReactElement = React.createElement( 16 | Grid, 17 | { 18 | } 19 | ); 20 | 21 | ReactDom.render(element, this.domElement); 22 | } 23 | 24 | protected onDispose(): void { 25 | ReactDom.unmountComponentAtNode(this.domElement); 26 | } 27 | 28 | protected get dataVersion(): Version { 29 | return Version.parse('1.0'); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/components/Grid.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | // BEGIN: For debug only 4 | // This shouldn't be required in production, but it helps the workbench 5 | // behave like the production environment when dealing with sections 6 | // that have background colors 7 | :global(.ControlZoneEmphasisBackground) { 8 | background-color: transparent; 9 | } 10 | // END: For debug only 11 | 12 | .grid { 13 | color: inherit; 14 | } 15 | 16 | .documentTile { 17 | background-color: transparent; 18 | outline: transparent; 19 | position: relative; 20 | } 21 | 22 | .gridItem { 23 | color: inherit; 24 | //margin-bottom: 20px; 25 | } 26 | 27 | 28 | .documentTile:hover::after { 29 | content: " "; 30 | position: absolute; 31 | top: 0px; 32 | right: 0px; 33 | bottom: 0px; 34 | left: 0px; 35 | pointer-events: none; 36 | border-width: 1px; 37 | border-style: solid; 38 | border-image: initial; 39 | border-color: $ms-color-themeDarker !important; 40 | } 41 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/components/Grid.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './Grid.module.scss'; 3 | import { IGridProps, IGridState } from './Grid.types'; 4 | import { ISize } from 'office-ui-fabric-react/lib/Utilities'; 5 | 6 | // Used to render document cards 7 | import { 8 | DocumentCard, 9 | DocumentCardActivity, 10 | DocumentCardPreview, 11 | DocumentCardDetails, 12 | DocumentCardTitle, 13 | IDocumentCardPreviewProps, 14 | DocumentCardLocation, 15 | DocumentCardType 16 | } from 'office-ui-fabric-react/lib/DocumentCard'; 17 | import { ImageFit } from 'office-ui-fabric-react/lib/Image'; 18 | 19 | import { GridLayout } from '../../../components/gridLayout/index'; 20 | 21 | 22 | export default class Grid extends React.Component { 23 | constructor(props: IGridProps) { 24 | super(props); 25 | 26 | this.state = { 27 | items: [{ 28 | thumbnail: "https://lorempixel.com/400/200/technics/1/", 29 | title: "Adventures in SPFx", 30 | name: "Perry Losselyong", 31 | profileImageSrc: "https://robohash.org/blanditiisadlabore.png?size=50x50&set=set1", 32 | location: "SharePoint", 33 | activity: "3/13/2019" 34 | }, { 35 | thumbnail: "https://lorempixel.com/400/200/technics/2", 36 | title: "The Wild, Untold Story of SharePoint!", 37 | name: "Ebonee Gallyhaock", 38 | profileImageSrc: "https://robohash.org/delectusetcorporis.bmp?size=50x50&set=set1", 39 | location: "SharePoint", 40 | activity: "6/29/2019" 41 | }, { 42 | thumbnail: "https://lorempixel.com/400/200/technics/3", 43 | title: "Low Code Solutions: PowerApps", 44 | name: "Seward Keith", 45 | profileImageSrc: "https://robohash.org/asperioresautquasi.jpg?size=50x50&set=set1", 46 | location: "PowerApps", 47 | activity: "12/31/2018" 48 | }, { 49 | thumbnail: "https://lorempixel.com/400/200/technics/4", 50 | title: "Not Your Grandpa's SharePoint", 51 | name: "Sharona Selkirk", 52 | profileImageSrc: "https://robohash.org/velnammolestiae.png?size=50x50&set=set1", 53 | location: "SharePoint", 54 | activity: "11/20/2018" 55 | }, { 56 | thumbnail: "https://lorempixel.com/400/200/technics/5/", 57 | title: "Get with the Flow", 58 | name: "Boyce Batstone", 59 | profileImageSrc: "https://robohash.org/nulladistinctiomollitia.jpg?size=50x50&set=set1", 60 | location: "Flow", 61 | activity: "5/26/2019" 62 | }] 63 | }; 64 | } 65 | 66 | public render(): React.ReactElement { 67 | return ( 68 |
69 | this._onRenderGridItem(item, finalSize, isCompact)} 72 | /> 73 |
74 | ); 75 | } 76 | 77 | private _onRenderGridItem = (item: any, finalSize: ISize, isCompact: boolean): JSX.Element => { 78 | const previewProps: IDocumentCardPreviewProps = { 79 | previewImages: [ 80 | { 81 | previewImageSrc: item.thumbnail, 82 | imageFit: ImageFit.cover, 83 | height: 130 84 | } 85 | ] 86 | }; 87 | 88 | return
94 | ) => alert(ev)} 97 | 98 | > 99 | 100 | {!isCompact && } 101 | 102 | 106 | 110 | 111 | 112 |
; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/components/Grid.types.ts: -------------------------------------------------------------------------------- 1 | export interface IGridProps { 2 | 3 | } 4 | 5 | export interface IGridState { 6 | items: IGridItem[]; 7 | } 8 | 9 | export interface IGridItem { 10 | thumbnail: string; 11 | title: string; 12 | name: string; 13 | profileImageSrc: string; 14 | location: string; 15 | activity: string; 16 | } 17 | -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /WebPartLayouts/src/webparts/grid/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IGridWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'GridWebPartStrings' { 8 | const strings: IGridWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /WebPartLayouts/teams/39aa93a3-fd4f-4359-87e7-5f93aa31e6b4_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/39aa93a3-fd4f-4359-87e7-5f93aa31e6b4_color.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/39aa93a3-fd4f-4359-87e7-5f93aa31e6b4_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/39aa93a3-fd4f-4359-87e7-5f93aa31e6b4_outline.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff_color.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/4c16bc60-d4f1-4d64-b7bc-ae2ac11289ff_outline.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003_color.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/5a2e2e6f-aad5-4fc0-aafa-231ce0b0c003_outline.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/851b9a1e-300e-44fd-b63e-ebe360938abb_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/851b9a1e-300e-44fd-b63e-ebe360938abb_color.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/851b9a1e-300e-44fd-b63e-ebe360938abb_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/851b9a1e-300e-44fd-b63e-ebe360938abb_outline.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/a8d7e892-1284-4f3a-8f63-858698f125b2_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/a8d7e892-1284-4f3a-8f63-858698f125b2_color.png -------------------------------------------------------------------------------- /WebPartLayouts/teams/a8d7e892-1284-4f3a-8f63-858698f125b2_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartLayouts/teams/a8d7e892-1284-4f3a-8f63-858698f125b2_outline.png -------------------------------------------------------------------------------- /WebPartLayouts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "forceConsistentCasingInFileNames": true, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "jsx": "react", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "experimentalDecorators": true, 12 | "skipLibCheck": true, 13 | "outDir": "lib", 14 | "inlineSources": false, 15 | "strictNullChecks": false, 16 | "noUnusedLocals": false, 17 | "typeRoots": [ 18 | "./node_modules/@types", 19 | "./node_modules/@microsoft" 20 | ], 21 | "types": [ 22 | "es6-promise", 23 | "webpack-env" 24 | ], 25 | "lib": [ 26 | "es5", 27 | "dom", 28 | "es2015.collection" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "lib" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /WebPartLayouts/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@microsoft/sp-tslint-rules/base-tslint.json", 3 | "rules": { 4 | "class-name": false, 5 | "export-name": false, 6 | "forin": false, 7 | "label-position": false, 8 | "member-access": true, 9 | "no-arg": false, 10 | "no-console": false, 11 | "no-construct": false, 12 | "no-duplicate-variable": true, 13 | "no-eval": false, 14 | "no-function-expression": true, 15 | "no-internal-module": true, 16 | "no-shadowed-variable": true, 17 | "no-switch-case-fall-through": true, 18 | "no-unnecessary-semicolons": true, 19 | "no-unused-expression": true, 20 | "no-use-before-declare": true, 21 | "no-with-statement": true, 22 | "semicolon": true, 23 | "trailing-comma": false, 24 | "typedef": false, 25 | "typedef-whitespace": false, 26 | "use-named-parameter": true, 27 | "variable-name": false, 28 | "whitespace": false 29 | } 30 | } -------------------------------------------------------------------------------- /WebPartTitles/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 -------------------------------------------------------------------------------- /WebPartTitles/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directories 7 | node_modules 8 | 9 | # Build generated files 10 | dist 11 | lib 12 | solution 13 | temp 14 | *.sppkg 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # OSX 20 | .DS_Store 21 | 22 | # Visual Studio files 23 | .ntvs_analysis.dat 24 | .vs 25 | bin 26 | obj 27 | 28 | # Resx Generated Code 29 | *.resx.ts 30 | 31 | # Styles Generated Code 32 | *.scss.ts 33 | -------------------------------------------------------------------------------- /WebPartTitles/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "msjsdiag.debugger-for-chrome" 4 | ] 5 | } -------------------------------------------------------------------------------- /WebPartTitles/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the 4 | * Chrome browser: https://aka.ms/spfx-debugger-extensions 5 | */ 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Local workbench", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "https://localhost:4321/temp/workbench.html", 12 | "webRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///.././src/*": "${webRoot}/src/*", 16 | "webpack:///../../../src/*": "${webRoot}/src/*", 17 | "webpack:///../../../../src/*": "${webRoot}/src/*", 18 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 19 | }, 20 | "runtimeArgs": [ 21 | "--remote-debugging-port=9222" 22 | ] 23 | }, 24 | { 25 | "name": "Hosted workbench", 26 | "type": "chrome", 27 | "request": "launch", 28 | "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 29 | "webRoot": "${workspaceRoot}", 30 | "sourceMaps": true, 31 | "sourceMapPathOverrides": { 32 | "webpack:///.././src/*": "${webRoot}/src/*", 33 | "webpack:///../../../src/*": "${webRoot}/src/*", 34 | "webpack:///../../../../src/*": "${webRoot}/src/*", 35 | "webpack:///../../../../../src/*": "${webRoot}/src/*" 36 | }, 37 | "runtimeArgs": [ 38 | "--remote-debugging-port=9222", 39 | "-incognito" 40 | ] 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /WebPartTitles/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | // Configure glob patterns for excluding files and folders in the file explorer. 4 | "files.exclude": { 5 | "**/.git": true, 6 | "**/.DS_Store": true, 7 | "**/bower_components": true, 8 | "**/coverage": true, 9 | "**/lib-amd": true, 10 | "src/**/*.scss.ts": true 11 | }, 12 | "typescript.tsdk": ".\\node_modules\\typescript\\lib" 13 | } -------------------------------------------------------------------------------- /WebPartTitles/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@microsoft/generator-sharepoint": { 3 | "isCreatingSolution": false, 4 | "environment": "spo", 5 | "version": "1.8.2", 6 | "libraryName": "web-part-titles", 7 | "libraryId": "969f67cc-c64a-4896-aabb-f93a5659b9c7", 8 | "packageManager": "npm", 9 | "isDomainIsolated": false, 10 | "componentType": "webpart" 11 | } 12 | } -------------------------------------------------------------------------------- /WebPartTitles/README.md: -------------------------------------------------------------------------------- 1 | ## web-part-titles 2 | 3 | This is where you include your WebPart documentation. 4 | 5 | ### Building the code 6 | 7 | ```bash 8 | git clone the repo 9 | npm i 10 | npm i -g gulp 11 | gulp 12 | ``` 13 | 14 | This package produces the following: 15 | 16 | * lib/* - intermediate-stage commonjs build artifacts 17 | * dist/* - the bundled script, along with other resources 18 | * deploy/* - all resources which should be uploaded to a CDN. 19 | 20 | ### Build options 21 | 22 | gulp clean - TODO 23 | gulp test - TODO 24 | gulp serve - TODO 25 | gulp bundle - TODO 26 | gulp package-solution - TODO 27 | -------------------------------------------------------------------------------- /WebPartTitles/config/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", 3 | "version": "2.0", 4 | "bundles": { 5 | "editable-title-web-part": { 6 | "components": [ 7 | { 8 | "entrypoint": "./lib/webparts/editableTitle/EditableTitleWebPart.js", 9 | "manifest": "./src/webparts/editableTitle/EditableTitleWebPart.manifest.json" 10 | } 11 | ] 12 | }, 13 | "placeholder-title-web-part": { 14 | "components": [ 15 | { 16 | "entrypoint": "./lib/webparts/placeholderTitle/PlaceholderTitleWebPart.js", 17 | "manifest": "./src/webparts/placeholderTitle/PlaceholderTitleWebPart.manifest.json" 18 | } 19 | ] 20 | }, 21 | "web-part-description-web-part": { 22 | "components": [ 23 | { 24 | "entrypoint": "./lib/webparts/webPartDescription/WebPartDescriptionWebPart.js", 25 | "manifest": "./src/webparts/webPartDescription/WebPartDescriptionWebPart.manifest.json" 26 | } 27 | ] 28 | } 29 | }, 30 | "externals": {}, 31 | "localizedResources": { 32 | "EditableTitleWebPartStrings": "lib/webparts/editableTitle/loc/{locale}.js", 33 | "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js", 34 | "PlaceholderTitleWebPartStrings": "lib/webparts/placeholderTitle/loc/{locale}.js", 35 | "WebPartDescriptionWebPartStrings": "lib/webparts/webPartDescription/loc/{locale}.js" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /WebPartTitles/config/copy-assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", 3 | "deployCdnPath": "temp/deploy" 4 | } 5 | -------------------------------------------------------------------------------- /WebPartTitles/config/deploy-azure-storage.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", 3 | "workingDir": "./temp/deploy/", 4 | "account": "", 5 | "container": "web-part-titles", 6 | "accessKey": "" 7 | } -------------------------------------------------------------------------------- /WebPartTitles/config/package-solution.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", 3 | "solution": { 4 | "name": "web-part-titles-client-side-solution", 5 | "id": "969f67cc-c64a-4896-aabb-f93a5659b9c7", 6 | "version": "1.0.0.0", 7 | "includeClientSideAssets": true, 8 | "isDomainIsolated": false 9 | }, 10 | "paths": { 11 | "zippedPackage": "solution/web-part-titles.sppkg" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /WebPartTitles/config/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", 3 | "port": 4321, 4 | "https": true, 5 | "initialPage": "https://localhost:5432/workbench", 6 | "api": { 7 | "port": 5432, 8 | "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /WebPartTitles/config/write-manifests.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", 3 | "cdnBasePath": "" 4 | } -------------------------------------------------------------------------------- /WebPartTitles/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const build = require('@microsoft/sp-build-web'); 5 | build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); 6 | 7 | build.initialize(gulp); 8 | -------------------------------------------------------------------------------- /WebPartTitles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-part-titles", 3 | "version": "0.0.1", 4 | "private": true, 5 | "engines": { 6 | "node": ">=0.10.0" 7 | }, 8 | "scripts": { 9 | "build": "gulp bundle", 10 | "clean": "gulp clean", 11 | "test": "gulp test" 12 | }, 13 | "dependencies": { 14 | "@microsoft/sp-core-library": "1.8.2", 15 | "@microsoft/sp-lodash-subset": "1.8.2", 16 | "@microsoft/sp-office-ui-fabric-core": "1.8.2", 17 | "@microsoft/sp-property-pane": "1.8.2", 18 | "@microsoft/sp-webpart-base": "1.8.2", 19 | "@pnp/spfx-controls-react": "^1.13.2", 20 | "@types/es6-promise": "0.0.33", 21 | "@types/react": "16.7.22", 22 | "@types/react-dom": "16.8.0", 23 | "@types/webpack-env": "1.13.1", 24 | "office-ui-fabric-react": "6.143.0", 25 | "react": "16.7.0", 26 | "react-dom": "16.7.0" 27 | }, 28 | "resolutions": { 29 | "@types/react": "16.7.22" 30 | }, 31 | "devDependencies": { 32 | "@microsoft/sp-build-web": "1.8.2", 33 | "@microsoft/sp-tslint-rules": "1.8.2", 34 | "@microsoft/sp-module-interfaces": "1.8.2", 35 | "@microsoft/sp-webpart-workbench": "1.8.2", 36 | "@microsoft/rush-stack-compiler-2.9": "0.7.7", 37 | "gulp": "~3.9.1", 38 | "@types/chai": "3.4.34", 39 | "@types/mocha": "2.2.38", 40 | "ajv": "~5.2.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /WebPartTitles/src/index.ts: -------------------------------------------------------------------------------- 1 | // A file is required to be in the root of the /src directory by the TypeScript compiler 2 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/EditableTitleWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "920ed53b-6b0b-4548-b17a-2e8b61de888c", 4 | "alias": "EditableTitleWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "EditableTitle" }, 21 | "description": { "default": "Demonstrates how to create a web part with an editable title" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "description": "EditableTitle", 25 | "title": "My Default Web Part Title" 26 | } 27 | }] 28 | } 29 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/EditableTitleWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'EditableTitleWebPartStrings'; 11 | import EditableTitle from './components/EditableTitle'; 12 | import { IEditableTitleProps } from './components/IEditableTitleProps'; 13 | 14 | export interface IEditableTitleWebPartProps { 15 | description: string; 16 | // BEGIN Add to support web part title 17 | title: string; 18 | // END Add 19 | } 20 | 21 | export default class EditableTitleWebPart extends BaseClientSideWebPart { 22 | 23 | public render(): void { 24 | const element: React.ReactElement = React.createElement( 25 | EditableTitle, 26 | { 27 | description: this.properties.description, 28 | // BEGIN: Add to support web part title 29 | // Don't forget that you need to add a comma at the end of the previous line 30 | title: this.properties.title, 31 | displayMode: this.displayMode, 32 | updateTitle: (value: string) => { 33 | this.properties.title = value; 34 | } 35 | //END: Add 36 | } 37 | ); 38 | 39 | ReactDom.render(element, this.domElement); 40 | } 41 | 42 | protected onDispose(): void { 43 | ReactDom.unmountComponentAtNode(this.domElement); 44 | } 45 | 46 | protected get dataVersion(): Version { 47 | return Version.parse('1.0'); 48 | } 49 | 50 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 51 | return { 52 | pages: [ 53 | { 54 | header: { 55 | description: strings.PropertyPaneDescription 56 | }, 57 | groups: [ 58 | { 59 | groupName: strings.BasicGroupName, 60 | groupFields: [ 61 | PropertyPaneTextField('description', { 62 | label: strings.DescriptionFieldLabel 63 | }) 64 | ] 65 | } 66 | ] 67 | } 68 | ] 69 | }; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/components/EditableTitle.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .editableTitle { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/components/EditableTitle.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './EditableTitle.module.scss'; 3 | import { IEditableTitleProps } from './IEditableTitleProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | //BEGIN: Add to support web part title 7 | import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle"; 8 | //END: Add 9 | 10 | export default class EditableTitle extends React.Component { 11 | public render(): React.ReactElement { 12 | return ( 13 |
14 | {/* BEGIN: Add to support web part title */} 15 | 18 | {/* END: Add */} 19 |
20 |
21 |
22 | Welcome to SharePoint! 23 |

Customize SharePoint experiences using Web Parts.

24 |

{escape(this.props.description)}

25 | 26 | Learn more 27 | 28 |
29 |
30 |
31 |
32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/components/IEditableTitleProps.ts: -------------------------------------------------------------------------------- 1 | //BEGIN: Add support for web part title 2 | import { DisplayMode } from '@microsoft/sp-core-library'; 3 | //END: Add 4 | 5 | export interface IEditableTitleProps { 6 | description: string; 7 | //BEGIN: Add support for web part title 8 | title: string; 9 | displayMode: DisplayMode; 10 | updateTitle: (value: string) => void; 11 | //END: Add 12 | } 13 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/editableTitle/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IEditableTitleWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'EditableTitleWebPartStrings' { 8 | const strings: IEditableTitleWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/PlaceholderTitleWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "4f98e248-2c7f-45f4-9982-1c75d0e5a073", 4 | "alias": "PlaceholderTitleWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "PlaceholderTitle" }, 21 | "description": { "default": "Demonstrates how to create a web part with a placeholder title" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "description": "PlaceholderTitle" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/PlaceholderTitleWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'PlaceholderTitleWebPartStrings'; 11 | import PlaceholderTitle from './components/PlaceholderTitle'; 12 | import { IPlaceholderTitleProps } from './components/IPlaceholderTitleProps'; 13 | 14 | export interface IPlaceholderTitleWebPartProps { 15 | description: string; 16 | title: string; 17 | } 18 | 19 | export default class PlaceholderTitleWebPart extends BaseClientSideWebPart { 20 | 21 | public render(): void { 22 | const element: React.ReactElement = React.createElement( 23 | PlaceholderTitle, 24 | { 25 | description: this.properties.description, 26 | title: this.properties.title, 27 | displayMode: this.displayMode, 28 | updateTitle: (value: string) => { 29 | this.properties.title = value; 30 | } 31 | } 32 | ); 33 | 34 | ReactDom.render(element, this.domElement); 35 | } 36 | 37 | protected onDispose(): void { 38 | ReactDom.unmountComponentAtNode(this.domElement); 39 | } 40 | 41 | protected get dataVersion(): Version { 42 | return Version.parse('1.0'); 43 | } 44 | 45 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 46 | return { 47 | pages: [ 48 | { 49 | header: { 50 | description: strings.PropertyPaneDescription 51 | }, 52 | groups: [ 53 | { 54 | groupName: strings.BasicGroupName, 55 | groupFields: [ 56 | PropertyPaneTextField('description', { 57 | label: strings.DescriptionFieldLabel 58 | }) 59 | ] 60 | } 61 | ] 62 | } 63 | ] 64 | }; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/components/IPlaceholderTitleProps.ts: -------------------------------------------------------------------------------- 1 | //BEGIN: Add support for web part title 2 | import { DisplayMode } from '@microsoft/sp-core-library'; 3 | //END: Add 4 | 5 | export interface IPlaceholderTitleProps { 6 | description: string; 7 | //BEGIN: Add support for web part title 8 | title: string; 9 | displayMode: DisplayMode; 10 | updateTitle: (value: string) => void; 11 | //END: Add 12 | } 13 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/components/PlaceholderTitle.module.scss: -------------------------------------------------------------------------------- 1 | @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; 2 | 3 | .placeholderTitle { 4 | .container { 5 | max-width: 700px; 6 | margin: 0px auto; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .row { 11 | @include ms-Grid-row; 12 | @include ms-fontColor-white; 13 | background-color: $ms-color-themeDark; 14 | padding: 20px; 15 | } 16 | 17 | .column { 18 | @include ms-Grid-col; 19 | @include ms-lg10; 20 | @include ms-xl8; 21 | @include ms-xlPush2; 22 | @include ms-lgPush1; 23 | } 24 | 25 | .title { 26 | @include ms-font-xl; 27 | @include ms-fontColor-white; 28 | } 29 | 30 | .subTitle { 31 | @include ms-font-l; 32 | @include ms-fontColor-white; 33 | } 34 | 35 | .description { 36 | @include ms-font-l; 37 | @include ms-fontColor-white; 38 | } 39 | 40 | .button { 41 | // Our button 42 | text-decoration: none; 43 | height: 32px; 44 | 45 | // Primary Button 46 | min-width: 80px; 47 | background-color: $ms-color-themePrimary; 48 | border-color: $ms-color-themePrimary; 49 | color: $ms-color-white; 50 | 51 | // Basic Button 52 | outline: transparent; 53 | position: relative; 54 | font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; 55 | -webkit-font-smoothing: antialiased; 56 | font-size: $ms-font-size-m; 57 | font-weight: $ms-font-weight-regular; 58 | border-width: 0; 59 | text-align: center; 60 | cursor: pointer; 61 | display: inline-block; 62 | padding: 0 16px; 63 | 64 | .label { 65 | font-weight: $ms-font-weight-semibold; 66 | font-size: $ms-font-size-m; 67 | height: 32px; 68 | line-height: 32px; 69 | margin: 0 4px; 70 | vertical-align: top; 71 | display: inline-block; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/components/PlaceholderTitle.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './PlaceholderTitle.module.scss'; 3 | import { IPlaceholderTitleProps } from './IPlaceholderTitleProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle"; 7 | 8 | export default class PlaceholderTitle extends React.Component { 9 | public render(): React.ReactElement { 10 | return ( 11 |
12 | 17 |
18 |
19 |
20 | Welcome to SharePoint! 21 |

Customize SharePoint experiences using Web Parts.

22 |

{escape(this.props.description)}

23 | 24 | Learn more 25 | 26 |
27 |
28 |
29 |
30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/placeholderTitle/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IPlaceholderTitleWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'PlaceholderTitleWebPartStrings' { 8 | const strings: IPlaceholderTitleWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/WebPartDescriptionWebPart.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", 3 | "id": "277d2a92-4efd-4ffd-a4fc-8abc68cfaf03", 4 | "alias": "WebPartDescriptionWebPart", 5 | "componentType": "WebPart", 6 | 7 | // The "*" signifies that the version should be taken from the package.json 8 | "version": "*", 9 | "manifestVersion": 2, 10 | 11 | // If true, the component can only be installed on sites where Custom Script is allowed. 12 | // Components that allow authors to embed arbitrary script code should set this to true. 13 | // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f 14 | "requiresCustomScript": false, 15 | "supportedHosts": ["SharePointWebPart"], 16 | 17 | "preconfiguredEntries": [{ 18 | "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other 19 | "group": { "default": "Other" }, 20 | "title": { "default": "WebPartDescription" }, 21 | "description": { "default": "Demonstrates how to add a web part description to your web part" }, 22 | "officeFabricIconFontName": "Page", 23 | "properties": { 24 | "description": "WebPartDescription" 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/WebPartDescriptionWebPart.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDom from 'react-dom'; 3 | import { Version } from '@microsoft/sp-core-library'; 4 | import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; 5 | import { 6 | IPropertyPaneConfiguration, 7 | PropertyPaneTextField 8 | } from '@microsoft/sp-property-pane'; 9 | 10 | import * as strings from 'WebPartDescriptionWebPartStrings'; 11 | import WebPartDescription from './components/WebPartDescription'; 12 | import { IWebPartDescriptionProps } from './components/IWebPartDescriptionProps'; 13 | 14 | export interface IWebPartDescriptionWebPartProps { 15 | description: string; 16 | // BEGIN Add to support web part description 17 | webPartDescription: string; 18 | // END Add 19 | } 20 | 21 | export default class WebPartDescriptionWebPart extends BaseClientSideWebPart { 22 | 23 | public render(): void { 24 | const element: React.ReactElement = React.createElement( 25 | WebPartDescription, 26 | { 27 | description: this.properties.description, 28 | // BEGIN: Add to support web part description 29 | // Don't forget that you need to add a comma at the end of the previous line 30 | webPartDescription: this.properties.webPartDescription, 31 | displayMode: this.displayMode, 32 | updateDescription: (value: string) => { 33 | this.properties.webPartDescription = value; 34 | } 35 | //END: Add 36 | } 37 | ); 38 | 39 | ReactDom.render(element, this.domElement); 40 | } 41 | 42 | protected onDispose(): void { 43 | ReactDom.unmountComponentAtNode(this.domElement); 44 | } 45 | 46 | protected get dataVersion(): Version { 47 | return Version.parse('1.0'); 48 | } 49 | 50 | protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { 51 | return { 52 | pages: [ 53 | { 54 | header: { 55 | description: strings.PropertyPaneDescription 56 | }, 57 | groups: [ 58 | { 59 | groupName: strings.BasicGroupName, 60 | groupFields: [ 61 | PropertyPaneTextField('description', { 62 | label: strings.DescriptionFieldLabel 63 | }) 64 | ] 65 | } 66 | ] 67 | } 68 | ] 69 | }; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/components/IWebPartDescriptionProps.ts: -------------------------------------------------------------------------------- 1 | import { DisplayMode } from '@microsoft/sp-core-library'; 2 | 3 | export interface IWebPartDescriptionProps { 4 | description: string; 5 | //BEGIN: Add support for web part description 6 | webPartDescription: string; 7 | displayMode: DisplayMode; 8 | updateDescription: (value: string) => void; 9 | //END: Add 10 | } 11 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/components/WebPartDescription.module.scss: -------------------------------------------------------------------------------- 1 | @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; 2 | 3 | .webPartDescription { 4 | .descriptionElement textarea { 5 | font-size: 14px; 6 | font-weight: 400; 7 | line-height: 1.6em; 8 | overflow-x: hidden; 9 | text-overflow: ellipsis; 10 | color: $ms-color-neutralPrimary; 11 | } 12 | 13 | .descriptionElement__NoMargin textarea { 14 | margin-bottom: 0; 15 | } 16 | 17 | .descriptionElement__centerAlign textarea { 18 | text-align: center; 19 | } 20 | 21 | .container { 22 | max-width: 700px; 23 | margin: 0px auto; 24 | //box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); 25 | } 26 | 27 | .row { 28 | @include ms-Grid-row; 29 | @include ms-fontColor-white; 30 | background-color: $ms-color-themeDark; 31 | padding: 20px; 32 | } 33 | 34 | .column { 35 | @include ms-Grid-col; 36 | @include ms-lg10; 37 | @include ms-xl8; 38 | @include ms-xlPush2; 39 | @include ms-lgPush1; 40 | } 41 | 42 | .title { 43 | @include ms-font-xl; 44 | @include ms-fontColor-white; 45 | } 46 | 47 | .subTitle { 48 | @include ms-font-l; 49 | @include ms-fontColor-white; 50 | } 51 | 52 | .description { 53 | @include ms-font-l; 54 | @include ms-fontColor-white; 55 | } 56 | 57 | .button { 58 | // Our button 59 | text-decoration: none; 60 | height: 32px; 61 | 62 | // Primary Button 63 | min-width: 80px; 64 | background-color: $ms-color-themePrimary; 65 | border-color: $ms-color-themePrimary; 66 | color: $ms-color-white; 67 | 68 | // Basic Button 69 | outline: transparent; 70 | position: relative; 71 | font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", 72 | sans-serif; 73 | -webkit-font-smoothing: antialiased; 74 | font-size: $ms-font-size-m; 75 | font-weight: $ms-font-weight-regular; 76 | border-width: 0; 77 | text-align: center; 78 | cursor: pointer; 79 | display: inline-block; 80 | padding: 0 16px; 81 | 82 | .label { 83 | font-weight: $ms-font-weight-semibold; 84 | font-size: $ms-font-size-m; 85 | height: 32px; 86 | line-height: 32px; 87 | margin: 0 4px; 88 | vertical-align: top; 89 | display: inline-block; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/components/WebPartDescription.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styles from './WebPartDescription.module.scss'; 3 | import { IWebPartDescriptionProps } from './IWebPartDescriptionProps'; 4 | import { escape } from '@microsoft/sp-lodash-subset'; 5 | 6 | import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle"; 7 | import { css } from "@uifabric/utilities/lib/css"; 8 | 9 | export default class WebPartDescription extends React.Component { 10 | public render(): React.ReactElement { 11 | return ( 12 |
13 |
14 |
15 |
16 | Welcome to SharePoint! 17 |

Customize SharePoint experiences using Web Parts.

18 |

{escape(this.props.description)}

19 | 20 | Learn more 21 | 22 |
h 23 |
24 |
25 | {/* BEGIN: Add to support web part description */} 26 | 32 | {/* END: Add */} 33 |
34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/loc/en-us.js: -------------------------------------------------------------------------------- 1 | define([], function() { 2 | return { 3 | "PropertyPaneDescription": "Description", 4 | "BasicGroupName": "Group Name", 5 | "DescriptionFieldLabel": "Description Field" 6 | } 7 | }); -------------------------------------------------------------------------------- /WebPartTitles/src/webparts/webPartDescription/loc/mystrings.d.ts: -------------------------------------------------------------------------------- 1 | declare interface IWebPartDescriptionWebPartStrings { 2 | PropertyPaneDescription: string; 3 | BasicGroupName: string; 4 | DescriptionFieldLabel: string; 5 | } 6 | 7 | declare module 'WebPartDescriptionWebPartStrings' { 8 | const strings: IWebPartDescriptionWebPartStrings; 9 | export = strings; 10 | } 11 | -------------------------------------------------------------------------------- /WebPartTitles/teams/277d2a92-4efd-4ffd-a4fc-8abc68cfaf03_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartTitles/teams/277d2a92-4efd-4ffd-a4fc-8abc68cfaf03_color.png -------------------------------------------------------------------------------- /WebPartTitles/teams/277d2a92-4efd-4ffd-a4fc-8abc68cfaf03_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartTitles/teams/277d2a92-4efd-4ffd-a4fc-8abc68cfaf03_outline.png -------------------------------------------------------------------------------- /WebPartTitles/teams/4f98e248-2c7f-45f4-9982-1c75d0e5a073_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartTitles/teams/4f98e248-2c7f-45f4-9982-1c75d0e5a073_color.png -------------------------------------------------------------------------------- /WebPartTitles/teams/4f98e248-2c7f-45f4-9982-1c75d0e5a073_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartTitles/teams/4f98e248-2c7f-45f4-9982-1c75d0e5a073_outline.png -------------------------------------------------------------------------------- /WebPartTitles/teams/920ed53b-6b0b-4548-b17a-2e8b61de888c_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartTitles/teams/920ed53b-6b0b-4548-b17a-2e8b61de888c_color.png -------------------------------------------------------------------------------- /WebPartTitles/teams/920ed53b-6b0b-4548-b17a-2e8b61de888c_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hugoabernier/WebPartDesignSeries/0a039cd43f6342b32fbeaf45d88e7f7909192752/WebPartTitles/teams/920ed53b-6b0b-4548-b17a-2e8b61de888c_outline.png -------------------------------------------------------------------------------- /WebPartTitles/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "forceConsistentCasingInFileNames": true, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "jsx": "react", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "experimentalDecorators": true, 12 | "skipLibCheck": true, 13 | "outDir": "lib", 14 | "inlineSources": false, 15 | "strictNullChecks": false, 16 | "noUnusedLocals": false, 17 | "typeRoots": [ 18 | "./node_modules/@types", 19 | "./node_modules/@microsoft" 20 | ], 21 | "types": [ 22 | "es6-promise", 23 | "webpack-env" 24 | ], 25 | "lib": [ 26 | "es5", 27 | "dom", 28 | "es2015.collection" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts" 33 | ], 34 | "exclude": [ 35 | "node_modules", 36 | "lib" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /WebPartTitles/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@microsoft/sp-tslint-rules/base-tslint.json", 3 | "rules": { 4 | "class-name": false, 5 | "export-name": false, 6 | "forin": false, 7 | "label-position": false, 8 | "member-access": true, 9 | "no-arg": false, 10 | "no-console": false, 11 | "no-construct": false, 12 | "no-duplicate-variable": true, 13 | "no-eval": false, 14 | "no-function-expression": true, 15 | "no-internal-module": true, 16 | "no-shadowed-variable": true, 17 | "no-switch-case-fall-through": true, 18 | "no-unnecessary-semicolons": true, 19 | "no-unused-expression": true, 20 | "no-use-before-declare": true, 21 | "no-with-statement": true, 22 | "semicolon": true, 23 | "trailing-comma": false, 24 | "typedef": false, 25 | "typedef-whitespace": false, 26 | "use-named-parameter": true, 27 | "variable-name": false, 28 | "whitespace": false 29 | } 30 | } -------------------------------------------------------------------------------- /node_modules/@rehooks/component-size/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018-present Fouad Matin 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /node_modules/@rehooks/component-size/README.md: -------------------------------------------------------------------------------- 1 | # `@rehooks/component-size` 2 | 3 | > React hook for determining the size of a component 4 | 5 | > **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html) 6 | > which is subject to change until React 16.7 final. 7 | > 8 | > You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0` 9 | 10 | ## Install 11 | 12 | ```sh 13 | yarn add @rehooks/component-size 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```js 19 | import { useRef } from 'react' 20 | import useComponentSize from '@rehooks/component-size' 21 | 22 | function MyComponent() { 23 | let ref = useRef(null) 24 | let size = useComponentSize(ref) 25 | // size == { width: 100, height: 200 } 26 | let { width, height } = size 27 | let imgUrl = `https://via.placeholder.com/${width}x${height}` 28 | 29 | return ( 30 |
31 | 32 |
33 | ) 34 | } 35 | ``` 36 | 37 | ## ResizeObserver 38 | 39 | [Resize Observer](https://developers.google.com/web/updates/2016/10/resizeobserver) 40 | is the API is used to determine if an element is resized. Browser support is pretty good in Chrome, but is still missing support in other major browsers. 41 | 42 | > [Can i use ResizeObserver?](https://caniuse.com/#feat=resizeobserver) 43 | 44 | ### Polyfill 45 | 46 | You can import the 47 | [polyfill](https://github.com/que-etc/resize-observer-polyfill) directly from here 48 | 49 | ```sh 50 | yarn add resize-observer-polyfill 51 | ``` 52 | 53 | Then import it in your app: 54 | 55 | ```js 56 | import 'resize-observer-polyfill' 57 | ``` 58 | 59 | If you are using Webpack (or similar) you could use [dynamic 60 | imports](https://webpack.js.org/api/module-methods/#import-), to load the 61 | Polyfill only if needed. A basic implementation could look something like this: 62 | 63 | ```js 64 | loadPolyfills() 65 | .then(() => /* Render React application now that your Polyfills are ready */) 66 | 67 | /** 68 | * Do feature detection, to figure out which polyfills needs to be imported. 69 | **/ 70 | function loadPolyfills() { 71 | const polyfills = [] 72 | 73 | if (!supportsResizeObserver()) { 74 | polyfills.push(import('resize-observer-polyfill')) 75 | } 76 | 77 | return Promise.all(polyfills) 78 | } 79 | 80 | function supportsResizeObserver() { 81 | return ( 82 | 'ResizeObserver' in global && 83 | 'ResizeObserverEntry' in global && 84 | 'contentRect' in ResizeObserverEntry.prototype 85 | ) 86 | } 87 | ``` 88 | -------------------------------------------------------------------------------- /node_modules/@rehooks/component-size/index.d.ts: -------------------------------------------------------------------------------- 1 | interface ComponentSize { 2 | width: number 3 | height: number 4 | } 5 | 6 | export default function useComponentSize(ref: React.RefObject): ComponentSize 7 | -------------------------------------------------------------------------------- /node_modules/@rehooks/component-size/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | var React = require('react') 3 | var useState = React.useState 4 | var useCallback = React.useCallback 5 | var useLayoutEffect = React.useLayoutEffect 6 | 7 | function getSize(el) { 8 | if (!el) { 9 | return { 10 | width: 0, 11 | height: 0 12 | } 13 | } 14 | 15 | return { 16 | width: el.offsetWidth, 17 | height: el.offsetHeight 18 | } 19 | } 20 | 21 | function useComponentSize(ref) { 22 | var _useState = useState(getSize(ref ? ref.current : {})) 23 | var ComponentSize = _useState[0] 24 | var setComponentSize = _useState[1] 25 | 26 | var handleResize = useCallback( 27 | function handleResize() { 28 | if (ref.current) { 29 | setComponentSize(getSize(ref.current)) 30 | } 31 | }, 32 | [ref] 33 | ) 34 | 35 | useLayoutEffect( 36 | function() { 37 | if (!ref.current) { 38 | return 39 | } 40 | 41 | handleResize() 42 | 43 | if (typeof ResizeObserver === 'function') { 44 | var resizeObserver = new ResizeObserver(function() { 45 | handleResize() 46 | }) 47 | resizeObserver.observe(ref.current) 48 | 49 | return function() { 50 | resizeObserver.disconnect(ref.current) 51 | resizeObserver = null 52 | } 53 | } else { 54 | window.addEventListener('resize', handleResize) 55 | 56 | return function() { 57 | window.removeEventListener('resize', handleResize) 58 | } 59 | } 60 | }, 61 | [ref.current] 62 | ) 63 | 64 | return ComponentSize 65 | } 66 | 67 | module.exports = useComponentSize 68 | -------------------------------------------------------------------------------- /node_modules/@rehooks/component-size/index.js.flow: -------------------------------------------------------------------------------- 1 | interface ComponentSize { 2 | width: number, 3 | height: number, 4 | } 5 | 6 | declare export default function useComponentSize(ref: React.Ref): ComponentSize; -------------------------------------------------------------------------------- /node_modules/@rehooks/component-size/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_from": "@rehooks/component-size", 3 | "_id": "@rehooks/component-size@1.0.3", 4 | "_inBundle": false, 5 | "_integrity": "sha512-pnYld+8SSF2vXwdLOqBGUyOrv/SjzwLjIUcs/4c1JJgR0q4E9eBtBfuZMD6zUD51fvSehSsbnlQMzotSmPTXPg==", 6 | "_location": "/@rehooks/component-size", 7 | "_phantomChildren": {}, 8 | "_requested": { 9 | "type": "tag", 10 | "registry": true, 11 | "raw": "@rehooks/component-size", 12 | "name": "@rehooks/component-size", 13 | "escapedName": "@rehooks%2fcomponent-size", 14 | "scope": "@rehooks", 15 | "rawSpec": "", 16 | "saveSpec": null, 17 | "fetchSpec": "latest" 18 | }, 19 | "_requiredBy": [ 20 | "#USER", 21 | "/" 22 | ], 23 | "_resolved": "https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.3.tgz", 24 | "_shasum": "823eabeb42084893d46d43e3a9d1d0e34252b3cb", 25 | "_spec": "@rehooks/component-size", 26 | "_where": "C:\\github\\WebPartDesignSeries", 27 | "author": { 28 | "name": "Fouad Matin", 29 | "email": "m@fouad.org" 30 | }, 31 | "ava": { 32 | "require": [ 33 | "./test-setup.js" 34 | ] 35 | }, 36 | "bugs": { 37 | "url": "https://github.com/rehooks/component-size/issues" 38 | }, 39 | "bundleDependencies": false, 40 | "deprecated": false, 41 | "description": "React hook for component-size", 42 | "devDependencies": { 43 | "@types/react": "16.4.18", 44 | "ava": "0.25.0", 45 | "browser-env": "3.2.5", 46 | "parcel": "^1.12.3", 47 | "raf": "3.4.0", 48 | "react": "16.8.1", 49 | "react-dom": "16.8.1", 50 | "react-test-renderer": "16.8.1" 51 | }, 52 | "files": [ 53 | "index.*" 54 | ], 55 | "homepage": "https://github.com/rehooks/component-size#readme", 56 | "keywords": [ 57 | "react", 58 | "hooks", 59 | "component-size" 60 | ], 61 | "license": "MIT", 62 | "main": "index.js", 63 | "name": "@rehooks/component-size", 64 | "peerDependencies": { 65 | "react": ">=16.8.0" 66 | }, 67 | "publishConfig": { 68 | "access": "public" 69 | }, 70 | "repository": { 71 | "type": "git", 72 | "url": "git+https://github.com/rehooks/component-size.git" 73 | }, 74 | "scripts": { 75 | "example": "parcel example.html", 76 | "test": "ava test.js" 77 | }, 78 | "version": "1.0.3" 79 | } 80 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "@rehooks/component-size": { 6 | "version": "1.0.3", 7 | "resolved": "https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.3.tgz", 8 | "integrity": "sha512-pnYld+8SSF2vXwdLOqBGUyOrv/SjzwLjIUcs/4c1JJgR0q4E9eBtBfuZMD6zUD51fvSehSsbnlQMzotSmPTXPg==" 9 | } 10 | } 11 | } 12 | --------------------------------------------------------------------------------