BaseButton: removing autobind usage

common/changes/office-ui-fabric-react/button-autobind_2018-03-15-01-06.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "BaseButton: removing autobind usage.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx

@@ -4,7 +4,6 @@ import {
   IRenderFunction,
   anchorProperties,
   assign,
-  autobind,
   buttonProperties,
   getId,
   getNativeProps,
@@ -248,8 +247,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return Content;
   }
 
-  @autobind
-  private _onRenderIcon(buttonProps?: IButtonProps, defaultRender?: IRenderFunction<IButtonProps>): JSX.Element | null {
+  private _onRenderIcon = (buttonProps?: IButtonProps, defaultRender?: IRenderFunction<IButtonProps>): JSX.Element | null => {
     const {
       iconProps
     } = this.props;
@@ -265,8 +263,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return null;
   }
 
-  @autobind
-  private _onRenderTextContents(): JSX.Element | (JSX.Element | null)[] {
+  private _onRenderTextContents = (): JSX.Element | (JSX.Element | null)[] => {
     const {
       text,
       children,
@@ -291,8 +288,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     ]);
   }
 
-  @autobind
-  private _onRenderText(): JSX.Element | null {
+  private _onRenderText = (): JSX.Element | null => {
     let {
       text
     } = this.props;
@@ -320,8 +316,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return null;
   }
 
-  @autobind
-  private _onRenderChildren(): JSX.Element | null {
+  private _onRenderChildren = (): JSX.Element | null => {
     const { children } = this.props;
 
     // If children is just a string, either it or the text will be rendered via onRenderLabel
@@ -333,11 +328,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return children as any;
   }
 
-  @autobind
-  private _onRenderDescription(props: IButtonProps) {
+  private _onRenderDescription = (props: IButtonProps) => {
     const {
       description
-    } = this.props;
+    } = props;
 
     // ms-Button-description is only shown when the button type is compound.
     // In other cases it will not be displayed.
@@ -354,8 +348,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       );
   }
 
-  @autobind
-  private _onRenderAriaDescription() {
+  private _onRenderAriaDescription = () => {
     const {
       ariaDescription
     } = this.props;
@@ -369,8 +362,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       );
   }
 
-  @autobind
-  private _onRenderMenuIcon(props: IButtonProps): JSX.Element | null {
+  private _onRenderMenuIcon = (props: IButtonProps): JSX.Element | null => {
     const {
       menuIconProps
     } = this.props;
@@ -386,8 +378,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     );
   }
 
-  @autobind
-  private _onRenderMenu(menuProps: IContextualMenuProps): JSX.Element {
+  private _onRenderMenu = (menuProps: IContextualMenuProps): JSX.Element => {
     const { onDismiss = this._dismissMenu } = menuProps;
 
     return (
@@ -403,13 +394,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     );
   }
 
-  @autobind
-  private _dismissMenu(): void {
+  private _dismissMenu = (): void => {
     this.setState({ menuProps: null });
   }
 
-  @autobind
-  private _onToggleMenu(): void {
+  private _onToggleMenu = (): void => {
     const { menuProps } = this.props;
     const currentMenuProps = this.state.menuProps;
     this.setState({ menuProps: currentMenuProps ? null : menuProps });
@@ -500,17 +489,15 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   }
 
-  @autobind
-  private _onMouseDown(ev: React.MouseEvent<BaseButton>) {
+  private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {
     if (this.props.onMouseDown) {
       this.props.onMouseDown(ev);
     }
 
     ev.preventDefault();
   }
 
-  @autobind
-  private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) {
+  private _onMenuKeyDown = (ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) => {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
     }
@@ -529,8 +516,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     }
   }
 
-  @autobind
-  private _onMenuClick(ev: React.MouseEvent<HTMLAnchorElement>) {
+  private _onMenuClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
     const { onMenuClick } = this.props;
     if (onMenuClick) {
       onMenuClick(ev, this);

packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx

@@ -6,9 +6,6 @@ import {
   IButtonBasicExampleStyleProps,
   IButtonBasicExampleStyles
 } from './Button.Basic.Example.styles';
-import {
-  autobind
-} from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton, PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export interface IButtonSwapExampleState {
@@ -79,13 +76,11 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
     );
   }
 
-  @autobind
-  private _setButtonRef(ref: any): void {
+  private _setButtonRef = (ref: any): void => {
     this.buttonRef = ReactDOM.findDOMNode(ref) as HTMLElement;
   }
 
-  @autobind
-  private _onClick(): void {
+  private _onClick = (): void => {
     // change the button type on click
     this.setState({ isPrimary: !this.state.isPrimary });
   }