Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
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()
}; };
}, },