Skip to content

Commit 33094c4

Browse files
AJIXuMuKAJIXuMuK
committed
documentations, updated typings, exports
1 parent c9cb149 commit 33094c4

File tree

20 files changed

+540
-36
lines changed

20 files changed

+540
-36
lines changed

‎docs/documentation/docs/assets/dashboard.png

99.4 KB
Loading

‎docs/documentation/docs/assets/toolbar.png

42.5 KB
Loading

‎docs/documentation/docs/controls/Dashboard.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Dashboard control
2+
3+
Dashboard component for Microsoft Teams.
4+
5+
!!! Note
6+
As this component is based on `@fluentui/react-northstar` the main usage scenario is Microsoft Teams projects. You can still use it in non-Teams related projects as well.
7+
8+
Here is an example of the control in action:
9+
10+
![Carousel control](../assets/dashboard.png)
11+
12+
## How to use this control in your solutions
13+
14+
- 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.
15+
- Import the following modules to your component:
16+
17+
```TypeScript
18+
import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard';
19+
```
20+
21+
- Use the `Dashboard` control in your code as follows:
22+
23+
```TypeSCript
24+
const linkExample = { href: "#" };
25+
const calloutItemsExample = [
26+
{
27+
id: "action_1",
28+
title: "Info",
29+
icon: <Icon iconName={'Edit'} />,
30+
},
31+
{ id: "action_2", title: "Popup", icon: <Icon iconName={'Add'} /> },
32+
];
33+
// ...
34+
<Dashboard
35+
widgets={[{
36+
title: "Card 1",
37+
desc: "Last updated Monday, April 4 at 11:15 AM (PT)",
38+
widgetActionGroup: calloutItemsExample,
39+
size: WidgetSize.Triple,
40+
body: [
41+
{
42+
id: "t1",
43+
title: "Tab 1",
44+
content: (
45+
<Text>
46+
Content #1
47+
</Text>
48+
),
49+
},
50+
{
51+
id: "t2",
52+
title: "Tab 2",
53+
content: (
54+
<Text>
55+
Content #2
56+
</Text>
57+
),
58+
},
59+
{
60+
id: "t3",
61+
title: "Tab 3",
62+
content: (
63+
<Text>
64+
Content #3
65+
</Text>
66+
),
67+
},
68+
],
69+
link: linkExample,
70+
},
71+
{
72+
title: "Card 2",
73+
size: WidgetSize.Single,
74+
link: linkExample,
75+
},
76+
{
77+
title: "Card 3",
78+
size: WidgetSize.Double,
79+
link: linkExample,
80+
}]} />
81+
```
82+
83+
## Implementation
84+
85+
The Dashboard component can be configured with the following properties:
86+
87+
| Property | Type | Required | Description |
88+
| ---- | ---- | ---- | ---- |
89+
| widgets | IWidget[] | yes | Widgtets collection. |
90+
| allowHidingWidget | boolean | no | Specifies if widgets can be hidden from the dashboard. |
91+
| onWidgetHiding | (widget: IWidget) => void | no | Handler of widget hiding event. |
92+
| toolbarProps | IToolbarProps | no | Dashboard toolbar props. See [Toolbar](./Toolbar). |
93+
94+
Interface `IWidget`
95+
96+
Provides settings of Dashboard's widget
97+
98+
| Property | Type | Required | Description |
99+
| ---- | ---- | ---- | ---- |
100+
| size | WidgetSize | yes | Size. |
101+
| title | string | yes | Title. |
102+
| desc | string | no | Description. |
103+
| widgetActionGroup | IWidgetActionKey[] | no | Actions. |
104+
| controlOptions | IWidgetControlOptions | no | Component rendering options. |
105+
| body | IWidgetBodyContent[] | no | Widget's content (children) rendered as tabs. |
106+
| link | IWidgetLink | no | Widget's link rendered at the bottom part of the widget. |
107+
108+
Interface `IWidgetActionKey`
109+
110+
Provides Dashboard Widget Action properties
111+
112+
| Property | Type | Required | Description |
113+
| ---- | ---- | ---- | ---- |
114+
| id | string | yes | Action id. |
115+
| icon | JSX.Element | no | Action icon. |
116+
| title | string | yes | Action title. |
117+
| onClick | () => void | no | Action handler. |
118+
119+
Interface `IWidgetControlOptions`
120+
121+
Provides Widget component options
122+
123+
| Property | Type | Required | Description |
124+
| ---- | ---- | ---- | ---- |
125+
| isHidden | boolean | no | Specifies if current widget is hidden. |
126+
127+
Interface `IWidgetBodyContent`
128+
129+
Provides Widget content (tab) properties
130+
131+
| Property | Type | Required | Description |
132+
| ---- | ---- | ---- | ---- |
133+
| id | string | yes | Content (tab) id. |
134+
| title | string | yes | Content (tab) title. |
135+
| content | React.ReactNode | yes | Tab content. |
136+
137+
Interface `IWidgetLink`
138+
139+
Provides Widget link properties
140+
141+
| Property | Type | Required | Description |
142+
| ---- | ---- | ---- | ---- |
143+
| href | string | yes | Link to be opened. |
144+
145+
Enum `WidgetSize`
146+
147+
Provides size of the widget
148+
149+
| Value | Description |
150+
| ---- | ---- |
151+
| Single | Single-sized grid item. |
152+
| Double | Double-width grid item. |
153+
| Triple | Triple width grid item. |
154+
| Box | Double-width, double-height grid item. |
155+
156+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Dashboard)

