apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Convert some files to TS
Improve Dialog component
pull/12395/head
Robert Pintilii 3 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      react/features/authentication/components/web/LoginDialog.tsx
  2. 41
      react/features/authentication/components/web/WaitForOwnerDialog.tsx
  3. 9
      react/features/base/dialog/middleware.web.ts
  4. 37
      react/features/base/ui/components/web/Dialog.tsx
  5. 99
      react/features/desktop-picker/components/DesktopPicker.tsx
  6. 8
      react/features/remote-control/components/RemoteControlAuthorizationDialog.js
  7. 6
      react/features/salesforce/components/web/SalesforceLinkDialog.tsx
  8. 48
      react/features/settings/components/web/LogoutDialog.js
  9. 38
      react/features/settings/components/web/LogoutDialog.tsx

25
react/features/authentication/components/web/LoginDialog.tsx
Unescape 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
|| loginStarted
|| !password
|| !username
}
okKey = { t('dialog.login') }
disableBackdropClose = { true }
hideCloseButton = { true }
ok = {{
disabled: connecting
|| loginStarted
|| !password
|| !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 }

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

@ -1,32 +1,28 @@
// @flow
import React, { PureComponent } from 'react';
import type { Dispatch } from 'redux';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import { WithTranslation } from 'react-i18next';
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
Unescape 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);

37
react/features/base/ui/components/web/Dialog.tsx
Unescape 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,16 +218,23 @@ const Dialog = ({
dispatch(hideDialog());
}, [ onCancel ]);
const submit = useCallback(() => {
onSubmit?.();
dispatch(hideDialog());
}, [ onSubmit ]);
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
if (e.key === 'Enter') {
submit();
}
}, []);
const submit = useCallback(() => {
onSubmit?.();
dispatch(hideDialog());
}, [ onSubmit ]);
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>
<ClickableIcon
accessibilityLabel = { t('dialog.close') }
icon = { IconClose }
id = 'modal-header-close-button'
onClick = { onClose } />
{!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 }>

99
react/features/desktop-picker/components/DesktopPicker.js → react/features/desktop-picker/components/DesktopPicker.tsx
Unescape 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 { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';
import { WithTranslation } from 'react-i18next';
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
Unescape 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
Unescape 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
Unescape 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
Unescape 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));
Write Preview
Loading…
Cancel
Save