A few more autobind removals

common/changes/@uifabric/experiments/more-autobind-removals_2018-03-21-07-02.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Removes @autobind for arrow functions",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "mark@thedutchies.com"
+}

common/changes/office-ui-fabric-react/more-autobind-removals_2018-03-21-07-02.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Removes @autobind from examples",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "mark@thedutchies.com"
+}

packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx

@@ -3,8 +3,7 @@ import * as React from 'react';
 /* tslint:enable */
 import {
   BaseComponent,
-  assign,
-  autobind
+  assign
 } from 'office-ui-fabric-react/lib/Utilities';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import { IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
@@ -128,28 +127,24 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return item.primaryText as string;
   }
 
-  @autobind
-  private _setComponentRef(component: ExtendedPeoplePicker): void {
+  private _setComponentRef = (component: ExtendedPeoplePicker): void => {
     this._picker = component;
   }
 
-  @autobind
-  private _onSetFocusButtonClicked(): void {
+  private _onSetFocusButtonClicked = (): void => {
     if (this._picker) {
       this._picker.focus();
     }
   }
 
-  @autobind
-  private _onExpandItem(item: IExtendedPersonaProps): void {
+  private _onExpandItem = (item: IExtendedPersonaProps): void => {
     if (this._picker.selectedItemsList.value) {
       // tslint:disable-next-line:no-any
       (this._picker.selectedItemsList.value as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any));
     }
   }
 
-  @autobind
-  private _onRemoveSuggestion(item: IPersonaProps): void {
+  private _onRemoveSuggestion = (item: IPersonaProps): void => {
     let { peopleList, mostRecentlyUsed: mruState } = this.state;
     let indexPeopleList: number = peopleList.indexOf(item);
     let indexMostRecentlyUsed: number = mruState.indexOf(item);
@@ -165,8 +160,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     }
   }
 
-  @autobind
-  private _onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): Promise<IPersonaProps[]> | null {
+  private _onFilterChanged = (filterText: string, currentPersonas: IPersonaProps[], limitResults?: number):
+    Promise<IPersonaProps[]> | null => {
     if (filterText) {
       let filteredPersonas: IPersonaProps[] = this._filterPersonasByText(filterText);
 
@@ -178,8 +173,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     }
   }
 
-  @autobind
-  private _returnMostRecentlyUsed(currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> {
+  private _returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> => {
     let { mostRecentlyUsed } = this.state;
     mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, this._picker.items);
     return this._convertResultsToPromise(mostRecentlyUsed);
@@ -198,8 +192,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return copyText;
   }
 
-  @autobind
-  private _shouldShowForceResolve(): boolean {
+  private _shouldShowForceResolve = (): boolean => {
     return Boolean(
       this._picker.floatingPicker.value &&
       this._validateInput(this._picker.floatingPicker.value.inputText) &&
@@ -235,8 +228,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return new Promise<IPersonaProps[]>((resolve: any, reject: any) => setTimeout(() => resolve(results), 150));
   }
 
-  @autobind
-  private _validateInput(input: string): boolean {
+  private _validateInput = (input: string): boolean => {
     if (input.indexOf('@') !== -1) {
       return true;
     } else if (input.length > 1) {

packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx

@@ -3,8 +3,7 @@ import * as React from 'react';
 /* tslint:enable */
 import {
   BaseComponent,
-  assign,
-  autobind
+  assign
 } from 'office-ui-fabric-react/lib/Utilities';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import { IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
@@ -88,27 +87,23 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     );
   }
 
-  @autobind
-  private _setComponentRef(component: IBaseFloatingPicker): void {
+  private _setComponentRef = (component: IBaseFloatingPicker): void => {
     this._picker = component;
   }
 
-  @autobind
-  private _onSearchChange(newValue: string): void {
+  private _onSearchChange = (newValue: string): void => {
     if (newValue !== this.state.searchValue) {
       this.setState({ searchValue: newValue });
       this._picker.onQueryStringChanged(newValue);
     }
   }
 
-  @autobind
-  private _onPickerChange(selectedSuggestion: IPersonaProps): void {
+  private _onPickerChange = (selectedSuggestion: IPersonaProps): void => {
     this.setState({ searchValue: selectedSuggestion.primaryText ? selectedSuggestion.primaryText : '' });
     this._picker.hidePicker();
   }
 
-  @autobind
-  private _onRemoveSuggestion(item: IPersonaProps): void {
+  private _onRemoveSuggestion = (item: IPersonaProps): void => {
     let { peopleList, mostRecentlyUsed: mruState } = this.state;
     let indexPeopleList: number = peopleList.indexOf(item);
     let indexMostRecentlyUsed: number = mruState.indexOf(item);
@@ -124,8 +119,7 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     }
   }
 
-  @autobind
-  private _onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): IPersonaProps[] {
+  private _onFilterChanged = (filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): IPersonaProps[] => {
     if (filterText) {
       let filteredPersonas: IPersonaProps[] = this._filterPersonasByText(filterText);
 
@@ -160,8 +154,7 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return personas.filter((persona: IPersonaProps) => !this._listContainsPersona(persona, possibleDupes));
   }
 
-  @autobind
-  private _validateInput(input: string): boolean {
+  private _validateInput = (input: string): boolean => {
     if (input.indexOf('@') !== -1) {
       return true;
     } else if (input.length > 1) {

packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx

@@ -1,6 +1,5 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { Form, FormDatePicker, FormTextInput, Validators } from '../../Form';
 
 export interface IFormAutosaveExampleState {
@@ -53,8 +52,7 @@ export class FormAutosaveExample extends React.Component<{}, IFormAutosaveExampl
     );
   }
 
-  @autobind
-  private _onUpdate(key: string, value: any): void {
+  private _onUpdate = (key: string, value: any): void => {
     let newFormResults = this.state && this.state.formResults ? { ...this.state.formResults } : {};
     newFormResults[key] = value;
     this.setState({ formResults: newFormResults });

packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx

@@ -1,7 +1,6 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { Form, FormTextInput } from '../../Form';
 
 export interface IFormBasicExampleState {
@@ -28,8 +27,7 @@ export class FormBasicExample extends React.Component<{}, IFormBasicExampleState
     );
   }
 
-  @autobind
-  private _onSubmit(values: { [key: string]: any }): void {
+  private _onSubmit = (values: { [key: string]: any }): void => {
     this.setState({ formResults: values });
   }
 }

packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx

@@ -1,6 +1,5 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { Form, FormConditionalSubmitButton, FormDatePicker, FormTextInput, Validators } from '../../Form';
 
 export interface IFormValidationExampleState {
@@ -54,8 +53,7 @@ export class FormValidationExample extends React.Component<{}, IFormValidationEx
     );
   }
 
-  @autobind
-  private _onSubmit(values: { [key: string]: any }): void {
+  private _onSubmit = (values: { [key: string]: any }): void => {
     this.setState({ formResults: values });
   }
 }

packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx

@@ -8,7 +8,6 @@ import { DefaultButton, ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
 import { Modal } from 'office-ui-fabric-react/lib/Modal';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
-import { autobind } from '../../../Utilities';
 
 export interface IKeytipLayerBasicExampleState {
   showModal: boolean;
@@ -212,26 +211,22 @@ export class KeytipLayerBasicExample extends React.Component<{}, IKeytipLayerBas
     }
   }
 
-  @autobind
-  private _showModal(): void {
+  private _showModal = (): void => {
     this.setState({ showModal: true });
   }
 
-  @autobind
-  private _hideModal(): void {
+  private _hideModal = (): void => {
     this.setState({ showModal: false });
   }
 
-  @autobind
-  private _showMessageBar(): void {
+  private _showMessageBar = (): void => {
     this.setState({ showMessageBar: true });
 
     // Hide the MessageBar after 2 seconds
     setTimeout(this._hideMessageBar, 2000);
   }
 
-  @autobind
-  private _hideMessageBar(): void {
+  private _hideMessageBar = (): void => {
     this.setState({ showMessageBar: false });
   }
 }

packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx

@@ -2,8 +2,7 @@
 import * as React from 'react';
 /* tslint:enable */
 import {
-  BaseComponent,
-  autobind
+  BaseComponent
 } from 'office-ui-fabric-react/lib/Utilities';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { people, groupOne, groupTwo } from '../../ExtendedPicker';
@@ -51,11 +50,10 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> {
     );
   }
 
-  @autobind
-  private _onRenderItem(props: ISelectedPeopleItemProps): JSX.Element {
+  private _onRenderItem = (props: ISelectedPeopleItemProps): JSX.Element => {
     return (
       <ExtendedSelectedItem
-        {...props}
+        { ...props }
         renderPersonaCoin={ this._renderPersonaElement }
       />
     );
@@ -70,13 +68,11 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> {
     );
   }
 
-  @autobind
-  private _setComponentRef(component: SelectedPeopleList): void {
+  private _setComponentRef = (component: SelectedPeopleList): void => {
     this._selectionList = component;
   }
 
-  @autobind
-  private _onAddItemButtonClicked(): void {
+  private _onAddItemButtonClicked = (): void => {
     if (this._selectionList) {
       if (!this.index) {
         this.index = 0;
@@ -86,8 +82,7 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> {
     }
   }
 
-  @autobind
-  private _onExpandItem(item: IExtendedPersonaProps): void {
+  private _onExpandItem = (item: IExtendedPersonaProps): void => {
     // tslint:disable-next-line:no-any
     this._selectionList.replaceItem(item, this._getExpandedGroupItems(item as any));
   }

packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx

@@ -6,7 +6,6 @@ import {
   HoverCard,
   IExpandingCardProps
 } from 'office-ui-fabric-react/lib/HoverCard';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { createListItems } from '@uifabric/example-app-base';
 import './Shimmer.Example.scss';
 import {
@@ -106,8 +105,7 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
     );
   }
 
-  @autobind
-  private _onRenderMissingItem(index: number): JSX.Element {
+  private _onRenderMissingItem = (index: number): JSX.Element => {
     this._onDataMiss(index as number);
     return (
       <Shimmer />
@@ -134,8 +132,7 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
     }
   }
 
-  @autobind
-  private _onRenderItemColumn(item: IItem, index: number, column: IColumn): JSX.Element | string | number {
+  private _onRenderItemColumn = (item: IItem, index: number, column: IColumn): JSX.Element | string | number => {
     const expandingCardProps: IExpandingCardProps = {
       onRenderCompactCard: this._onRenderCompactCard,
       onRenderExpandedCard: this._onRenderExpandedCard,
@@ -163,8 +160,7 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
     return item[column.key];
   }
 
-  @autobind
-  private _onRenderCompactCard(item: IItem): JSX.Element {
+  private _onRenderCompactCard = (item: IItem): JSX.Element => {
     return (
       <div className='hoverCardExample-compactCard'>
         <a target='_blank' href={ `http://wikipedia.org/wiki/${item.location}` }>
@@ -174,8 +170,7 @@ export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplica
     );
   }
 
-  @autobind
-  private _onRenderExpandedCard(item: IItem): JSX.Element {
+  private _onRenderExpandedCard = (item: IItem): JSX.Element => {
     const { items, columns } = this.state;
     return (
       <div className='hoverCardExample-expandedCard'>

packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx

@@ -10,7 +10,7 @@ import {
   SharedSignal
 } from '../../signals/Signals';
 import { lorem } from '@uifabric/example-app-base';
-import { css, autobind, ISize, fitContentToBounds } from '../../../Utilities';
+import { css, ISize, fitContentToBounds } from '../../../Utilities';
 import * as TileExampleStylesModule from './Tile.Example.scss';
 
 // tslint:disable-next-line:no-any
@@ -218,8 +218,7 @@ export class TileDocumentExample extends React.Component<{}, ITileDocumentExampl
     );
   }
 
-  @autobind
-  private _onImagesLoadedChanged(event: React.FormEvent<HTMLInputElement>, checked: boolean): void {
+  private _onImagesLoadedChanged = (event: React.FormEvent<HTMLInputElement>, checked: boolean): void => {
     this.setState({
       imagesLoaded: checked
     });