Skip to content

Commit 24919ee

Browse files
AJIXuMuKAJIXuMuK
committed
Merge branch 'siddharth-vaghasia-master' into dev
2 parents 1e26ffb + a962971 commit 24919ee

File tree

5 files changed

+113
-21
lines changed

5 files changed

+113
-21
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView";
3737
selectChildrenIfParentSelected={true}
3838
showCheckboxes={true}
3939
treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
40-
defaultSelectedKeys=['key1', 'key2'],
40+
defaultSelectedKeys={['key1', 'key2']},
41+
expandToSelected={true}
4142
onSelect={this.onTreeItemSelect}
4243
onExpandCollapse={this.onTreeItemExpandCollapse}
4344
onRenderItem={this.renderCustomTreeItem} />
@@ -88,11 +89,12 @@ The `TreeView` control can be configured with the following properties:
8889
|--------------------------------|----------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------|
8990
| items | ITreeItem[] | yes | An array of tree items to display. refer [example](#example-of-array-of-tree-items-used-to-render-control-as-in-first-screenshot). |
9091
| defaultExpanded | boolean | no | Specify if the tree items are displayed as expanded by default (defaults to false). |
91-
| selectionMode | enum | no | Specify the selection mode of tree view (defaults to Single selection). |
92-
| selectChildrenIfParentSelected | boolean | no | Specify if the childrens should be selected when parent item is selected (defaults to false). |
92+
| selectionMode | enum | no | Specifies the selection mode of tree view (defaults to Single selection). |
93+
| selectChildrenIfParentSelected | boolean | no | Specifies if the childrens should be selected when parent item is selected (defaults to false). |
9394
| showCheckboxes | boolean | yes | Specify if the checkboxes should be displayed for selection. |
94-
| treeItemActionsDisplayMode | TreeItemActionsDisplayMode | no | Specify the display mode of the tree item actions. |
95-
| defaultSelectedKeys | string[] | no | Specify keys of items to be selected by default. |
95+
| treeItemActionsDisplayMode | TreeItemActionsDisplayMode | no | Specifies the display mode of the tree item actions. |
96+
| defaultSelectedKeys | string[] | no | Specifies keys of items to be selected by default. |
97+
| expandToSelected | boolean | no | Specifies if the tree view is expanded to display selected nodes. |
9698
| onExpandCollapse | function | no | Defines a onExpandCollapse function to raise when the tree item has expanded or collapsed. |
9799
| onSelect | function | no | Captures the event of when the tree item selection has changed. |
98100
| onRenderItem | function | no | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection). |

‎src/controls/treeView/ITreeViewProps.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ export interface ITreeViewProps {
2424
*/
2525
defaultExpanded?: boolean;
2626
/**
27-
* Specify the item selection mode.
27+
* Specifies the item selection mode.
2828
* By default this is set to Single.
2929
*/
3030
selectionMode?: TreeViewSelectionMode;
3131
/**
32-
* Specify if the childrens should be selected when parent is selected.
32+
* Specifies if the childrens should be selected when parent is selected.
3333
* By default this is set to false.
3434
*/
3535
selectChildrenIfParentSelected?: boolean;
3636
/**
37-
* Specify if the checkboxes should be displayed for selection.
37+
* Specifies if the checkboxes should be displayed for selection.
3838
*/
3939
showCheckboxes?: boolean;
4040
/**
@@ -46,6 +46,11 @@ export interface ITreeViewProps {
4646
*/
4747
defaultSelectedKeys?: string[];
4848

49+
/**
50+
* Specifies if the tree view is expanded to display selected nodes.
51+
*/
52+
expandToSelected?: boolean;
53+
4954
/**
5055
* Callback function called after a item is expanded / collapsed.
5156
* @argument item The expanded / collapsed item.

‎src/controls/treeView/TreeItem.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,12 @@ export interface ITreeItemProps {
5959
* Customize how item is rendered.
6060
*/
6161
onRenderItem?: (item: ITreeItem) => JSX.Element;
62+
63+
nodesToExpand: any[];
6264
}
6365

66+
67+
6468
/**
6569
* TreeItem state interface
6670
*/
@@ -95,11 +99,17 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
9599
super(props);
96100

97101
// Check if current item is selected
98-
let active = this.props.activeItems.filter(item => item.key === this.props.treeItem.key);
102+
let active = props.activeItems.filter(item => item.key === props.treeItem.key);
103+
104+
let expanded = props.defaultExpanded;
105+
if (props.nodesToExpand.indexOf(props.treeItem.key) != -1) {
106+
expanded = true;
107+
}
99108

100109
this.state = {
101110
selected: active.length > 0,
102-
expanded: this.props.defaultExpanded
111+
// expanded: this.props.defaultExpanded
112+
expanded: expanded
103113
};
104114

