haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(styles) Change some withStyles to makeStyles (#12373) 

Convert PreMeetingScreen to TS and transform it to function component
This commit is contained in:
Robert Pintilii 2022-10-17 12:28:04 +03:00 committed by GitHub
parent 1279c5b0da
commit 44c8b31187
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 137 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/modals/embed-meeting/_embed-meeting.scss
View File

@ -9,7 +9,6 @@
font-size: 15px; font-size: 15px;
margin-left: auto; margin-left: auto;
margin-top: 16px; margin-top: 16px;
width: auto;
} }
&-code { &-code {

27
react/features/base/buttons/CopyButton.tsx
View File

@ -1,15 +1,14 @@
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
import { Theme } from '@mui/material'; import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../icons/components/Icon'; import Icon from '../icons/components/Icon';
import { IconCheck, IconCopy } from '../icons/svg'; import { IconCheck, IconCopy } from '../icons/svg';
import { withPixelLineHeight } from '../styles/functions.web'; import { withPixelLineHeight } from '../styles/functions.web';
import { copyText } from '../util/copyText.web'; import { copyText } from '../util/copyText.web';
const styles = (theme: Theme) => { const useStyles = makeStyles()((theme: Theme) => {
return { return {
copyButton: { copyButton: {
...withPixelLineHeight(theme.typography.bodyLongRegular), ...withPixelLineHeight(theme.typography.bodyLongRegular),
@ -50,7 +49,7 @@ const styles = (theme: Theme) => {
} }
} }
}; };
}; });
let mounted: boolean; let mounted: boolean;
@ -61,11 +60,6 @@ type Props = {
*/ */
className: string; className: string;
/**
* An object containing the CSS classes.
*/
classes: any;
/** /**
* The displayed text. * The displayed text.
*/ */
@ -97,7 +91,8 @@ type Props = {
* *
* @returns {React$Element<any>} * @returns {React$Element<any>}
*/ */
function CopyButton({ classes, className, displayedText, textToCopy, textOnHover, textOnCopySuccess, id }: Props) { function CopyButton({ className = '', displayedText, textToCopy, textOnHover, textOnCopySuccess, id }: Props) {
const { classes, cx } = useStyles();
const [ isClicked, setIsClicked ] = useState(false); const [ isClicked, setIsClicked ] = useState(false);
const [ isHovered, setIsHovered ] = useState(false); const [ isHovered, setIsHovered ] = useState(false);
@ -174,7 +169,7 @@ function CopyButton({ classes, className, displayedText, textToCopy, textOnHover
if (isClicked) { if (isClicked) {
return ( return (
<> <>
<div className = { clsx(classes.content, 'selected') }> <div className = { cx(classes.content, 'selected') }>
<span role = { 'alert' }>{ textOnCopySuccess }</span> <span role = { 'alert' }>{ textOnCopySuccess }</span>
</div> </div>
<Icon src = { IconCheck } /> <Icon src = { IconCheck } />
@ -184,7 +179,7 @@ function CopyButton({ classes, className, displayedText, textToCopy, textOnHover
return ( return (
<> <>
<div className = { clsx(classes.content) }> <div className = { classes.content }>
<span> { isHovered ? textOnHover : displayedText } </span> <span> { isHovered ? textOnHover : displayedText } </span>
</div> </div>
<Icon src = { IconCopy } /> <Icon src = { IconCopy } />
@ -195,7 +190,7 @@ function CopyButton({ classes, className, displayedText, textToCopy, textOnHover
return ( return (
<div <div
aria-label = { textOnHover } aria-label = { textOnHover }
className = { clsx(className, classes.copyButton, isClicked ? ' clicked' : '') } className = { cx(className, classes.copyButton, isClicked ? ' clicked' : '') }
id = { id } id = { id }
onBlur = { onHoverOut } onBlur = { onHoverOut }
onClick = { onClick } onClick = { onClick }
@ -210,8 +205,4 @@ function CopyButton({ classes, className, displayedText, textToCopy, textOnHover
); );
} }
CopyButton.defaultProps = { export default CopyButton;
className: ''
};
export default withStyles(styles)(CopyButton);

57
react/features/base/premeeting/components/web/ActionButton.tsx
View File

@ -1,7 +1,6 @@
import { Theme } from '@mui/material'; import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { ReactNode, useCallback } from 'react'; import React, { ReactNode, useCallback } from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon'; import Icon from '../../../icons/components/Icon';
import { IconArrowDown } from '../../../icons/svg'; import { IconArrowDown } from '../../../icons/svg';
@ -39,11 +38,6 @@ type Props = {
*/ */
className?: string; className?: string;
/**
* An object containing the CSS classes.
*/
classes: any;
/** /**
* If the button is disabled or not. * If the button is disabled or not.
*/ */
@ -86,14 +80,7 @@ type Props = {
type: string; type: string;
}; };
/** const useStyles = makeStyles()((theme: Theme) => {
* Creates the styles for the component.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const styles = (theme: Theme) => {
return { return {
actionButton: { actionButton: {
...withPixelLineHeight(theme.typography.bodyLongBold), ...withPixelLineHeight(theme.typography.bodyLongBold),
@ -174,7 +161,7 @@ const styles = (theme: Theme) => {
} }
} }
}; };
}; });
/** /**
* Button used for pre meeting actions. * Button used for pre meeting actions.
@ -183,7 +170,6 @@ const styles = (theme: Theme) => {
*/ */
function ActionButton({ function ActionButton({
children, children,
classes,
className = '', className = '',
disabled, disabled,
hasOptions, hasOptions,
@ -198,6 +184,7 @@ function ActionButton({
ariaLabel, ariaLabel,
ariaDropDownLabel ariaDropDownLabel
}: Props) { }: Props) {
const { classes, cx } = useStyles();
const onKeyPressHandler = useCallback(e => { const onKeyPressHandler = useCallback(e => {
if (onClick && !disabled && (e.key === ' ' || e.key === 'Enter')) { if (onClick && !disabled && (e.key === ' ' || e.key === 'Enter')) {
@ -214,7 +201,7 @@ function ActionButton({
} }
}, [ onOptionsClick, disabled ]); }, [ onOptionsClick, disabled ]);
const containerClasses = clsx( const containerClasses = cx(
classes.actionButton, classes.actionButton,
className && className, className && className,
type, type,
@ -233,25 +220,25 @@ function ActionButton({
tabIndex = { 0 } > tabIndex = { 0 } >
{children} {children}
{ hasOptions { hasOptions
&& <div && <div
aria-disabled = { disabled } aria-disabled = { disabled }
aria-haspopup = 'true' aria-haspopup = 'true'
aria-label = { ariaDropDownLabel } aria-label = { ariaDropDownLabel }
aria-pressed = { ariaPressed } aria-pressed = { ariaPressed }
className = { classes.options } className = { classes.options }
data-testid = 'prejoin.joinOptions' data-testid = 'prejoin.joinOptions'
onClick = { disabled ? undefined : onOptionsClick } onClick = { disabled ? undefined : onOptionsClick }
onKeyPress = { onOptionsKeyPressHandler } onKeyPress = { onOptionsKeyPressHandler }
role = { role } role = { role }
tabIndex = { tabIndex }> tabIndex = { tabIndex }>
<Icon <Icon
className = 'icon' className = 'icon'
size = { 14 } size = { 14 }
src = { OptionsIcon } /> src = { OptionsIcon } />
</div> </div>
} }
</div> </div>
); );
} }
export default withStyles(styles)(ActionButton); export default ActionButton;

8
react/features/base/premeeting/components/web/ConnectionStatus.tsx
View File

@ -17,12 +17,12 @@ interface Props extends WithTranslation {
/** /**
* List of strings with details about the connection. * List of strings with details about the connection.
*/ */
connectionDetails: string[]; connectionDetails?: string[];
/** /**
* The type of the connection. Can be: 'none', 'poor', 'nonOptimal' or 'good'. * The type of the connection. Can be: 'none', 'poor', 'nonOptimal' or 'good'.
*/ */
connectionType: string; connectionType?: string;
} }
const useStyles = makeStyles()((theme: Theme) => { const useStyles = makeStyles()((theme: Theme) => {
@ -155,7 +155,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
const arrowClassName = showDetails const arrowClassName = showDetails
? 'con-status-arrow con-status-arrow--up' ? 'con-status-arrow con-status-arrow--up'
: 'con-status-arrow'; : 'con-status-arrow';
const detailsText = connectionDetails.map(d => t(d)).join(' '); const detailsText = connectionDetails?.map(d => t(d)).join(' ');
const detailsClassName = showDetails const detailsClassName = showDetails
? 'con-status-details-visible' ? 'con-status-details-visible'
: 'con-status-details-hidden'; : 'con-status-details-hidden';
@ -176,7 +176,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
return null; return null;
} }
const { connectionClass, icon, connectionText } = CONNECTION_TYPE_MAP[connectionType]; const { connectionClass, icon, connectionText } = CONNECTION_TYPE_MAP[connectionType ?? ''];
return ( return (
<div className = { classes.connectionStatus }> <div className = { classes.connectionStatus }>

180
react/features/base/premeeting/components/web/PreMeetingScreen.js → react/features/base/premeeting/components/web/PreMeetingScreen.tsx
View File

@ -1,100 +1,91 @@
// @flow /* eslint-disable lines-around-comment */
import { Theme } from '@mui/material';
import React, { ReactNode } from 'react';
import { makeStyles } from 'tss-react/mui';
import { withStyles } from '@mui/styles'; import { IState } from '../../../../app/types';
import React, { PureComponent } from 'react';
import { connect } from '../../../../base/redux';
import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus'; import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus';
// @ts-ignore
import { Toolbox } from '../../../../toolbox/components/web'; import { Toolbox } from '../../../../toolbox/components/web';
import { getConferenceName } from '../../../conference/functions'; import { getConferenceName } from '../../../conference/functions';
import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants'; import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants';
import { getToolbarButtons, isToolbarButtonEnabled } from '../../../config/functions.web'; import { getToolbarButtons, isToolbarButtonEnabled } from '../../../config/functions.web';
import { connect } from '../../../redux/functions';
import { withPixelLineHeight } from '../../../styles/functions.web'; import { withPixelLineHeight } from '../../../styles/functions.web';
import ConnectionStatus from './ConnectionStatus'; import ConnectionStatus from './ConnectionStatus';
// @ts-ignore
import Preview from './Preview'; import Preview from './Preview';
type Props = { interface Props {
/** /**
* The list of toolbar buttons to render. * The list of toolbar buttons to render.
*/ */
_buttons: Array<string>, _buttons: Array<string>;
/** /**
* The branding background of the premeeting screen(lobby/prejoin). * The branding background of the premeeting screen(lobby/prejoin).
*/ */
_premeetingBackground: string, _premeetingBackground: string;
/** /**
* The name of the meeting that is about to be joined. * The name of the meeting that is about to be joined.
*/ */
_roomName: string, _roomName: string;
/** /**
* Children component(s) to be rendered on the screen. * Children component(s) to be rendered on the screen.
*/ */
children?: React$Node, children?: ReactNode;
/**
* Classes prop injected by withStyles.
*/
classes: Object,
/** /**
* Additional CSS class names to set on the icon container. * Additional CSS class names to set on the icon container.
*/ */
className?: string, className?: string;
/** /**
* The name of the participant. * The name of the participant.
*/ */
name?: string, name?: string;
/** /**
* Indicates whether the copy url button should be shown. * Indicates whether the copy url button should be shown.
*/ */
showCopyUrlButton: boolean, showCopyUrlButton: boolean;
/** /**
* Indicates whether the device status should be shown. * Indicates whether the device status should be shown.
*/ */
showDeviceStatus: boolean, showDeviceStatus: boolean;
/** /**
* The 'Skip prejoin' button to be rendered (if any). * The 'Skip prejoin' button to be rendered (if any).
*/ */
skipPrejoinButton?: React$Node, skipPrejoinButton?: ReactNode;
/**
* Title of the screen.
*/
title?: string,
/** /**
* Whether it's used in the 3rdParty prejoin screen or not. * Whether it's used in the 3rdParty prejoin screen or not.
*/ */
thirdParty?: boolean, thirdParty?: boolean;
/**
* Title of the screen.
*/
title?: string;
/** /**
* True if the preview overlay should be muted, false otherwise. * True if the preview overlay should be muted, false otherwise.
*/ */
videoMuted?: boolean, videoMuted?: boolean;
/** /**
* The video track to render as preview (if omitted, the default local track will be rendered). * The video track to render as preview (if omitted, the default local track will be rendered).
*/ */
videoTrack?: Object videoTrack?: Object;
} }
/** const useStyles = makeStyles()((theme: Theme) => {
* Creates the styles for the component.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const styles = theme => {
return { return {
subtitle: { subtitle: {
...withPixelLineHeight(theme.typography.heading5), ...withPixelLineHeight(theme.typography.heading5),
@ -107,79 +98,56 @@ const styles = theme => {
width: '100%' width: '100%'
} }
}; };
}; });
/** const PreMeetingScreen = ({
* Implements a pre-meeting screen that can be used at various pre-meeting phases, for example _buttons,
* on the prejoin screen (pre-connection) or lobby (post-connection). _premeetingBackground,
*/ _roomName,
class PreMeetingScreen extends PureComponent<Props> { children,
/** className,
* Default values for {@code Prejoin} component's properties. showDeviceStatus,
* skipPrejoinButton,
* @static title,
*/ videoMuted,
static defaultProps = { videoTrack
showCopyUrlButton: true, }: Props) => {
showToolbox: true const { classes } = useStyles();
}; const containerClassName = `premeeting-screen ${className ? className : ''}`;
const style = _premeetingBackground ? {
background: _premeetingBackground,
backgroundPosition: 'center',
backgroundSize: 'cover'
} : {};
/** return (
* Implements {@code PureComponent#render}. <div className = { containerClassName }>
* <div style = { style }>
* @inheritdoc <div className = 'content'>
*/ <ConnectionStatus />
render() {
const {
_buttons,
_premeetingBackground,
_roomName,
children,
classes,
className,
showDeviceStatus,
skipPrejoinButton,
title,
videoMuted,
videoTrack
} = this.props;
const containerClassName = `premeeting-screen ${className ? className : ''}`; <div className = 'content-controls'>
const style = _premeetingBackground ? { <h1 className = 'title'>
background: _premeetingBackground, {title}
backgroundPosition: 'center', </h1>
backgroundSize: 'cover' {_roomName && (
} : {}; <span className = { classes.subtitle }>
{_roomName}
return ( </span>
<div className = { containerClassName }> )}
<div style = { style }> {children}
<div className = 'content'> {_buttons.length && <Toolbox toolbarButtons = { _buttons } />}
<ConnectionStatus /> {skipPrejoinButton}
{showDeviceStatus && <DeviceStatus />}
<div className = 'content-controls'>
<h1 className = 'title'>
{ title }
</h1>
{ _roomName && (
<span className = { classes.subtitle }>
{_roomName}
</span>
)}
{ children }
{ _buttons.length && <Toolbox toolbarButtons = { _buttons } /> }
{ skipPrejoinButton }
{ showDeviceStatus && <DeviceStatus /> }
</div>
</div> </div>
</div> </div>
<Preview
videoMuted = { videoMuted }
videoTrack = { videoTrack } />
</div> </div>
); <Preview
} videoMuted = { videoMuted }
} videoTrack = { videoTrack } />
</div>
);
};
/** /**
@ -189,12 +157,12 @@ class PreMeetingScreen extends PureComponent<Props> {
* @param {Object} ownProps - The props passed to the component. * @param {Object} ownProps - The props passed to the component.
* @returns {Object} * @returns {Object}
*/ */
function mapStateToProps(state, ownProps): Object { function mapStateToProps(state: IState, ownProps: Partial<Props>) {
const { hiddenPremeetingButtons, hideConferenceSubject } = state['features/base/config']; const { hiddenPremeetingButtons, hideConferenceSubject } = state['features/base/config'];
const toolbarButtons = getToolbarButtons(state); const toolbarButtons = getToolbarButtons(state);
const premeetingButtons = (ownProps.thirdParty const premeetingButtons = (ownProps.thirdParty
? THIRD_PARTY_PREJOIN_BUTTONS ? THIRD_PARTY_PREJOIN_BUTTONS
: PREMEETING_BUTTONS).filter(b => !(hiddenPremeetingButtons || []).includes(b)); : PREMEETING_BUTTONS).filter((b: any) => !(hiddenPremeetingButtons || []).includes(b));
const { premeetingBackground } = state['features/dynamic-branding']; const { premeetingBackground } = state['features/dynamic-branding'];
@ -212,4 +180,4 @@ function mapStateToProps(state, ownProps): Object {
}; };
} }
export default connect(mapStateToProps)(withStyles(styles)(PreMeetingScreen)); export default connect(mapStateToProps)(PreMeetingScreen);

57
react/features/prejoin/components/DropdownButton.tsx
View File

@ -1,16 +1,11 @@
import { Theme } from '@mui/material'; import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React from 'react'; import React from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../base/icons/components/Icon'; import Icon from '../../base/icons/components/Icon';
type Props = { type Props = {
/**
* The css classes generated from theme.
*/
classes: any;
/** /**
* Attribute used in automated testing. * Attribute used in automated testing.
*/ */
@ -37,14 +32,8 @@ type Props = {
onKeyPressed: (e?: React.KeyboardEvent) => void; onKeyPressed: (e?: React.KeyboardEvent) => void;
}; };
/**
* Creates the styles for the component. const useStyles = makeStyles()((theme: Theme) => {
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const styles = (theme: Theme) => {
return { return {
prejoinPreviewDropdownBtn: { prejoinPreviewDropdownBtn: {
alignItems: 'center', alignItems: 'center',
@ -70,7 +59,7 @@ const styles = (theme: Theme) => {
} }
} }
}; };
}; });
/** /**
* Buttons used for pre meeting actions. * Buttons used for pre meeting actions.
@ -78,26 +67,30 @@ const styles = (theme: Theme) => {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
const DropdownButton = ({ const DropdownButton = ({
classes,
dataTestId, dataTestId,
icon, icon,
onButtonClick, onButtonClick,
onKeyPressed, onKeyPressed,
label label
}: Props) => ( }: Props) => {
<div const { classes } = useStyles();
className = { classes.prejoinPreviewDropdownBtn }
data-testid = { dataTestId }
onClick = { onButtonClick }
onKeyPress = { onKeyPressed }
role = 'button'
tabIndex = { 0 }>
<Icon
className = { classes.prejoinPreviewDropdownIcon }
size = { 24 }
src = { icon } />
{label}
</div>
);
export default withStyles(styles)(DropdownButton); return (
<div
className = { classes.prejoinPreviewDropdownBtn }
data-testid = { dataTestId }
onClick = { onButtonClick }
onKeyPress = { onKeyPressed }
role = 'button'
tabIndex = { 0 }>
<Icon
className = { classes.prejoinPreviewDropdownIcon }
color = '#1C2025'
size = { 24 }
src = { icon } />
{label}
</div>
);
};
export default DropdownButton;

6
react/features/prejoin/components/preview/DeviceStatus.tsx
View File

@ -18,13 +18,13 @@ export interface Props extends WithTranslation {
/** /**
* The text to be displayed in relation to the status of the audio/video devices. * The text to be displayed in relation to the status of the audio/video devices.
*/ */
deviceStatusText: string; deviceStatusText?: string;
/** /**
* The type of status for current devices, controlling the background color of the text. * The type of status for current devices, controlling the background color of the text.
* Can be `ok` or `warning`. * Can be `ok` or `warning`.
*/ */
deviceStatusType: string; deviceStatusType?: string;
} }
const useStyles = makeStyles()((theme: Theme) => { const useStyles = makeStyles()((theme: Theme) => {
@ -97,7 +97,7 @@ function DeviceStatus({ deviceStatusType, deviceStatusText, t }: Props) {
size = { 16 } size = { 16 }
src = { src } /> src = { src } />
<span role = 'heading'> <span role = 'heading'>
{hasError ? t('prejoin.errorNoPermissions') : t(deviceStatusText)} {hasError ? t('prejoin.errorNoPermissions') : t(deviceStatusText ?? '')}
</span> </span>
</div> </div>
); );