dan
dc3a42edb1
* Move isOnlyEmoji out of RichText To fix Fast Refresh. * Make renderChildrenWithEmoji work with any children * Always go through UITextView for consistency It already contains the `selectable` and `iOS` checks inside. * Move `emoji` check into `renderChildrenWithEmoji` * Remove unnecessary intermediate UITextView nodes * Make childHasEmoji check recursive It didn't handle nested arrays etc correctly before. * Remove the "children must be string" limitation Should not be necessary now that we correctly handle nested arrays etc. * Fix unnecessary regex reallocation This doesn't have a global flag so it's okay to reuse. * Remove unnecessary <Text> wrapper in RichText
90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
import {UITextView} from 'react-native-uitextview'
|
|
|
|
import {logger} from '#/logger'
|
|
import {atoms, flatten, useAlf, useTheme, web} from '#/alf'
|
|
import {
|
|
childHasEmoji,
|
|
normalizeTextStyles,
|
|
renderChildrenWithEmoji,
|
|
TextProps,
|
|
} from '#/alf/typography'
|
|
import {IS_DEV} from '#/env'
|
|
export type {TextProps}
|
|
|
|
/**
|
|
* Our main text component. Use this most of the time.
|
|
*/
|
|
export function Text({
|
|
children,
|
|
emoji,
|
|
style,
|
|
selectable,
|
|
title,
|
|
dataSet,
|
|
...rest
|
|
}: TextProps) {
|
|
const {fonts, flags} = useAlf()
|
|
const t = useTheme()
|
|
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)], {
|
|
fontScale: fonts.scaleMultiplier,
|
|
fontFamily: fonts.family,
|
|
flags,
|
|
})
|
|
|
|
if (IS_DEV) {
|
|
if (!emoji && childHasEmoji(children)) {
|
|
logger.warn(
|
|
`Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add <Text emoji />'`,
|
|
)
|
|
}
|
|
}
|
|
|
|
const shared = {
|
|
uiTextView: true,
|
|
selectable,
|
|
style: s,
|
|
dataSet: Object.assign({tooltip: title}, dataSet || {}),
|
|
...rest,
|
|
}
|
|
|
|
return (
|
|
<UITextView {...shared}>
|
|
{renderChildrenWithEmoji(children, shared, emoji ?? false)}
|
|
</UITextView>
|
|
)
|
|
}
|
|
|
|
function createHeadingElement({level}: {level: number}) {
|
|
return function HeadingElement({style, ...rest}: TextProps) {
|
|
const attr =
|
|
web({
|
|
role: 'heading',
|
|
'aria-level': level,
|
|
}) || {}
|
|
return <Text {...attr} {...rest} style={style} />
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Use semantic components when it's beneficial to the user or to a web scraper
|
|
*/
|
|
export const H1 = createHeadingElement({level: 1})
|
|
export const H2 = createHeadingElement({level: 2})
|
|
export const H3 = createHeadingElement({level: 3})
|
|
export const H4 = createHeadingElement({level: 4})
|
|
export const H5 = createHeadingElement({level: 5})
|
|
export const H6 = createHeadingElement({level: 6})
|
|
export function P({style, ...rest}: TextProps) {
|
|
const attr =
|
|
web({
|
|
role: 'paragraph',
|
|
}) || {}
|
|
return (
|
|
<Text
|
|
{...attr}
|
|
{...rest}
|
|
style={[atoms.text_md, atoms.leading_normal, flatten(style)]}
|
|
/>
|
|
)
|
|
}
|