render TextInput if text should be selectable

This commit is contained in:
Ansh Nanda
2023-04-11 13:43:32 -07:00
parent 14c8473210
commit d59d701e79
3 changed files with 18 additions and 1 deletions
@@ -200,6 +200,7 @@ export const PostThreadItem = observer(function PostThreadItem({
type="post-text-lg" type="post-text-lg"
richText={item.richText} richText={item.richText}
lineHeight={1.3} lineHeight={1.3}
selectable={true}
/> />
</View> </View>
) : undefined} ) : undefined}
+4
View File
@@ -16,6 +16,7 @@ export function RichText({
richText, richText,
lineHeight = 1.2, lineHeight = 1.2,
style, style,
selectable = false,
numberOfLines, numberOfLines,
}: { }: {
testID?: string testID?: string
@@ -24,6 +25,7 @@ export function RichText({
lineHeight?: number lineHeight?: number
style?: StyleProp<TextStyle> style?: StyleProp<TextStyle>
numberOfLines?: number numberOfLines?: number
selectable?: boolean
}) { }) {
const theme = useTheme() const theme = useTheme()
const pal = usePalette('default') const pal = usePalette('default')
@@ -47,11 +49,13 @@ export function RichText({
</Text> </Text>
) )
} }
return ( return (
<Text <Text
testID={testID} testID={testID}
type={type} type={type}
style={[style, pal.text, lineHeightStyle]} style={[style, pal.text, lineHeightStyle]}
selectable={selectable}
// @ts-ignore web only -prf // @ts-ignore web only -prf
dataSet={WORD_WRAP}> dataSet={WORD_WRAP}>
{text} {text}
+13 -1
View File
@@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import {Text as RNText, TextProps} from 'react-native' import {Text as RNText, TextInput, TextProps} from 'react-native'
import {s, lh} from 'lib/styles' import {s, lh} from 'lib/styles'
import {useTheme, TypographyVariant} from 'lib/ThemeContext' import {useTheme, TypographyVariant} from 'lib/ThemeContext'
@@ -13,11 +13,23 @@ export function Text({
children, children,
lineHeight, lineHeight,
style, style,
selectable,
...props ...props
}: React.PropsWithChildren<CustomTextProps>) { }: React.PropsWithChildren<CustomTextProps>) {
const theme = useTheme() const theme = useTheme()
const typography = theme.typography[type] const typography = theme.typography[type]
const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
if (selectable) {
return (
<TextInput
value={children as string}
scrollEnabled={false}
style={[s.black, typography, lineHeightStyle, style]}
editable={false}
multiline={true}
/>
)
}
return ( return (
<RNText style={[s.black, typography, lineHeightStyle, style]} {...props}> <RNText style={[s.black, typography, lineHeightStyle, style]} {...props}>
{children} {children}