Skip to content

Commit 646cebc

Browse files
siddharth-vaghasiananddeepn
siddharth-vaghasia
and
nanddeepn
committed
Final touches and updated documentation
Co-Authored-By: Nanddeep Nachan <[email protected]>
1 parent f4c775f commit 646cebc

File tree

3 files changed

+48
-41
lines changed

3 files changed

+48
-41
lines changed

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

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -59,43 +59,6 @@ private onTreeItemExpandCollapse(item: ITreeItem, isExpanded: boolean) {
5959
}
6060
```
6161

62-
- Each tree item in the `treeitems` property is defined as `ITreeItem` as follows:
63-
64-
Interface `ITreeItem`
65-
66-
| Property | Type | Required | Description |
67-
|------------|-------------------|----------|------------------------------------------------------------------|
68-
| key | string | yes | The unique ID of the tree item. |
69-
| label | string | yes | Text displayed next to checkbox. |
70-
| subLabel | string | no | The sub label of the tree item. |
71-
| iconProps | IIconProps | no | Custom icon to be rendered before label. |
72-
| disabled | boolean | no | Specify if the tree item needs to be disabled. Default is false. |
73-
| selectable | boolean | no | Specify if the tree item can be selected. Default is true. |
74-
| data | any | no | Specify an additional data of the tree item. |
75-
| actions | ITreeItemAction[] | no | Specify list of actions for the tree item. |
76-
| children | ITreeItem[] | no | Specify list of child tree items. |
77-
78-
79-
Interface `ITreeItemAction`
80-
81-
Specifies the list of actions for the tree item.
82-
| Property | Type | Required | Description |
83-
|----------------------|--------------------------------------|----------|----------------------------------------------------------------------------------------------------------------------------|
84-
| id | string | yes | Unique id of the action. |
85-
| title | string | yes | Title of the action. |
86-
| iconProps | IIconProps | no | Name of the icon to be used to display action. |
87-
| hidden | boolean | no | Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering. |
88-
| invokeActionOnRender | boolean | no | Specifies if you want to invoke the action on render. |
89-
| actionCallback | (currentTreeItem: ITreeItem) => void | yes | Method to be executed when action is fired. |
90-
91-
Enum `TreeItemActionsDisplayMode`
92-
93-
Specifies the display mode of the tree item action.
94-
| Value |
95-
|----------------|
96-
| Buttons |
97-
| ContextualMenu |
98-
9962
## Custom Rendering
10063
You can fully customize how tree items are rendered by providing the onRenderItem callback function and returning whatever JSX.Element you want.
10164

@@ -143,6 +106,43 @@ Specifies the selection mode of tree item.
143106
| Multiple |
144107
| None |
145108

109+
Interface `ITreeItem`
110+
111+
Each tree item in the `treeitems` property is defined as `ITreeItem` as follows:
112+
113+
| Property | Type | Required | Description |
114+
|------------|-------------------|----------|------------------------------------------------------------------|
115+
| key | string | yes | The unique ID of the tree item. |
116+
| label | string | yes | Text displayed next to checkbox. |
117+
| subLabel | string | no | The sub label of the tree item. |
118+
| iconProps | IIconProps | no | Custom icon to be rendered before label. |
119+
| disabled | boolean | no | Specify if the tree item needs to be disabled. Default is false. |
120+
| selectable | boolean | no | Specify if the tree item can be selected. Default is true. |
121+
| data | any | no | Specify an additional data of the tree item. |
122+
| actions | ITreeItemAction[] | no | Specify list of actions for the tree item. |
123+
| children | ITreeItem[] | no | Specify list of child tree items. |
124+
125+
126+
Interface `ITreeItemAction`
127+
128+
Specifies the list of actions for the tree item.
129+
| Property | Type | Required | Description |
130+
|----------------------|--------------------------------------|----------|----------------------------------------------------------------------------------------------------------------------------|
131+
| id | string | yes | Unique id of the action. |
132+
| title | string | yes | Title of the action. |
133+
| iconProps | IIconProps | no | Name of the icon to be used to display action. |
134+
| hidden | boolean | no | Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering. |
135+
| invokeActionOnRender | boolean | no | Specifies if you want to invoke the action on render. |
136+
| actionCallback | (currentTreeItem: ITreeItem) => void | yes | Method to be executed when action is fired. |
137+
138+
Enum `TreeItemActionsDisplayMode`
139+
140+
Specifies the display mode of the tree item action.
141+
| Value |
142+
|----------------|
143+
| Buttons |
144+
| ContextualMenu |
145+
146146
## Example of array of tree items used to render control as in 2nd screenshot
147147

148148
```typescript
@@ -237,4 +237,10 @@ items: [
237237
}
238238
]
239239
```
240+
IconpProps in above example can be declared as below
241+
242+
```typescript
243+
private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' };
244+
```
245+
240246

‎src/controls/treeView/TreeView.module.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
cursor: pointer;
2525
display: flex;
2626
align-items: flex-start;
27+
width: 100%;
2728
padding: 4px;
2829

2930
&.disabled {
@@ -44,8 +45,6 @@
4445

4546
&.checked {
4647
background-color: '[theme:listItemBackgroundChecked, default:#eaeaea]';
47-
font-weight: bold;
48-
border-radius: 2px;
4948
}
5049
}
5150

@@ -97,11 +96,12 @@
9796
}
9897

9998
.tree {
99+
100100
label > span {
101101
padding-left: 0px;
102102
}
103103
.blankspace {
104104
padding-left: 35px;
105105
}
106106
}
107-
}
107+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -943,7 +943,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
943943
defaultSelectedKeys={['R2', '6']}
944944
onExpandCollapse={this.onExpandCollapseTree}
945945
onSelect={this.onItemSelected}
946-
onRenderItem={this.renderCustomTreeItem} />
946+
// onRenderItem={this.renderCustomTreeItem}
947+
/>
947948
</div>
948949
</div>
949950
);

0 commit comments

Comments
 (0)