ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Replace getDOMNode with findDOMNode

Browse Source
This commit is contained in:
tim 2016-05-09 11:12:46 +02:00 committed by Brett Sun
parent 7e0068bec8
commit 30c03783d1
11 changed files with 32 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_buttons/acl_button_list.js
View File

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

3
js/components/ascribe_forms/form.js
View File

@ -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,

3
js/components/ascribe_forms/input_checkbox.js
View File

@ -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});

17
js/components/ascribe_forms/property.js
View File

@ -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
});
},

47
js/components/ascribe_panel/action_panel.js
View File

@ -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 (
<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>
@ -68,4 +41,4 @@ let ActionPanel = React.createClass({
}
});
export default ActionPanel;
export default ActionPanel;

2
js/components/ascribe_slides_container/slides_container.js
View File

@ -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
});
},

2
js/components/ascribe_social_share/facebook_share_button.js
View File

@ -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);
}
});
},

2
js/components/ascribe_social_share/twitter_share_button.js
View File

@ -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,

4
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
View File

@ -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);
}
},

4
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -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);
}
},

2
js/components/global_notification.js
View File

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