mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 02:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6917 from LoganArnett/bug/update-save-enabled-by-field

Browse source
This commit is contained in:
Michael Telatynski 2021-10-08 10:09:54 +01:00 committed by GitHub
commit 5af72d8d1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/components/views/room_settings/RoomProfileSettings.tsx
View file

@ -35,7 +35,7 @@ interface IState {
avatarFile: File; avatarFile: File;
originalTopic: string; originalTopic: string;
topic: string; topic: string;
enableProfileSave: boolean; profileFieldsTouched: Record<string, boolean>;
canSetName: boolean; canSetName: boolean;
canSetTopic: boolean; canSetTopic: boolean;
canSetAvatar: boolean; canSetAvatar: boolean;
@ -71,7 +71,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
avatarFile: null, avatarFile: null,
originalTopic: topic, originalTopic: topic,
topic: topic, topic: topic,
enableProfileSave: false, profileFieldsTouched: {},
canSetName: room.currentState.maySendStateEvent('m.room.name', client.getUserId()), canSetName: room.currentState.maySendStateEvent('m.room.name', client.getUserId()),
canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()), canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()),
canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()), canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()),
@ -88,17 +88,24 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
this.setState({ this.setState({
avatarUrl: null, avatarUrl: null,
avatarFile: null, avatarFile: null,
enableProfileSave: true, profileFieldsTouched: {
...this.state.profileFieldsTouched,
avatar: true,
},
}); });
}; };
private isSaveEnabled = () => {
return Boolean(Object.values(this.state.profileFieldsTouched).length);
};
private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => { private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (!this.state.enableProfileSave) return; if (!this.isSaveEnabled()) return;
this.setState({ this.setState({
enableProfileSave: false, profileFieldsTouched: {},
displayName: this.state.originalDisplayName, displayName: this.state.originalDisplayName,
topic: this.state.originalTopic, topic: this.state.originalTopic,
avatarUrl: this.state.originalAvatarUrl, avatarUrl: this.state.originalAvatarUrl,
@ -110,8 +117,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (!this.state.enableProfileSave) return; if (!this.isSaveEnabled()) return;
this.setState({ enableProfileSave: false }); this.setState({ profileFieldsTouched: {} });
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
@ -156,18 +163,38 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => { private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({ displayName: e.target.value }); this.setState({ displayName: e.target.value });
if (this.state.originalDisplayName === e.target.value) { if (this.state.originalDisplayName === e.target.value) {
this.setState({ enableProfileSave: false }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
name: false,
},
});
} else { } else {
this.setState({ enableProfileSave: true }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
name: true,
},
});
} }
}; };
private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => { private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
this.setState({ topic: e.target.value }); this.setState({ topic: e.target.value });
if (this.state.originalTopic === e.target.value) { if (this.state.originalTopic === e.target.value) {
this.setState({ enableProfileSave: false }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
topic: false,
},
});
} else { } else {
this.setState({ enableProfileSave: true }); this.setState({
profileFieldsTouched: {
...this.state.profileFieldsTouched,
topic: true,
},
});
} }
}; };
@ -176,7 +203,10 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
this.setState({ this.setState({
avatarUrl: this.state.originalAvatarUrl, avatarUrl: this.state.originalAvatarUrl,
avatarFile: null, avatarFile: null,
enableProfileSave: false, profileFieldsTouched: {
...this.state.profileFieldsTouched,
avatar: false,
},
}); });
return; return;
} }
@ -187,7 +217,10 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
this.setState({ this.setState({
avatarUrl: String(ev.target.result), avatarUrl: String(ev.target.result),
avatarFile: file, avatarFile: file,
enableProfileSave: true, profileFieldsTouched: {
...this.state.profileFieldsTouched,
avatar: true,
},
}); });
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
@ -205,14 +238,14 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
<AccessibleButton <AccessibleButton
onClick={this.cancelProfileChanges} onClick={this.cancelProfileChanges}
kind="link" kind="link"
disabled={!this.state.enableProfileSave} disabled={!this.isSaveEnabled()}
> >
{ _t("Cancel") } { _t("Cancel") }
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
onClick={this.saveProfile} onClick={this.saveProfile}
kind="primary" kind="primary"
disabled={!this.state.enableProfileSave} disabled={!this.isSaveEnabled()}
> >
{ _t("Save") } { _t("Save") }
</AccessibleButton> </AccessibleButton>