Merge branch 'dev' into add-folder-picker

Author: AJIXuMuK

CHANGELOG.JSON

@@ -3,16 +3,30 @@
     {
       "version": "1.18.0",
       "changes": {
-        "new": [],
-        "enhancements": [],
+        "new": [
+          "Pagination Control [#535](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/535)",
+          "TreeView Control [#536](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/536)"
+        ],
+        "enhancements": [
+          "`FolderExplorer` updates: allow selection of libraries if site url is used as the root, allow passing items to be passed as a property and added to the breadcrumb, add support for loading folders from a different site, fix breadcrumb names for document libraries [#534](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/534)",
+          "`IconPicker`: `renderOption` property to render icons list as a panel or dialog [#537](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/537)"
+        ],
         "fixes": [
           "`ComboBoxListItemPicker` documentation fix: Updated import statement in docs for ComboBoxListItemPicker [#510](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/510)",
           "Documentation fix: add the new control `ComboBoxListItemPicker` component to landing page [#511](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/511)",
-          "`FilePicker`: While using the control, if `hideOrganisationalAssetTab` is set to true, even then an additional HTTP request is made."
+          "`FilePicker`: While using the control, if `hideOrganisationalAssetTab` is set to true, even then an additional HTTP request is made.",
+          "`IconPicker`: search fix and updated list of icons [#533](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/533)",
+          "`ListItemAttachment`: when I upload a file that contains an hyphen, the \"-\" char is replaced by an empty string [#526](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/526)",
+          "`IconPicker` shows selected icon only during the first opening [#513](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/513)"
         ]
       },
       "contributions": [
+        "[David Ramalho](https://github.com/DRamalho92)",
         "[Gautam Sheth](https://github.com/gautamdsheth)",
+        "[Gregghis](https://github.com/Gregghis)",
+        "[João Mendes](https://github.com/joaojmendes)",
+        "[Joel Rodrigues](https://github.com/joelfmrodrigues)",
+        "[Nanddeep Nachan](https://github.com/nanddeepn)",
         "[Prasad Kasireddy](https://github.com/PrasadKasireddy)",
         "[Siddharth Vaghasia](https://github.com/siddharth-vaghasia)"
       ]

docs/documentation/docs/assets/IconPicker_dialog.gif

@@ -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. |
 

docs/documentation/docs/assets/Pagination.gif

@@ -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)

docs/documentation/docs/assets/TreeView-all-possible-options.png

@@ -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 |