Merge pull request #2854 from cedrics/add-iframe-component

Adds a composite component for an iframe to handle load events

src/browser/ui/ReactDefaultInjection.js

@@ -29,6 +29,7 @@ var ReactDOMButton = require('ReactDOMButton');
 var ReactDOMForm = require('ReactDOMForm');
 var ReactDOMImg = require('ReactDOMImg');
 var ReactDOMIDOperations = require('ReactDOMIDOperations');
+var ReactDOMIframe = require('ReactDOMIframe');
 var ReactDOMInput = require('ReactDOMInput');
 var ReactDOMOption = require('ReactDOMOption');
 var ReactDOMSelect = require('ReactDOMSelect');
@@ -107,6 +108,7 @@ function inject() {
   ReactInjection.NativeComponent.injectComponentClasses({
     'button': ReactDOMButton,
     'form': ReactDOMForm,
+    'iframe': ReactDOMIframe,
     'img': ReactDOMImg,
     'input': ReactDOMInput,
     'option': ReactDOMOption,

src/browser/ui/dom/components/ReactDOMIframe.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2013-2014, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMIframe
+ */
+
+'use strict';
+
+var EventConstants = require('EventConstants');
+var LocalEventTrapMixin = require('LocalEventTrapMixin');
+var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
+var ReactClass = require('ReactClass');
+var ReactElement = require('ReactElement');
+
+var iframe = ReactElement.createFactory('iframe');
+
+/**
+ * Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
+ * capture it on the <iframe> element itself. There are lots of hacks we could
+ * do to accomplish this, but the most reliable is to make <iframe> a composite
+ * component and use `componentDidMount` to attach the event handlers.
+ */
+var ReactDOMIframe = ReactClass.createClass({
+  displayName: 'ReactDOMIframe',
+  tagName: 'IFRAME',
+
+  mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
+
+  render: function() {
+    return iframe(this.props);
+  },
+
+  componentDidMount: function() {
+    this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
+  }
+});
+
+module.exports = ReactDOMIframe;

src/browser/ui/dom/components/__tests__/ReactDOMIframe-test.js

@@ -0,0 +1,36 @@
+
+/**
+ * Copyright 2013-2014, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+ */
+
+"use strict";
+
+describe('ReactDOMIframe', function() {
+  var React;
+  var ReactTestUtils;
+
+  beforeEach(function() {
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+  });
+
+  it('should trigger load events', function() {
+    var onLoadSpy = jasmine.createSpy();
+    var iframe = React.createElement('iframe', {onLoad: onLoadSpy});
+    iframe = ReactTestUtils.renderIntoDocument(iframe);
+
+    var loadEvent = document.createEvent('Event');
+    loadEvent.initEvent('load', false, false);
+
+    iframe.getDOMNode().dispatchEvent(loadEvent);
+
+    expect(onLoadSpy).toHaveBeenCalled();
+  });
+});