Fix deprecation warnings

Fixes #365
liferay · Nov 5, 2015 · 3bf98d9 · 3bf98d9
1 parent e063fd8
commit 3bf98d9
Show file tree

Hide file tree

Showing 17 changed files with 44 additions and 28 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -23,7 +23,7 @@
   "esnext": true,
   "evil": false,
   "expr": false,
-  "predef": ["React", "global", "YUI", "CKEDITOR", "AlloyEditor", "bender", "chai", "it", "describe", "before", "after", "beforeEach", "afterEach", "fixture", "assert", "Utils", "TestUtils", "Simulate"],
+  "predef": ["React", "ReactDOM", "global", "YUI", "CKEDITOR", "AlloyEditor", "bender", "chai", "it", "describe", "before", "after", "beforeEach", "afterEach", "fixture", "assert", "Utils", "TestUtils", "Simulate"],
   "unused": true,
   "indent": 4,
   "funcscope": false,

diff --git a/src/ui/react/src/adapter/alloy-editor.js b/src/ui/react/src/adapter/alloy-editor.js
@@ -61,7 +61,7 @@
          */
         destructor: function() {
             if (this._editorUIElement) {
-                React.unmountComponentAtNode(this._editorUIElement);
+                ReactDOM.unmountComponentAtNode(this._editorUIElement);
                 this._editorUIElement.parentNode.removeChild(this._editorUIElement);
             }
 
@@ -106,7 +106,7 @@
 
             uiNode.appendChild(editorUIElement);
 
-            this._mainUI = React.render(React.createElement(AlloyEditor.UI, {
+            this._mainUI = ReactDOM.render(React.createElement(AlloyEditor.UI, {
                 editor: this,
                 eventsDelay: this.get('eventsDelay'),
                 toolbars: this.get('toolbars')

diff --git a/src/ui/react/src/components/base/widget-dropdown.js b/src/ui/react/src/components/base/widget-dropdown.js
@@ -67,7 +67,7 @@
                     if (this.moveFocus) {
                         this.moveFocus(toggleDirection);
                     } else {
-                        React.findDOMNode(this).focus();
+                        ReactDOM.findDOMNode(this).focus();
                     }
                 }
             });

diff --git a/src/ui/react/src/components/base/widget-focus-manager.js b/src/ui/react/src/components/base/widget-focus-manager.js
@@ -300,7 +300,7 @@
          * @method _refresh
          */
         _refresh: function() {
-            var domNode = React.findDOMNode(this);
+            var domNode = ReactDOM.findDOMNode(this);
 
             if (domNode) {
                 var descendants = domNode.querySelectorAll(this.props.descendants);

diff --git a/src/ui/react/src/components/base/widget-position.js b/src/ui/react/src/components/base/widget-position.js
@@ -109,7 +109,7 @@
          * @return {Array} An Array with left and top offsets in page coordinates.
          */
         getWidgetXYPoint: function(left, top, direction) {
-            var domNode = React.findDOMNode(this);
+            var domNode = ReactDOM.findDOMNode(this);
 
             var gutter = this.props.gutter;
 
@@ -147,7 +147,7 @@
          * @return {Boolean} True if the widget is visible, false otherwise
          */
         isVisible: function() {
-            var domNode = this.getDOMNode();
+            var domNode = ReactDOM.findDOMNode(this);
 
             if (domNode) {
                 var domElement = new CKEDITOR.dom.element(domNode);
@@ -166,7 +166,7 @@
          * @param  {Object} endPoint The destination point for the movement.
          */
         moveToPoint: function(startPoint, endPoint) {
-            var domElement = new CKEDITOR.dom.element(this.getDOMNode());
+            var domElement = new CKEDITOR.dom.element(ReactDOM.findDOMNode(this));
 
             domElement.setStyles({
                 left: startPoint[0] + 'px',
@@ -193,7 +193,7 @@
          * @method show
          */
         show: function() {
-            var domNode = React.findDOMNode(this);
+            var domNode = ReactDOM.findDOMNode(this);
 
             if (!this.isVisible() && domNode) {
                 var interactionPoint = this.getInteractionPoint();
@@ -240,7 +240,7 @@
         updatePosition: function() {
             var interactionPoint = this.getInteractionPoint();
 
-            var domNode = React.findDOMNode(this);
+            var domNode = ReactDOM.findDOMNode(this);
 
             if (interactionPoint && domNode) {
                 var xy = this.getWidgetXYPoint(interactionPoint.x, interactionPoint.y, interactionPoint.direction);

diff --git a/src/ui/react/src/components/buttons/button-camera-image.jsx b/src/ui/react/src/components/buttons/button-camera-image.jsx
@@ -38,7 +38,7 @@
          * @method componentDidMount
          */
         componentDidMount: function () {
-            React.findDOMNode(this.refs.buttonTakePhoto).focus();
+            ReactDOM.findDOMNode(this.refs.buttonTakePhoto).focus();
         },
 
         /**
@@ -85,8 +85,8 @@
          * @method takePhoto
          */
         takePhoto: function() {
-            var videoEl = React.findDOMNode(this.refs.videoContainer);
-            var canvasEl = React.findDOMNode(this.refs.canvasContainer);
+            var videoEl = ReactDOM.findDOMNode(this.refs.videoContainer);
+            var canvasEl = ReactDOM.findDOMNode(this.refs.canvasContainer);
 
             var context = canvasEl.getContext('2d');
 
@@ -134,8 +134,8 @@
          * @param {Object} stream The video stream
          */
         _handleStreamSuccess: function(stream) {
-            var videoEl = React.findDOMNode(this.refs.videoContainer);
-            var canvasEl = React.findDOMNode(this.refs.canvasContainer);
+            var videoEl = ReactDOM.findDOMNode(this.refs.videoContainer);
+            var canvasEl = ReactDOM.findDOMNode(this.refs.canvasContainer);
 
             videoEl.addEventListener('canplay', function(event) {
                 var height = videoEl.videoHeight / (videoEl.videoWidth/this.props.videoWidth);
@@ -162,7 +162,7 @@
 
             videoEl.play();
 
-            React.findDOMNode(this.refs.buttonTakePhoto).disabled = false;
+            ReactDOM.findDOMNode(this.refs.buttonTakePhoto).disabled = false;
         }
 
         /**

diff --git a/src/ui/react/src/components/buttons/button-commands-list.jsx b/src/ui/react/src/components/buttons/button-commands-list.jsx
@@ -56,7 +56,7 @@
          * @method componentDidMount
          */
         componentDidMount: function () {
-            React.findDOMNode(this).focus();
+            ReactDOM.findDOMNode(this).focus();
         },
 
         /**

diff --git a/src/ui/react/src/components/buttons/button-image.jsx b/src/ui/react/src/components/buttons/button-image.jsx
@@ -71,7 +71,7 @@
          * @param {SyntheticEvent} event The received click event on the button.
          */
         handleClick: function(event) {
-            React.findDOMNode(this.refs.fileInput).click();
+            ReactDOM.findDOMNode(this.refs.fileInput).click();
         },
 
         /**
@@ -86,7 +86,7 @@
          */
         _onInputChange: function() {
             var reader = new FileReader();
-            var inputEl = React.findDOMNode(this.refs.fileInput);
+            var inputEl = ReactDOM.findDOMNode(this.refs.fileInput);
 
             reader.onload = function(event) {
                 var editor = this.props.editor.get('nativeEditor');

diff --git a/src/ui/react/src/components/buttons/button-link-edit.jsx b/src/ui/react/src/components/buttons/button-link-edit.jsx
@@ -104,7 +104,7 @@
          * @method _focusLinkInput
          */
         _focusLinkInput: function() {
-            React.findDOMNode(this.refs.linkInput).focus();
+            ReactDOM.findDOMNode(this.refs.linkInput).focus();
         },
 
         /**

diff --git a/src/ui/react/src/components/buttons/button-styles-list.jsx b/src/ui/react/src/components/buttons/button-styles-list.jsx
@@ -32,7 +32,7 @@
          * @method componentDidMount
          */
         componentDidMount: function () {
-            React.findDOMNode(this).focus();
+            ReactDOM.findDOMNode(this).focus();
         },
 
         /**

diff --git a/src/ui/react/src/components/buttons/button-table-edit.jsx b/src/ui/react/src/components/buttons/button-table-edit.jsx
@@ -66,7 +66,7 @@
          * @method componentDidMount
          */
         componentDidMount: function () {
-            React.findDOMNode(this.refs.rows).focus();
+            ReactDOM.findDOMNode(this.refs.rows).focus();
         },
 
         /**

diff --git a/src/ui/react/src/components/main.jsx b/src/ui/react/src/components/main.jsx
@@ -116,7 +116,7 @@
          * @method componentDidUpdate
          */
         componentDidUpdate: function (prevProps, prevState) {
-            var domNode = React.findDOMNode(this);
+            var domNode = ReactDOM.findDOMNode(this);
 
             var editor = this.props.editor.get('nativeEditor');
 
@@ -314,7 +314,7 @@
          * @param {DOMElement} target The DOM element with which user interacted lastly.
          */
         _setUIHidden: function(target) {
-            var domNode = React.findDOMNode(this);
+            var domNode = ReactDOM.findDOMNode(this);
 
             if (domNode) {
                 var editable = this.props.editor.get('nativeEditor').editable();

diff --git a/src/ui/react/src/components/toolbars/toolbar-add.jsx b/src/ui/react/src/components/toolbars/toolbar-add.jsx
@@ -204,7 +204,7 @@
          */
         _updatePosition: function() {
             // If component is not mounted, there is nothing to do
-            if (!React.findDOMNode(this)) {
+            if (!ReactDOM.findDOMNode(this)) {
                 return;
             }
 
@@ -220,7 +220,7 @@
                 }
 
                 if (region) {
-                    var domNode = React.findDOMNode(this);
+                    var domNode = ReactDOM.findDOMNode(this);
                     var domElement = new CKEDITOR.dom.element(domNode);
 
                     var startRect = region.startRect || region;

diff --git a/src/ui/react/src/components/toolbars/toolbar-styles.jsx b/src/ui/react/src/components/toolbars/toolbar-styles.jsx
@@ -230,7 +230,7 @@
          */
         _updatePosition: function() {
             // If component is not mounted, there is nothing to do
-            if (!React.findDOMNode(this)) {
+            if (!ReactDOM.findDOMNode(this)) {
                 return;
             }
 

diff --git a/src/ui/react/src/selections/selection-position.js b/src/ui/react/src/selections/selection-position.js
@@ -7,7 +7,7 @@
         var table = new CKEDITOR.Table(nativeEditor).getFromSelection();
         var clientRect = table.getClientRect();
 
-        var toolbarNode = this.getDOMNode();
+        var toolbarNode = ReactDOM.findDOMNode(this);
         var halfToolbarWidth = toolbarNode.offsetWidth / 2;
         var scrollPos = new CKEDITOR.dom.window(window).getScrollPosition();
 

diff --git a/src/ui/react/template/alloy-editor-core.template b/src/ui/react/template/alloy-editor-core.template
@@ -19,6 +19,14 @@
         React = AlloyEditor.React;
     }
 
+    var ReactDOM = (function() {
+        return (0, eval)('this').ReactDOM;
+    }());
+
+    if (typeof React === 'undefined') {
+        ReactDOM = AlloyEditor.ReactDOM;
+    }
+
     if (typeof window !== 'undefined') {
         <%= ui %>
     }

diff --git a/src/ui/react/template/alloy-editor.template b/src/ui/react/template/alloy-editor.template
@@ -29,6 +29,14 @@
         React = AlloyEditor.React;
     }
 
+    var ReactDOM = (function() {
+        return (0, eval)('this').ReactDOM;
+    }());
+
+    if (typeof ReactDOM === 'undefined' && typeof AlloyEditor !== 'undefined') {
+        ReactDOM = AlloyEditor.ReactDOM;
+    }
+
     if (typeof window !== 'undefined') {
        deployCKEditor();