From 2ccd881665cf2ef23e705a92d895957883d12cf9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 9 Nov 2015 23:54:10 +0000 Subject: [PATCH] port to react 0.14, removing getDOMNode()s for DOM components and turning them into ReactDOM.findDOMNode()s for React components --- src/controllers/organisms/RoomList.js | 5 +++-- src/controllers/organisms/RoomView.js | 13 ++++++------ .../vector/views/molecules/ChangePassword.js | 6 +++--- .../vector/views/molecules/MessageComposer.js | 4 ++-- .../vector/views/molecules/RoomHeader.js | 2 +- .../vector/views/molecules/RoomSettings.js | 20 +++++++++---------- .../vector/views/molecules/RoomTooltip.js | 7 ++++--- src/skins/vector/views/molecules/SearchBar.js | 2 +- .../vector/views/molecules/UserSelector.js | 4 ++-- .../views/molecules/voip/IncomingCallBox.js | 2 +- .../vector/views/molecules/voip/VideoView.js | 9 +++++---- .../vector/views/organisms/MemberList.js | 2 +- .../vector/views/organisms/RoomDirectory.js | 4 ++-- src/skins/vector/views/organisms/RoomView.js | 2 +- src/skins/vector/views/templates/Login.js | 4 ++-- src/skins/vector/views/templates/Register.js | 8 ++++---- 16 files changed, 48 insertions(+), 46 deletions(-) diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js index 61f47b91..b35febca 100644 --- a/src/controllers/organisms/RoomList.js +++ b/src/controllers/organisms/RoomList.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require("react"); +var ReactDOM = require("react-dom"); var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg"); var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter"); var dis = require("matrix-react-sdk/lib/dispatcher"); @@ -192,8 +193,8 @@ module.exports = { _repositionTooltip: function(e) { if (this.tooltip && this.tooltip.parentElement) { - var scroll = this; - this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this.scrollTop) + "px"; + var scroll = ReactDOM.findDOMNode(this); + this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px"; } }, }; diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 83d44864..9327b862 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -60,7 +60,7 @@ module.exports = { componentWillUnmount: function() { if (this.refs.messageWrapper) { - var messageWrapper = this.refs.messageWrapper.getDOMNode(); + var messageWrapper = this.refs.messageWrapper; messageWrapper.removeEventListener('drop', this.onDrop); messageWrapper.removeEventListener('dragover', this.onDragOver); messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd); @@ -99,7 +99,6 @@ module.exports = { // scroll to bottom var messageWrapper = this.refs.messageWrapper; if (messageWrapper) { - messageWrapper = messageWrapper.getDOMNode(); messageWrapper.scrollTop = messageWrapper.scrollHeight; } } @@ -138,7 +137,7 @@ module.exports = { if (room.roomId != this.props.roomId) return; if (this.refs.messageWrapper) { - var messageWrapper = this.refs.messageWrapper.getDOMNode(); + var messageWrapper = this.refs.messageWrapper; this.atBottom = ( messageWrapper.scrollHeight - messageWrapper.scrollTop <= (messageWrapper.clientHeight + 150) @@ -225,7 +224,7 @@ module.exports = { componentDidMount: function() { if (this.refs.messageWrapper) { - var messageWrapper = this.refs.messageWrapper.getDOMNode(); + var messageWrapper = this.refs.messageWrapper; messageWrapper.addEventListener('drop', this.onDrop); messageWrapper.addEventListener('dragover', this.onDragOver); @@ -243,7 +242,7 @@ module.exports = { componentDidUpdate: function() { if (!this.refs.messageWrapper) return; - var messageWrapper = this.refs.messageWrapper.getDOMNode(); + var messageWrapper = this.refs.messageWrapper; if (this.state.paginating && !this.waiting_for_paginate) { var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight; @@ -262,7 +261,7 @@ module.exports = { fillSpace: function() { 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) { this.setState({paginating: true}); @@ -320,7 +319,7 @@ module.exports = { onMessageListScroll: function(ev) { if (this.refs.messageWrapper) { - var messageWrapper = this.refs.messageWrapper.getDOMNode(); + var messageWrapper = this.refs.messageWrapper; var wasAtBottom = this.atBottom; this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight; if (this.atBottom && !wasAtBottom) { diff --git a/src/skins/vector/views/molecules/ChangePassword.js b/src/skins/vector/views/molecules/ChangePassword.js index 004fed39..32315158 100644 --- a/src/skins/vector/views/molecules/ChangePassword.js +++ b/src/skins/vector/views/molecules/ChangePassword.js @@ -27,9 +27,9 @@ module.exports = React.createClass({ mixins: [ChangePasswordController], onClickChange: function() { - var old_password = this.refs.old_input.getDOMNode().value; - var new_password = this.refs.new_input.getDOMNode().value; - var confirm_password = this.refs.confirm_input.getDOMNode().value; + var old_password = this.refs.old_input.value; + var new_password = this.refs.new_input.value; + var confirm_password = this.refs.confirm_input.value; if (new_password != confirm_password) { this.setState({ state: this.Phases.Error, diff --git a/src/skins/vector/views/molecules/MessageComposer.js b/src/skins/vector/views/molecules/MessageComposer.js index 25f69bda..c75aaa14 100644 --- a/src/skins/vector/views/molecules/MessageComposer.js +++ b/src/skins/vector/views/molecules/MessageComposer.js @@ -29,7 +29,7 @@ module.exports = React.createClass({ mixins: [MessageComposerController], onUploadClick: function(ev) { - this.refs.uploadInput.getDOMNode().click(); + this.refs.uploadInput.click(); }, onUploadFileSelected: function(ev) { @@ -38,7 +38,7 @@ module.exports = React.createClass({ if (files && files.length > 0) { this.props.uploadFile(files[0]); } - this.refs.uploadInput.getDOMNode().value = null; + this.refs.uploadInput.value = null; }, onCallClick: function(ev) { diff --git a/src/skins/vector/views/molecules/RoomHeader.js b/src/skins/vector/views/molecules/RoomHeader.js index 7f45fd42..cc43b1cd 100644 --- a/src/skins/vector/views/molecules/RoomHeader.js +++ b/src/skins/vector/views/molecules/RoomHeader.js @@ -35,7 +35,7 @@ module.exports = React.createClass({ }, getRoomName: function() { - return this.refs.name_edit.getDOMNode().value; + return this.refs.name_edit.value; }, onFullscreenClick: function() { diff --git a/src/skins/vector/views/molecules/RoomSettings.js b/src/skins/vector/views/molecules/RoomSettings.js index c5e08ff9..4fdd40d9 100644 --- a/src/skins/vector/views/molecules/RoomSettings.js +++ b/src/skins/vector/views/molecules/RoomSettings.js @@ -27,15 +27,15 @@ module.exports = React.createClass({ mixins: [RoomSettingsController], getTopic: function() { - return this.refs.topic.getDOMNode().value; + return this.refs.topic.value; }, getJoinRules: function() { - return this.refs.is_private.getDOMNode().checked ? "invite" : "public"; + return this.refs.is_private.checked ? "invite" : "public"; }, getHistoryVisibility: function() { - return this.refs.share_history.getDOMNode().checked ? "shared" : "invited"; + return this.refs.share_history.checked ? "shared" : "invited"; }, getPowerLevels: function() { @@ -45,13 +45,13 @@ module.exports = React.createClass({ power_levels = power_levels.getContent(); var new_power_levels = { - ban: parseInt(this.refs.ban.getDOMNode().value), - kick: parseInt(this.refs.kick.getDOMNode().value), - redact: parseInt(this.refs.redact.getDOMNode().value), - invite: parseInt(this.refs.invite.getDOMNode().value), - events_default: parseInt(this.refs.events_default.getDOMNode().value), - state_default: parseInt(this.refs.state_default.getDOMNode().value), - users_default: parseInt(this.refs.users_default.getDOMNode().value), + ban: parseInt(this.refs.ban.value), + kick: parseInt(this.refs.kick.value), + redact: parseInt(this.refs.redact.value), + invite: parseInt(this.refs.invite.value), + events_default: parseInt(this.refs.events_default.value), + state_default: parseInt(this.refs.state_default.value), + users_default: parseInt(this.refs.users_default.value), users: power_levels.users, events: power_levels.events, }; diff --git a/src/skins/vector/views/molecules/RoomTooltip.js b/src/skins/vector/views/molecules/RoomTooltip.js index 82e3e744..51b13526 100644 --- a/src/skins/vector/views/molecules/RoomTooltip.js +++ b/src/skins/vector/views/molecules/RoomTooltip.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var dis = require('matrix-react-sdk/lib/dispatcher'); @@ -24,21 +25,21 @@ module.exports = React.createClass({ displayName: 'RoomTooltip', componentDidMount: function() { + var tooltip = ReactDOM.findDOMNode(this); if (!this.props.bottom) { // tell the roomlist about us so it can position us dis.dispatch({ action: 'view_tooltip', - tooltip: this.getDOMNode(), + tooltip: tooltip, }); } else { - var tooltip = this.getDOMNode(); tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px"; tooltip.style.display = "block"; } }, - componentDidUnmount: function() { + componentWillUnmount: function() { if (!this.props.bottom) { dis.dispatch({ action: 'view_tooltip', diff --git a/src/skins/vector/views/molecules/SearchBar.js b/src/skins/vector/views/molecules/SearchBar.js index d31e24b4..585b9a6d 100644 --- a/src/skins/vector/views/molecules/SearchBar.js +++ b/src/skins/vector/views/molecules/SearchBar.js @@ -39,7 +39,7 @@ module.exports = React.createClass({ onSearchChange: function(e) { 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); } }, diff --git a/src/skins/vector/views/molecules/UserSelector.js b/src/skins/vector/views/molecules/UserSelector.js index 6b233690..58cb7d21 100644 --- a/src/skins/vector/views/molecules/UserSelector.js +++ b/src/skins/vector/views/molecules/UserSelector.js @@ -25,8 +25,8 @@ module.exports = React.createClass({ mixins: [UserSelectorController], onAddUserId: function() { - this.addUser(this.refs.user_id_input.getDOMNode().value); - this.refs.user_id_input.getDOMNode().value = ""; + this.addUser(this.refs.user_id_input.value); + this.refs.user_id_input.value = ""; }, render: function() { diff --git a/src/skins/vector/views/molecules/voip/IncomingCallBox.js b/src/skins/vector/views/molecules/voip/IncomingCallBox.js index c3bcd825..bf129904 100644 --- a/src/skins/vector/views/molecules/voip/IncomingCallBox.js +++ b/src/skins/vector/views/molecules/voip/IncomingCallBox.js @@ -27,7 +27,7 @@ module.exports = React.createClass({ mixins: [IncomingCallBoxController], getRingAudio: function() { - return this.refs.ringAudio.getDOMNode(); + return this.refs.ringAudio; }, render: function() { diff --git a/src/skins/vector/views/molecules/voip/VideoView.js b/src/skins/vector/views/molecules/voip/VideoView.js index e19f5704..75a2500d 100644 --- a/src/skins/vector/views/molecules/voip/VideoView.js +++ b/src/skins/vector/views/molecules/voip/VideoView.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher') @@ -29,15 +30,15 @@ module.exports = React.createClass({ }, getRemoteVideoElement: function() { - return this.refs.remote.getDOMNode(); + return ReactDOM.findDOMNode(this.refs.remote); }, getRemoteAudioElement: function() { - return this.refs.remoteAudio.getDOMNode(); + return this.refs.remoteAudio; }, getLocalVideoElement: function() { - return this.refs.local.getDOMNode(); + return ReactDOM.findDOMNode(this.refs.local); }, setContainer: function(c) { @@ -50,7 +51,7 @@ module.exports = React.createClass({ if (!this.container) { return; } - var element = this.container.getDOMNode(); + var element = this.container; if (payload.fullscreen) { var requestMethod = ( element.requestFullScreen || diff --git a/src/skins/vector/views/organisms/MemberList.js b/src/skins/vector/views/organisms/MemberList.js index ba7bc010..99e7ac38 100644 --- a/src/skins/vector/views/organisms/MemberList.js +++ b/src/skins/vector/views/organisms/MemberList.js @@ -71,7 +71,7 @@ module.exports = React.createClass({ }, onPopulateInvite: function(e) { - this.onInvite(this.refs.invite.getDOMNode().value); + this.onInvite(this.refs.invite.value); e.preventDefault(); }, diff --git a/src/skins/vector/views/organisms/RoomDirectory.js b/src/skins/vector/views/organisms/RoomDirectory.js index 90c5dd57..8c4dc51d 100644 --- a/src/skins/vector/views/organisms/RoomDirectory.js +++ b/src/skins/vector/views/organisms/RoomDirectory.js @@ -110,9 +110,9 @@ module.exports = React.createClass({ onKeyUp: function(ev) { this.forceUpdate(); - this.setState({ roomAlias : this.refs.roomAlias.getDOMNode().value }) + this.setState({ roomAlias : this.refs.roomAlias.value }) if (ev.key == "Enter") { - this.joinRoom(this.refs.roomAlias.getDOMNode().value); + this.joinRoom(this.refs.roomAlias.value); } if (ev.key == "Down") { diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js index db6681ef..b12c3b50 100644 --- a/src/skins/vector/views/organisms/RoomView.js +++ b/src/skins/vector/views/organisms/RoomView.js @@ -103,7 +103,7 @@ module.exports = React.createClass({ scrollToBottom: function() { if (!this.refs.messageWrapper) return; - var messageWrapper = this.refs.messageWrapper.getDOMNode(); + var messageWrapper = this.refs.messageWrapper; messageWrapper.scrollTop = messageWrapper.scrollHeight; }, diff --git a/src/skins/vector/views/templates/Login.js b/src/skins/vector/views/templates/Login.js index 0378153a..50b09178 100644 --- a/src/skins/vector/views/templates/Login.js +++ b/src/skins/vector/views/templates/Login.js @@ -70,8 +70,8 @@ module.exports = React.createClass({ */ getFormVals: function() { return { - 'username': this.refs.user.getDOMNode().value.trim(), - 'password': this.refs.pass.getDOMNode().value.trim() + 'username': this.refs.user.value.trim(), + 'password': this.refs.pass.value.trim() }; }, diff --git a/src/skins/vector/views/templates/Register.js b/src/skins/vector/views/templates/Register.js index 24f88b05..4490522e 100644 --- a/src/skins/vector/views/templates/Register.js +++ b/src/skins/vector/views/templates/Register.js @@ -44,10 +44,10 @@ module.exports = React.createClass({ getRegFormVals: function() { return { - email: this.refs.email.getDOMNode().value.trim(), - username: this.refs.username.getDOMNode().value.trim(), - password: this.refs.password.getDOMNode().value.trim(), - confirmPassword: this.refs.confirmPassword.getDOMNode().value.trim() + email: this.refs.email.value.trim(), + username: this.refs.username.value.trim(), + password: this.refs.password.value.trim(), + confirmPassword: this.refs.confirmPassword.value.trim() }; },