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

ref(ui-components) Use new Dialog component (#12351) 

Convert some files to TS
This commit is contained in:
Robert Pintilii 2022-10-11 11:24:11 +03:00 committed by GitHub
parent b858496adb
commit 6423ed8fb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 79 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
react/features/base/dialog/middleware.web.ts
View File

@ -21,8 +21,14 @@ import SecurityDialog from '../../security/components/security-dialog/web/Securi
import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog'; import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats'; import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web'; import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
import GrantModeratorDialog from '../../video-menu/components/web/GrantModeratorDialog';
import KickRemoteParticipantDialog from '../../video-menu/components/web/KickRemoteParticipantDialog';
import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog'; import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog';
import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog'; import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog';
import MuteRemoteParticipantsVideoDialog from '../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
// @ts-ignore
import VideoQualityDialog from '../../video-quality/components/VideoQualityDialog.web';
import VirtualBackgroundDialog from '../../virtual-background/components/VirtualBackgroundDialog';
import MiddlewareRegistry from '../redux/MiddlewareRegistry'; import MiddlewareRegistry from '../redux/MiddlewareRegistry';
import { OPEN_DIALOG } from './actionTypes'; import { OPEN_DIALOG } from './actionTypes';
@ -33,7 +39,9 @@ import { OPEN_DIALOG } from './actionTypes';
const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog, const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog, FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog, StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog ]; SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
VirtualBackgroundDialog ];
// This function is necessary while the transition from @atlaskit dialog to our component is ongoing. // This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component); const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);

4
react/features/base/ui/components/web/ClickableIcon.tsx
View File

