From 30c03783d13d9897176e9e93b7e034cf0abd7557 Mon Sep 17 00:00:00 2001 From: tim Date: Mon, 9 May 2016 11:12:46 +0200 Subject: [PATCH] Replace getDOMNode with findDOMNode --- .../ascribe_buttons/acl_button_list.js | 2 +- js/components/ascribe_forms/form.js | 3 +- js/components/ascribe_forms/input_checkbox.js | 3 +- js/components/ascribe_forms/property.js | 17 +++---- js/components/ascribe_panel/action_panel.js | 47 ++++--------------- .../slides_container.js | 2 +- .../facebook_share_button.js | 2 +- .../twitter_share_button.js | 2 +- .../file_drag_and_drop.js | 4 +- .../ascribe_upload_button/upload_button.js | 4 +- js/components/global_notification.js | 2 +- 11 files changed, 32 insertions(+), 56 deletions(-) diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js index dd22bf50..5c0fb424 100644 --- a/js/components/ascribe_buttons/acl_button_list.js +++ b/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 }); }, diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 378f024d..2356d455 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 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, 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 9a495ef6..451324ea 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'; @@ -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 }); }, diff --git a/js/components/ascribe_panel/action_panel.js b/js/components/ascribe_panel/action_panel.js index f6fe9a70..5257a05d 100644 --- a/js/components/ascribe_panel/action_panel.js +++ b/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() { - - let { leftColumnWidth, rightColumnWidth } = this.props; + const { buttons, content, leftColumnWidth, onClick, rightColumnWidth } = this.props; return ( -
+
- {this.props.content} + {content}
- {this.props.buttons} + {buttons}
@@ -68,4 +41,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 18ccd44b..f322b309 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/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 }); }, diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js index d5fbf699..81218724 100644 --- a/js/components/ascribe_social_share/facebook_share_button.js +++ b/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); } }); }, diff --git a/js/components/ascribe_social_share/twitter_share_button.js b/js/components/ascribe_social_share/twitter_share_button.js index b2e8a7dc..2cf50a68 100644 --- a/js/components/ascribe_social_share/twitter_share_button.js +++ b/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, 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 52f9ba72..4f1c2105 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 @@ -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); } }, 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 09eca5bd..6e309c29 100644 --- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js +++ b/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); } }, diff --git a/js/components/global_notification.js b/js/components/global_notification.js index abef1a33..27840898 100644 --- a/js/components/global_notification.js +++ b/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 }); },