Skip to content

Commit 77f990f

Browse files
AJIXuMuKAJIXuMuK
authored
Merge branch 'dev' into master
2 parents 646cebc + 13c2559 commit 77f990f

28 files changed

+4972
-4859
lines changed

‎CHANGELOG.JSON

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,30 @@
11
{
22
"versions": [
3+
{
4+
"version": "1.18.0",
5+
"changes": {
6+
"new": [
7+
"Pagination Control [#535](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/535)"
8+
],
9+
"enhancements": [
10+
"`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)"
11+
],
12+
"fixes": [
13+
"`ComboBoxListItemPicker` documentation fix: Updated import statement in docs for ComboBoxListItemPicker [#510](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/510)",
14+
"Documentation fix: add the new control `ComboBoxListItemPicker` component to landing page [#511](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/511)",
15+
"`FilePicker`: While using the control, if `hideOrganisationalAssetTab` is set to true, even then an additional HTTP request is made.",
16+
"`IconPicker`: search fix and updated list of icons [#533](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/533)"
17+
]
18+
},
19+
"contributions": [
20+
"[David Ramalho](https://github.com/DRamalho92)",
21+
"[Gautam Sheth](https://github.com/gautamdsheth)",
22+
"[João Mendes](https://github.com/joaojmendes)",
23+
"[Joel Rodrigues](https://github.com/joelfmrodrigues)",
24+
"[Prasad Kasireddy](https://github.com/PrasadKasireddy)",
25+
"[Siddharth Vaghasia](https://github.com/siddharth-vaghasia)"
26+
]
27+
},
328
{
429
"version": "1.17.0",
530
"changes": {

‎docs/documentation/docs/assets/Pagination.gif

98 KB
Loading

‎docs/documentation/docs/controls/ComboBoxListItemPicker.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Here is an example of the control:
1818
- Import the control into your component:
1919

2020
```TypeScript
21-
import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ComboBoxListItemPicker';
21+
import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
2222
```
2323
- Use the `ComboBoxListItemPicker` control in your code as follows:
2424

‎docs/documentation/docs/controls/FolderExplorer.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,12 @@ The `FolderExplorer` control can be configured with the following properties:
5151
| Property | Type | Required | Description |
5252
| ---- | ---- | ---- | ---- |
5353
| context | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
54-
| rootFolder | IFolder | yes | The lowest level folder that can be explored. This can be the root folder of a library. |
54+
| siteAbsoluteUrl | string | no | The absolute url of the target site. Only required if not the current site. |
55+
| 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 |
5556
| defaultFolder | IFolder | yes | The default folder to be explored. |
5657
| 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. |
5758
| hiddenBreadcrumb | boolean | no | Hide the breadcrumb control. |
59+
| initialBreadcrumbItems | IBreadcrumbItem | no | Additional items to be added to the beginning of the breadcrumb. |
5860
| hiddenFilterBox | boolean | no | Hide the filter box |
5961
| onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |
6062

‎docs/documentation/docs/controls/ListItemPicker.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Here is an example of the control:
1616
- Import the control into your component:
1717

1818
```TypeScript
19-
import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
19+
import { ListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
2020
```
2121
- Use the `ListItemPicker` control in your code as follows:
2222

‎docs/documentation/docs/controls/Pagination.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Pagination Control
2+
3+
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.
4+
5+
**Pagination on the page**
6+
7+
![Pagination control](../assets/Pagination.gif)
8+
9+
10+
## How to use this control in your solutions
11+
12+
- 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.
13+
- Import the following modules to your component:
14+
15+
```typescript
16+
import { Pagination } from "@pnp/spfx-controls-react/lib/pagination";
17+
```
18+
19+
- Use the `Pagination` control in your code as follows:
20+
21+
```typescript
22+
<Pagination
23+
currentPage={3}
24+
totalPages={13}
25+
onChange={(page) => this._getPage(page)}
26+
limiter={3} // Optional - default value 3
27+
hideFirstPageJump // Optional
28+
hideLastPageJump // Optional
29+
limiterIcon={"Emoji12"} // Optional
30+
/>
31+
```
32+
33+
- With the `onChange` property you can get the selected Page in the Pagination component:
34+
35+
```typescript
36+
private _getPage(page: number){
37+
console.log('Page:', page);
38+
}
39+
```
40+
41+
## Implementation
42+
43+
The Pagination control can be configured with the following properties:
44+
45+
| Property | Type | Required | Description | Default |
46+
| ---- | ---- | ---- | ---- | ---- |
47+
| currentPage | number | yes | The page initial selected | |
48+
| totalPages | number | yes | The total of page that you want to show on control | |
49+
| onChange | string | yes| When the page number change send the page number selected | |
50+
| limiter | string | no | The number of pages showing before the icon | 3 |
51+
| hideFirstPageJump | boolean | no | Hide the quick jump to the first page | false |
52+
| hideLastPageJump | boolean | no | Hide the quick jump to the last page | false |
53+
| limiterIcon | string | no | Limitir icon form Fluent IU | More |

‎docs/documentation/docs/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ The following controls are currently available:
4949

5050
- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
5151
- [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part)
52+
- [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list)
5253
- [DateTimePicker](./controls/DateTimePicker) (DateTime Picker)
5354
- [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
5455
- [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application)

‎docs/documentation/mkdocs.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ nav:
2828
- ListView: 'controls/ListView.md'
2929
- "ListView: add a contextual menu": 'controls/ListView.ContextualMenu.md'
3030
- Map: 'controls/Map.md'
31+
- Pagination: 'controls/Pagination.md'
3132
- PeoplePicker: 'controls/PeoplePicker.md'
3233
- Placeholder: 'controls/Placeholder.md'
3334
- Progress: 'controls/Progress.md'

0 commit comments

Comments
 (0)