Skip to content

Commit f3f273c

Browse files
estruyfestruyf
committed
New WebPartTitle control + documenation changes
1 parent 2f606bc commit f3f273c

23 files changed

+296
-51
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Releases
22

3+
## 1.0.0
4+
- **New control**: WebPartTilte control got added.
5+
- **Enhancement**: ListView control got extended with the ability to specify a set of preselected items.
6+
37
## Beta 1.0.0-beta.8
48
- **Bug fix**: bug fix for the `ListView` control when selection is used in combination with `setState`.
59

‎docs/documentation/docs/about/release-notes.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Releases
22

3+
## 1.0.0
4+
- **New control**: WebPartTilte control got added.
5+
- **Enhancement**: ListView control got extended with the ability to specify a set of preselected items.
6+
37
## Beta 1.0.0-beta.8
48
- **Bug fix**: bug fix for the `ListView` control when selection is used in combination with `setState`.
59

‎docs/documentation/docs/assets/webparttitle-control.gif

396 KB
Loading

‎docs/documentation/docs/controls/FileTypeIcon.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
# FileTypeIcon component
1+
# FileTypeIcon control
22

3-
This component returns the file type icon based on a specified file path or application.
3+
This control returns the file type icon based on a specified file path or application.
44

5-
![FileTypeIcon component output](../assets/FileTypeIcon.png)
5+
![FileTypeIcon control output](../assets/FileTypeIcon.png)
66

7-
## How to use this component in your solutions
7+
## How to use this control in your solutions
88

9-
1. Check that you installed the `@pnp/dev-controls` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
10-
2. Import the following modules to your component:
9+
- 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.
10+
- Import the following modules to your component:
1111

1212
```TypeScript
1313
import { FileTypeIcon, ApplicationType, IconType, ImageSize } from "@pnp/spfx-controls-react/lib/FileTypeIcon";
1414
```
1515

16-
3. Use the `FileTypeIcon` component in your code as follows:
16+
- Use the `FileTypeIcon` control in your code as follows:
1717

