Refactor out remaining BaseComponent inheritance across List componen…

…ts (microsoft#9810)

* Remove BaseComponent from ShimmeredDetailsList

* GroupedListSection: Prefer React.Component over BaseComponent

* Refactor out BaseComponent from Tile

* Refactor out BaseComponent from GroupedListSection

* Remove BaseComponent from List

* Extend React.Component instead of BaseComponent for DetailsList.Grouped.Example

* Change files

* Update API

* Prefer on event helper over EventGroup where applicable

* Properly dispose of EventGroup

* Properly dispose of Async

* Current List logic reqires EventGroup

* Initialize focus rects in top-level components where BaseComponent inheritance has been removed

* Update API

* Consolidate imports

* Consolidate import

change/@uifabric-experiments-2019-07-15-12-05-31-keco-remove-more-basecomponent.json

@@ -0,0 +1,8 @@
+{
+  "comment": "Refactor out BaseComponent from Tile",
+  "type": "minor",
+  "packageName": "@uifabric/experiments",
+  "email": "706967+KevinTCoughlin@users.noreply.github.com",
+  "commit": "ad4bc7b67d858e082b281482f419848aad120abe",
+  "date": "2019-07-15T19:05:11.320Z"
+}

change/office-ui-fabric-react-2019-07-15-12-05-31-keco-remove-more-basecomponent.json

@@ -0,0 +1,8 @@
+{
+  "comment": "Refactor out BaseComponent from List components",
+  "type": "minor",
+  "packageName": "office-ui-fabric-react",
+  "email": "706967+KevinTCoughlin@users.noreply.github.com",
+  "commit": "ad4bc7b67d858e082b281482f419848aad120abe",
+  "date": "2019-07-15T19:05:30.983Z"
+}

packages/experiments/src/components/Tile/Tile.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ITileProps, TileSize } from './Tile.types';
 import { Check } from 'office-ui-fabric-react/lib/Check';
 import { SELECTION_CHANGE } from 'office-ui-fabric-react/lib/Selection';
-import { ISize, css, BaseComponent, getId, getNativeProps, divProperties } from '../../Utilities';
+import { ISize, css, initializeComponentRef, getId, getNativeProps, divProperties, EventGroup } from '../../Utilities';
 import * as TileStylesModule from './Tile.scss';
 import * as SignalStylesModule from '../signals/Signal.scss';
 import * as CheckStylesModule from 'office-ui-fabric-react/lib/components/Check/Check.scss';
