Merge pull request #554 from pnp/dev

Merge for v1.18.0 release
pnp · May 7, 2020 · 84d2b51 · 84d2b51
2 parents 0ac78d9 + 4d2e68b
commit 84d2b51
Show file tree

Hide file tree

Showing 80 changed files with 8,629 additions and 5,905 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -1,7 +1,7 @@
 Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
 needs please complete the below template to ensure we have the details to help. Thanks!
 
-**Please check out the [documentation](https://sharepoint.github.io/sp-dev-fx-controls-react/) to see if your question is already addressed there. This will help us ensure our documentation is up to date.**
+**Please check out the [documentation](https://pnp.github.io/sp-dev-fx-controls-react/) to see if your question is already addressed there. This will help us ensure our documentation is up to date.**
 
 #### Category
 [ ] Enhancement

diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -4,18 +4,18 @@
 
 This is a open source library that shares a set of reusable React control that can be used in your SharePoint Framework solutions.
 
-> If you are looking for web part property controls, please check following repository for those - [https://github.com/SharePoint/sp-dev-fx-property-controls](https://github.com/SharePoint/sp-dev-fx-property-controls)
+> If you are looking for web part property controls, please check following repository for those - [https://github.com/pnp/sp-dev-fx-property-controls](https://github.com/pnp/sp-dev-fx-property-controls)
 
 ## Get Started
 
-More information to get started can be found documentation of this repository: [documentation](https://sharepoint.github.io/sp-dev-fx-controls-react/).
+More information to get started can be found documentation of this repository: [documentation](https://pnp.github.io/sp-dev-fx-controls-react/).
 
 # Have issues or questions?
 
 Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible.
 
-* You have general question or challenge with SPFx - use [sp-dev-docs repository issue list](https://github.com/SharePoint/sp-dev-docs/issues).
-* You have issue on specific controls in this package - use [issue list in this repository](https://github.com/SharePoint/sp-dev-fx-controls-react/issues).
+* You have general question or challenge with SPFx - use [sp-dev-docs repository issue list](https://github.com/sharepoint/sp-dev-docs/issues).
+* You have issue on specific controls in this package - use [issue list in this repository](https://github.com/pnp/sp-dev-fx-controls-react/issues).
 
 
 ## Contributing

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
diff --git a/docs/documentation/docs/assets/FolderPicker-no-selection.png b/docs/documentation/docs/assets/FolderPicker-no-selection.png
diff --git a/docs/documentation/docs/assets/FolderPicker-selected.png b/docs/documentation/docs/assets/FolderPicker-selected.png
diff --git a/docs/documentation/docs/assets/FolderPicker-selection.png b/docs/documentation/docs/assets/FolderPicker-selection.png
diff --git a/docs/documentation/docs/assets/FolderPicker.png b/docs/documentation/docs/assets/FolderPicker.png
diff --git a/docs/documentation/docs/assets/IconPicker_dialog.gif b/docs/documentation/docs/assets/IconPicker_dialog.gif
diff --git a/docs/documentation/docs/assets/Pagination.gif b/docs/documentation/docs/assets/Pagination.gif
diff --git a/docs/documentation/docs/assets/TreeView-all-possible-options.png b/docs/documentation/docs/assets/TreeView-all-possible-options.png
diff --git a/docs/documentation/docs/assets/TreeView-control.gif b/docs/documentation/docs/assets/TreeView-control.gif
diff --git a/docs/documentation/docs/assets/TreeView-without-checkbox-selection-mode.png b/docs/documentation/docs/assets/TreeView-without-checkbox-selection-mode.png
diff --git a/docs/documentation/docs/assets/TreeView-without-checkbox.png b/docs/documentation/docs/assets/TreeView-without-checkbox.png
diff --git a/docs/documentation/docs/beta.md b/docs/documentation/docs/beta.md
@@ -8,7 +8,7 @@ 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).
+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/pnp/sp-dev-fx-controls-react/tree/dev/docs/documentation/docs/controls).
 
 ## Next Steps
 

diff --git a/docs/documentation/docs/controls/ComboBoxListItemPicker.md b/docs/documentation/docs/controls/ComboBoxListItemPicker.md
@@ -18,7 +18,7 @@ Here is an example of the control:
 - Import the control into your component:
 
 ```TypeScript
-import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ComboBoxListItemPicker';
+import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
 ```
 - Use the `ComboBoxListItemPicker` control in your code as follows:
 
@@ -61,13 +61,45 @@ import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ComboBoxLis
 - The `onSelectedItem` change event returns the list items selected and can be implemented as follows:
 
 ```TypeScript
-private onSelectedItem(data: { key: string; name: string }[]) {
-  for (const item of data) {
-    console.log(`Item value: ${item.key}`);
-    console.log(`Item text: ${item.name}`);
-  }
+private onSelectedItem(items: []) {
+    console.log("selected items:", items);
 }
 ```
+
+If you can provide typing details to the implementation based on `columnInternalName` and `keyColumnInternalName`.
+For example above:
+
+```typescript
+columnInternalName='Title'
+keyColumnInternalName='Id'
+// ...
+private onSelectedItem(items: { Title: string, Id: string }[]) {
+    console.log("selected items:", items);
+}
+```
+
+If you use variables for `columnInternalName` and `keyColumnInternalName` the typing will look as follow:
+``` typescript
+const columnInternalName = 'Title';
+const keyColumnInternalName = 'Id';
+
+<ComboBoxListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
+                        columnInternalName={columnInternalName}
+                        keyColumnInternalName={keyColumnInternalName}
+                        filter="Title eq 'SPFx'" 
+                        defaultSelectedItems: [2]
+                        onSelectedItem={this.onSelectedItem}
+                        webUrl={this.context.pageContext.web.absoluteUrl}
+                        spHttpClient={this.context.spHttpClient} />
+
+private onSelectedItem(items: { 
+    [columnInternalName]: string, 
+    [keyColumnInternalName]: string 
+  }[]) {
+    console.log("selected items:", items);
+}
+```
+
 ## Implementation
 
 The `ComboBoxListItemPicker` control can be configured with the following properties:
@@ -82,7 +114,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
 | listId | string | yes | Guid of the list. |
 | onSelectItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
 | className | string | no | ClassName for the picker. |
-| webUrl | string | no | URL of the site. By default it uses the current site URL. |
 | defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. Support objects and Ids only |
 | suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
 | noResultsFoundText | string | no | The text that should appear when no results are returned. |

diff --git a/docs/documentation/docs/controls/FolderExplorer.md b/docs/documentation/docs/controls/FolderExplorer.md
@@ -51,10 +51,12 @@ The `FolderExplorer` control can be configured with the following properties:
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | context | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
-| rootFolder | IFolder | yes | The lowest level folder that can be explored. This can be the root folder of a library. |
+| siteAbsoluteUrl | string | no | The absolute url of the target site. Only required if not the current site. |
+| rootFolder | IFolder | yes | The lowest level folder that can be explored. This can be the root folder of a library. If site url is provided, it will allow the user to select a document library |
 | defaultFolder | IFolder | yes | The default folder to be explored. |
 | canCreateFolders | boolean | no | Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. |
 | hiddenBreadcrumb | boolean | no | Hide the breadcrumb control. |
+| initialBreadcrumbItems | IBreadcrumbItem | no | Additional items to be added to the beginning of the breadcrumb. |
 | hiddenFilterBox | boolean | no | Hide the filter box |
 | onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |
 

diff --git a/docs/documentation/docs/controls/FolderPicker.md b/docs/documentation/docs/controls/FolderPicker.md
@@ -0,0 +1,68 @@
+# FolderPicker control
+
+This control allows you to explore and select a folder.
+It also allows the user to create a new folder at the current level being explored.
+
+Here is an example of the control:
+
+![FolderPicker](../assets/FolderPicker.png)
+
+`FolderPicker` no selection:
+
+![FolderPicker no selection](../assets/FolderPicker-no-selection.png)
+
+`FolderPicker` selection:
+
+![FolderPicker selection](../assets/FolderPicker-selection.png)
+
+`FolderPicker` selected:
+
+![FolderPicker selected](../assets/FolderPicker-selected.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 { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker";
+```
+
+- Use the `FolderPicker` control in your code as follows:
+
+```TypeScript
+<FolderPicker context={this.props.context}
+                label='Folder Picker'
+                required={true}
+                rootFolder={{
+                  Name: 'Documents',
+                  ServerRelativeUrl: `/sites/TestSite/Shared Documents`
+                }}                
+                onSelect={this._onFolderSelect}
+                canCreateFolders={true} />
+```
+
+- The `onSelect` change event returns the selected folder and can be implemented as follows:
+
+```TypeScript
+private _onFolderSelect = (folder: IFolder): void => {
+  console.log('selected folder', folder);
+}
+```
+
+## Implementation
+
+The `FolderPicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| label | string | yes | The label for the control. |
+| rootFolder | IFolder | yes | The lowest level folder that can be explored. This can be the root folder of a library. |
+| defaultFolder | IFolder | no | The default folder to be selected or explored. |
+| required | boolean | no | Is selection required. |
+| disabled | boolean | no | Is the control disabled. |
+| canCreateFolders | boolean | no | Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. |
+| onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FolderPicker)
diff --git a/docs/documentation/docs/controls/IconPicker.md b/docs/documentation/docs/controls/IconPicker.md
@@ -12,6 +12,10 @@ Icon picker always opens a new panel where you can pick an icon. The panel displ
 ![Icon Picker panel](../assets/IconPickerPanel.gif)
 
 
+## Displayed in the dialog
+Icon picker always opens a new dialog where you can pick an icon. The dialog displays all the icons and maintains readability. Picker does not displays selected icon outside the dialog.
+![Icon Picker panel](../assets/IconPicker_dialog.gif)
+
 ## How to use this control
 
 - 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.
@@ -29,6 +33,13 @@ import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker';
             onSave={(iconName: string) => { this.setState({icon: iconName}); }} />
 ```
 
+```TypeScript
+<IconPicker buttonLabel={'Icon'}
+            renderOption={'Dialog'}
+            onChange={(iconName: string) => { this.setState({icon: iconName}); }}
+            onSave={(iconName: string) => { this.setState({icon: iconName}); }} />
+```
+
 ## Implementation
 
 The IconPicker component can be configured with the following properties:
@@ -41,6 +52,7 @@ The IconPicker component can be configured with the following properties:
 | disabled | boolean | no | Specifies if the picker button is disabled |
 | buttonClassName | boolean | no | If provided, additional class name will be added to the picker button |
 | panelClassName | boolean | no | If provided, additional class name will be added to the picker panel |
-| currentIcon | boolean | no | Specifies default selected icon |
+| currentIcon | string | no | Specifies default selected icon |
+| renderOption | `dialog`, `panel` | no | Specifies how to render list of Icons, Values :  'Panel' or 'Dialog' defualt value 'Panel' |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IconPicker)
diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/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/lib/listItemPicker';
+import { ListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
 ```
 - Use the `ListItemPicker` control in your code as follows:
 

diff --git a/docs/documentation/docs/controls/Pagination.md b/docs/documentation/docs/controls/Pagination.md
@@ -0,0 +1,53 @@
+# Pagination Control
+
+This control renders a Pagination component which can be used to show limited information of data. For example, you can set up your search result for the first 10 and then when clicking on a new page make a new request for other 10 elements.   
+
+**Pagination on the page**
+
+![Pagination control](../assets/Pagination.gif)
+
+
+## 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 { Pagination } from "@pnp/spfx-controls-react/lib/pagination";
+```
+
+- Use the `Pagination` control in your code as follows:
+
+```typescript
+<Pagination
+  currentPage={3}
+  totalPages={13} 
+  onChange={(page) => this._getPage(page)}
+  limiter={3} // Optional - default value 3
+  hideFirstPageJump // Optional
+  hideLastPageJump // Optional
+  limiterIcon={"Emoji12"} // Optional
+/>
+```
+
+- With the `onChange` property you can get the selected Page in the Pagination component:
+
+```typescript
+private _getPage(page: number){
+  console.log('Page:', page);
+}
+```
+
+## Implementation
+
+The Pagination control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| currentPage | number | yes | The page initial selected | |
+| totalPages | number | yes | The total of page that you want to show on control |  |
+| onChange | string | yes| When the page number change send the page number selected |  |
+| limiter | string | no | The number of pages showing before the icon | 3 |
+| hideFirstPageJump | boolean | no | Hide the quick jump to the first page | false |
+| hideLastPageJump | boolean | no | Hide the quick jump to the last page | false |
+| limiterIcon | string | no | Limitir icon form Fluent IU | More |