Convert ReactDOMButton
Ben Alpert committed
Jun 4, 2015 at 13:56 UTC
9dbc29e27607088e19bb9c74167078375f34ba04
3 files changed
+24
-29
src/renderers/dom/client/wrappers/ReactDOMButton.js
+15
-27
@@ -11,52 +11,40 @@
11
12
'use strict';
13
14
-var AutoFocusUtils = require('AutoFocusUtils');
15
-var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
16
-var ReactClass = require('ReactClass');
17
-var ReactElement = require('ReactElement');
18
-
19
-var keyMirror = require('keyMirror');
20
-
21
-var button = ReactElement.createFactory('button');
22
-
23
-var mouseListenerNames = keyMirror({
14
+var mouseListenerNames = {
15
onClick: true,
16
onDoubleClick: true,
17
onMouseDown: true,
18
onMouseMove: true,
19
onMouseUp: true,
20
+
21
onClickCapture: true,
22
onDoubleClickCapture: true,
23
onMouseDownCapture: true,
24
onMouseMoveCapture: true,
25
onMouseUpCapture: true,
34
-});
26
+};
27
28
/**
29
* Implements a <button> native component that does not receive mouse events
30
* when `disabled` is set.
31
*/
40
-var ReactDOMButton = ReactClass.createClass({
41
- displayName: 'ReactDOMButton',
42
- tagName: 'BUTTON',
43
-
44
- mixins: [AutoFocusUtils.Mixin, ReactBrowserComponentMixin],
45
-
46
- render: function() {
47
- var props = {};
32
+var ReactDOMButton = {
33
+ getNativeProps: function(inst, props, context) {
34
+ if (!props.disabled) {
35
+ return props;
36
+ }
37
49
- // Copy the props; except the mouse listeners if we're disabled
50
- for (var key in this.props) {
51
- if (this.props.hasOwnProperty(key) &&
52
- (!this.props.disabled || !mouseListenerNames[key])) {
53
- props[key] = this.props[key];
38
+ // Copy the props, except the mouse listeners
39
+ var nativeProps = {};
40
+ for (var key in props) {
41
+ if (props.hasOwnProperty(key) && !mouseListenerNames[key]) {
42
+ nativeProps[key] = props[key];
43
}
44
}
45
57
- return button(props, this.props.children);
46
+ return nativeProps;
47
},
59
-
60
-});
48
+};
49
50
module.exports = ReactDOMButton;
src/renderers/dom/shared/ReactDOMComponent.js
+9
@@ -21,6 +21,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
21
var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
22
var ReactComponentBrowserEnvironment =
23
require('ReactComponentBrowserEnvironment');
24
+var ReactDOMButton = require('ReactDOMButton');
25
var ReactDOMInput = require('ReactDOMInput');
26
var ReactDOMTextarea = require('ReactDOMTextarea');
27
var ReactMount = require('ReactMount');
@@ -284,6 +285,9 @@ ReactDOMComponent.Mixin = {
285
var props = this._currentElement.props;
286
287
switch (this._tag) {
288
+ case 'button':
289
+ props = ReactDOMButton.getNativeProps(this, props, context);
290
+ break;
291
case 'input':
292
ReactDOMInput.mountWrapper(this, props);
293
props = ReactDOMInput.getNativeProps(this, props, context);
@@ -309,6 +313,7 @@ ReactDOMComponent.Mixin = {
313
var tagContent = this._createContentMarkup(transaction, props, context);
314
315
switch (this._tag) {
316
+ case 'button':
317
case 'input':
318
case 'textarea':
319
if (props.autoFocus) {
@@ -465,6 +470,10 @@ ReactDOMComponent.Mixin = {
470
var nextProps = this._currentElement.props;
471
472
switch (this._tag) {
473
+ case 'button':
474
+ lastProps = ReactDOMButton.getNativeProps(this, lastProps);
475
+ nextProps = ReactDOMButton.getNativeProps(this, nextProps);
476
+ break;
477
case 'input':
478
ReactDOMInput.updateWrapper(this);
479
lastProps = ReactDOMInput.getNativeProps(this, lastProps);
src/renderers/dom/shared/ReactDefaultInjection.js
-2
@@ -24,7 +24,6 @@ var ReactComponentBrowserEnvironment =
24
require('ReactComponentBrowserEnvironment');
25
var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
26
var ReactDOMComponent = require('ReactDOMComponent');
27
-var ReactDOMButton = require('ReactDOMButton');
27
var ReactDOMForm = require('ReactDOMForm');
28
var ReactDOMImg = require('ReactDOMImg');
29
var ReactDOMIDOperations = require('ReactDOMIDOperations');
@@ -110,7 +109,6 @@ function inject() {
109
ReactInjection.Class.injectMixin(ReactBrowserComponentMixin);
110
111
ReactInjection.NativeComponent.injectComponentClasses({
113
- 'button': ReactDOMButton,
112
'form': ReactDOMForm,
113
'iframe': ReactDOMIframe,
114
'img': ReactDOMImg,