fix: emoji not show

web/app/(commonLayout)/apps/NewAppDialog.tsx

@@ -85,7 +85,14 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
     isCreatingRef.current = false
   }, [isWithTemplate, newAppMode, notify, router, templates, selectedTemplateIndex])
 
-  return (
+  return <>
+    {showEmojiPicker && <EmojiPicker
+      onSelect={(emoji, background) => {
+        console.log(emoji, background)
+        setShowEmojiPicker(false)
+      }}
+      onClose={() => setShowEmojiPicker(false)}
+    />}
     <Dialog
       show={show}
       title={t('app.newApp.startToCreate')}
@@ -96,10 +103,7 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
         </>
       }
     >
-      {showEmojiPicker && <EmojiPicker onSelect={(emoji, background) => {
+
-        console.log(emoji, background)
-        setShowEmojiPicker(false)
-      }} />}
 
       <h3 className={style.newItemCaption}>{t('app.newApp.captionName')}</h3>
 
@@ -195,7 +199,7 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
           )}
       </div>
     </Dialog>
-  )
+  </>
 }
 
 export default NewAppDialog

web/app/components/base/emoji-picker/index.tsx

@@ -14,17 +14,6 @@ import {
 import React from 'react'
 import Modal from '@/app/components/base/modal'
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'em-emoji': React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >;
-    }
-  }
-}
-
 init({ data })
 
 const backgroundColors = [
@@ -48,65 +37,48 @@ const backgroundColors = [
   '#ECE9FE',
   '#FFE4E8',
 ]
-
+interface IEmojiPickerProps {
-interface IColorSelectProps {
+  isModal?: boolean
-  selectedEmoji: string
+  onSelect?: (emoji: string, background: string) => void
-  onSelect: (color: string) => void
+  onClose?: () => void
 }
-const ColorSelect: FC<IColorSelectProps> = (
-  { selectedEmoji, onSelect }
-) => {
-  const [selectBackground, setSelectBackground] = useState(backgroundColors[0]);
-  return <div className='flex flex-col p-3'>
 
-    <p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
+const EmojiPicker: FC<IEmojiPickerProps> = ({
-    <div className='w-full h-full grid grid-cols-8 gap-1'>
+  isModal = true,
-      {backgroundColors.map((color) => {
+  onSelect,
-        return <div
+  onClose
-          key={color}
+
-          className={
+}) => {
-            cn(
+  const { categories } = data as any
-              'cursor-pointer',
+  const [selectedEmoji, setSelectedEmoji] = useState('')
-              `ring-[${color}] hover:ring-1 ring-offset-1`,
+  const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
-              'inline-flex w-10 h-10 rounded-lg items-center justify-center',
+
-              color === selectBackground ? `ring-1 ` : '',
+  return isModal ? <Modal
-            )}
+    onClose={() => { }}
-          onClick={() => {
+    isShow
-            setSelectBackground(color)
+    closable={false}
-            onSelect(color)
+    className={cn(s.container, '!w-[362px] !p-0')}
-          }}
   >
-          <div className={cn(
+    <div className='flex flex-col items-center w-full p-3'>
-            'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
+      <div className="relative w-full">
-          )
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-          } style={{ background: color }}>
+          <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
-            <em-emoji id={selectedEmoji} />
-          </div>
         </div>
-      })}
+        <input type="search" id="search" className="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 " placeholder="Search" />
       </div>
     </div>
-}
+    <Divider className='m-0 mb-3' />
-interface IEmojiSelectProps {
+    <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
-  onSelect?: (emoji: any) => void
+      {categories.map((category: any, index: number) => {
-}
+        return <div key={`category-${index}`} className='flex flex-col'>
-
-const EmojiSelect: FC<IEmojiSelectProps> = ({
-  onSelect
-}) => {
-
-  const { categories, emojis } = data as any
-  return <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
-    {categories.map((category: any) => {
-      return <div key={category.id} className='flex flex-col'>
           <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
           <div className='w-full h-full grid grid-cols-8 gap-1'>
-          {category.emojis.map((emoji: any) => {
+            {category.emojis.map((emoji: string, index: number) => {
               return <div
-              key={emoji}
+                key={`emoji-${index}`}
                 className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
                 onClick={() => {
-                onSelect && onSelect(emoji)
+                  setSelectedEmoji(emoji)
                 }}
               >
                 <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-gray-300'>
@@ -119,49 +91,49 @@ const EmojiSelect: FC<IEmojiSelectProps> = ({
         </div>
       })}
     </div>
-}
-
-interface IEmojiPickerProps {
-  isModal?: boolean
-  onSelect?: (emoji: string, background: string) => void
-}
-const EmojiPicker: FC<IEmojiPickerProps> = ({
-  isModal = true,
-  onSelect
-}) => {
-  const [selectedEmoji, setSelectedEmoji] = useState('')
 
-  const Elem = () => {
+    {/* Color Select */}
-    return isModal ? <Modal
+    <div className='flex flex-col p-3'>
-      onClose={() => { }}
+      <p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
-      isShow
+      <div className='w-full h-full grid grid-cols-8 gap-1'>
-      className={cn(s.container, '!w-[362px] !p-0')}
+        {backgroundColors.map((color) => {
+          return <div
+            key={color}
+            className={
+              cn(
+                'cursor-pointer',
+                `ring-[${color}] hover:ring-1 ring-offset-1`,
+                'inline-flex w-10 h-10 rounded-lg items-center justify-center',
+                color === selectedBackground ? `ring-1 ` : '',
+              )}
+            onClick={() => {
+              setSelectedBackground(color)
+            }}
           >
-      <div className='flex flex-col items-center w-full p-3'>
+            <div className={cn(
-        <div className="relative w-full">
+              'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+            )
-            <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+            } style={{ background: color }}>
+              {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
             </div>
-          <input type="search" id="search" className="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 " placeholder="Search" />
+          </div>
+        })}
       </div>
     </div>
-      <Divider className='m-0 mb-3' />
-      <EmojiSelect onSelect={(itm) => {
-        setSelectedEmoji(itm)
-      }} />
-      <ColorSelect selectedEmoji={selectedEmoji} onSelect={color => {
-        onSelect && onSelect(selectedEmoji, color)
-      }} />
     <Divider className='m-0' />
-      <div className='w-full flex items-center justify-center p-3'>
+    <div className='w-full flex items-center justify-center p-3 gap-2'>
-        <Button type="primary" className='w-full' onClick={() => { }}>
+      <Button type="default" className='w-full' onClick={() => {
+        onClose && onClose()
+      }}>
+        Cancel
+      </Button>
+      <Button type="primary" className='w-full' onClick={() => {
+        onSelect && onSelect(selectedEmoji, selectedBackground)
+      }}>
         OK
       </Button>
     </div>
   </Modal> : <>
   </>
-  }
-
-  return <Elem />
 }
 export default EmojiPicker