Merge pull request #1733 from hross/add-button-focus-example

Button: Add button focus swap example

common/changes/add-button-focus-example_2017-05-05-17-41.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Button: Add button example",
+      "type": "patch"
+    }
+  ],
+  "email": "hross@hross.net"
+}

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

@@ -14,6 +14,7 @@ import { ButtonCommandExample } from './examples/Button.Command.Example';
 import { ButtonIconExample } from './examples/Button.Icon.Example';
 import { ButtonAnchorExample } from './examples/Button.Anchor.Example';
 import { ButtonScreenReaderExample } from './examples/Button.ScreenReader.Example';
+import { ButtonSwapExample } from './examples/Button.Swap.Example';
 import { IButtonDemoPageState } from './examples/IButtonDemoPageState';
 import './examples/Button.Basic.Example.scss';
 import { Link } from '../../Link';
@@ -26,6 +27,7 @@ const ButtonIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/co
 const ButtonAnchorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx') as string;
 const ButtonScreenReaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx') as string;
 const ButtonContextualMenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx') as string;
+const ButtonSwapExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx') as string;
 
 export class ButtonPage extends React.Component<IComponentDemoPageProps, IButtonDemoPageState> {
   constructor() {
@@ -67,6 +69,9 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, IButton
             <ExampleCard title='Button with Aria Description for Screen Reader' code={ ButtonScreenReaderExampleCode }>
               <ButtonScreenReaderExample disabled={ this.state.areButtonsDisabled } />
             </ExampleCard>
+            <ExampleCard title='Button Swap with Focus State' code={ ButtonSwapExampleCode }>
+              <ButtonSwapExample disabled={ this.state.areButtonsDisabled } />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import {
+  autobind
+} from 'office-ui-fabric-react/lib/Utilities';
+import { DefaultButton, PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+
+export interface IButtonSwapExampleState {
+  isPrimary: boolean;
+}
+
+export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwapExampleState> {
+  private buttonRef: HTMLElement;
+  private hasFocus: boolean;
+
+  public constructor() {
+    super();
+
+    this.hasFocus = false;
+    this.buttonRef = null;
+    this.state = {
+      isPrimary: true
+    };
+  }
+
+  public componentWillUpdate(nextProps: IButtonProps, nextState: IButtonSwapExampleState): void {
+    // check to see if our button element has focus
+    this.hasFocus = document.activeElement === this.buttonRef;
+  }
+
+  public componentDidUpdate(prevProps: IButtonProps, prevState: IButtonSwapExampleState): void {
+    // if our button previously had focus but we lost it
+    // because we switched the control type, we need to set focus again
+    if (this.hasFocus && document.activeElement !== this.buttonRef) {
+      this.buttonRef.focus();
+    }
+  }
+
+  public render() {
+    let { isPrimary } = this.state;
+    let { disabled } = this.props;
+    let text = 'Swap';
+
+    // determine which button to render
+    let button = isPrimary
+      ? <PrimaryButton
+        ref={ this._setButtonRef }
+        disabled={ disabled }
+        onClick={ this._onClick }>
+        { text }
+      </PrimaryButton>
+      : <DefaultButton
+        ref={ this._setButtonRef }
+        disabled={ disabled }
+        onClick={ this._onClick }>
+        { text }
+      </DefaultButton>;
+
+    return (
+      <div className='ms-BasicButtonsExample'>
+        <Label>Click to swap button types</Label>
+        { button }
+      </div>
+    );
+  }
+
+  @autobind
+  private _setButtonRef(ref: React.ReactInstance): void {
+    this.buttonRef = ReactDOM.findDOMNode(ref) as HTMLElement;
+  }
+
+  @autobind
+  private _onClick(): void {
+    // change the button type on click
+    this.setState({ isPrimary: !this.state.isPrimary });
+  }
+}