Add card dgl functionality

common/changes/@uifabric/dashboard/addCardDGLFunctionality_2018-12-03-01-02.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/dashboard",
+      "comment": "Using _async fabric utility functions to prevent timeout leaks",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/dashboard",
+  "email": "[email protected]"
+}

packages/dashboard/src/components/DashboardGridLayout/AddCardPanel/AddCardPanel.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
-import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { classNamesFunction, BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 
 import { AddCard } from './AddCard/AddCard';
 import { getStyles } from './AddCardPanel.styles';
 import { IAddCardPanelProps, IAddCardPanelState, IAddCardPanelStyles } from './AddCardPanel.types';
 import { IDGLCard } from '../../../index';
 
-export class AddCardPanel extends React.Component<IAddCardPanelProps, IAddCardPanelState> {
+export class AddCardPanel extends BaseComponent<IAddCardPanelProps, IAddCardPanelState> {
   constructor(props: IAddCardPanelProps) {
     super(props);
     this.state = {
-      isOpen: false,
       flyoutStyle: {}
     };
   }
@@ -36,7 +35,9 @@ export class AddCardPanel extends React.Component<IAddCardPanelProps, IAddCardPa
   }
 
   private _onDismiss = () => {
-    this.setState({ isOpen: false });
+    if (this.props.onDismiss) {
+      this.props.onDismiss();
+    }
   };
 
   private _renderAddCardItems = (addCardItems: IDGLCard[], header: string): JSX.Element => {
@@ -87,7 +88,7 @@ export class AddCardPanel extends React.Component<IAddCardPanelProps, IAddCardPa
       }
     });
     // the time for which the add card panel stays half hidden after successfully adding a card
-    setTimeout(() => {
+    this._async.setTimeout(() => {
       this.setState({ flyoutStyle: {} });
     }, 1000);
   };

packages/dashboard/src/components/DashboardGridLayout/AddCardPanel/AddCardPanel.types.ts

@@ -1,7 +1,8 @@
 import { IStyle } from 'office-ui-fabric-react/lib/Styling';
+import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
 import { IDGLCard } from '../../../index';
 
-export interface IAddCardPanelProps {
+export interface IAddCardPanelProps extends IBaseProps {
   /**
    * The title for the add card panel
    */
@@ -21,14 +22,14 @@ export interface IAddCardPanelProps {
    * The callback method to switch between add card panel and the dashboard grid layout
    */
   moveCardFromAddCardPanelToDashboard?: (cardId: string) => void;
-}
 
-export interface IAddCardPanelState {
   /**
-   * The callback method to switch between add card panel and the dashboard grid layout
+   * The callback method called upon add card panel dimiss
    */
-  isOpen: boolean;
+  onDismiss?: () => void;
+}
 
+export interface IAddCardPanelState {
   /**
    * The styles(half closing of panel) applied to the flyout after successfully adding a card
    */

packages/dashboard/src/components/DashboardGridLayout/DashboardGridLayoutWithAddCardPanel/DashboardGridLayoutWithAddCardPanel.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Layout } from 'react-grid-layout';
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import {
   IDashboardGridLayoutWithAddCardPanelProps,
   IDashboardGridLayoutWithAddCardPanelState
@@ -15,7 +16,7 @@ import {
 } from '../../../index';
 import { getCardStyles, getClassNames } from './DashboardGridLayoutWithAddCardPanel.styles';
 
-export class DashboardGridLayoutWithAddCardPanel extends React.Component<
+export class DashboardGridLayoutWithAddCardPanel extends BaseComponent<
   IDashboardGridLayoutWithAddCardPanelProps,
   IDashboardGridLayoutWithAddCardPanelState
 > {
@@ -71,6 +72,7 @@ export class DashboardGridLayoutWithAddCardPanel extends React.Component<
           isOpen={isOpen}
           cards={this.state.cardsForAddCardPanel}
           moveCardFromAddCardPanelToDashboard={this._addCard}
+          onDismiss={this._onPanelDismiss}
         />
         <DashboardGridSectionLayout
           isDraggable={isDraggable}
@@ -83,6 +85,12 @@ export class DashboardGridLayoutWithAddCardPanel extends React.Component<
     );
   }
 
+  private _onPanelDismiss = () => {
+    if (this.props.onPanelDismiss) {
+      this.props.onPanelDismiss();
+    }
+  };
+
   private _onLayoutChange = (currentLayout: Layout[]): void => {
     const newLayout: DashboardGridBreakpointLayouts = { lg: [] };
     currentLayout.map((individualItemLayout: Layout) => {
@@ -144,7 +152,7 @@ export class DashboardGridLayoutWithAddCardPanel extends React.Component<
         layout: layout
       });
       // scroll to the card that was added to the layout
-      setTimeout(() => {
+      this._async.setTimeout(() => {
         if (document.getElementById(cardId + 'dglCard')) {
           document.getElementById(cardId + 'dglCard')!.scrollIntoView({ behavior: 'smooth' });
           const css = getClassNames(getCardStyles!);

packages/dashboard/src/components/DashboardGridLayout/DashboardGridLayoutWithAddCardPanel/DashboardGridLayoutWithAddCardPanel.types.ts

@@ -1,7 +1,8 @@
+import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
 import { DashboardGridBreakpointLayouts } from '../DashboardGridLayout.types';
 import { IDGLCard, ISection } from '../../../index';
 
-export interface IDashboardGridLayoutWithAddCardPanelProps {
+export interface IDashboardGridLayoutWithAddCardPanelProps extends IBaseProps {
   /**
    * prop to open the add card panel
    */
@@ -37,6 +38,11 @@ export interface IDashboardGridLayoutWithAddCardPanelProps {
    * The callback being called each time after a layout change
    */
   onLayoutChange?: (newLayout: DashboardGridBreakpointLayouts) => void;
+
+  /**
+   * The callback method fired when the add card panel is dismissed
+   */
+  onPanelDismiss?: () => void;
 }
 
 export interface IDashboardGridLayoutWithAddCardPanelState {