Changeset View
Changeset View
Standalone View
Standalone View
web/chat/edit-text-message.react.js
| Show All 39 Lines | function EditTextMessage(props: Props): React.Node { | ||||
| const threadColor = threadInfo.color; | const threadColor = threadInfo.color; | ||||
| const saveButtonColor: ButtonColor = React.useMemo( | const saveButtonColor: ButtonColor = React.useMemo( | ||||
| () => ({ | () => ({ | ||||
| backgroundColor: `#${threadColor}`, | backgroundColor: `#${threadColor}`, | ||||
| }), | }), | ||||
| [threadColor], | [threadColor], | ||||
| ); | ); | ||||
| const isMessageEmpty = React.useMemo( | |||||
| () => trimMessage(editedMessageDraft) === '', | |||||
| [editedMessageDraft], | |||||
| ); | |||||
| const isMessageEdited = React.useMemo(() => { | const isMessageEdited = React.useMemo(() => { | ||||
| const { messageInfo } = item; | const { messageInfo } = item; | ||||
| if (!messageInfo || !messageInfo.text || !editState) { | if (!messageInfo || !messageInfo.text || !editState) { | ||||
| return false; | return false; | ||||
| } | } | ||||
| if (!editedMessageDraft) { | if (!editedMessageDraft) { | ||||
| return false; | return false; | ||||
| } | } | ||||
| const trimmedDraft = trimMessage(editedMessageDraft); | const trimmedDraft = trimMessage(editedMessageDraft); | ||||
| return trimmedDraft !== messageInfo.text; | return trimmedDraft !== messageInfo.text; | ||||
| }, [editState, editedMessageDraft, item]); | }, [editState, editedMessageDraft, item]); | ||||
| const checkAndEdit = async () => { | const checkAndEdit = async () => { | ||||
| const { id: messageInfoID } = item.messageInfo; | const { id: messageInfoID } = item.messageInfo; | ||||
| if (isMessageEmpty) { | |||||
| return; | |||||
| } | |||||
| if (!isMessageEdited) { | if (!isMessageEdited) { | ||||
| clearEditModal(); | clearEditModal(); | ||||
| return; | return; | ||||
| } | } | ||||
| if (!messageInfoID || !editState?.editedMessageDraft) { | if (!messageInfoID || !editState?.editedMessageDraft) { | ||||
| return; | return; | ||||
| } | } | ||||
| try { | try { | ||||
| ▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines | <div className={containerStyle} ref={myRef}> | ||||
| <div className={css.bottomRow}> | <div className={css.bottomRow}> | ||||
| {editFailed} | {editFailed} | ||||
| <div className={css.buttons}> | <div className={css.buttons}> | ||||
| <Button | <Button | ||||
| className={[css.saveButton, css.smallButton]} | className={[css.saveButton, css.smallButton]} | ||||
| variant="filled" | variant="filled" | ||||
| buttonColor={saveButtonColor} | buttonColor={saveButtonColor} | ||||
| onClick={checkAndEdit} | onClick={checkAndEdit} | ||||
| disabled={isMessageEmpty} | |||||
| > | > | ||||
| Save (enter) | Save (enter) | ||||
| </Button> | </Button> | ||||
| <Button | <Button | ||||
| className={css.smallButton} | className={css.smallButton} | ||||
| variant="filled" | variant="filled" | ||||
| buttonColor={cancelButtonColor} | buttonColor={cancelButtonColor} | ||||
| onClick={clearEditModal} | onClick={clearEditModal} | ||||
| Show All 25 Lines | |||||