status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(react): unify chat menu

This commit is contained in:
Pavel Prichodko 2022-04-11 21:00:10 +02:00
parent ece215c183
commit b771115011
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
3 changed files with 78 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/status-react/src/components/chat-menu/index.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react'
import { BellIcon } from '~/src/icons/bell-icon'
import { ContextMenu, DropdownMenu } from '~/src/system'
interface Props {
type: 'dropdown' | 'context'
chatType: 'channel' | 'chat' | 'group-chat'
}
export const ChatMenu = (props: Props) => {
const { type, chatType } = props
const Menu = type === 'dropdown' ? DropdownMenu : ContextMenu
const renderMenuItems = () => {
const commonMenuItems = (
<>
<Menu.TriggerItem label="Mute Chat" icon={<BellIcon />}>
<Menu.Item>For 15 min</Menu.Item>
<Menu.Item>For 1 hour</Menu.Item>
<Menu.Item>For 8 hours</Menu.Item>
<Menu.Item>For 24 hours</Menu.Item>
<Menu.Item>Until I turn it back on</Menu.Item>
</Menu.TriggerItem>
<Menu.Item icon={<BellIcon />}>Mark as Read</Menu.Item>
<Menu.TriggerItem label="Fetch Messages" icon={<BellIcon />}>
<Menu.Item>Last 24 hours</Menu.Item>
<Menu.Item>Last 2 days</Menu.Item>
<Menu.Item>Last 3 days</Menu.Item>
<Menu.Item>Last 7 days</Menu.Item>
</Menu.TriggerItem>
</>
)
if (chatType === 'channel') {
return commonMenuItems
}
if (chatType === 'group-chat') {
return (
<>
<Menu.Item icon={<BellIcon />}>Add / remove from group</Menu.Item>
<Menu.Item icon={<BellIcon />}>Edit name and image</Menu.Item>
<Menu.Separator />
{commonMenuItems}
<Menu.Separator />
<Menu.Item icon={<BellIcon />} danger>
Leave Chat
</Menu.Item>
</>
)
}
return (
<>
<Menu.Item icon={<BellIcon />}>View Profile</Menu.Item>
<Menu.Separator />
{commonMenuItems}
<Menu.Separator />
<Menu.Item icon={<BellIcon />} danger>
Delete Chat
</Menu.Item>
</>
)
}
return <Menu>{renderMenuItems()}</Menu>
}

20
packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'
import { BellIcon } from '~/src/icons/bell-icon'
import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu'
import { ChatMenu } from '~/src/components/chat-menu'
import { ContextMenuTrigger } from '~/src/system/context-menu'
import { SidebarItem } from '../sidebar-item'
@ -17,21 +17,7 @@ export const ChannelItem = (props: Props) => {
return (
<ContextMenuTrigger>
<SidebarItem {...sidebarItemProps}>#{children}</SidebarItem>
<ContextMenu>
<ContextMenu.Item icon={<BellIcon />}>View Profile</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.TriggerItem label="Mute Chat">
<ContextMenu.Item>For 15 min</ContextMenu.Item>
<ContextMenu.Item>For 1 hour</ContextMenu.Item>
<ContextMenu.Item>For 8 hours</ContextMenu.Item>
<ContextMenu.Item>For 24 hours</ContextMenu.Item>
<ContextMenu.Item>Until I turn it back on</ContextMenu.Item>
</ContextMenu.TriggerItem>
<ContextMenu.Separator />
<ContextMenu.Item icon={<BellIcon />} danger>
Delete
</ContextMenu.Item>
</ContextMenu>
<ChatMenu type="context" chatType="channel" />
</ContextMenuTrigger>
)
}

23
packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx
View File

@ -1,7 +1,8 @@
import React from 'react'
import { BellIcon } from '~/src/icons/bell-icon'
import { ContextMenu, ContextMenuTrigger } from '~/src/system'
import { ChatMenu } from '~/src/components/chat-menu'
import { useChat } from '~/src/protocol/use-chat'
import { ContextMenuTrigger } from '~/src/system'
import { SidebarItem } from '../sidebar-item'
@ -14,24 +15,12 @@ interface Props extends SidebarItemProps {
export const ChatItem = (props: Props) => {
const { children, ...sidebarItemProps } = props
const chat = useChat(children)
return (
<ContextMenuTrigger>
<SidebarItem {...sidebarItemProps}>{children}</SidebarItem>
<ContextMenu>
<ContextMenu.Item icon={<BellIcon />}>View Profile</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.TriggerItem label="Mute Chat" icon={<BellIcon />}>
<ContextMenu.Item>For 15 min</ContextMenu.Item>
<ContextMenu.Item>For 1 hour</ContextMenu.Item>
<ContextMenu.Item>For 8 hours</ContextMenu.Item>
<ContextMenu.Item>For 24 hours</ContextMenu.Item>
<ContextMenu.Item>Until I turn it back on</ContextMenu.Item>
</ContextMenu.TriggerItem>
<ContextMenu.Separator />
<ContextMenu.Item icon={<BellIcon />} danger>
Delete
</ContextMenu.Item>
</ContextMenu>
<ChatMenu type="context" chatType={chat.type} />
</ContextMenuTrigger>
)
}