Skip to content

Commit d08a14b

Browse files
fabiofranzinifabiofranzini
committed
TreeView - Add support for theme
1 parent 0915b0a commit d08a14b

10 files changed

Lines changed: 273 additions & 244 deletions

File tree

‎docs/documentation/docs/controls/TreeView.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ import { TreeView, ITreeItem, TreeViewSelectionMode } from "@pnp/spfx-controls-r
4242
defaultExpandedChildren={true}
4343
onSelect={this.onTreeItemSelect}
4444
onExpandCollapse={this.onTreeItemExpandCollapse}
45-
onRenderItem={this.renderCustomTreeItem} />
45+
onRenderItem={this.renderCustomTreeItem}
46+
theme={this.props.themeVariant} />
4647
```
4748

4849
- With the `onSelect` property you can capture the event of when the tree item in the TreeView has changed the selection:
@@ -102,6 +103,7 @@ The `TreeView` control can be configured with the following properties:
102103
| onRenderItem | function | no | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection). |
103104
| defaultExpandedChildren | boolean | no | Default expand / collapse behavior for the child nodes. By default this is set to true. |
104105
| defaultExpandedKeys | string[] | no | Keys of items expanded by default. |
106+
| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. |
105107
106108
Enum `TreeViewSelectionMode`
107109

‎src/controls/treeView/ButtonTreeItemAction.tsx‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import * as React from 'react';
21
import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
32
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
4-
import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions';
3+
import * as React from 'react';
4+
import { IConcreteTreeItemActionProps, ITreeItemAction } from './ITreeItemActions';
55
import styles from './TreeView.module.scss';
66

77
/**
@@ -28,18 +28,6 @@ export default class ButtonTreeItemAction extends React.Component<IConcreteTreeI
2828
return { name, text, iconProps, btnTitle };
2929
}
3030

31-
/**
32-
* Gets the action button styling
33-
*/
34-
private getTreeItemActionButtonStyle = (treeItemAction: ITreeItemAction): React.CSSProperties => {
35-
let result: React.CSSProperties = {
36-
backgroundColor: "transparent",
37-
height: "32px"
38-
};
39-
40-
return result;
41-
}
42-
4331
/**
4432
* Check if there are action to immediatly invoke
4533
*/
@@ -84,17 +72,18 @@ export default class ButtonTreeItemAction extends React.Component<IConcreteTreeI
8472
treeItemAction.hidden ? (
8573
null
8674
) : (
87-
<div>
88-
<CommandBarButton split={true}
89-
onClick={() => { this.onActionExecute(treeItemAction); }}
90-
iconProps={iconProps}
91-
text={text}
92-
title={btnTitle}
93-
name={name}
94-
key={treeItem.key}
95-
className={styles.actionButton} />
96-
</div>
97-
)
75+
<div>
76+
<CommandBarButton split={true}
77+
onClick={() => { this.onActionExecute(treeItemAction); }}
78+
iconProps={iconProps}
79+
text={text}
80+
title={btnTitle}
81+
name={name}
82+
key={treeItem.key}
83+
className={styles.actionButton}
84+
theme={this.props.theme} />
85+
</div>
86+
)
9887
);
9988
})
10089
}

‎src/controls/treeView/DropdownTreeItemAction.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import * as React from 'react';
2-
import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
31
import { IconButton } from 'office-ui-fabric-react/lib/Button';
2+
import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
3+
import * as React from 'react';
44
import { ITreeItem } from './ITreeItem';
5-
import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions';
5+
import { IConcreteTreeItemActionProps, ITreeItemAction } from './ITreeItemActions';
66
import styles from './TreeView.module.scss';
77

88
/**
@@ -47,20 +47,6 @@ export class DropdownTreeItemAction extends React.Component<IConcreteTreeItemAct
4747
return contextualMenuProps;
4848
}
4949

50-
/**
51-
* Prepare treeItem action button style.
52-
*/
53-
private getTreeItemActionActionButtonStyle = (): React.CSSProperties => {
54-
let result: React.CSSProperties = {
55-
backgroundColor: "transparent",
56-
width: "14px",
57-
display: "inline-flex",
58-
padding: "0px"
59-
};
60-
61-
return result;
62-
}
63-
6450
/**
6551
* Check if there are action to immediatly invoke
6652
*/
@@ -97,6 +83,7 @@ export class DropdownTreeItemAction extends React.Component<IConcreteTreeItemAct
9783
className={styles.actionMore}
9884
title="More"
9985
ariaLabel="More"
86+
theme={this.props.theme}
10087
/>
10188
</div>
10289
);

‎src/controls/treeView/ITreeItemActions.ts‎

Lines changed: 76 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,116 @@
11
import { ITreeItem } from './ITreeItem';
22
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
3+
import { ITheme } from 'office-ui-fabric-react/lib/Styling';
34

45
/**
56
* Specifies the display mode of the tree item action.
67
*/
78
export enum TreeItemActionsDisplayMode {
8-
Buttons = 1,
9-
ContextualMenu
9+
Buttons = 1,
10+
ContextualMenu
1011
}
1112

1213
/**
1314
* Tree item actions.
1415
*/
1516
export interface ITreeItemActions {
16-
/**
17-
* List of actions.
18-
*/
19-
actions: ITreeItemAction[];
20-
/**
21-
* Display mode of the tree item actions.
22-
*/
23-
treeItemActionsDisplayMode?: TreeItemActionsDisplayMode;
17+
/**
18+
* List of actions.
19+
*/
20+
actions: ITreeItemAction[];
21+
/**
22+
* Display mode of the tree item actions.
23+
*/
24+
treeItemActionsDisplayMode?: TreeItemActionsDisplayMode;
2425
}
2526

2627
/**
2728
* TreeItemActionsControl properties interface
2829
*/
2930
export interface ITreeItemActionsControlProps {
30-
/**
31-
* Current tree item.
32-
*/
33-
treeItem: ITreeItem;
34-
/**
35-
* List of actions.
36-
*/
37-
treeItemActions: ITreeItemActions;
38-
/**
39-
* Callback after execution of tree item action.
40-
*/
41-
treeItemActionCallback: () => void;
31+
/**
32+
* Current tree item.
33+
*/
34+
treeItem: ITreeItem;
35+
/**
36+
* List of actions.
37+
*/
38+
treeItemActions: ITreeItemActions;
39+
/**
40+
* Callback after execution of tree item action.
41+
*/
42+
treeItemActionCallback: () => void;
43+
/**
44+
* Set Fluent UI Theme.
45+
* */
46+
theme: ITheme;
4247
}
4348

4449
/**
4550
* TreeItemActionsControl state interface
4651
*/
4752
export interface ITreeItemActionsControlState {
48-
/**
49-
* Specifies the list of the available actions for the tree item.
50-
*/
51-
availableActions: ITreeItemAction[];
52-
/**
53-
* TreeItemAction display mode.
54-
*/
55-
displayMode: TreeItemActionsDisplayMode;
53+
/**
54+
* Specifies the list of the available actions for the tree item.
55+
*/
56+
availableActions: ITreeItemAction[];
57+
/**
58+
* TreeItemAction display mode.
59+
*/
60+
displayMode: TreeItemActionsDisplayMode;
5661
}
5762

5863
/**
5964
* ConcreteTreeItemAction properties interface
6065
*/
6166
export interface IConcreteTreeItemActionProps {
62-
/**
63-
* Specifies the list of the available actions for the tree item.
64-
*/
65-
treeItemActions: ITreeItemAction[];
66-
/**
67-
* Current tree item
68-
*/
69-
treeItem: ITreeItem;
67+
/**
68+
* Specifies the list of the available actions for the tree item.
69+
*/
70+
treeItemActions: ITreeItemAction[];
71+
/**
72+
* Current tree item
73+
*/
74+
treeItem: ITreeItem;
7075

71-
/**
72-
* Method to be executed when action is fired.
73-
*/
74-
treeItemActionCallback: () => void;
76+
/**
77+
* Method to be executed when action is fired.
78+
*/
79+
treeItemActionCallback: () => void;
80+
/**
81+
* Set Fluent UI Theme.v
82+
* */
83+
theme: ITheme;
7584
}
7685

7786
/**
7887
* Interface represents the possible action that could be execute on tree item level.
7988
*/
8089
export interface ITreeItemAction {
81-
/**
82-
* Action ID
83-
*/
84-
id: string;
85-
/**
86-
* Action title
87-
*/
88-
title?: string;
89-
/**
90-
* Icon to be displayed for the action.
91-
*/
92-
iconProps?: IIconProps;
93-
/**
94-
* Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering.
95-
*/
96-
hidden?: boolean;
97-
/**
98-
* Specifies if you want to invoke the action on render
99-
*/
100-
invokeActionOnRender?: boolean;
90+
/**
91+
* Action ID
92+
*/
93+
id: string;
94+
/**
95+
* Action title
96+
*/
97+
title?: string;
98+
/**
99+
* Icon to be displayed for the action.
100+
*/
101+
iconProps?: IIconProps;
102+
/**
103+
* Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering.
104+
*/
105+
hidden?: boolean;
106+
/**
107+
* Specifies if you want to invoke the action on render
108+
*/
109+
invokeActionOnRender?: boolean;
101110

102-
/**
103-
* Method to be executed when action is fired.
104-
* @param currentTreeItem
105-
*/
106-
actionCallback: (currentTreeItem: ITreeItem) => void;
111+
/**
112+
* Method to be executed when action is fired.
113+
* @param currentTreeItem
114+
*/
115+
actionCallback: (currentTreeItem: ITreeItem) => void;
107116
}

‎src/controls/treeView/ITreeViewProps.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
12
import { ITreeItem } from './ITreeItem';
23
import { TreeItemActionsDisplayMode } from './ITreeItemActions';
34

@@ -43,10 +44,10 @@ export interface ITreeViewProps {
4344
* By default this is set to false.
4445
*/
4546
selectChildrenIfParentSelected?: boolean;
46-
/**
47-
* Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect
48-
* By default this is set to None.
49-
*/
47+
/**
48+
* Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect
49+
* By default this is set to None.
50+
*/
5051
selectChildrenMode?: SelectChildrenMode;
5152
/**
5253
* Specifies if the checkboxes should be displayed for selection.
@@ -59,7 +60,7 @@ export interface ITreeViewProps {
5960
/**
6061
* Keys of items expanded by default
6162
*/
62-
defaultExpandedKeys?: string[];
63+
defaultExpandedKeys?: string[];
6364
/**
6465
* Keys of items selected by default
6566
*/
@@ -86,9 +87,14 @@ export interface ITreeViewProps {
8687
* @argument item The tree item.
8788
*/
8889
onRenderItem?: (item: ITreeItem) => JSX.Element;
89-
/**
90-
* Default expand / collapse behavior for the child nodes.
91-
* By default this is set to true.
92-
*/
90+
/**
91+
* Default expand / collapse behavior for the child nodes.
92+
* By default this is set to true.
93+
*/
9394
defaultExpandedChildren?: boolean;
95+
/**
96+
* Set Fluent UI Theme.
97+
* If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded.
98+
*/
99+
theme?: IPartialTheme | ITheme;
94100
}

0 commit comments

Comments
 (0)