Revert "Adjust emoji offsets (#28635)" (#28637)

This reverts commit d9c0c49.

Author: chrisnojima

shared/chat/conversation/input-area/suggestors/emoji.tsx

@@ -2,7 +2,13 @@ import * as C from '@/constants'
 import * as Common from './common'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import {type EmojiData, RPCToEmojiData, emojiData} from '@/common-adapters/emoji'
+import {
+  emojiSearch,
+  emojiDataToRenderableEmoji,
+  renderEmoji,
+  type EmojiData,
+  RPCToEmojiData,
+} from '@/util/emoji'
 
 export const transformer = (
   emoji: EmojiData,
@@ -27,7 +33,7 @@ const ItemRenderer = (p: Common.ItemRendererProps<EmojiData>) => {
       ])}
       gap="small"
     >
-      <Kb.Emoji emojiData={item} showTooltip={false} size={24} />
+      {renderEmoji({emoji: emojiDataToRenderableEmoji(item), showTooltip: false, size: 24})}
       <Kb.Text type="BodySmallSemibold">{item.short_name}</Kb.Text>
     </Kb.Box2>
   )
@@ -55,17 +61,17 @@ const useDataSource = (filter: string) => {
   }
 
   // prefill data with stock emoji
-  let results: Array<EmojiData> = emojiData.emojiSearch(filter, 50)
+  let emojiData: Array<EmojiData> = emojiSearch(filter, 50)
 
   if (userEmojis) {
     const userEmoji = userEmojis
       .filter(emoji => emoji.alias.toLowerCase().includes(filter))
       .map(emoji => RPCToEmojiData(emoji, false))
-    results = userEmoji.sort((a, b) => a.short_name.localeCompare(b.short_name)).concat(results)
+    emojiData = userEmoji.sort((a, b) => a.short_name.localeCompare(b.short_name)).concat(emojiData)
   }
 
   return {
-    items: results,
+    items: emojiData,
     loading: userEmojisLoading,
   }
 }

shared/chat/conversation/messages/emoji-row.tsx

@@ -4,6 +4,7 @@ import {useOrdinal} from './ids-context'
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import {EmojiPickerDesktop} from '@/chat/emoji-picker/container'
+import {renderEmoji, RPCUserReacjiToRenderableEmoji} from '@/util/emoji'
 
 type OwnProps = {
   className?: string
@@ -120,14 +121,13 @@ const HoverEmoji = (props: {emoji: T.RPCGen.UserReacji; onClick: () => void}) =>
       hoverColor={Kb.Styles.globalColors.transparent}
       style={styles.emojiBox}
     >
-      <Kb.Emoji
-        userReacji={props.emoji}
-        noAnim={!hovering}
-        showTooltip={false}
-        size={hovering ? 22 : 18}
-        style={styles.hoverEmoji}
-        virtualText={true}
-      />
+      {renderEmoji({
+        emoji: RPCUserReacjiToRenderableEmoji(props.emoji, !hovering),
+        showTooltip: false,
+        size: hovering ? 22 : 18,
+        style: styles.hoverEmoji,
+        virtualText: true,
+      })}
     </Kb.ClickableBox>
   )
 }

shared/chat/conversation/messages/message-popup/reactionitem.tsx

