Merge pull request #72 from SharePoint/dev

Merge for release of v1.3.0
pnp · Apr 30, 2018 · 234f653 · 234f653
2 parents 826a1e9 + b1e96e1
commit 234f653
Show file tree

Hide file tree

Showing 48 changed files with 2,323 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Releases
 
+## 1.3.0
+
+**New Controls**
+
+- `TaxonomyPicker` control got added [#22](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/22) [#63](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/63) [#64](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/64)
+- `ListPicker` control got added [#34](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/34)
+
+**Fixes**
+
+- Issue fixed when the optional `selection` property was not provided to the `ListView` [#65](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/65)
+
 ## 1.2.5
 
 **Fixes**

diff --git a/config/tslint.json b/config/tslint.json
@@ -39,7 +39,8 @@
       "use-named-parameter": true,
       "valid-typeof": true,
       "variable-name": false,
-      "whitespace": false
+      "whitespace": false,
+      "no-debugger": true
     }
   }
-}
+}
diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,16 @@
 # Releases
 
+## 1.3.0
+
+**New Controls**
+
+- `TaxonomyPicker` control got added [#22](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/22) [#63](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/63) [#64](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/64)
+- `ListPicker` control got added [#34](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/34)
+
+**Fixes**
+
+- Issue fixed when the optional `selection` property was not provided to the `ListView` [#65](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/65)
+
 ## 1.2.5
 
 **Fixes**
@@ -52,7 +63,7 @@
 
 ## 1.1.2
 
-- Fix for WebPartTitle control to inherit color
+- Fix for `WebPartTitle` control to inherit color
 - Improved telemetry with some object checks
 
 ## 1.1.1

diff --git a/docs/documentation/docs/assets/ListView.ContextualMenu.png b/docs/documentation/docs/assets/ListView.ContextualMenu.png
diff --git a/docs/documentation/docs/assets/ListView.ContextualMenu_clicked.png b/docs/documentation/docs/assets/ListView.ContextualMenu_clicked.png
diff --git a/docs/documentation/docs/assets/TermPicker-autocomplete.png b/docs/documentation/docs/assets/TermPicker-autocomplete.png
diff --git a/docs/documentation/docs/assets/TermPicker-selection.png b/docs/documentation/docs/assets/TermPicker-selection.png
diff --git a/docs/documentation/docs/assets/termpicker-empty.png b/docs/documentation/docs/assets/termpicker-empty.png
diff --git a/docs/documentation/docs/assets/termpicker-limit-to-group.png b/docs/documentation/docs/assets/termpicker-limit-to-group.png
diff --git a/docs/documentation/docs/assets/termpicker-selected-terms.png b/docs/documentation/docs/assets/termpicker-selected-terms.png
diff --git a/docs/documentation/docs/beta.md b/docs/documentation/docs/beta.md
@@ -0,0 +1,17 @@
+# Testing out a beta release ![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg)
+
+All you need to do for testing out a beta release of `@pnp/spfx-controls-react` is to install the dependency as follows:
+
+```
+npm install @pnp/spfx-controls-react@next --save
+```
+
+## Beta control documentation
+
+The control documentation is only live for public releases, not for beta versions. If you want to checkout the markdown files of all controls in the `dev` branch: [beta documentation](https://github.com/SharePoint/sp-dev-fx-controls-react/tree/dev/docs/documentation/docs/controls).
+
+## Next Steps
+
+Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: [home](./).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/beta)
diff --git a/docs/documentation/docs/controls/ListView.ContextualMenu.md b/docs/documentation/docs/controls/ListView.ContextualMenu.md
@@ -0,0 +1,108 @@
+# ListView: Add a contextual menu
+
+## The ContextualMenu component
+
+In order to create a contextual menu for your list view, you first need to create a new component which will use a combination of an [IconButton](https://developer.microsoft.com/en-us/fabric#/components/button#Variants) and [ContextualMenu](https://developer.microsoft.com/en-us/fabric#/components/contextualmenu) controls from the Office UI Fabric React.
+
+Here is some sample code:
+
+```TypeScript
+import * as React from 'react';
+import { Layer, IconButton, IButtonProps } from 'office-ui-fabric-react';
+import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+// The following are project specific components
+import { IECBProps } from './IECBProps';
+import styles from './ECB.module.scss';
+import { IListitem } from '../../model/IListitem';
+
+export class ECB extends React.Component<IECBProps, {}> {
+
+  public constructor(props: IECBProps) {        
+    super(props);
+
+    this.state = {
+      panelOpen: false
+    };
+  }
+
+  public render() {      
+    return (
+      <div className={styles.ecb}>
+        <IconButton id='ContextualMenuButton1'
+                    className={styles.ecbbutton}
+                    text=''
+                    width='30'
+                    split={false}
+                    iconProps={ { iconName: 'MoreVertical' } }
+                    menuIconProps={ { iconName: '' } }
+                    menuProps={{
+                      shouldFocusOnMount: true,
+                      items: [
+                        {
+                          key: 'action1',
+                          name: 'Action 1',
+                          onClick: this.handleClick.bind(this, this.props.item.Firstname + ' Action 1')
+                        },
+                        {
+                          key: 'divider_1',
+                          itemType: ContextualMenuItemType.Divider
+                        },
+                        {
+                          key: 'action2',
+                          name: 'Action 2',
+                          onClick: this.handleClick.bind(this, this.props.item.Firstname + ' Action 2')
+                        },
+                        {
+                          key: 'action3',
+                          name: 'Action 3',
+                          onClick: this.handleClick.bind(this, this.props.item.Lastname + ' Action  3')
+                        },
+                        {
+                          key: 'disabled',
+                          name: 'Disabled action',
+                          disabled: true,
+                          onClick: () => console.error('Disabled action should not be clickable.')
+                        }
+                      ]
+                    }} />
+      </div>
+    );
+  }
+
+  private handleClick(source:string, event) {
+    alert(`${source} clicked`);
+  }
+}
+```
+
+## The ListView column
+
+Once the ECB component is created, you can add the contextual menu to the `ListView` control. In order to do this, you have to insert another `Viewfield` in code at the position of our choice. For instance after the `Lastname`:
+
+```TypeScript
+{
+  name: "",
+  sorting: false,
+  maxWidth: 40,
+  render: (rowitem: IListitem) => {
+    const element:React.ReactElement<IECBProps> = React.createElement(
+      ECB, 
+      {
+        item: rowitem
+      }
+    );
+    return element;
+  }      
+}
+```
+
+Inside the render method of the `IViewField`, the ECB component gets created and the current item will be used as a reference for the clicked row.
+
+## The result
+The result will look like the following:
+
+![ContextualMenu_shown](../assets/ListView.ContextualMenu.png)
+
+Once you click on an action, you will see the alert:
+
+![ContextualMenu_clicked](../assets/ListView.ContextualMenu_clicked.png)
diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md
@@ -54,6 +54,9 @@ const groupByFields: IGrouping[] = [
 ];
 ```
 
+!!! note "Extend ListView with a ContextualMenu"
+    To extend the `ListView` control with a [ContextualMenu](https://developer.microsoft.com/en-us/fabric#/components/contextualmenu) refer to [ListView.ContextualMenu](./ListView.ContextualMenu).
+
 ## Implementation
 
 The ListView control can be configured with the following properties:

diff --git a/docs/documentation/docs/controls/TaxonomyPicker.md b/docs/documentation/docs/controls/TaxonomyPicker.md
@@ -0,0 +1,87 @@
+# Taxonomy Picker
+
+This control Allows you to select one or more Terms from a TermSet via its name or TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the AnchorId.
+
+!!! note "Disclaimer" 
+    This control makes use of the `ProcessQuery` API end-points to retrieve the managed metadata information. This will get changed once the APIs for managing managed metadata will become available.
+
+**Empty term picker**
+
+![Empty term picker](../assets/termpicker-empty.png)
+
+**Selecting terms**
+
+![Selecting terms](../assets/termpicker-selection.png)
+
+**Selected terms in picker** 
+
+![Selected terms in the input](../assets/termpicker-selected-terms.png)
+
+**Term picker: Auto Complete**
+
+![Selected terms in the input](../assets/termpicker-autocomplete.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 { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
+```
+
+- 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}
+/>
+```
+
+- With the `onChange` property you can capture the event of when the terms in the picker has changed:
+
+```typescript
+private onTaxPickerChange(terms : IPickerTerms) {
+    console.log("Terms", terms);
+}
+```
+
+## Implementation
+
+The TaxonomyPicker control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| panelTitle | string | yes | TermSet Picker Panel title. |
+| label | string | yes | Text displayed above the Taxonomy Picker. |
+| disabled | string | no | Specify if the control needs to be disabled. |
+| context | WebPartContext | yes | Context of the current web part. |
+| initialValues | IPickerTerms | no | Defines the selected by default term sets. |
+| allowMultipleSelections | boolean | no | Defines if the user can select only one or many term sets. Default value is false. |
+| TermSetNameOrID | string | yes | The name or Id of your TermSet that you would like the Taxonomy Picker to chose terms from. |
+| onChange | function | no |  captures the event of when the terms in the picker has changed. |
+| isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. |
+| anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
+
+Interface `IPickerTerm`
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| key | string | yes | The ID of the term |
+| name | string | yes | The name of the term |
+| path | string | yes | The path of the term |
+| termSet | string | yes | The Id of the parent TermSet of the term |
+| termSetName | string | no | The Name of the parent TermSet of the term |
+
+Interface `IPickerTerms`
+
+An Array of IPickerTerm
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)
diff --git a/docs/documentation/docs/controls/fields/FieldTitleRenderer.md b/docs/documentation/docs/controls/fields/FieldTitleRenderer.md
@@ -1,6 +1,6 @@
 # FieldTitleRenderer control
 
-This control renders title either as a simple text or as a link to the Dislpay Form. Additional actions like Share and Context Menu are not implemented.
+This control renders title either as a simple text or as a link to the Display Form. Additional actions like Share and Context Menu are not implemented.
 
 ![FieldTitleRenderer control output](../../assets/FieldTitleRenderer.png)
 

diff --git a/docs/documentation/docs/controls/fields/main.md b/docs/documentation/docs/controls/fields/main.md
@@ -52,7 +52,7 @@ The following Field Controls are currently available:
 - [FieldNameRenderer](./FieldNameRenderer) (renders document's name as a link)
 - [FieldTaxonomyRenderer](./FieldTaxonomyRenderer) (renders terms from Managed Metadata field)
 - [FieldTextRenderer](./FieldTextRenderer) (renders simple text)
-- [FieldTitleRenderer](./FieldTitleRenderer) (renders title either as a simple text or as a link to the Dislpay Form)
+- [FieldTitleRenderer](./FieldTitleRenderer) (renders title either as a simple text or as a link to the Display Form)
 - [FieldUrlRenderer](./FieldUrlRenderer) (renders Hyperlink or Picture field value as a link or image)
 - [FieldUserRenderer](./FieldUserRenderer) (renders each referenced user/group as a link on a separate line)
 

diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md
@@ -2,7 +2,8 @@
 
 This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. The project provides controls for building web parts and extensions.
 
-!!! attention The controls project has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for on-premises. As for on-premises solutions version `1.1.0` is currently used.
+!!! attention
+    The controls project has a minimal dependency on SharePoint Framework version `1.3.0`. Be aware that the controls might not work in solutions your building for on-premises. As for on-premises solutions version `1.1.0` is currently used.
 
 ## Getting started
 
@@ -32,12 +33,14 @@ The following controls are currently available:
 - [ListView](./controls/ListView) (List view control)
 - [Placeholder](./controls/Placeholder) (Control that can be used to show an initial placeholder if the web part has to be configured)
 - [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
+- [SiteBreadcrumb](./controls/TaxonomyPicker) (Taxonomy Picker)
 - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
 - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)
 
 Field customizer controls:
 
-> **Note**: If you want to use these controls in your solution, first check out the start guide for these controls: [using the field controls](./controls/fields/main).
+!!! note
+    If you want to use these controls in your solution, first check out the start guide for these controls: [using the field controls](./controls/fields/main).
 
 - [FieldAttachmentsRenderer](./controls/fields/FieldAttachmentsRenderer) (renders Clip icon based on the provided `count` property is defined and greater than 0)
 - [FieldDateRenderer](./controls/fields/FieldDateRenderer) (renders date string as a simple text)
@@ -46,7 +49,7 @@ Field customizer controls:
 - [FieldNameRenderer](./controls/fields/FieldNameRenderer) (renders document's name as a link)
 - [FieldTaxonomyRenderer](./controls/fields/FieldTaxonomyRenderer) (renders terms from Managed Metadata field)
 - [FieldTextRenderer](./controls/fields/FieldTextRenderer) (renders simple text)
-- [FieldTitleRenderer](./controls/fields/FieldTitleRenderer) (renders title either as a simple text or as a link to the Dislpay Form)
+- [FieldTitleRenderer](./controls/fields/FieldTitleRenderer) (renders title either as a simple text or as a link to the Display Form)
 - [FieldUrlRenderer](./controls/fields/FieldUrlRenderer) (renders Hyperlink or Picture field value as a link or image)
 - [FieldUserRenderer](./controls/fields/FieldUserRenderer) (renders each referenced user/group as a link on a separate line)
 

diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml
@@ -4,9 +4,11 @@ pages:
   - Controls:
     - FileTypeIcon: 'controls/FileTypeIcon.md'
     - ListView: 'controls/ListView.md'
+    - "ListView: add a contextual menu": 'controls/ListView.ContextualMenu.md'
     - Placeholder: 'controls/Placeholder.md'
     - SiteBreadcrumb: 'controls/SiteBreadcrumb.md'
     - WebPartTitle: 'controls/WebPartTitle.md'
+    - TaxonomyPicker: 'controls/TaxonomyPicker.md'
     - IFrameDialog: 'controls/IFrameDialog.md'
   - 'Field Controls':
     - 'Getting started': 'controls/fields/main.md'
@@ -21,6 +23,7 @@ pages:
     - FieldTitleRenderer: 'controls/fields/FieldTitleRenderer.md'
     - FieldUrlRenderer: 'controls/fields/FieldUrlRenderer.md'
     - FieldUserRenderer: 'controls/fields/FieldUserRenderer.md'
+  - 'Beta testing': 'beta.md'
   - About:
     - 'Release notes': 'about/release-notes.md'
     - License: 'about/license.md'

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -11,7 +11,8 @@
     "test": "gulp test",
     "prepublishOnly": "gulp",
     "versionUpdater": "gulp versionUpdater",
-    "karma": "karma start --circle true"
+    "karma": "karma start --circle true",
+    "changelog": "node scripts/sync-changelogs.js"
   },
   "dependencies": {
     "@pnp/common": "^1.0.1",

diff --git a/scripts/sync-changelogs.js b/scripts/sync-changelogs.js
@@ -0,0 +1,4 @@
+const fs = require('fs');
+const path = require('path');
+const changelog = fs.readFileSync(path.join(__dirname, '../CHANGELOG.md'), 'utf8');
+fs.writeFileSync(path.join(__dirname, '../docs/documentation/docs/about/release-notes.md'), changelog, 'utf-8');
diff --git a/src/ListPicker.ts b/src/ListPicker.ts
@@ -0,0 +1 @@
+export * from './controls/listPicker/index';
diff --git a/src/TaxonomyPicker.ts b/src/TaxonomyPicker.ts
@@ -0,0 +1 @@
+export * from './controls/taxonomyPicker/index';