@ -8,6 +8,7 @@ import Icon from '../../../icons/components/Icon';
interface IProps { interface IProps {
accessibilityLabel: string; accessibilityLabel: string;
icon: Function; icon: Function;
id?: string;
onClick: () => void; onClick: () => void;
} }
@ -40,7 +41,7 @@ const useStyles = makeStyles()((theme: Theme) => {
}; };
}); });
const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => { const ClickableIcon = ({ accessibilityLabel, icon, id, onClick }: IProps) => {
const { classes: styles, cx } = useStyles(); const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser(); const isMobile = isMobileBrowser();
@ -48,6 +49,7 @@ const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
<button <button
aria-label = { accessibilityLabel } aria-label = { accessibilityLabel }
className = { cx(styles.button, isMobile && 'is-mobile') } className = { cx(styles.button, isMobile && 'is-mobile') }
id = { id }
onClick = { onClick }> onClick = { onClick }>
<Icon <Icon
size = { 24 } size = { 24 }

8
react/features/base/ui/components/web/Dialog.tsx
View File

@ -150,6 +150,7 @@ const useStyles = makeStyles()((theme: Theme) => {
boxSizing: 'border-box', boxSizing: 'border-box',
padding: '0 24px', padding: '0 24px',
overflowX: 'hidden', overflowX: 'hidden',
minHeight: '40px',
'@media (max-width: 448px)': { '@media (max-width: 448px)': {
height: '100%' height: '100%'
@ -242,10 +243,15 @@ const Dialog = ({
className = { cx(classes.modal, isUnmounting && 'unmount', size, className) } className = { cx(classes.modal, isUnmounting && 'unmount', size, className) }
role = 'dialog'> role = 'dialog'>
<div className = { classes.header }> <div className = { classes.header }>
<p className = { classes.title }>{title ?? t(titleKey ?? '')}</p> <p
className = { classes.title }
id = 'dialog-title'>
{title ?? t(titleKey ?? '')}
</p>
<ClickableIcon <ClickableIcon
accessibilityLabel = { t('dialog.close') } accessibilityLabel = { t('dialog.close') }
icon = { IconClose } icon = { IconClose }
id = 'modal-header-close-button'
onClick = { onClose } /> onClick = { onClose } />
</div> </div>
<div className = { classes.content }>{children}</div> <div className = { classes.content }>{children}</div>

36
react/features/video-menu/components/AbstractGrantModeratorDialog.js → react/features/video-menu/components/AbstractGrantModeratorDialog.ts
View File

@ -1,35 +1,29 @@
// @flow
import { Component } from 'react'; import { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
createRemoteVideoMenuButtonEvent, import { sendAnalytics } from '../../analytics/functions';
sendAnalytics import { IState, IStore } from '../../app/types';
} from '../../analytics'; import { grantModerator } from '../../base/participants/actions';
import { getParticipantById, grantModerator } from '../../base/participants'; import { getParticipantById } from '../../base/participants/functions';
type Props = { interface Props extends WithTranslation {
/** /**
* The Redux dispatch function. * The Redux dispatch function.
*/ */
dispatch: Function, dispatch: IStore['dispatch'];
/** /**
* The ID of the remote participant to be granted moderator rights. * The ID of the remote participant to be granted moderator rights.
*/ */
participantID: string, participantID: string;
/** /**
* The name of the remote participant to be granted moderator rights. * The name of the remote participant to be granted moderator rights.
*/ */
participantName: string, participantName: string;
}
/**
* Function to translate i18n labels.
*/
t: Function
};
/** /**
* Abstract dialog to confirm granting moderator to a participant. * Abstract dialog to confirm granting moderator to a participant.
@ -47,8 +41,6 @@ export default class AbstractGrantModeratorDialog
this._onSubmit = this._onSubmit.bind(this); this._onSubmit = this._onSubmit.bind(this);
} }
_onSubmit: () => boolean;
/** /**
* Callback for the confirm button. * Callback for the confirm button.
* *
@ -73,13 +65,13 @@ export default class AbstractGrantModeratorDialog
/** /**
* Maps (parts of) the Redux state to the associated {@code AbstractMuteEveryoneDialog}'s props. * Maps (parts of) the Redux state to the associated {@code AbstractMuteEveryoneDialog}'s props.
* *
* @param {Object} state - The redux state. * @param {IState} state - The redux state.
* @param {Object} ownProps - The properties explicitly passed to the component. * @param {Object} ownProps - The properties explicitly passed to the component.
* @returns {Props} * @returns {Props}
*/ */
export function abstractMapStateToProps(state: Object, ownProps: Props) { export function abstractMapStateToProps(state: IState, ownProps: Props) {
return { return {
participantName: getParticipantById(state, ownProps.participantID).name participantName: getParticipantById(state, ownProps.participantID)?.name
}; };
} }

27
react/features/video-menu/components/AbstractKickRemoteParticipantDialog.js → react/features/video-menu/components/AbstractKickRemoteParticipantDialog.ts
View File

@ -1,30 +1,23 @@
// @flow
import { Component } from 'react'; import { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
createRemoteVideoMenuButtonEvent, import { sendAnalytics } from '../../analytics/functions';
sendAnalytics import { IStore } from '../../app/types';
} from '../../analytics'; import { kickParticipant } from '../../base/participants/actions';
import { kickParticipant } from '../../base/participants';
type Props = { interface Props extends WithTranslation {
/** /**
* The Redux dispatch function. * The Redux dispatch function.
*/ */
dispatch: Function, dispatch: IStore['dispatch'];
/** /**
* The ID of the remote participant to be kicked. * The ID of the remote participant to be kicked.
*/ */
participantID: string, participantID: string;
}
/**
* Function to translate i18n labels.
*/
t: Function
};
/** /**
* Abstract dialog to confirm a remote participant kick action. * Abstract dialog to confirm a remote participant kick action.
@ -42,8 +35,6 @@ export default class AbstractKickRemoteParticipantDialog
this._onSubmit = this._onSubmit.bind(this); this._onSubmit = this._onSubmit.bind(this);
} }
_onSubmit: () => boolean;
/** /**
* Callback for the confirm button. * Callback for the confirm button.
* *

16
react/features/video-menu/components/web/GrantModeratorDialog.js → react/features/video-menu/components/web/GrantModeratorDialog.tsx
View File

@ -1,12 +1,9 @@
// @flow
import React from 'react'; import React from 'react';
import { Dialog } from '../../../base/dialog'; import { translate } from '../../../base/i18n/functions';
import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux/functions';
import { connect } from '../../../base/redux'; import Dialog from '../../../base/ui/components/web/Dialog';
import AbstractGrantModeratorDialog import AbstractGrantModeratorDialog, { abstractMapStateToProps } from '../AbstractGrantModeratorDialog';
, { abstractMapStateToProps } from '../AbstractGrantModeratorDialog';
/** /**
* Dialog to confirm a grant moderator action. * Dialog to confirm a grant moderator action.
@ -21,10 +18,9 @@ class GrantModeratorDialog extends AbstractGrantModeratorDialog {
render() { render() {
return ( return (
<Dialog <Dialog
okKey = 'dialog.Yes' ok = {{ translationKey: 'dialog.Yes' }}
onSubmit = { this._onSubmit } onSubmit = { this._onSubmit }
titleKey = 'dialog.grantModeratorTitle' titleKey = 'dialog.grantModeratorTitle'>
width = 'small'>
<div> <div>
{ this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName }) } { this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName }) }
</div> </div>

18
react/features/video-menu/components/web/KickRemoteParticipantDialog.js → react/features/video-menu/components/web/KickRemoteParticipantDialog.tsx
View File

@ -1,12 +1,9 @@
// @flow
import React from 'react'; import React from 'react';
import { Dialog } from '../../../base/dialog'; import { translate } from '../../../base/i18n/functions';
import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux/functions';
import { connect } from '../../../base/redux'; import Dialog from '../../../base/ui/components/web/Dialog';
import AbstractKickRemoteParticipantDialog import AbstractKickRemoteParticipantDialog from '../AbstractKickRemoteParticipantDialog';
from '../AbstractKickRemoteParticipantDialog';
/** /**
* Dialog to confirm a remote participant kick action. * Dialog to confirm a remote participant kick action.
@ -21,18 +18,15 @@ class KickRemoteParticipantDialog extends AbstractKickRemoteParticipantDialog {
render() { render() {
return ( return (
<Dialog <Dialog
okKey = 'dialog.kickParticipantButton' ok = {{ translationKey: 'dialog.kickParticipantButton' }}
onSubmit = { this._onSubmit } onSubmit = { this._onSubmit }
titleKey = 'dialog.kickParticipantTitle' titleKey = 'dialog.kickParticipantTitle'>
width = 'small'>
<div> <div>
{ this.props.t('dialog.kickParticipantDialog') } { this.props.t('dialog.kickParticipantDialog') }
</div> </div>
</Dialog> </Dialog>
); );
} }
_onSubmit: () => boolean;
} }
export default translate(connect()(KickRemoteParticipantDialog)); export default translate(connect()(KickRemoteParticipantDialog));

16
react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.js → react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.tsx
View File

@ -1,10 +1,8 @@
/* @flow */
import React from 'react'; import React from 'react';
import { Dialog } from '../../../base/dialog'; import { translate } from '../../../base/i18n/functions';
import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux/functions';
import { connect } from '../../../base/redux'; import Dialog from '../../../base/ui/components/web/Dialog';
import AbstractMuteRemoteParticipantsVideoDialog, { import AbstractMuteRemoteParticipantsVideoDialog, {
abstractMapStateToProps abstractMapStateToProps
} from '../AbstractMuteRemoteParticipantsVideoDialog'; } from '../AbstractMuteRemoteParticipantsVideoDialog';
@ -25,10 +23,9 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
render() { render() {
return ( return (
<Dialog <Dialog
okKey = 'dialog.muteParticipantsVideoButton' ok = {{ translationKey: 'dialog.muteParticipantsVideoButton' }}
onSubmit = { this._onSubmit } onSubmit = { this._onSubmit }
titleKey = 'dialog.muteParticipantsVideoTitle' titleKey = 'dialog.muteParticipantsVideoTitle'>
width = 'small'>
<div> <div>
{this.props.t(this.props.isVideoModerationOn {this.props.t(this.props.isVideoModerationOn
? 'dialog.muteParticipantsVideoBodyModerationOn' ? 'dialog.muteParticipantsVideoBodyModerationOn'
@ -38,8 +35,7 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
</Dialog> </Dialog>
); );
} }
_onSubmit: () => boolean;
} }
// @ts-ignore
export default translate(connect(abstractMapStateToProps)(MuteRemoteParticipantsVideoDialog)); export default translate(connect(abstractMapStateToProps)(MuteRemoteParticipantsVideoDialog));

9
react/features/video-quality/components/VideoQualityDialog.web.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Dialog } from '../../base/dialog'; import Dialog from '../../base/ui/components/web/Dialog';
import VideoQualitySlider from './VideoQualitySlider.web'; import VideoQualitySlider from './VideoQualitySlider.web';
@ -20,10 +20,9 @@ export default class VideoQualityDialog extends Component {
render() { render() {
return ( return (
<Dialog <Dialog
hideCancelButton = { true } cancel = {{ hidden: true }}
submitDisabled = { true } ok = {{ hidden: true }}
titleKey = 'videoStatus.performanceSettings' titleKey = 'videoStatus.performanceSettings'>
width = 'small'>
<VideoQualitySlider /> <VideoQualitySlider />
</Dialog> </Dialog>
); );

1
react/features/virtual-background/components/UploadImageButton.tsx
View File

@ -56,7 +56,6 @@ const useStyles = makeStyles()((theme: Theme) => {
fontSize: '14px', fontSize: '14px',
fontWeight: '600', fontWeight: '600',
lineHeight: '20px', lineHeight: '20px',
marginLeft: '-10px',
marginTop: theme.spacing(3), marginTop: theme.spacing(3),
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
color: '#669aec', color: '#669aec',

32
react/features/virtual-background/components/VirtualBackgroundDialog.tsx
View File

@ -10,27 +10,20 @@ import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui'; import { makeStyles } from 'tss-react/mui';
import { IState } from '../../app/types'; import { IState } from '../../app/types';
// @ts-ignore import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config/functions.any';
import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config'; import { hideDialog } from '../../base/dialog/actions';
// @ts-ignore
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n/functions'; import { translate } from '../../base/i18n/functions';
import Icon from '../../base/icons/components/Icon'; import Icon from '../../base/icons/components/Icon';
import { IconCloseSmall } from '../../base/icons/svg'; import { IconCloseSmall } from '../../base/icons/svg';
// @ts-ignore
import { connect } from '../../base/redux/functions'; import { connect } from '../../base/redux/functions';
// @ts-ignore import { updateSettings } from '../../base/settings/actions';
import { updateSettings } from '../../base/settings';
// @ts-ignore // @ts-ignore
import { Tooltip } from '../../base/tooltip'; import { Tooltip } from '../../base/tooltip';
// @ts-ignore import { getLocalVideoTrack } from '../../base/tracks/functions';
import { getLocalVideoTrack } from '../../base/tracks'; import Dialog from '../../base/ui/components/web/Dialog';
// @ts-ignore
import { toggleBackgroundEffect } from '../actions'; import { toggleBackgroundEffect } from '../actions';
import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants'; import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants';
// @ts-ignore
import { toDataURL } from '../functions'; import { toDataURL } from '../functions';
// @ts-ignore
import logger from '../logger'; import logger from '../logger';
import UploadImageButton from './UploadImageButton'; import UploadImageButton from './UploadImageButton';
@ -121,13 +114,15 @@ const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackg
const useStyles = makeStyles()((theme: Theme) => { const useStyles = makeStyles()((theme: Theme) => {
return { return {
dialogContainer: {
width: 'auto'
},
container: { container: {
display: 'flex', display: 'flex',
flexDirection: 'column' flexDirection: 'column'
}, },
dialog: { dialog: {
alignSelf: 'flex-start', alignSelf: 'flex-start',
marginLeft: '-10px',
position: 'relative', position: 'relative',
maxHeight: '300px', maxHeight: '300px',
color: 'white', color: 'white',
@ -459,12 +454,15 @@ function VirtualBackground({
return ( return (
<Dialog <Dialog
hideCancelButton = { false } className = { classes.dialogContainer }
okKey = { 'virtualBackground.apply' } ok = {{
disabled: !options || loading || !previewIsLoaded,
translationKey: 'virtualBackground.apply'
}}
onCancel = { cancelVirtualBackground } onCancel = { cancelVirtualBackground }
onSubmit = { applyVirtualBackground } onSubmit = { applyVirtualBackground }
submitDisabled = { !options || loading || !previewIsLoaded } size = 'large'
titleKey = { 'virtualBackground.title' } > titleKey = 'virtualBackground.title' >
<VirtualBackgroundPreview <VirtualBackgroundPreview
loadedPreview = { loadedPreviewState } loadedPreview = { loadedPreviewState }
options = { options } /> options = { options } />

1
react/features/virtual-background/components/VirtualBackgroundPreview.tsx
View File

@ -94,7 +94,6 @@ const styles = (theme: Theme) => {
}, },
'& .video-background-preview-entry': { '& .video-background-preview-entry': {
marginLeft: '-10px',
height: '250px', height: '250px',
width: '570px', width: '570px',
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),