Merge pull request #1045 from pnp/dev

Merge for 3.4.0 release

CHANGELOG.JSON

@@ -1,5 +1,39 @@
 {
   "versions": [
+    {
+      "version": "3.4.0",
+      "changes": {
+        "new": [
+          "`ModernTaxonomyPicker`: New control ModernTaxonomyPicker [#1014](https://github.com/pnp/sp-dev-fx-controls-react/pull/1014)"
+        ],
+        "enhancements": [
+          "Translations: Update translation keys [#994](https://github.com/pnp/sp-dev-fx-controls-react/pull/994)",
+          "`LocationPicker`: Update docs [#1009](https://github.com/pnp/sp-dev-fx-controls-react/pull/1009)",
+          "`FileTypeIcon`: Add support of 20px icons[#1013](https://github.com/pnp/sp-dev-fx-controls-react/issues/1013)",
+          "`Pagination`: Update import from lodash [#1021](https://github.com/pnp/sp-dev-fx-controls-react/pull/1021)"
+        ],
+        "fixes": [
+          "`ChartControl`: Charts not updating properly when properties are changed [#997](https://github.com/pnp/sp-dev-fx-controls-react/pull/997)",
+          "`TaxonomyPicker`: suggestions language is always English [#879](https://github.com/pnp/sp-dev-fx-controls-react/issues/879)",
+          "`TaxonomyPicker`: `errorMessage` label not being removed [#953](https://github.com/pnp/sp-dev-fx-controls-react/issues/953)",
+          "`FilePicker`: Sorting Not Working as Expected in Site Tab [#1011](https://github.com/pnp/sp-dev-fx-controls-react/issues/1011)",
+          "`FilePicker`: Site Tab - Lots of file types don't have appropriate icons [#1012](https://github.com/pnp/sp-dev-fx-controls-react/issues/1012)",
+          "`LocationPicker`: Correct documentation [#1019](https://github.com/pnp/sp-dev-fx-controls-react/pull/1019)",
+          "`FilePicker`: `fileNameWithoutExtension` not calculated right [#1022](https://github.com/pnp/sp-dev-fx-controls-react/issues/1022)",
+          "`FieldUserRenderer`: Add missing PnPJS imports [#1025](https://github.com/pnp/sp-dev-fx-controls-react/issues/1025)"
+        ]
+      },
+      "contributions": [
+        "[Dennis Kuhn](https://github.com/DennisKuhn)",
+        "[Gautam Sheth](https://github.com/gautamdsheth)",
+        "[Jean-Luc Richer](https://github.com/umaknow-jeanluc)",
+        "[hesperanca](https://github.com/hesperanca)",
+        "[Kiryl Shchasny](https://github.com/lirik30)",
+        "[Patrik Hellgren](https://github.com/patrikhellgren)",
+        "[Peter Paul Kirschner](https://github.com/petkir)",
+        "[Ravichandran Krishnasamy](https://github.com/ravichandran-blog)"
+      ]
+    },
     {
       "version": "3.3.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Releases
 
+## 3.4.0
+
+### New control(s)
+
+- `ModernTaxonomyPicker`: New control ModernTaxonomyPicker [#1014](https://github.com/pnp/sp-dev-fx-controls-react/pull/1014)
+
+### Enhancements
+
+- Translations: Update translation keys [#994](https://github.com/pnp/sp-dev-fx-controls-react/pull/994)
+- `LocationPicker`: Update docs [#1009](https://github.com/pnp/sp-dev-fx-controls-react/pull/1009)
+- `FileTypeIcon`: Add support of 20px icons[#1013](https://github.com/pnp/sp-dev-fx-controls-react/issues/1013)
+- `Pagination`: Update import from lodash [#1021](https://github.com/pnp/sp-dev-fx-controls-react/pull/1021)
+
+### Fixes
+
+- `ChartControl`: Charts not updating properly when properties are changed [#997](https://github.com/pnp/sp-dev-fx-controls-react/pull/997)
+- `TaxonomyPicker`: suggestions language is always English [#879](https://github.com/pnp/sp-dev-fx-controls-react/issues/879)
+- `TaxonomyPicker`: `errorMessage` label not being removed [#953](https://github.com/pnp/sp-dev-fx-controls-react/issues/953)
+- `FilePicker`: Sorting Not Working as Expected in Site Tab [#1011](https://github.com/pnp/sp-dev-fx-controls-react/issues/1011)
+- `FilePicker`: Site Tab - Lots of file types don't have appropriate icons [#1012](https://github.com/pnp/sp-dev-fx-controls-react/issues/1012)
+- `LocationPicker`: Correct documentation [#1019](https://github.com/pnp/sp-dev-fx-controls-react/pull/1019)
+- `FilePicker`: `fileNameWithoutExtension` not calculated right [#1022](https://github.com/pnp/sp-dev-fx-controls-react/issues/1022)
+- `FieldUserRenderer`: Add missing PnPJS imports [#1025](https://github.com/pnp/sp-dev-fx-controls-react/issues/1025)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Dennis Kuhn](https://github.com/DennisKuhn), [Gautam Sheth](https://github.com/gautamdsheth), [Jean-Luc Richer](https://github.com/umaknow-jeanluc), [hesperanca](https://github.com/hesperanca), [Kiryl Shchasny](https://github.com/lirik30), [Patrik Hellgren](https://github.com/patrikhellgren), [Peter Paul Kirschner](https://github.com/petkir), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog).
+
 ## 3.3.0
 
 ### New control(s)

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

@@ -1,5 +1,33 @@
 # Releases
 
+## 3.4.0
+
+### New control(s)
+
+- `ModernTaxonomyPicker`: New control ModernTaxonomyPicker [#1014](https://github.com/pnp/sp-dev-fx-controls-react/pull/1014)
+
+### Enhancements
+
+- Translations: Update translation keys [#994](https://github.com/pnp/sp-dev-fx-controls-react/pull/994)
+- `LocationPicker`: Update docs [#1009](https://github.com/pnp/sp-dev-fx-controls-react/pull/1009)
+- `FileTypeIcon`: Add support of 20px icons[#1013](https://github.com/pnp/sp-dev-fx-controls-react/issues/1013)
+- `Pagination`: Update import from lodash [#1021](https://github.com/pnp/sp-dev-fx-controls-react/pull/1021)
+
+### Fixes
+
+- `ChartControl`: Charts not updating properly when properties are changed [#997](https://github.com/pnp/sp-dev-fx-controls-react/pull/997)
+- `TaxonomyPicker`: suggestions language is always English [#879](https://github.com/pnp/sp-dev-fx-controls-react/issues/879)
+- `TaxonomyPicker`: `errorMessage` label not being removed [#953](https://github.com/pnp/sp-dev-fx-controls-react/issues/953)
+- `FilePicker`: Sorting Not Working as Expected in Site Tab [#1011](https://github.com/pnp/sp-dev-fx-controls-react/issues/1011)
+- `FilePicker`: Site Tab - Lots of file types don't have appropriate icons [#1012](https://github.com/pnp/sp-dev-fx-controls-react/issues/1012)
+- `LocationPicker`: Correct documentation [#1019](https://github.com/pnp/sp-dev-fx-controls-react/pull/1019)
+- `FilePicker`: `fileNameWithoutExtension` not calculated right [#1022](https://github.com/pnp/sp-dev-fx-controls-react/issues/1022)
+- `FieldUserRenderer`: Add missing PnPJS imports [#1025](https://github.com/pnp/sp-dev-fx-controls-react/issues/1025)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Dennis Kuhn](https://github.com/DennisKuhn), [Gautam Sheth](https://github.com/gautamdsheth), [Jean-Luc Richer](https://github.com/umaknow-jeanluc), [hesperanca](https://github.com/hesperanca), [Kiryl Shchasny](https://github.com/lirik30), [Patrik Hellgren](https://github.com/patrikhellgren), [Peter Paul Kirschner](https://github.com/petkir), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog).
+
 ## 3.3.0
 
 ### New control(s)

docs/documentation/docs/controls/FileTypeIcon.md

@@ -40,7 +40,7 @@ The FileTypeIcon component can be configured with the following properties:
 | ---- | ---- | ---- | ---- |
 | application | ApplicationType | no | Type of the application for which you want to show the icon. Use the **ApplicationType** enum to get the list of available applications. |
 | path | string | no | Path to the document. If this is provided, the control will use the file extension to display the corresponding icon. |
-| size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. Small (16px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
+| size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. small (16px), normal (20px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
 | type | IconType | yes | This property specifies is you want to use the icon font or image. Use the **IconType** enum to get the list of available icon types. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FileTypeIcon)

docs/documentation/docs/controls/ModernTaxonomyPicker.md

@@ -0,0 +1,74 @@
+# Modern Taxonomy Picker
+
+This control allows you to select one or more Terms from a TermSet via its TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the anchorTermId. This is the modern version of the taxonomy picker that uses the REST API and makes use of some load on demand features which makes it well suited for large term sets.
+
+!!! note "Disclaimer" 
+    Since this control is meant to look as and work in the same way as the out-of-the-box control it lacks some of the features from the legacy ```TaxonomyPicker``` control. If you need some of those features please continue using the legacy version.
+
+**Empty term picker**
+
+![Empty term picker](../assets/modernTaxonomyPicker-empty.png)
+
+**Selecting terms**
+
+![Selecting terms](../assets/modernTaxonomyPicker-tree-selection.png)
+
+**Selected terms in picker** 
+
+![Selected terms in the input](../assets/modernTaxonomyPicker-selected-terms.png)
+
+**Term picker: Auto Complete**
+
+![Selected terms in the input](../assets/modernTaxonomyPicker-input-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 { ModernTaxonomyPicker } from "@pnp/spfx-controls-react/lib/ModernTaxonomyPicker";
+```
+
+- Use the `ModernTaxonomyPicker` control in your code as follows:
+
+```TypeScript
+<ModernTaxonomyPicker allowMultipleSelections={true}
+                termSetId="f233d4b7-68fb-41ef-8b58-2af0bafc0d38"
+                panelTitle="Select Term"
+                label="Taxonomy Picker"
+                context={this.props.context}
+                onChange={this.onTaxPickerChange} />
+```
+
+- With the `onChange` property you can capture the event of when the terms in the picker has changed:
+
+```typescript
+private onTaxPickerChange(terms : ITermInfo[]) {
+  console.log("Terms", terms);
+}
+```
+
+## Implementation
+
+The ModernTaxonomyPicker 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 | boolean | no | Specify if the control should be disabled. Default value is false. |
+| context | BaseComponentContext | yes | Context of the current web part or extension. |
+| initialValues | ITermInfo[] | no | Defines the terms selected by default. ITermInfo comes from PnP/PnPjs and can be imported with <br/>```import { ITermInfo } from '@pnp/sp/taxonomy';``` |
+| allowMultipleSelections | boolean | no | Defines if the user can select only one or multiple terms. Default value is false. |
+| termSetId | string | yes | The Id of the TermSet that you would like the Taxonomy Picker to select terms from. |
+| onChange | function | no |  Captures the event of when the terms in the picker has changed. |
+| anchorTermId | string | no | Set the id of a child term in the TermSet to be able to select terms from that level and below. |
+| placeHolder | string | no | Short text hint to display in picker. |
+| required | boolean | no | Specifies if to display an asterisk near the label. Default value is false. |
+| customPanelWidth | number | no | Custom panel width in pixels. |
+| termPickerProps | IModernTermPickerProps | no | Custom properties for the term picker (More info: [IBasePickerProps interface](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers#IBasePickerProps)).  |
+| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker)

docs/documentation/docs/controls/SitePicker.md

@@ -52,12 +52,14 @@ The `SitePicker` control can be configured with the following properties:
 | isDesc | boolean | no | Specifies if the list is sorted in descending order. Default: `false`. |
 | label | string | no | Label to use for the control. |
 | limitToCurrentSiteCollection | boolean | no | Specifies if the options should be limited by the current site collections. Taken into consideration if selectionMode is set to `web`. |
-| mode | `'site' \| 'web' \| 'hub'` | no | Defines what entities are available for selection: site collections, sites, hub sites. Default: `web`. |
+| mode | `'site' | 'web' | 'hub'` | no | Defines what entities are available for selection: site collections, sites, hub sites. Default: `web`. |
 | multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default: `true`. |
 | onChange | `(selectedSites: ISite[]) => void` | yes | Selection change handler. | 
-| orderBy | `'title' \| 'url'` | no | Specifices if the list is sorted by title or url. Default: `title`. |
+| orderBy | `'title' | 'url'` | no | Specifices if the list is sorted by title or url. Default: `title`. |
 | placeholder | string | no | Placeholder label to show in the dropdown. |
 | searchPlaceholder | string | no | Search input placeholder text. Displayed until search text is entered. |
+| trimDuplicates | boolean | no | Specifies if the duplicates should be trimmed. false by default. Applicable if mode is set to site or web. |
+| additionalQuery | string | no | If provided will be added to the search query as AND part. Applicable if mode is set to site or web. |
 
 Interface `ISite`
 

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -169,7 +169,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | label | string | yes | Text displayed above the Taxonomy Picker. |
 | disabled | boolean | no | Specify if the control needs to be disabled. |
 | context | BaseComponentContext | yes | Context of the current web part or extension. |
-| initialValues | IPickerTerms | no | Defines the selected by default term sets. |
+| initialValues | IPickerTerms | no | Defines the terms selected by default. For each term object, an empty string can be provided for properties path and termset. |
 | 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. |

docs/documentation/docs/index.md

@@ -84,6 +84,7 @@ The following controls are currently available:
 - [LivePersona](./controls/LivePersona) (Live Persona control)
 - [LocationPicker](./controls/LocationPicker) (Location Picker control)
 - [Map](./controls/Map) (renders a map in a web part)
+- [ModernTaxonomyPicker](./controls/ModernTaxonomyPicker) (Modern Taxonomy Picker)
 - [MyTeams](./controls/MyTeams) (My Teams)
 - [PeoplePicker](./controls/PeoplePicker) (People Picker)
 - [Placeholder](./controls/Placeholder) (shows an initial placeholder if the web part has to be configured)

docs/documentation/mkdocs.yml

@@ -46,6 +46,7 @@ nav:
     - LivePersona: 'controls/LivePersona.md'
     - LocationPicker: 'controls/LocationPicker.md'
     - Map: 'controls/Map.md'
+    - ModernTaxonomyPicker: 'controls/ModernTaxonomyPicker.md'
     - MyTeams: 'controls/MyTeams.md'
     - Pagination: 'controls/Pagination.md'
     - PeoplePicker: 'controls/PeoplePicker.md'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "scripts": {
     "build": "gulp build",
     "clean": "gulp clean",

scripts/execute-translation.js

@@ -35,7 +35,7 @@ async function getAuthToken() {
 
     const options = {
       method: 'POST',
-      url: 'https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issueToken',
+      url: 'https://api.cognitive.microsoft.com/sts/v1.0/issueToken',
       headers: {
         'Ocp-Apim-Subscription-Key': subscriptionKey,
         'Content-type': 'application/x-www-form-urlencoded',
@@ -103,17 +103,22 @@ function compareTranslationKeys(srcObj, dstObj) {
   // Extract all the keys and set them in alpabetyical order
   let dstKeys = Object.keys(dstObj);
 
-  // Array<string>
   let toTranslate = [];
-  dstKeys.forEach((locKey) => {
-    if (typeof srcObj[locKey] !== "string") {
-      // In case we have nested translation objects
-      toTranslate = toTranslate.concat(compareTranslationKeys(srcObj[locKey], dstObj[locKey]));
-    } else if (srcObj[locKey] === dstObj[locKey]) {
-      // In case the english value is the same as localized one, add it to translate
-      toTranslate.push(srcObj[locKey]);
-    }
-  });
+  // Array<string>
+  try {    
+    dstKeys.forEach((locKey) => {
+      if (typeof srcObj[locKey] !== "string") {
+        // In case we have nested translation objects
+        toTranslate = toTranslate.concat(compareTranslationKeys(srcObj[locKey], dstObj[locKey]));
+      } else if (srcObj[locKey] === dstObj[locKey]) {
+        // In case the english value is the same as localized one, add it to translate
+        toTranslate.push(srcObj[locKey]);
+      }
+    });
+  } catch (error) {
+    console.log(error.message);
+  }
+
 
   return toTranslate;
 }

src/ModernTaxonomyPicker.ts

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

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "3.3.0";
+export const version: string = "3.4.0";

src/common/utilities/GeneralHelper.ts

@@ -266,9 +266,7 @@ export class GeneralHelper {
      */
     public static getFileNameWithoutExtension(itemUrl : string) {
       const fileNameWithExtension = GeneralHelper.getFileNameFromUrl(itemUrl);
-      const fileNameTokens = fileNameWithExtension.split(".");
-      const fileName = fileNameTokens[0];
-
+      const fileName = fileNameWithExtension.substr(0, fileNameWithExtension.lastIndexOf('.'));
       return fileName;
     }
 
@@ -360,3 +358,40 @@ export const toRelativeUrl = (absoluteUrl: string): string => {
 
   return absoluteUrl.replace(/^(?:\/\/|[^/]+)*\//, '/');
 };
+
+export function sortString(a: string, b: string, isDesc: boolean): number {
+  const aProp = (a || '').toLowerCase();
+  const bProp = (b || '').toLowerCase();
+
+  if (aProp < bProp) {
+    return isDesc ? 1 : -1;
+  }
+  else if (aProp > bProp) {
+    return isDesc ? -1 : 1;
+  }
+
+  return 0;
+}
+
+export function sortDate(a: string | number | Date, b: string | number | Date, isDesc: boolean): number {
+  const aTime = dateToNumber(a);
+  const bTime = dateToNumber(b);
+
+  return isDesc ? bTime - aTime : aTime - bTime;
+}
+
+export function dateToNumber(date: string | number | Date): number {
+  if (typeof date === 'number') {
+    return date;
+  }
+
+  let dateObj: Date;
+  if (typeof date === 'string') {
+    dateObj = new Date(date);
+  }
+  else {
+    dateObj = date;
+  }
+
+  return dateObj.getTime();
+}