port to react 0.14, removing getDOMNode()s for DOM components and turning them into ReactDOM.findDOMNode()s for React components
This commit is contained in:
parent
87bb7c9b7b
commit
2ccd881665
|
@ -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";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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 ||
|
||||||
|
|
|
@ -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();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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") {
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue