Replace getDOMNode with findDOMNode

js/components/ascribe_buttons/acl_button_list.js

@@ -52,7 +52,7 @@ let AclButtonList = React.createClass({
 
     handleResize() {
         this.setState({
-            buttonListSize: this.refs.buttonList.getDOMNode().offsetWidth
+            buttonListSize: this.refs.buttonList.offsetWidth
         });
     },
 

js/components/ascribe_forms/form.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 import classNames from 'classnames';
 
@@ -354,7 +355,7 @@ let Form = React.createClass({
                 let refToValidate = {};
                 const property = this.refs[refName];
                 const input = property.refs.input;
-                const value = input.getDOMNode().value || input.state.value;
+                const value = ReactDOM.findDOMNode(input).value || input.state.value;
                 const { max,
                         min,
                         pattern,

js/components/ascribe_forms/input_checkbox.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 /**
  * This component can be used as a custom input element for form properties.
@@ -71,7 +72,7 @@ let InputCheckbox = React.createClass({
         }
 
         // On every change, we're inversing the input's value
-        let inverseValue = !this.refs.checkbox.getDOMNode().checked;
+        let inverseValue = !ReactDOM.findDOMNode(this.refs.checkbox).checked;
 
         // pass it to the state
         this.setState({value: inverseValue});

js/components/ascribe_forms/property.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 import Panel from 'react-bootstrap/lib/Panel';
 
@@ -98,9 +99,9 @@ const Property = React.createClass({
         // In order to set this.state.value from another component
         // the state of value should only be set if its not undefined and
         // actually references something
-        if(childInput && typeof childInput.getDOMNode().value !== 'undefined') {
+        if(childInput && typeof ReactDOM.findDOMNode(childInput).value !== 'undefined') {
             this.setState({
-                value: childInput.getDOMNode().value
+                value: ReactDOM.findDOMNode(childInput).value
             });
 
         // When implementing custom input components, their value isn't exposed like the one
@@ -113,9 +114,9 @@ const Property = React.createClass({
             });
         }
 
-        if(!this.state.initialValue && childInput && childInput.props.defaultValue) {
+        if(!this.state.initialValue && childInput && childInput.defaultValue) {
             this.setState({
-                initialValue: childInput.props.defaultValue
+                initialValue: childInput.defaultValue
             });
         }
     },
@@ -137,7 +138,7 @@ const Property = React.createClass({
         // Therefore we have to make sure only to reset the initial value
         // of HTML inputs (which we determine by checking if there 'type' attribute matches
         // the ones included in AppConstants.possibleInputTypes).
-        let inputDOMNode = input.getDOMNode();
+        let inputDOMNode = ReactDOM.findDOMNode(input);
         if(inputDOMNode.type && typeof inputDOMNode.type === 'string' &&
            AppConstants.possibleInputTypes.indexOf(inputDOMNode.type.toLowerCase()) > -1) {
             inputDOMNode.value = this.state.initialValue;
@@ -177,10 +178,10 @@ const Property = React.createClass({
         // skip the focus of non-input elements
         let nonInputHTMLElements = ['pre', 'div'];
         if (this.refs.input &&
-            nonInputHTMLElements.indexOf(this.refs.input.getDOMNode().nodeName.toLowerCase()) > -1 ) {
+            nonInputHTMLElements.indexOf(ReactDOM.findDOMNode(this.refs.input).nodeName.toLowerCase()) > -1 ) {
             return;
         }
-        this.refs.input.getDOMNode().focus();
+        ReactDOM.findDOMNode(this.refs.input).focus();
         this.setState({
             isFocused: true
         });
@@ -202,7 +203,7 @@ const Property = React.createClass({
             errors: null,
 
             // also update initialValue in case of the user updating and canceling its actions again
-            initialValue: this.refs.input.getDOMNode().value
+            initialValue: ReactDOM.findDOMNode(this.refs.input).value
         });
     },
 

js/components/ascribe_panel/action_panel.js

@@ -1,66 +1,39 @@
 'use strict';
 
 import React from 'react';
-import classnames from 'classnames';
+
 
 let ActionPanel = React.createClass({
     propTypes: {
-        title: React.PropTypes.string,
+        buttons: React.PropTypes.element,
         content: React.PropTypes.oneOfType([
             React.PropTypes.string,
             React.PropTypes.element
         ]),
-        buttons: React.PropTypes.element,
-        onClick: React.PropTypes.func,
-        ignoreFocus: React.PropTypes.bool,
-
         leftColumnWidth: React.PropTypes.string,
+        onClick: React.PropTypes.func,
         rightColumnWidth: React.PropTypes.string
     },
 
-    getInitialState() {
-        return {
-            isFocused: false
-        };
-    },
-
-    handleFocus() {
-        // if ignoreFocus (bool) is defined, then just ignore focusing on
-        // the property and input
-        if(this.props.ignoreFocus) {
-            return;
-        }
-
-        // if onClick is defined from the outside,
-        // just call it
-        if(this.props.onClick) {
-            this.props.onClick();
-        }
-
-        this.refs.input.getDOMNode().focus();
-        this.setState({
-            isFocused: true
-        });
-    },
-
     render() {
-
+        const { buttons, content, leftColumnWidth, onClick, rightColumnWidth } = this.props;
-        let { leftColumnWidth, rightColumnWidth } = this.props;
 
         return (
-            <div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
+            <div
+                className={'ascribe-panel-wrapper'}
+                onClick={onClick}>
                 <div
                     className="ascribe-panel-table"
                     style={{width: leftColumnWidth}}>
                     <div className="ascribe-panel-content">
-                        {this.props.content}
+                        {content}
                     </div>
                 </div>
                 <div
                     className="ascribe-panel-table"
                     style={{width: rightColumnWidth}}>
                     <div className="ascribe-panel-content">
-                        {this.props.buttons}
+                        {buttons}
                     </div>
                 </div>
             </div>

js/components/ascribe_slides_container/slides_container.js

@@ -57,7 +57,7 @@ const SlidesContainer = React.createClass({
     handleContainerResize() {
         this.setState({
             // +30 to get rid of the padding of the container which is 15px + 15px left and right
-            containerWidth: this.refs.containerWrapper.getDOMNode().offsetWidth + 30
+            containerWidth: this.refs.containerWrapper.offsetWidth + 30
         });
     },
 

js/components/ascribe_social_share/facebook_share_button.js

@@ -50,7 +50,7 @@ let FacebookShareButton = React.createClass({
             .inject(AppConstants.facebook.sdkUrl)
             .then(() => {
                 if (this.state.loaded) {
-                    FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent)
+                    window.FB.XFBML.parse(this.refs.fbShareButton.parent);
                 }
             });
     },

js/components/ascribe_social_share/twitter_share_button.js

@@ -31,7 +31,7 @@ let TwitterShareButton = React.createClass({
     loadTwitterButton() {
         const { count, counturl, hashtags, size, text, url, via } = this.props;
 
-        twttr.widgets.createShareButton(url, this.refs.twitterShareButton.getDOMNode(), {
+        window.twttr.widgets.createShareButton(url, this.refs.twitterShareButton, {
             count,
             counturl,
             hashtags,

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js

@@ -55,7 +55,7 @@ let FileDragAndDrop = React.createClass({
     },
 
     clearSelection() {
-        this.refs.fileSelector.getDOMNode().value = '';
+        this.refs.fileSelector.value = '';
     },
 
     handleDragOver(event) {
@@ -132,7 +132,7 @@ let FileDragAndDrop = React.createClass({
                 evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
             }
 
-            this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
+            this.refs.fileSelector.dispatchEvent(evt);
         }
     },
 

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -66,7 +66,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm', sho
         },
 
         clearSelection() {
-            this.refs.fileSelector.getDOMNode().value = '';
+            this.refs.fileSelector.value = '';
         },
 
         handleOnClick() {
@@ -88,7 +88,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm', sho
                     evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
                 }
                 evt.stopPropagation();
-                this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
+                this.refs.fileSelector.dispatchEvent(evt);
             }
         },
 

js/components/global_notification.js

@@ -48,7 +48,7 @@ let GlobalNotification = React.createClass({
 
     handleContainerResize() {
         this.setState({
-            containerWidth: this.refs.notificationWrapper.getDOMNode().offsetWidth
+            containerWidth: this.refs.notificationWrapper.offsetWidth
         });
     },