@@ -1,5 +1,6 @@
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
+import {renderEmoji, RPCUserReacjiToRenderableEmoji} from '@/util/emoji'
 
 type Props = {
   onHidden: () => void
@@ -25,7 +26,7 @@ const ReactionItem = (props: Props) => {
     <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
       {topReacjis.map((r, idx) => (
         <Kb.ClickableBox key={r.name || idx} onClick={() => onReact(r.name)} style={styles.clickableBox}>
-          <Kb.Emoji userReacji={r} noAnim={true} showTooltip={false} size={28} />
+          {renderEmoji({emoji: RPCUserReacjiToRenderableEmoji(r, true), showTooltip: false, size: 28})}
         </Kb.ClickableBox>
       ))}
       <Kb.ClickableBox onClick={showPicker} style={styles.clickableBox}>

shared/chat/conversation/messages/react-button.tsx

@@ -105,15 +105,10 @@ const ReactButtonContainer = React.memo(function ReactButtonContainer(p: OwnProp
 
 const markdownOverride: StyleOverride = Kb.Styles.isMobile
   ? {
-      customEmoji: {
-        height: 24,
-        transform: [{translateY: C.isAndroid ? 0 : 3.5}],
-        width: 24,
-      },
-      emoji: {
-        lineHeight: C.isAndroid ? 26 : 28.5,
-      },
-      emojiSize: {size: 24},
+      customEmoji: {height: 24, width: 24},
+      emoji: {height: 21, lineHeight: 24},
+      emojiSize: {size: 22},
+      paragraph: {},
     }
   : {
       customEmoji: {height: 18, width: 18},

shared/chat/conversation/messages/special-top-message.tsx

@@ -206,7 +206,7 @@ const SpecialTopMessage = React.memo(function SpecialTopMessage() {
       {allowDigging && loadMoreType === 'moreToLoad' && pendingState === 'done' && (
         <Kb.Box style={styles.more}>
           <Kb.Text type="BodyBig">
-            <Kb.NativeEmoji size={16} emojiName=":moyai:" />
+            <Kb.Emoji size={16} emojiName=":moyai:" />
           </Kb.Text>
           <Kb.Text type="BodySmallSemibold">Digging ancient messages...</Kb.Text>
         </Kb.Box>

shared/chat/emoji-picker/container.tsx

@@ -2,11 +2,12 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
+import * as Data from '@/util/emoji'
 import type {LayoutEvent} from '@/common-adapters/box'
 import startCase from 'lodash/startCase'
 import SkinTonePicker from './skin-tone-picker'
 import EmojiPicker, {getSkinToneModifierStrIfAvailable} from '.'
-import {type EmojiData, type RenderableEmoji, emojiData} from '@/common-adapters/emoji'
+import {emojiDataToRenderableEmoji, renderEmoji, type EmojiData, type RenderableEmoji} from '@/util/emoji'
 import {usePickerState, type PickKey} from './use-picker'
 import {Keyboard} from 'react-native'
 
@@ -179,7 +180,7 @@ export const EmojiPickerDesktop = (props: Props) => {
   const {onDidPick} = props
   const {filter, onChoose, setFilter: _setFilter, topReacjis} = useReacji(props)
   const {currentSkinTone, setSkinTone} = useSkinTone()
-  const [hoveredEmoji, setHoveredEmoji] = React.useState<EmojiData>(emojiData.defaultHoverEmoji)
+  const [hoveredEmoji, setHoveredEmoji] = React.useState<EmojiData>(Data.defaultHoverEmoji)
   const {waiting, customEmojiGroups} = useCustomReacji(props.onlyTeamCustomEmoji, props.disableCustomEmoji)
   const canManageEmoji = useCanManageEmoji()
   const navigateAppend = C.Chat.useChatNavigateAppend()
@@ -239,13 +240,15 @@ export const EmojiPickerDesktop = (props: Props) => {
           style={styles.footerContainer}
           gap="small"
         >
-          <Kb.Emoji
-            emojiData={hoveredEmoji}
-            skinToneModifier={getSkinToneModifierStrIfAvailable(hoveredEmoji, currentSkinTone)}
-            skinToneKey={currentSkinTone}
-            showTooltip={false}
-            size={36}
-          />
+          {renderEmoji({
+            emoji: emojiDataToRenderableEmoji(
+              hoveredEmoji,
+              getSkinToneModifierStrIfAvailable(hoveredEmoji, currentSkinTone),
+              currentSkinTone
+            ),
+            showTooltip: false,
+            size: 36,
+          })}
           {hoveredEmoji.teamname ? (
             <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne}>
               <Kb.Text type="BodyBig" lineClamp={1}>

shared/chat/emoji-picker/index.tsx

@@ -1,16 +1,29 @@
 import * as React from 'react'
 import type * as T from '@/constants/types'
 import * as C from '@/constants'
+import * as Data from '@/util/emoji'
 import * as Kb from '@/common-adapters'
 import chunk from 'lodash/chunk'
 import {
+  emojiDataToRenderableEmoji,
   getEmojiStr,
+  renderEmoji,
   type EmojiData,
   type RenderableEmoji,
   RPCToEmojiData,
-  emojiDataToRenderableEmoji,
-  emojiData,
-} from '@/common-adapters/emoji'
+} from './../../util/emoji'
+
+// defer loading this until we need to, very expensive
+const _getData = () => {
+  const utilEmoji = require('@/util/emoji') as {
+    categories: typeof Data.categories
+    emojiSearch: typeof Data.emojiSearch
+    emojiNameMap: typeof Data.emojiNameMap
+    skinTones: typeof Data.skinTones
+  }
+  const {categories, emojiSearch, emojiNameMap, skinTones: emojiSkinTones} = utilEmoji
+  return {categories, emojiNameMap, emojiSearch, emojiSkinTones}
+}
 
 const chunkEmojis = (emojis: Array<EmojiData>, emojisPerLine: number): Array<Row> =>
   chunk(emojis, emojisPerLine).map((c, idx) => ({
@@ -24,7 +37,7 @@ const chunkEmojis = (emojis: Array<EmojiData>, emojisPerLine: number): Array<Row
 const removeObsolete = (emojis: Array<EmojiData>) => emojis.filter(e => !e.obsoleted_by)
 
 const getEmojiSections = (emojisPerLine: number): Array<Section> =>
-  emojiData.categories.map(
+  _getData().categories.map(
     c =>
       ({
         data: chunkEmojis(removeObsolete(c.emojis), emojisPerLine),
@@ -38,10 +51,11 @@ const getFrequentSection = (
   customEmojiGroups: ReadonlyArray<T.RPCChat.EmojiGroup>,
   emojisPerLine: number
 ): Section => {
+  const {emojiNameMap} = _getData()
   const customEmojiIndex = getCustomEmojiIndex(customEmojiGroups)
   const emojis = topReacjis.reduce<Array<EmojiData>>((arr, top) => {
     const shortNameNoColons = top.name.replace(/:/g, '')
-    const emoji = emojiData.emojiNameMap[shortNameNoColons] || customEmojiIndex.get(shortNameNoColons)
+    const emoji = emojiNameMap[shortNameNoColons] || customEmojiIndex.get(shortNameNoColons)
     if (emoji) {
       arr.push(emoji)
     }
@@ -133,12 +147,10 @@ const getCustomEmojiIndex = (emojiGroups: ReadonlyArray<T.RPCChat.EmojiGroup>) =
 const emptyCustomEmojiIndex = {filter: () => [], get: () => undefined}
 
 const getResultFilter = (emojiGroups?: ReadonlyArray<T.RPCChat.EmojiGroup>) => {
+  const {emojiSearch} = _getData()
   const customEmojiIndex = emojiGroups ? getCustomEmojiIndex(emojiGroups) : emptyCustomEmojiIndex
   return (filter: string): Array<EmojiData> => {
-    return [
-      ...customEmojiIndex.filter(filter),
-      ...removeObsolete(emojiData.emojiSearch(filter, maxEmojiSearchResults)),
-    ]
+    return [...customEmojiIndex.filter(filter), ...removeObsolete(emojiSearch(filter, maxEmojiSearchResults))]
   }
 }
 
@@ -169,7 +181,8 @@ const getSectionsAndBookmarks = (
   }
 
   getEmojiSections(emojisPerLine).forEach(section => {
-    const categoryIcon = emojiData.categoryIcons[section.title] as Kb.IconType | undefined
+    const cat = Data.categoryIcons as {[key: string]: Kb.IconType}
+    const categoryIcon = cat[section.title]
     categoryIcon &&
       bookmarks.push({
         coveredSectionKeys: new Set([section.key]),
@@ -221,26 +234,16 @@ const EmojiPicker = React.memo(function EmojiPicker(props: Props) {
   const [activeSectionKey, setActiveSectionKey] = React.useState('')
   const getEmojiSingle = (emoji: EmojiData, skinTone?: T.Chat.EmojiSkinTone) => {
     const skinToneModifier = getSkinToneModifierStrIfAvailable(emoji, skinTone)
+    const renderable = emojiDataToRenderableEmoji(emoji, skinToneModifier, skinTone)
     return (
       <Kb.ClickableBox2
         className="emoji-picker-emoji-box"
-        onClick={() => {
-          props.onChoose(
-            getEmojiStr(emoji, skinToneModifier),
-            emojiDataToRenderableEmoji(emoji, skinToneModifier, skinTone)
-          )
-        }}
+        onClick={() => props.onChoose(getEmojiStr(emoji, skinToneModifier), renderable)}
         onMouseOver={props.onHover && (() => props.onHover?.(emoji))}
         style={styles.emoji}
         key={emoji.short_name}
       >
-        <Kb.Emoji
-          emojiData={emoji}
-          skinToneModifier={skinToneModifier}
-          skinToneKey={skinTone}
-          showTooltip={false}
-          size={singleEmojiWidth}
-        />
+        {renderEmoji({emoji: renderable, showTooltip: false, size: singleEmojiWidth})}
       </Kb.ClickableBox2>
     )
   }
@@ -406,7 +409,8 @@ const EmojiPicker = React.memo(function EmojiPicker(props: Props) {
 
 export const getSkinToneModifierStrIfAvailable = (emoji: EmojiData, skinTone?: T.Chat.EmojiSkinTone) => {
   if (skinTone && emoji.skin_variations?.[skinTone]) {
-    const idx = emojiData.skinTones.indexOf(skinTone)
+    const {emojiSkinTones} = _getData()
+    const idx = emojiSkinTones.indexOf(skinTone)
     return `:skin-tone-${idx + 1}:`
   }
   return undefined

shared/chat/emoji-picker/skin-tone-picker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import * as T from '@/constants/types'
-import {emojiData} from '@/common-adapters/emoji'
+import * as Kb from './../../common-adapters'
+import * as T from './../../constants/types'
+import {skinTones} from './../../util/emoji'
 
 const circle = (skinTone: undefined | T.Chat.EmojiSkinTone, isExpanded: boolean, outerCircle: boolean) => {
   return (
@@ -25,10 +25,10 @@ type Props = {
 }
 
 const reorderedSkinTones = (currentSkinTone: Props['currentSkinTone']) => {
-  if (Kb.Styles.isMobile || !currentSkinTone) return emojiData.skinTones
-  const idx = emojiData.skinTones.indexOf(currentSkinTone)
-  if (idx === -1) return emojiData.skinTones
-  const rest = [...emojiData.skinTones]
+  if (Kb.Styles.isMobile || !currentSkinTone) return skinTones
+  const idx = skinTones.indexOf(currentSkinTone)
+  if (idx === -1) return skinTones
+  const rest = [...skinTones]
   rest.splice(idx, 1)
   return [currentSkinTone, ...rest]
 }

shared/chat/emoji-picker/use-picker.tsx

@@ -1,6 +1,6 @@
 import * as Z from '@/util/zustand'
 import type * as T from '@/constants/types'
-import type {RenderableEmoji} from '@/common-adapters/emoji'
+import type {RenderableEmoji} from '@/util/emoji'
 
 export type PickKey = 'addAlias' | 'chatInput' | 'reaction'
 type PickerValue = {