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

Merge pull request #3410 from matrix-org/t3chguy/disable_save_button_msg_edit_nochange

Browse source 
EditMessageComposer: disable Save button until a change has been made
This commit is contained in:
Travis Ralston 2019-09-11 14:27:27 -06:00 committed by GitHub
commit ab6215f9aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/views/rooms/EditMessageComposer.js
View file

@ -112,6 +112,10 @@ export default class EditMessageComposer extends React.Component {
super(props, context); super(props, context);
this.model = null; this.model = null;
this._editorRef = null; this._editorRef = null;
this.state = {
saveDisabled: true,
};
} }
_setEditorRef = ref => { _setEditorRef = ref => {
@ -160,7 +164,7 @@ export default class EditMessageComposer extends React.Component {
dis.dispatch({action: 'focus_composer'}); dis.dispatch({action: 'focus_composer'});
} }
_isModifiedOrSameAsOld(newContent) { _isContentModified(newContent) {
// if nothing has changed then bail // if nothing has changed then bail
const oldContent = this.props.editState.getEvent().getContent(); const oldContent = this.props.editState.getEvent().getContent();
if (!this._editorRef.isModified() || if (!this._editorRef.isModified() ||
@ -176,16 +180,18 @@ export default class EditMessageComposer extends React.Component {
const editedEvent = this.props.editState.getEvent(); const editedEvent = this.props.editState.getEvent();
const editContent = createEditContent(this.model, editedEvent); const editContent = createEditContent(this.model, editedEvent);
const newContent = editContent["m.new_content"]; const newContent = editContent["m.new_content"];
if (!this._isModifiedOrSameAsOld(newContent)) {
return;
}
const roomId = editedEvent.getRoomId();
this._cancelPreviousPendingEdit();
this.context.matrixClient.sendMessage(roomId, editContent);
// If content is modified then send an updated event into the room
if (this._isContentModified(newContent)) {
const roomId = editedEvent.getRoomId();
this._cancelPreviousPendingEdit();
this.context.matrixClient.sendMessage(roomId, editContent);
}
// close the event editing and focus composer
dis.dispatch({action: "edit_event", event: null}); dis.dispatch({action: "edit_event", event: null});
dis.dispatch({action: 'focus_composer'}); dis.dispatch({action: 'focus_composer'});
} };
_cancelPreviousPendingEdit() { _cancelPreviousPendingEdit() {
const originalEvent = this.props.editState.getEvent(); const originalEvent = this.props.editState.getEvent();
@ -240,6 +246,16 @@ export default class EditMessageComposer extends React.Component {
return caretPosition; return caretPosition;
} }
_onChange = () => {
if (!this.state.saveDisabled || !this._editorRef || !this._editorRef.isModified()) {
return;
}
this.setState({
saveDisabled: false,
});
};
render() { render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}> return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
@ -249,10 +265,13 @@ export default class EditMessageComposer extends React.Component {
room={this._getRoom()} room={this._getRoom()}
initialCaret={this.props.editState.getCaret()} initialCaret={this.props.editState.getCaret()}
label={_t("Edit message")} label={_t("Edit message")}
onChange={this._onChange}
/> />
<div className="mx_EditMessageComposer_buttons"> <div className="mx_EditMessageComposer_buttons">
<AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton> <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
<AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton> <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={this.state.saveDisabled}>
{_t("Save")}
</AccessibleButton>
</div> </div>
</div>); </div>);
} }