Skip to content

Commit

Permalink
Emoji handling nested (#5609)
Browse files Browse the repository at this point in the history
  • Loading branch information
estrattonbailey authored Oct 4, 2024
1 parent 00486e9 commit d17da84
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 26 deletions.
31 changes: 19 additions & 12 deletions src/components/Typography.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,14 @@ export function childIsString(
)
}

export function renderChildrenWithEmoji(children: StringChild) {
export function renderChildrenWithEmoji(
children: StringChild,
props: Omit<TextProps, 'children'> = {},
) {
const normalized = Array.isArray(children) ? children : [children]

return (
<UITextView>
<UITextView {...props}>
{normalized.map(child => {
if (typeof child !== 'string') return child

Expand All @@ -68,10 +71,12 @@ export function renderChildrenWithEmoji(children: StringChild) {
}

return child.split(EMOJI).map((stringPart, index) => (
<UITextView key={index}>
<UITextView key={index} {...props}>
{stringPart}
{emojis[index] ? (
<UITextView style={{color: 'black', fontFamily: 'System'}}>
<UITextView
{...props}
style={[props?.style, {color: 'black', fontFamily: 'System'}]}>
{emojis[index]}
</UITextView>
) : null}
Expand Down Expand Up @@ -163,15 +168,17 @@ export function Text({
}
}

const shared = {
uiTextView: true,
selectable,
style: s,
dataSet: Object.assign({tooltip: title}, dataSet || {}),
...rest,
}

return (
<UITextView
selectable={selectable}
uiTextView
style={s}
{...rest}
// @ts-ignore
dataSet={Object.assign({tooltip: title}, dataSet || {})}>
{isIOS && emoji ? renderChildrenWithEmoji(children) : children}
<UITextView {...shared}>
{isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
</UITextView>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/view/com/util/ViewHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export function ViewHeader({
</TouchableOpacity>
) : null}
<View style={styles.titleContainer} pointerEvents="none">
<Text type="title" style={[pal.text, styles.title]}>
<Text emoji type="title" style={[pal.text, styles.title]}>
{title}
</Text>
</View>
Expand Down
31 changes: 18 additions & 13 deletions src/view/com/util/text/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,16 @@ export function Text({
flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
}

const shared = {
uiTextView: true,
selectable,
style: flattened,
...props,
}

return (
<UITextView
style={flattened}
selectable={selectable}
uiTextView
{...props}>
{isIOS && emoji ? renderChildrenWithEmoji(children) : children}
<UITextView {...shared}>
{isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
</UITextView>
)
}
Expand All @@ -104,14 +107,16 @@ export function Text({
flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
}

const shared = {
selectable,
style: flattened,
dataSet: Object.assign({tooltip: title}, dataSet || {}),
...props,
}

return (
<RNText
style={flattened}
// @ts-ignore web only -esb
dataSet={Object.assign({tooltip: title}, dataSet || {})}
selectable={selectable}
{...props}>
{isIOS && emoji ? renderChildrenWithEmoji(children) : children}
<RNText {...shared}>
{isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
</RNText>
)
}

0 comments on commit d17da84

Please sign in to comment.