Convert ReactDOMButton

src/renderers/dom/client/wrappers/ReactDOMButton.js

@@ -11,52 +11,40 @@
 
 'use strict';
 
-var AutoFocusUtils = require('AutoFocusUtils');
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
-var ReactClass = require('ReactClass');
-var ReactElement = require('ReactElement');
-
-var keyMirror = require('keyMirror');
-
-var button = ReactElement.createFactory('button');
-
-var mouseListenerNames = keyMirror({
+var mouseListenerNames = {
   onClick: true,
   onDoubleClick: true,
   onMouseDown: true,
   onMouseMove: true,
   onMouseUp: true,
+
   onClickCapture: true,
   onDoubleClickCapture: true,
   onMouseDownCapture: true,
   onMouseMoveCapture: true,
   onMouseUpCapture: true,
-});
+};
 
 /**
  * Implements a <button> native component that does not receive mouse events
  * when `disabled` is set.
  */
-var ReactDOMButton = ReactClass.createClass({
-  displayName: 'ReactDOMButton',
-  tagName: 'BUTTON',
-
-  mixins: [AutoFocusUtils.Mixin, ReactBrowserComponentMixin],
-
-  render: function() {
-    var props = {};
+var ReactDOMButton = {
+  getNativeProps: function(inst, props, context) {
+    if (!props.disabled) {
+      return props;
+    }
 
-    // Copy the props; except the mouse listeners if we're disabled
-    for (var key in this.props) {
-      if (this.props.hasOwnProperty(key) &&
-          (!this.props.disabled || !mouseListenerNames[key])) {
-        props[key] = this.props[key];
+    // Copy the props, except the mouse listeners
+    var nativeProps = {};
+    for (var key in props) {
+      if (props.hasOwnProperty(key) && !mouseListenerNames[key]) {
+        nativeProps[key] = props[key];
       }
     }
 
-    return button(props, this.props.children);
+    return nativeProps;
   },
-
-});
+};
 
 module.exports = ReactDOMButton;

src/renderers/dom/shared/ReactDOMComponent.js

@@ -21,6 +21,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
 var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
 var ReactComponentBrowserEnvironment =
   require('ReactComponentBrowserEnvironment');
+var ReactDOMButton = require('ReactDOMButton');
 var ReactDOMInput = require('ReactDOMInput');
 var ReactDOMTextarea = require('ReactDOMTextarea');
 var ReactMount = require('ReactMount');
@@ -284,6 +285,9 @@ ReactDOMComponent.Mixin = {
     var props = this._currentElement.props;
 
     switch (this._tag) {
+      case 'button':
+        props = ReactDOMButton.getNativeProps(this, props, context);
+        break;
       case 'input':
         ReactDOMInput.mountWrapper(this, props);
         props = ReactDOMInput.getNativeProps(this, props, context);
@@ -309,6 +313,7 @@ ReactDOMComponent.Mixin = {
     var tagContent = this._createContentMarkup(transaction, props, context);
 
     switch (this._tag) {
+      case 'button':
       case 'input':
       case 'textarea':
         if (props.autoFocus) {
@@ -465,6 +470,10 @@ ReactDOMComponent.Mixin = {
     var nextProps = this._currentElement.props;
 
     switch (this._tag) {
+      case 'button':
+        lastProps = ReactDOMButton.getNativeProps(this, lastProps);
+        nextProps = ReactDOMButton.getNativeProps(this, nextProps);
+        break;
       case 'input':
         ReactDOMInput.updateWrapper(this);
         lastProps = ReactDOMInput.getNativeProps(this, lastProps);

src/renderers/dom/shared/ReactDefaultInjection.js

@@ -24,7 +24,6 @@ var ReactComponentBrowserEnvironment =
   require('ReactComponentBrowserEnvironment');
 var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
 var ReactDOMComponent = require('ReactDOMComponent');
-var ReactDOMButton = require('ReactDOMButton');
 var ReactDOMForm = require('ReactDOMForm');
 var ReactDOMImg = require('ReactDOMImg');
 var ReactDOMIDOperations = require('ReactDOMIDOperations');
@@ -110,7 +109,6 @@ function inject() {
   ReactInjection.Class.injectMixin(ReactBrowserComponentMixin);
 
   ReactInjection.NativeComponent.injectComponentClasses({
-    'button': ReactDOMButton,
     'form': ReactDOMForm,
     'iframe': ReactDOMIframe,
     'img': ReactDOMImg,