‎docs/documentation/docs/controls/Toolbar.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Dashboard control
2+
3+
Toolbar component for Microsoft Teams.
4+
5+
!!! Note
6+
As this component is based on `@fluentui/react-northstar` the main usage scenario is Microsoft Teams projects. You can still use it in non-Teams related projects as well.
7+
8+
Here is an example of the control in action:
9+
10+
![Carousel control](../assets/toolbar.png)
11+
12+
## How to use this control in your solutions
13+
14+
- 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.
15+
- Import the following modules to your component:
16+
17+
```TypeScript
18+
import { Toolbar } from '@pnp/spfx-controls-react/lib/Toolbar';
19+
```
20+
21+
- Use the `Toolbar` control in your code as follows:
22+
23+
```TypeSCript
24+
<Toolbar actionGroups={{
25+
'group1': {
26+
'action1': {
27+
title: 'Edit',
28+
iconName: 'Edit',
29+
onClick: () => { console.log('Edit action click'); }
30+
},
31+
'action2': {
32+
title: 'New',
33+
iconName: 'Add',
34+
onClick: () => { console.log('New action click'); }
35+
}
36+
}
37+
}}
38+
filters={[{
39+
id: "f1",
40+
title:
41+
"Fruits (any sweet, edible part of a plant that resembles fruit, even if it does not develop from a floral ovary)",
42+
items: [
43+
{ id: "f1f1", title: "Pomes" },
44+
{ id: "f1f2", title: "Drupes" },
45+
{ id: "f1f3", title: "Citruses" },
46+
{ id: "f1f4", title: "Berries" },
47+
{ id: "f1f5", title: "Melons" },
48+
],
49+
},
50+
{
51+
id: "f3",
52+
title: "Cacti",
53+
},]}
54+
find={true} />
55+
```
56+
57+
## Implementation
58+
59+
The Toolbar component can be configured with the following properties:
60+
61+
| Property | Type | Required | Description |
62+
| ---- | ---- | ---- | ---- |
63+
| actionGroups | TActionGroups | yes | Toolbar actions groups. |
64+
| filters | TFilters | no | Toolbar filters. |
65+
| find | boolean | no | Specifies if searchbox should be displayed. |
66+
| filtersSingleSelect | boolean | no | Specifies if a user can select only one filter at a time. |
67+
| onSelectedFiltersChange | (selectedFilters: string[]) => string[] | no | Filter changed handler. |
68+
| onFindQueryChange | (findQuery: string) => string | no | Search query changed handler. |
69+
70+
71+
Type `TActionGroups`
72+
73+
Provides Toolbar action groups settings
74+
75+
```typescript
76+
type TActionGroups = {
77+
[slug: string]: TActions;
78+
};
79+
```
80+
81+
Type `TActions`
82+
83+
Provides Toolbar actions settings
84+
85+
```typescript
86+
type TActions = {
87+
[actionKey: string]: TAction;
88+
};
89+
```
90+
91+
Type `TAction`
92+
93+
Provides Toolbar action settings
94+
95+
| Property | Type | Required | Description |
96+
| ---- | ---- | ---- | ---- |
97+
| title | string | yes | Action title. |
98+
| iconName | string | no | Action icon name. |
99+
| multi | boolean | no | For future. |
100+
| onClick | ComponentEventHandler&lt;ToolbarItemProps&gt; | no | Action `onClick` handler. |
101+
102+
Type `TFilters`
103+
104+
Provides Toolbar filters settings
105+
106+
```typescript
107+
type TFilters = ObjectShorthandCollection<TreeItemProps, never>;
108+
```
109+
110+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Toolbar)

