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 initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || Boolean(initialContent); const isReady = !editorStateTransfer || Boolean(initialContent);
const { editMessage, endEditing, setContent } = useEditing(initialContent, editorStateTransfer); const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
return isReady && <WysiwygComposer return isReady && <WysiwygComposer
initialContent={initialContent} initialContent={initialContent}
onChange={setContent} onChange={onChange}
onSend={editMessage} onSend={editMessage}
{...props}> {...props}>
{ (ref, wysiwyg, { (ref, wysiwyg,
content) => ( content) => (
<> <>
<Content disabled={props.disabled} ref={ref} /> <Content disabled={props.disabled} ref={ref} />
<EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} /> <EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} isSaveDisabled={isSaveDisabled} />
</>) </>)
} }
</WysiwygComposer>; </WysiwygComposer>;

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

@ -22,14 +22,15 @@ import AccessibleButton from '../../../elements/AccessibleButton';
interface EditionButtonsProps { interface EditionButtonsProps {
onCancelClick: MouseEventHandler<HTMLButtonElement>; onCancelClick: MouseEventHandler<HTMLButtonElement>;
onSaveClick: 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"> return <div className="mx_EditMessageComposer_buttons">
<AccessibleButton kind="secondary" onClick={onCancelClick}> <AccessibleButton kind="secondary" onClick={onCancelClick}>
{ _t("Cancel") } { _t("Cancel") }
</AccessibleButton> </AccessibleButton>
<AccessibleButton kind="primary" disabled={false} onClick={onSaveClick}> <AccessibleButton kind="primary" onClick={onSaveClick} disabled={isSaveDisabled}>
{ _t("Save") } { _t("Save") }
</AccessibleButton> </AccessibleButton>
</div>; </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 roomContext = useRoomContext();
const mxClient = useMatrixClientContext(); const mxClient = useMatrixClientContext();
const [isSaveDisabled, setIsSaveDisabled] = useState(true);
const [content, setContent] = useState(initialContent); const [content, setContent] = useState(initialContent);
const onChange = useCallback((_content: string) => {
setContent(_content);
setIsSaveDisabled(_isSaveDisabled => _isSaveDisabled && _content === initialContent);
}, [initialContent]);
const editMessageMemoized = useCallback(() => const editMessageMemoized = useCallback(() =>
editMessage(content, { roomContext, mxClient, editorStateTransfer }), editMessage(content, { roomContext, mxClient, editorStateTransfer }),
[content, roomContext, mxClient, editorStateTransfer], [content, roomContext, mxClient, editorStateTransfer],
); );
const endEditingMemoized = useCallback(() => endEditing(roomContext), [roomContext]); const endEditingMemoized = useCallback(() => endEditing(roomContext), [roomContext]);
return { onChange, editMessage: editMessageMemoized, endEditing: endEditingMemoized, isSaveDisabled };
return { setContent, editMessage: editMessageMemoized, endEditing: endEditingMemoized };
} }