fix: make functions expressions and imports order
This commit is contained in:
parent
4d145760ec
commit
0d8f60163a
|
@ -2,11 +2,12 @@ import { useEffect, useRef, useState } from 'react'
|
||||||
import { XStack, YStack } from 'tamagui'
|
import { XStack, YStack } from 'tamagui'
|
||||||
import { Avatar, Text } from '@status-im/components'
|
import { Avatar, Text } from '@status-im/components'
|
||||||
import { ReactionIcon } from '@status-im/icons'
|
import { ReactionIcon } from '@status-im/icons'
|
||||||
import './CreateAvatar.css'
|
import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
|
||||||
|
|
||||||
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, EmojiStyle } from 'emoji-picker-react'
|
import './CreateAvatar.css'
|
||||||
|
|
||||||
const CreateAvatar = () => {
|
const CreateAvatar = () => {
|
||||||
const [chosenColor, setChosenColor] = useState('#2A4AF5')
|
const [chosenColor, setChosenColor] = useState('#2A4AF5')
|
||||||
|
@ -14,16 +15,17 @@ const CreateAvatar = () => {
|
||||||
const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
|
const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
|
||||||
const emojiRef = useRef<HTMLDivElement | null>(null)
|
const emojiRef = useRef<HTMLDivElement | null>(null)
|
||||||
|
|
||||||
function changeEmoji(emojiData: EmojiClickData) {
|
const changeEmoji = (emojiData: EmojiClickData) => {
|
||||||
setSelectedEmoji(emojiData.unified)
|
setSelectedEmoji(emojiData.unified)
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
const handleClickOutside = (event: any) => {
|
||||||
function handleClickOutside(event: any) {
|
|
||||||
if (emojiRef.current && !emojiRef.current.contains(event.target)) {
|
if (emojiRef.current && !emojiRef.current.contains(event.target)) {
|
||||||
setIsEmojiDialogOpen(false)
|
setIsEmojiDialogOpen(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
document.addEventListener('mousedown', handleClickOutside)
|
document.addEventListener('mousedown', handleClickOutside)
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener('mousedown', handleClickOutside)
|
document.removeEventListener('mousedown', handleClickOutside)
|
||||||
|
|
|
@ -14,7 +14,7 @@ type EmojiPickerProps = {
|
||||||
changeEmoji: (emojiData: EmojiClickData) => void
|
changeEmoji: (emojiData: EmojiClickData) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
|
const EmojiPickerDialog = ({ emojiStyle, changeEmoji }: EmojiPickerProps) => {
|
||||||
return (
|
return (
|
||||||
<Stack position="absolute" zIndex={1} left={100} top={-150}>
|
<Stack position="absolute" zIndex={1} left={100} top={-150}>
|
||||||
<EmojiPicker
|
<EmojiPicker
|
||||||
|
@ -54,4 +54,5 @@ function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
|
||||||
</Stack>
|
</Stack>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default EmojiPickerDialog
|
export default EmojiPickerDialog
|
||||||
|
|
Loading…
Reference in New Issue