Merge pull request #127 from SharePoint/dev

Merge for v1.13.0

Author: estruyf

CHANGELOG.json

@@ -1,5 +1,25 @@
 {
   "versions": [
+    {
+      "version": "1.13.0",
+      "changes": {
+        "new": [
+        ],
+        "enhancements": [
+          "Updated the `office-ui-fabric-react` to the same version as in SPFx 1.7.0 [#105](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/105)",
+          "`PropertyFieldPeoplePicker`: Ability to select only from a specific site [#9](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/9)",
+          "`PropertyFieldCodeEditor`: Added support for custom field rendering [#122](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/122)",
+          "`PropertyFieldCodeEditor`: Added the functionality to sort the items in the collection [#123](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/123)"
+        ],
+        "fixes": [
+          "`PropertyFieldDateTimePicker`: Fix for the hours dropdown not showing values [#112](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/112)",
+          "`PropertyFieldCollectionData`: Issue with debounce validation overriding the inserted values [#113](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/113)",
+          "`PropertyPaneWebPartInformation`: Remove redundant 'Description' label [#119](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/119)",
+          "`PropertyFieldCodeEditor`: Handle initial value after updating properties [#121](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/121)"
+        ]
+      },
+      "contributions": ["[Erwin van Hunen](https://github.com/erwinvanhunen)"]
+    },
     {
       "version": "1.12.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Releases
 
+## 1.13.0
+
+**Enhancements**
+
+- Updated the `office-ui-fabric-react` to the same version as in SPFx 1.7.0 [#105](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/105)
+- `PropertyFieldPeoplePicker`: Ability to select only from a specific site [#9](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/9)
+- `PropertyFieldCodeEditor`: Added support for custom field rendering [#122](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/122)
+- `PropertyFieldCodeEditor`: Added the functionality to sort the items in the collection [#123](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/123)
+
+**Fixes**
+
+- `PropertyFieldDateTimePicker`: Fix for the hours dropdown not showing values [#112](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/112)
+- `PropertyFieldCollectionData`: Issue with debounce validation overriding the inserted values [#113](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/113)
+- `PropertyPaneWebPartInformation`: Remove redundant 'Description' label [#119](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/119)
+- `PropertyFieldCodeEditor`: Handle initial value after updating properties [#121](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/121)
+
+### Contributors
+
+Special thanks to our contributor: [Erwin van Hunen](https://github.com/erwinvanhunen).
+
 ## 1.12.0
 
 **New control(s)**

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

@@ -1,5 +1,25 @@
 # Releases
 
+## 1.13.0
+
+**Enhancements**
+
+- Updated the `office-ui-fabric-react` to the same version as in SPFx 1.7.0 [#105](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/105)
+- `PropertyFieldPeoplePicker`: Ability to select only from a specific site [#9](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/9)
+- `PropertyFieldCodeEditor`: Added support for custom field rendering [#122](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/122)
+- `PropertyFieldCodeEditor`: Added the functionality to sort the items in the collection [#123](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/123)
+
+**Fixes**
+
+- `PropertyFieldDateTimePicker`: Fix for the hours dropdown not showing values [#112](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/112)
+- `PropertyFieldCollectionData`: Issue with debounce validation overriding the inserted values [#113](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/113)
+- `PropertyPaneWebPartInformation`: Remove redundant 'Description' label [#119](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/119)
+- `PropertyFieldCodeEditor`: Handle initial value after updating properties [#121](https://github.com/SharePoint/sp-dev-fx-property-controls/issues/121)
+
+### Contributors
+
+Special thanks to our contributor: [Erwin van Hunen](https://github.com/erwinvanhunen).
+
 ## 1.12.0
 
 **New control(s)**

docs/documentation/docs/controls/PropertyFieldCollectionData.md

@@ -91,20 +91,40 @@ PropertyFieldCollectionData("collectionData", {
 })
 ```
 
+### Sample of custom field rendering
+
+Here is an example of how you can render your own controls in the `PropertyFieldCollectionData` control:
+
+```TypeScript
+{
+  id: "customFieldId",
+  title: "Custom Field",
+  type: CustomCollectionFieldType.custom,
+  onCustomRender: (field, value, onUpdate) => {
+    return (
+      React.createElement("div", null,
+        React.createElement("input", { value: value, onChange: (event: React.FormEvent<HTMLInputElement>) => onUpdate(field.id, event.currentTarget.value) }), " 🎉"
+      )
+    );
+  }
+}
+```
+
 ## Implementation
 
 The `PropertyFieldCollectionData` control can be configured with the following properties:
 
-| Property | Type | Required | Description |
+| Property | Type | Required | Description | Default Value |
 | ---- | ---- | ---- | ---- |
-| key | string | yes | An unique key that indicates the identity of this control. |
-| label | string | yes | Property field label displayed on top. |
-| panelHeader | string | yes | Label to be used as the header in the panel. |
-| panelDescription | string | no | Property that allows you to specify a description in the collection panel. |
-| manageBtnLabel | string | yes | Label of the button to open the panel. |
-| fields | ICustomCollectionField[] | yes | The fields to be used for the list of collection data. |
-| value | string | yes | The collection data value. |
-| disabled | boolean | no | Specify if the control is disabled. |
+| key | string | yes | An unique key that indicates the identity of this control. | |
+| label | string | yes | Property field label displayed on top. | |
+| panelHeader | string | yes | Label to be used as the header in the panel. | |
+| panelDescription | string | no | Property that allows you to specify a description in the collection panel. | |
+| manageBtnLabel | string | yes | Label of the button to open the panel. | |
+| fields | ICustomCollectionField[] | yes | The fields to be used for the list of collection data. | |
+| value | string | yes | The collection data value. | |
+| enableSorting | boolean | no | Specify if you want to be able to sort the items in the collection. | false |
+| disabled | boolean | no | Specify if the control is disabled. | false |
 
 Interface `ICustomCollectionField`
 
@@ -120,6 +140,7 @@ Interface `ICustomCollectionField`
 | defaultValue | any | no | Specify a default value for the input field. |
 | deferredValidationTime | number | no | Field will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default: 200ms. |
 | onGetErrorMessage | (value: any, index: number, crntItem: any): string \| Promise<string> | no | The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. |
+| onCustomRender | (field: ICustomCollectionField, value: any, onUpdate: (fieldId: string, value: any) => void) => JSX.Element | no | This property is only required if you are using the `custom` field type and it can be used to specify the custom rendering of your control in the collection data. |
 
 Enum `CustomCollectionFieldType`
 
@@ -131,5 +152,6 @@ Enum `CustomCollectionFieldType`
 | dropdown | Dropdown field. You will have to specify the `options` property when using this field type |
 | fabricIcon | Name of the [Office UI Fabric icon](https://developer.microsoft.com/en-us/fabric#/styles/icons) |
 | url | URL field |
+| custom | This gives you control over the whole field rendering. Be sure to provide the `onCustomRender` method to render your control in the collection data. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldCollectionData)

docs/documentation/docs/controls/PropertyFieldPeoplePicker.md

@@ -64,7 +64,8 @@ The `PropertyFieldPeoplePicker` control can be configured with the following pro
 | multiSelect | boolean | no | Define if you want to allow multi user / group selection. (optional, true by default). |
 | principalType | PrincipalType[] | no | Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. |
 | onPropertyChange | function | yes | Defines a onPropertyChange function to raise when the date gets changed. |
-| properties | any | yes | Parent web part properties, this object is use to update the property value.  |
+| properties | any | yes | Parent web part properties, this object is use to update the property value. |
+| targetSiteUrl | string | no | Specify the URL of the target site from which you want to retreive the users/groups. |
 | key | string | yes | An unique key that indicates the identity of this control. |
 | onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |
 | deferredValidationTime | number | no | Control will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default value is 200. |

docs/documentation/docs/controls/PropertyPanePropertyEditor.md

@@ -17,7 +17,7 @@ This control allows the user to edit the webpart properties in JSON. It can also
 2. Import the following modules to your component: 
 
 ```TypeScript
-import { PropertyWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor';
+import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor';
 ```
 
 3. Create a new property for your web part, for example:

docs/documentation/mkdocs.yml

@@ -14,6 +14,8 @@ nav:
     - PropertyFieldSpinButton: 'controls/PropertyFieldSpinButton.md'
     - PropertyFieldSwatchColorPicker: 'controls/PropertyFieldSwatchColorPicker.md'
     - PropertyFieldTermPicker: 'controls/PropertyFieldTermPicker.md'
+    - PropertyPanePropertyEditor: 'controls/PropertyPanePropertyEditor.md'
+    - PropertyPaneWebPartInformation: 'controls/PropertyPaneWebPartInformation.md'
   - 'Controls with callout':
     - PropertyFieldButtonWithCallout: 'controls/PropertyFieldButtonWithCallout.md'
     - PropertyFieldCheckboxWithCallout: 'controls/PropertyFieldCheckboxWithCallout.md'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "@pnp/telemetry-js": "1.0.0",
-    "react-ace": "5.8.0"
+    "react-ace": "5.8.0",
+    "office-ui-fabric-react": "5.131.0"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "~1.3.0",

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "1.12.0";
+export const version: string = "1.13.0";

src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts

@@ -10,7 +10,7 @@ import PropertyFieldButtonHost from './PropertyFieldButtonWithCalloutHost';
 
 import { IPropertyFieldButtonWithCalloutPropsInternal, IPropertyFieldButtonWithCalloutProps } from './IPropertyFieldButtonWithCallout';
 import { ButtonType } from 'office-ui-fabric-react/lib/components/Button';
-import * as _ from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * Represents a PropertyFieldButtonWithCallout object
@@ -31,16 +31,16 @@ class PropertyFieldButtonWithCalloutBuilder implements IPropertyPaneField<IPrope
 
     private _render(elem: HTMLElement, context?: any, changeCallback?: (targetProperty?: string, newValue?: any) => void): void {
 
-        const props: IPropertyFieldButtonWithCalloutProps = <IPropertyFieldButtonWithCalloutProps>_.omit(this.properties, ['buttonType']);
+        const props: IPropertyFieldButtonWithCalloutProps = <IPropertyFieldButtonWithCalloutProps>omit(this.properties, ['buttonType']);
 
         //
         // PropertyPaneButtonType is not assignable to ButtonType
         //
         const buttonTypeString: string = ButtonType[this.properties.buttonType];
         const buttonType: ButtonType = ButtonType[buttonTypeString];
-
+        const propsWithoutRef = omit(props, "ref");
         const element = React.createElement(PropertyFieldButtonHost, {
-            ...props,
+            ...propsWithoutRef,
             buttonType: buttonType
         });