diff options
| -rw-r--r-- | src/view/com/composer/Composer.tsx | 36 | ||||
| -rw-r--r-- | src/view/com/composer/text-input/TextInput.tsx | 6 | ||||
| -rw-r--r-- | src/view/com/composer/text-input/mobile/Autocomplete.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/util/UserAvatar.tsx | 25 |
4 files changed, 41 insertions, 28 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index e8fe1a7ce..e80b80449 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -657,6 +657,7 @@ export const ComposePost = ({ ref={scrollViewRef} layout={native(LinearTransition)} onScroll={scrollHandler} + contentContainerStyle={a.flex_grow} style={a.flex_1} keyboardShouldPersistTaps="always" onContentSizeChange={onScrollViewContentSizeChange} @@ -795,19 +796,22 @@ let ComposerPost = React.memo(function ComposerPost({ ) return ( - <View style={[styles.post, !isActive && styles.inactivePost]}> - <View - style={[ - styles.textInputLayout, - isNative && styles.textInputLayoutMobile, - ]}> + <View + style={[ + a.mx_lg, + !isActive && styles.inactivePost, + isTextOnly && isNative && a.flex_grow, + ]}> + <View style={[a.flex_row, isNative && a.flex_1]}> <UserAvatar avatar={currentProfile?.avatar} size={50} type={currentProfile?.associated?.labeler ? 'labeler' : 'user'} + style={[a.mt_xs]} /> <TextInput ref={textInput} + style={[a.pt_xs]} richtext={richtext} placeholder={selectTextInputPlaceholder} autoFocus @@ -1077,9 +1081,8 @@ function ComposerEmbeds({ </Animated.View> )} </LayoutAnimationConfig> - - <View style={!video ? [a.mt_md] : []}> - {embed.quote?.uri ? ( + {embed.quote?.uri ? ( + <View style={!video ? [a.mt_md] : []}> <View style={[s.mt5, s.mb2, isWeb && s.mb10]}> <View style={{pointerEvents: 'none'}}> <LazyQuoteEmbed uri={embed.quote.uri} /> @@ -1088,8 +1091,8 @@ function ComposerEmbeds({ <QuoteX onRemove={() => dispatch({type: 'embed_remove_quote'})} /> )} </View> - ) : null} - </View> + </View> + ) : null} </> ) } @@ -1469,7 +1472,6 @@ const styles = StyleSheet.create({ marginLeft: 12, }, stickyFooterWeb: { - // @ts-ignore web-only position: 'sticky', bottom: 0, }, @@ -1503,19 +1505,9 @@ const styles = StyleSheet.create({ justifyContent: 'center', marginRight: 5, }, - post: { - marginHorizontal: 16, - }, inactivePost: { opacity: 0.5, }, - textInputLayout: { - flexDirection: 'row', - paddingTop: 4, - }, - textInputLayoutMobile: { - flex: 1, - }, addExtLinkBtn: { borderWidth: 1, borderRadius: 24, diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index 55fd3650f..6f5e812ed 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -249,9 +249,11 @@ export const TextInput = forwardRef(function TextInputImpl( multiline scrollEnabled={false} numberOfLines={2} + {...props} style={[ inputTextStyle, a.w_full, + !autocompletePrefix && a.h_full, { textAlignVertical: 'top', minHeight: 60, @@ -261,8 +263,8 @@ export const TextInput = forwardRef(function TextInputImpl( borderWidth: 1, borderColor: 'transparent', }, - ]} - {...props}> + props.style, + ]}> {textDecorated} </PasteInput> <Autocomplete diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx index 0fda6843b..5e91ef149 100644 --- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx +++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx @@ -49,7 +49,7 @@ export function Autocomplete({ a.px_sm, a.py_md, ]} - key={item.handle}> + key={item.did}> <PressableScale testID="autocompleteButton" style={[ diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index e0a31c139..20fc1c65d 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -1,5 +1,12 @@ import React, {memo, useMemo} from 'react' -import {Image, Pressable, StyleSheet, View} from 'react-native' +import { + Image, + Pressable, + StyleProp, + StyleSheet, + View, + ViewStyle, +} from 'react-native' import {Image as RNImage} from 'react-native-image-crop-picker' import Svg, {Circle, Path, Rect} from 'react-native-svg' import {ModerationUI} from '@atproto/api' @@ -48,6 +55,7 @@ interface UserAvatarProps extends BaseUserAvatarProps { moderation?: ModerationUI usePlainRNImage?: boolean onLoad?: () => void + style?: StyleProp<ViewStyle> } interface EditableUserAvatarProps extends BaseUserAvatarProps { @@ -181,6 +189,7 @@ let UserAvatar = ({ moderation, usePlainRNImage = false, onLoad, + style, }: UserAvatarProps): React.ReactNode => { const pal = usePalette('default') const backgroundColor = pal.colors.backgroundLight @@ -218,9 +227,19 @@ let UserAvatar = ({ ) }, [moderation?.alert, size, pal]) + const containerStyle = useMemo(() => { + return [ + { + width: size, + height: size, + }, + style, + ] + }, [size, style]) + return avatar && !((moderation?.blur && isAndroid) /* android crashes with blur */) ? ( - <View style={{width: size, height: size}}> + <View style={containerStyle}> {usePlainRNImage ? ( <Image accessibilityIgnoresInvertColors @@ -249,7 +268,7 @@ let UserAvatar = ({ {alert} </View> ) : ( - <View style={{width: size, height: size}}> + <View style={containerStyle}> <DefaultAvatar type={type} shape={finalShape} size={size} /> {alert} </View> |