From 5a835a337cee85e8e42faaf8055922a8a3bf98eb Mon Sep 17 00:00:00 2001
From: crazywoola <427733928@qq.com>
Date: Thu, 18 May 2023 10:00:27 +0800
Subject: [PATCH] fix: emoji not show

---
 web/app/(commonLayout)/apps/NewAppDialog.tsx  |  16 +-
 .../components/base/emoji-picker/index.tsx    | 206 ++++++++----------
 2 files changed, 99 insertions(+), 123 deletions(-)

diff --git a/web/app/(commonLayout)/apps/NewAppDialog.tsx b/web/app/(commonLayout)/apps/NewAppDialog.tsx
index 419c91c3c0..ab8df96e80 100644
--- a/web/app/(commonLayout)/apps/NewAppDialog.tsx
+++ b/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
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 833bd9a530..ad22ba32b9 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/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,120 +37,103 @@ const backgroundColors = [
   '#ECE9FE',
   '#FFE4E8',
 ]
-
-interface IColorSelectProps {
-  selectedEmoji: string
-  onSelect: (color: string) => void
+interface IEmojiPickerProps {
+  isModal?: boolean
+  onSelect?: (emoji: string, background: 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>
-    <div className='w-full h-full grid grid-cols-8 gap-1'>
-      {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 === selectBackground ? `ring-1 ` : '',
-            )}
-          onClick={() => {
-            setSelectBackground(color)
-            onSelect(color)
-          }}
-        >
-          <div className={cn(
-            'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
-          )
-          } style={{ background: color }}>
-            <em-emoji id={selectedEmoji} />
+const EmojiPicker: FC<IEmojiPickerProps> = ({
+  isModal = true,
+  onSelect,
+  onClose
+
+}) => {
+  const { categories } = data as any
+  const [selectedEmoji, setSelectedEmoji] = useState('')
+  const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
+
+  return isModal ? <Modal
+    onClose={() => { }}
+    isShow
+    closable={false}
+    className={cn(s.container, '!w-[362px] !p-0')}
+  >
+    <div className='flex flex-col items-center w-full p-3'>
+      <div className="relative w-full">
+        <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" />
+        </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' />
+    <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
+      {categories.map((category: any, index: number) => {
+        return <div key={`category-${index}`} 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: string, index: number) => {
+              return <div
+                key={`emoji-${index}`}
+                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
+                onClick={() => {
+                  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'>
+                  <em-emoji id={emoji} />
+                </div>
+              </div>
+            })}
+
           </div>
         </div>
       })}
     </div>
-  </div>
-}
-interface IEmojiSelectProps {
-  onSelect?: (emoji: any) => void
-}
 
-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) => {
-            return <div
-              key={emoji}
-              className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
-              onClick={() => {
-                onSelect && onSelect(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'>
-                <em-emoji id={emoji} />
-              </div>
+    {/* Color Select */}
+    <div className='flex flex-col p-3'>
+      <p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
+      <div className='w-full h-full grid grid-cols-8 gap-1'>
+        {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={cn(
+              'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
+            )
+            } style={{ background: color }}>
+              {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
             </div>
-          })}
-
-        </div>
-      </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 = () => {
-    return isModal ? <Modal
-      onClose={() => { }}
-      isShow
-      className={cn(s.container, '!w-[362px] !p-0')}
-    >
-      <div className='flex flex-col items-center w-full p-3'>
-        <div className="relative w-full">
-          <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" />
           </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' />
-      <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'>
-        <Button type="primary" className='w-full' onClick={() => { }}>
-          OK
-        </Button>
-      </div>
-    </Modal> : <>
-    </>
-  }
-
-  return <Elem />
+    </div>
+    <Divider className='m-0' />
+    <div className='w-full flex items-center justify-center p-3 gap-2'>
+      <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> : <>
+  </>
 }
-export default EmojiPicker
+export default EmojiPicker
\ No newline at end of file