Implemented IconProps and code formatting

Author: nanddeepn

src/controls/treeView/DropdownTreeItemAction.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { IconButton, IIconProps } from 'office-ui-fabric-react';
-
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { ITreeItem } from './ITreeItem';
 import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions';
 import styles from './TreeView.module.scss';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
 /**
  * Renders the controls for Dropdown TreeItem action component
@@ -93,7 +91,7 @@ export class DropdownTreeItemAction extends React.Component<IConcreteTreeItemAct
 
     return (
       <div>
-        <DefaultButton
+        <IconButton
           menuProps={contextualMenuProps}
           menuIconProps={{ iconName: 'MoreVertical' }}
           className={styles.actionMore}

src/controls/treeView/ITreeViewProps.ts

@@ -28,23 +28,19 @@ export interface ITreeViewProps {
    * By default this is set to Single.
    */
   selectionMode?: TreeViewSelectionMode;
-
   /**
    * Specify if the childrens should be selected when parent is selected.
    * By default this is set to false.
    */
   selectChildrenIfParentSelected?: boolean;
-
   /**
   * Specify if the checkboxes should be displayed for selection.
   */
   showCheckboxes?: boolean;
-
   /**
    * Display mode of the tree item actions.
    */
   treeItemActionsDisplayMode?: TreeItemActionsDisplayMode;
-
   /**
    * Keys of items selected by default
    */
@@ -56,13 +52,11 @@ export interface ITreeViewProps {
    * @argument isExpanded The status of item (expanded / collapsed).
    */
   onExpandCollapse?: (item: ITreeItem, isExpanded: boolean) => void;
-
   /**
    * Callback function called after an item is selected.
    * @argument items The selected items.
    */
   onSelect?: (items: ITreeItem[]) => void;
-
   /**
    * Customize how items are rendered.
    * @argument item The tree item.

src/controls/treeView/TreeItem.tsx

@@ -42,7 +42,6 @@ export interface ITreeItemProps {
    * Stores the selected tree items
    */
   activeItems: ITreeItem[];
-
   /**
    * Display mode of the tree item actions.
    */
@@ -160,27 +159,27 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
         // Default rendering of tree item
         <span>
           {
-           this.props.showCheckboxes && item.selectable == false && !item.children &&
+            this.props.showCheckboxes && item.selectable == false && !item.children &&
             <span className={styles.blankspace}>&nbsp;</span>
           }
           {
             // Rendering when item has iconProps
             item.iconProps &&
-         <span>
+            <span>
               <Icon className={styles.icon} iconName={item.iconProps.iconName} style={item.iconProps.style} />
               &nbsp;
               </span>
           }
           <div
             className={styles.labels}
             onClick={(e) => {
-              debugger;
               if (this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {
-              e.stopPropagation();
-              if (!item.disabled) {
-                this._itemSelected(e, !this.state.selected);
+                e.stopPropagation();
+                if (!item.disabled) {
+                  this._itemSelected(e, !this.state.selected);
+                }
               }
-            }}}>
+            }}>
             <span>{item.label}</span>
             {
               // Render sublabel
@@ -190,7 +189,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
               </div>
             }
           </div>
-      </span>
+        </span>
       );
     }
   }
@@ -283,11 +282,12 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
             style={contentStyles}
             onClick={(e) => {
               if (this.props.selectionMode != TreeViewSelectionMode.None && treeItem.selectable != false) {
-              e.stopPropagation();
-              if (!treeItem.disabled && e.currentTarget === e.target) {
-                this._itemSelected(e, !this.state.selected);
+                e.stopPropagation();
+                if (!treeItem.disabled && e.currentTarget === e.target) {
+                  this._itemSelected(e, !this.state.selected);
+                }
               }
-            }}}
+            }}
           >
             {
               // Render checkbox (if item is selectable, Selection mode is not None, and showCheckboxes property is set to true)
@@ -325,7 +325,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
               : null
           }
         </div>
-     </div>
+      </div>
     );
   }
 }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -37,11 +37,8 @@ import { Carousel, CarouselButtonsLocation, CarouselButtonsDisplay } from '../..
 import { TimeDisplayControlType } from '../../../controls/dateTimePicker/TimeDisplayControlType';
 import { GridLayout } from '../../../GridLayout';
 import { ComboBoxListItemPicker } from '../../../';
-import {TreeView,ITreeItem,TreeItemActionsDisplayMode,TreeViewSelectionMode} from '../../../controls/treeView';
-//import { ITreeItem } from '../../../controls/treeView/ITreeItem';
+import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from '../../../controls/treeView';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
-
-
 import { ISize } from 'office-ui-fabric-react/lib/Utilities';
 
 // Used to render document cards
@@ -937,19 +934,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         </div>
 
         <div>
-          Demo of Tree View
-              <TreeView items={this.treeitems} 
-              defaultExpanded={false} 
-              selectionMode={TreeViewSelectionMode.Multiple} 
-              showCheckboxes={false}
-              treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
-              defaultSelectedKeys={['R2', '6']}
-              onExpandCollapse={this.onExpandCollapseTree}
-              onSelect={this.onItemSelected}
-              >
-
-              </TreeView>
-          </div>
+          <h3>TreeView:</h3>
+          <TreeView items={this.treeitems}
+            defaultExpanded={false}
+            selectionMode={TreeViewSelectionMode.Multiple}
+            showCheckboxes={false}
+            treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
+            defaultSelectedKeys={['R2', '6']}
+            onExpandCollapse={this.onExpandCollapseTree}
+            onSelect={this.onItemSelected}>
+          </TreeView>
+        </div>
       </div>
     );
   }
@@ -962,10 +957,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     console.log("items selected: " + items.length);
   }
 
-
-
   private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' };
-  private treeitems =  [
+  private treeitems = [
     {
       key: "R1",
       label: "Root",
@@ -995,7 +988,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               label: "Child 1",
               subLabel: "This is a sub label for node",
               actions: [{
-                title:"Share",
+                title: "Share",
                 iconProps: {
                   iconName: 'Share'
                 },