make onShouldVirtualize work for grouped list

common/changes/@uifabric/utilities/zhiliu-groupingOp_2018-02-19-19-18.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "fix bug in IE that IE does not support Number.IsInteger",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "zhiliu@microsoft.com"
+}

common/changes/office-ui-fabric-react/zhiliu-groupingOp_2018-02-19-19-18.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "make onShouldVirtualize work for grouped list",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "zhiliu@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx

@@ -152,7 +152,8 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
       onRenderCell,
       selectionMode,
       selection,
-      viewport
+      viewport,
+      onShouldVirtualize
     } = this.props;
 
     // override group header/footer props as needed
@@ -194,6 +195,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
         selection={ selection }
         showAllProps={ showAllProps }
         viewport={ viewport }
+        onShouldVirtualize={ onShouldVirtualize }
       />
     );
   }

packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx

@@ -36,6 +36,8 @@ import {
 import { assign, css } from '../../Utilities';
 import { IViewport } from '../../utilities/decorators/withViewport';
 import * as stylesImport from './GroupedList.scss';
+import { IList, IListProps } from '../List/index';
+
 const styles: any = stylesImport;
 
 export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
@@ -104,6 +106,14 @@ export interface IGroupedListSectionProps extends React.Props<GroupedListSection
 
   /** Override for rendering the group footer. */
   onRenderGroupFooter?: IRenderFunction<IGroupDividerProps>;
+
+  /**
+   * Optional callback to determine whether the list should be rendered in full, or virtualized.
+   * Virtualization will add and remove pages of items as the user scrolls them into the visible range.
+   * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists.
+   * The default implementation will virtualize when this callback is not provided.
+   */
+  onShouldVirtualize?: (props: IListProps) => boolean;
 }
 
 export interface IGroupedListSectionState {
@@ -182,7 +192,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       selectionMode,
       onRenderGroupHeader = this._onRenderGroupHeader,
       onRenderGroupShowAll = this._onRenderGroupShowAll,
-      onRenderGroupFooter = this._onRenderGroupFooter
+      onRenderGroupFooter = this._onRenderGroupFooter,
+      onShouldVirtualize
     } = this.props;
     let { isSelected } = this.state;
     let renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
@@ -220,6 +231,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
                     items={ group!.children }
                     onRenderCell={ this._renderSubGroup }
                     getItemCountForPage={ this._returnOne }
+                    onShouldVirtualize={ onShouldVirtualize }
                   />
                 ) :
                 this._onRenderGroup(renderCount)
@@ -303,7 +315,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       items,
       onRenderCell,
       listProps,
-      groupNestingDepth
+      groupNestingDepth,
+      onShouldVirtualize
     } = this.props;
     let count = group ? group.count : items.length;
     let startIndex = group ? group.startIndex : 0;
@@ -315,6 +328,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
         ref={ 'list' }
         renderCount={ Math.min(count, renderCount) }
         startIndex={ startIndex }
+        onShouldVirtualize={ onShouldVirtualize }
         { ...listProps }
       />
     );
@@ -339,7 +353,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       viewport,
       onRenderGroupHeader,
       onRenderGroupShowAll,
-      onRenderGroupFooter
+      onRenderGroupFooter,
+      onShouldVirtualize
     } = this.props;
 
     return (!subGroup || subGroup.count > 0) ? (
@@ -365,6 +380,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
         onRenderGroupHeader={ onRenderGroupHeader }
         onRenderGroupShowAll={ onRenderGroupShowAll }
         onRenderGroupFooter={ onRenderGroupFooter }
+        onShouldVirtualize={ onShouldVirtualize }
       />
     ) : null;
   }

packages/utilities/src/FabricPerformance.ts

@@ -50,7 +50,7 @@ export class FabricPerformance {
    * @param func - The logic to be measured for execution time
    */
   public static measure(name: string, func: () => void): void {
-    if (Number.isInteger(FabricPerformance._timeoutId)) {
+    if (FabricPerformance._timeoutId) {
       FabricPerformance.setPeriodicReset();
     }
     const start = now();