Apply to old Text component
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user