Skip to content

Commit a962971

Browse files
AJIXuMuKAJIXuMuK
committed
small changes for code readability
1 parent 85ebd9b commit a962971

File tree

5 files changed

+46
-50
lines changed

5 files changed

+46
-50
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,12 @@ The `TreeView` control can be configured with the following properties:
8989
|--------------------------------|----------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------|
9090
| 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). |
9191
| defaultExpanded | boolean | no | Specify if the tree items are displayed as expanded by default (defaults to false). |
92-
| selectionMode | enum | no | Specify the selection mode of tree view (defaults to Single selection). |
93-
| 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). |
9494
| showCheckboxes | boolean | yes | Specify if the checkboxes should be displayed for selection. |
95-
| treeItemActionsDisplayMode | TreeItemActionsDisplayMode | no | Specify the display mode of the tree item actions. |
96-
| defaultSelectedKeys | string[] | no | Specify keys of items to be selected by default. |
97-
| expandToSelected | boolean | no | Specify if you want expand the parent nodes to see defaultSelectedKeys on render. |
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. |
9898
| onExpandCollapse | function | no | Defines a onExpandCollapse function to raise when the tree item has expanded or collapsed. |
9999
| onSelect | function | no | Captures the event of when the tree item selection has changed. |
100100
| 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: 7 additions & 7 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,10 +46,10 @@ export interface ITreeViewProps {
4646
*/
4747
defaultSelectedKeys?: string[];
4848

49-
/**
50-
* Specify if you want expand the parent nodes to see defaultSelectedKeys on render.
51-
*/
52-
expandToSelected?:boolean;
49+
/**
50+
* Specifies if the tree view is expanded to display selected nodes.
51+
*/
52+
expandToSelected?: boolean;
5353

5454
/**
5555
* Callback function called after a item is expanded / collapsed.

‎src/controls/treeView/TreeItem.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export interface ITreeItemProps {
6060
*/
6161
onRenderItem?: (item: ITreeItem) => JSX.Element;
6262

63-
tobeExpandedParents:any[];
63+
nodesToExpand: any[];
6464
}
6565

6666

@@ -99,18 +99,17 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
9999
super(props);
100100

101101
// Check if current item is selected
102-
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);
103103

104-
var expanded = this.props.defaultExpanded;
105-
if(this.props.tobeExpandedParents.indexOf(this.props.treeItem.key) != -1)
106-
{
107-
expanded = true;
104+
let expanded = props.defaultExpanded;
105+
if (props.nodesToExpand.indexOf(props.treeItem.key) != -1) {
106+
expanded = true;
108107
}
109108

110109
this.state = {
111110
selected: active.length > 0,
112111
// expanded: this.props.defaultExpanded
113-
expanded: expanded
112+
expanded: expanded
114113
};
115114

116115
// Bind control events
@@ -145,7 +144,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
145144
* @param nextProps
146145
* @param nextContext
147146
*/
148-
public componentWillReceiveProps?(nextProps: ITreeItemProps, nextContext: any): void {
147+
public componentWillReceiveProps(nextProps: ITreeItemProps): void {
149148
// If selection is turned on, set the item as selected
150149
if (this.props.selectionMode != TreeViewSelectionMode.None) {
151150
let active = nextProps.activeItems.filter(item => item.key === this.props.treeItem.key);
@@ -182,7 +181,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
182181
this.props.showCheckboxes && item.selectable == false && !item.children &&
183182
<span className={styles.blankspace}>&nbsp;</span>
184183
}
185-
184+
186185
{
187186
// Rendering when item has iconProps
188187
item.iconProps &&
@@ -235,7 +234,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
235234
onRenderItem={onRenderItem}
236235
showCheckboxes={showCheckboxes}
237236
treeItemActionsDisplayMode={treeItemActionsDisplayMode}
238-
tobeExpandedParents = {this.props.tobeExpandedParents}
237+
nodesToExpand={this.props.nodesToExpand}
239238
/>
240239
);
241240
});

‎src/controls/treeView/TreeView.tsx

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

15-
private tobeExpandedParents = [];
15+
private nodesToExpand: string[] = [];
1616
/**
1717
* Constructor method
1818
* @param props properties interface
@@ -23,42 +23,39 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
2323

2424
this.state = {
2525
loaded: true,
26-
defaultExpanded: this.props.defaultExpanded,
26+
defaultExpanded: props.defaultExpanded,
2727
activeItems: []
2828
};
2929

3030
// Bind control events
3131
this.handleTreeExpandCollapse = this.handleTreeExpandCollapse.bind(this);
3232
this.handleOnSelect = this.handleOnSelect.bind(this);
3333

34-
if(this.props.expandToSelected){
35-
this.props.defaultSelectedKeys.forEach(element => {
36-
this.pathTo(this.props.items, element)
37-
});
38-
console.log("tobeExpandedParents",this.tobeExpandedParents);
34+
if (props.expandToSelected) {
35+
props.defaultSelectedKeys.forEach(element => {
36+
this.pathTo(props.items, element);
37+
});
3938
}
40-
41-
4239
}
4340

4441

45-
private pathTo = (array, target) => {
46-
var result;
42+
private pathTo = (array: ITreeItem[], target: string): string => {
43+
let result: string;
4744
array.some(({ key, children = [] }) => {
48-
if (key === target)
49-
{
50-
this.tobeExpandedParents.push(key);
51-
return result = key;
52-
}
53-
var temp = this.pathTo(children, target)
54-
if (temp)
55-
{
56-
this.tobeExpandedParents.push(key);
57-
return result = key + '.' + temp;
58-
}
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+
}
5956
});
6057
return result;
61-
};
58+
}
6259

6360
private getSelectedItems(treeItems: ITreeItem[], selectedKeys: string[], selectedChildren: boolean): ITreeItem[] {
6461
let selectedItems: ITreeItem[] = [];
@@ -113,7 +110,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
113110
* Unselects all child nodes of selected parent.
114111
*/
115112
private unSelectChildren(item, unselectArray: string[]): void {
116-
var tempItem: any = item;
113+
const tempItem: any = item;
117114

118115
if (tempItem.children) {
119116
tempItem.children.forEach(element => {
@@ -225,7 +222,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
225222
onRenderItem={onRenderItem}
226223
showCheckboxes={showCheckboxes}
227224
treeItemActionsDisplayMode={treeItemActionsDisplayMode}
228-
tobeExpandedParents = {this.tobeExpandedParents}
225+
nodesToExpand={this.nodesToExpand}
229226
/>
230227
))
231228
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
208208
{
209209
key: "9",
210210
label: "Parent 6"
211-
211+
212212
},
213213
{
214214
key: "10",
@@ -1115,10 +1115,10 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
11151115
defaultSelectedKeys={['gc1', 'gc3']}
11161116
onExpandCollapse={this.onExpandCollapseTree}
11171117
onSelect={this.onItemSelected}
1118-
expandToSelected={true}
1118+
//expandToSelected={true}
11191119
// onRenderItem={this.renderCustomTreeItem}
11201120
/>
1121-
1121+
11221122
</div>
11231123

11241124
<div>

0 commit comments

Comments
 (0)