bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ComposeForm: refactor canSubmit so it works correctly in more scenarios

Browse source
This commit is contained in:
Alex Gleason 2023-11-27 14:20:36 -06:00
parent d94ea49271
commit 889c2658ba
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 14 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/features/compose/components/compose-form.tsx
View file

@ -101,18 +101,20 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
const formRef = useRef<HTMLDivElement>(null); const formRef = useRef<HTMLDivElement>(null);
const spoilerTextRef = useRef<AutosuggestInput>(null); const spoilerTextRef = useRef<AutosuggestInput>(null);
const editorRef = useRef<LexicalEditor>(null); const editorRef = useRef<LexicalEditor>(null);
const { isDraggedOver } = useDraggedFiles(formRef);
const text = editorRef.current?.getEditorState().read(() => $getRoot().getTextContent()) ?? ''; const text = editorRef.current?.getEditorState().read(() => $getRoot().getTextContent()) ?? '';
const { isDraggedOver } = useDraggedFiles(formRef); const fulltext = [spoilerText, countableText(text)].join('');
const isEmpty = !(fulltext.trim() || anyMedia);
const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty && !isUploading;
const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
const canSubmit = !isSubmitting && !isUploading && !isChangingUpload && !isEmpty && length(fulltext) <= maxTootChars;
const getClickableArea = () => { const getClickableArea = () => {
return clickableAreaRef ? clickableAreaRef.current : formRef.current; return clickableAreaRef ? clickableAreaRef.current : formRef.current;
}; };
const isEmpty = () => {
return !(text || spoilerText || anyMedia);
};
const isClickOutside = (e: MouseEvent | React.MouseEvent) => { const isClickOutside = (e: MouseEvent | React.MouseEvent) => {
return ![ return ![
// List of elements that shouldn't collapse the composer when clicked // List of elements that shouldn't collapse the composer when clicked
@ -125,10 +127,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
}; };
const handleClick = useCallback((e: MouseEvent | React.MouseEvent) => { const handleClick = useCallback((e: MouseEvent | React.MouseEvent) => {
if (isEmpty() && isClickOutside(e)) { if (isEmpty && isClickOutside(e)) {
handleClickOutside(); handleClickOutside();
} }
}, []); }, [isEmpty]);
const handleClickOutside = () => { const handleClickOutside = () => {
setComposeFocused(false); setComposeFocused(false);
@ -139,20 +141,12 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
}; };
const handleSubmit = (e?: React.FormEvent<Element>) => { const handleSubmit = (e?: React.FormEvent<Element>) => {
if (!canSubmit) return;
e?.preventDefault();
dispatch(changeCompose(id, text)); dispatch(changeCompose(id, text));
// Submit disabled:
const fulltext = [spoilerText, countableText(text)].join('');
if (e) {
e.preventDefault();
}
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxTootChars || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
return;
}
dispatch(submitCompose(id, { history })); dispatch(submitCompose(id, { history }));
editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
}; };
@ -215,12 +209,6 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
</HStack> </HStack>
), [features, id]); ), [features, id]);
const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty() && !isUploading;
const disabled = isSubmitting;
const countedText = [spoilerText, countableText(text)].join('');
const disabledButton = disabled || isUploading || isChangingUpload || length(countedText) > maxTootChars || (countedText.length !== 0 && countedText.trim().length === 0 && !anyMedia);
const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
const composeModifiers = !condensed && ( const composeModifiers = !condensed && (
<Stack space={4} className='compose-form__modifiers'> <Stack space={4} className='compose-form__modifiers'>
<UploadForm composeId={id} onSubmit={handleSubmit} /> <UploadForm composeId={id} onSubmit={handleSubmit} />
@ -323,7 +311,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
</HStack> </HStack>
)} )}
<Button type='submit' theme='primary' icon={publishIcon} text={publishText} disabled={disabledButton} /> <Button type='submit' theme='primary' icon={publishIcon} text={publishText} disabled={!canSubmit} />
</HStack> </HStack>
</div> </div>
</Stack> </Stack>