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

Disable save button until change

Browse source
This commit is contained in:
Florian Duros 2022-10-19 18:57:49 +02:00
parent 0a65d919a1
commit 63c3a55758
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
View file

@ -44,18 +44,18 @@ export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiw
const initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || Boolean(initialContent);
const { editMessage, endEditing, setContent } = useEditing(initialContent, editorStateTransfer);
const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
return isReady && <WysiwygComposer
initialContent={initialContent}
onChange={setContent}
onChange={onChange}
onSend={editMessage}
{...props}>
{ (ref, wysiwyg,
content) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} />
<EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} isSaveDisabled={isSaveDisabled} />
</>)
}
</WysiwygComposer>;

5
src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
View file

@ -22,14 +22,15 @@ import AccessibleButton from '../../../elements/AccessibleButton';
interface EditionButtonsProps {
onCancelClick: MouseEventHandler<HTMLButtonElement>;
onSaveClick: MouseEventHandler<HTMLButtonElement>;
isSaveDisabled?: boolean;
}
export function EditionButtons({ onCancelClick, onSaveClick }: EditionButtonsProps) {
export function EditionButtons({ onCancelClick, onSaveClick, isSaveDisabled = false }: EditionButtonsProps) {
return <div className="mx_EditMessageComposer_buttons">
<AccessibleButton kind="secondary" onClick={onCancelClick}>
{ _t("Cancel") }
</AccessibleButton>
<AccessibleButton kind="primary" disabled={false} onClick={onSaveClick}>
<AccessibleButton kind="primary" onClick={onSaveClick} disabled={isSaveDisabled}>
{ _t("Save") }
</AccessibleButton>
</div>;

9
src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
View file

@ -26,13 +26,18 @@ export function useEditing(initialContent: string, editorStateTransfer: EditorSt
const roomContext = useRoomContext();
const mxClient = useMatrixClientContext();
const [isSaveDisabled, setIsSaveDisabled] = useState(true);
const [content, setContent] = useState(initialContent);
const onChange = useCallback((_content: string) => {
setContent(_content);
setIsSaveDisabled(_isSaveDisabled => _isSaveDisabled && _content === initialContent);
}, [initialContent]);
const editMessageMemoized = useCallback(() =>
editMessage(content, { roomContext, mxClient, editorStateTransfer }),
[content, roomContext, mxClient, editorStateTransfer],
);
const endEditingMemoized = useCallback(() => endEditing(roomContext), [roomContext]);
return { setContent, editMessage: editMessageMemoized, endEditing: endEditingMemoized };
return { onChange, editMessage: editMessageMemoized, endEditing: endEditingMemoized, isSaveDisabled };
}