-
Notifications
You must be signed in to change notification settings - Fork 380
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 #72 from SharePoint/dev
Merge for release of v1.3.0
- Loading branch information
Showing
48 changed files
with
2,323 additions
and
22 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
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
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.
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,17 @@ | ||
# Testing out a beta release ![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg) | ||
|
||
All you need to do for testing out a beta release of `@pnp/spfx-controls-react` is to install the dependency as follows: | ||
|
||
``` | ||
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). | ||
|
||
## Next Steps | ||
|
||
Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: [home](./). | ||
|
||
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/beta) |
108 changes: 108 additions & 0 deletions
108
docs/documentation/docs/controls/ListView.ContextualMenu.md
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,108 @@ | ||
# ListView: Add a contextual menu | ||
|
||
## The ContextualMenu component | ||
|
||
In order to create a contextual menu for your list view, you first need to create a new component which will use a combination of an [IconButton](https://developer.microsoft.com/en-us/fabric#/components/button#Variants) and [ContextualMenu](https://developer.microsoft.com/en-us/fabric#/components/contextualmenu) controls from the Office UI Fabric React. | ||
|
||
Here is some sample code: | ||
|
||
```TypeScript | ||
import * as React from 'react'; | ||
import { Layer, IconButton, IButtonProps } from 'office-ui-fabric-react'; | ||
import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu'; | ||
// The following are project specific components | ||
import { IECBProps } from './IECBProps'; | ||
import styles from './ECB.module.scss'; | ||
import { IListitem } from '../../model/IListitem'; | ||
|
||
export class ECB extends React.Component<IECBProps, {}> { | ||
|
||
public constructor(props: IECBProps) { | ||
super(props); | ||
|
||
this.state = { | ||
panelOpen: false | ||
}; | ||
} | ||
|
||
public render() { | ||
return ( | ||
<div className={styles.ecb}> | ||
<IconButton id='ContextualMenuButton1' | ||
className={styles.ecbbutton} | ||
text='' | ||
width='30' | ||
split={false} | ||
iconProps={ { iconName: 'MoreVertical' } } | ||
menuIconProps={ { iconName: '' } } | ||
menuProps={{ | ||
shouldFocusOnMount: true, | ||
items: [ | ||
{ | ||
key: 'action1', | ||
name: 'Action 1', | ||
onClick: this.handleClick.bind(this, this.props.item.Firstname + ' Action 1') | ||
}, | ||
{ | ||
key: 'divider_1', | ||
itemType: ContextualMenuItemType.Divider | ||
}, | ||
{ | ||
key: 'action2', | ||
name: 'Action 2', | ||
onClick: this.handleClick.bind(this, this.props.item.Firstname + ' Action 2') | ||
}, | ||
{ | ||
key: 'action3', | ||
name: 'Action 3', | ||
onClick: this.handleClick.bind(this, this.props.item.Lastname + ' Action 3') | ||
}, | ||
{ | ||
key: 'disabled', | ||
name: 'Disabled action', | ||
disabled: true, | ||
onClick: () => console.error('Disabled action should not be clickable.') | ||
} | ||
] | ||
}} /> | ||
</div> | ||
); | ||
} | ||
|
||
private handleClick(source:string, event) { | ||
alert(`${source} clicked`); | ||
} | ||
} | ||
``` | ||
|
||
## The ListView column | ||
|
||
Once the ECB component is created, you can add the contextual menu to the `ListView` control. In order to do this, you have to insert another `Viewfield` in code at the position of our choice. For instance after the `Lastname`: | ||
|
||
```TypeScript | ||
{ | ||
name: "", | ||
sorting: false, | ||
maxWidth: 40, | ||
render: (rowitem: IListitem) => { | ||
const element:React.ReactElement<IECBProps> = React.createElement( | ||
ECB, | ||
{ | ||
item: rowitem | ||
} | ||
); | ||
return element; | ||
} | ||
} | ||
``` | ||
|
||
Inside the render method of the `IViewField`, the ECB component gets created and the current item will be used as a reference for the clicked row. | ||
|
||
## The result | ||
The result will look like the following: | ||
|
||
![ContextualMenu_shown](../assets/ListView.ContextualMenu.png) | ||
|
||
Once you click on an action, you will see the alert: | ||
|
||
![ContextualMenu_clicked](../assets/ListView.ContextualMenu_clicked.png) |
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,87 @@ | ||
# Taxonomy Picker | ||
|
||
This control Allows you to select one or more Terms from a TermSet via its name or TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the AnchorId. | ||
|
||
!!! note "Disclaimer" | ||
This control makes use of the `ProcessQuery` API end-points to retrieve the managed metadata information. This will get changed once the APIs for managing managed metadata will become available. | ||
|
||
**Empty term picker** | ||
|
||
![Empty term picker](../assets/termpicker-empty.png) | ||
|
||
**Selecting terms** | ||
|
||
![Selecting terms](../assets/termpicker-selection.png) | ||
|
||
**Selected terms in picker** | ||
|
||
![Selected terms in the input](../assets/termpicker-selected-terms.png) | ||
|
||
**Term picker: Auto Complete** | ||
|
||
![Selected terms in the input](../assets/termpicker-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 { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker"; | ||
``` | ||
|
||
- Use the `TaxonomyPicker` control in your code as follows: | ||
|
||
```TypeScript | ||
<TaxonomyPicker | ||
allowMultipleSelections={true} | ||
TermSetNameOrID="Countries" | ||
panelTitle="Select Term" | ||
label="Taxonomy Picker" | ||
context={this.props.context} | ||
onChange={this.onTaxPickerChange} | ||
isTermSetSelectable={false} | ||
/> | ||
``` | ||
|
||
- With the `onChange` property you can capture the event of when the terms in the picker has changed: | ||
|
||
```typescript | ||
private onTaxPickerChange(terms : IPickerTerms) { | ||
console.log("Terms", terms); | ||
} | ||
``` | ||
|
||
## Implementation | ||
|
||
The TaxonomyPicker 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 | string | no | Specify if the control needs to be disabled. | | ||
| context | WebPartContext | yes | Context of the current web part. | | ||
| initialValues | IPickerTerms | no | Defines the selected by default term sets. | | ||
| 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. | | ||
| isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. | | ||
| anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. | | ||
|
||
Interface `IPickerTerm` | ||
|
||
| Property | Type | Required | Description | | ||
| ---- | ---- | ---- | ---- | | ||
| key | string | yes | The ID of the term | | ||
| name | string | yes | The name of the term | | ||
| path | string | yes | The path of the term | | ||
| termSet | string | yes | The Id of the parent TermSet of the term | | ||
| termSetName | string | no | The Name of the parent TermSet of the term | | ||
|
||
Interface `IPickerTerms` | ||
|
||
An Array of IPickerTerm | ||
|
||
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder) |
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
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,4 @@ | ||
const fs = require('fs'); | ||
const path = require('path'); | ||
const changelog = fs.readFileSync(path.join(__dirname, '../CHANGELOG.md'), 'utf8'); | ||
fs.writeFileSync(path.join(__dirname, '../docs/documentation/docs/about/release-notes.md'), changelog, 'utf-8'); |
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 @@ | ||
export * from './controls/listPicker/index'; |
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 @@ | ||
export * from './controls/taxonomyPicker/index'; |
Oops, something went wrong.