Merge pull request #243 from SharePoint/dev

Prepare 1.12.0 release

CHANGELOG.JSON

@@ -1,5 +1,30 @@
 {
   "versions": [
+    {
+      "version": "1.12.0",
+      "changes": {
+        "new": [
+          "`ListItemAttachments`: New control added [#177](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/177)",
+          "`IFramePanel`: New control added [#226](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/226)"
+        ],
+        "enhancements": [
+          "Added `Russian` localization [#214](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/214)",
+          "`TaxonomyPicker`: Ability to specify term actions [#237](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/237)"
+        ],
+        "fixes": [
+          "`TaxonomyPicker`: Terms are sorted incorrectly under the wrong parent [#199](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/199) [#229](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/229)",
+          "`TaxonomyPicker`: Issue with custom sort order of items underneath root terms [#231](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/231)",
+          "`PeoplePicker`: Fix for issue where values couldn't be cleared [#234](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/234)"
+        ]
+      },
+      "contributions": [
+        "[Patrik Hellgren](https://github.com/patrikhellgren)",
+        "[David Opdendries](https://github.com/spdavid)",
+        "[Piotr Siatka](https://github.com/siata13)",
+        "[Alex Terentiev](https://github.com/AJIXuMuK)",
+        "[Tse Kit Yam](https://github.com/tsekityam)"
+      ]
+    },
     {
       "version": "1.11.0",
       "changes": {
@@ -22,6 +47,7 @@
       },
       "contributions": [
         "[Hugo Bernier](https://github.com/hugoabernier)",
+        "[joaojmendes](https://github.com/joaojmendes)",
         "[Asish Padhy](https://github.com/AsishP)",
         "[Piotr Siatka](https://github.com/siata13)",
         "[Anoop Tatti](https://github.com/anoopt)",

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Releases
 
+## 1.12.0
+
+### New control(s)
+
+- `ListItemAttachments`: New control added [#177](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/177)
+- `IFramePanel`: New control added [#226](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/226)
+
+### Enhancements
+
+- Added `Russian` localization [#214](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/214)
+- `TaxonomyPicker`: Ability to specify term actions [#237](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/237)
+
+### Fixes
+
+- `TaxonomyPicker`: Terms are sorted incorrectly under the wrong parent [#199](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/199) [#229](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/229)
+- `TaxonomyPicker`: Issue with custom sort order of items underneath root terms [#231](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/231)
+- `PeoplePicker`: Fix for issue where values couldn't be cleared [#234](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/234)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Patrik Hellgren](https://github.com/patrikhellgren), [David Opdendries](https://github.com/spdavid), [Piotr Siatka](https://github.com/siata13), [Alex Terentiev](https://github.com/AJIXuMuK), [Tse Kit Yam](https://github.com/tsekityam).
+
 ## 1.11.0
 
 ### New control(s)
@@ -23,7 +45,7 @@
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Hugo Bernier](https://github.com/hugoabernier), [Asish Padhy](https://github.com/AsishP), [Piotr Siatka](https://github.com/siata13), [Anoop Tatti](https://github.com/anoopt), [Alex Terentiev](https://github.com/AJIXuMuK), [Tse Kit Yam](https://github.com/tsekityam).
+Special thanks to our contributors (in alphabetical order): [Hugo Bernier](https://github.com/hugoabernier), [joaojmendes](https://github.com/joaojmendes), [Asish Padhy](https://github.com/AsishP), [Piotr Siatka](https://github.com/siata13), [Anoop Tatti](https://github.com/anoopt), [Alex Terentiev](https://github.com/AJIXuMuK), [Tse Kit Yam](https://github.com/tsekityam).
 
 ## 1.10.0
 

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

@@ -1,5 +1,27 @@
 # Releases
 
+## 1.12.0
+
+### New control(s)
+
+- `ListItemAttachments`: New control added [#177](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/177)
+- `IFramePanel`: New control added [#226](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/226)
+
+### Enhancements
+
+- Added `Russian` localization [#214](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/214)
+- `TaxonomyPicker`: Ability to specify term actions [#237](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/237)
+
+### Fixes
+
+- `TaxonomyPicker`: Terms are sorted incorrectly under the wrong parent [#199](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/199) [#229](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/229)
+- `TaxonomyPicker`: Issue with custom sort order of items underneath root terms [#231](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/231)
+- `PeoplePicker`: Fix for issue where values couldn't be cleared [#234](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/234)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Patrik Hellgren](https://github.com/patrikhellgren), [David Opdendries](https://github.com/spdavid), [Piotr Siatka](https://github.com/siata13), [Alex Terentiev](https://github.com/AJIXuMuK), [Tse Kit Yam](https://github.com/tsekityam).
+
 ## 1.11.0
 
 ### New control(s)
@@ -23,7 +45,7 @@
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Hugo Bernier](https://github.com/hugoabernier), [Asish Padhy](https://github.com/AsishP), [Piotr Siatka](https://github.com/siata13), [Anoop Tatti](https://github.com/anoopt), [Alex Terentiev](https://github.com/AJIXuMuK), [Tse Kit Yam](https://github.com/tsekityam).
+Special thanks to our contributors (in alphabetical order): [Hugo Bernier](https://github.com/hugoabernier), [joaojmendes](https://github.com/joaojmendes), [Asish Padhy](https://github.com/AsishP), [Piotr Siatka](https://github.com/siata13), [Anoop Tatti](https://github.com/anoopt), [Alex Terentiev](https://github.com/AJIXuMuK), [Tse Kit Yam](https://github.com/tsekityam).
 
 ## 1.10.0
 

docs/documentation/docs/controls/IFrameDialog.md

@@ -1,6 +1,6 @@
 # IFrameDialog control
 
-This control renders a Dialog with an iframe as a content.
+This control renders a Dialog with an iframe as content.
 
 Here is an example of the control in action:
 
@@ -58,4 +58,4 @@ The IFrameDialog component can be configured with the following properties:
 | scrolling | string | no | Specifies whether or not to display scrollbars in an iframe |
 | seamless | string | no | When present, it specifies that the iframe should look like it is a part of the containing document (no borders or scrollbars) |
 
-![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FileTypeIcon)
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IFrameDialog)

docs/documentation/docs/controls/IFramePanel.md

@@ -0,0 +1,50 @@
+# IFramePanel control
+
+This control renders a Panel with an iframe as content.
+
+Here is an example of the control in action:
+
+![IFrameDialog control](../assets/IFramePanel.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { IFramePanel } from "@pnp/spfx-controls-react/lib/IFramePanel";
+```
+
+- The `IFramePanel` uses the [Office Fabric UI implemenation of the panel](https://developer.microsoft.com/en-us/fabric#/components/panel). The properties of this control inherit the panel properties.
+
+- Use the `IFramePanel` control in your code as follows (`this._onIframeLoaded` and `this._onDismiss` are methods that should be implemented if you want to execute some actions when the iframe content is loaded and dialog should be closed respectively.)
+
+
+```TypeScript
+<IFramePanel url={this.state.iFrameUrl}
+             type={PanelType.medium}
+             headerText="Panel Title"
+             closeButtonAriaLabel="Close"
+             isOpen={this.state.iFramePanelOpened}
+             onDismiss={this._onDismiss.bind(this)}
+             iframeOnLoad={this._onIframeLoaded.bind(this)} />
+```
+
+## Implementation
+
+The IFramePanel component extends the properties from the [Fabric UI IPanelProps](https://developer.microsoft.com/en-us/fabric#/components/panel)
+ along with the additional following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| url | string | yes | iframe Url |
+| heigth | string | yes | iframe's height, if empty it will be dynamically set to the full height available in the panel's content area |
+| iframeOnload | iframeOnLoad?: (iframe: any) => {} | no | iframe's onload event handler |
+| name | string | no | Specifies the name of an iframe |
+| allowFullScreen | boolean | no | Specifies if iframe content can be displayed in a full screen |
+| allowTransparency | boolean | no | Specifies if transparency is allowed in iframe |
+| sandbox | string | no | Enables an extra set of restrictions for the content in an iframe |
+| scrolling | string | no | Specifies whether or not to display scrollbars in an iframe |
+| seamless | string | no | When present, it specifies that the iframe should look like it is a part of the containing document (no borders or scrollbars) |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IFramePanel)

docs/documentation/docs/controls/ListItemAttachments.md

@@ -0,0 +1,45 @@
+# ListItemAttachments control
+
+This control allows you to manage list item attachments, you can add or delete associated attachments. The attachments are listed in tile view.
+
+Here is an example of the control:
+
+![ListItemAttachments Upload](../assets/ListItemAttachmentsUpload.png)
+
+![ListItemAttachments Tiles](../assets/ListItemAttachmentsTitles.png)
+
+![ListItemAttachments Confirm Delete](../assets/ListItemAttachmentDeleteConfirm.png)
+
+![ListItemAttachments Attachment Deleted ](../assets/ListItemAttachementDeletedMsg.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+```TypeScript
+import { ListItemAttachments } from '@pnp/spfx-controls-react/listItemAttachments';
+```
+- Use the `ListItemAttachments` control in your code as follows:
+
+```TypeScript
+<ListItemAttachments listId='dfa283f4-5faf-4d54-b6b8-5bcaf2725af5'
+                     itemId={1}
+                     context={this.props.context}
+                     disabled={false} />
+```
+
+## Implementation
+
+The `ListItemAttachments` control can be configured with the following properties:
+
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext \| ApplicationCustomizerContext | yes | SPFx web part or extention context |
+| itemId | number | yes | List Item Id  |
+| listId | string | yes | Guid of the list. |
+| webUrl | string | no | URL of the site. By default it uses the current site URL. |
+| disabled | boolean | no | Specifies if the control is disabled or not. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemAttachments)

docs/documentation/docs/controls/ListItemPicker.md

@@ -16,7 +16,7 @@ Here is an example of the control:
 - Import the control into your component:
 
 ```TypeScript
-import { ListItemPicker } from '@pnp/spfx-controls-react/listItemPicker';
+import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
 ```
 - Use the `ListItemPicker` control in your code as follows:
 

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -34,15 +34,13 @@ import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/Taxon
 - Use the `TaxonomyPicker` control in your code as follows:
 
 ```TypeScript
-<TaxonomyPicker
-  allowMultipleSelections={true}
-  termsetNameOrID="Countries"
-  panelTitle="Select Term"
-  label="Taxonomy Picker"
-  context={this.props.context}
-  onChange={this.onTaxPickerChange}
-  isTermSetSelectable={false}
-/>
+<TaxonomyPicker allowMultipleSelections={true}
+                termsetNameOrID="Countries"
+                panelTitle="Select Term"
+                label="Taxonomy Picker"
+                context={this.props.context}
+                onChange={this.onTaxPickerChange}
+                isTermSetSelectable={false} />
 ```
 
 - With the `onChange` property you can capture the event of when the terms in the picker has changed:
@@ -53,6 +51,51 @@ private onTaxPickerChange(terms : IPickerTerms) {
 }
 ```
 
+## Term actions
+
+Since version `1.12.0`, you can apply term actions to all terms or specific ones. Term actions could for instance be used to retrieve the labels of the term, or retrieve other information. These term actions can be implemented as follows:
+
+```typescript
+<TaxonomyPicker allowMultipleSelections={true}
+                termsetNameOrID="Countries"
+                panelTitle="Select Term"
+                label="Taxonomy Picker"
+                context={this.props.context}
+                onChange={this.onServicePickerChange}
+                isTermSetSelectable={false}
+                termActions={{
+                  actions: [{
+                    title: "Update term label",
+                    iconName: "LocaleLanguage",
+                    id: "UpdateTermLabel",
+                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
+                      return {
+                        updateActionType: UpdateType.updateTermLabel,
+                        value: `${term.Name} (updated)`
+                      };
+                    },
+                    applyToTerm: (term: ITerm) => (true) // Applying the action to all terms
+                  }]
+                }} />
+```
+
+![Term action sample](../assets/term-action.png)
+
+We also provided a default term action which you can use to retrieve the term its labels and will update the term text in the TaxonomyPicker hierarchy.
+
+```typescript
+<TaxonomyPicker allowMultipleSelections={true}
+                termsetNameOrID="Countries"
+                panelTitle="Select Term"
+                label="Taxonomy Picker"
+                context={this.props.context}
+                onChange={this.onServicePickerChange}
+                isTermSetSelectable={false}
+                termActions={{
+                  actions: [new TermLabelAction("Get Labels")]
+                }} />
+```
+
 ## Implementation
 
 The TaxonomyPicker control can be configured with the following properties:
@@ -71,6 +114,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | disabledTermIds | string[] | no | Specify which terms should be disabled in the term set so that they cannot be selected. |
 | disableChildrenOfDisabledParents | boolean | no | Specify if you want to disable the child terms when their parent is disabled. |
 | anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
+| termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. |
 
 Interface `IPickerTerm`
 
@@ -86,4 +130,40 @@ Interface `IPickerTerms`
 
 An Array of IPickerTerm
 
+Interface `ITermActions`
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| actions | ITermAction[] | yes | The array of supported actions | |
+| termActionsDisplayStyle | TermActionsDisplayStyle | no | Defines how to display term action button, available options: text, icon, text and icon | text |
+| termActionsDisplayMode | TermActionsDisplayMode | no | Defines how to display term actions, as buttons or dropdown | buttons |
+| initialize | (spTermService: SPTermStorePickerService) => Promise\<void\> | no | Initializes the term action with the taxonomy service |
+
+Interface `ITermAction`
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| id | string | yes | Unique id of the term action |
+| title | string | yes | Action title |
+| iconName | string | no | Name of the icon to be used to display action |
+| hidden | boolean | no | Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering. |
+| invokeActionOnRender | boolean | no | Specifies if you want to invoke the action on render |
+| applyToTerm | (currentTerm: ITerm) => Promise\<boolean\> \| boolean | yes | Method checks if the current term is supported |
+| actionCallback | (spTermService: SPTermStorePickerService, currentTerm: ITerm) => Promise\<UpdateAction\> | yes | Method to be executed when action is fired |
+
+
+Interface `UpdateAction`
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| updateActionType | UpdateType | yes | Defines the type of update you want to perform |
+| value | string | no | New term label value to update. Only required when you want to update the term |
+
+Enum `UpdateType`
+
+| Value |
+| ---- |
+| updateTermLabel |
+| updateTermsTree |
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)

docs/documentation/mkdocs.yml

@@ -13,6 +13,7 @@ nav:
       - "Radar Chart": 'controls/charts/RadarChart.md'
       - "Scatter Chart": 'controls/charts/ScatterChart.md'
     - FileTypeIcon: 'controls/FileTypeIcon.md'
+    - ListItemAttachments: 'controls/ListItemAttachments.md'
     - ListItemPicker: 'controls/ListItemPicker.md'
     - ListPicker: 'controls/ListPicker.md'
     - ListView: 'controls/ListView.md'
@@ -25,6 +26,7 @@ nav:
     - TaxonomyPicker: 'controls/TaxonomyPicker.md'
     - PeoplePicker: 'controls/PeoplePicker.md'
     - IFrameDialog: 'controls/IFrameDialog.md'
+    - IFramePanel: 'controls/IFramePanel.md'
   - 'Field Controls':
     - 'Getting started': 'controls/fields/main.md'
     - FieldRendererHelper: 'controls/fields/FieldRendererHelper.md'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "engines": {
     "node": ">=0.10.0"
   },

src/IFramePanel.ts

@@ -0,0 +1 @@
+export * from './controls/iFramePanel/index';

src/ListItemAttachments.ts

@@ -0,0 +1 @@
+export * from './controls/listItemAttachments';

src/common/telemetry/version.ts

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