![]({require("../../../../res/img/warning.svg")}){kind=small}
{ _t("Error decrypting audio") }
![{content.body}]({require("../../../../res/img/spinner.gif")}){kind=small}
-
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 21613733db..0aa2e15f4c 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, {createRef} from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { KeyCode } from '../../Keyboard';
@@ -53,6 +53,10 @@ module.exports = createReactClass({
};
},
+ UNSAFE_componentWillMount: function() {
+ this._search = createRef();
+ },
+
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
},
@@ -66,26 +70,26 @@ module.exports = createReactClass({
switch (payload.action) {
case 'view_room':
- if (this.refs.search && payload.clear_search) {
+ if (this._search.current && payload.clear_search) {
this._clearSearch();
}
break;
case 'focus_room_filter':
- if (this.refs.search) {
- this.refs.search.focus();
+ if (this._search.current) {
+ this._search.current.focus();
}
break;
}
},
onChange: function() {
- if (!this.refs.search) return;
- this.setState({ searchTerm: this.refs.search.value });
+ if (!this._search.current) return;
+ this.setState({ searchTerm: this._search.current.value });
this.onSearch();
},
onSearch: throttle(function() {
- this.props.onSearch(this.refs.search.value);
+ this.props.onSearch(this._search.current.value);
}, 200, {trailing: true, leading: true}),
_onKeyDown: function(ev) {
@@ -113,7 +117,7 @@ module.exports = createReactClass({
},
_clearSearch: function(source) {
- this.refs.search.value = "";
+ this._search.current.value = "";
this.onChange();
if (this.props.onCleared) {
this.props.onCleared(source);
@@ -146,7 +150,7 @@ module.exports = createReactClass({
{
- if (payload.event && this.refs.messagePanel) {
- this.refs.messagePanel.scrollToEventIfNeeded(
+ if (payload.event && this._messagePanel.current) {
+ this._messagePanel.current.scrollToEventIfNeeded(
payload.event.getId(),
);
}
@@ -442,9 +444,9 @@ const TimelinePanel = createReactClass({
// updates from pagination will happen when the paginate completes.
if (toStartOfTimeline || !data || !data.liveEvent) return;
- if (!this.refs.messagePanel) return;
+ if (!this._messagePanel.current) return;
- if (!this.refs.messagePanel.getScrollState().stuckAtBottom) {
+ if (!this._messagePanel.current.getScrollState().stuckAtBottom) {
// we won't load this event now, because we don't want to push any
// events off the other end of the timeline. But we need to note
// that we can now paginate.
@@ -499,7 +501,7 @@ const TimelinePanel = createReactClass({
}
this.setState(updatedState, () => {
- this.refs.messagePanel.updateTimelineMinHeight();
+ this._messagePanel.current.updateTimelineMinHeight();
if (callRMUpdated) {
this.props.onReadMarkerUpdated();
}
@@ -510,13 +512,13 @@ const TimelinePanel = createReactClass({
onRoomTimelineReset: function(room, timelineSet) {
if (timelineSet !== this.props.timelineSet) return;
- if (this.refs.messagePanel && this.refs.messagePanel.isAtBottom()) {
+ if (this._messagePanel.current && this._messagePanel.current.isAtBottom()) {
this._loadTimeline();
}
},
canResetTimeline: function() {
- return this.refs.messagePanel && this.refs.messagePanel.isAtBottom();
+ return this._messagePanel.current && this._messagePanel.current.isAtBottom();
},
onRoomRedaction: function(ev, room) {
@@ -629,7 +631,7 @@ const TimelinePanel = createReactClass({
sendReadReceipt: function() {
if (SettingsStore.getValue("lowBandwidth")) return;
- if (!this.refs.messagePanel) return;
+ if (!this._messagePanel.current) return;
if (!this.props.manageReadReceipts) return;
// This happens on user_activity_end which is delayed, and it's
// very possible have logged out within that timeframe, so check
@@ -815,8 +817,8 @@ const TimelinePanel = createReactClass({
if (this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
this._loadTimeline();
} else {
- if (this.refs.messagePanel) {
- this.refs.messagePanel.scrollToBottom();
+ if (this._messagePanel.current) {
+ this._messagePanel.current.scrollToBottom();
}
}
},
@@ -826,7 +828,7 @@ const TimelinePanel = createReactClass({
*/
jumpToReadMarker: function() {
if (!this.props.manageReadMarkers) return;
- if (!this.refs.messagePanel) return;
+ if (!this._messagePanel.current) return;
if (!this.state.readMarkerEventId) return;
// we may not have loaded the event corresponding to the read-marker
@@ -835,11 +837,11 @@ const TimelinePanel = createReactClass({
//
// a quick way to figure out if we've loaded the relevant event is
// simply to check if the messagepanel knows where the read-marker is.
- const ret = this.refs.messagePanel.getReadMarkerPosition();
+ const ret = this._messagePanel.current.getReadMarkerPosition();
if (ret !== null) {
// The messagepanel knows where the RM is, so we must have loaded
// the relevant event.
- this.refs.messagePanel.scrollToEvent(this.state.readMarkerEventId,
+ this._messagePanel.current.scrollToEvent(this.state.readMarkerEventId,
0, 1/3);
return;
}
@@ -874,8 +876,8 @@ const TimelinePanel = createReactClass({
* at the end of the live timeline.
*/
isAtEndOfLiveTimeline: function() {
- return this.refs.messagePanel
- && this.refs.messagePanel.isAtBottom()
+ return this._messagePanel.current
+ && this._messagePanel.current.isAtBottom()
&& this._timelineWindow
&& !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
},
@@ -887,8 +889,8 @@ const TimelinePanel = createReactClass({
* returns null if we are not mounted.
*/
getScrollState: function() {
- if (!this.refs.messagePanel) { return null; }
- return this.refs.messagePanel.getScrollState();
+ if (!this._messagePanel.current) { return null; }
+ return this._messagePanel.current.getScrollState();
},
// returns one of:
@@ -899,9 +901,9 @@ const TimelinePanel = createReactClass({
// +1: read marker is below the window
getReadMarkerPosition: function() {
if (!this.props.manageReadMarkers) return null;
- if (!this.refs.messagePanel) return null;
+ if (!this._messagePanel.current) return null;
- const ret = this.refs.messagePanel.getReadMarkerPosition();
+ const ret = this._messagePanel.current.getReadMarkerPosition();
if (ret !== null) {
return ret;
}
@@ -936,7 +938,7 @@ const TimelinePanel = createReactClass({
* We pass it down to the scroll panel.
*/
handleScrollKey: function(ev) {
- if (!this.refs.messagePanel) { return; }
+ if (!this._messagePanel.current) { return; }
// jump to the live timeline on ctrl-end, rather than the end of the
// timeline window.
@@ -944,7 +946,7 @@ const TimelinePanel = createReactClass({
ev.keyCode == KeyCode.END) {
this.jumpToLiveTimeline();
} else {
- this.refs.messagePanel.handleScrollKey(ev);
+ this._messagePanel.current.handleScrollKey(ev);
}
},
@@ -986,8 +988,8 @@ const TimelinePanel = createReactClass({
const onLoaded = () => {
// clear the timeline min-height when
// (re)loading the timeline
- if (this.refs.messagePanel) {
- this.refs.messagePanel.onTimelineReset();
+ if (this._messagePanel.current) {
+ this._messagePanel.current.onTimelineReset();
}
this._reloadEvents();
@@ -1002,7 +1004,7 @@ const TimelinePanel = createReactClass({
timelineLoading: false,
}, () => {
// initialise the scroll state of the message panel
- if (!this.refs.messagePanel) {
+ if (!this._messagePanel.current) {
// this shouldn't happen - we know we're mounted because
// we're in a setState callback, and we know
// timelineLoading is now false, so render() should have
@@ -1012,10 +1014,10 @@ const TimelinePanel = createReactClass({
return;
}
if (eventId) {
- this.refs.messagePanel.scrollToEvent(eventId, pixelOffset,
+ this._messagePanel.current.scrollToEvent(eventId, pixelOffset,
offsetBase);
} else {
- this.refs.messagePanel.scrollToBottom();
+ this._messagePanel.current.scrollToBottom();
}
this.sendReadReceipt();
@@ -1134,7 +1136,7 @@ const TimelinePanel = createReactClass({
const ignoreOwn = opts.ignoreOwn || false;
const allowPartial = opts.allowPartial || false;
- const messagePanel = this.refs.messagePanel;
+ const messagePanel = this._messagePanel.current;
if (messagePanel === undefined) return null;
const EventTile = sdk.getComponent('rooms.EventTile');
@@ -1313,7 +1315,8 @@ const TimelinePanel = createReactClass({
['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
);
return (
- -
+
-
{ this.props.children }
{_t( "This homeserver would like to make sure you are not a robot.", )}
- + { error }
- { _t("Start authentication") }
+ { _t("Start authentication") }
{errorSection}
);
diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index a40495893d..2be505a798 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
@@ -106,10 +106,14 @@ module.exports = createReactClass({
};
},
+ UNSAFE_componentWillMount: function() {
+ this._textinput = createRef();
+ },
+
componentDidMount: function() {
if (this.props.focus) {
// Set the cursor at the end of the text input
- this.refs.textinput.value = this.props.value;
+ this._textinput.current.value = this.props.value;
}
},
@@ -126,8 +130,8 @@ module.exports = createReactClass({
let selectedList = this.state.selectedList.slice();
// Check the text input field to see if user has an unconverted address
// If there is and it's valid add it to the local selectedList
- if (this.refs.textinput.value !== '') {
- selectedList = this._addAddressesToList([this.refs.textinput.value]);
+ if (this._textinput.current.value !== '') {
+ selectedList = this._addAddressesToList([this._textinput.current.value]);
if (selectedList === null) return;
}
this.props.onFinished(true, selectedList);
@@ -154,23 +158,23 @@ module.exports = createReactClass({
e.stopPropagation();
e.preventDefault();
if (this.addressSelector) this.addressSelector.chooseSelection();
- } else if (this.refs.textinput.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
+ } else if (this._textinput.current.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
e.stopPropagation();
e.preventDefault();
this.onDismissed(this.state.selectedList.length - 1)();
} else if (e.keyCode === 13) { // enter
e.stopPropagation();
e.preventDefault();
- if (this.refs.textinput.value === '') {
+ if (this._textinput.current.value === '') {
// if there's nothing in the input box, submit the form
this.onButtonClick();
} else {
- this._addAddressesToList([this.refs.textinput.value]);
+ this._addAddressesToList([this._textinput.current.value]);
}
} else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
e.stopPropagation();
e.preventDefault();
- this._addAddressesToList([this.refs.textinput.value]);
+ this._addAddressesToList([this._textinput.current.value]);
}
},
@@ -647,7 +651,7 @@ module.exports = createReactClass({
onPaste={this._onPaste}
rows="1"
id="textinput"
- ref="textinput"
+ ref={this._textinput}
className="mx_AddressPickerDialog_input"
onChange={this.onQueryChanged}
placeholder={this.getPlaceholder()}
diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js
index 598d0ce354..0294c1c700 100644
--- a/src/components/views/dialogs/SetMxIdDialog.js
+++ b/src/components/views/dialogs/SetMxIdDialog.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, {createRef} from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import sdk from '../../../index';
@@ -62,8 +62,13 @@ export default createReactClass({
};
},
+ UNSAFE_componentWillMount: function() {
+ this._input_value = createRef();
+ this._uiAuth = createRef();
+ },
+
componentDidMount: function() {
- this.refs.input_value.select();
+ this._input_value.current.select();
this._matrixClient = MatrixClientPeg.get();
},
@@ -102,8 +107,8 @@ export default createReactClass({
},
onSubmit: function(ev) {
- if (this.refs.uiAuth) {
- this.refs.uiAuth.tryContinue();
+ if (this._uiAuth.current) {
+ this._uiAuth.current.tryContinue();
}
this.setState({
doingUIAuth: true,
@@ -215,7 +220,7 @@ export default createReactClass({
onAuthFinished={this._onUIAuthFinished}
inputs={{}}
poll={true}
- ref="uiAuth"
+ ref={this._uiAuth}
continueIsManaged={true}
/>;
}
@@ -257,7 +262,7 @@ export default createReactClass({
>
-
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 55cb9a5487..9f75e5433b 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -64,6 +64,8 @@ export default class AppTile extends React.Component {
this._onReloadWidgetClick = this._onReloadWidgetClick.bind(this);
this._contextMenuButton = createRef();
+ this._appFrame = createRef();
+ this._menu_bar = createRef();
}
/**
@@ -337,14 +339,14 @@ export default class AppTile extends React.Component {
// HACK: This is a really dirty way to ensure that Jitsi cleans up
// its hold on the webcam. Without this, the widget holds a media
// stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
- if (this.refs.appFrame) {
+ if (this._appFrame.current) {
// In practice we could just do `+= ''` to trick the browser
// into thinking the URL changed, however I can foresee this
// being optimized out by a browser. Instead, we'll just point
// the iframe at a page that is reasonably safe to use in the
// event the iframe doesn't wink away.
// This is relative to where the Riot instance is located.
- this.refs.appFrame.src = 'about:blank';
+ this._appFrame.current.src = 'about:blank';
}
WidgetUtils.setRoomWidget(
@@ -389,7 +391,7 @@ export default class AppTile extends React.Component {
// FIXME: There's probably no reason to do this here: it should probably be done entirely
// in ActiveWidgetStore.
const widgetMessaging = new WidgetMessaging(
- this.props.id, this.props.url, this.props.userWidget, this.refs.appFrame.contentWindow);
+ this.props.id, this.props.url, this.props.userWidget, this._appFrame.current.contentWindow);
ActiveWidgetStore.setWidgetMessaging(this.props.id, widgetMessaging);
widgetMessaging.getCapabilities().then((requestedCapabilities) => {
console.log(`Widget ${this.props.id} requested capabilities: ` + requestedCapabilities);
@@ -496,7 +498,7 @@ export default class AppTile extends React.Component {
ev.preventDefault();
// Ignore clicks on menu bar children
- if (ev.target !== this.refs.menu_bar) {
+ if (ev.target !== this._menu_bar.current) {
return;
}
@@ -555,7 +557,7 @@ export default class AppTile extends React.Component {
_onReloadWidgetClick() {
// Reload iframe in this way to avoid cross-origin restrictions
- this.refs.appFrame.src = this.refs.appFrame.src;
+ this._appFrame.current.src = this._appFrame.current.src;
}
_onContextMenuClick = () => {
@@ -626,7 +628,7 @@ export default class AppTile extends React.Component {
{ this.state.loading && loadingElement }