Add support for onLoad event to <img />
Ben Alpert committed
Dec 31, 2013 at 18:08 UTC
79c9025f176d289336f9d8bb1028976b6cef3af5
4 files changed
+64
-1
src/core/ReactDefaultInjection.js
+2
@@ -23,6 +23,7 @@ var ExecutionEnvironment = require('ExecutionEnvironment');
23
var ReactDOM = require('ReactDOM');
24
var ReactDOMButton = require('ReactDOMButton');
25
var ReactDOMForm = require('ReactDOMForm');
26
+var ReactDOMImg = require('ReactDOMImg');
27
var ReactDOMInput = require('ReactDOMInput');
28
var ReactDOMOption = require('ReactDOMOption');
29
var ReactDOMSelect = require('ReactDOMSelect');
@@ -74,6 +75,7 @@ function inject() {
75
ReactDOM.injection.injectComponentClasses({
76
button: ReactDOMButton,
77
form: ReactDOMForm,
78
+ img: ReactDOMImg,
79
input: ReactDOMInput,
80
option: ReactDOMOption,
81
select: ReactDOMSelect,
src/dom/components/ReactDOMImg.js
new
+52
@@ -0,0 +1,52 @@
1
+/**
2
+ * Copyright 2013 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @providesModule ReactDOMImg
17
+ */
18
+
19
+"use strict";
20
+
21
+var ReactCompositeComponent = require('ReactCompositeComponent');
22
+var ReactDOM = require('ReactDOM');
23
+var ReactEventEmitter = require('ReactEventEmitter');
24
+var EventConstants = require('EventConstants');
25
+
26
+// Store a reference to the <img> `ReactDOMComponent`.
27
+var img = ReactDOM.img;
28
+
29
+/**
30
+ * Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
31
+ * capture it on the <img> element itself. There are lots of hacks we could do
32
+ * to accomplish this, but the most reliable is to make <img> a composite
33
+ * component and use `componentDidMount` to attach the event handlers.
34
+ */
35
+var ReactDOMImg = ReactCompositeComponent.createClass({
36
+ displayName: 'ReactDOMImg',
37
+ tagName: 'IMG',
38
+
39
+ render: function() {
40
+ return img(this.props);
41
+ },
42
+
43
+ componentDidMount: function() {
44
+ ReactEventEmitter.trapBubbledEvent(
45
+ EventConstants.topLevelTypes.topLoad,
46
+ 'load',
47
+ this.getDOMNode()
48
+ );
49
+ }
50
+});
51
+
52
+module.exports = ReactDOMImg;
src/event/EventConstants.js
+1
@@ -49,6 +49,7 @@ var topLevelTypes = keyMirror({
49
topKeyDown: null,
50
topKeyPress: null,
51
topKeyUp: null,
52
+ topLoad: null,
53
topMouseDown: null,
54
topMouseMove: null,
55
topMouseOut: null,
src/eventPlugins/SimpleEventPlugin.js
+9
-1
@@ -150,6 +150,12 @@ var eventTypes = {
150
captured: keyOf({onKeyUpCapture: true})
151
}
152
},
153
+ load: {
154
+ phasedRegistrationNames: {
155
+ bubbled: keyOf({onLoad: true}),
156
+ captured: keyOf({onLoadCapture: true})
157
+ }
158
+ },
159
// Note: We do not allow listening to mouseOver events. Instead, use the
160
// onMouseEnter/onMouseLeave created by `EnterLeaveEventPlugin`.
161
mouseDown: {
@@ -240,6 +246,7 @@ var topLevelEventsToDispatchConfig = {
246
topKeyDown: eventTypes.keyDown,
247
topKeyPress: eventTypes.keyPress,
248
topKeyUp: eventTypes.keyUp,
249
+ topLoad: eventTypes.load,
250
topMouseDown: eventTypes.mouseDown,
251
topMouseMove: eventTypes.mouseMove,
252
topMouseUp: eventTypes.mouseUp,
@@ -291,8 +298,9 @@ var SimpleEventPlugin = {
298
return null;
299
}
300
var EventConstructor;
294
- switch(topLevelType) {
301
+ switch (topLevelType) {
302
case topLevelTypes.topInput:
303
+ case topLevelTypes.topLoad:
304
case topLevelTypes.topSubmit:
305
// HTML Events
306
// @see http://www.w3.org/TR/html5/index.html#events-0