Merge pull request #558 from pomerantsev/fix/get-dom-node

(fix) Get rid of deprecation warnings for getDOMNode
mui · Apr 24, 2015 · a360242 · a360242
2 parents 67af58b + f2662cd
commit a360242
Show file tree

Hide file tree

Showing 17 changed files with 40 additions and 39 deletions.
diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/code-example/code-block.jsx
@@ -4,11 +4,11 @@ var React = require('react'),
 var CodeBlock = React.createClass({
 
   componentDidMount: function() {
-    hljs.highlightBlock(this.getDOMNode());
+    hljs.highlightBlock(React.findDOMNode(this));
   },
 
   componentDidUpdate: function(prevProps, prevState) {
-    hljs.highlightBlock(this.getDOMNode());
+    hljs.highlightBlock(React.findDOMNode(this));
   },
 
   render: function() {

diff --git a/docs/src/app/components/pages/css-framework/typography.jsx b/docs/src/app/components/pages/css-framework/typography.jsx
@@ -157,7 +157,7 @@ var TypographyPage = React.createClass({
   },
 
   _onClick: function(e) {
-    Dom.toggleClass(this.refs.verticalRhythmContainer.getDOMNode(), 'baseline-grid');
+    Dom.toggleClass(React.findDOMNode(this.refs.verticalRhythmContainer), 'baseline-grid');
   }
 
 });

diff --git a/src/js/dialog-window.jsx b/src/js/dialog-window.jsx
@@ -82,7 +82,7 @@ var DialogWindow = React.createClass({
   },
 
   dismiss: function() {
-    CssEvent.onTransitionEnd(this.getDOMNode(), function() {
+    CssEvent.onTransitionEnd(React.findDOMNode(this), function() {
       this.refs.dialogOverlay.allowScrolling();
     }.bind(this));
 
@@ -155,8 +155,8 @@ var DialogWindow = React.createClass({
 
     if (this.state.open) {
 
-      container = this.getDOMNode(),
-      dialogWindow = this.refs.dialogWindow.getDOMNode(),
+      container = React.findDOMNode(this),
+      dialogWindow = React.findDOMNode(this.refs.dialogWindow),
       containerHeight = container.offsetHeight,
 
       //Reset the height in case the window was resized.
@@ -174,7 +174,7 @@ var DialogWindow = React.createClass({
 
   _focusOnAction: function() {
     if (this.props.actionFocus) {
-      this.refs[this.props.actionFocus].getDOMNode().focus();
+      React.findDOMNode(this.refs[this.props.actionFocus]).focus();
     }
   },
 

diff --git a/src/js/drop-down-menu.jsx b/src/js/drop-down-menu.jsx
@@ -69,8 +69,8 @@ var DropDownMenu = React.createClass({
   },
 
   _setWidth: function() {
-    var el = this.getDOMNode(),
-      menuItemsDom = this.refs.menuItems.getDOMNode();
+    var el = React.findDOMNode(this),
+      menuItemsDom = React.findDOMNode(this.refs.menuItems);
 
     el.style.width = menuItemsDom.offsetWidth + 'px';
   },

diff --git a/src/js/enhanced-switch.jsx b/src/js/enhanced-switch.jsx
@@ -48,7 +48,7 @@ var EnhancedSwitch = React.createClass({
   },
 
   componentDidMount: function() {
-    var inputNode = this.refs.checkbox.getDOMNode();
+    var inputNode = React.findDOMNode(this.refs.checkbox);
     this.setState({switched: inputNode.checked});
   },
 
@@ -196,22 +196,22 @@ var EnhancedSwitch = React.createClass({
 
 
   isSwitched: function() {
-    return this.refs.checkbox.getDOMNode().checked;
+    return React.findDOMNode(this.refs.checkbox).checked;
   },
 
   // no callback here because there is no event
   setSwitched: function(newSwitchedValue) {
     if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
       this.setState({switched: newSwitchedValue});
-      this.refs.checkbox.getDOMNode().checked = newSwitchedValue;
+      React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue;
     } else if (process.NODE_ENV !== 'production') {
       var message = 'Cannot call set method while checked is defined as a property.';
       console.error(message);
     }
   },
 
   getValue: function() {
-    return this.refs.checkbox.getDOMNode().value;
+    return React.findDOMNode(this.refs.checkbox).value;
   },
 
   isKeyboardFocused: function() {
@@ -225,7 +225,7 @@ var EnhancedSwitch = React.createClass({
       isKeyboardFocused: false
     });
 
-    var isInputChecked = this.refs.checkbox.getDOMNode().checked;
+    var isInputChecked = React.findDOMNode(this.refs.checkbox).checked;
 
     if (!this.props.hasOwnProperty('checked')) this.setState({switched: isInputChecked});
     if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked);

diff --git a/src/js/enhanced-textarea.jsx b/src/js/enhanced-textarea.jsx
@@ -76,11 +76,11 @@ var EnhancedTextarea = React.createClass({
   },
 
   getInputNode: function() {
-    return this.refs.input.getDOMNode();
+    return React.findDOMNode(this.refs.input);
   },
 
   _syncHeightWithShadow: function(newValue, e) {
-    var shadow = this.refs.shadow.getDOMNode();
+    var shadow = React.findDOMNode(this.refs.shadow);
     var currentHeight = this.state.height;
     var newHeight;
 

diff --git a/src/js/icon-button.jsx b/src/js/icon-button.jsx
@@ -83,7 +83,7 @@ var IconButton = React.createClass({
   },
 
   _positionTooltip: function() {
-    var tooltip = this.refs.tooltip.getDOMNode();
+    var tooltip = React.findDOMNode(this.refs.tooltip);
     var tooltipWidth = tooltip.offsetWidth;
     var buttonWidth = 48;
 

diff --git a/src/js/input.jsx b/src/js/input.jsx
@@ -105,11 +105,11 @@ var Input = React.createClass({
   },
 
   blur: function() {
-    if(this.isMounted()) this.refs.input.getDOMNode().blur();
+    if(this.isMounted()) React.findDOMNode(this.refs.input).blur();
   },
 
   focus: function() {
-    if (this.isMounted()) this.refs.input.getDOMNode().focus();
+    if (this.isMounted()) React.findDOMNode(this.refs.input).focus();
   },
 
   _onInputChange: function(e) {

diff --git a/src/js/menu/menu.jsx b/src/js/menu/menu.jsx
@@ -72,8 +72,8 @@ var NestedMenuItem = React.createClass({
   },
 
   _positionNestedMenu: function() {
-    var el = this.getDOMNode(),
-      nestedMenu = this.refs.nestedMenu.getDOMNode();
+    var el = React.findDOMNode(this),
+      nestedMenu = React.findDOMNode(this.refs.nestedMenu);
 
     nestedMenu.style.left = el.offsetWidth + 'px';
   },
@@ -140,7 +140,7 @@ var Menu = React.createClass({
   },
 
   componentDidMount: function() {
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
 
     //Set the menu width
     this._setKeyWidth(el);
@@ -273,8 +273,8 @@ var Menu = React.createClass({
     var el;
 
     if (this.props.hideable) {
-      el = this.getDOMNode();
-      var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode();
+      el = React.findDOMNode(this);
+      var innerContainer = React.findDOMNode(this.refs.paperContainer.getInnerContainer());
 
       if (this.props.visible) {
 

diff --git a/src/js/mixins/click-awayable.js b/src/js/mixins/click-awayable.js
@@ -1,3 +1,4 @@
+var React = require('react');
 var Events = require('../utils/events');
 var Dom = require('../utils/dom');
 
@@ -14,7 +15,7 @@ module.exports = {
   },
 
   _checkClickAway: function(e) {
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
 
     // Check if the target is inside the current component
     if (this.isMounted() && 
@@ -33,4 +34,4 @@ module.exports = {
     Events.off(document, 'click', this._checkClickAway);
   }
 
-};
+};
diff --git a/src/js/ripples/focus-ripple.jsx b/src/js/ripples/focus-ripple.jsx
@@ -26,7 +26,7 @@ var FocusRipple = React.createClass({
   },
 
   _setRippleSize: function() {
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
     var height = el.offsetHeight;
     var width = el.offsetWidth;
     var size = Math.max(height, width);
@@ -37,4 +37,4 @@ var FocusRipple = React.createClass({
 
 });
 
-module.exports = FocusRipple;
+module.exports = FocusRipple;
diff --git a/src/js/ripples/touch-ripple.jsx b/src/js/ripples/touch-ripple.jsx
@@ -126,7 +126,7 @@ var TouchRipple = React.createClass({
 
   _getRippleStyle: function(e) {
     var style = {};
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
     var elHeight = el.offsetHeight;
     var elWidth = el.offsetWidth;
     var offset = Dom.offset(el);

diff --git a/src/js/slider.jsx b/src/js/slider.jsx
@@ -131,7 +131,7 @@ var Slider = React.createClass({
     // let draggable handle the slider
     if (this.state.dragging || this.props.disabled) return;
     var value = this.state.value;
-    var node = this.refs.track.getDOMNode();
+    var node = React.findDOMNode(this.refs.track);
     var boundingClientRect = node.getBoundingClientRect();
     var offset = e.clientX - boundingClientRect.left;
     this._updateWithChangeEvent(e, offset / node.clientWidth);
@@ -157,7 +157,7 @@ var Slider = React.createClass({
   },
 
   _dragX: function(e, pos) {
-    var max = this.refs.track.getDOMNode().clientWidth;
+    var max = React.findDOMNode(this.refs.track).clientWidth;
     if (pos < 0) pos = 0; else if (pos > max) pos = max;
     this._updateWithChangeEvent(e, pos / max);
   },

diff --git a/src/js/snackbar.jsx b/src/js/snackbar.jsx
@@ -31,7 +31,7 @@ var Snackbar = React.createClass({
     if (prevState.open != this.state.open) {
       if (this.state.open) {
         //Only Bind clickaway after transition finishes
-        CssEvent.onTransitionEnd(this.getDOMNode(), function() {
+        CssEvent.onTransitionEnd(React.findDOMNode(this), function() {
           this._bindClickAway();
         }.bind(this));
       } else {
@@ -73,4 +73,4 @@ var Snackbar = React.createClass({
 
 });
 
-module.exports = Snackbar;
+module.exports = Snackbar;
diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx
@@ -24,7 +24,7 @@ var Tabs = React.createClass({
   getEvenWidth: function(){
     return (
       parseInt(window
-        .getComputedStyle(this.getDOMNode())
+        .getComputedStyle(React.findDOMNode(this))
         .getPropertyValue('width'), 10)
     );
   },

diff --git a/src/js/text-field.jsx b/src/js/text-field.jsx
@@ -176,7 +176,7 @@ var TextField = React.createClass({
 
   _getInputNode: function() {
     return this.props.multiLine ?
-      this.refs.input.getInputNode() : this.refs.input.getDOMNode();
+      this.refs.input.getInputNode() : React.findDOMNode(this.refs.input);
   },
 
   _handleInputBlur: function(e) {
@@ -202,7 +202,7 @@ var TextField = React.createClass({
   _handleTextAreaHeightChange: function(e, height) {
     var newHeight = height + 24;
     if (this.props.floatingLabelText) newHeight += 24;
-    this.getDOMNode().style.height = newHeight + 'px';
+    React.findDOMNode(this).style.height = newHeight + 'px';
   },
 
   _isControlled: function() {

diff --git a/src/js/tooltip.jsx b/src/js/tooltip.jsx
@@ -39,8 +39,8 @@ var Tooltip = React.createClass({
   },
 
   _setRippleSize: function() {
-    var ripple = this.refs.ripple.getDOMNode();
-    var tooltipSize = this.getDOMNode().offsetWidth;
+    var ripple = React.findDOMNode(this.refs.ripple);
+    var tooltipSize = React.findDOMNode(this).offsetWidth;
     var ripplePadding = this.props.touch ? 45 : 20;
     var rippleSize = tooltipSize + ripplePadding + 'px';
 
@@ -55,4 +55,4 @@ var Tooltip = React.createClass({
 
 });
 
-module.exports = Tooltip;
+module.exports = Tooltip;