diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js index a4b224a5..01fbcc2d 100644 --- a/js/components/ascribe_buttons/acl_button_list.js +++ b/js/components/ascribe_buttons/acl_button_list.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import UserActions from '../../actions/user_actions'; import UserStore from '../../stores/user_store'; @@ -61,7 +62,7 @@ let AclButtonList = React.createClass({ handleResize() { this.setState({ - buttonListSize: this.refs.buttonList.getDOMNode().offsetWidth + buttonListSize: ReactDOM.findDOMNode(this.refs.buttonList).offsetWidth }); }, diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index ccf48221..e5ff6bf7 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import Button from 'react-bootstrap/lib/Button'; import AlertDismissable from './alert'; @@ -343,7 +344,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, diff --git a/js/components/ascribe_forms/input_checkbox.js b/js/components/ascribe_forms/input_checkbox.js index a0ee1a70..6a974be5 100644 --- a/js/components/ascribe_forms/input_checkbox.js +++ b/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}); diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 9784eb49..7ae96190 100644 --- a/js/components/ascribe_forms/property.js +++ b/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'; @@ -97,9 +98,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 @@ -136,7 +137,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; @@ -176,10 +177,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 }); @@ -201,7 +202,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 }); }, diff --git a/js/components/ascribe_panel/action_panel.js b/js/components/ascribe_panel/action_panel.js index f6fe9a70..ccbd88aa 100644 --- a/js/components/ascribe_panel/action_panel.js +++ b/js/components/ascribe_panel/action_panel.js @@ -1,8 +1,10 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import classnames from 'classnames'; + let ActionPanel = React.createClass({ propTypes: { title: React.PropTypes.string, @@ -37,7 +39,7 @@ let ActionPanel = React.createClass({ this.props.onClick(); } - this.refs.input.getDOMNode().focus(); + ReactDOM.findDOMNode(this.refs.input).focus(); this.setState({ isFocused: true }); @@ -68,4 +70,4 @@ let ActionPanel = React.createClass({ } }); -export default ActionPanel; \ No newline at end of file +export default ActionPanel; diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js index 7533ed94..c3c1f2c4 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/js/components/ascribe_slides_container/slides_container.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs'; @@ -57,7 +58,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: ReactDOM.findDOMNode(this.refs.containerWrapper).offsetWidth + 30 }); }, @@ -186,4 +187,4 @@ const SlidesContainer = React.createClass({ } }); -export default SlidesContainer; \ No newline at end of file +export default SlidesContainer; diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js index aa0b6691..dd196b4c 100644 --- a/js/components/ascribe_social_share/facebook_share_button.js +++ b/js/components/ascribe_social_share/facebook_share_button.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import AppConstants from '../../constants/application_constants'; @@ -30,7 +31,7 @@ let FacebookShareButton = React.createClass({ InjectInHeadUtils .inject(AppConstants.facebook.sdkUrl) - .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) }); + .then(() => { FB.XFBML.parse(ReactDOM.findDOMNode(this.refs.fbShareButton).parentElement) }); }, shouldComponentUpdate(nextProps) { diff --git a/js/components/ascribe_social_share/twitter_share_button.js b/js/components/ascribe_social_share/twitter_share_button.js index b2e8a7dc..b8c41fe2 100644 --- a/js/components/ascribe_social_share/twitter_share_button.js +++ b/js/components/ascribe_social_share/twitter_share_button.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import AppConstants from '../../constants/application_constants'; @@ -31,7 +32,7 @@ let TwitterShareButton = React.createClass({ loadTwitterButton() { const { count, counturl, hashtags, size, text, url, via } = this.props; - twttr.widgets.createShareButton(url, this.refs.twitterShareButton.getDOMNode(), { + twttr.widgets.createShareButton(url, ReactDOM.findDOMNode(this.refs.twitterShareButton), { count, counturl, hashtags, diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js index 1157a540..d94c07ca 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import FileDragAndDropDialog from './file_drag_and_drop_dialog'; @@ -45,7 +46,7 @@ let FileDragAndDrop = React.createClass({ }, clearSelection() { - this.refs.fileSelector.getDOMNode().value = ''; + ReactDOM.findDOMNode(this.refs.fileSelector).value = ''; }, handleDragOver(event) { @@ -122,7 +123,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); + ReactDOM.findDOMNode(this.refs.fileSelector).dispatchEvent(evt); } }, diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js index 6612f968..5d255897 100644 --- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js +++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils'; import { getLangText } from '../../../utils/lang_utils'; @@ -65,7 +66,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = }, clearSelection() { - this.refs.fileSelector.getDOMNode().value = ''; + ReactDOM.findDOMNode(this.refs.fileSelector).value = ''; }, handleOnClick() { @@ -87,7 +88,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = 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); + ReactDOM.findDOMNode(this.refs.fileSelector).dispatchEvent(evt); } }, diff --git a/js/components/global_notification.js b/js/components/global_notification.js index c1477f67..2e02f9f9 100644 --- a/js/components/global_notification.js +++ b/js/components/global_notification.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import classNames from 'classnames'; import GlobalNotificationActions from '../actions/global_notification_actions'; @@ -48,7 +49,7 @@ let GlobalNotification = React.createClass({ handleContainerResize() { this.setState({ - containerWidth: this.refs.notificationWrapper.getDOMNode().offsetWidth + containerWidth: ReactDOM.findDOMNode(this.refs.notificationWrapper).offsetWidth }); }, diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js index b91f9789..2aacb267 100644 --- a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js +++ b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import ReactDOM from 'react-dom'; import UserStore from '../../../../../stores/user_store'; import UserActions from '../../../../../actions/user_actions'; @@ -136,7 +137,7 @@ let PrizeJurySettings = React.createClass({ handleCreateSuccess(response) { PrizeJuryActions.fetchJury(); this.displayNotification(response); - this.refs.form.refs.email.refs.input.getDOMNode().value = null; + ReactDOM.findDOMNode(this.refs.form.refs.email.refs.input).value = null; }, handleActivate(event) {