adds a composite component for an iframe to handle load events
This is basically a copy of ReactDOMImg
Cedric Sohrauer committed
Jan 13, 2015 at 23:00 UTC
5f837074f9c1511ddffa1b7349a5b2efec3210cb
3 files changed
+81
src/browser/ui/ReactDefaultInjection.js
+2
@@ -28,6 +28,7 @@ var ReactDOMButton = require('ReactDOMButton');
28
var ReactDOMForm = require('ReactDOMForm');
29
var ReactDOMImg = require('ReactDOMImg');
30
var ReactDOMIDOperations = require('ReactDOMIDOperations');
31
+var ReactDOMIframe = require('ReactDOMIframe');
32
var ReactDOMInput = require('ReactDOMInput');
33
var ReactDOMOption = require('ReactDOMOption');
34
var ReactDOMSelect = require('ReactDOMSelect');
@@ -85,6 +86,7 @@ function inject() {
86
ReactInjection.NativeComponent.injectComponentClasses({
87
'button': ReactDOMButton,
88
'form': ReactDOMForm,
89
+ 'iframe': ReactDOMIframe,
90
'img': ReactDOMImg,
91
'input': ReactDOMInput,
92
'option': ReactDOMOption,
src/browser/ui/dom/components/ReactDOMIframe.js
new
+43
@@ -0,0 +1,43 @@
1
+/**
2
+ * Copyright 2013-2014, Facebook, Inc.
3
+ * All rights reserved.
4
+ *
5
+ * This source code is licensed under the BSD-style license found in the
6
+ * LICENSE file in the root directory of this source tree. An additional grant
7
+ * of patent rights can be found in the PATENTS file in the same directory.
8
+ *
9
+ * @providesModule ReactDOMIframe
10
+ */
11
+
12
+'use strict';
13
+
14
+var EventConstants = require('EventConstants');
15
+var LocalEventTrapMixin = require('LocalEventTrapMixin');
16
+var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
17
+var ReactClass = require('ReactClass');
18
+var ReactElement = require('ReactElement');
19
+
20
+var iframe = ReactElement.createFactory('iframe');
21
+
22
+/**
23
+ * Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
24
+ * capture it on the <iframe> element itself. There are lots of hacks we could
25
+ * do to accomplish this, but the most reliable is to make <iframe> a composite
26
+ * component and use `componentDidMount` to attach the event handlers.
27
+ */
28
+var ReactDOMIframe = ReactClass.createClass({
29
+ displayName: 'ReactDOMIframe',
30
+ tagName: 'IFRAME',
31
+
32
+ mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
33
+
34
+ render: function() {
35
+ return iframe(this.props);
36
+ },
37
+
38
+ componentDidMount: function() {
39
+ this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
40
+ }
41
+});
42
+
43
+module.exports = ReactDOMIframe;
src/browser/ui/dom/components/__tests__/ReactDOMIframe-test.js
new
+36
@@ -0,0 +1,36 @@
1
+
2
+/**
3
+ * Copyright 2013-2014, Facebook, Inc.
4
+ * All rights reserved.
5
+ *
6
+ * This source code is licensed under the BSD-style license found in the
7
+ * LICENSE file in the root directory of this source tree. An additional grant
8
+ * of patent rights can be found in the PATENTS file in the same directory.
9
+ *
10
+ * @emails react-core
11
+ */
12
+
13
+"use strict";
14
+
15
+describe('ReactDOMIframe', function() {
16
+ var React;
17
+ var ReactTestUtils;
18
+
19
+ beforeEach(function() {
20
+ React = require('React');
21
+ ReactTestUtils = require('ReactTestUtils');
22
+ });
23
+
24
+ it('should trigger load events', function() {
25
+ var onLoadSpy = jasmine.createSpy();
26
+ var iframe = React.createElement('iframe', {onLoad: onLoadSpy});
27
+ iframe = ReactTestUtils.renderIntoDocument(iframe);
28
+
29
+ var loadEvent = document.createEvent('Event');
30
+ loadEvent.initEvent('load', false, false);
31
+
32
+ iframe.getDOMNode().dispatchEvent(loadEvent);
33
+
34
+ expect(onLoadSpy).toHaveBeenCalled();
35
+ });
36
+});