OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

port to react 0.14, removing getDOMNode()s for DOM components and turning them into ReactDOM.findDOMNode()s for React components

pull/351/head
Matthew Hodgson 2015-11-09 23:54:10 +00:00
parent 87bb7c9b7b
commit 2ccd881665
16 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/controllers/organisms/RoomList.js
View File

@ -17,6 +17,7 @@ limitations under the License.
'use strict'; 'use strict';
var React = require("react"); var React = require("react");
var ReactDOM = require("react-dom");
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg"); var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter"); var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter");
var dis = require("matrix-react-sdk/lib/dispatcher"); var dis = require("matrix-react-sdk/lib/dispatcher");
@ -192,8 +193,8 @@ module.exports = {
_repositionTooltip: function(e) { _repositionTooltip: function(e) {
if (this.tooltip && this.tooltip.parentElement) { if (this.tooltip && this.tooltip.parentElement) {
var scroll = this; var scroll = ReactDOM.findDOMNode(this);
this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this.scrollTop) + "px"; this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px";
} }
}, },
}; };

13
src/controllers/organisms/RoomView.js
View File

@ -60,7 +60,7 @@ module.exports = {
componentWillUnmount: function() { componentWillUnmount: function() {
if (this.refs.messageWrapper) { if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
messageWrapper.removeEventListener('drop', this.onDrop); messageWrapper.removeEventListener('drop', this.onDrop);
messageWrapper.removeEventListener('dragover', this.onDragOver); messageWrapper.removeEventListener('dragover', this.onDragOver);
messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd); messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
@ -99,7 +99,6 @@ module.exports = {
// scroll to bottom // scroll to bottom
var messageWrapper = this.refs.messageWrapper; var messageWrapper = this.refs.messageWrapper;
if (messageWrapper) { if (messageWrapper) {
messageWrapper = messageWrapper.getDOMNode();
messageWrapper.scrollTop = messageWrapper.scrollHeight; messageWrapper.scrollTop = messageWrapper.scrollHeight;
} }
} }
@ -138,7 +137,7 @@ module.exports = {
if (room.roomId != this.props.roomId) return; if (room.roomId != this.props.roomId) return;
if (this.refs.messageWrapper) { if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
this.atBottom = ( this.atBottom = (
messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.scrollHeight - messageWrapper.scrollTop <=
(messageWrapper.clientHeight + 150) (messageWrapper.clientHeight + 150)
@ -225,7 +224,7 @@ module.exports = {
componentDidMount: function() { componentDidMount: function() {
if (this.refs.messageWrapper) { if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
messageWrapper.addEventListener('drop', this.onDrop); messageWrapper.addEventListener('drop', this.onDrop);
messageWrapper.addEventListener('dragover', this.onDragOver); messageWrapper.addEventListener('dragover', this.onDragOver);
@ -243,7 +242,7 @@ module.exports = {
componentDidUpdate: function() { componentDidUpdate: function() {
if (!this.refs.messageWrapper) return; if (!this.refs.messageWrapper) return;
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
if (this.state.paginating && !this.waiting_for_paginate) { if (this.state.paginating && !this.waiting_for_paginate) {
var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight; var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
@ -262,7 +261,7 @@ module.exports = {
fillSpace: function() { fillSpace: function() {
if (!this.refs.messageWrapper) return; if (!this.refs.messageWrapper) return;
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) { if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
this.setState({paginating: true}); this.setState({paginating: true});
@ -320,7 +319,7 @@ module.exports = {
onMessageListScroll: function(ev) { onMessageListScroll: function(ev) {
if (this.refs.messageWrapper) { if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
var wasAtBottom = this.atBottom; var wasAtBottom = this.atBottom;
this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight; this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
if (this.atBottom && !wasAtBottom) { if (this.atBottom && !wasAtBottom) {

6
src/skins/vector/views/molecules/ChangePassword.js
View File

@ -27,9 +27,9 @@ module.exports = React.createClass({
mixins: [ChangePasswordController], mixins: [ChangePasswordController],
onClickChange: function() { onClickChange: function() {
var old_password = this.refs.old_input.getDOMNode().value; var old_password = this.refs.old_input.value;
var new_password = this.refs.new_input.getDOMNode().value; var new_password = this.refs.new_input.value;
var confirm_password = this.refs.confirm_input.getDOMNode().value; var confirm_password = this.refs.confirm_input.value;
if (new_password != confirm_password) { if (new_password != confirm_password) {
this.setState({ this.setState({
state: this.Phases.Error, state: this.Phases.Error,

4
src/skins/vector/views/molecules/MessageComposer.js
View File

@ -29,7 +29,7 @@ module.exports = React.createClass({
mixins: [MessageComposerController], mixins: [MessageComposerController],
onUploadClick: function(ev) { onUploadClick: function(ev) {
this.refs.uploadInput.getDOMNode().click(); this.refs.uploadInput.click();
}, },
onUploadFileSelected: function(ev) { onUploadFileSelected: function(ev) {
@ -38,7 +38,7 @@ module.exports = React.createClass({
if (files && files.length > 0) { if (files && files.length > 0) {
this.props.uploadFile(files[0]); this.props.uploadFile(files[0]);
} }
this.refs.uploadInput.getDOMNode().value = null; this.refs.uploadInput.value = null;
}, },
onCallClick: function(ev) { onCallClick: function(ev) {

2
src/skins/vector/views/molecules/RoomHeader.js
View File

@ -35,7 +35,7 @@ module.exports = React.createClass({
}, },
getRoomName: function() { getRoomName: function() {
return this.refs.name_edit.getDOMNode().value; return this.refs.name_edit.value;
}, },
onFullscreenClick: function() { onFullscreenClick: function() {

20
src/skins/vector/views/molecules/RoomSettings.js
View File

@ -27,15 +27,15 @@ module.exports = React.createClass({
mixins: [RoomSettingsController], mixins: [RoomSettingsController],
getTopic: function() { getTopic: function() {
return this.refs.topic.getDOMNode().value; return this.refs.topic.value;
}, },
getJoinRules: function() { getJoinRules: function() {
return this.refs.is_private.getDOMNode().checked ? "invite" : "public"; return this.refs.is_private.checked ? "invite" : "public";
}, },
getHistoryVisibility: function() { getHistoryVisibility: function() {
return this.refs.share_history.getDOMNode().checked ? "shared" : "invited"; return this.refs.share_history.checked ? "shared" : "invited";
}, },
getPowerLevels: function() { getPowerLevels: function() {
@ -45,13 +45,13 @@ module.exports = React.createClass({
power_levels = power_levels.getContent(); power_levels = power_levels.getContent();
var new_power_levels = { var new_power_levels = {
ban: parseInt(this.refs.ban.getDOMNode().value), ban: parseInt(this.refs.ban.value),
kick: parseInt(this.refs.kick.getDOMNode().value), kick: parseInt(this.refs.kick.value),
redact: parseInt(this.refs.redact.getDOMNode().value), redact: parseInt(this.refs.redact.value),
invite: parseInt(this.refs.invite.getDOMNode().value), invite: parseInt(this.refs.invite.value),
events_default: parseInt(this.refs.events_default.getDOMNode().value), events_default: parseInt(this.refs.events_default.value),
state_default: parseInt(this.refs.state_default.getDOMNode().value), state_default: parseInt(this.refs.state_default.value),
users_default: parseInt(this.refs.users_default.getDOMNode().value), users_default: parseInt(this.refs.users_default.value),
users: power_levels.users, users: power_levels.users,
events: power_levels.events, events: power_levels.events,
}; };

7
src/skins/vector/views/molecules/RoomTooltip.js
View File

@ -17,6 +17,7 @@ limitations under the License.
'use strict'; 'use strict';
var React = require('react'); var React = require('react');
var ReactDOM = require('react-dom');
var dis = require('matrix-react-sdk/lib/dispatcher'); var dis = require('matrix-react-sdk/lib/dispatcher');
@ -24,21 +25,21 @@ module.exports = React.createClass({
displayName: 'RoomTooltip', displayName: 'RoomTooltip',
componentDidMount: function() { componentDidMount: function() {
var tooltip = ReactDOM.findDOMNode(this);
if (!this.props.bottom) { if (!this.props.bottom) {
// tell the roomlist about us so it can position us // tell the roomlist about us so it can position us
dis.dispatch({ dis.dispatch({
action: 'view_tooltip', action: 'view_tooltip',
tooltip: this.getDOMNode(), tooltip: tooltip,
}); });
} }
else { else {
var tooltip = this.getDOMNode();
tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px"; tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px";
tooltip.style.display = "block"; tooltip.style.display = "block";
} }
}, },
componentDidUnmount: function() { componentWillUnmount: function() {
if (!this.props.bottom) { if (!this.props.bottom) {
dis.dispatch({ dis.dispatch({
action: 'view_tooltip', action: 'view_tooltip',

2
src/skins/vector/views/molecules/SearchBar.js
View File

@ -39,7 +39,7 @@ module.exports = React.createClass({
onSearchChange: function(e) { onSearchChange: function(e) {
if (e.keyCode === 13) { // on enter... if (e.keyCode === 13) { // on enter...
this.props.onSearch(this.refs.search_term.getDOMNode().value, this.state.scope); this.props.onSearch(this.refs.search_term.value, this.state.scope);
} }
}, },

4
src/skins/vector/views/molecules/UserSelector.js
View File

@ -25,8 +25,8 @@ module.exports = React.createClass({
mixins: [UserSelectorController], mixins: [UserSelectorController],
onAddUserId: function() { onAddUserId: function() {
this.addUser(this.refs.user_id_input.getDOMNode().value); this.addUser(this.refs.user_id_input.value);
this.refs.user_id_input.getDOMNode().value = ""; this.refs.user_id_input.value = "";
}, },
render: function() { render: function() {

2
src/skins/vector/views/molecules/voip/IncomingCallBox.js
View File

@ -27,7 +27,7 @@ module.exports = React.createClass({
mixins: [IncomingCallBoxController], mixins: [IncomingCallBoxController],
getRingAudio: function() { getRingAudio: function() {
return this.refs.ringAudio.getDOMNode(); return this.refs.ringAudio;
}, },
render: function() { render: function() {

9
src/skins/vector/views/molecules/voip/VideoView.js
View File

@ -17,6 +17,7 @@ limitations under the License.
'use strict'; 'use strict';
var React = require('react'); var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('matrix-react-sdk') var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher') var dis = require('matrix-react-sdk/lib/dispatcher')
@ -29,15 +30,15 @@ module.exports = React.createClass({
}, },
getRemoteVideoElement: function() { getRemoteVideoElement: function() {
return this.refs.remote.getDOMNode(); return ReactDOM.findDOMNode(this.refs.remote);
}, },
getRemoteAudioElement: function() { getRemoteAudioElement: function() {
return this.refs.remoteAudio.getDOMNode(); return this.refs.remoteAudio;
}, },
getLocalVideoElement: function() { getLocalVideoElement: function() {
return this.refs.local.getDOMNode(); return ReactDOM.findDOMNode(this.refs.local);
}, },
setContainer: function(c) { setContainer: function(c) {
@ -50,7 +51,7 @@ module.exports = React.createClass({
if (!this.container) { if (!this.container) {
return; return;
} }
var element = this.container.getDOMNode(); var element = this.container;
if (payload.fullscreen) { if (payload.fullscreen) {
var requestMethod = ( var requestMethod = (
element.requestFullScreen || element.requestFullScreen ||

2
src/skins/vector/views/organisms/MemberList.js
View File

@ -71,7 +71,7 @@ module.exports = React.createClass({
}, },
onPopulateInvite: function(e) { onPopulateInvite: function(e) {
this.onInvite(this.refs.invite.getDOMNode().value); this.onInvite(this.refs.invite.value);
e.preventDefault(); e.preventDefault();
}, },

4
src/skins/vector/views/organisms/RoomDirectory.js
View File

@ -110,9 +110,9 @@ module.exports = React.createClass({
onKeyUp: function(ev) { onKeyUp: function(ev) {
this.forceUpdate(); this.forceUpdate();
this.setState({ roomAlias : this.refs.roomAlias.getDOMNode().value }) this.setState({ roomAlias : this.refs.roomAlias.value })
if (ev.key == "Enter") { if (ev.key == "Enter") {
this.joinRoom(this.refs.roomAlias.getDOMNode().value); this.joinRoom(this.refs.roomAlias.value);
} }
if (ev.key == "Down") { if (ev.key == "Down") {

2
src/skins/vector/views/organisms/RoomView.js
View File

@ -103,7 +103,7 @@ module.exports = React.createClass({
scrollToBottom: function() { scrollToBottom: function() {
if (!this.refs.messageWrapper) return; if (!this.refs.messageWrapper) return;
var messageWrapper = this.refs.messageWrapper.getDOMNode(); var messageWrapper = this.refs.messageWrapper;
messageWrapper.scrollTop = messageWrapper.scrollHeight; messageWrapper.scrollTop = messageWrapper.scrollHeight;
}, },

4
src/skins/vector/views/templates/Login.js
View File

@ -70,8 +70,8 @@ module.exports = React.createClass({
*/ */
getFormVals: function() { getFormVals: function() {
return { return {
'username': this.refs.user.getDOMNode().value.trim(), 'username': this.refs.user.value.trim(),
'password': this.refs.pass.getDOMNode().value.trim() 'password': this.refs.pass.value.trim()
}; };
}, },

8
src/skins/vector/views/templates/Register.js
View File

@ -44,10 +44,10 @@ module.exports = React.createClass({
getRegFormVals: function() { getRegFormVals: function() {
return { return {
email: this.refs.email.getDOMNode().value.trim(), email: this.refs.email.value.trim(),
username: this.refs.username.getDOMNode().value.trim(), username: this.refs.username.value.trim(),
password: this.refs.password.getDOMNode().value.trim(), password: this.refs.password.value.trim(),
confirmPassword: this.refs.confirmPassword.getDOMNode().value.trim() confirmPassword: this.refs.confirmPassword.value.trim()
}; };
}, },