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

feat(settings) removed openTwoButtonDialog from UI module and created react LogoutDialog component

This commit is contained in:
Calin Chitu 2021-04-23 18:00:51 +03:00 committed by Saúl Ibarra Corretgé
parent 02ec30b8ff
commit 546df558e3
5 changed files with 65 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
modules/UI/util/MessageHandler.js
View File

@ -1,8 +1,5 @@
/* global $, APP */
import { jitsiLocalStorage } from '@jitsi/js-utils';
import Logger from 'jitsi-meet-logger';
import {
NOTIFICATION_TIMEOUT,
showErrorNotification,
@ -10,223 +7,10 @@ import {
showWarningNotification
} from '../../../react/features/notifications';
const logger = Logger.getLogger(__filename);
/**
* Currently displayed two button dialog.
* @type {null}
*/
let twoButtonDialog = null;
/**
* Generates html for dont show again checkbox.
* @param {object} options options
* @param {string} options.id the id of the checkbox.
* @param {string} options.textKey the key for the text displayed next to
* checkbox
* @param {boolean} options.checked if true the checkbox is foing to be checked
* by default.
* @returns {string}
*/
function generateDontShowCheckbox(options) {
if (!isDontShowAgainEnabled(options)) {
return '';
}
const checked
= options.checked === true ? 'checked' : '';
return `<br />
<label>
<input type='checkbox' ${checked} id='${options.id}' />
<span data-i18n='${options.textKey}'></span>
</label>`;
}
/**
* Checks whether the dont show again checkbox was checked before.
* @param {object} options - options for dont show again checkbox.
* @param {string} options.id the id of the checkbox.
* @param {string} options.localStorageKey the key for the local storage. if
* not provided options.id will be used.
* @returns {boolean} true if the dialog mustn't be displayed and
* false otherwise.
*/
function dontShowTheDialog(options) {
if (isDontShowAgainEnabled(options)) {
if (jitsiLocalStorage.getItem(options.localStorageKey || options.id)
=== 'true') {
return true;
}
}
return false;
}
/**
* Wraps the submit function to process the dont show again status and store
* it.
* @param {object} options - options for dont show again checkbox.
* @param {string} options.id the id of the checkbox.
* @param {Array} options.buttonValues The button values that will trigger
* storing he checkbox value
* @param {string} options.localStorageKey the key for the local storage. if
* not provided options.id will be used.
* @param {Function} submitFunction the submit function to be wrapped
* @returns {Function} wrapped function
*/
function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
if (isDontShowAgainEnabled(options)) {
return (...args) => {
logger.debug(args, options.buttonValues);
// args[1] is the value associated with the pressed button
if (!options.buttonValues || options.buttonValues.length === 0
|| options.buttonValues.indexOf(args[1]) !== -1) {
const checkbox = $(`#${options.id}`);
if (checkbox.length) {
jitsiLocalStorage.setItem(
options.localStorageKey || options.id,
checkbox.prop('checked'));
}
}
submitFunction(...args);
};
}
return submitFunction;
}
/**
* Check whether dont show again checkbox is enabled or not.
* @param {object} options - options for dont show again checkbox.
* @returns {boolean} true if enabled and false if not.
*/
function isDontShowAgainEnabled(options) {
return typeof options === 'object';
}
const messageHandler = {
OK: 'dialog.OK',
CANCEL: 'dialog.Cancel',
/**
* Shows a message to the user with two buttons: first is given as a
* parameter and the second is Cancel.
*
* @param titleKey the key for the title of the message
* @param msgKey the key for the message
* @param msgString the text of the message
* @param persistent boolean value which determines whether the message is
* persistent or not
* @param leftButton the fist button's text
* @param submitFunction function to be called on submit
* @param loadedFunction function to be called after the prompt is fully
* loaded
* @param closeFunction function to be called after the prompt is closed
* @param focus optional focus selector or button index to be focused after
* the dialog is opened
* @param defaultButton index of default button which will be activated when
* the user press 'enter'. Indexed from 0.
* @param {object} dontShowAgain - options for dont show again checkbox.
* @param {string} dontShowAgain.id the id of the checkbox.
* @param {string} dontShowAgain.textKey the key for the text displayed
* next to checkbox
* @param {boolean} dontShowAgain.checked if true the checkbox is foing to
* be checked
* @param {Array} dontShowAgain.buttonValues The button values that will
* trigger storing the checkbox value
* @param {string} dontShowAgain.localStorageKey the key for the local
* storage. if not provided dontShowAgain.id will be used.
* @return the prompt that was created, or null
*/
openTwoButtonDialog(options) {
const {
titleKey,
msgKey,
msgString,
leftButtonKey,
submitFunction,
loadedFunction,
closeFunction,
focus,
size,
defaultButton,
wrapperClass,
dontShowAgain
} = options;
let { classes } = options;
if (twoButtonDialog) {
return null;
}
if (dontShowTheDialog(dontShowAgain)) {
// Maybe we should pass some parameters here? I'm not sure
// and currently we don't need any parameters.
submitFunction();
return null;
}
const buttons = [];
const leftButton = leftButtonKey
? APP.translation.generateTranslationHTML(leftButtonKey)
: APP.translation.generateTranslationHTML('dialog.Submit');
buttons.push({ title: leftButton,
value: true });
const cancelButton
= APP.translation.generateTranslationHTML('dialog.Cancel');
buttons.push({ title: cancelButton,
value: false });
let message = msgString;
if (msgKey) {
message = APP.translation.generateTranslationHTML(msgKey);
}
message += generateDontShowCheckbox(dontShowAgain);
classes = classes || this._getDialogClasses(size);
if (wrapperClass) {
classes.prompt += ` ${wrapperClass}`;
}
twoButtonDialog = $.prompt(message, {
title: this._getFormattedTitleString(titleKey),
persistent: false,
buttons,
defaultButton,
focus,
loaded: loadedFunction,
promptspeed: 0,
classes,
submit: dontShowAgainSubmitFunctionWrapper(dontShowAgain,
(e, v, m, f) => { // eslint-disable-line max-params
twoButtonDialog = null;
if (v && submitFunction) {
submitFunction(e, v, m, f);
}
}),
close(e, v, m, f) { // eslint-disable-line max-params
twoButtonDialog = null;
if (closeFunction) {
closeFunction(e, v, m, f);
}
}
});
APP.translation.translateElement(twoButtonDialog);
return $.prompt.getApi();
},
/**
* Returns the formatted title string.
*

13
react/features/settings/actions.js
View File

@ -10,11 +10,22 @@ import {
SET_AUDIO_SETTINGS_VISIBILITY,
SET_VIDEO_SETTINGS_VISIBILITY
} from './actionTypes';
import { SettingsDialog } from './components';
import { LogoutDialog, SettingsDialog } from './components';
import { getMoreTabProps, getProfileTabProps } from './functions';
declare var APP: Object;
/**
* Opens {@code LogoutDialog}.
*
* @param {Function} onLogout - The event in {@code LogoutDialog} that should be
* enabled on click.
* @returns {Function}
*/
export function openLogoutDialog(onLogout: Function) {
return openDialog(LogoutDialog, { onLogout });
}
/**
* Opens {@code SettingsDialog}.
*

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

@ -0,0 +1,48 @@
// @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));

16
react/features/settings/components/web/ProfileTab.js
View File

@ -12,6 +12,7 @@ import {
import { AbstractDialogTab } from '../../../base/dialog';
import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { openLogoutDialog } from '../../actions';
declare var APP: Object;
@ -138,23 +139,14 @@ class ProfileTab extends AbstractDialogTab<Props> {
if (this.props.authLogin) {
sendAnalytics(createProfilePanelButtonEvent('logout.button'));
APP.UI.messageHandler.openTwoButtonDialog({
leftButtonKey: 'dialog.Yes',
msgKey: 'dialog.logoutQuestion',
submitFunction(evt, yes) {
if (yes) {
APP.UI.emitEvent(UIEvents.LOGOUT);
}
},
titleKey: 'dialog.logoutTitle'
});
APP.store.dispatch(openLogoutDialog(
() => APP.UI.emitEvent(UIEvents.LOGOUT)
));
} else {
sendAnalytics(createProfilePanelButtonEvent('login.button'));
APP.UI.emitEvent(UIEvents.AUTH_CLICKED);
}
this.props.closeDialog();
}
/**

1
react/features/settings/components/web/index.js
View File

@ -1,3 +1,4 @@
export { default as LogoutDialog } from './LogoutDialog';
export { default as SettingsButton } from './SettingsButton';
export { default as SettingsDialog } from './SettingsDialog';
export { default as AudioSettingsPopup } from './audio/AudioSettingsPopup';