imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3712 from matrix-org/t3chguy/react16_refs

Browse source 
Migrate away from React Legacy string refs
This commit is contained in:
Michael Telatynski 2019-12-10 17:43:37 +00:00 • committed by GitHub
commit c1b1f98201
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 536 additions and 407 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/views/rooms/AuxPanel.js
View file

@ -188,14 +188,15 @@ module.exports = createReactClass({
}
const callView = (
<CallView ref="callView" room={this.props.room}
<CallView
room={this.props.room}
ConferenceHandler={this.props.conferenceHandler}
onResize={this.props.onResize}
maxVideoHeight={this.props.maxHeight}
/>
);
const appsDrawer = <AppsDrawer ref="appsDrawer"
const appsDrawer = <AppsDrawer
room={this.props.room}
userId={this.props.userId}
maxHeight={this.props.maxHeight}

21
src/components/views/rooms/EventTile.js
View file

@ -19,7 +19,7 @@ limitations under the License.
import ReplyThread from "../elements/ReplyThread";
import React from 'react';
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
const classNames = require("classnames");
@ -224,6 +224,9 @@ module.exports = createReactClass({
// don't do RR animations until we are mounted
this._suppressReadReceiptAnimation = true;
this._verifyEvent(this.props.mxEvent);
this._tile = createRef();
this._replyThread = createRef();
},
componentDidMount: function() {
@ -512,11 +515,11 @@ module.exports = createReactClass({
},
getTile() {
return this.refs.tile;
return this._tile.current;
},
getReplyThread() {
return this.refs.replyThread;
return this._replyThread.current;
},
getReactions() {
@ -748,7 +751,7 @@ module.exports = createReactClass({
</a>
</div>
<div className="mx_EventTile_line">
<EventTileType ref="tile"
<EventTileType ref={this._tile}
mxEvent={this.props.mxEvent}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
@ -762,7 +765,7 @@ module.exports = createReactClass({
return (
<div className={classes}>
<div className="mx_EventTile_line">
<EventTileType ref="tile"
<EventTileType ref={this._tile}
mxEvent={this.props.mxEvent}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
@ -792,7 +795,7 @@ module.exports = createReactClass({
this.props.mxEvent,
this.props.onHeightChanged,
this.props.permalinkCreator,
'replyThread',
this._replyThread,
);
}
return (
@ -805,7 +808,7 @@ module.exports = createReactClass({
</a>
{ !isBubbleMessage && this._renderE2EPadlock() }
{ thread }
<EventTileType ref="tile"
<EventTileType ref={this._tile}
mxEvent={this.props.mxEvent}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
@ -820,7 +823,7 @@ module.exports = createReactClass({
this.props.mxEvent,
this.props.onHeightChanged,
this.props.permalinkCreator,
'replyThread',
this._replyThread,
);
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return (
@ -839,7 +842,7 @@ module.exports = createReactClass({
</a>
{ !isBubbleMessage && this._renderE2EPadlock() }
{ thread }
<EventTileType ref="tile"
<EventTileType ref={this._tile}
mxEvent={this.props.mxEvent}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}

14
src/components/views/rooms/LinkPreviewWidget.js
View file

@ -14,7 +14,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';
import { linkifyElement } from '../../../HtmlUtils';
@ -54,17 +54,19 @@ module.exports = createReactClass({
}, (error)=>{
console.error("Failed to get URL preview: " + error);
});
this._description = createRef();
},
componentDidMount: function() {
if (this.refs.description) {
linkifyElement(this.refs.description);
if (this._description.current) {
linkifyElement(this._description.current);
}
},
componentDidUpdate: function() {
if (this.refs.description) {
linkifyElement(this.refs.description);
if (this._description.current) {
linkifyElement(this._description.current);
}
},
@ -129,7 +131,7 @@ module.exports = createReactClass({
<div className="mx_LinkPreviewWidget_caption">
<div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
<div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
<div className="mx_LinkPreviewWidget_description" ref="description">
<div className="mx_LinkPreviewWidget_description" ref={this._description}>
{ p["og:description"] }
</div>
</div>

10
src/components/views/rooms/MessageComposer.js
View file

@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
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 { _t } from '../../../languageHandler';
import CallHandler from '../../../CallHandler';
@ -111,6 +111,8 @@ class UploadButton extends React.Component {
super(props, context);
this.onUploadClick = this.onUploadClick.bind(this);
this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
this._uploadInput = createRef();
}
onUploadClick(ev) {
@ -118,7 +120,7 @@ class UploadButton extends React.Component {
dis.dispatch({action: 'require_registration'});
return;
}
this.refs.uploadInput.click();
this._uploadInput.current.click();
}
onUploadFileInputChange(ev) {
@ -150,7 +152,9 @@ class UploadButton extends React.Component {
onClick={this.onUploadClick}
title={_t('Upload file')}
>
<input ref="uploadInput" type="file"
<input
ref={this._uploadInput}
type="file"
style={uploadInputStyle}
multiple
onChange={this.onUploadFileInputChange}

10
src/components/views/rooms/RoomBreadcrumbs.js
View file

@ -14,7 +14,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 dis from "../../../dispatcher";
import MatrixClientPeg from "../../../MatrixClientPeg";
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
@ -45,6 +45,8 @@ export default class RoomBreadcrumbs extends React.Component {
// The room IDs we're waiting to come down the Room handler and when we
// started waiting for them. Used to track a room over an upgrade/autojoin.
this._waitingRoomQueue = [/* { roomId, addedTs } */];
this._scroller = createRef();
}
componentWillMount() {
@ -284,8 +286,8 @@ export default class RoomBreadcrumbs extends React.Component {
}
this.setState({rooms});
if (this.refs.scroller) {
this.refs.scroller.moveToOrigin();
if (this._scroller.current) {
this._scroller.current.moveToOrigin();
}
// We don't track room aesthetics (badges, membership, etc) over the wire so we
@ -390,7 +392,7 @@ export default class RoomBreadcrumbs extends React.Component {
return (
<div role="toolbar" aria-label={_t("Recent rooms")}>
<IndicatorScrollbar
ref="scroller"
ref={this._scroller}
className="mx_RoomBreadcrumbs"
trackHorizontalOverflow={true}
verticalScrollsHorizontally={true}

2
src/components/views/rooms/RoomDetailList.js
View file

@ -55,7 +55,7 @@ export default createReactClass({
if (rows.length === 0) {
rooms = <i>{ _t('No rooms to show') }</i>;
} else {
rooms = <table ref="directory_table" className="mx_RoomDirectory_table">
rooms = <table className="mx_RoomDirectory_table">
<tbody>
{ this.getRows() }
</tbody>

12
src/components/views/rooms/RoomDetailRow.js
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import sdk from '../../../index';
import React from 'react';
import React, {createRef} from 'react';
import { _t } from '../../../languageHandler';
import { linkifyElement } from '../../../HtmlUtils';
import { ContentRepo } from 'matrix-js-sdk';
@ -49,11 +49,15 @@ export default createReactClass({
},
_linkifyTopic: function() {
if (this.refs.topic) {
linkifyElement(this.refs.topic);
if (this._topic.current) {
linkifyElement(this._topic.current);
}
},
UNSAFE_componentWillMount: function() {
this._topic = createRef();
},
componentDidMount: function() {
this._linkifyTopic();
},
@ -104,7 +108,7 @@ export default createReactClass({
<td className="mx_RoomDirectory_roomDescription">
<div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
{ perms }
<div className="mx_RoomDirectory_topic" ref="topic" onClick={this.onTopicClick}>
<div className="mx_RoomDirectory_topic" ref={this._topic} onClick={this.onTopicClick}>
{ room.topic }
</div>
<div className="mx_RoomDirectory_alias">{ getDisplayAliasForRoom(room) }</div>

12
src/components/views/rooms/RoomHeader.js
View file

@ -14,7 +14,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';
import classNames from 'classnames';
@ -56,6 +56,10 @@ module.exports = createReactClass({
};
},
UNSAFE_componentWillMount: function() {
this._topic = createRef();
},
componentDidMount: function() {
const cli = MatrixClientPeg.get();
cli.on("RoomState.events", this._onRoomStateEvents);
@ -70,8 +74,8 @@ module.exports = createReactClass({
},
componentDidUpdate: function() {
if (this.refs.topic) {
linkifyElement(this.refs.topic);
if (this._topic.current) {
linkifyElement(this._topic.current);
}
},
@ -204,7 +208,7 @@ module.exports = createReactClass({
}
}
const topicElement =
<div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
<div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
const avatarSize = 28;
let roomAvatar;
if (this.props.room) {

16
src/components/views/rooms/RoomNameEditor.js
View file

@ -65,14 +65,14 @@ module.exports = createReactClass({
return (
<div className="mx_RoomHeader_name">
<EditableText ref="editor"
className="mx_RoomHeader_nametext mx_RoomHeader_editable"
placeholderClassName="mx_RoomHeader_placeholder"
placeholder={this._placeholderName}
blurToCancel={false}
initialValue={this.state.name}
onValueChanged={this._onValueChanged}
dir="auto" />
<EditableText
className="mx_RoomHeader_nametext mx_RoomHeader_editable"
placeholderClassName="mx_RoomHeader_placeholder"
placeholder={this._placeholderName}
blurToCancel={false}
initialValue={this.state.name}
onValueChanged={this._onValueChanged}
dir="auto" />
</div>
);
},

12
src/components/views/rooms/SearchBar.js
View file

@ -14,7 +14,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';
const classNames = require('classnames');
const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
@ -29,6 +29,10 @@ module.exports = createReactClass({
});
},
UNSAFE_componentWillMount: function() {
this._search_term = createRef();
},
onThisRoomClick: function() {
this.setState({ scope: 'Room' }, () => this._searchIfQuery());
},
@ -47,13 +51,13 @@ module.exports = createReactClass({
},
_searchIfQuery: function() {
if (this.refs.search_term.value) {
if (this._search_term.current.value) {
this.onSearch();
}
},
onSearch: function() {
this.props.onSearch(this.refs.search_term.value, this.state.scope);
this.props.onSearch(this._search_term.current.value, this.state.scope);
},
render: function() {
@ -78,7 +82,7 @@ module.exports = createReactClass({
</AccessibleButton>
</div>
<div className="mx_SearchBar_input mx_textinput">
<input ref="search_term" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
<input ref={this._search_term} type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
<AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
</div>
<AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />

10
src/components/views/rooms/SlateMessageComposer.js
View file

@ -14,12 +14,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
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 { _t, _td } from '../../../languageHandler';
import CallHandler from '../../../CallHandler';
import MatrixClientPeg from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import sdk from '../../../index';
import dis from '../../../dispatcher';
import RoomViewStore from '../../../stores/RoomViewStore';
@ -27,7 +26,6 @@ import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import Stickerpicker from './Stickerpicker';
import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
import ContentMessages from '../../../ContentMessages';
import classNames from 'classnames';
import E2EIcon from './E2EIcon';
@ -143,6 +141,8 @@ class UploadButton extends React.Component {
super(props, context);
this.onUploadClick = this.onUploadClick.bind(this);
this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
this._uploadInput = createRef();
}
onUploadClick(ev) {
@ -150,7 +150,7 @@ class UploadButton extends React.Component {
dis.dispatch({action: 'require_registration'});
return;
}
this.refs.uploadInput.click();
this._uploadInput.current.click();
}
onUploadFileInputChange(ev) {
@ -182,7 +182,7 @@ class UploadButton extends React.Component {
onClick={this.onUploadClick}
title={_t('Upload file')}
>
<input ref="uploadInput" type="file"
<input ref={this._uploadInput} type="file"
style={uploadInputStyle}
multiple
onChange={this.onUploadFileInputChange}