Adding componentRef support, BaseComponent warnings, and initial Customizer component.

common/changes/general-updates_2017-04-04-00-01.json

@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "In components which expose a public API such as `Dropdown` which implements `IDropdown`, to access the exact interface we've exposed a `componentRef` property on all components. This property replaces typical `ref={ c => this._component = c }` usage, as componentRef is guaranteed to access the public contract of the component regardless of the higher-order component or decorator wrapping it. If you are accessing the public API of a component, replace your `ref` usage with `componentRef`.",
+      "type": "minor"
+    },
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "BaseComponent: added support for resolving `componentRef` automatically. Also added `_warnDeprecations` and `_warnMutualExclusion` helpers for warning on misuse.",
+      "type": "minor"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

packages/office-ui-fabric-react/src/common/StoreHost.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StoreSet } from './StoreSet';
+import { BaseComponent } from '../Utilities';
 
 export interface IStoreHostProps extends React.Props<StoreHost> {
   stores?: StoreSet;
@@ -9,7 +10,7 @@ export interface IStoreHostContext {
   stores?: StoreSet;
 }
 
-export class StoreHost extends React.Component<IStoreHostProps, {}> {
+export class StoreHost extends BaseComponent<IStoreHostProps, {}> {
   public static contextTypes = {
     stores: React.PropTypes.object
   };

packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  BaseComponent,
   KeyCodes,
   css,
   getRTL
@@ -15,7 +16,7 @@ export interface ICalendarMonthProps {
   onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
 }
 
-export class CalendarMonth extends React.Component<ICalendarMonthProps, {}> {
+export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
   private _selectMonthCallbacks: (() => void)[];
 
   public constructor(props: ICalendarMonthProps) {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import styles = require('./Check.scss');
 
 export interface ICheckProps extends React.Props<Check> {
@@ -15,7 +15,7 @@ export interface ICheckProps extends React.Props<Check> {
   isChecked?: boolean;
 }
 
-export class Check extends React.Component<ICheckProps, {}> {
+export class Check extends BaseComponent<ICheckProps, {}> {
   public static defaultProps = {
     isChecked: false
   };

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

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { autobind, css } from '../../Utilities';
+import {
+  BaseComponent,
+  autobind,
+  css
+} from '../../Utilities';
 import { IColorPickerProps } from './ColorPicker.Props';
 import { TextField } from '../../TextField';
 import { ColorRectangle } from './ColorRectangle';
@@ -31,7 +35,7 @@ export interface IColor {
   str: string;
 }
 
-export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerState> {
   constructor(props: IColorPickerProps) {
     super(props);
 

packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  EventGroup,
+  BaseComponent,
   assign,
   autobind,
   css
@@ -28,7 +28,7 @@ export interface IColorPickerState {
   fullColorString?: string;
 }
 
-export class ColorRectangle extends React.Component<IColorRectangleProps, IColorPickerState> {
+export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPickerState> {
   public static defaultProps = {
     minSize: 220
   };
@@ -38,15 +38,11 @@ export class ColorRectangle extends React.Component<IColorRectangleProps, IColor
     root: HTMLElement;
   };
 
-  private _events: EventGroup;
-
   constructor(props: IColorRectangleProps) {
     super(props);
 
     let { color } = this.props;
 
-    this._events = new EventGroup(this);
-
     this.state = {
       isAdjusting: false,
       origin: null,

packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  EventGroup,
+  BaseComponent,
   autobind,
   css
 } from '../../Utilities';
@@ -24,7 +24,7 @@ export interface IColorSliderState {
   currentValue?: number;
 }
 
-export class ColorSlider extends React.Component<IColorSliderProps, IColorSliderState> {
+export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderState> {
   public static defaultProps = {
     minValue: 0,
     maxValue: 100,
@@ -37,26 +37,18 @@ export class ColorSlider extends React.Component<IColorSliderProps, IColorSlider
     root: HTMLElement;
   };
 
-  private _events: EventGroup;
-
   constructor(props: IColorSliderProps) {
     super(props);
 
     let { initialValue } = this.props;
 
-    this._events = new EventGroup(this);
-
     this.state = {
       isAdjusting: false,
       origin: null,
       currentValue: initialValue
     };
   }
 
-  public componentWillUnmount() {
-    this._events.dispose();
-  }
-
   public render() {
     let { className, minValue, maxValue, overlayStyle } = this.props;
     let { currentValue, isAdjusting } = this.state;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  EventGroup,
+  BaseComponent,
   autobind,
   buttonProperties,
   css,
@@ -32,7 +32,7 @@ export interface ICommandBarState {
   renderedFarItems?: IContextualMenuItem[];
 }
 
-export class CommandBar extends React.Component<ICommandBarProps, ICommandBarState> implements ICommandBar {
+export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState> implements ICommandBar {
   public static defaultProps = {
     items: [],
     overflowItems: [],
@@ -51,15 +51,13 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
   private _id: string;
   private _overflowWidth: number;
   private _commandItemWidths: { [key: string]: number };
-  private _events: EventGroup;
 
   constructor(props: ICommandBarProps) {
     super(props);
 
     this.state = this._getStateFromProps(props);
 
     this._id = getId('CommandBar');
-    this._events = new EventGroup(this);
   }
 
   public componentDidMount() {
@@ -69,10 +67,6 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     this._events.on(window, 'resize', this._updateRenderedItems);
   }
 
-  public componentWillUnmount() {
-    this._events.dispose();
-  }
-
   public componentWillReceiveProps(nextProps: ICommandBarProps) {
     this.setState(this._getStateFromProps(nextProps));
     this._commandItemWidths = null;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  EventGroup,
+  BaseComponent,
   KeyCodes,
   assign,
   autobind,
@@ -52,7 +52,7 @@ const DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
 const DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
 
 @withViewport
-export class DetailsList extends React.Component<IDetailsListProps, IDetailsListState> implements IDetailsList {
+export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListState> implements IDetailsList {
   public static defaultProps = {
     layoutMode: DetailsListLayoutMode.justified,
     selectionMode: SelectionMode.multiple,
@@ -71,7 +71,6 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
     selectionZone: SelectionZone
   };
 
-  private _events: EventGroup;
   private _selection: ISelection;
   private _activeRows: { [key: string]: DetailsRow };
   private _dragDropHelper: DragDropHelper;
@@ -108,15 +107,13 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed
     };
 
-    this._events = new EventGroup(this);
     this._selection = props.selection || new Selection({ onSelectionChanged: null, getKey: props.getKey });
     this._selection.setItems(props.items as IObjectWithKey[], false);
     this._dragDropHelper = props.dragDropEvents ? new DragDropHelper({ selection: this._selection }) : null;
     this._initialFocusedIndex = props.initialFocusedIndex;
   }
 
   public componentWillUnmount() {
-    this._events.dispose();
     if (this._dragDropHelper) {
       this._dragDropHelper.dispose();
     }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  EventGroup,
+  BaseComponent,
   assign,
   css,
   shallowCompare
@@ -58,14 +58,13 @@ export interface IDetailsRowState {
 
 const DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
 
-export class DetailsRow extends React.Component<IDetailsRowProps, IDetailsRowState> {
+export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState> {
   public refs: {
     [key: string]: React.ReactInstance,
     root: HTMLElement,
     cellMeasurer: HTMLElement
   };
 
-  private _events: EventGroup;
   private _hasSetFocus: boolean;
   private _droppingClassNames: string;
   private _hasMounted: boolean;
@@ -83,7 +82,6 @@ export class DetailsRow extends React.Component<IDetailsRowProps, IDetailsRowSta
 
     this._hasSetFocus = false;
 
-    this._events = new EventGroup(this);
     this._droppingClassNames = '';
     this._updateDroppingState = this._updateDroppingState.bind(this);
   }
@@ -141,8 +139,6 @@ export class DetailsRow extends React.Component<IDetailsRowProps, IDetailsRowSta
   public componentWillUnmount() {
     let { item, onWillUnmount } = this.props;
 
-    this._events.dispose();
-
     // Only call the onWillUnmount callback if we have an item.
     if (onWillUnmount && item) {
       onWillUnmount(this);
@@ -197,7 +193,7 @@ export class DetailsRow extends React.Component<IDetailsRowProps, IDetailsRowSta
         data-selection-index={ itemIndex }
         data-item-index={ itemIndex }
         data-is-draggable={ isDraggable }
-        draggable= { isDraggable }
+        draggable={ isDraggable }
         data-automationid='DetailsRow'
         style={ { minWidth: viewport ? viewport.width : 0 } }
         aria-selected={ isSelected }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IColumn } from './DetailsList.Props';
-import { css } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import styles = require('./DetailsRow.scss');
 
 export interface IDetailsRowFieldsProps {
@@ -14,7 +14,7 @@ export interface IDetailsRowFieldsState {
   cellContent: React.ReactNode[];
 }
 
-export class DetailsRowFields extends React.Component<IDetailsRowFieldsProps, IDetailsRowFieldsState> {
+export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDetailsRowFieldsState> {
   constructor(props: IDetailsRowFieldsProps) {
     super();
 

packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { css } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import styles = require('./Dialog.scss');
 
-export class DialogFooter extends React.Component<any, any> {
+export class DialogFooter extends BaseComponent<any, any> {
   public render() {
     return (
       <div className={ css('ms-Dialog-actions', styles.actions) }>

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

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { IDocumentCardProps, DocumentCardType } from './DocumentCard.Props';
 import {
+  BaseComponent,
+  KeyCodes,
   autobind,
-  css,
-  KeyCodes
+  css
 } from '../../Utilities';
 import styles = require('./DocumentCard.scss');
 
-export class DocumentCard extends React.Component<IDocumentCardProps, any> {
+export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
   public static defaultProps: IDocumentCardProps = {
     type: DocumentCardType.normal
   };

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { css } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import { IDocumentCardActionsProps } from './DocumentCard.Props';
 import { Button, ButtonType } from '../../Button';
 import styles = require('./DocumentCard.scss');
 
-export class DocumentCardActions extends React.Component<IDocumentCardActionsProps, any> {
+export class DocumentCardActions extends BaseComponent<IDocumentCardActionsProps, any> {
   public render() {
     let { actions, views } = this.props;
 

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { css } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import { IDocumentCardActivityProps, IDocumentCardActivityPerson } from './DocumentCard.Props';
 import { Persona, PersonaSize } from '../../Persona';
 import styles = require('./DocumentCard.scss');
 
-export class DocumentCardActivity extends React.Component<IDocumentCardActivityProps, any> {
+export class DocumentCardActivity extends BaseComponent<IDocumentCardActivityProps, any> {
   public render() {
     let { activity, people } = this.props;
 

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { css } from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import { IDocumentCardLocationProps } from './DocumentCard.Props';
 import styles = require('./DocumentCard.scss');
 
-export class DocumentCardLocation extends React.Component<IDocumentCardLocationProps, any> {
+export class DocumentCardLocation extends BaseComponent<IDocumentCardLocationProps, any> {
   public render() {
     let { location, locationHref, ariaLabel, onClick } = this.props;