1818
```TypeScript
1919
/* Showing the icons font */
@@ -39,7 +39,7 @@ The FileTypeIcon component can be configured with the following properties:
3939
| Property | Type | Required | Description |
4040
| ---- | ---- | ---- | ---- |
4141
| application | ApplicationType | no | Type of the application for which you want to show the icon. Use the **ApplicationType** enum to get the list of available applications. |
42-
| path | string | no | Path to the document. If this is provided, the component will use the file extension to display the corresponding icon. |
42+
| path | string | no | Path to the document. If this is provided, the control will use the file extension to display the corresponding icon. |
4343
| size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. Small (16px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
4444
| type | IconType | yes | This property specifies is you want to use the icon font or image. Use the **IconType** enum to get the list of available icon types. |
4545

‎docs/documentation/docs/controls/ListView.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
# ListView component
1+
# ListView control
22

3-
This component renders a list view for the given set of items.
3+
This control renders a list view for the given set of items.
44

5-
![ListView component output](../assets/ListView.png)
5+
![ListView control output](../assets/ListView.png)
66

77
**List view control with grouping applied**
88

9-
![ListView component with grouping](../assets/ListView-grouping.png)
9+
![ListView control with grouping](../assets/ListView-grouping.png)
1010

11-
## How to use this component in your solutions
11+
## How to use this control in your solutions
1212

13-
1. Check that you installed the `@pnp/dev-controls` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
14-
2. Import the following modules to your component:
13+
- 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.
14+
- Import the following modules to your component:
1515

1616
```TypeScript
1717
import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp/spfx-controls-react/lib/ListView";
1818
```
1919

20-
3. Use the `ListView` component in your code as follows:
20+
- Use the `ListView` control in your code as follows:
2121

2222
```TypeScript
2323
<ListView
@@ -30,15 +30,15 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp
3030
groupByFields={groupByFields} />
3131
```
3232

33-
4. With the `selection` property you can define a method that which gets called when the user selects one or more items in the list view:
33+
- With the `selection` property you can define a method that which gets called when the user selects one or more items in the list view:
3434

3535
```typescript
3636
private _getSelection(items: any[]) {
3737
console.log('Selected items:', items);
3838
}
3939
```
4040

41-
5. With the `groupByFields` property you can define an array of field objects which will be used for grouping.
41+
- With the `groupByFields` property you can define an array of field objects which will be used for grouping.
4242

4343
**Important**: the same order of the fields defines how grouping will be applied. In the snippet the `ListView` control will first group by the `Extension` and after that by the `Author` field.
4444

@@ -56,14 +56,14 @@ const groupByFields: IGrouping[] = [
5656

5757
## Implementation
5858

59-
The Placeholder component can be configured with the following properties:
59+
The ListView control can be configured with the following properties:
6060

6161
| Property | Type | Required | Description |
6262
| ---- | ---- | ---- | ---- |
6363
| iconFieldName | string | no | Specify the name of the file URL path which will be used to show the file icon. |
6464
| items | any[]| yes | Items to render in the list view. |
6565
| viewFields | IViewField[] | no | The fields you want to render in the list view. Check the `IViewField` implementation to see which properties you can define. |
66-
| compact | boolean | no | Boolean value to indicate if the component should render in compact mode. By default this is set to `false`. |
66+
| compact | boolean | no | Boolean value to indicate if the control should render in compact mode. By default this is set to `false`. |
6767
| selectionMode | SelectionMode | no | Specify if the items in the list view can be selected and how. Options are: none, single, multi. |
6868
| selection | function | no | Selection event that passes the selected item(s) from the list view. |
6969
| groupByFields | IGrouping[] | no | Defines the field on which you want to group the items in the list view. |

‎docs/documentation/docs/controls/Placeholder.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
# Placeholder component
1+
# Placeholder control
22

3-
This component renders a placeholder which can be used to show a message that the web part still has to be configured.
3+
This control renders a placeholder which can be used to show a message that the web part still has to be configured.
44

5-
![Placeholder component output](../assets/Placeholder.png)
5+
![Placeholder control output](../assets/Placeholder.png)
66

7-
## How to use this component in your solutions
7+
## How to use this control in your solutions
88

9-
1. Check that you installed the `@pnp/dev-controls` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
10-
2. Import the following modules to your component:
9+
- 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.
10+
- Import the following modules to your component:
1111

1212
```TypeScript
1313
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
1414
```
1515

16-
3. Use the `Placeholder` component in your code as follows:
16+
- Use the `Placeholder` control in your code as follows:
1717

1818
```TypeScript
1919
<Placeholder
@@ -24,7 +24,7 @@ import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
2424
onConfigure={this._onConfigure} />
2525
```
2626

27-
4. With the `onConfigure` property you can define what it needs to do when you click on the button. Like for example opening the property pane:
27+
- With the `onConfigure` property you can define what it needs to do when you click on the button. Like for example opening the property pane:
2828

2929
```typescript
3030
private _onConfigure() {
@@ -35,7 +35,7 @@ private _onConfigure() {
3535

3636
## Implementation
3737

38-
The placeholder component can be configured with the following properties:
38+
The placeholder control can be configured with the following properties:
3939

4040
| Property | Type | Required | Description |
4141
| ---- | ---- | ---- | ---- |

‎docs/documentation/docs/controls/SiteBreadcrumb.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
# SiteBreadcrumb component
1+
# SiteBreadcrumb control
22

3-
This component returns a breadcrumb based on the current location.
3+
This control returns a breadcrumb based on the current location.
44

5-
![SiteBreadcrumb component output](../assets/SiteBreadcrumb.png)
5+
![SiteBreadcrumb control output](../assets/SiteBreadcrumb.png)
66
![Hover over an item](../assets/SiteBreadcrumb-selected.png)
77

8-
## How to use this component in your solutions
8+
## How to use this control in your solutions
99

10-
1. Check that you installed the `@pnp/dev-controls` dependency. Check out the [getting started](../getting-started) page for more information about installing the dependency.
11-
2. Import the following modules to your component:
10+
- 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.
11+
- Import the following modules to your component:
1212

1313
```TypeScript
1414
import { SiteBreadcrumb } from "@pnp/spfx-controls-react/lib/SiteBreadcrumb";
1515
```
1616

17-
3. Use the `SiteBreadcrumb` component in your code as follows:
17+
- Use the `SiteBreadcrumb` control in your code as follows:
1818

1919
```TypeScript
2020
<SiteBreadcrumb context={this.props.context} />
2121
```
2222

2323
## Implementation
2424

25-
The SiteBreadcrumb component can be configured with the following properties:
25+
The SiteBreadcrumb control can be configured with the following properties:
2626

2727
| Property | Type | Required | Description |
2828
| ---- | ---- | ---- | ---- |

‎docs/documentation/docs/controls/WebPartTitle.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# WebPartTitle control
2+
3+
This control renders a web part title that is changeable when the page is in edit mode.
4+
5+
Here is an example of the control in action:
6+
7+
![WebPartTitle control](../assets/webparttitle-control.gif)
8+
9+
## How to use this control in your solutions
10+
11+
- 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.
12+
- In the root web part file, the one that extends from the `BaseClientSideWebPart` class. Pass the following properties to your web part main component:
13+
14+
```TypeScript
15+
const element: React.ReactElement<IControlsTestProps> = React.createElement(
16+
ControlsTest,
17+
{
18+
title: this.properties.title,
19+
displayMode: this.displayMode,
20+
updateProperty: (value: string) => {
21+
this.properties.title = value;
22+
}
23+
}
24+
);
25+
```
26+
27+
- Add the `title`, `displayMode`, and `updateProperty` properties to the properties interface of your component:
28+
29+
```TypeScript
30+
import { DisplayMode } from '@microsoft/sp-core-library';
31+
32+
export interface IControlsTestProps {
33+
title: string;
34+
displayMode: DisplayMode;
35+
updateProperty: (value: string) => void;
36+
}
37+
```
38+
39+
- In your component file, import the `WebPartTitle` control as follows:
40+
41+
```TypeScript
42+
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
43+
```
44+
45+
- Use the `WebPartTitle` control in your code as follows:
46+
47+
```TypeScript
48+
<WebPartTitle displayMode={this.props.displayMode}
49+
title={this.props.title}
50+
updateProperty={this.props.updateProperty} />
51+
```
52+
53+
## Implementation
54+
55+
The WebPartTitle control can be configured with the following properties:
56+
57+
| Property | Type | Required | Description |
58+
| ---- | ---- | ---- | ---- |
59+
| displayMode | DisplayMode | yes | This tells the control in which page mode it is rendering. |
60+
| title | string | yes | The title value for the web part. |
61+
| updateProperty | Function | yes | Function that you can pass to update the title in the root web part. |
62+
| className | string | no | Optional property to specify a custom class that allows you to change the web part title style. |
63+
64+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/WebPartTitle)

‎docs/documentation/docs/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ Once the package is installed, you will have to configure the resource file of t
2020

2121
## Next Steps
2222

23-
Once you installed the dependency you can start using the components in your solution. Go to the homepage of the documentation to get an overview of all the available components: [home](./).
23+
Once you installed the dependency you can start using the controls in your solution. Go to the homepage of the documentation to get an overview of all the available controls: [home](./).
2424

2525
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/GettingStarted)

‎docs/documentation/docs/index.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
# Reusable React components for the SharePoint Framework solutions
1+
# Reusable React controls for your SharePoint Framework solutions
22

3-
This repository provides developers with a set of reusable React components that can be used in SharePoint Framework (SPFx) solutions.
3+
This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions.
44

55
## Getting started
66

77
Check out how to get started here: [Getting started](./getting-started).
88

9-
## Available components
9+
## Available controls
1010

11-
The following components are currently available:
11+
The following controls are currently available:
1212

13-
- [FileTypeIcon](./controls/FileTypeIcon) (Component that shows the icon of a specified file path or application)
14-
- [ListView](./controls/ListView) (List view component)
15-
- [Placeholder](./controls/Placeholder) (Component that can be used to show an initial placeholder if the web part has to be configured)
16-
- [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb component)
13+
- [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application)
14+
- [ListView](./controls/ListView) (List view control)
15+
- [Placeholder](./controls/Placeholder) (Control that can be used to show an initial placeholder if the web part has to be configured)
16+
- [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
17+
- [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
1718

1819
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki)

0 commit comments

Comments
 (0)