status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-08 01:23:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add emoji picker functionality

Browse Source
This commit is contained in:
Ivana Andersson 2023-08-28 16:28:05 +03:00
parent 1808aca00f
commit 57e3f34c3b
2 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/General/CreateAvatar/CreateAvatar.tsx
View File

@ -6,10 +6,15 @@ import './CreateAvatar.css'
import LabelInputField from '../LabelInputField' import LabelInputField from '../LabelInputField'
import ColorPicker from '../ColorPicker/ColorPicker' import ColorPicker from '../ColorPicker/ColorPicker'
import EmojiPickerDialog from '../EmojiPickerDialog' import EmojiPickerDialog from '../EmojiPickerDialog'
import { Emoji, EmojiClickData } from 'emoji-picker-react'
const CreateAvatar = () => { const CreateAvatar = () => {
const [chosenColor, setChosenColor] = useState('#2A4AF5') const [chosenColor, setChosenColor] = useState('#2A4AF5')
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false) const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
function changeEmoji(emojiData: EmojiClickData) {
setSelectedEmoji(emojiData.unified)
}
return ( return (
<YStack my={16}> <YStack my={16}>
<XStack space> <XStack space>
@ -22,7 +27,7 @@ const CreateAvatar = () => {
</Text> </Text>
<XStack my={10} alignItems={'end'}> <XStack my={10} alignItems={'end'}>
<div className="device-avatar" style={{ background: chosenColor }}> <div className="device-avatar" style={{ background: chosenColor }}>
<img src="./icons/nodes-app-icon.png" alt="" /> {selectedEmoji ? <Emoji unified={selectedEmoji} size={30} /> : null}
</div> </div>
<Avatar <Avatar
type="icon" type="icon"
@ -35,7 +40,9 @@ const CreateAvatar = () => {
/> />
} }
/> />
{isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />} {isEmojiDialogOpen && (
<EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
)}
</XStack> </XStack>
</YStack> </YStack>
<YStack flexWrap="wrap" width="80%"> <YStack flexWrap="wrap" width="80%">

25
src/components/General/EmojiPickerDialog.tsx
View File

@ -5,33 +5,24 @@ import EmojiPicker, {
SuggestionMode, SuggestionMode,
Categories, Categories,
} from 'emoji-picker-react' } from 'emoji-picker-react'
import { useState } from 'react'
import { Stack } from 'tamagui' import { Stack } from 'tamagui'
type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE' type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) { type EmojiPickerProps = {
const [selectedEmoji, setSelectedEmoji] = useState<string>('') emojiStyle: EmojiStyleType
console.log(selectedEmoji) changeEmoji: (emojiData: EmojiClickData) => void
function onClick(emojiData: EmojiClickData) { }
setSelectedEmoji(emojiData.unified)
}
function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
return ( return (
<Stack position="absolute" zIndex={1} left={120}> <Stack position="absolute" zIndex={1} left={100}>
{/* <XStack>
Your selected Emoji is:
{selectedEmoji ? (
<Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
) : null}
</XStack> */}
<EmojiPicker <EmojiPicker
onEmojiClick={onClick} onEmojiClick={changeEmoji}
autoFocusSearch={false} autoFocusSearch={false}
theme={Theme.AUTO} theme={Theme.AUTO}
height={350} height={350}
width="100%" width={350}
emojiVersion="1" emojiVersion="1"
lazyLoadEmojis={false} lazyLoadEmojis={false}
previewConfig={{ showPreview: false }} previewConfig={{ showPreview: false }}