import React from 'react';

const noop = () => {};

/**
 * Styled button element.
 */
export default class Button extends React.Component {
  static propTypes = {
    className: React.PropTypes.string,
    style: React.PropTypes.object,
    text: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    onClick: React.PropTypes.func
  };
  static defaultProps = {
    className: '',
    style: {},
    text: '',
    disabled: false,
    onClick: noop
  };

  /**
   * For accessibility compatibility: by default, after clicking on the button, the DOM element
   * will still remain in focus. This workaround forces the DOM to un-focus the element after
   * mousing out, so that the focus style does not clash with the hover style.
   */
  handleMouseOut() {
    if (this.button) {
      this.button.blur();
    }
  }

  render() {
    const {className, style, text, disabled, onClick} = this.props;

    return (
      <button
        ref={(elem) => {
          this.button = elem;
        }}
        className={`button ${disabled ? 'disabled' : ''} ${className}`}
        style={style}
        onClick={disabled ? noop : onClick}
        onMouseOut={this.handleMouseOut.bind(this)}
      >
        {text}
      </button>
    );
  }
}

@@ -462,14 +462,124 @@
 %7D;%0A%0A
+  constructor(props) %7B%0A    super(props);%0A%0A    this.setRef = this.setRef.bind(this);%0A    this.state = %7B%7D;%0A  %7D%0A%0A
   /**%0A
-
    *
@@ -878,50 +878,167 @@
     
-if (this.button) %7B%0A      this.button.blur(
+const %7Bbutton%7D = this.state;%0A%0A    if (button) %7B%0A      button.blur();%0A    %7D%0A  %7D%0A%0A  setRef(ref) %7B%0A    if (!this.state.button) %7B%0A      this.setState(%7Bbutton: ref%7D
 );%0A 
@@ -1173,59 +1173,19 @@
 ef=%7B
-(elem) =%3E %7B%0A          this.button = elem;%0A        %7D
+this.setRef
 %7D%0A  

Set button ref in state; resolves T1/LINKR-DEMO-B/#8