105115
// Bind control events
@@ -134,7 +144,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
134144
* @param nextProps
135145
* @param nextContext
136146
*/
137-
public componentWillReceiveProps?(nextProps: ITreeItemProps, nextContext: any): void {
147+
public componentWillReceiveProps(nextProps: ITreeItemProps): void {
138148
// If selection is turned on, set the item as selected
139149
if (this.props.selectionMode != TreeViewSelectionMode.None) {
140150
let active = nextProps.activeItems.filter(item => item.key === this.props.treeItem.key);
@@ -171,7 +181,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
171181
this.props.showCheckboxes && item.selectable == false && !item.children &&
172182
<span className={styles.blankspace}>&nbsp;</span>
173183
}
174-
184+
175185
{
176186
// Rendering when item has iconProps
177187
item.iconProps &&
@@ -214,7 +224,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
214224
return (
215225
<TreeItem
216226
treeItem={item}
217-
defaultExpanded={treeItem.key === item.key ? this.state.expanded : false}
227+
defaultExpanded={this.state.expanded}
218228
leftOffset={paddingLeft}
219229
selectionMode={selectionMode}
220230
activeItems={activeItems}
@@ -224,6 +234,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
224234
onRenderItem={onRenderItem}
225235
showCheckboxes={showCheckboxes}
226236
treeItemActionsDisplayMode={treeItemActionsDisplayMode}
237+
nodesToExpand={this.props.nodesToExpand}
227238
/>
228239
);
229240
});

‎src/controls/treeView/TreeView.tsx

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import * as telemetry from '../../common/telemetry';
1212
*/
1313
export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
1414

15+
private nodesToExpand: string[] = [];
1516
/**
1617
* Constructor method
1718
* @param props properties interface
@@ -22,13 +23,38 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
2223

2324
this.state = {
2425
loaded: true,
25-
defaultExpanded: this.props.defaultExpanded,
26+
defaultExpanded: props.defaultExpanded,
2627
activeItems: []
2728
};
2829

2930
// Bind control events
3031
this.handleTreeExpandCollapse = this.handleTreeExpandCollapse.bind(this);
3132
this.handleOnSelect = this.handleOnSelect.bind(this);
33+
34+
if (props.expandToSelected) {
35+
props.defaultSelectedKeys.forEach(element => {
36+
this.pathTo(props.items, element);
37+
});
38+
}
39+
}
40+
41+
42+
private pathTo = (array: ITreeItem[], target: string): string => {
43+
let result: string;
44+
array.some(({ key, children = [] }) => {
45+
if (key === target) {
46+
this.nodesToExpand.push(key);
47+
result = key;
48+
return true;
49+
}
50+
let temp = this.pathTo(children, target);
51+
if (temp) {
52+
this.nodesToExpand.push(key);
53+
result = key + '.' + temp;
54+
return true;
55+
}
56+
});
57+
return result;
3258
}
3359

3460
private getSelectedItems(treeItems: ITreeItem[], selectedKeys: string[], selectedChildren: boolean): ITreeItem[] {
@@ -84,7 +110,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
84110
* Unselects all child nodes of selected parent.
85111
*/
86112
private unSelectChildren(item, unselectArray: string[]): void {
87-
var tempItem: any = item;
113+
const tempItem: any = item;
88114

89115
if (tempItem.children) {
90116
tempItem.children.forEach(element => {
@@ -176,7 +202,8 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
176202
selectionMode,
177203
onRenderItem,
178204
showCheckboxes,
179-
treeItemActionsDisplayMode
205+
treeItemActionsDisplayMode,
206+
defaultExpanded
180207
} = this.props;
181208

182209
return (
@@ -187,14 +214,15 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
187214
treeItem={treeNodeItem}
188215
leftOffset={20}
189216
isFirstRender={true}
190-
defaultExpanded={true}
217+
defaultExpanded={defaultExpanded}
191218
selectionMode={selectionMode}
192219
activeItems={this.state.activeItems}
193220
parentCallbackExpandCollapse={this.handleTreeExpandCollapse}
194221
parentCallbackOnSelect={this.handleOnSelect}
195222
onRenderItem={onRenderItem}
196223
showCheckboxes={showCheckboxes}
197224
treeItemActionsDisplayMode={treeItemActionsDisplayMode}
225+
nodesToExpand={this.nodesToExpand}
198226
/>
199227
))
200228
}

‎src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,47 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
204204
{
205205
key: "8",
206206
label: "Parent 5"
207+
},
208+
{
209+
key: "9",
210+
label: "Parent 6"
211+
212+
},
213+
{
214+
key: "10",
215+
label: "Parent 7"
216+
},
217+
{
218+
key: "11",
219+
label: "Parent 8"
220+
}
221+
]
222+
},
223+
{
224+
key: "R3",
225+
label: "Root 3",
226+
children: [
227+
{
228+
key: "12",
229+
label: "Parent 9"
230+
},
231+
{
232+
key: "13",
233+
label: "Parent 10",
234+
children: [
235+
{
236+
key: "gc3",
237+
label: "Child of Parent 10"
238+
},
239+
]
240+
},
241+
{
242+
key: "14",
243+
label: "Parent 11"
244+
},
245+
{
246+
key: "15",
247+
label: "Parent 12"
207248
}
208249
]
209250
}
@@ -1071,11 +1112,12 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
10711112
selectionMode={TreeViewSelectionMode.Multiple}
10721113
showCheckboxes={true}
10731114
treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
1074-
defaultSelectedKeys={['R2', '6']}
1115+
defaultSelectedKeys={['gc1', 'gc3']}
10751116
onExpandCollapse={this.onExpandCollapseTree}
10761117
onSelect={this.onItemSelected}
1077-
// onRenderItem={this.renderCustomTreeItem}
1078-
/>
1118+
//expandToSelected={true}
1119+
// onRenderItem={this.renderCustomTreeItem}
1120+
/>
10791121

10801122
</div>
10811123

@@ -1114,7 +1156,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
11141156
);
11151157
}
11161158

1117-
private _getPage(page: number) {
1159+
private _getPage(page: number){
11181160
console.log('Page:', page);
11191161
}
1162+
1163+
// private _onFolderSelect = (folder: IFolder): void => {
1164+
// console.log('selected folder', folder);
1165+
// }
11201166
}

0 commit comments

Comments
 (0)