-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Handle emoji tooltip and fix regression #37814
Changes from 8 commits
d0b8b86
e1d3a12
1e83a69
8b7bb83
8ae4e2f
f927dc3
05b73c6
38f03c9
5ae1ce0
877594c
ce74d6d
b5498c6
ac27db5
01b4764
89e222f
23ec0f0
95e6de7
c147061
ba37e26
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import Text from '@components/Text'; | ||
import type EmojiWithTooltipProps from './types'; | ||
|
||
function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) { | ||
return <Text style={style}>{emojiCode}</Text>; | ||
} | ||
|
||
EmojiWithTooltip.displayName = 'EmojiWithTooltip'; | ||
|
||
export default EmojiWithTooltip; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import React, {useCallback} from 'react'; | ||
import {View} from 'react-native'; | ||
import Text from '@components/Text'; | ||
import Tooltip from '@components/Tooltip'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import * as EmojiUtils from '@libs/EmojiUtils'; | ||
import type EmojiWithTooltipProps from './types'; | ||
|
||
function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) { | ||
const {preferredLocale} = useLocalize(); | ||
const styles = useThemeStyles(); | ||
const emoji = EmojiUtils.findEmojiByCode(emojiCode); | ||
const emojiName = EmojiUtils.getEmojiName(emoji, preferredLocale); | ||
|
||
const emojiTooltipContent = useCallback( | ||
() => ( | ||
<View style={[styles.alignItemsCenter, styles.ph2]}> | ||
<View style={[styles.flexRow, styles.emojiTooltipWrapper]}> | ||
<Text | ||
key={emojiCode} | ||
style={styles.onlyEmojisText} | ||
> | ||
{emojiCode} | ||
</Text> | ||
</View> | ||
<Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`:${emojiName}:`}</Text> | ||
</View> | ||
), | ||
[emojiCode, emojiName, styles.alignItemsCenter, styles.ph2, styles.flexRow, styles.emojiTooltipWrapper, styles.fontColorReactionLabel, styles.onlyEmojisText, styles.textMicro], | ||
); | ||
|
||
return ( | ||
<Tooltip renderTooltipContent={emojiTooltipContent}> | ||
<Text style={[style, styles.cursorDefault]}>{emojiCode}</Text> | ||
</Tooltip> | ||
); | ||
} | ||
|
||
EmojiWithTooltip.displayName = 'EmojiWithTooltip'; | ||
|
||
export default EmojiWithTooltip; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import type {StyleProp, TextStyle} from 'react-native'; | ||
|
||
type EmojiWithTooltipProps = { | ||
emojiCode: string; | ||
style?: StyleProp<TextStyle>; | ||
}; | ||
|
||
export default EmojiWithTooltipProps; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React from 'react'; | ||
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html'; | ||
import EmojiWithTooltip from '@components/EmojiWithTooltip'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
|
||
function EmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) { | ||
const styles = useThemeStyles(); | ||
const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {}; | ||
return ( | ||
<EmojiWithTooltip | ||
style={[style, styles.cursorDefault]} | ||
emojiCode={'data' in tnode ? tnode.data : ''} | ||
/> | ||
); | ||
} | ||
|
||
EmojiRenderer.displayName = 'EmojiRenderer'; | ||
|
||
export default EmojiRenderer; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import type {TDefaultRendererProps} from 'react-native-render-html'; | ||
import type {TTextOrTPhrasing} from './types'; | ||
|
||
// Create a temporary solution to display when there are emojis in the inline code block | ||
// We can remove this after https://github.com/Expensify/App/issues/14676 is fixed | ||
export default function removeEmojiTag(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How does this remove the emoji tag? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @fedirjh If I think we can rename this function to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, it makes sense to rename it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I updated the name of function. |
||
if ('data' in defaultRendererProps.tnode) { | ||
return defaultRendererProps.tnode.data; | ||
} | ||
return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join(''); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import Str from 'expensify-common/lib/str'; | ||
|
||
/** | ||
* Whether to render the report action as text | ||
*/ | ||
export default function shouldRenderAsText(html: string, text: string): boolean { | ||
// On native, we render emoji as text to prevent the large emoji is cut off when the action is edited. | ||
// More info: https://github.com/Expensify/App/pull/35838#issuecomment-1964839350 | ||
const htmlWithoutLineBreak = Str.replaceAll(html, '<br />', '\n'); | ||
const htmlWithoutEmojiOpenTag = Str.replaceAll(htmlWithoutLineBreak, '<emoji>', ''); | ||
return Str.replaceAll(htmlWithoutEmojiOpenTag, '</emoji>', '') === text; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import Str from 'expensify-common/lib/str'; | ||
|
||
/** | ||
* Whether to render the report action as text | ||
*/ | ||
export default function shouldRenderAsText(html: string, text: string): boolean { | ||
return Str.replaceAll(html, '<br />', '\n') === text; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why this change is needed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is my mistake. Reverted this.