mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-04 15:43:35 +00:00
commit
dc7a7a9b4d
@ -28,6 +28,7 @@
|
||||
"@tamagui/vite-plugin": "1.36.4",
|
||||
"@types/react": "18",
|
||||
"@types/react-dom": "18",
|
||||
"emoji-picker-react": "^4.4.11",
|
||||
"expo-modules-core": "^1.5.9",
|
||||
"react": "18",
|
||||
"react-color": "^2.19.3",
|
||||
|
19
src/components/General/EmojiPickerDialog.stories.tsx
Normal file
19
src/components/General/EmojiPickerDialog.stories.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import EmojiPickerDialog from './EmojiPickerDialog'
|
||||
|
||||
|
||||
const meta = {
|
||||
title: 'General/EmojiPickerDialog',
|
||||
component: EmojiPickerDialog,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof EmojiPickerDialog>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const DefaultColors: Story = {
|
||||
args: {emojiStyle: 'TWITTER'},
|
||||
}
|
66
src/components/General/EmojiPickerDialog.tsx
Normal file
66
src/components/General/EmojiPickerDialog.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import EmojiPicker, {
|
||||
EmojiStyle,
|
||||
Theme,
|
||||
EmojiClickData,
|
||||
SuggestionMode,
|
||||
Categories,
|
||||
} from 'emoji-picker-react'
|
||||
import { useState } from 'react'
|
||||
import { Stack } from 'tamagui'
|
||||
|
||||
type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
|
||||
|
||||
function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) {
|
||||
const [selectedEmoji, setSelectedEmoji] = useState<string>('')
|
||||
console.log(selectedEmoji)
|
||||
function onClick(emojiData: EmojiClickData) {
|
||||
setSelectedEmoji(emojiData.unified)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack position="absolute" zIndex={1} left={120}>
|
||||
{/* <XStack>
|
||||
Your selected Emoji is:
|
||||
{selectedEmoji ? (
|
||||
<Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
|
||||
) : null}
|
||||
</XStack> */}
|
||||
|
||||
<EmojiPicker
|
||||
onEmojiClick={onClick}
|
||||
autoFocusSearch={false}
|
||||
theme={Theme.AUTO}
|
||||
height={350}
|
||||
width="100%"
|
||||
emojiVersion="1"
|
||||
lazyLoadEmojis={false}
|
||||
previewConfig={{ showPreview: false }}
|
||||
suggestedEmojisMode={SuggestionMode.RECENT}
|
||||
skinTonesDisabled
|
||||
searchPlaceHolder="Search emojis"
|
||||
emojiStyle={EmojiStyle[emojiStyle]}
|
||||
categories={[
|
||||
{
|
||||
name: 'People',
|
||||
category: Categories.SMILEYS_PEOPLE,
|
||||
},
|
||||
{ name: 'Animals and Nature', category: Categories.ANIMALS_NATURE },
|
||||
{
|
||||
name: 'Fun and Games',
|
||||
category: Categories.ACTIVITIES,
|
||||
},
|
||||
{
|
||||
name: 'Flags',
|
||||
category: Categories.FLAGS,
|
||||
},
|
||||
{
|
||||
name: 'Yum Yum',
|
||||
category: Categories.FOOD_DRINK,
|
||||
},
|
||||
{ name: 'Objects', category: Categories.OBJECTS },
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
export default EmojiPickerDialog
|
@ -4,7 +4,7 @@ import { RootState } from '../../redux/store'
|
||||
|
||||
function PinnedNotification() {
|
||||
const pinnedMessage = useSelector((state: RootState) => state.pinnedMessage.pinnedMessage)
|
||||
console.log(pinnedMessage)
|
||||
|
||||
return (
|
||||
<>
|
||||
{pinnedMessage && pinnedMessage.pinned && (
|
||||
|
@ -7,9 +7,11 @@ import Header from '../../components/General/Header'
|
||||
import Titles from '../../components/General/Titles'
|
||||
import LabelInputField from '../../components/General/LabelInputField'
|
||||
import ColorPicker from '../../components/General/ColorPicker'
|
||||
import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
|
||||
|
||||
const CreateLocalNodePage = () => {
|
||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||
const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
|
||||
@ -31,7 +33,18 @@ const CreateLocalNodePage = () => {
|
||||
</Text>
|
||||
<XStack my={10}>
|
||||
<Avatar type="account" size={80} name="Device Avatar" />
|
||||
<Avatar type="icon" size={32} icon={<ReactionIcon size={20} />} />
|
||||
<Avatar
|
||||
type="icon"
|
||||
size={32}
|
||||
icon={
|
||||
<ReactionIcon
|
||||
size={20}
|
||||
onClick={() => setIsEmojiDialogOpen(prev => !prev)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack>
|
||||
|
19
yarn.lock
19
yarn.lock
@ -8588,6 +8588,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clsx@npm:^1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "clsx@npm:1.2.1"
|
||||
checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"co@npm:^4.6.0":
|
||||
version: 4.6.0
|
||||
resolution: "co@npm:4.6.0"
|
||||
@ -9537,6 +9544,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"emoji-picker-react@npm:^4.4.11":
|
||||
version: 4.4.11
|
||||
resolution: "emoji-picker-react@npm:4.4.11"
|
||||
dependencies:
|
||||
clsx: ^1.2.1
|
||||
peerDependencies:
|
||||
react: ">=16"
|
||||
checksum: 69ec9468996a5b0a277fd7821156695af7d097f5f4d6da7c4286181bce5edc36e888f52be4b22f342a84bc9b99e7f71ee69e9079a69f0c58404aeccba8c85ab8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"emoji-regex@npm:^8.0.0":
|
||||
version: 8.0.0
|
||||
resolution: "emoji-regex@npm:8.0.0"
|
||||
@ -13842,6 +13860,7 @@ __metadata:
|
||||
"@typescript-eslint/eslint-plugin": ^6.0.0
|
||||
"@typescript-eslint/parser": ^6.0.0
|
||||
"@vitejs/plugin-react": ^4.0.3
|
||||
emoji-picker-react: ^4.4.11
|
||||
eslint: ^8.45.0
|
||||
eslint-plugin-react-hooks: ^4.6.0
|
||||
eslint-plugin-react-refresh: ^0.4.3
|
||||
|
Loading…
x
Reference in New Issue
Block a user