A set of composer fixes (#1187)

* Don't insert a newline on cmd+entrl (close #1173)

* Don't linkify selected text on url-paste (close #1149)

* Disable the adult content controls if there is no media on the post (close #1169)
zio/stable
Paul Frazee 2023-08-16 10:46:52 -07:00 committed by GitHub
parent 819340dd3c
commit 5e63d3164b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 66 additions and 42 deletions

View File

@ -102,6 +102,7 @@ export interface RepostModal {
export interface SelfLabelModal {
name: 'self-label'
labels: string[]
hasMedia: boolean
onChange: (labels: string[]) => void
}

View File

@ -218,6 +218,7 @@ export const ComposePost = observer(function ComposePost({
const selectTextInputPlaceholder = replyTo ? 'Write your reply' : `What's up?`
const canSelectImages = useMemo(() => gallery.size < 4, [gallery.size])
const hasMedia = gallery.size > 0 || Boolean(extLink)
return (
<KeyboardAvoidingView
@ -236,7 +237,7 @@ export const ComposePost = observer(function ComposePost({
<Text style={[pal.link, s.f18]}>Cancel</Text>
</TouchableOpacity>
<View style={s.flex1} />
<LabelsBtn labels={labels} onChange={setLabels} />
<LabelsBtn labels={labels} onChange={setLabels} hasMedia={hasMedia} />
{isProcessing ? (
<View style={styles.postBtn}>
<ActivityIndicator />

View File

@ -11,9 +11,11 @@ import {isNative} from 'platform/detection'
export const LabelsBtn = observer(function LabelsBtn({
labels,
hasMedia,
onChange,
}: {
labels: string[]
hasMedia: boolean
onChange: (v: string[]) => void
}) {
const pal = usePalette('default')
@ -23,7 +25,7 @@ export const LabelsBtn = observer(function LabelsBtn({
<Button
type="default-light"
testID="labelsBtn"
style={styles.button}
style={[styles.button, !hasMedia && styles.dimmed]}
accessibilityLabel="Content warnings"
accessibilityHint=""
onPress={() => {
@ -32,7 +34,7 @@ export const LabelsBtn = observer(function LabelsBtn({
Keyboard.dismiss()
}
}
store.shell.openModal({name: 'self-label', labels, onChange})
store.shell.openModal({name: 'self-label', labels, hasMedia, onChange})
}}>
<ShieldExclamation style={pal.link} size={26} />
{labels.length > 0 ? (
@ -53,6 +55,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 14,
marginRight: 4,
},
dimmed: {
opacity: 0.4,
},
label: {
maxWidth: 100,
},

View File

@ -60,6 +60,7 @@ export const TextInput = React.forwardRef(
Link.configure({
protocols: ['http', 'https'],
autolink: true,
linkOnPaste: false,
}),
Mention.configure({
HTMLAttributes: {
@ -96,6 +97,7 @@ export const TextInput = React.forwardRef(
onPressPublish(state)
return state
})
return true
}
},
},

View File

@ -16,9 +16,11 @@ export const snapPoints = ['50%']
export const Component = observer(function Component({
labels,
hasMedia,
onChange,
}: {
labels: string[]
hasMedia: boolean
onChange: (labels: string[]) => void
}) {
const pal = usePalette('default')
@ -74,46 +76,59 @@ export const Component = observer(function Component({
</Button>
) : null}
</View>
<View style={s.flexRow}>
<SelectableBtn
testID="sexualLabelBtn"
selected={selected.includes('sexual')}
left
label="Suggestive"
onSelect={() => toggleAdultLabel('sexual')}
accessibilityHint=""
style={s.flex1}
/>
<SelectableBtn
testID="nudityLabelBtn"
selected={selected.includes('nudity')}
label="Nudity"
onSelect={() => toggleAdultLabel('nudity')}
accessibilityHint=""
style={s.flex1}
/>
<SelectableBtn
testID="pornLabelBtn"
selected={selected.includes('porn')}
label="Porn"
right
onSelect={() => toggleAdultLabel('porn')}
accessibilityHint=""
style={s.flex1}
/>
</View>
{hasMedia ? (
<>
<View style={s.flexRow}>
<SelectableBtn
testID="sexualLabelBtn"
selected={selected.includes('sexual')}
left
label="Suggestive"
onSelect={() => toggleAdultLabel('sexual')}
accessibilityHint=""
style={s.flex1}
/>
<SelectableBtn
testID="nudityLabelBtn"
selected={selected.includes('nudity')}
label="Nudity"
onSelect={() => toggleAdultLabel('nudity')}
accessibilityHint=""
style={s.flex1}
/>
<SelectableBtn
testID="pornLabelBtn"
selected={selected.includes('porn')}
label="Porn"
right
onSelect={() => toggleAdultLabel('porn')}
accessibilityHint=""
style={s.flex1}
/>
</View>
<Text style={[pal.text, styles.adultExplainer]}>
{selected.includes('sexual') ? (
<>Pictures meant for adults.</>
) : selected.includes('nudity') ? (
<>Artistic or non-erotic nudity.</>
) : selected.includes('porn') ? (
<>Sexual activity or erotic nudity.</>
) : (
<>If none are selected, suitable for all ages.</>
)}
</Text>
<Text style={[pal.text, styles.adultExplainer]}>
{selected.includes('sexual') ? (
<>Pictures meant for adults.</>
) : selected.includes('nudity') ? (
<>Artistic or non-erotic nudity.</>
) : selected.includes('porn') ? (
<>Sexual activity or erotic nudity.</>
) : (
<>If none are selected, suitable for all ages.</>
)}
</Text>
</>
) : (
<View>
<Text style={[pal.textLight]}>
<Text type="md-bold" style={[pal.textLight]}>
Not Applicable
</Text>
. This warning is only available for posts with media attached.
</Text>
</View>
)}
</View>
</ScrollView>