Disable Post button when empty (#5953)
* Disable Post button when empty * Use regular disabled button * Disable post on video error until cleared
This commit is contained in:
@@ -293,13 +293,27 @@ export const ComposePost = ({
|
|||||||
return false
|
return false
|
||||||
}, [images, extGifAlt, extGif, requireAltTextEnabled])
|
}, [images, extGifAlt, extGif, requireAltTextEnabled])
|
||||||
|
|
||||||
|
const isEmptyPost =
|
||||||
|
richtext.text.trim().length === 0 &&
|
||||||
|
images.length === 0 &&
|
||||||
|
!extLink &&
|
||||||
|
!extGif &&
|
||||||
|
!quote &&
|
||||||
|
videoState.status === 'idle'
|
||||||
|
|
||||||
|
const canPost =
|
||||||
|
graphemeLength <= MAX_GRAPHEME_LENGTH &&
|
||||||
|
!isAltTextRequiredAndMissing &&
|
||||||
|
!isEmptyPost &&
|
||||||
|
videoState.status !== 'error'
|
||||||
|
|
||||||
const onPressPublish = React.useCallback(
|
const onPressPublish = React.useCallback(
|
||||||
async (finishedUploading: boolean) => {
|
async (finishedUploading: boolean) => {
|
||||||
if (isPublishing || graphemeLength > MAX_GRAPHEME_LENGTH) {
|
if (isPublishing) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isAltTextRequiredAndMissing) {
|
if (!canPost) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -313,19 +327,6 @@ export const ComposePost = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
setError('')
|
setError('')
|
||||||
|
|
||||||
if (
|
|
||||||
richtext.text.trim().length === 0 &&
|
|
||||||
images.length === 0 &&
|
|
||||||
!extLink &&
|
|
||||||
!extGif &&
|
|
||||||
!quote &&
|
|
||||||
videoState.status === 'idle'
|
|
||||||
) {
|
|
||||||
setError(_(msg`Did you want to say anything?`))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsPublishing(true)
|
setIsPublishing(true)
|
||||||
|
|
||||||
let postUri
|
let postUri
|
||||||
@@ -410,10 +411,8 @@ export const ComposePost = ({
|
|||||||
agent,
|
agent,
|
||||||
draft,
|
draft,
|
||||||
extLink,
|
extLink,
|
||||||
extGif,
|
|
||||||
images,
|
images,
|
||||||
graphemeLength,
|
canPost,
|
||||||
isAltTextRequiredAndMissing,
|
|
||||||
isPublishing,
|
isPublishing,
|
||||||
langPrefs.postLanguage,
|
langPrefs.postLanguage,
|
||||||
onClose,
|
onClose,
|
||||||
@@ -421,7 +420,6 @@ export const ComposePost = ({
|
|||||||
quote,
|
quote,
|
||||||
initQuote,
|
initQuote,
|
||||||
replyTo,
|
replyTo,
|
||||||
richtext.text,
|
|
||||||
setLangPrefs,
|
setLangPrefs,
|
||||||
videoState.asset,
|
videoState.asset,
|
||||||
videoState.status,
|
videoState.status,
|
||||||
@@ -438,11 +436,6 @@ export const ComposePost = ({
|
|||||||
}
|
}
|
||||||
}, [onPressPublish, publishOnUpload, videoState.pendingPublish])
|
}, [onPressPublish, publishOnUpload, videoState.pendingPublish])
|
||||||
|
|
||||||
const canPost = useMemo(
|
|
||||||
() => graphemeLength <= MAX_GRAPHEME_LENGTH && !isAltTextRequiredAndMissing,
|
|
||||||
[graphemeLength, isAltTextRequiredAndMissing],
|
|
||||||
)
|
|
||||||
|
|
||||||
const onEmojiButtonPress = useCallback(() => {
|
const onEmojiButtonPress = useCallback(() => {
|
||||||
openEmojiPicker?.(textInput.current?.getCursorPosition())
|
openEmojiPicker?.(textInput.current?.getCursorPosition())
|
||||||
}, [openEmojiPicker])
|
}, [openEmojiPicker])
|
||||||
@@ -692,7 +685,7 @@ function ComposerTopBar({
|
|||||||
<ActivityIndicator />
|
<ActivityIndicator />
|
||||||
</View>
|
</View>
|
||||||
</>
|
</>
|
||||||
) : canPost ? (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
testID="composerPublishBtn"
|
testID="composerPublishBtn"
|
||||||
label={isReply ? 'Publish reply' : 'Publish post'}
|
label={isReply ? 'Publish reply' : 'Publish post'}
|
||||||
@@ -702,7 +695,7 @@ function ComposerTopBar({
|
|||||||
size="small"
|
size="small"
|
||||||
style={[a.rounded_full, a.py_sm]}
|
style={[a.rounded_full, a.py_sm]}
|
||||||
onPress={onPublish}
|
onPress={onPublish}
|
||||||
disabled={isPublishQueued}>
|
disabled={!canPost || isPublishQueued}>
|
||||||
<ButtonText style={[a.text_md]}>
|
<ButtonText style={[a.text_md]}>
|
||||||
{isReply ? (
|
{isReply ? (
|
||||||
<Trans context="action">Reply</Trans>
|
<Trans context="action">Reply</Trans>
|
||||||
@@ -711,12 +704,6 @@ function ComposerTopBar({
|
|||||||
)}
|
)}
|
||||||
</ButtonText>
|
</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
|
||||||
<View style={[styles.postBtn, pal.btn]}>
|
|
||||||
<Text style={[pal.textLight, s.f16, s.bold]}>
|
|
||||||
<Trans context="action">Post</Trans>
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
Reference in New Issue
Block a user