@@ -62,16 +62,19 @@ export const TileLayoutSizes: {
  * @class Tile
  * @extends {React.Component<ITileProps, ITileState>}
  */
-export class Tile extends BaseComponent<ITileProps, ITileState> {
+export class Tile extends React.Component<ITileProps, ITileState> {
   private _nameId: string;
   private _activityId: string;
   private _labelId: string;
   private _descriptionId: string;
+  private _events: EventGroup;
 
   // tslint:disable-next-line:no-any
   constructor(props: ITileProps, context: any) {
     super(props, context);
 
+    initializeComponentRef(this);
+
     this._nameId = getId('Tile-name');
     this._activityId = getId('Tile-activity');
     this._labelId = getId('Tile-label');
@@ -86,6 +89,8 @@ export class Tile extends BaseComponent<ITileProps, ITileState> {
       isSelected: isSelected,
       isModal: isModal
     };
+
+    this._events = new EventGroup(this);
   }
 
   public componentWillReceiveProps(nextProps: ITileProps): void {
@@ -128,6 +133,10 @@ export class Tile extends BaseComponent<ITileProps, ITileState> {
     }
   }
 
+  public componentWillUnmount(): void {
+    this._events.dispose();
+  }
+
   public render(): JSX.Element {
     const {
       children,

packages/experiments/src/components/TilesList/TilesList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ITilesListProps, ITilesGridItem, ITilesGridSegment, TilesGridMode, ITileSize } from './TilesList.types';
 import { List, IPageProps, ScrollToMode } from 'office-ui-fabric-react/lib/List';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
-import { css, IRenderFunction, IRectangle } from 'office-ui-fabric-react/lib/Utilities';
+import { css, IRenderFunction, IRectangle, initializeFocusRects } from 'office-ui-fabric-react/lib/Utilities';
 import * as TilesListStylesModule from './TilesList.scss';
 import { Shimmer } from 'office-ui-fabric-react/lib/Shimmer';
 
@@ -90,6 +90,8 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
     this.state = {
       cells: this._getCells(props.items)
     };
+
+    initializeFocusRects();
   }
 
   public componentWillReceiveProps(nextProps: ITilesListProps<TItem>): void {

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -7843,13 +7843,15 @@ export class LinkBase extends BaseComponent<ILinkProps, any> implements ILink {
 }
 
 // @public
-export class List<T = any> extends BaseComponent<IListProps<T>, IListState<T>> implements IList {
+export class List<T = any> extends React.Component<IListProps<T>, IListState<T>> implements IList {
     constructor(props: IListProps<T>);
     // (undocumented)
     componentDidMount(): void;
     // (undocumented)
     componentWillReceiveProps(newProps: IListProps<T>): void;
     // (undocumented)
+    componentWillUnmount(): void;
+    // (undocumented)
     static defaultProps: {
         startIndex: number;
         onRenderCell: (item: any, index: number, containsFocus: boolean) => JSX.Element;
@@ -8701,7 +8703,7 @@ export class ShimmerCircleBase extends BaseComponent<IShimmerCircleProps, {}> {
 export const ShimmeredDetailsList: React.StatelessComponent<IShimmeredDetailsListProps>;
 
 // @public (undocumented)
-export class ShimmeredDetailsListBase extends BaseComponent<IShimmeredDetailsListProps, {}> {
+export class ShimmeredDetailsListBase extends React.Component<IShimmeredDetailsListProps, {}> {
     constructor(props: IShimmeredDetailsListProps);
     // (undocumented)
     render(): JSX.Element;

packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { BaseComponent, classNamesFunction, css } from '../../Utilities';
+import { initializeComponentRef, classNamesFunction, css } from '../../Utilities';
 import { IProcessedStyleSet } from '../../Styling';
 import { SelectionMode } from '../../utilities/selection/interfaces';
 import { DetailsList } from './DetailsList';
@@ -17,13 +17,15 @@ const SHIMMER_INITIAL_ITEMS = 10;
 const DEFAULT_SHIMMER_HEIGHT = 7;
 const SHIMMER_LINE_VS_CELL_WIDTH_RATIO = 0.95;
 
-export class ShimmeredDetailsListBase extends BaseComponent<IShimmeredDetailsListProps, {}> {
+export class ShimmeredDetailsListBase extends React.Component<IShimmeredDetailsListProps, {}> {
   private _shimmerItems: null[];
   private _classNames: IProcessedStyleSet<IShimmeredDetailsListStyles>;
 
   constructor(props: IShimmeredDetailsListProps) {
     super(props);
 
+    initializeComponentRef(this);
+
     this._shimmerItems = props.shimmerLines ? new Array(props.shimmerLines) : new Array(SHIMMER_INITIAL_ITEMS);
   }
 

packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  BaseComponent,
   DefaultButton,
   DetailsHeader,
   DetailsList,
@@ -38,7 +37,7 @@ export interface IDetailsListGroupedExampleState {
 }
 const _blueGroupIndex = 2;
 
-export class DetailsListGroupedExample extends BaseComponent<{}, IDetailsListGroupedExampleState> {
+export class DetailsListGroupedExample extends React.Component<{}, IDetailsListGroupedExampleState> {
   private _root = React.createRef<IDetailsList>();
   private _columns: IColumn[];
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { initializeComponentRef, classNamesFunction, IClassNames } from '../../Utilities';
+import { initializeComponentRef, classNamesFunction, IClassNames, initializeFocusRects } from '../../Utilities';
 import { IGroupedList, IGroupedListProps, IGroup, IGroupedListStyleProps, IGroupedListStyles } from './GroupedList.types';
 import { GroupedListSection } from './GroupedListSection';
 import { List, ScrollToMode, IListProps } from '../../List';
@@ -40,6 +40,7 @@ export class GroupedListBase extends React.Component<IGroupedListProps, IGrouped
     super(props);
 
     initializeComponentRef(this);
+    initializeFocusRects();
 
     this._isSomeGroupExpanded = this._computeIsSomeGroupExpanded(props.groups);
 

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

@@ -6,7 +6,7 @@ import { IGroupShowAllProps } from './GroupShowAll.types';
 
 import { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../utilities/dragdrop/index';
 
-import { BaseComponent, IRenderFunction, IDisposable, IClassNames } from '../../Utilities';
+import { initializeComponentRef, IRenderFunction, IDisposable, IClassNames, css, getId, EventGroup } from '../../Utilities';
 
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/index';
 
@@ -16,7 +16,6 @@ import { GroupFooter } from './GroupFooter';
 
 import { List } from '../../List';
 import { IDragDropOptions } from './../../utilities/dragdrop/interfaces';
-import { css, getId } from '../../Utilities';
 import { IViewport } from '../../utilities/decorators/withViewport';
 import { IListProps } from '../List/index';
 
@@ -111,10 +110,11 @@ export interface IGroupedListSectionState {
 
 const DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
 
-export class GroupedListSection extends BaseComponent<IGroupedListSectionProps, IGroupedListSectionState> {
+export class GroupedListSection extends React.Component<IGroupedListSectionProps, IGroupedListSectionState> {
   private _root = React.createRef<HTMLDivElement>();
   private _list = React.createRef<List>();
   private _id: string;
+  private _events: EventGroup;
 
   private _dragDropSubscription: IDisposable;
 
@@ -123,12 +123,16 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
 
     const { selection, group } = props;
 
+    initializeComponentRef(this);
+
     this._id = getId('GroupedListSection');
 
     this.state = {
       isDropping: false,
       isSelected: selection && group ? selection.isRangeSelected(group.startIndex, group.count) : false
     };
+
+    this._events = new EventGroup(this);
   }
 
   public componentDidMount(): void {
@@ -144,6 +148,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   }
 
   public componentWillUnmount() {
+    this._events.dispose();
+
     if (this._dragDropSubscription) {
       this._dragDropSubscription.dispose();
     }

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

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import {
-  BaseComponent,
+  initializeComponentRef,
+  Async,
   IRectangle,
   css,
   findIndex,
   findScrollableParent,
   getParent,
   divProperties,
   getNativeProps,
-  IRenderFunction
+  IRenderFunction,
+  EventGroup
 } from '../../Utilities';
 import { IList, IListProps, IPage, IPageProps, ScrollToMode } from './List.types';
 
@@ -79,7 +81,7 @@ const _measureScrollRect = _measurePageRect;
  * or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion
  * number, which we associate with cached measurements and use to determine if a remeasure should occur.
  */
-export class List<T = any> extends BaseComponent<IListProps<T>, IListState<T>> implements IList {
+export class List<T = any> extends React.Component<IListProps<T>, IListState<T>> implements IList {
   public static defaultProps = {
     startIndex: 0,
     onRenderCell: (item: any, index: number, containsFocus: boolean) => <>{(item && item.name) || ''}</>,
@@ -93,7 +95,8 @@ export class List<T = any> extends BaseComponent<IListProps<T>, IListState<T>> i
 
   private _root = React.createRef<HTMLDivElement>();
   private _surface = React.createRef<HTMLDivElement>();
-
+  private _async: Async;
+  private _events: EventGroup;
   private _estimatedPageHeight: number;
   private _totalEstimates: number;
   private _cachedPageHeights: {
@@ -132,11 +135,15 @@ export class List<T = any> extends BaseComponent<IListProps<T>, IListState<T>> i
   constructor(props: IListProps<T>) {
     super(props);
 
+    initializeComponentRef(this);
+
     this.state = {
       pages: [],
       isScrolling: false
     };
 
+    this._async = new Async(this);
+    this._events = new EventGroup(this);
     this._estimatedPageHeight = 0;
     this._totalEstimates = 0;
     this._requiredWindowsAhead = 0;
@@ -307,6 +314,11 @@ export class List<T = any> extends BaseComponent<IListProps<T>, IListState<T>> i
     }
   }
 
+  public componentWillUnmount(): void {
+    this._async.dispose();
+    this._events.dispose();
+  }
+
   public componentWillReceiveProps(newProps: IListProps<T>): void {
     if (
       newProps.items !== this.props.items ||