Added Theme support for Treeview control

docs/documentation/docs/controls/TreeView.md

@@ -42,7 +42,8 @@ import { TreeView, ITreeItem, TreeViewSelectionMode } from "@pnp/spfx-controls-r
     defaultExpandedChildren={true}
     onSelect={this.onTreeItemSelect}
     onExpandCollapse={this.onTreeItemExpandCollapse}
-    onRenderItem={this.renderCustomTreeItem} />
+    onRenderItem={this.renderCustomTreeItem}
+    theme={this.props.themeVariant} />
 ```
 
 - With the `onSelect` property you can capture the event of when the tree item in the TreeView has changed the selection:
@@ -102,6 +103,7 @@ The `TreeView` control can be configured with the following properties:
 | onRenderItem                   | function                   | no       | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection).     |
 | defaultExpandedChildren        | boolean                    | no       | Default expand / collapse behavior for the child nodes. By default this is set to true. |
 | defaultExpandedKeys | string[] | no      | Keys of items expanded by default. |
+| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. |
 
 Enum `TreeViewSelectionMode`
 

src/controls/treeView/ButtonTreeItemAction.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
-import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions';
+import * as React from 'react';
+import { IConcreteTreeItemActionProps, ITreeItemAction } from './ITreeItemActions';
 import styles from './TreeView.module.scss';
 
 /**
@@ -28,18 +28,6 @@ export default class ButtonTreeItemAction extends React.Component<IConcreteTreeI
     return { name, text, iconProps, btnTitle };
   }
 
-  /**
-   * Gets the action button styling
-   */
-  private getTreeItemActionButtonStyle = (treeItemAction: ITreeItemAction): React.CSSProperties => {
-    let result: React.CSSProperties = {
-      backgroundColor: "transparent",
-      height: "32px"
-    };
-
-    return result;
-  }
-
   /**
    * Check if there are action to immediatly invoke
    */
@@ -84,17 +72,18 @@ export default class ButtonTreeItemAction extends React.Component<IConcreteTreeI
               treeItemAction.hidden ? (
                 null
               ) : (
-                  <div>
-                    <CommandBarButton split={true}
-                      onClick={() => { this.onActionExecute(treeItemAction); }}
-                      iconProps={iconProps}
-                      text={text}
-                      title={btnTitle}
-                      name={name}
-                      key={treeItem.key}
-                      className={styles.actionButton} />
-                  </div>
-                )
+                <div>
+                  <CommandBarButton split={true}
+                    onClick={() => { this.onActionExecute(treeItemAction); }}
+                    iconProps={iconProps}
+                    text={text}
+                    title={btnTitle}
+                    name={name}
+                    key={treeItem.key}
+                    className={styles.actionButton}
+                    theme={this.props.theme} />
+                </div>
+              )
             );
           })
         }

src/controls/treeView/DropdownTreeItemAction.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
+import * as React from 'react';
 import { ITreeItem } from './ITreeItem';
-import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions';
+import { IConcreteTreeItemActionProps, ITreeItemAction } from './ITreeItemActions';
 import styles from './TreeView.module.scss';
 
 /**
@@ -47,20 +47,6 @@ export class DropdownTreeItemAction extends React.Component<IConcreteTreeItemAct
     return contextualMenuProps;
   }
 
-  /**
-   * Prepare treeItem action button style.
-   */
-  private getTreeItemActionActionButtonStyle = (): React.CSSProperties => {
-    let result: React.CSSProperties = {
-      backgroundColor: "transparent",
-      width: "14px",
-      display: "inline-flex",
-      padding: "0px"
-    };
-
-    return result;
-  }
-
   /**
    * Check if there are action to immediatly invoke
    */
@@ -97,6 +83,7 @@ export class DropdownTreeItemAction extends React.Component<IConcreteTreeItemAct
           className={styles.actionMore}
           title="More"
           ariaLabel="More"
+          theme={this.props.theme}
         />
       </div>
     );

src/controls/treeView/ITreeItemActions.ts

@@ -1,107 +1,116 @@
 import { ITreeItem } from './ITreeItem';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
+import { ITheme } from 'office-ui-fabric-react/lib/Styling';
 
 /**
  * Specifies the display mode of the tree item action.
  */
 export enum TreeItemActionsDisplayMode {
-    Buttons = 1,
-    ContextualMenu
+  Buttons = 1,
+  ContextualMenu
 }
 
 /**
  * Tree item actions.
  */
 export interface ITreeItemActions {
-    /**
-     * List of actions.
-     */
-    actions: ITreeItemAction[];
-    /**
-     * Display mode of the tree item actions.
-     */
-    treeItemActionsDisplayMode?: TreeItemActionsDisplayMode;
+  /**
+   * List of actions.
+   */
+  actions: ITreeItemAction[];
+  /**
+   * Display mode of the tree item actions.
+   */
+  treeItemActionsDisplayMode?: TreeItemActionsDisplayMode;
 }
 
 /**
  * TreeItemActionsControl properties interface
  */
 export interface ITreeItemActionsControlProps {
-    /**
-     * Current tree item.
-     */
-    treeItem: ITreeItem;
-    /**
-     * List of actions.
-     */
-    treeItemActions: ITreeItemActions;
-    /**
-     * Callback after execution of tree item action.
-     */
-    treeItemActionCallback: () => void;
+  /**
+   * Current tree item.
+   */
+  treeItem: ITreeItem;
+  /**
+   * List of actions.
+   */
+  treeItemActions: ITreeItemActions;
+  /**
+   * Callback after execution of tree item action.
+   */
+  treeItemActionCallback: () => void;
+  /**
+  * Set Fluent UI Theme.
+  * */
+  theme: ITheme;
 }
 
 /**
  * TreeItemActionsControl state interface
  */
 export interface ITreeItemActionsControlState {
-    /**
-     * Specifies the list of the available actions for the tree item.
-     */
-    availableActions: ITreeItemAction[];
-    /**
-     * TreeItemAction display mode.
-     */
-    displayMode: TreeItemActionsDisplayMode;
+  /**
+   * Specifies the list of the available actions for the tree item.
+   */
+  availableActions: ITreeItemAction[];
+  /**
+   * TreeItemAction display mode.
+   */
+  displayMode: TreeItemActionsDisplayMode;
 }
 
 /**
  * ConcreteTreeItemAction properties interface
  */
 export interface IConcreteTreeItemActionProps {
-    /**
-     * Specifies the list of the available actions for the tree item.
-     */
-    treeItemActions: ITreeItemAction[];
-    /**
-     * Current tree item
-     */
-    treeItem: ITreeItem;
+  /**
+   * Specifies the list of the available actions for the tree item.
+   */
+  treeItemActions: ITreeItemAction[];
+  /**
+   * Current tree item
+   */
+  treeItem: ITreeItem;
 
-    /**
-     * Method to be executed when action is fired.
-     */
-    treeItemActionCallback: () => void;
+  /**
+   * Method to be executed when action is fired.
+   */
+  treeItemActionCallback: () => void;
+  /**
+  * Set Fluent UI Theme.v
+  * */
+  theme: ITheme;
 }
 
 /**
  * Interface represents the possible action that could be execute on tree item level.
  */
 export interface ITreeItemAction {
-    /**
-     * Action ID
-     */
-    id: string;
-    /**
-     * Action title
-     */
-    title?: string;
-    /**
-     * Icon to be displayed for the action.
-     */
-    iconProps?: IIconProps;
-    /**
-     * Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering.
-     */
-    hidden?: boolean;
-    /**
-     * Specifies if you want to invoke the action on render
-     */
-    invokeActionOnRender?: boolean;
+  /**
+   * Action ID
+   */
+  id: string;
+  /**
+   * Action title
+   */
+  title?: string;
+  /**
+   * Icon to be displayed for the action.
+   */
+  iconProps?: IIconProps;
+  /**
+   * Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering.
+   */
+  hidden?: boolean;
+  /**
+   * Specifies if you want to invoke the action on render
+   */
+  invokeActionOnRender?: boolean;
 
-    /**
-     * Method to be executed when action is fired.
-     *  @param currentTreeItem
-     */
-    actionCallback: (currentTreeItem: ITreeItem) => void;
+  /**
+   * Method to be executed when action is fired.
+   *  @param currentTreeItem
+   */
+  actionCallback: (currentTreeItem: ITreeItem) => void;
 }

src/controls/treeView/ITreeViewProps.ts

@@ -1,3 +1,4 @@
+import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
 import { ITreeItem } from './ITreeItem';
 import { TreeItemActionsDisplayMode } from './ITreeItemActions';
 
@@ -43,10 +44,10 @@ export interface ITreeViewProps {
    * By default this is set to false.
    */
   selectChildrenIfParentSelected?: boolean;
-    /**
-   * Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect
-   * By default this is set to None.
-   */
+  /**
+  * Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect
+  * By default this is set to None.
+  */
   selectChildrenMode?: SelectChildrenMode;
   /**
   * Specifies if the checkboxes should be displayed for selection.
@@ -59,7 +60,7 @@ export interface ITreeViewProps {
   /**
    * Keys of items expanded by default
    */
-   defaultExpandedKeys?: string[];
+  defaultExpandedKeys?: string[];
   /**
    * Keys of items selected by default
    */
@@ -86,9 +87,14 @@ export interface ITreeViewProps {
    * @argument item The tree item.
    */
   onRenderItem?: (item: ITreeItem) => JSX.Element;
-   /**
-   * Default expand / collapse behavior for the child nodes.
-   * By default this is set to true.
-   */
+  /**
+  * Default expand / collapse behavior for the child nodes.
+  * By default this is set to true.
+  */
   defaultExpandedChildren?: boolean;
+  /**
+  * Set Fluent UI Theme.
+  * If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded.
+  */
+  theme?: IPartialTheme | ITheme;
 }