Fix react function refs returning things

This is incompatible with React 19

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-12-06 11:37:57 +00:00
parent c299d2a0d1
commit 983db465c3
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
7 changed files with 47 additions and 25 deletions

View file

@ -178,7 +178,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
type="password"
disabled={disableForm}
autoComplete="new-password"
fieldRef={(field) => (this.fieldPassword = field)}
fieldRef={(field) => {
this.fieldPassword = field;
}}
/>
</div>
<div className="mx_E2eKeysDialog_inputRow">
@ -195,7 +197,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
type="password"
disabled={disableForm}
autoComplete="new-password"
fieldRef={(field) => (this.fieldPasswordConfirm = field)}
fieldRef={(field) => {
this.fieldPasswordConfirm = field;
}}
/>
</div>
</div>

View file

@ -388,7 +388,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
label={_td("auth|change_password_new_label")}
value={this.state.password}
minScore={PASSWORD_MIN_SCORE}
fieldRef={(field) => (this.fieldPassword = field)}
fieldRef={(field) => {
this.fieldPassword = field;
}}
onChange={this.onInputChanged.bind(this, "password")}
autoComplete="new-password"
/>
@ -399,7 +401,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
labelInvalid={_td("auth|reset_password|passwords_mismatch")}
value={this.state.password2}
password={this.state.password}
fieldRef={(field) => (this.fieldPasswordConfirm = field)}
fieldRef={(field) => {
this.fieldPasswordConfirm = field;
}}
onChange={this.onInputChanged.bind(this, "password2")}
autoComplete="new-password"
/>

View file

@ -456,7 +456,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
: _td("auth|registration|continue_without_email_field_label");
return (
<EmailField
fieldRef={(field) => (this[RegistrationField.Email] = field)}
fieldRef={(field) => {
this[RegistrationField.Email] = field;
}}
label={emailLabel}
value={this.state.email}
validationRules={this.validateEmailRules.bind(this)}
@ -471,7 +473,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
return (
<PassphraseField
id="mx_RegistrationForm_password"
fieldRef={(field) => (this[RegistrationField.Password] = field)}
fieldRef={(field) => {
this[RegistrationField.Password] = field;
}}
minScore={PASSWORD_MIN_SCORE}
value={this.state.password}
onChange={this.onPasswordChange}
@ -486,7 +490,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
return (
<PassphraseConfirmField
id="mx_RegistrationForm_passwordConfirm"
fieldRef={(field) => (this[RegistrationField.PasswordConfirm] = field)}
fieldRef={(field) => {
this[RegistrationField.PasswordConfirm] = field;
}}
autoComplete="new-password"
value={this.state.passwordConfirm}
password={this.state.password}
@ -513,9 +519,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
/>
);
return (
(<Field
ref={field => {
(this[RegistrationField.PhoneNumber] = field);
<Field
ref={(field) => {
this[RegistrationField.PhoneNumber] = field;
}}
type="text"
label={phoneLabel}
@ -523,16 +529,16 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
prefixComponent={phoneCountry}
onChange={this.onPhoneNumberChange}
onValidate={this.onPhoneNumberValidate}
/>)
/>
);
}
public renderUsername(): ReactNode {
return (
(<Field
<Field
id="mx_RegistrationForm_username"
ref={field => {
(this[RegistrationField.Username] = field);
ref={(field) => {
this[RegistrationField.Username] = field;
}}
type="text"
autoFocus={true}
@ -544,7 +550,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
tooltipAlignment={this.tooltipAlignment()}
autoCorrect="off"
autoCapitalize="none"
/>)
/>
);
}

View file

@ -119,7 +119,9 @@ const CodeBlock: React.FC<Props> = ({ children, onHeightChanged }) => {
<div
style={{ display: "contents" }}
dangerouslySetInnerHTML={{ __html: children.innerHTML }}
ref={highlightCode}
ref={(div) => {
highlightCode(div);
}}
/>
</pre>
{expandCollapseButton}

View file

@ -327,11 +327,11 @@ export default class ChangePassword extends React.Component<IProps, IState> {
switch (this.state.phase) {
case Phase.Edit:
return (
(<form className={this.props.className} onSubmit={this.onClickChange}>
<form className={this.props.className} onSubmit={this.onClickChange}>
<div className={rowClassName}>
<Field
ref={field => {
(this[FIELD_OLD_PASSWORD] = field);
ref={(field) => {
this[FIELD_OLD_PASSWORD] = field;
}}
type="password"
label={_t("auth|change_password_current_label")}
@ -342,7 +342,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
</div>
<div className={rowClassName}>
<PassphraseField
fieldRef={(field) => (this[FIELD_NEW_PASSWORD] = field)}
fieldRef={(field) => {
this[FIELD_NEW_PASSWORD] = field;
}}
type="password"
label={_td("auth|change_password_new_label")}
minScore={PASSWORD_MIN_SCORE}
@ -355,8 +357,8 @@ export default class ChangePassword extends React.Component<IProps, IState> {
</div>
<div className={rowClassName}>
<Field
ref={field => {
(this[FIELD_NEW_PASSWORD_CONFIRM] = field);
ref={(field) => {
this[FIELD_NEW_PASSWORD_CONFIRM] = field;
}}
type="password"
label={_t("auth|change_password_confirm_label")}
@ -373,7 +375,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
>
{this.props.buttonLabel || _t("auth|change_password_action")}
</AccessibleButton>
</form>)
</form>
);
case Phase.Uploading:
return (

View file

@ -65,7 +65,9 @@ describe("FilePanel", () => {
roomId={room.roomId}
onClose={jest.fn()}
resizeNotifier={new ResizeNotifier()}
ref={(ref) => (filePanel = ref)}
ref={(ref) => {
filePanel = ref;
}}
/>,
);
await screen.findByText("No files visible in this room");

View file

@ -204,7 +204,9 @@ describe("TimelinePanel", () => {
timelineSet={timelineSet}
manageReadMarkers={true}
manageReadReceipts={true}
ref={(ref) => (timelinePanel = ref)}
ref={(ref) => {
timelinePanel = ref;
}}
/>,
);
await flushPromises();