Apply to old Text component

This commit is contained in:
Eric Bailey
2024-09-15 12:48:13 -05:00
parent 4a0f65c144
commit 58e6ff9ccf
+39 -6
View File
@@ -1,10 +1,11 @@
import React from 'react' import React from 'react'
import {Text as RNText, TextProps} from 'react-native' import {StyleSheet, Text as RNText, TextProps} from 'react-native'
import {UITextView} from 'react-native-uitextview' import {UITextView} from 'react-native-uitextview'
import {lh, s} from 'lib/styles' import {lh, s} from 'lib/styles'
import {TypographyVariant, useTheme} from 'lib/ThemeContext' import {TypographyVariant, useTheme} from 'lib/ThemeContext'
import {isIOS, isWeb} from 'platform/detection' import {isIOS, isWeb} from 'platform/detection'
import {applyFonts, useAlf} from '#/alf'
export type CustomTextProps = TextProps & { export type CustomTextProps = TextProps & {
type?: TypographyVariant type?: TypographyVariant
@@ -32,11 +33,30 @@ export function Text({
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
const {fonts, flags} = useAlf()
if (selectable && isIOS) { if (selectable && isIOS) {
const flattened = StyleSheet.flatten([
s.black,
typography,
lineHeightStyle,
style,
])
if (flags.neue && fonts.family === 'theme') {
applyFonts(flattened)
}
// should always be defined on `typography`
// @ts-ignore
if (flattened.fontSize) {
// @ts-ignore
flattened.fontSize = flattened.fontSize * fonts.scale
}
return ( return (
<UITextView <UITextView
style={[s.black, typography, lineHeightStyle, style]} style={flattened}
selectable={selectable} selectable={selectable}
uiTextView uiTextView
{...props}> {...props}>
@@ -45,15 +65,28 @@ export function Text({
) )
} }
return ( const flattened = StyleSheet.flatten([
<RNText
style={[
s.black, s.black,
typography, typography,
isWeb && fontFamilyStyle, isWeb && fontFamilyStyle,
lineHeightStyle, lineHeightStyle,
style, style,
]} ])
if (flags.neue && fonts.family === 'theme') {
applyFonts(flattened)
}
// should always be defined on `typography`
// @ts-ignore
if (flattened.fontSize) {
// @ts-ignore
flattened.fontSize = flattened.fontSize * fonts.scale
}
return (
<RNText
style={flattened}
// @ts-ignore web only -esb // @ts-ignore web only -esb
dataSet={Object.assign({tooltip: title}, dataSet || {})} dataSet={Object.assign({tooltip: title}, dataSet || {})}
selectable={selectable} selectable={selectable}