Merge pull request #373 from pnp/v2-dev

merge for 2.7.0

CHANGELOG.json

@@ -1,5 +1,25 @@
 {
   "versions": [
+    {
+      "version": "2.7.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`PropertyFieldColorPicker`: Add debounce property to color picker control [#352](https://github.com/pnp/sp-dev-fx-property-controls/issues/352)"
+        ],
+        "fixes": [
+          "`PropertyFieldFilePicker`: Stock images url is getting a 404 server error [#364](https://github.com/pnp/sp-dev-fx-property-controls/issues/364)",
+          "`PropertyFieldColumnPicker`: Filter not working properly [#356](https://github.com/pnp/sp-dev-fx-property-controls/issues/356)",
+          "`PropertyFieldFilePicker`: React crash on large folders [#371](https://github.com/pnp/sp-dev-fx-property-controls/pull/371)",
+          "`PropertyFieldCollectionData`: PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save [#369](https://github.com/pnp/sp-dev-fx-property-controls/issues/369)"
+        ]
+      },
+      "contributions": [
+        "[Chrisrb05](https://github.com/Chrisrb05)",
+        "[Konrad K.](https://github.com/wilecoyotegenius)",
+        "[Mark Bice](https://github.com/mbice)"
+      ]
+    },
     {
       "version": "2.6.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Releases
 
+## 2.7.0
+
+### Enhancements
+
+- `PropertyFieldColorPicker`: Add debounce property to color picker control [#352](https://github.com/pnp/sp-dev-fx-property-controls/issues/352)
+
+### Fixes
+
+- `PropertyFieldFilePicker`: Stock images url is getting a 404 server error [#364](https://github.com/pnp/sp-dev-fx-property-controls/issues/364)
+- `PropertyFieldColumnPicker`: Filter not working properly [#356](https://github.com/pnp/sp-dev-fx-property-controls/issues/356)
+- `PropertyFieldFilePicker`: React crash on large folders [#371](https://github.com/pnp/sp-dev-fx-property-controls/pull/371)
+- `PropertyFieldCollectionData`: PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save [#369](https://github.com/pnp/sp-dev-fx-property-controls/issues/369)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Chrisrb05](https://github.com/Chrisrb05), [Konrad K.](https://github.com/wilecoyotegenius), [Mark Bice](https://github.com/mbice).
+
 ## 2.6.0
 
 ### Fixes

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,22 @@
 # Releases
 
+## 2.7.0
+
+### Enhancements
+
+- `PropertyFieldColorPicker`: Add debounce property to color picker control [#352](https://github.com/pnp/sp-dev-fx-property-controls/issues/352)
+
+### Fixes
+
+- `PropertyFieldFilePicker`: Stock images url is getting a 404 server error [#364](https://github.com/pnp/sp-dev-fx-property-controls/issues/364)
+- `PropertyFieldColumnPicker`: Filter not working properly [#356](https://github.com/pnp/sp-dev-fx-property-controls/issues/356)
+- `PropertyFieldFilePicker`: React crash on large folders [#371](https://github.com/pnp/sp-dev-fx-property-controls/pull/371)
+- `PropertyFieldCollectionData`: PropertyFieldCollectionData is not setting sortIdx on resulting collection when using Add and Save [#369](https://github.com/pnp/sp-dev-fx-property-controls/issues/369)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Chrisrb05](https://github.com/Chrisrb05), [Konrad K.](https://github.com/wilecoyotegenius), [Mark Bice](https://github.com/mbice).
+
 ## 2.6.0
 
 ### Fixes

docs/documentation/docs/controls/PropertyFieldColorPicker.md

@@ -36,6 +36,7 @@ PropertyFieldColorPicker('color', {
   onPropertyChange: this.onPropertyPaneFieldChanged,
   properties: this.properties,
   disabled: false,
+  debounce: 1000,
   isHidden: false,
   alphaSliderHidden: false,
   style: PropertyFieldColorPickerStyle.Full,
@@ -52,6 +53,7 @@ The `PropertyFieldColorPicker` control can be configured with the following prop
 | ---- | ---- | ---- | ---- |
 | label | string | yes | Property field label displayed on top. |
 | disabled | boolean | no | Specify if the control needs to be disabled. |
+| debounce | number | no | Specify delay after which control value will be set. |
 | isHidden | boolean | no | Specify if the control needs to be hidden. |
 | selectedColor | string or IColor | no | The CSS-compatible string or an IColor object to describe the initial color |
 | alphaSliderHidden | boolean | no | When true, the alpha slider control is hidden |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "engines": {
     "node": ">=0.10.0"
   },

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "2.6.0";
+export const version: string = "2.7.0";

src/propertyFields/collectionData/collectionDataViewer/CollectionDataViewer.tsx

@@ -127,7 +127,9 @@ export class CollectionDataViewer extends React.Component<ICollectionDataViewerP
   private addAndSave = () => {
     // Check if the item is not empty
     if (this.state.inCreationItem) {
-      this.props.fOnSave([...this.state.crntItems, this.state.inCreationItem]);
+      let crntItems = [...this.state.crntItems, this.state.inCreationItem];
+      crntItems = this.updateSortProperty(crntItems);
+      this.props.fOnSave(crntItems);
     } else {
       this.onSave();
     }

src/propertyFields/colorPicker/IPropertyFieldColorPicker.ts

@@ -41,6 +41,11 @@ export interface IPropertyFieldColorPickerProps {
 	*/
 	disabled?: boolean;
 
+	/**
+	 * Time after which the control is updated
+	 */
+	debounce?: number;
+
 	/**
 	* Whether the property pane field is hidden or not.
 	*/

src/propertyFields/colorPicker/IPropertyFieldColorPickerHost.ts

@@ -7,6 +7,7 @@ export interface IPropertyFieldColorPickerHostProps {
 	label: string;
 	alphaSliderHidden: boolean;
 	disabled: boolean;
+	debounce: number;
 	isHidden: boolean;
 	selectedColor: string;
 	style: PropertyFieldColorPickerStyle;

src/propertyFields/colorPicker/PropertyFieldColorPicker.ts

@@ -3,6 +3,7 @@ import { getColorFromString, IColor } from 'office-ui-fabric-react/lib/utilities
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { setPropertyValue } from '../../helpers/GeneralHelper';
+import { debounce } from '../../common/util/Util';
 
 import {
 	IPropertyFieldColorPickerProps,
@@ -22,6 +23,7 @@ class PropertyFieldColorPickerBuilder implements IPropertyPaneField<IPropertyFie
 	private color: string;
 	private valueAsObject: boolean;
 	private changeCB?: (targetProperty?: string, newValue?: any) => void;
+	private _debounce: (fnc: any, timeout:number) => void = debounce();
 
 	public constructor(_targetProperty: string, _properties: IPropertyFieldColorPickerProps) {
 		this.targetProperty = _targetProperty;
@@ -31,6 +33,7 @@ class PropertyFieldColorPickerBuilder implements IPropertyPaneField<IPropertyFie
 			onPropertyChange: _properties.onPropertyChange,
 			selectedColor: _properties.selectedColor,
 			disabled: _properties.disabled,
+			debounce: _properties.debounce,
 			isHidden: _properties.isHidden,
 			alphaSliderHidden: _properties.alphaSliderHidden,
 			properties: _properties.properties,
@@ -70,6 +73,7 @@ class PropertyFieldColorPickerBuilder implements IPropertyPaneField<IPropertyFie
 			label: this.properties.label,
 			alphaSliderHidden: this.properties.alphaSliderHidden,
 			disabled: this.properties.disabled,
+			debounce: this.properties.debounce,
 			isHidden: this.properties.isHidden,
 			selectedColor: this.color,
 			style: this.properties.style || PropertyFieldColorPickerStyle.Inline,
@@ -84,14 +88,20 @@ class PropertyFieldColorPickerBuilder implements IPropertyPaneField<IPropertyFie
 			let newValue: string | IColor = (this.valueAsObject ? getColorFromString(newColor) : newColor);
 			let oldValue: string | IColor = (this.valueAsObject ? getColorFromString(this.color) : this.color);
 			this.color = newColor;
-			this.properties.onPropertyChange(this.targetProperty, oldValue, newValue);
-      setPropertyValue(this.properties.properties, this.targetProperty, newValue);
-			if (typeof this.changeCB !== 'undefined' && this.changeCB !== null) {
-				this.changeCB(this.targetProperty, newValue);
-			}
+			this.properties.debounce ? 
+				this._debounce(() => {
+					this.onColorChangedInternal(oldValue, newValue);
+				}, this.properties.debounce) : 
+				this.onColorChangedInternal(oldValue, newValue);
+		}
+	}
+	private onColorChangedInternal(oldValue: string | IColor , newValue: string | IColor ) {
+		this.properties.onPropertyChange(this.targetProperty, oldValue, newValue);
+		setPropertyValue(this.properties.properties, this.targetProperty, newValue);
+		if (typeof this.changeCB !== 'undefined' && this.changeCB !== null) {
+			this.changeCB(this.targetProperty, newValue);
 		}
 	}
-
 }
 
 export function PropertyFieldColorPicker(targetProperty: string, properties: IPropertyFieldColorPickerProps): IPropertyPaneField<IPropertyFieldColorPickerProps> {

src/propertyFields/columnPicker/PropertyFieldColumnPickerHost.tsx

@@ -66,7 +66,8 @@ export default class PropertyFieldColumnPickerHost extends React.Component<IProp
         this.options = [];
         columnService.getColumns(displayHiddenColumns).then((response: ISPColumns) => {
             // Start mapping the Columns that are selected
-            response.value.forEach((column: ISPColumn) => {
+            const value = response.value || [];
+            value.forEach((column: ISPColumn) => {
                 let colPropsToCheck = columnReturnProperty ? column[columnReturnProperty] : column.Id;
                 if (selectedColumn === colPropsToCheck) {
                     this.selectedKey = columnReturnProperty ? column[columnReturnProperty] : column.Id;

src/propertyFields/filePicker/filePickerControls/StockImagesTab/StockImages.tsx

@@ -17,7 +17,7 @@ export class StockImages extends React.Component<IStockImagesProps> {
     const { language } = this.props;
 
     const themesColor = `&themecolors=${encodeURIComponent(this.getCurrentThemeConfiguration())}`;
-    const contentPickerUrl = `https://hubblecontent.osi.office.net/contentsvc/external/m365contentpicker/index.html?p=3&app=1001&aud=prod&channel=devmain&setlang=${language}&msel=0&env=prod&premium=1${themesColor}`;
+    const contentPickerUrl = `https://hubblecontent.osi.office.net/contentsvc/m365contentpicker/index.html?p=3&app=1001&aud=prod&channel=devmain&setlang=${language}&msel=0&env=prod&premium=1${themesColor}`;
 
     return (
       <div className={styles.tabContainer}>

src/propertyFields/filePicker/filePickerControls/controls/FileBrowser/FileBrowser.tsx

@@ -179,7 +179,7 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
                         selectionPreservedOnEmptyClick={true}
                         enterModalSelectionOnTouch={true}
                         onRenderRow={this._onRenderRow}
-                        onRenderMissingItem={this._loadNextDataRequest}
+                        onRenderMissingItem={() => { this._loadNextDataRequest(); return null; }}
                       />) :
                       (<TilesList
                         fileBrowserService={this.props.fileBrowserService}

src/propertyFields/peoplePicker/IPropertyFieldPeoplePicker.ts

@@ -1,4 +1,4 @@
-import { IWebPartContext, IPropertyPaneCustomFieldProps } from '@microsoft/sp-webpart-base';
+import { IWebPartContext } from '@microsoft/sp-webpart-base';
 
 /**
  * PrincipalType controls the type of entities that are returned in the results.

src/services/SPColumnPickerService.ts

@@ -53,8 +53,8 @@ export class SPColumnPickerService implements ISPColumnPickerService {
 
                 // Adds an OData Filter to the list
                 if (this.props.filter) {
-                    if (displayHiddenColumns) queryUrl += `&$filter=&${encodeURIComponent(this.props.filter)}`;
-                    else queryUrl += `&$filter=Hidden eq false&${encodeURIComponent(this.props.filter)}`;
+                    if (displayHiddenColumns) queryUrl += `&$filter=${encodeURIComponent(this.props.filter)}`;
+                    else queryUrl += `&$filter=Hidden eq false and ${encodeURIComponent(this.props.filter)}`;
                 } else {
                     if (!displayHiddenColumns) queryUrl += `&$filter=Hidden eq false`;
                 }

src/services/SPPeopleSearchService.ts

@@ -4,7 +4,6 @@ import { PrincipalType, IPropertyFieldGroupOrPerson } from './../propertyFields/
 import { ISPPeopleSearchService } from './ISPPeopleSearchService';
 import SPPeoplePickerMockHttpClient from './SPPeopleSearchMockService';
 import { IWebPartContext } from '@microsoft/sp-webpart-base';
-import { IUsers } from './IUsers';
 
 /**
  * Service implementation to search people in SharePoint

src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts

@@ -696,6 +696,7 @@ export default class PropertyControlsTestWebPart extends BaseClientSideWebPart<I
                   selectedColor: this.properties.color,
                   onPropertyChange: this.onPropertyPaneFieldChanged,
                   properties: this.properties,
+                  debounce: 500,
                   //disabled: true,
                   //alphaSliderHidden: true,
                   //style: PropertyFieldColorPickerStyle.Full,