From a1e0c3207a0c01297f62abd27fa1d8c9f0fae6af Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Tue, 20 Mar 2018 09:09:59 +0100 Subject: [PATCH 1/2] A few more autobind removals --- .../ExtendedPeoplePicker.Basic.Example.tsx | 28 ++++------ .../FloatingPeoplePicker.Basic.Example.tsx | 21 +++----- .../Form/examples/Form.Autosave.Example.tsx | 4 +- .../Form/examples/Form.Basic.Example.tsx | 4 +- .../Form/examples/Form.Validation.Example.tsx | 4 +- .../examples/KeytipLayer.Basic.Example.tsx | 13 ++--- .../SelectedPeopleList.Basic.Example.tsx | 17 +++--- .../examples/Shimmer.Application.Example.tsx | 13 ++--- .../Tile/examples/Tile.Document.Example.tsx | 5 +- .../Tile/examples/Tile.Folder.Example.tsx | 5 +- .../Tile/examples/Tile.Media.Example.tsx | 5 +- .../examples/TilesList.Document.Example.tsx | 16 ++---- .../examples/TilesList.Media.Example.tsx | 16 ++---- .../VirtualizedList.Basic.Example.tsx | 4 +- .../VirtualizedList.Basic.Example2.tsx | 4 +- .../examples/Signals.Basic.Example.tsx | 8 ++- .../examples/Breadcrumb.Basic.Example.tsx | 6 +-- .../examples/Breadcrumb.Static.Example.tsx | 7 +-- .../examples/Callout.Directional.Example.tsx | 19 +++---- .../Checkbox.ImplementationExamples.tsx | 4 +- .../examples/ChoiceGroup.Basic.Example.tsx | 4 +- .../examples/ChoiceGroup.Custom.Example.tsx | 5 +- .../examples/ComboBox.Basic.Example.tsx | 47 +++++++---------- .../CommandBar.Customization.Example.tsx | 11 ++-- .../ContextualMenu.Customization.Example.tsx | 4 +- ...alMenu.CustomizationWithNoWrap.Example.tsx | 4 +- .../ContextualMenu.Directional.Example.tsx | 14 ++--- .../examples/DatePicker.Basic.Example.tsx | 4 +- .../examples/DatePicker.Format.Example.tsx | 13 ++--- .../examples/DatePicker.Input.Example.tsx | 7 +-- .../DatePicker.WeekNumbers.Example.tsx | 4 +- .../examples/DetailsList.Advanced.Example.tsx | 52 +++++++------------ .../examples/DetailsList.Basic.Example.tsx | 4 +- .../examples/DetailsList.Compact.Example.tsx | 4 +- .../DetailsList.CustomColumns.Example.tsx | 4 +- .../DetailsList.CustomRows.Example.tsx | 10 ++-- .../DetailsList.Documents.Example.tsx | 16 ++---- .../examples/DetailsList.Grouped.Example.tsx | 4 +- .../DetailsList.NavigatingFocus.Example.tsx | 4 +- .../Dialog/examples/Dialog.Basic.Example.tsx | 7 +-- .../examples/Dialog.Blocking.Example.tsx | 7 +-- .../examples/Dialog.LargeHeader.Example.tsx | 7 +-- .../examples/Dropdown.Basic.Example.tsx | 13 ++--- .../examples/Facepile.Basic.Example.tsx | 10 ++-- .../examples/Facepile.Overflow.Example.tsx | 9 ++-- .../FocusTrapZone.Box.Click.Example.tsx | 13 ++--- .../examples/FocusTrapZone.Box.Example.tsx | 13 ++--- ...pZone.Box.FocusOnCustomElement.Example.tsx | 13 ++--- .../examples/FocusTrapZone.Nested.Example.tsx | 13 ++--- .../examples/HoverCard.Basic.Example.tsx | 10 ++-- .../examples/HoverCard.Target.Example.tsx | 10 ++-- .../Layer/examples/Layer.Basic.Example.tsx | 3 +- .../Layer/examples/Layer.Hosted.Example.tsx | 10 ++-- .../List/examples/List.Grid.Example.tsx | 4 +- .../List/examples/List.Scrolling.Example.tsx | 9 ++-- .../MarqueeSelection.Basic.Example.tsx | 4 +- .../Modal/examples/Modal.Basic.Example.tsx | 7 +-- .../Overlay/examples/Overlay.Dark.Example.tsx | 7 +-- .../examples/Overlay.Light.Example.tsx | 7 +-- .../Panel/examples/Panel.Custom.Example.tsx | 7 +-- .../Panel/examples/Panel.Footer.Example.tsx | 4 +- .../Panel.HiddenOnDismiss.Example.tsx | 7 +-- .../examples/Panel.LargeFixed.Example.tsx | 7 +-- .../examples/Panel.LightDismiss.Example.tsx | 7 +-- .../Panel.LightDismissCustom.Example.tsx | 16 ++---- .../Panel/examples/Panel.Medium.Example.tsx | 4 +- .../Panel/examples/Panel.NonModal.Example.tsx | 4 +- .../examples/Panel.SmallRight.Example.tsx | 10 ++-- .../examples/Persona.Basic.Example.tsx | 4 +- .../Persona.CustomCoinRender.Example.tsx | 4 +- .../examples/Persona.CustomRender.Example.tsx | 4 +- .../Pivot/examples/Pivot.Separate.Example.tsx | 7 +-- .../Rating/examples/Rating.Basic.Example.tsx | 13 ++--- .../ResizeGroup.OverflowSet.Example.tsx | 20 +++---- .../TextField.CustomRender.Example.tsx | 10 ++-- .../examples/TextField.Icon.Example.tsx | 4 +- .../examples/PeoplePicker.Types.Example.tsx | 39 +++++--------- .../examples/Picker.CustomResult.Example.tsx | 4 +- .../examples/TagPicker.Basic.Example.tsx | 13 ++--- 79 files changed, 249 insertions(+), 533 deletions(-) diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index fbbcb15c8eed0c..b0d1ee5e0d6a44 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/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 | null { + private _onFilterChanged = (filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): + Promise | 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 { + private _returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise => { 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((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) { diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx index ef37a1aef79397..e7cfe25a6a434b 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx +++ b/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) { diff --git a/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx b/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx index 219ba13c0555c6..5c0b7d7fc8fc6e 100644 --- a/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx +++ b/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 }); diff --git a/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx b/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx index dc29ede5479864..20440295e792bb 100644 --- a/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx +++ b/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 }); } } \ No newline at end of file diff --git a/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx b/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx index 420826ac694385..f4217c9a915cff 100644 --- a/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx +++ b/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 }); } } \ No newline at end of file diff --git a/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx b/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx index ad1ba8cb4b8125..8cc5d16a91b8bf 100644 --- a/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx +++ b/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 }); } } \ No newline at end of file diff --git a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx index 245f2b544db3ed..ff3c2f2134716e 100644 --- a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx +++ b/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 ( ); @@ -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)); } diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx index a92bc7e53d4145..02b6d3d1fca690 100644 --- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx +++ b/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 ( @@ -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 (
@@ -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 (
diff --git a/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx b/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx index f9a142959dafa3..8cb61b5eddfc52 100644 --- a/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx +++ b/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, checked: boolean): void { + private _onImagesLoadedChanged = (event: React.FormEvent, checked: boolean): void => { this.setState({ imagesLoaded: checked }); diff --git a/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx b/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx index 88c90306f4a251..2901cb977a4746 100644 --- a/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx +++ b/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx @@ -11,7 +11,7 @@ import { import { FolderCover, getFolderCoverLayout, renderFolderCoverWithLayout } from '../../FolderCover/FolderCover'; import { FolderCoverType } from '../../FolderCover/FolderCover.types'; 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 @@ -197,8 +197,7 @@ export class TileFolderExample extends React.Component<{}, ITileFolderExampleSta ); } - @autobind - private _onIsLargeChanged(event: React.FormEvent, checked: boolean): void { + private _onIsLargeChanged = (event: React.FormEvent, checked: boolean): void => { this.setState({ size: checked ? 'large' : 'small' }); diff --git a/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx b/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx index 0f39cb993ee3cd..7c7b079189777a 100644 --- a/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx +++ b/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { Tile, getTileLayout, renderTileWithLayout } from '../Tile'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -import { css, autobind, ISize, fitContentToBounds } from '../../../Utilities'; +import { css, ISize, fitContentToBounds } from '../../../Utilities'; import { SignalField, Signal, @@ -220,8 +220,7 @@ export class TileMediaExample extends React.Component<{}, ITileMediaExampleState ); } - @autobind - private _onImagesLoadedChanged(event: React.FormEvent, checked: boolean): void { + private _onImagesLoadedChanged = (event: React.FormEvent, checked: boolean): void => { this.setState({ imagesLoaded: checked }); diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx index 4c33dbdf5952bb..db7ccc2fc82875 100644 --- a/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx +++ b/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx @@ -9,7 +9,6 @@ import { Tile } from '../../../Tile'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection'; import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling'; import { IExampleGroup, IExampleItem, createGroup, createDocumentItems, getTileCells } from './ExampleHelpers'; @@ -91,28 +90,24 @@ export class TilesListDocumentExample extends React.Component<{}, ITilesListDocu ); } - @autobind - private _onToggleIsModalSelection(checked: boolean): void { + private _onToggleIsModalSelection = (checked: boolean): void => { this._selection.setModal(checked); } - @autobind - private _onSelectionChange(): void { + private _onSelectionChange = (): void => { this.setState({ isModalSelection: this._selection.isModal() }); } - @autobind - private _onItemInvoked(item: IExampleItem, index: number, event: Event): void { + private _onItemInvoked = (item: IExampleItem, index: number, event: Event): void => { event.stopPropagation(); event.preventDefault(); alert(`Invoked item '${item.name}'`); } - @autobind - private _onRenderDocumentCell(item: IExampleItem): JSX.Element { + private _onRenderDocumentCell = (item: IExampleItem): JSX.Element => { return ( { return (

{ item.name }

diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx index ed4e5fa348a98a..149ae4ddcebabb 100644 --- a/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx +++ b/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx @@ -10,7 +10,6 @@ import { Tile, getTileLayout, renderTileWithLayout } from '../../../Tile'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection'; import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling'; import { IExampleGroup, IExampleItem, createGroup, createMediaItems, getTileCells } from './ExampleHelpers'; import * as TilesListExampleStylesModule from './TilesList.Example.scss'; @@ -96,28 +95,24 @@ export class TilesListMediaExample extends React.Component<{}, ITilesListMediaEx ); } - @autobind - private _onToggleIsModalSelection(checked: boolean): void { + private _onToggleIsModalSelection = (checked: boolean): void => { this._selection.setModal(checked); } - @autobind - private _onSelectionChange(): void { + private _onSelectionChange = (): void => { this.setState({ isModalSelection: this._selection.isModal() }); } - @autobind - private _onItemInvoked(item: IExampleItem, index: number, event: Event): void { + private _onItemInvoked = (item: IExampleItem, index: number, event: Event): void => { event.stopPropagation(); event.preventDefault(); alert(`Invoked item '${item.name}'`); } - @autobind - private _onRenderMediaCell(item: IExampleItem, finalSize: ITileSize): JSX.Element { + private _onRenderMediaCell = (item: IExampleItem, finalSize: ITileSize): JSX.Element => { const tile = ( { return (

{ item.name }

diff --git a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx index 70deb9a7f971dc..cfc525d1f66c68 100644 --- a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx +++ b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { VirtualizedList } from '../VirtualizedList'; import { ScrollContainer } from '../../../utilities/scrolling/ScrollContainer'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import * as VirtualizedListExampleStylesModule from './VirtualizedList.Example.scss'; @@ -44,8 +43,7 @@ export class VirtualizedListBasicExample extends React.Component { ); } - @autobind - private _renderItem(item: IItem, itemIndex: number): JSX.Element { + private _renderItem = (item: IItem, itemIndex: number): JSX.Element => { return ( // tslint:disable-next-line:jsx-ban-props
diff --git a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx index 5fb15cec4bb134..5e0bf6313e00f7 100644 --- a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx +++ b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { VirtualizedList } from '../VirtualizedList'; import { ScrollContainer } from '../../../utilities/scrolling/ScrollContainer'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import * as VirtualizedListExampleStylesModule from './VirtualizedList.Example.scss'; @@ -53,8 +52,7 @@ export class VirtualizedListBasicExample2 extends React.Component { ); } - @autobind - private _renderItem(item: IItem, itemIndex: number): JSX.Element { + private _renderItem = (item: IItem, itemIndex: number): JSX.Element => { return ( // tslint:disable-next-line:jsx-ban-props
diff --git a/packages/experiments/src/components/signals/examples/Signals.Basic.Example.tsx b/packages/experiments/src/components/signals/examples/Signals.Basic.Example.tsx index 341cdf34eb2e01..a5d15caf67807d 100644 --- a/packages/experiments/src/components/signals/examples/Signals.Basic.Example.tsx +++ b/packages/experiments/src/components/signals/examples/Signals.Basic.Example.tsx @@ -19,7 +19,7 @@ import { SharedSignal } from '../Signals'; import { ChoiceGroup, IChoiceGroupOption, Checkbox } from 'office-ui-fabric-react'; -import { css, autobind } from 'office-ui-fabric-react/lib/Utilities'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import { lorem } from '@uifabric/example-app-base'; import * as SignalStylesModule from '../Signal.scss'; import * as SignalsExampleStylesModule from './Signals.Example.scss'; @@ -179,15 +179,13 @@ export class SignalsBasicExample extends React.Component<{}, ISignalsBasicExampl ); } - @autobind - private _onFontSizeChoiceChanged(option: IChoiceGroupOption): void { + private _onFontSizeChoiceChanged = (option: IChoiceGroupOption): void => { this.setState({ fontSize: option.key as ISignalsBasicExampleState['fontSize'] }); } - @autobind - private _onIsDarkChanged(ev: React.FormEvent, checked: boolean): void { + private _onIsDarkChanged = (ev: React.FormEvent, checked: boolean): void => { this.setState({ isDark: checked }); diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx index 0d576a60d49652..34addea857b8da 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx @@ -4,9 +4,6 @@ import * as React from 'react'; import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb'; -import { - autobind -} from '../../../Utilities'; import { Label } from 'office-ui-fabric-react/lib/Label'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; @@ -49,8 +46,7 @@ export class BreadcrumbBasicExample extends React.Component { ); } - @autobind - private _onBreadcrumbItemClicked(ev: React.MouseEvent, item: IBreadcrumbItem) { + private _onBreadcrumbItemClicked = (ev: React.MouseEvent, item: IBreadcrumbItem) => { console.log(`Breadcrumb item with key "${item.key}" has been clicked.`); } diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx index 75b9fedd67e34b..fc283ec4f333fb 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx @@ -5,10 +5,6 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb'; -import { - autobind -} from '../../../Utilities'; - export class BreadcrumbStaticExample extends React.Component { public render() { @@ -32,8 +28,7 @@ export class BreadcrumbStaticExample extends React.Component { ); } - @autobind - private _onBreadcrumbItemClicked(ev: React.MouseEvent, item: IBreadcrumbItem) { + private _onBreadcrumbItemClicked = (ev: React.MouseEvent, item: IBreadcrumbItem) => { console.log(`Breadcrumb item with key "${item.key}" has been clicked.`); } diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx index 925e5fd74701d0..d919a218c33834 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx @@ -4,7 +4,6 @@ import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { Slider } from 'office-ui-fabric-react/lib/Slider'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import './CalloutExample.scss'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; @@ -117,44 +116,38 @@ export class CalloutDirectionalExample extends React.Component<{}, ICalloutDirec ); } - @autobind - private _onCalloutDismiss() { + private _onCalloutDismiss = (): void => { this.setState({ isCalloutVisible: false }); } - @autobind - private _onShowMenuClicked() { + private _onShowMenuClicked = (): void => { this.setState({ isCalloutVisible: !this.state.isCalloutVisible }); } - @autobind - private _onShowBeakChange(ev: React.FormEvent, isVisible: boolean) { + private _onShowBeakChange = (ev: React.FormEvent, isVisible: boolean): void => { this.setState({ isBeakVisible: isVisible, beakWidth: 10 }); } - @autobind - private _onDirectionalChanged(option: IDropdownOption) { + private _onDirectionalChanged = (option: IDropdownOption): void => { this.setState({ directionalHint: option.key as number }); } - @autobind - private _onGapSlider(value: number) { + private _onGapSlider = (value: number): void => { this.setState({ gapSpace: value }); } - @autobind - private _onBeakWidthSlider(value: number) { + private _onBeakWidthSlider = (value: number): void => { this.setState({ beakWidth: value }); diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx index 93e339a65b57cd..16c81e39d6bf7e 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx @@ -8,7 +8,6 @@ import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; export interface ICheckboxBasicExampleState { isChecked: boolean; @@ -96,8 +95,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo console.log(`The option has been changed to ${isChecked}.`); } - @autobind - private _onControlledCheckboxChange(ev: React.FormEvent, checked: boolean): void { + private _onControlledCheckboxChange = (ev: React.FormEvent, checked: boolean): void => { this.setState({ isChecked: checked! }); } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx index 352a99dbc65fd3..ea881152daceb9 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; /** * Interface for ChoiceGroupBasicExample state. @@ -52,8 +51,7 @@ export class ChoiceGroupBasicExample extends React.Component<{}, IChoiceGroupBas ); } - @autobind - private _onChange(ev: React.FormEvent, option: any) { + private _onChange = (ev: React.FormEvent, option: any): void => { console.dir(option); } } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx index a4a5d2d22092df..d9059902d3b420 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup'; -import { autobind, css } from 'office-ui-fabric-react/lib/Utilities'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; import * as stylesImport from './ChoiceGroup.Custom.Example.scss'; @@ -60,8 +60,7 @@ export class ChoiceGroupCustomExample extends React.Component { ); } - @autobind - private _onChange(ev: React.FormEvent, option: any) { + private _onChange = (ev: React.FormEvent, option: any): void => { console.dir(option); } } diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx index 808f65d3b456af..118e160b76f934 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx @@ -6,8 +6,7 @@ import { } from 'office-ui-fabric-react/lib/ComboBox'; import './ComboBox.Basic.Example.scss'; import { - assign, - autobind + assign } from 'office-ui-fabric-react/lib/Utilities'; import { SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types'; import { IComboBox } from '../ComboBox.types'; @@ -19,20 +18,20 @@ export class ComboBoxBasicExample extends React.Component<{}, { value?: string; }> { private _testOptions = - [{ key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header }, - { key: 'A', text: 'Arial Black' }, - { key: 'B', text: 'Times New Roman' }, - { key: 'C', text: 'Comic Sans MS' }, - { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider }, - { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header }, - { key: 'D', text: 'Option d' }, - { key: 'E', text: 'Option e' }, - { key: 'F', text: 'Option f' }, - { key: 'G', text: 'Option g' }, - { key: 'H', text: 'Option h' }, - { key: 'I', text: 'Option i' }, - { key: 'J', text: 'Option j', disabled: true }, - ]; + [{ key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header }, + { key: 'A', text: 'Arial Black' }, + { key: 'B', text: 'Times New Roman' }, + { key: 'C', text: 'Comic Sans MS' }, + { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider }, + { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header }, + { key: 'D', text: 'Option d' }, + { key: 'E', text: 'Option e' }, + { key: 'F', text: 'Option f' }, + { key: 'G', text: 'Option g' }, + { key: 'H', text: 'Option h' }, + { key: 'I', text: 'Option i' }, + { key: 'J', text: 'Option j', disabled: true }, + ]; private _fontMapping: { [key: string]: string } = { ['Arial Black']: '"Arial Black", "Arial Black_MSFontService", sans-serif', @@ -232,8 +231,7 @@ export class ComboBoxBasicExample extends React.Component<{}, { } // Render content of item - @autobind - private _onRenderFontOption(item: IComboBoxOption): JSX.Element { + private _onRenderFontOption = (item: IComboBoxOption): JSX.Element => { if (item.itemType === SelectableOptionMenuItemType.Header || item.itemType === SelectableOptionMenuItemType.Divider) { @@ -258,9 +256,7 @@ export class ComboBoxBasicExample extends React.Component<{}, { return { item.text }; } - @autobind - private _getOptions(currentOptions: IComboBoxOption[]): IComboBoxOption[] { - + private _getOptions = (currentOptions: IComboBoxOption[]): IComboBoxOption[] => { if (this.state.options.length > 0) { return this.state.options; } @@ -291,8 +287,7 @@ export class ComboBoxBasicExample extends React.Component<{}, { return newOptions; } - @autobind - private _onChanged(option: IComboBoxOption, index: number, value: string) { + private _onChanged = (option: IComboBoxOption, index: number, value: string): void => { if (option !== undefined) { this.setState({ selectedOptionKey: option.key, @@ -314,13 +309,11 @@ export class ComboBoxBasicExample extends React.Component<{}, { } } - @autobind - private _basicComboBoxOnClick(): void { + private _basicComboBoxOnClick = (): void => { this._basicCombobox.focus(true); } - @autobind - private _basicComboBoxComponentRef(component: IComboBox) { + private _basicComboBoxComponentRef = (component: IComboBox) => { this._basicCombobox = component; } } diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx index e5ef9fbfd6e37d..0567f01908c54c 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { CommandButton } from 'office-ui-fabric-react/lib/Button'; import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; -import { css, autobind, } from 'office-ui-fabric-react/lib/Utilities'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import * as styles from './CommandBar.Example.scss'; import { IContextualMenuItem } from '../../ContextualMenu'; @@ -53,8 +53,7 @@ export class CommandBarCustomizationExample extends React.Component<{}, ISplitDr ); } - @autobind - private _renderSplitButtonMenuItem(item: IContextualMenuItem) { + private _renderSplitButtonMenuItem = (item: IContextualMenuItem) => { const darkerBG = this.state.isContextMenuShown && styles.darkerBG; const dropDownButtonClass = css( @@ -95,14 +94,12 @@ export class CommandBarCustomizationExample extends React.Component<{}, ISplitDr ); } - @autobind - private _onClickChevron(ev: any) { + private _onClickChevron = (ev: any): void => { ev.stopPropagation(); this._toggleDropDownMenuShown(ev); } - @autobind - private _toggleDropDownMenuShown(ev: any) { + private _toggleDropDownMenuShown = (ev: any): void => { this.setState({ isContextMenuShown: !this.state.isContextMenuShown }); diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx index e3cbc91b48f104..68773429a0d2f2 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu'; import { DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button'; import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import './ContextualMenuExample.scss'; export class ContextualMenuCustomizationExample extends React.Component<{}, {}> { @@ -187,8 +186,7 @@ export class ContextualMenuCustomizationExample extends React.Component<{}, {}> ); } - @autobind - private _renderCharmMenuItem(item: any, dismissMenu: () => void) { + private _renderCharmMenuItem = (item: any, dismissMenu: () => void): JSX.Element => { return ( { @@ -196,8 +195,7 @@ export class ContextualMenuCustomizationWithNoWrapExample extends React.Componen ); } - @autobind - private _renderCharmMenuItem(item: any, dismissMenu: () => void) { + private _renderCharmMenuItem = (item: any, dismissMenu: () => void): JSX.Element => { return ( , isVisible: boolean) { + private _onShowBeakChange = (ev: React.FormEvent, isVisible: boolean): void => { this.setState({ isBeakVisible: isVisible }); } - @autobind - private _onUseRtlHintChange(ev: React.FormEvent, isVisible: boolean) { + private _onUseRtlHintChange = (ev: React.FormEvent, isVisible: boolean): void => { this.setState({ useDirectionalHintForRtl: isVisible }); } - @autobind - private _onDirectionalChanged(option: IDropdownOption) { + private _onDirectionalChanged = (option: IDropdownOption): void => { this.setState({ directionalHint: option.key as number }); } - @autobind - private _onDirectionalRtlChanged(option: IDropdownOption) { + private _onDirectionalRtlChanged = (option: IDropdownOption): void => { this.setState({ directionalHintForRTL: option.key as number }); diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx index 2376899485f21f..bd227563e07b35 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; @@ -126,8 +125,7 @@ export class DatePickerBasicExample extends React.Component<{}, IDatePickerBasic ); } - @autobind - private _onDropdownChanged(option: IDropdownOption) { + private _onDropdownChanged = (option: IDropdownOption): void => { this.setState({ firstDayOfWeek: (DayOfWeek as any)[option.key] }); diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx index 1750d9fe5a87f5..dc5214e4c6e8c4 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx @@ -5,7 +5,6 @@ import { DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; const DayPickerStrings: IDatePickerStrings = { months: [ @@ -110,18 +109,15 @@ export class DatePickerFormatExample extends React.Component< ); } - @autobind - private _onSelectDate(date: Date | null | undefined): void { + private _onSelectDate = (date: Date | null | undefined): void => { this.setState({ value: date }); } - @autobind - private _onClick(): void { + private _onClick = (): void => { this.setState({ value: null }); } - @autobind - private _onFormatDate(date: Date): string { + private _onFormatDate = (date: Date): string => { return ( date.getDate() + '/' + @@ -131,8 +127,7 @@ export class DatePickerFormatExample extends React.Component< ); } - @autobind - private _onParseDateFromString(value: string): Date { + private _onParseDateFromString = (value: string): Date => { const date = this.state.value || new Date(); const values = (value || '').trim().split('/'); const day = diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx index 616074044dece9..96c3c405341eb4 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; const DayPickerStrings: IDatePickerStrings = { months: [ @@ -102,13 +101,11 @@ export class DatePickerInputExample extends React.Component<{}, IDatePickerInput ); } - @autobind - private _onSelectDate(date: Date | null | undefined): void { + private _onSelectDate = (date: Date | null | undefined): void => { this.setState({ value: date }); } - @autobind - private _onClick(): void { + private _onClick = (): void => { this.setState({ value: null }); } } diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx index 7708fb68cc06c2..faf76a96af85f5 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; @@ -119,8 +118,7 @@ export class DatePickerWeekNumbersExample extends React.Component<{}, IDatePicke ); } - @autobind - private _onDropdownChanged(option: IDropdownOption) { + private _onDropdownChanged = (option: IDropdownOption) => { this.setState({ firstDayOfWeek: (DayOfWeek as any)[option.key] }); diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx index 276b11a3d36111..1359126a4b178d 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx @@ -8,7 +8,6 @@ import { DirectionalHint, ContextualMenu, } from 'office-ui-fabric-react/lib/ContextualMenu'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { CheckboxVisibility, ColumnActionsMode, @@ -164,14 +163,12 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList } } - @autobind - private _onRenderMissingItem(index: number): null { + private _onRenderMissingItem = (index: number): null => { this._onDataMiss(index as number); return null; } - @autobind - private _onToggleLazyLoad() { + private _onToggleLazyLoad = (): void => { let { isLazyLoaded } = this.state; isLazyLoaded = !isLazyLoaded; @@ -182,8 +179,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList }); } - @autobind - private _onToggleResizing() { + private _onToggleResizing = (): void => { const { items, sortedColumnKey, isSortedDescending } = this.state; let { canResizeColumns } = this.state; @@ -195,29 +191,25 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList }); } - @autobind - private _onLayoutChanged(ev: React.MouseEvent, menuItem: IContextualMenuItem) { + private _onLayoutChanged = (ev: React.MouseEvent, menuItem: IContextualMenuItem): void => { this.setState({ layoutMode: menuItem.data }); } - @autobind - private _onConstrainModeChanged(ev: React.MouseEvent, menuItem: IContextualMenuItem) { + private _onConstrainModeChanged = (ev: React.MouseEvent, menuItem: IContextualMenuItem): void => { this.setState({ constrainMode: menuItem.data }); } - @autobind - private _onSelectionChanged(ev: React.MouseEvent, menuItem: IContextualMenuItem) { + private _onSelectionChanged = (ev: React.MouseEvent, menuItem: IContextualMenuItem): void => { this.setState({ selectionMode: menuItem.data }); } - @autobind - private _onItemLimitChanged(value: string) { + private _onItemLimitChanged = (value: string): void => { let newValue = parseInt(value, 10); if (isNaN(newValue)) { newValue = DEFAULT_ITEM_LIMIT; @@ -227,7 +219,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList }); } - private _getCommandItems(): IContextualMenuItem[] { + private _getCommandItems = (): IContextualMenuItem[] => { const { canResizeColumns, checkboxVisibility, @@ -437,21 +429,19 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList }; } - @autobind - private _onItemInvoked(item: any, index: number) { + private _onItemInvoked = (item: any, index: number): void => { console.log('Item invoked', item, index); } - @autobind - private _onItemContextMenu(item: any, index: number, ev: MouseEvent) { + private _onItemContextMenu = (item: any, index: number, ev: MouseEvent): boolean => { if ((ev.target as HTMLElement).nodeName === 'A') { return true; } console.log('Item context menu invoked', item, index); + return false; } - @autobind - private _onColumnClick(ev: React.MouseEvent, column: IColumn) { + private _onColumnClick = (ev: React.MouseEvent, column: IColumn) => { if (column.columnActionsMode !== ColumnActionsMode.disabled) { this.setState({ contextualMenuProps: this._getContextualMenuProps(ev, column) @@ -459,8 +449,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList } } - @autobind - private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent) { + private _onColumnContextMenu = (column: IColumn, ev: React.MouseEvent) => { if (column.columnActionsMode !== ColumnActionsMode.disabled) { this.setState({ contextualMenuProps: this._getContextualMenuProps(ev, column) @@ -468,15 +457,13 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList } } - @autobind - private _onContextualMenuDismissed() { + private _onContextualMenuDismissed = () => { this.setState({ contextualMenuProps: undefined }); } - @autobind - private _onSortColumn(key: string, isSortedDescending: boolean) { + private _onSortColumn = (key: string, isSortedDescending: boolean) => { const sortedItems = _items.slice(0).sort((a: any, b: any) => (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1); this.setState({ @@ -495,8 +482,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList }); } - @autobind - private _onGroupByColumn(column: IColumn) { + private _onGroupByColumn = (column: IColumn) => { const { key, isGrouped } = column; const { sortedColumnKey, isSortedDescending, groups, items, columns } = this.state; @@ -578,15 +564,13 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList return leafKey; } - @autobind - private _onAddRow() { + private _onAddRow = () => { this.setState({ items: createListItems(1).concat(this.state.items) }); } - @autobind - private _onDeleteRow() { + private _onDeleteRow = () => { this.setState({ items: this.state.items!.slice(1) }); diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx index 593a874f99882e..5d4ce186686a89 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx @@ -9,7 +9,6 @@ import { IColumn } from 'office-ui-fabric-react/lib/DetailsList'; import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; const _items: any[] = []; @@ -104,8 +103,7 @@ export class DetailsListBasicExample extends React.Component<{}, { } } - @autobind - private _onChanged(text: any): void { + private _onChanged = (text: any): void => { this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }); } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx index b47e35d658b9a3..a35388a1e229b2 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx @@ -8,7 +8,6 @@ import { Selection } from 'office-ui-fabric-react/lib/DetailsList'; import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; const _items: { key: number, @@ -104,8 +103,7 @@ export class DetailsListCompactExample extends React.Component<{}, { } } - @autobind - private _onChanged(text: any): void { + private _onChanged = (text: any): void => { this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }); } diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx index 0589376a17908c..8eb95497aa6c0a 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ import { createListItems } from '@uifabric/example-app-base'; -import { autobind } from '../../../Utilities'; import { Link } from 'office-ui-fabric-react/lib/Link'; import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image'; import { @@ -47,8 +46,7 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail ); } - @autobind - private _onColumnClick(event: React.MouseEvent, column: IColumn) { + private _onColumnClick = (event: React.MouseEvent, column: IColumn): void => { const { columns } = this.state; let { sortedItems } = this.state; let isSortedDescending = column.isSortedDescending; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx index bd5e31de70b889..c1481847de2ffb 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ import { DetailsList, DetailsRow, IDetailsRowProps, IDetailsRowCheckProps } from 'office-ui-fabric-react/lib/DetailsList'; -import { autobind, css } from 'office-ui-fabric-react/lib/Utilities'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import { createListItems } from '@uifabric/example-app-base'; import './DetailsListExample.scss'; @@ -26,19 +26,17 @@ export class DetailsListCustomRowsExample extends React.Component { ); } - @autobind - private _onRenderRow(props: IDetailsRowProps) { + private _onRenderRow = (props: IDetailsRowProps): JSX.Element => { return ( ); } - @autobind - private _onRenderCheck(props: IDetailsRowCheckProps) { + private _onRenderCheck = (props: IDetailsRowCheckProps): JSX.Element => { return (
{ this.setState({ isCompactMode: checked }); } - @autobind - private _onChangeModalSelection(checked: boolean): void { + private _onChangeModalSelection = (checked: boolean): void => { this.setState({ isModalSelection: checked }); } - @autobind - private _onChangeText(text: any): void { + private _onChangeText = (text: any): void => { this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }); } @@ -309,8 +305,7 @@ export class DetailsListDocumentsExample extends React.Component, column: IColumn) { + private _onColumnClick = (ev: React.MouseEvent, column: IColumn): void => { const { columns, items } = this.state; let newItems: IDocument[] = items.slice(); const newColumns: IColumn[] = columns.slice(); @@ -333,8 +328,7 @@ export class DetailsListDocumentsExample extends React.Component { if (descending) { return items.sort((a: IDocument, b: IDocument) => { if (a[sortBy] < b[sortBy]) { diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx index 0917f5b4ceb7d0..1c8be6f3723d23 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ import { BaseComponent, - autobind, createRef } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; @@ -113,8 +112,7 @@ export class DetailsListGroupedExample extends BaseComponent<{}, { ); } - @autobind - private _addItem() { + private _addItem = (): void => { const items = this.state.items; this.setState({ diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx index 31c2d894bf5188..c1b19c2ef52e24 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList'; import { Link } from 'office-ui-fabric-react/lib/Link'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import './DetailsListExample.scss'; export interface IDetailsListNavigatingFocusExampleState { @@ -46,8 +45,7 @@ export class DetailsListNavigatingFocusExample extends React.Component<{}, IDeta ); } - @autobind - private _navigate(name: string): () => void { + private _navigate = (name: string): () => void => { return (): void => { this.setState({ items: generateItems(name + '/'), diff --git a/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx index 4dad0e5867f87b..bfd77580fa4d58 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; import './Dialog.Basic.Example.scss'; @@ -52,13 +51,11 @@ export class DialogBasicExample extends React.Component<{}, { ); } - @autobind - private _showDialog() { + private _showDialog = (): void => { this.setState({ hideDialog: false }); } - @autobind - private _closeDialog() { + private _closeDialog = (): void => { this.setState({ hideDialog: true }); } } diff --git a/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx b/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx index 1fbcb41fd05522..7bad603a4d3463 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; @@ -44,13 +43,11 @@ export class DialogBlockingExample extends React.Component<{}, { ); } - @autobind - private _showDialog() { + private _showDialog = (): void => { this.setState({ hideDialog: false }); } - @autobind - private _closeDialog() { + private _closeDialog = (): void => { this.setState({ hideDialog: true }); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx b/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx index f9981e84b0bf97..04a49a2107f1f8 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup'; @@ -64,13 +63,11 @@ export class DialogLargeHeaderExample extends React.Component<{}, { ); } - @autobind - private _showDialog() { + private _showDialog = (): void => { this.setState({ hideDialog: false }); } - @autobind - private _closeDialog() { + private _closeDialog = (): void => { this.setState({ hideDialog: true }); } diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx index f60f4c7eaee3fe..100ec542237505 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; import { Dropdown, IDropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -import { autobind, BaseComponent, createRef } from '../../../Utilities'; +import { BaseComponent, createRef } from '../../../Utilities'; import './Dropdown.Basic.Example.scss'; export class DropdownBasicExample extends BaseComponent<{}, { @@ -163,14 +163,12 @@ export class DropdownBasicExample extends BaseComponent<{}, { ); } - @autobind - public changeState(item: IDropdownOption) { + public changeState = (item: IDropdownOption): void => { console.log('here is the things updating...' + item.key + ' ' + item.text + ' ' + item.selected); this.setState({ selectedItem: item }); } - @autobind - public onChangeMultiSelect(item: IDropdownOption) { + public onChangeMultiSelect = (item: IDropdownOption): void => { const updatedSelectedItem = this.state.selectedItems ? this.copyArray(this.state.selectedItems) : []; if (item.selected) { // add the option if it's checked @@ -187,7 +185,7 @@ export class DropdownBasicExample extends BaseComponent<{}, { }); } - public copyArray(array: any[]): any[] { + public copyArray = (array: any[]): any[] => { const newArray: any[] = []; for (let i = 0; i < array.length; i++) { newArray[i] = array[i]; @@ -195,8 +193,7 @@ export class DropdownBasicExample extends BaseComponent<{}, { return newArray; } - @autobind - private _onSetFocusButtonClicked() { + private _onSetFocusButtonClicked = (): void => { if (this._basicDropdown.value) { this._basicDropdown.value.focus(true); } diff --git a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx index 553cdb6180bf44..691190302c099e 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx @@ -4,7 +4,6 @@ import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { Facepile, IFacepilePersona, IFacepileProps } from 'office-ui-fabric-react/lib/Facepile'; import { PersonaSize } from 'office-ui-fabric-react/lib/Persona'; import { Slider } from 'office-ui-fabric-react/lib/Slider'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { facepilePersonas } from './FacepileExampleData'; import './Facepile.Examples.scss'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; @@ -80,24 +79,21 @@ export class FacepileBasicExample extends React.Component<{}, IFacepileBasicExam ); } - @autobind - private _onChangeFadeIn(ev: React.FormEvent, checked: boolean): void { + private _onChangeFadeIn = (ev: React.FormEvent, checked: boolean): void => { this.setState((prevState: IFacepileBasicExampleState): IFacepileBasicExampleState => { prevState.imagesFadeIn = checked!; return prevState; }); } - @autobind - private _onChangePersonaNumber(value: number): void { + private _onChangePersonaNumber = (value: number): void => { this.setState((prevState: IFacepileBasicExampleState): IFacepileBasicExampleState => { prevState.numberOfFaces = value; return prevState; }); } - @autobind - private _onChangePersonaSize(value: IDropdownOption): void { + private _onChangePersonaSize = (value: IDropdownOption): void => { this.setState((prevState: IFacepileBasicExampleState): IFacepileBasicExampleState => { prevState.personaSize = value.key as PersonaSize; return prevState; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx index 7275e2cc966bfe..4b5ee203e29e48 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx @@ -6,7 +6,6 @@ import { } from 'office-ui-fabric-react/lib/Facepile'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { Slider } from 'office-ui-fabric-react/lib/Slider'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { facepilePersonas } from './FacepileExampleData'; import './Facepile.Examples.scss'; @@ -45,7 +44,7 @@ export class FacepileOverflowExample extends React.Component<{}, IFacepileOverfl return (
- +
{ this.setState((prevState: IFacepileOverflowExampleState): IFacepileOverflowExampleState => { prevState.displayedPersonas = value; return prevState; }); } - @autobind - private _onChangeType(value: IDropdownOption): void { + private _onChangeType = (value: IDropdownOption): void => { this.setState((prevState: IFacepileOverflowExampleState): IFacepileOverflowExampleState => { prevState.overflowButtonType = value.key as OverflowButtonType; return prevState; diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx index b4407acb7c3927..c235864294499d 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ -import { autobind } from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; import { Link } from 'office-ui-fabric-react/lib/Link'; @@ -85,29 +84,25 @@ export default class BoxNoClickExample extends React.Component { this.setState({ isToggled: true }); } - @autobind - private _onExitButtonClickHandler() { + private _onExitButtonClickHandler = (): void => { this.setState({ isToggled: false }); } - @autobind - private _onFocusTrapZoneToggleChanged(isToggled: boolean) { + private _onFocusTrapZoneToggleChanged = (isToggled: boolean): void => { this.setState({ isToggled: isToggled }, () => this._toggle.focus()); } - @autobind - private _setRef(toggle: IToggle): void { + private _setRef = (toggle: IToggle): void => { this._toggle = toggle; } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx index 0b6f3a9430ea99..6f3531818f0877 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ -import { autobind } from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; import { Link } from 'office-ui-fabric-react/lib/Link'; @@ -85,29 +84,25 @@ export default class BoxExample extends React.Component { this.setState({ isChecked: true }); } - @autobind - private _onExitButtonClickHandler() { + private _onExitButtonClickHandler = (): void => { this.setState({ isChecked: false }); } - @autobind - private _onFocusTrapZoneToggleChanged(isChecked: boolean) { + private _onFocusTrapZoneToggleChanged = (isChecked: boolean): void => { this.setState({ isChecked: isChecked }, () => this._toggle.focus()); } - @autobind - private _setRef(toggle: IToggle): void { + private _setRef = (toggle: IToggle): void => { this._toggle = toggle; } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx index b627b9fac39088..0eee480b8cb7af 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ -import { autobind } from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; import { Link } from 'office-ui-fabric-react/lib/Link'; @@ -85,29 +84,25 @@ export default class BoxExample extends React.Component { this.setState({ isChecked: true }); } - @autobind - private _onExitButtonClickHandler() { + private _onExitButtonClickHandler = (): void => { this.setState({ isChecked: false }); } - @autobind - private _onFocusTrapZoneToggleChanged(isChecked: boolean) { + private _onFocusTrapZoneToggleChanged = (isChecked: boolean): void => { this.setState({ isChecked: isChecked }, () => this._toggle.focus()); } - @autobind - private _setRef(toggle: IToggle): void { + private _setRef = (toggle: IToggle): void => { this._toggle = toggle; } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx index efa8515f811553..4c726df79e49e2 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import './FocusTrapZone.Box.Example.scss'; interface IFocusTrapComponentProps { @@ -53,13 +52,11 @@ class FocusTrapComponent extends React.Component { console.log(this.props.name); } - @autobind - private _onFocusTrapZoneToggleChanged(isChecked: boolean) { + private _onFocusTrapZoneToggleChanged = (isChecked: boolean): void => { this.props.setIsActive(this.props.name, isChecked); } @@ -100,14 +97,12 @@ export default class FocusTrapZoneNestedExample extends React.Component<{}, IFoc ); } - @autobind - private _setIsActive(name: string, isActive: boolean): void { + private _setIsActive = (name: string, isActive: boolean): void => { this.state.stateMap[name] = isActive; this.forceUpdate(); } - @autobind - private _randomize(): void { + private _randomize = (): void => { NAMES.forEach((name) => { this.state.stateMap[name] = Math.random() >= .5; }); diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx index 3e539dc9a96e7e..2968e13027b82a 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx @@ -7,7 +7,6 @@ import { IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard'; import { DetailsList, buildColumns, IColumn } from 'office-ui-fabric-react/lib/DetailsList'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { createListItems } from '@uifabric/example-app-base'; import './HoverCard.Example.scss'; @@ -47,8 +46,7 @@ export class HoverCardBasicExample extends BaseComponent<{}, IHoverCardExampleSt ); } - @autobind - private _onRenderItemColumn(item: any, index: number, column: IColumn) { + private _onRenderItemColumn = (item: any, index: number, column: IColumn): JSX.Element => { const expandingCardProps: IExpandingCardProps = { onRenderCompactCard: this._onRenderCompactCard, onRenderExpandedCard: this._onRenderExpandedCard, @@ -68,8 +66,7 @@ export class HoverCardBasicExample extends BaseComponent<{}, IHoverCardExampleSt return item[column.key]; } - @autobind - private _onRenderCompactCard(item: any): JSX.Element { + private _onRenderCompactCard = (item: any): JSX.Element => { return (
@@ -79,8 +76,7 @@ export class HoverCardBasicExample extends BaseComponent<{}, IHoverCardExampleSt ); } - @autobind - private _onRenderExpandedCard(item: any): JSX.Element { + private _onRenderExpandedCard = (item: any): JSX.Element => { const { items, columns } = this.state; return (
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx index 920820c64e1027..671e238b8d6c98 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx @@ -9,7 +9,6 @@ import { } from 'office-ui-fabric-react/lib/HoverCard'; import { DetailsList, buildColumns, IColumn } from 'office-ui-fabric-react/lib/DetailsList'; import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { createListItems } from '@uifabric/example-app-base'; import './HoverCard.Example.scss'; @@ -95,8 +94,7 @@ export class HoverCardTargetExample extends BaseComponent<{}, IHoverCardExampleS ); } - @autobind - private _onRenderItemColumn(item: any, index: number, column: IColumn) { + private _onRenderItemColumn = (item: any, index: number, column: IColumn): JSX.Element => { const expandingCardProps: IExpandingCardProps = { onRenderCompactCard: this._onRenderCompactCard, onRenderExpandedCard: this._onRenderExpandedCard, @@ -119,8 +117,7 @@ export class HoverCardTargetExample extends BaseComponent<{}, IHoverCardExampleS return item[column.key]; } - @autobind - private _onRenderCompactCard(item: any): JSX.Element { + private _onRenderCompactCard = (item: any): JSX.Element => { return (
@@ -130,8 +127,7 @@ export class HoverCardTargetExample extends BaseComponent<{}, IHoverCardExampleS ); } - @autobind - private _onRenderExpandedCard(item: any): JSX.Element { + private _onRenderExpandedCard = (item: any): JSX.Element => { const { items, columns } = this.state; return (
diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx index 3a0c18741663c4..535c03f86259ae 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; // tslint:disable-line:no-unused-variable import * as PropTypes from 'prop-types'; import './Layer.Example.scss'; import '../../../common/_exampleStyles.scss'; -import { autobind, BaseComponent } from '../../../Utilities'; +import { BaseComponent } from '../../../Utilities'; import { Checkbox } from '../../../Checkbox'; import { Layer } from '../Layer'; import { AnimationClassNames } from '../../../Styling'; @@ -87,7 +87,6 @@ export class LayerBasicExample extends BaseComponent<{}, { ); } - @autobind private _onChange(ev: React.FormEvent, checked: boolean): void { this.setState({ showLayer: checked }); } diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx index e166d97068141d..3844df57722294 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Checkbox } from '../../../Checkbox'; import { Layer } from '../Layer'; import { LayerHost } from '../LayerHost'; @@ -98,18 +97,15 @@ export class LayerHostedExample extends React.Component<{}, { }; } - @autobind - private _onChangeCheckbox(ev: React.FormEvent, checked: boolean): void { + private _onChangeCheckbox = (ev: React.FormEvent, checked: boolean): void => { this.setState({ showLayer: checked }); } - @autobind - private _onChangeCheckboxNoId(ev: React.FormEvent, checked: boolean): void { + private _onChangeCheckboxNoId = (ev: React.FormEvent, checked: boolean): void => { this.setState({ showLayerNoId: checked }); } - @autobind - private _onChangeToggle(checked: boolean): void { + private _onChangeToggle = (checked: boolean): void => { this.setState({ showHost: checked }); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx index 2b9b9f5bac47ae..0d735d05bca597 100644 --- a/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx @@ -3,7 +3,6 @@ import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; import { List } from 'office-ui-fabric-react/lib/List'; import './List.Grid.Example.scss'; import { IRectangle } from '../../../Utilities'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; export interface IListGridExampleProps { items: any[]; @@ -53,8 +52,7 @@ export class ListGridExample extends React.Component { return this._rowHeight * ROWS_PER_PAGE; } - @autobind - private _onRenderCell(item: any, index: number | undefined): JSX.Element { + private _onRenderCell = (item: any, index: number | undefined): JSX.Element => { return (
{ this._scroll(parseInt(value, 10) || 0); } @@ -114,8 +112,7 @@ export class ListScrollingExample extends React.Component { this._list = list; } } diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx index 562246634a0926..4396c07dabcf4f 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; /* tslint:enable:no-unused-variable */ import { - autobind, css, createArray } from 'office-ui-fabric-react/lib/Utilities'; @@ -97,8 +96,7 @@ export class MarqueeSelectionBasicExample extends React.Component<{}, IMarqueeSe }; } - @autobind - private _onChange(ev: React.FormEvent, isMarqueeEnabled: boolean | undefined): void { + private _onChange = (ev: React.FormEvent, isMarqueeEnabled: boolean | undefined): void => { this.setState({ isMarqueeEnabled: isMarqueeEnabled! }); } } diff --git a/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx index 518747a0028d7d..89520fea9692b2 100644 --- a/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { Modal } from 'office-ui-fabric-react/lib/Modal'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import './Modal.Basic.Example.scss'; @@ -44,13 +43,11 @@ export class ModalBasicExample extends React.Component<{}, { ); } - @autobind - private _showModal() { + private _showModal = (): void => { this.setState({ showModal: true }); } - @autobind - private _closeModal() { + private _closeModal = (): void => { this.setState({ showModal: false }); } } diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx index 5e232b15d8f3ce..cba3b6f29748b4 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - autobind, IStyleFunction, classNamesFunction } from '../../../Utilities'; @@ -48,13 +47,11 @@ export class OverlayDarkExample extends React.Component<{}, { ); } - @autobind - private _setVisibilityFalse(): void { + private _setVisibilityFalse = (): void => { this.setState({ isOverlayVisible: false }); } - @autobind - private _toggleOverlay(): void { + private _toggleOverlay = (): void => { this.setState({ isOverlayVisible: !this.state.isOverlayVisible }); } } diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx index b563f5cba3af65..f44d9952d98f19 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - autobind, IStyleFunction, classNamesFunction } from '../../../Utilities'; @@ -45,13 +44,11 @@ export class OverlayLightExample extends React.Component<{}, { ); } - @autobind - private _setVisibilityFalse(): void { + private _setVisibilityFalse = (): void => { this.setState({ isOverlayVisible: false }); } - @autobind - private _toggleOverlay(): void { + private _toggleOverlay = (): void => { this.setState({ isOverlayVisible: !this.state.isOverlayVisible }); } } diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx index 11134b820cde5a..8a715860124344 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; @@ -35,13 +34,11 @@ export class PanelCustomExample extends React.Component<{}, { ); } - @autobind - private _showPanel() { + private _showPanel = (): void => { this.setState({ showPanel: true }); } - @autobind - private _closePanel() { + private _closePanel = (): void => { this.setState({ showPanel: false }); } } diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx index bd23e00a20d595..ebae074445ab29 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; @@ -39,8 +38,7 @@ export class PanelFooterExample extends React.Component<{}, { this.setState({ showPanel: false }); } - @autobind - private _onRenderFooterContent(): JSX.Element { + private _onRenderFooterContent = (): JSX.Element => { return (
{ this.setState({ showPanel: true }); } - @autobind - private _hidePanel(): void { + private _hidePanel = (): void => { this.setState({ showPanel: false }); } } diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx index a4029f3ace0702..afa1b898d6f7f0 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; @@ -34,13 +33,11 @@ export class PanelLargeFixedExample extends React.Component<{}, { ); } - @autobind - private _showPanel() { + private _showPanel = (): void => { this.setState({ showPanel: true }); } - @autobind - private _closePanel() { + private _closePanel = (): void => { this.setState({ showPanel: false }); } } diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx index cb7279fa95dee1..2c23cb51c71624 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel } from 'office-ui-fabric-react/lib/Panel'; @@ -32,13 +31,11 @@ export class PanelLightDismissExample extends React.Component<{}, { ); } - @autobind - private _showPanel(): void { + private _showPanel = (): void => { this.setState({ showPanel: true }); } - @autobind - private _hidePanel(): void { + private _hidePanel = (): void => { this.setState({ showPanel: false }); } } diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx index c0782acbc4ce1f..0ecb89095af436 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel } from 'office-ui-fabric-react/lib/Panel'; @@ -55,28 +54,23 @@ export class PanelLightDismissCustomExample extends React.Component<{}, { ); } - @autobind - private _showPanel(): void { + private _showPanel = (): void => { this.setState({ showPanel: true }); } - @autobind - private _hidePanel(): void { + private _hidePanel = (): void => { this.setState({ showPanel: false }); } - @autobind - private _showDialog() { + private _showDialog = (): void => { this.setState({ hideDialog: false }); } - @autobind - private _closeDialog() { + private _closeDialog = (): void => { this.setState({ hideDialog: true }); } - @autobind - private _closeDialogAndHidePanel() { + private _closeDialogAndHidePanel = (): void => { this._hidePanel(); this._closeDialog(); } diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx index 0e3eb9b6e64e99..68c5573a2ca411 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; @@ -32,8 +31,7 @@ export class PanelMediumExample extends React.Component<{}, { ); } - @autobind - private _setShowPanel(showPanel: boolean): () => void { + private _setShowPanel = (showPanel: boolean): () => void => { return (): void => { this.setState({ showPanel }); }; diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx index b9ed464d5b1c6b..23fa0bec46f29a 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; @@ -33,8 +32,7 @@ export class PanelNonModalExample extends React.Component<{}, { ); } - @autobind - private _setShowPanel(showPanel: boolean): () => void { + private _setShowPanel = (showPanel: boolean): () => void => { return (): void => { this.setState({ showPanel }); }; diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx index 0f0edec1320914..c51e9dbacd31e9 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup'; import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; @@ -62,13 +61,11 @@ export class PanelSmallRightExample extends React.Component<{}, { ); } - @autobind - private _onClosePanel(): void { + private _onClosePanel = (): void => { this.setState({ showPanel: false }); } - @autobind - private _onRenderFooterContent(): JSX.Element { + private _onRenderFooterContent = (): JSX.Element => { return (
{ this.setState({ showPanel: true }); } } diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx index 6fa37608e63e8d..b7cdd24779170f 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { Persona, PersonaSize, @@ -111,8 +110,7 @@ export class PersonaBasicExample extends React.Component<{}, { ); } - @autobind - private _onChange(ev: React.FormEvent | undefined, checked: boolean | undefined): void { + private _onChange = (ev: React.FormEvent | undefined, checked: boolean | undefined): void => { this.setState({ renderPersonaDetails: checked }); } } diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx index ce4f2453832075..9aaf14c66b3eda 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { IPersonaProps, Persona, @@ -37,8 +36,7 @@ export class PersonaCustomCoinRenderExample extends React.Component { ); } - @autobind - private _onRenderCoin(props: IPersonaProps): JSX.Element { + private _onRenderCoin = (props: IPersonaProps): JSX.Element => { const { coinSize, imageUrl, diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx index b99926597cf89e..dacf8cc58ee085 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { IPersonaProps, Persona, @@ -37,8 +36,7 @@ export class PersonaCustomRenderExample extends React.Component { ); } - @autobind - private _onRenderSecondaryText(props: IPersonaProps): JSX.Element { + private _onRenderSecondaryText = (props: IPersonaProps): JSX.Element => { return (
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx index dca3616205a325..7a8bdbf4b0c1f5 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; export class PivotSeparateExample extends React.Component { public state = { selectedKey: 'rectangleRed' }; @@ -32,15 +31,13 @@ export class PivotSeparateExample extends React.Component { ); } - @autobind - private _handleLinkClick(item: PivotItem): void { + private _handleLinkClick = (item: PivotItem): void => { this.setState({ selectedKey: item.props.itemKey }); } - @autobind - private _getTabId(itemKey: string): string { + private _getTabId = (itemKey: string): string => { return `ShapeColorPivot_${itemKey}`; } } diff --git a/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx index 7c433b38283a42..495322f8fe22c8 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { Rating, RatingSize @@ -119,29 +118,25 @@ export class RatingBasicExample extends React.Component<{}, { ); } - @autobind - private _onLargeStarChanged(rating: number) { + private _onLargeStarChanged = (rating: number): void => { this.setState({ largeStarRating: rating }); } - @autobind - private _onSmallStarChanged(rating: number) { + private _onSmallStarChanged = (rating: number): void => { this.setState({ smallStarRating: rating }); } - @autobind - private _onTenStarChanged(rating: number) { + private _onTenStarChanged = (rating: number): void => { this.setState({ tenStarRating: rating }); } - @autobind - private _onThemedStarChanged(rating: number) { + private _onThemedStarChanged = (rating: number): void => { this.setState({ themedStarRating: rating }); diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx index 196ab527f905e2..4fff978345fb7c 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { BaseComponent, autobind } from 'office-ui-fabric-react/lib/Utilities'; +import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { ResizeGroup } from 'office-ui-fabric-react/lib/ResizeGroup'; import { OverflowSet } from '../../OverflowSet'; @@ -131,8 +131,7 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou ); } - @autobind - private _onReduceData(currentData: any): any { + private _onReduceData = (currentData: any): any => { if (currentData.primary.length === 0) { return undefined; } @@ -147,8 +146,7 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou return { primary, overflow, cacheKey }; } - @autobind - private _onGrowData(currentData: any): any { + private _onGrowData = (currentData: any): any => { if (currentData.overflow.length === 0) { return undefined; } @@ -163,23 +161,19 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou return { primary, overflow, cacheKey }; } - @autobind - private _onCachingEnabledChanged(_: React.FormEvent, checked: boolean) { + private _onCachingEnabledChanged = (_: React.FormEvent, checked: boolean): void => { this.setState({ cachingEnabled: checked }); } - @autobind - private _onGrowDataEnabledChanged(_: React.FormEvent, checked: boolean) { + private _onGrowDataEnabledChanged = (_: React.FormEvent, checked: boolean): void => { this.setState({ onGrowDataEnabled: checked }); } - @autobind - private _onButtonsCheckedChanged(_: React.FormEvent, checked: boolean) { + private _onButtonsCheckedChanged = (_: React.FormEvent, checked: boolean): void => { this.setState({ buttonsChecked: checked }); } - @autobind - private _onNumberOfItemsChanged(option: IDropdownOption) { + private _onNumberOfItemsChanged = (option: IDropdownOption): void => { this.setState({ numberOfItems: parseInt(option.text, 10) }); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx index 818f76a8c9b480..8337417c498d0b 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { TextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { Callout } from 'office-ui-fabric-react/lib/Callout'; import './TextField.Examples.scss'; @@ -27,8 +26,7 @@ export class TextFieldCustomRenderExample extends React.Component<{}, { ); } - @autobind - private _onRenderLabel(props: ITextFieldProps): JSX.Element { + private _onRenderLabel = (props: ITextFieldProps): JSX.Element => { const { isCalloutVisible } = this.state; return ( @@ -56,15 +54,13 @@ export class TextFieldCustomRenderExample extends React.Component<{}, { } - @autobind - private _onClick(): void { + private _onClick = (): void => { this.setState({ isCalloutVisible: !this.state.isCalloutVisible }); } - @autobind - private _onDismiss() { + private _onDismiss = (): void => { this.setState({ isCalloutVisible: false }); diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx index ec8da214e51e3b..e886d1d56aa40d 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; import './TextField.Examples.scss'; export class TextFieldIconExample extends React.Component { @@ -16,8 +15,7 @@ export class TextFieldIconExample extends React.Component { ); } - @autobind - private _onChanged(text: string) { + private _onChanged = (text: string): void => { console.log(text); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx index c6057aa9bdece3..67b7a34a4754b4 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.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 { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; @@ -313,27 +312,23 @@ export class PeoplePickerTypesExample extends BaseComponent { this.setState({ currentSelectedItems: items }); } - @autobind - private _onSetFocusButtonClicked() { + private _onSetFocusButtonClicked = (): void => { if (this._picker) { this._picker.focusInput(); } } - @autobind - private _renderFooterText(): JSX.Element { + private _renderFooterText = (): JSX.Element => { return
No additional results
; } - @autobind - private _onRemoveSuggestion(item: IPersonaProps): void { + private _onRemoveSuggestion = (item: IPersonaProps): void => { const { peopleList, mostRecentlyUsed: mruState } = this.state; const indexPeopleList: number = peopleList.indexOf(item); const indexMostRecentlyUsed: number = mruState.indexOf(item); @@ -349,15 +344,13 @@ export class PeoplePickerTypesExample extends BaseComponent => { const processedItem = Object.assign({}, item); processedItem.primaryText = `${item.primaryText} (selected)`; return new Promise((resolve, reject) => setTimeout(() => resolve(processedItem), 250)); } - @autobind - private _onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number) { + private _onFilterChanged = (filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): IPersonaProps[] | Promise => { if (filterText) { let filteredPersonas: IPersonaProps[] = this._filterPersonasByText(filterText); @@ -369,23 +362,20 @@ export class PeoplePickerTypesExample extends BaseComponent { + private _returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise => { let { mostRecentlyUsed } = this.state; mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, currentPersonas); return this._filterPromise(mostRecentlyUsed); } - @autobind - private _returnMostRecentlyUsedWithLimit(currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise { + private _returnMostRecentlyUsedWithLimit = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise => { let { mostRecentlyUsed } = this.state; mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, currentPersonas); mostRecentlyUsed = mostRecentlyUsed.splice(0, 3); return this._filterPromise(mostRecentlyUsed); } - @autobind - private _onFilterChangedWithLimit(filterText: string, currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise { + private _onFilterChangedWithLimit = (filterText: string, currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise => { return this._onFilterChanged(filterText, currentPersonas, 3); } @@ -420,18 +410,15 @@ export class PeoplePickerTypesExample extends BaseComponent !this._listContainsPersona(persona, possibleDupes)); } - @autobind - private _toggleDelayResultsChange(toggleState: boolean) { + private _toggleDelayResultsChange = (toggleState: boolean): void => { this.setState({ delayResults: toggleState }); } - @autobind - private _dropDownSelected(option: IDropdownOption) { + private _dropDownSelected = (option: IDropdownOption): void => { this.setState({ currentPicker: option.key }); } - @autobind - private _validateInput(input: string) { + private _validateInput = (input: string): ValidationState => { if (input.indexOf('@') !== -1) { return ValidationState.valid; } else if (input.length > 1) { diff --git a/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx index 99795d8ac93cd3..5fc74fd7b6acc9 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { autobind } from '../../../Utilities'; import { IDocumentCardActionsProps, IDocumentCardPreviewProps, @@ -377,8 +376,7 @@ export class PickerCustomResultExample extends React.Component<{}, IPeoplePicker return props.documentTitleProps.title; } - @autobind - private _onDisabledButtonClick(): void { + private _onDisabledButtonClick = (): void => { this.setState({ isPickerDisabled: !this.state.isPickerDisabled }); diff --git a/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx index 9a92e82bbd00f2..3b6c4172fa035e 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - autobind, BaseComponent } from '../../../Utilities'; import { TagPicker } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker'; @@ -93,26 +92,22 @@ export class TagPickerBasicExample extends BaseComponent<{}, ITagPickerDemoPageS return item.name; } - @autobind - private _onDisabledButtonClick(): void { + private _onDisabledButtonClick = (): void => { this.setState({ isPickerDisabled: !this.state.isPickerDisabled }); } - @autobind - private _onFilterChanged(filterText: string, tagList: { key: string, name: string }[]) { + private _onFilterChanged = (filterText: string, tagList: { key: string, name: string }[]): { key: string, name: string }[] => { return filterText ? _testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) .filter(tag => !this._listContainsDocument(tag, tagList)) : []; } - @autobind - private _onFilterChangedNoFilter(filterText: string, tagList: { key: string, name: string }[]) { + private _onFilterChangedNoFilter = (filterText: string, tagList: { key: string, name: string }[]): { key: string, name: string }[] => { return filterText ? _testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : []; } - @autobind - private _onItemSelected(item: any) { + private _onItemSelected = (item: { key: string, name: string }): { key: string, name: string } | null => { if (this._listContainsDocument(item, this._picker.items)) { return null; } From fd222efb699fae379b793bfb8326179f532a634f Mon Sep 17 00:00:00 2001 From: Mark Polak Date: Wed, 21 Mar 2018 08:02:37 +0100 Subject: [PATCH 2/2] Npm change files --- .../more-autobind-removals_2018-03-21-07-02.json | 11 +++++++++++ .../more-autobind-removals_2018-03-21-07-02.json | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/experiments/more-autobind-removals_2018-03-21-07-02.json create mode 100644 common/changes/office-ui-fabric-react/more-autobind-removals_2018-03-21-07-02.json diff --git a/common/changes/@uifabric/experiments/more-autobind-removals_2018-03-21-07-02.json b/common/changes/@uifabric/experiments/more-autobind-removals_2018-03-21-07-02.json new file mode 100644 index 00000000000000..20aa33def94c42 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/more-autobind-removals_2018-03-21-07-02.json b/common/changes/office-ui-fabric-react/more-autobind-removals_2018-03-21-07-02.json new file mode 100644 index 00000000000000..cec31638907750 --- /dev/null +++ b/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" +} \ No newline at end of file