‎docs/documentation/docs/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ The following controls are currently available:
5656
- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
5757
- [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part)
5858
- [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list)
59+
- [Dashboard](./controls/Dashboard) (Control to render dashboard in Microsoft Teams)
5960
- [DateTimePicker](./controls/DateTimePicker) (DateTime Picker)
6061
- [FieldCollectionData](./controls/FieldCollectionData) (control gives you the ability to insert a list / collection data which can be used in your web part / application customizer)
6162
- [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
@@ -75,6 +76,7 @@ The following controls are currently available:
7576
- [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
7677
- [SecurityTrimmedControl](./controls/SecurityTrimmedControl) (intended to be used when you want to show or hide components based on the user permissions)
7778
- [TaxonomyPicker](./controls/TaxonomyPicker) (Taxonomy Picker)
79+
- [Toolbar](./controls/Toolbar) (Control to render Toolbar in Microsoft Teams)
7880
- [TreeView](./controls/TreeView) (Tree View)
7981
- [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)
8082

‎docs/documentation/mkdocs.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ nav:
1515
- "Radar Chart": 'controls/charts/RadarChart.md'
1616
- "Scatter Chart": 'controls/charts/ScatterChart.md'
1717
- ComboBoxListItemPicker: 'controls/ComboBoxListItemPicker.md'
18+
- Dashboard: 'controls/Dashboard.md'
1819
- DateTimePicker: 'controls/DateTimePicker.md'
1920
- FieldCollectionData: 'controls/FieldCollectionData.md'
2021
- FilePicker: 'controls/FilePicker.md'
@@ -39,6 +40,7 @@ nav:
3940
- SiteBreadcrumb: 'controls/SiteBreadcrumb.md'
4041
- SecurityTrimmedControl: 'controls/SecurityTrimmedControl.md'
4142
- TaxonomyPicker: 'controls/TaxonomyPicker.md'
43+
- Toolbar: 'controls/Toolbar.md'
4244
- TreeView: 'controls/TreeView.md'
4345
- WebPartTitle: 'controls/WebPartTitle.md'
4446
- 'Field Controls':

‎package-lock.json

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Dashboard.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './controls/dashboard';

‎src/Toolbar.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './controls/toolbar';

‎src/common/model/TAction.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { ComponentEventHandler, ToolbarItemProps } from "@fluentui/react-northstar";
2+
13
export type TAction = {
24
title: string;
35
iconName?: string;
46
multi?: boolean;
5-
__internal_callback__?: string;
7+
onClick?: ComponentEventHandler<ToolbarItemProps>;
68
};
79

810
export type TActions = {
911
[actionKey: string]: TAction;
10-
};
12+
};

0 commit comments

Comments
 (0)