diff --git a/packages/common/src/messages/comments.ts b/packages/common/src/messages/comments.ts index f4675c4ad0a..305d1138364 100644 --- a/packages/common/src/messages/comments.ts +++ b/packages/common/src/messages/comments.ts @@ -14,11 +14,13 @@ export const commentsMessages = { showMoreReplies: 'Show More Replies', reply: 'Reply', replies: 'Replies', + replyingTo: (handle: string) => `Replying to @${handle}`, showReplies: (replyCount: number) => `${formatCount(replyCount)} ${pluralize('Reply', replyCount)}`, hideReplies: 'Hide Replies', commentsDisabled: 'Comments are disabled for this track', edited: 'edited', + editing: 'Editing comment', commentSettings: 'Comment Settings', description: 'Prevent certain users from commenting on your tracks.', unmute: 'Unmute', diff --git a/packages/mobile/src/components/comments/CommentDrawer.tsx b/packages/mobile/src/components/comments/CommentDrawer.tsx index c092c06cdea..ea3f130ce87 100644 --- a/packages/mobile/src/components/comments/CommentDrawer.tsx +++ b/packages/mobile/src/components/comments/CommentDrawer.tsx @@ -124,6 +124,7 @@ export const CommentDrawer = () => { const renderFooterComponent = useCallback( (props: BottomSheetFooterProps) => ( + { + const { replyingToUserHandle } = props + const { replyingToComment, setReplyingToComment, setEditingComment } = + useCurrentCommentSection() + const { color, spacing } = useTheme() + + const text = replyingToComment + ? messages.replyingTo(replyingToUserHandle ?? '') + : messages.editing + + const handlePressClear = useCallback(() => { + setReplyingToComment?.(undefined) + setEditingComment?.(undefined) + }, [setEditingComment, setReplyingToComment]) + + return ( + + {text} + + + ) +} + type CommentFormProps = { onSubmit: (commentMessage: string, mentions?: ID[]) => void initialValue?: string @@ -68,6 +122,8 @@ export const CommentForm = (props: CommentFormProps) => { ? messages.addComment : messages.firstComment + const showHelperText = editingComment || replyingToComment + return ( {currentUserId ? ( @@ -76,17 +132,30 @@ export const CommentForm = (props: CommentFormProps) => { style={{ width: 40, height: 40, flexShrink: 0 }} /> ) : null} - - - + + {showHelperText ? ( + + ) : null} + + + + ) } diff --git a/packages/mobile/src/components/composer-input/ComposerInput.tsx b/packages/mobile/src/components/composer-input/ComposerInput.tsx index 963466f6b1f..dbe643d14d3 100644 --- a/packages/mobile/src/components/composer-input/ComposerInput.tsx +++ b/packages/mobile/src/components/composer-input/ComposerInput.tsx @@ -98,7 +98,8 @@ export const ComposerInput = forwardRef(function ComposerInput( messageId, placeholder, presetMessage, - entityId + entityId, + styles: propStyles } = props const [value, setValue] = useState(presetMessage ?? '') const [selection, setSelection] = useState<{ start: number; end: number }>() @@ -273,7 +274,7 @@ export const ComposerInput = forwardRef(function ComposerInput( placeholder={placeholder ?? messages.sendMessagePlaceholder} Icon={renderIcon} styles={{ - root: styles.composeTextContainer, + root: [styles.composeTextContainer, propStyles?.container], input: [ styles.composeTextInput, Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null diff --git a/packages/mobile/src/components/composer-input/types.ts b/packages/mobile/src/components/composer-input/types.ts index 86887d31a3c..2545464d57a 100644 --- a/packages/mobile/src/components/composer-input/types.ts +++ b/packages/mobile/src/components/composer-input/types.ts @@ -1,6 +1,9 @@ import type { LinkEntity } from '@audius/common/hooks' import type { ID } from '@audius/common/models' import type { EntityType } from '@audius/sdk' +import type { TextStyle, ViewStyle } from 'react-native' + +import type { StylesProp } from 'app/styles' import type { TextInputProps } from '../core' @@ -12,6 +15,10 @@ export type ComposerInputProps = { onSubmit?: (value: string, linkEntities: LinkEntity[]) => void presetMessage?: string isLoading?: boolean + styles?: StylesProp<{ + container: ViewStyle + input: TextStyle + }> } & Pick< TextInputProps, 'maxLength' | 'placeholder' | 'onPressIn' | 'readOnly' | 'id'