forked from dimaland1/Streali
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(popover): add closing when click on button
- Loading branch information
1 parent
bd23e5b
commit 7f237bb
Showing
10 changed files
with
177 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
libs/shared/ui/src/lib/components/chat-card/chat-card.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| import ChatCard from './chat-card'; | ||
|
|
||
| describe('ChatCard', () => { | ||
| it('should render successfully', () => { | ||
| const { baseElement } = render(<ChatCard />); | ||
| expect(baseElement).toBeTruthy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { toastr, ToastType } from '@streali/shared/utils'; | ||
| import Button, { ButtonColor } from '../button/button'; | ||
| import PopoverNavigation from '../popover-navigation/popover-navigation'; | ||
| import Popover from '../popover/popover'; | ||
| import { useDeleteChatTheme } from '@streali/shared/hooks'; | ||
| import { useState } from 'react'; | ||
|
|
||
| export interface ChatCardProps { | ||
| title: string; | ||
| id: string; | ||
| } | ||
|
|
||
| export function ChatCard(props: ChatCardProps) { | ||
| const { title, id } = props; | ||
| const { mutate: deleteChatTheme } = useDeleteChatTheme(); | ||
| const [menuOpen, setMenuOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <div className="py-3 pl-4 pr-3 border-2 border-dark-300 rounded-md flex justify-between items-center hover:bg-primary-500"> | ||
| <h2>{title}</h2> | ||
| <Popover | ||
| open={menuOpen} | ||
| onOpenChange={setMenuOpen} | ||
| align="end" | ||
| side="bottom" | ||
| trigger={<Button iconLeft="more-line" color={ButtonColor.Dark} />} | ||
| > | ||
| <PopoverNavigation | ||
| onLinkClick={() => setMenuOpen(false)} | ||
| links={[ | ||
| { | ||
| title: 'Edit', | ||
| link: `/chatbox/${id}/edit`, | ||
| icon: 'edit-box-line', | ||
| }, | ||
| { | ||
| title: 'Embed', | ||
| onClick: () => { | ||
| navigator.clipboard.writeText( | ||
| `${window.location.origin.toString()}/chatbox/${id}/embed` | ||
| ); | ||
| toastr( | ||
| ToastType.Success, | ||
| 'Embed link copied', | ||
| 'You can use this link on your streaming software' | ||
| ); | ||
| }, | ||
| icon: 'file-copy-line', | ||
| }, | ||
| { | ||
| title: 'Delete', | ||
| icon: 'delete-bin-line', | ||
| color: 'error', | ||
| confirm: { | ||
| title: 'Delete chatbox', | ||
| text: 'Are you sure you want to delete this chatbox theme?', | ||
| word: title, | ||
| confirmText: | ||
| 'For delete this chatbox theme, type the name of the chatbox theme', | ||
| textButton: 'Delete', | ||
| onConfirm: () => { | ||
| id && deleteChatTheme(id); | ||
| }, | ||
| }, | ||
| }, | ||
| ]} | ||
| /> | ||
| </Popover> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default ChatCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
libs/shared/ui/src/lib/components/navigation/nav-vertical/button-nav.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { useState } from 'react'; | ||
| import Icon from '../../icon/icon'; | ||
| import PopoverNavigation, { | ||
| PopoverLink, | ||
| } from '../../popover-navigation/popover-navigation'; | ||
| import Popover from '../../popover/popover'; | ||
|
|
||
| export interface ButtonNavProps { | ||
| icon: string; | ||
| items: PopoverLink[]; | ||
| } | ||
|
|
||
| function ButtonNav(props: ButtonNavProps) { | ||
| const { icon, items } = props; | ||
| const [navOpen, setNavOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <Popover | ||
| open={navOpen} | ||
| onOpenChange={setNavOpen} | ||
| side="right" | ||
| align="start" | ||
| trigger={ | ||
| <div className="w-10 h-10 cursor-pointer bg-dark-500 rounded-md text-white flex justify-center items-center hover:bg-primary-100 hover:text-primary-500 transition-colors duration-200 relative"> | ||
| <Icon name={icon} /> | ||
| </div> | ||
| } | ||
| > | ||
| <div className="flex flex-col gap-2"> | ||
| <PopoverNavigation | ||
| links={items} | ||
| onLinkClick={() => setNavOpen(false)} | ||
| /> | ||
| </div> | ||
| </Popover> | ||
| ); | ||
| } | ||
|
|
||
| export default ButtonNav; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.