-
Notifications
You must be signed in to change notification settings - Fork 379
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #554 from pnp/dev
Merge for v1.18.0 release
- Loading branch information
Showing
80 changed files
with
8,629 additions
and
5,905 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+10.2 KB
docs/documentation/docs/assets/TreeView-without-checkbox-selection-mode.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | |
Oops, something went wrong.