ref(participants-pane) Use new button component (#11913)
This commit is contained in:
parent
b1a9d68cf5
commit
867d998d15
|
@ -1,67 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Label used for accessibility.
|
||||
*/
|
||||
accessibilityLabel: string,
|
||||
|
||||
/**
|
||||
* Additional class name for custom styles.
|
||||
*/
|
||||
className: string,
|
||||
|
||||
/**
|
||||
* Children of the component.
|
||||
*/
|
||||
children: string | React$Node,
|
||||
|
||||
/**
|
||||
* Click handler.
|
||||
*/
|
||||
onClick: Function,
|
||||
|
||||
/**
|
||||
* Data test id.
|
||||
*/
|
||||
testId?: string
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
return {
|
||||
button: {
|
||||
backgroundColor: theme.palette.action01,
|
||||
color: theme.palette.text01,
|
||||
borderRadius: `${theme.shape.borderRadius}px`,
|
||||
...theme.typography.labelBold,
|
||||
lineHeight: `${theme.typography.labelBold.lineHeight}px`,
|
||||
padding: '8px 12px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: 0,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.action01Hover
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const QuickActionButton = ({ accessibilityLabel, className, children, onClick, testId }: Props) => {
|
||||
const styles = useStyles();
|
||||
|
||||
return (<button
|
||||
aria-label = { accessibilityLabel }
|
||||
className = { `${styles.button} ${className}` }
|
||||
data-testid = { testId }
|
||||
onClick = { onClick }>
|
||||
{children}
|
||||
</button>);
|
||||
};
|
||||
|
||||
export default QuickActionButton;
|
|
@ -1,4 +1,3 @@
|
|||
export { default as ContextMenu } from './context-menu/ContextMenu';
|
||||
export { default as ContextMenuItemGroup } from './context-menu/ContextMenuItemGroup';
|
||||
export { default as ListItem } from './participants-pane-list/ListItem';
|
||||
export { default as QuickActionButton } from './buttons/QuickActionButton';
|
||||
|
|
|
@ -11,6 +11,11 @@ import { ButtonProps } from '../types';
|
|||
|
||||
interface IButtonProps extends ButtonProps {
|
||||
|
||||
/**
|
||||
* Class name used for additional styles.
|
||||
*/
|
||||
className?: string,
|
||||
|
||||
/**
|
||||
* Whether or not the button should be full width.
|
||||
*/
|
||||
|
@ -24,12 +29,17 @@ interface IButtonProps extends ButtonProps {
|
|||
/**
|
||||
* Click callback.
|
||||
*/
|
||||
onClick: () => void;
|
||||
onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
|
||||
/**
|
||||
* Which size the button should be.
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
|
||||
/**
|
||||
* Data test id.
|
||||
*/
|
||||
testId?: string;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
|
@ -163,6 +173,7 @@ const useStyles = makeStyles((theme: Theme) => {
|
|||
|
||||
const Button = ({
|
||||
accessibilityLabel,
|
||||
className,
|
||||
disabled,
|
||||
fullWidth,
|
||||
icon,
|
||||
|
@ -170,6 +181,7 @@ const Button = ({
|
|||
label,
|
||||
onClick,
|
||||
size = 'medium',
|
||||
testId,
|
||||
type = BUTTON_TYPES.PRIMARY
|
||||
}: IButtonProps) => {
|
||||
const styles = useStyles();
|
||||
|
@ -180,7 +192,8 @@ const Button = ({
|
|||
className = { clsx(styles.button, styles[type],
|
||||
disabled && styles.disabled,
|
||||
icon && !label && `${styles.iconButton} iconButton`,
|
||||
styles[size], fullWidth && styles.fullWidth) }
|
||||
styles[size], fullWidth && styles.fullWidth, className) }
|
||||
data-testid = { testId }
|
||||
disabled = { disabled }
|
||||
{ ...(id ? { id } : {}) }
|
||||
onClick = { onClick }
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
// @flow
|
||||
|
||||
/* eslint-disable lines-around-comment */
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
// @ts-ignore
|
||||
import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
|
||||
import { QuickActionButton } from '../../../../../base/components';
|
||||
import Button from '../../../../../base/ui/components/web/Button';
|
||||
import { Theme } from '../../../../../base/ui/types';
|
||||
// @ts-ignore
|
||||
import { moveToRoom } from '../../../../../breakout-rooms/actions';
|
||||
|
||||
type Props = {
|
||||
|
@ -14,10 +16,13 @@ type Props = {
|
|||
/**
|
||||
* The room to join.
|
||||
*/
|
||||
room: Object
|
||||
room: {
|
||||
id: string;
|
||||
jid: string;
|
||||
}
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return {
|
||||
button: {
|
||||
marginRight: `${theme.spacing(2)}px`
|
||||
|
@ -36,13 +41,14 @@ const JoinActionButton = ({ room }: Props) => {
|
|||
dispatch(moveToRoom(room.jid));
|
||||
}, [ dispatch, room ]);
|
||||
|
||||
return (<QuickActionButton
|
||||
accessibilityLabel = { t('breakoutRooms.actions.join') }
|
||||
className = { styles.button }
|
||||
onClick = { onJoinRoom }
|
||||
testId = { `join-room-${room.id}` }>
|
||||
{t('breakoutRooms.actions.join')}
|
||||
</QuickActionButton>
|
||||
return (
|
||||
<Button
|
||||
accessibilityLabel = { t('breakoutRooms.actions.join') }
|
||||
className = { styles.button }
|
||||
label = { t('breakoutRooms.actions.join') }
|
||||
onClick = { onJoinRoom }
|
||||
size = 'small'
|
||||
testId = { `join-room-${room.id}` } />
|
||||
);
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { QuickActionButton } from '../../../../../base/components';
|
||||
import { Icon, IconHorizontalPoints } from '../../../../../base/icons';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Click handler function.
|
||||
*/
|
||||
onClick: Function
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(() => {
|
||||
return {
|
||||
button: {
|
||||
padding: '6px'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const RoomActionEllipsis = ({ onClick }: Props) => {
|
||||
const styles = useStyles();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<QuickActionButton
|
||||
accessibilityLabel = { t('breakoutRooms.actions.more') }
|
||||
className = { styles.button }
|
||||
onClick = { onClick }>
|
||||
<Icon src = { IconHorizontalPoints } />
|
||||
</QuickActionButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoomActionEllipsis;
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { IconHorizontalPoints } from '../../../../../base/icons/svg/index';
|
||||
import Button from '../../../../../base/ui/components/web/Button';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Click handler function.
|
||||
*/
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const RoomActionEllipsis = ({ onClick }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Button
|
||||
accessibilityLabel = { t('breakoutRooms.actions.more') }
|
||||
icon = { IconHorizontalPoints }
|
||||
onClick = { onClick }
|
||||
size = 'small' />
|
||||
);
|
||||
};
|
||||
|
||||
export default RoomActionEllipsis;
|
|
@ -6,13 +6,14 @@ import { useTranslation } from 'react-i18next';
|
|||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
|
||||
import { Icon, IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons';
|
||||
import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons';
|
||||
import { hasRaisedHand } from '../../../base/participants';
|
||||
import { BUTTON_TYPES } from '../../../base/react/constants';
|
||||
import Button from '../../../base/ui/components/web/Button';
|
||||
import { showLobbyChatButton } from '../../../lobby/functions';
|
||||
import { ACTION_TRIGGER, MEDIA_STATE } from '../../constants';
|
||||
import { useLobbyActions } from '../../hooks';
|
||||
|
||||
import LobbyParticipantQuickAction from './LobbyParticipantQuickAction';
|
||||
import ParticipantItem from './ParticipantItem';
|
||||
|
||||
type Props = {
|
||||
|
@ -70,13 +71,13 @@ export const LobbyParticipantItem = ({
|
|||
const closeContextMenu = useCallback(() => setIsOpen(false));
|
||||
|
||||
const renderAdmitButton = () => (
|
||||
<LobbyParticipantQuickAction
|
||||
<Button
|
||||
accessibilityLabel = { `${t('lobby.admit')} ${p.name}` }
|
||||
className = { styles.button }
|
||||
label = { t('lobby.admit') }
|
||||
onClick = { admit }
|
||||
testId = { `admit-${id}` }>
|
||||
{t('lobby.admit')}
|
||||
</LobbyParticipantQuickAction>);
|
||||
size = 'small'
|
||||
testId = { `admit-${id}` } />);
|
||||
|
||||
return (
|
||||
<ParticipantItem
|
||||
|
@ -93,14 +94,13 @@ export const LobbyParticipantItem = ({
|
|||
|
||||
{showChat ? <>
|
||||
{renderAdmitButton()}
|
||||
<LobbyParticipantQuickAction
|
||||
<Button
|
||||
accessibilityLabel = { `${t('participantsPane.actions.moreModerationActions')} ${p.name}` }
|
||||
className = { styles.moreButton }
|
||||
icon = { IconHorizontalPoints }
|
||||
onClick = { openContextMenu }
|
||||
ref = { moreButtonRef }
|
||||
secondary = { true }>
|
||||
<Icon src = { IconHorizontalPoints } />
|
||||
</LobbyParticipantQuickAction>
|
||||
size = 'small' />
|
||||
<ContextMenu
|
||||
className = { styles.contextMenu }
|
||||
hidden = { !isOpen }
|
||||
|
@ -124,14 +124,14 @@ export const LobbyParticipantItem = ({
|
|||
} ] } />
|
||||
</ContextMenu>
|
||||
</> : <>
|
||||
<LobbyParticipantQuickAction
|
||||
<Button
|
||||
accessibilityLabel = { `${t('lobby.reject')} ${p.name}` }
|
||||
className = { styles.button }
|
||||
label = { t('lobby.reject') }
|
||||
onClick = { reject }
|
||||
secondary = { true }
|
||||
testId = { `reject-${id}` }>
|
||||
{t('lobby.reject') }
|
||||
</LobbyParticipantQuickAction>
|
||||
size = 'small'
|
||||
testId = { `reject-${id}` }
|
||||
type = { BUTTON_TYPES.DESTRUCTIVE } />
|
||||
{renderAdmitButton()}
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -1,70 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
|
||||
import { QuickActionButton } from '../../../base/components';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Label used for accessibility.
|
||||
*/
|
||||
accessibilityLabel: string,
|
||||
|
||||
/**
|
||||
* Component children.
|
||||
*/
|
||||
children: string,
|
||||
|
||||
/**
|
||||
* Button class name.
|
||||
*/
|
||||
className?: string,
|
||||
|
||||
/**
|
||||
* Click handler function.
|
||||
*/
|
||||
onClick: Function,
|
||||
|
||||
/**
|
||||
* Whether or not the button is secondary.
|
||||
*/
|
||||
secondary?: boolean,
|
||||
|
||||
/**
|
||||
* Data test id.
|
||||
*/
|
||||
testId: string
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
return {
|
||||
secondary: {
|
||||
backgroundColor: theme.palette.ui04
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const LobbyParticipantQuickAction = ({
|
||||
accessibilityLabel,
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
secondary = false,
|
||||
testId
|
||||
}: Props) => {
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<QuickActionButton
|
||||
accessibilityLabel = { accessibilityLabel }
|
||||
className = { `${secondary ? styles.secondary : ''} ${className ?? ''}` }
|
||||
onClick = { onClick }
|
||||
testId = { testId }>
|
||||
{children}
|
||||
</QuickActionButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default LobbyParticipantQuickAction;
|
|
@ -1,43 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React from 'react';
|
||||
|
||||
import { QuickActionButton } from '../../../base/components';
|
||||
import { Icon, IconHorizontalPoints } from '../../../base/icons';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Label used for accessibility.
|
||||
*/
|
||||
accessibilityLabel: string,
|
||||
|
||||
/**
|
||||
* Click handler function.
|
||||
*/
|
||||
onClick: Function
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(() => {
|
||||
return {
|
||||
button: {
|
||||
padding: '6px'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: Props) => {
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<QuickActionButton
|
||||
accessibilityLabel = { accessibilityLabel }
|
||||
className = { styles.button }
|
||||
onClick = { onClick }>
|
||||
<Icon src = { IconHorizontalPoints } />
|
||||
</QuickActionButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParticipantActionEllipsis;
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
import { IconHorizontalPoints } from '../../../base/icons/svg/index';
|
||||
import Button from '../../../base/ui/components/web/Button';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* Label used for accessibility.
|
||||
*/
|
||||
accessibilityLabel: string,
|
||||
|
||||
/**
|
||||
* Click handler function.
|
||||
*/
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: Props) => (
|
||||
<Button
|
||||
accessibilityLabel = { accessibilityLabel }
|
||||
icon = { IconHorizontalPoints }
|
||||
onClick = { onClick }
|
||||
size = 'small' />
|
||||
);
|
||||
|
||||
export default ParticipantActionEllipsis;
|
|
@ -1,12 +1,14 @@
|
|||
// @flow
|
||||
|
||||
/* eslint-disable lines-around-comment */
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
// @ts-ignore
|
||||
import { approveParticipant } from '../../../av-moderation/actions';
|
||||
import { QuickActionButton } from '../../../base/components';
|
||||
import Button from '../../../base/ui/components/web/Button';
|
||||
import { Theme } from '../../../base/ui/types';
|
||||
// @ts-ignore
|
||||
import { QUICK_ACTION_BUTTON } from '../../constants';
|
||||
|
||||
type Props = {
|
||||
|
@ -47,7 +49,7 @@ type Props = {
|
|||
participantName: string
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return {
|
||||
button: {
|
||||
marginRight: `${theme.spacing(2)}px`
|
||||
|
@ -74,24 +76,24 @@ const ParticipantQuickAction = ({
|
|||
switch (buttonType) {
|
||||
case QUICK_ACTION_BUTTON.MUTE: {
|
||||
return (
|
||||
<QuickActionButton
|
||||
<Button
|
||||
accessibilityLabel = { `${t('participantsPane.actions.mute')} ${participantName}` }
|
||||
className = { styles.button }
|
||||
label = { muteParticipantButtonText }
|
||||
onClick = { muteAudio(participantID) }
|
||||
testId = { `mute-${participantID}` }>
|
||||
{muteParticipantButtonText}
|
||||
</QuickActionButton>
|
||||
size = 'small'
|
||||
testId = { `mute-${participantID}` } />
|
||||
);
|
||||
}
|
||||
case QUICK_ACTION_BUTTON.ASK_TO_UNMUTE: {
|
||||
return (
|
||||
<QuickActionButton
|
||||
<Button
|
||||
accessibilityLabel = { `${t('participantsPane.actions.askUnmute')} ${participantName}` }
|
||||
className = { styles.button }
|
||||
label = { askUnmuteText }
|
||||
onClick = { askToUnmute }
|
||||
testId = { `unmute-${participantID}` }>
|
||||
{ askUnmuteText }
|
||||
</QuickActionButton>
|
||||
size = 'small'
|
||||
testId = { `unmute-${participantID}` } />
|
||||
);
|
||||
}
|
||||
default: {
|
Loading…
Reference in New Issue