From f1959cbb3aac8abee1cf0a055144f55f6c185c6c Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Thu, 12 Dec 2024 15:21:48 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(front)=20add=20more=20custom?= =?UTF-8?q?ization=20and=20event=20handler=20to=20toggles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We want to be able to customize the variant which those toggle uses as well as being able to trigger an event when the toggle is pressed. This is going to be useful to close the responsive menu after each clic as react-aria prevent click event propgation. --- .../components/controls/ChatToggle.tsx | 12 ++++++-- .../Participants/ParticipantsToggle.tsx | 12 ++++++-- .../components/controls/ScreenShareToggle.tsx | 30 +++++++++++-------- .../components/controls/SupportToggle.tsx | 13 ++++++-- 4 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx index 59fda194..a69bcfbc 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx @@ -5,8 +5,12 @@ import { css } from '@/styled-system/css' import { ToggleButton } from '@/primitives' import { chatStore } from '@/stores/chat' import { useSidePanel } from '../../hooks/useSidePanel' +import { ToggleButtonProps } from '@/primitives/ToggleButton' -export const ChatToggle = () => { +export const ChatToggle = ({ + onPress, + ...props +}: Partial) => { const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' }) const chatSnap = useSnapshot(chatStore) @@ -27,8 +31,12 @@ export const ChatToggle = () => { aria-label={t(tooltipLabel)} tooltip={t(tooltipLabel)} isSelected={isChatOpen} - onPress={() => toggleChat()} + onPress={(e) => { + toggleChat() + onPress?.(e) + }} data-attr={`controls-chat-${tooltipLabel}`} + {...props} > diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx index 6212f473..d5c6cdad 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx @@ -4,8 +4,12 @@ import { ToggleButton } from '@/primitives' import { css } from '@/styled-system/css' import { useParticipants } from '@livekit/components-react' import { useSidePanel } from '../../../hooks/useSidePanel' +import { ToggleButtonProps } from '@/primitives/ToggleButton' -export const ParticipantsToggle = () => { +export const ParticipantsToggle = ({ + onPress, + ...props +}: ToggleButtonProps) => { const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' }) /** @@ -33,8 +37,12 @@ export const ParticipantsToggle = () => { aria-label={t(tooltipLabel)} tooltip={t(tooltipLabel)} isSelected={isParticipantsOpen} - onPress={() => toggleParticipants()} + onPress={(e) => { + toggleParticipants() + onPress?.(e) + }} data-attr={`controls-participants-${tooltipLabel}`} + {...props} > diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx index 414984ee..6e181c56 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx @@ -4,13 +4,21 @@ import { useTranslation } from 'react-i18next' import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react' import { Track } from 'livekit-client' import React from 'react' +import { type ButtonRecipeProps } from '@/primitives/buttonRecipe' +import { ToggleButtonProps } from '@/primitives/ToggleButton' -export const ScreenShareToggle = ( - props: Omit< - UseTrackToggleProps, - 'source' | 'captureOptions' - > -) => { +type Props = Omit< + UseTrackToggleProps, + 'source' | 'captureOptions' +> & + Pick, 'variant'> & + ToggleButtonProps + +export const ScreenShareToggle = ({ + variant = 'primaryDark', + onPress, + ...props +}: Props) => { const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' }) const { buttonProps, enabled } = useTrackToggle({ ...props, @@ -26,18 +34,16 @@ export const ScreenShareToggle = ( + onPress={(e) => { buttonProps.onClick?.( e as unknown as React.MouseEvent ) - } - style={{ - maxWidth: '46px', - maxHeight: '46px', + onPress?.(e) }} data-attr={`controls-screenshare-${tooltipLabel}`} + {...props} >
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx index 2db1757d..76554de3 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx @@ -3,8 +3,9 @@ import { RiQuestionLine } from '@remixicon/react' import { useTranslation } from 'react-i18next' import { Crisp } from 'crisp-sdk-web' import { useEffect, useState } from 'react' +import { ToggleButtonProps } from '@/primitives/ToggleButton' -export const SupportToggle = () => { +export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => { const { t } = useTranslation('rooms', { keyPrefix: 'controls' }) const [isOpened, setIsOpened] = useState($crisp.is('chat:opened')) @@ -32,8 +33,16 @@ export const SupportToggle = () => { tooltip={t('support')} aria-label={t('support')} isSelected={isOpened} - onPress={() => (isOpened ? Crisp.chat.close() : Crisp.chat.open())} + onPress={(e) => { + if (isOpened) { + Crisp.chat.close() + } else { + Crisp.chat.open() + } + onPress?.(e) + }} data-attr="controls-support" + {...props} >