Merge branch 'master' of https://github.com/siddharth-vaghasia/sp-dev-fx-controls-react

Author: siddharth-vaghasia

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.
    */
@@ -169,7 +168,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
           }
         }}}>
           {
-           this.props.showCheckboxes && item.selectable == false && !item.children &&
+            this.props.showCheckboxes && item.selectable == false && !item.children &&
             <span className={styles.blankspace}>&nbsp;</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
@@ -962,10 +959,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 +990,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'
                 },