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

Remove all usages of UNSAFE_* React methods (#9583)

Browse source
This commit is contained in:
Michael Telatynski 2022-11-18 09:22:43 +00:00 • committed by GitHub
parent 38dbe8ed33
commit 590b845f3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 585 additions and 413 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/views/elements/AppTile.tsx
View file

@ -99,7 +99,6 @@ interface IState {
isUserProfileReady: boolean;
error: Error;
menuDisplayed: boolean;
widgetPageTitle: string;
requiresClient: boolean;
}
@ -229,7 +228,6 @@ export default class AppTile extends React.Component<IProps, IState> {
isUserProfileReady: OwnProfileStore.instance.isProfileInfoFetched,
error: null,
menuDisplayed: false,
widgetPageTitle: this.props.widgetPageTitle,
requiresClient: this.determineInitialRequiresClientState(),
};
}
@ -351,21 +349,13 @@ export default class AppTile extends React.Component<IProps, IState> {
}
};
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
// eslint-disable-next-line @typescript-eslint/naming-convention
public UNSAFE_componentWillReceiveProps(nextProps: IProps): void { // eslint-disable-line camelcase
if (nextProps.app.url !== this.props.app.url) {
this.getNewState(nextProps);
public componentDidUpdate(prevProps: IProps): void {
if (prevProps.app.url !== this.props.app.url) {
this.getNewState(this.props);
if (this.state.hasPermissionToLoad) {
this.resetWidget(nextProps);
this.resetWidget(this.props);
}
}
if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
this.setState({
widgetPageTitle: nextProps.widgetPageTitle,
});
}
}
/**
@ -474,8 +464,8 @@ export default class AppTile extends React.Component<IProps, IState> {
const name = this.formatAppTileName();
const titleSpacer = <span>&nbsp;-&nbsp;</span>;
let title = '';
if (this.state.widgetPageTitle && this.state.widgetPageTitle !== this.formatAppTileName()) {
title = this.state.widgetPageTitle;
if (this.props.widgetPageTitle && this.props.widgetPageTitle !== this.formatAppTileName()) {
title = this.props.widgetPageTitle;
}
return (

23
src/components/views/elements/Dropdown.tsx
View file

@ -22,6 +22,7 @@ import AccessibleButton, { ButtonEvent } from './AccessibleButton';
import { _t } from '../../../languageHandler';
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { objectHasDiff } from "../../../utils/objects";
interface IMenuOptionProps {
children: ReactElement;
@ -136,20 +137,18 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
document.addEventListener('click', this.onDocumentClick, false);
}
componentWillUnmount() {
document.removeEventListener('click', this.onDocumentClick, false);
public componentDidUpdate(prevProps: Readonly<DropdownProps>) {
if (objectHasDiff(this.props, prevProps) && this.props.children?.length) {
this.reindexChildren(this.props.children);
const firstChild = this.props.children[0];
this.setState({
highlightedOption: String(firstChild?.key) ?? null,
});
}
}
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line
if (!nextProps.children || nextProps.children.length === 0) {
return;
}
this.reindexChildren(nextProps.children);
const firstChild = nextProps.children[0];
this.setState({
highlightedOption: firstChild ? firstChild.key : null,
});
componentWillUnmount() {
document.removeEventListener('click', this.onDocumentClick, false);
}
private reindexChildren(children: ReactElement[]): void {

8
src/components/views/elements/EditableText.tsx
View file

@ -70,11 +70,9 @@ export default class EditableText extends React.Component<IProps, IState> {
};
}
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
// eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
public UNSAFE_componentWillReceiveProps(nextProps: IProps): void {
if (nextProps.initialValue !== this.props.initialValue) {
this.value = nextProps.initialValue;
public componentDidUpdate(prevProps: Readonly<IProps>): void {
if (prevProps.initialValue !== this.props.initialValue) {
this.value = this.props.initialValue;
if (this.editableDiv.current) {
this.showPlaceholder(!this.value);
}

33
src/components/views/elements/Pill.tsx
View file

@ -29,6 +29,7 @@ import { Action } from "../../../dispatcher/actions";
import Tooltip, { Alignment } from './Tooltip';
import RoomAvatar from '../avatars/RoomAvatar';
import MemberAvatar from '../avatars/MemberAvatar';
import { objectHasDiff } from "../../../utils/objects";
export enum PillType {
UserMention = 'TYPE_USER_MENTION',
@ -86,19 +87,17 @@ export default class Pill extends React.Component<IProps, IState> {
};
}
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
public async UNSAFE_componentWillReceiveProps(nextProps: IProps): Promise<void> {
let resourceId;
let prefix;
private load(): void {
let resourceId: string;
let prefix: string;
if (nextProps.url) {
if (nextProps.inMessage) {
const parts = parsePermalink(nextProps.url);
if (this.props.url) {
if (this.props.inMessage) {
const parts = parsePermalink(this.props.url);
resourceId = parts.primaryEntityId; // The room/user ID
prefix = parts.sigil; // The first character of prefix
} else {
resourceId = getPrimaryPermalinkEntity(nextProps.url);
resourceId = getPrimaryPermalinkEntity(this.props.url);
prefix = resourceId ? resourceId[0] : undefined;
}
}
@ -109,15 +108,15 @@ export default class Pill extends React.Component<IProps, IState> {
'!': PillType.RoomMention,
}[prefix];
let member;
let room;
let member: RoomMember;
let room: Room;
switch (pillType) {
case PillType.AtRoomMention: {
room = nextProps.room;
room = this.props.room;
}
break;
case PillType.UserMention: {
const localMember = nextProps.room ? nextProps.room.getMember(resourceId) : undefined;
const localMember = this.props.room?.getMember(resourceId);
member = localMember;
if (!localMember) {
member = new RoomMember(null, resourceId);
@ -146,9 +145,13 @@ export default class Pill extends React.Component<IProps, IState> {
public componentDidMount(): void {
this.unmounted = false;
this.matrixClient = MatrixClientPeg.get();
this.load();
}
// eslint-disable-next-line new-cap
this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
public componentDidUpdate(prevProps: Readonly<IProps>) {
if (objectHasDiff(this.props, prevProps)) {
this.load();
}
}
public componentWillUnmount(): void {

30
src/components/views/elements/PowerSelector.tsx
View file

@ -21,6 +21,7 @@ import { _t } from '../../../languageHandler';
import Field from "./Field";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { objectHasDiff } from "../../../utils/objects";
const CUSTOM_VALUE = "SELECT_VALUE_CUSTOM";
@ -72,36 +73,35 @@ export default class PowerSelector extends React.Component<IProps, IState> {
};
}
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
public UNSAFE_componentWillMount(): void {
this.initStateFromProps(this.props);
public componentDidMount() {
this.initStateFromProps();
}
// eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
public UNSAFE_componentWillReceiveProps(newProps: IProps): void {
this.initStateFromProps(newProps);
public componentDidUpdate(prevProps: Readonly<IProps>) {
if (objectHasDiff(this.props, prevProps)) {
this.initStateFromProps();
}
}
private initStateFromProps(newProps: IProps): void {
private initStateFromProps(): void {
// This needs to be done now because levelRoleMap has translated strings
const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
const levelRoleMap = Roles.levelRoleMap(this.props.usersDefault);
const options = Object.keys(levelRoleMap).filter(level => {
return (
level === undefined ||
parseInt(level) <= newProps.maxValue ||
parseInt(level) == newProps.value
parseInt(level) <= this.props.maxValue ||
parseInt(level) == this.props.value
);
}).map(level => parseInt(level));
const isCustom = levelRoleMap[newProps.value] === undefined;
const isCustom = levelRoleMap[this.props.value] === undefined;
this.setState({
levelRoleMap,
options,
custom: isCustom,
customValue: newProps.value,
selectValue: isCustom ? CUSTOM_VALUE : newProps.value,
customValue: this.props.value,
selectValue: isCustom ? CUSTOM_VALUE : this.props.value,
});
}
@ -127,7 +127,7 @@ export default class PowerSelector extends React.Component<IProps, IState> {
if (Number.isFinite(this.state.customValue)) {
this.props.onChange(this.state.customValue, this.props.powerLevelKey);
} else {
this.initStateFromProps(this.props); // reset, invalid input
this.initStateFromProps(); // reset, invalid input
}
};