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

ref(ui-components) Use new Dialog (#12363) 

Convert some files to TS
Improve Dialog component
This commit is contained in:
Robert Pintilii 2022-10-17 14:27:48 +03:00 committed by GitHub
parent 6274299d49
commit dd6478b3cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 148 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
react/features/authentication/components/web/LoginDialog.tsx
View File

@ -7,11 +7,10 @@ import { connect } from '../../../../../connection';
import { IState, IStore } from '../../../app/types';
import { IConfig } from '../../../base/config/configType';
import { toJid } from '../../../base/connection/functions';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate, translateToHTML } from '../../../base/i18n/functions';
import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
import { connect as reduxConnect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import Input from '../../../base/ui/components/web/Input';
import {
authenticateAndUpgradeRole,
@ -255,19 +254,18 @@ class LoginDialog extends Component<Props, State> {
return (
<Dialog
disableBlanketClickDismiss = { true }
hideCloseIconButton = { true }
okDisabled = {
connecting
disableBackdropClose = { true }
hideCloseButton = { true }
ok = {{
disabled: connecting
|| loginStarted
|| !password
|| !username
}
okKey = { t('dialog.login') }
|| !username,
translationKey: 'dialog.login'
}}
onCancel = { this._onCancelLogin }
onSubmit = { this._onLogin }
titleKey = { t('dialog.authenticationRequired') }
width = { 'small' }>
titleKey = { t('dialog.authenticationRequired') }>
<Input
autoFocus = { true }
label = { t('dialog.user') }
@ -278,6 +276,7 @@ class LoginDialog extends Component<Props, State> {
value = { username } />
<br />
<Input
className = 'dialog-bottom-margin'
label = { t('dialog.userPassword') }
name = 'password'
onChange = { this._onPasswordChange }

39
react/features/authentication/components/web/WaitForOwnerDialog.js → react/features/authentication/components/web/WaitForOwnerDialog.tsx
View File

@ -1,32 +1,28 @@
// @flow
import React, { PureComponent } from 'react';
import type { Dispatch } from 'redux';
import { WithTranslation } from 'react-i18next';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import { IStore } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { cancelWaitForOwner } from '../../actions.web';
/**
* The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
*/
type Props = {
interface Props extends WithTranslation {
/**
* Redux store dispatch method.
*/
dispatch: Dispatch<any>,
dispatch: IStore['dispatch'];
/**
* Function to be invoked after click.
*/
onAuthNow: ?Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
onAuthNow?: Function;
}
/**
@ -48,8 +44,6 @@ class WaitForOwnerDialog extends PureComponent<Props> {
this._onIAmHost = this._onIAmHost.bind(this);
}
_onCancelWaitForOwner: () => void;
/**
* Called when the cancel button is clicked.
*
@ -62,8 +56,6 @@ class WaitForOwnerDialog extends PureComponent<Props> {
dispatch(cancelWaitForOwner());
}
_onIAmHost: () => void;
/**
* Called when the OK button is clicked.
*
@ -73,7 +65,7 @@ class WaitForOwnerDialog extends PureComponent<Props> {
_onIAmHost() {
const { onAuthNow } = this.props;
onAuthNow && onAuthNow();
onAuthNow?.();
}
/**
@ -88,13 +80,12 @@ class WaitForOwnerDialog extends PureComponent<Props> {
return (
<Dialog
disableBlanketClickDismiss = { true }
hideCloseIconButton = { true }
okKey = { t('dialog.IamHost') }
disableBackdropClose = { true }
hideCloseButton = { true }
ok = {{ translationKey: 'dialog.IamHost' }}
onCancel = { this._onCancelWaitForOwner }
onSubmit = { this._onIAmHost }
titleKey = { t('dialog.WaitingForHostTitle') }
width = { 'small' }>
titleKey = { t('dialog.WaitingForHostTitle') }>
<span>
{ t('dialog.WaitForHostMsg') }
</span>

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

@ -1,5 +1,8 @@
/* eslint-disable lines-around-comment */
import LoginDialog from '../../authentication/components/web/LoginDialog';
import WaitForOwnerDialog from '../../authentication/components/web/WaitForOwnerDialog';
import ChatPrivacyDialog from '../../chat/components/web/ChatPrivacyDialog';
import DesktopPicker from '../../desktop-picker/components/DesktopPicker';
import DisplayNamePrompt from '../../display-name/components/web/DisplayNamePrompt';
import EmbedMeetingDialog from '../../embed-meeting/components/EmbedMeetingDialog';
// @ts-ignore
@ -15,9 +18,12 @@ import StopLiveStreamDialog from '../../recording/components/LiveStream/web/Stop
import StartRecordingDialog from '../../recording/components/Recording/web/StartRecordingDialog';
// @ts-ignore
import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
// @ts-ignore
import RemoteControlAuthorizationDialog from '../../remote-control/components/RemoteControlAuthorizationDialog';
import ShareAudioDialog from '../../screen-share/components/ShareAudioDialog';
import ShareScreenWarningDialog from '../../screen-share/components/ShareScreenWarningDialog';
import SecurityDialog from '../../security/components/security-dialog/web/SecurityDialog';
import LogoutDialog from '../../settings/components/web/LogoutDialog';
import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
@ -41,7 +47,8 @@ const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNam
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
VirtualBackgroundDialog ];
VirtualBackgroundDialog, LoginDialog, WaitForOwnerDialog, DesktopPicker, RemoteControlAuthorizationDialog,
LogoutDialog ];
// 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);

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

@ -1,5 +1,5 @@
import { Theme } from '@mui/material';
import React, { ReactElement, useCallback, useContext, useEffect } from 'react';
import React, { useCallback, useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { keyframes } from 'tss-react';
@ -177,9 +177,11 @@ interface DialogProps {
hidden?: boolean;
translationKey?: string;
};
children?: ReactElement | ReactElement[];
children?: React.ReactNode;
className?: string;
description?: string;
disableBackdropClose?: boolean;
hideCloseButton?: boolean;
ok?: {
disabled?: boolean;
hidden?: boolean;
@ -197,6 +199,8 @@ const Dialog = ({
children,
className,
description,
disableBackdropClose,
hideCloseButton,
ok = { translationKey: 'dialog.Ok' },
onCancel,
onSubmit,
@ -214,17 +218,24 @@ const Dialog = ({
dispatch(hideDialog());
}, [ onCancel ]);
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
}, []);
const submit = useCallback(() => {
onSubmit?.();
dispatch(hideDialog());
}, [ onSubmit ]);
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
if (e.key === 'Enter') {
submit();
}
}, []);
const onBackdropClick = useCallback(() => {
!disableBackdropClose && onClose();
}, [ disableBackdropClose, onClose ]);
useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
@ -235,7 +246,7 @@ const Dialog = ({
<div className = { cx(classes.container, isUnmounting && 'unmount') }>
<div
className = { classes.backdrop }
onClick = { onClose } />
onClick = { onBackdropClick } />
<div
aria-describedby = { description }
aria-labelledby = { title ?? t(titleKey ?? '') }
@ -248,11 +259,13 @@ const Dialog = ({
id = 'dialog-title'>
{title ?? t(titleKey ?? '')}
</p>
{!hideCloseButton && (
<ClickableIcon
accessibilityLabel = { t('dialog.close') }
icon = { IconClose }
id = 'modal-header-close-button'
onClick = { onClose } />
)}
</div>
<div className = { classes.content }>{children}</div>
<div className = { classes.footer }>

97
react/features/desktop-picker/components/DesktopPicker.js → react/features/desktop-picker/components/DesktopPicker.tsx
View File

@ -1,14 +1,17 @@
// @flow
/* eslint-disable lines-around-comment */
import Tabs from '@atlaskit/tabs';
import React, { PureComponent } from 'react';
import type { Dispatch } from 'redux';
import { WithTranslation } from 'react-i18next';
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';
import { IStore } from '../../app/types';
import { hideDialog } from '../../base/dialog/actions';
import { translate } from '../../base/i18n/functions';
import { connect } from '../../base/redux/functions';
import Dialog from '../../base/ui/components/web/Dialog';
// @ts-ignore
import { obtainDesktopSources } from '../functions';
// @ts-ignore
import DesktopPickerPane from './DesktopPickerPane';
/**
@ -45,29 +48,24 @@ const VALID_TYPES = Object.keys(TAB_LABELS);
/**
* The type of the React {@code Component} props of {@link DesktopPicker}.
*/
type Props = {
interface Props extends WithTranslation {
/**
* An array with desktop sharing sources to be displayed.
*/
desktopSharingSources: Array<string>,
desktopSharingSources: Array<string>;
/**
* Used to request DesktopCapturerSources.
*/
dispatch: Dispatch<any>,
dispatch: IStore['dispatch'];
/**
* The callback to be invoked when the component is closed or when a
* DesktopCapturerSource has been chosen.
*/
onSourceChoose: Function,
/**
* Used to obtain translations.
*/
t: Function
};
onSourceChoose: Function;
}
/**
* The type of the React {@code Component} state of {@link DesktopPicker}.
@ -77,27 +75,27 @@ type State = {
/**
* The state of the audio screen share checkbox.
*/
screenShareAudio: boolean,
screenShareAudio: boolean;
/**
* The currently highlighted DesktopCapturerSource.
*/
selectedSource: Object,
selectedSource: any;
/**
* The desktop source type currently being displayed.
*/
selectedTab: number,
selectedTab: number;
/**
* An object containing all the DesktopCapturerSources.
*/
sources: Object,
sources: Object;
/**
* The desktop source types to fetch previews for.
*/
types: Array<string>
types: Array<string>;
};
@ -112,7 +110,7 @@ class DesktopPicker extends PureComponent<Props, State> {
*
* @inheritdoc
*/
static getDerivedStateFromProps(props) {
static getDerivedStateFromProps(props: Props) {
return {
types: DesktopPicker._getValidTypes(props.desktopSharingSources)
};
@ -125,14 +123,14 @@ class DesktopPicker extends PureComponent<Props, State> {
* @private
* @returns {Array<string>} The filtered types.
*/
static _getValidTypes(types = []) {
static _getValidTypes(types: string[] = []) {
return types.filter(
type => VALID_TYPES.includes(type));
}
_poller = null;
_poller: any = null;
state = {
state: State = {
screenShareAudio: false,
selectedSource: {},
selectedTab: 0,
@ -195,33 +193,34 @@ class DesktopPicker extends PureComponent<Props, State> {
render() {
return (
<Dialog
isModal = { false }
okDisabled = { Boolean(!this.state.selectedSource.id) }
okKey = 'dialog.Share'
ok = {{
disabled: Boolean(!this.state.selectedSource.id),
translationKey: 'dialog.Share'
}}
onCancel = { this._onCloseModal }
onSubmit = { this._onSubmit }
titleKey = 'dialog.shareYourScreen'
width = 'medium' >
size = 'large'
titleKey = 'dialog.shareYourScreen'>
{ this._renderTabs() }
</Dialog>
);
}
/**
* Computates the selected source.
* Computes the selected source.
*
* @param {Object} sources - The available sources.
* @returns {Object} The selectedSource value.
*/
_getSelectedSource(sources = {}) {
_getSelectedSource(sources: any = {}) {
const { selectedSource } = this.state;
/**
* If there are no sources for this type (or no sources for any type)
* we can't select anything.
*/
if (!Array.isArray(sources[this._selectedTabType])
|| sources[this._selectedTabType].length <= 0) {
if (!Array.isArray(sources[this._selectedTabType as keyof typeof sources])
|| sources[this._selectedTabType as keyof typeof sources].length <= 0) {
return {};
}
@ -235,7 +234,7 @@ class DesktopPicker extends PureComponent<Props, State> {
if (!selectedSource // scenario 1)
|| selectedSource.type !== this._selectedTabType // scenario 2)
|| !sources[this._selectedTabType].some( // scenario 3)
source => source.id === selectedSource.id)) {
(source: any) => source.id === selectedSource.id)) {
return {
id: sources[this._selectedTabType][0].id,
type: this._selectedTabType
@ -248,8 +247,6 @@ class DesktopPicker extends PureComponent<Props, State> {
return selectedSource;
}
_onCloseModal: (?string, string, ?boolean) => void;
/**
* Dispatches an action to hide the DesktopPicker and invokes the passed in
* callback with a selectedSource, if any.
@ -262,13 +259,11 @@ class DesktopPicker extends PureComponent<Props, State> {
* screen sharing session.
* @returns {void}
*/
_onCloseModal(id = '', type, screenShareAudio = false) {
_onCloseModal(id = '', type?: string, screenShareAudio = false) {
this.props.onSourceChoose(id, type, screenShareAudio);
this.props.dispatch(hideDialog());
}
_onPreviewClick: (string, string) => void;
/**
* Sets the currently selected DesktopCapturerSource.
*
@ -276,7 +271,7 @@ class DesktopPicker extends PureComponent<Props, State> {
* @param {string} type - The type of DesktopCapturerSource.
* @returns {void}
*/
_onPreviewClick(id, type) {
_onPreviewClick(id: string, type: string) {
this.setState({
selectedSource: {
id,
@ -285,8 +280,6 @@ class DesktopPicker extends PureComponent<Props, State> {
});
}
_onSubmit: () => void;
/**
* Request to close the modal and execute callbacks with the selected source
* id.
@ -299,19 +292,17 @@ class DesktopPicker extends PureComponent<Props, State> {
this._onCloseModal(id, type, screenShareAudio);
}
_onTabSelected: () => void;
/**
* Stores the selected tab and updates the selected source via
* {@code _getSelectedSource}.
*
* @param {Object} tab - The configuration passed into atlaskit tabs to
* @param {Object} _tab - The configuration passed into atlaskit tabs to
* describe how to display the selected tab.
* @param {number} tabIndex - The index of the tab within the array of
* displayed tabs.
* @returns {void}
*/
_onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
_onTabSelected(_tab: Object, tabIndex: number) {
const { types, sources } = this.state;
this._selectedTabType = types[tabIndex];
@ -325,8 +316,6 @@ class DesktopPicker extends PureComponent<Props, State> {
});
}
_onShareAudioChecked: (boolean) => void;
/**
* Set the screenSharingAudio state indicating whether or not to also share
* system audio.
@ -334,7 +323,7 @@ class DesktopPicker extends PureComponent<Props, State> {
* @param {boolean} checked - Share audio or not.
* @returns {void}
*/
_onShareAudioChecked(checked) {
_onShareAudioChecked(checked: boolean) {
this.setState({ screenShareAudio: checked });
}
@ -357,9 +346,9 @@ class DesktopPicker extends PureComponent<Props, State> {
onDoubleClick = { this._onSubmit }
onShareAudioChecked = { this._onShareAudioChecked }
selectedSourceId = { selectedSource.id }
sources = { sources[type] }
sources = { sources[type as keyof typeof sources] }
type = { type } />,
label: t(TAB_LABELS[type])
label: t(TAB_LABELS[type as keyof typeof TAB_LABELS])
};
});
@ -393,8 +382,6 @@ class DesktopPicker extends PureComponent<Props, State> {
this._poller = null;
}
_updateSources: () => void;
/**
* Obtains the desktop sources and updates state with them.
*
@ -409,7 +396,7 @@ class DesktopPicker extends PureComponent<Props, State> {
this.state.types,
{ thumbnailSize: THUMBNAIL_SIZE }
)
.then(sources => {
.then((sources: any) => {
const selectedSource = this._getSelectedSource(sources);
// TODO: Maybe check if we have stopped the timer and unmounted

8
react/features/remote-control/components/RemoteControlAuthorizationDialog.js
View File

@ -2,11 +2,12 @@
import React, { Component } from 'react';
import { Dialog, hideDialog } from '../../base/dialog';
import { hideDialog } from '../../base/dialog/actions';
import { translate } from '../../base/i18n';
import { getParticipantById } from '../../base/participants';
import { connect } from '../../base/redux';
import { getLocalVideoTrack } from '../../base/tracks';
import Dialog from '../../base/ui/components/web/Dialog';
import { deny, grant } from '../actions';
declare var APP: Object;
@ -68,11 +69,10 @@ class RemoteControlAuthorizationDialog extends Component<Props> {
render() {
return (
<Dialog
okKey = { 'dialog.allow' }
ok = {{ translationKey: 'dialog.allow' }}
onCancel = { this._onCancel }
onSubmit = { this._onSubmit }
titleKey = 'dialog.remoteControlTitle'
width = 'small'>
titleKey = 'dialog.remoteControlTitle'>
{
this.props.t(
'dialog.remoteControlRequestMessage',

6
react/features/salesforce/components/web/SalesforceLinkDialog.tsx
View File

@ -11,8 +11,7 @@ import { Dialog } from '../../../base/dialog';
import { hideDialog } from '../../../base/dialog/actions';
import Icon from '../../../base/icons/components/Icon';
import { IconSearch } from '../../../base/icons/svg';
// @ts-ignore
import { getFieldValue } from '../../../base/react';
import { getFieldValue } from '../../../base/react/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { NOTES_MAX_LENGTH } from '../../constants';
// @ts-ignore
@ -20,7 +19,6 @@ import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
import { RecordItem } from './RecordItem';
// @ts-ignore
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
@ -102,7 +100,7 @@ const useStyles = makeStyles()((theme: Theme) => {
minHeight: '130px',
resize: 'vertical',
width: '100%',
boxSizing: 'borderBox',
boxSizing: 'border-box',
overflow: 'hidden',
border: '1px solid',
borderColor: theme.palette.ui05,

48
react/features/settings/components/web/LogoutDialog.js
View File

@ -1,48 +0,0 @@
// @flow
import React from 'react';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
/**
* The type of {@link LogoutDialog}'s React {@code Component} props.
*/
type Props = {
/**
* Logout handler.
*/
onLogout: Function,
/**
* Function to be used to translate i18n labels.
*/
t: Function
};
/**
* Implements the Logout dialog.
*
* @param {Object} props - The props of the component.
* @returns {React$Element}.
*/
function LogoutDialog(props: Props) {
const { onLogout, t } = props;
return (
<Dialog
hideCancelButton = { false }
okKey = { t('dialog.Yes') }
onSubmit = { onLogout }
titleKey = { t('dialog.logoutTitle') }
width = { 'small' }>
<div>
{ t('dialog.logoutQuestion') }
</div>
</Dialog>
);
}
export default translate(connect()(LogoutDialog));

38
react/features/settings/components/web/LogoutDialog.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
/**
* The type of {@link LogoutDialog}'s React {@code Component} props.
*/
interface Props extends WithTranslation {
/**
* Logout handler.
*/
onLogout: () => void;
}
/**
* Implements the Logout dialog.
*
* @param {Object} props - The props of the component.
* @returns {React$Element}.
*/
function LogoutDialog({ onLogout, t }: Props) {
return (
<Dialog
ok = {{ translationKey: 'dialog.Yes' }}
onSubmit = { onLogout }
titleKey = { t('dialog.logoutTitle') }>
<div>
{ t('dialog.logoutQuestion') }
</div>
</Dialog>
);
}
export default translate(connect()(LogoutDialog));