opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-23 08:26:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: emoji not show

Browse Source
This commit is contained in:
crazywoola 2023-05-18 10:00:27 +08:00
parent db1e311519
commit 5a835a337c
2 changed files with 99 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app/(commonLayout)/apps/NewAppDialog.tsx
View File

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

206
web/app/components/base/emoji-picker/index.tsx
View File

@ -14,17 +14,6 @@ import {
import React from 'react' import React from 'react'
import Modal from '@/app/components/base/modal' import Modal from '@/app/components/base/modal'
declare global {
namespace JSX {
interface IntrinsicElements {
'em-emoji': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
>;
}
}
}
init({ data }) init({ data })
const backgroundColors = [ const backgroundColors = [
@ -48,120 +37,103 @@ const backgroundColors = [
'#ECE9FE', '#ECE9FE',
'#FFE4E8', '#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='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 }}> </div>
<em-emoji id={selectedEmoji} /> <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>
})} })}
</div> </div>
</div>
}
interface IEmojiSelectProps {
onSelect?: (emoji: any) => void
}
const EmojiSelect: FC<IEmojiSelectProps> = ({ {/* Color Select */}
onSelect <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'>
const { categories, emojis } = data as any {backgroundColors.map((color) => {
return <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3"> return <div
{categories.map((category: any) => { key={color}
return <div key={category.id} className='flex flex-col'> className={
<p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p> cn(
<div className='w-full h-full grid grid-cols-8 gap-1'> 'cursor-pointer',
{category.emojis.map((emoji: any) => { `ring-[${color}] hover:ring-1 ring-offset-1`,
return <div 'inline-flex w-10 h-10 rounded-lg items-center justify-center',
key={emoji} color === selectedBackground ? `ring-1 ` : '',
className='inline-flex w-10 h-10 rounded-lg items-center justify-center' )}
onClick={() => { onClick={() => {
onSelect && onSelect(emoji) setSelectedBackground(color)
}} }}
> >
<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'> <div className={cn(
<em-emoji id={emoji} /> 'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
</div> )
} style={{ background: color }}>
{selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
</div> </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> </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' /> </div>
<EmojiSelect onSelect={(itm) => { <Divider className='m-0' />
setSelectedEmoji(itm) <div className='w-full flex items-center justify-center p-3 gap-2'>
}} /> <Button type="default" className='w-full' onClick={() => {
<ColorSelect selectedEmoji={selectedEmoji} onSelect={color => { onClose && onClose()
onSelect && onSelect(selectedEmoji, color) }}>
}} /> Cancel
<Divider className='m-0' /> </Button>
<div className='w-full flex items-center justify-center p-3'> <Button type="primary" className='w-full' onClick={() => {
<Button type="primary" className='w-full' onClick={() => { }}> onSelect && onSelect(selectedEmoji, selectedBackground)
OK }}>
</Button> OK
</div> </Button>
</Modal> : <> </div>
</> </Modal> : <>
} </>
return <Elem />
} }
export default EmojiPicker export default EmojiPicker