From f2662cdba722ae871ea62eaba4151ee08d009caa Mon Sep 17 00:00:00 2001 From: Pavel Pomerantsev Date: Wed, 22 Apr 2015 13:43:00 +0300 Subject: [PATCH] Get rid of some deprecation warnings getDOMNode method was deprecated in React v0.13 in favor of React.findDOMNode: https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html --- docs/src/app/components/code-example/code-block.jsx | 4 ++-- .../app/components/pages/css-framework/typography.jsx | 2 +- src/js/dialog-window.jsx | 8 ++++---- src/js/drop-down-menu.jsx | 4 ++-- src/js/enhanced-switch.jsx | 10 +++++----- src/js/enhanced-textarea.jsx | 4 ++-- src/js/icon-button.jsx | 2 +- src/js/input.jsx | 4 ++-- src/js/menu/menu.jsx | 10 +++++----- src/js/mixins/click-awayable.js | 5 +++-- src/js/ripples/focus-ripple.jsx | 4 ++-- src/js/ripples/touch-ripple.jsx | 2 +- src/js/slider.jsx | 4 ++-- src/js/snackbar.jsx | 4 ++-- src/js/tabs/tabs.jsx | 2 +- src/js/text-field.jsx | 4 ++-- src/js/tooltip.jsx | 6 +++--- 17 files changed, 40 insertions(+), 39 deletions(-) diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/code-example/code-block.jsx index 5b4cf89ff81fc1..a0a3b8aa3a076f 100644 --- 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 index 215e76cf98ec84..4d72c001a7ecb8 100644 --- 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 index 01d0657dd6b74e..5ba52b584e733e 100644 --- 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 index 5da6917c76334b..f4ac9df11f20e6 100644 --- 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 index 3d2622b1e46a3a..7bd1bcc20fe9d4 100644 --- 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,14 +196,14 @@ 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); @@ -211,7 +211,7 @@ var EnhancedSwitch = React.createClass({ }, 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 index 1b74e4eea19bbf..231528a52036d4 100644 --- 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 index f4cb2eb11dac81..50da1a855bbced 100644 --- 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 index 29eaf7293a1254..d4f1ebfd566569 100644 --- 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 index efb15b5cfd5428..0061eee2d95233 100644 --- 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 index b591684d14e02d..e57debf4247f9d 100644 --- 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); } -}; \ No newline at end of file +}; diff --git a/src/js/ripples/focus-ripple.jsx b/src/js/ripples/focus-ripple.jsx index be2d60214f0f67..d58fd8cf3c0c5b 100644 --- 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; \ No newline at end of file +module.exports = FocusRipple; diff --git a/src/js/ripples/touch-ripple.jsx b/src/js/ripples/touch-ripple.jsx index 8663cae0e0f8ab..29ffbee819fa24 100644 --- 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 index 6ec1a2448aa25e..546a5d3907653a 100644 --- 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 index ab3740ed010610..b6dff50b6e177e 100644 --- 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; \ No newline at end of file +module.exports = Snackbar; diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 2484d6a1470d35..b1130abb72ee00 100644 --- 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 index bdcd0a5ce60aea..4ddb0766433002 100644 --- 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 index 78539e478cbc79..08f794077f9e9b 100644 --- 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; \ No newline at end of file +module.exports = Tooltip;