From debb63d3d6c177ec75534a7f4d967995829defdc Mon Sep 17 00:00:00 2001 From: Calinteodor Date: Thu, 3 Feb 2022 17:45:02 +0200 Subject: [PATCH] feat(dialog) added react-native-dialog dep and updated ConfirmDialog --- package-lock.json | 14 ++ package.json | 1 + .../components/native/WaitForOwnerDialog.js | 6 +- .../dialog/components/functions.native.js | 57 +++++ .../dialog/components/native/AlertDialog.js | 5 +- .../dialog/components/native/BaseDialog.js | 53 ---- .../components/native/BaseSubmitDialog.js | 2 - .../dialog/components/native/ConfirmDialog.js | 234 +++++++++++------- .../base/dialog/components/native/styles.js | 12 + .../UpdateCalendarEventDialog.native.js | 9 +- .../components/native/ChatPrivacyDialog.js | 6 +- .../components/native/PageReloadOverlay.js | 43 +--- .../LiveStream/native/StopLiveStreamDialog.js | 2 +- .../Recording/native/StopRecordingDialog.js | 2 +- .../AbstractBlockAudioVideoDialog.js | 46 ---- .../native/BlockAudioVideoDialog.js | 32 --- .../components/native/GrantModeratorDialog.js | 12 +- .../native/KickRemoteParticipantDialog.js | 8 +- .../components/native/MuteEveryoneDialog.js | 44 ++-- .../native/MuteEveryonesVideoDialog.js | 41 +-- .../MuteRemoteParticipantsVideoDialog.js | 2 +- .../video-menu/components/native/index.js | 1 - .../video-menu/components/native/styles.js | 23 +- 23 files changed, 313 insertions(+), 342 deletions(-) create mode 100644 react/features/base/dialog/components/functions.native.js delete mode 100644 react/features/video-menu/components/AbstractBlockAudioVideoDialog.js delete mode 100644 react/features/video-menu/components/native/BlockAudioVideoDialog.js diff --git a/package-lock.json b/package-lock.json index 04d098e76..211e3c397 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,6 +88,7 @@ "react-native-collapsible": "1.6.0", "react-native-default-preference": "github:kevinresol/react-native-default-preference#11bff5eb05cb04fd8d35b5e761eeee80525e8c6c", "react-native-device-info": "8.4.8", + "react-native-dialog": "9.2.0", "react-native-gesture-handler": "2.1.0", "react-native-get-random-values": "1.7.2", "react-native-immersive": "2.0.0", @@ -15080,6 +15081,14 @@ "react-native": "*" } }, + "node_modules/react-native-dialog": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.0.tgz", + "integrity": "sha512-VXdfo+bAi9ER7+w4aKOWypw8K97C2orvnfnxX4Lup/U8iQB/635V00hgfHEE3s0XScQHftXxm34Fa4iIIjojQA==", + "peerDependencies": { + "react-native": ">=0.63.0" + } + }, "node_modules/react-native-gesture-handler": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.0.tgz", @@ -31586,6 +31595,11 @@ "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-8.4.8.tgz", "integrity": "sha512-92676ZWHZHsPM/EW1ulgb2MuVfjYfMWRTWMbLcrCsipkcMaZ9Traz5mpsnCS7KZpsOksnvUinzDIjsct2XGc6Q==" }, + "react-native-dialog": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.0.tgz", + "integrity": "sha512-VXdfo+bAi9ER7+w4aKOWypw8K97C2orvnfnxX4Lup/U8iQB/635V00hgfHEE3s0XScQHftXxm34Fa4iIIjojQA==" + }, "react-native-gesture-handler": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.0.tgz", diff --git a/package.json b/package.json index 8e1d7c602..9bae10b0d 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "react-native-collapsible": "1.6.0", "react-native-default-preference": "github:kevinresol/react-native-default-preference#11bff5eb05cb04fd8d35b5e761eeee80525e8c6c", "react-native-device-info": "8.4.8", + "react-native-dialog": "9.2.0", "react-native-gesture-handler": "2.1.0", "react-native-get-random-values": "1.7.2", "react-native-immersive": "2.0.0", diff --git a/react/features/authentication/components/native/WaitForOwnerDialog.js b/react/features/authentication/components/native/WaitForOwnerDialog.js index 4e618f635..91ed328b6 100644 --- a/react/features/authentication/components/native/WaitForOwnerDialog.js +++ b/react/features/authentication/components/native/WaitForOwnerDialog.js @@ -63,14 +63,14 @@ class WaitForOwnerDialog extends Component { return ( ); diff --git a/react/features/base/dialog/components/functions.native.js b/react/features/base/dialog/components/functions.native.js new file mode 100644 index 000000000..4780af188 --- /dev/null +++ b/react/features/base/dialog/components/functions.native.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { Text } from 'react-native'; + +import { brandedDialog as styles } from './native'; + +/** + * Renders a specific {@code string} which may contain HTML. + * + * @param {string|undefined} html - The {@code string} which may + * contain HTML to render. + * @returns {ReactElement[]|string} + */ +export function renderHTML(html) { + if (typeof html === 'string') { + // At the time of this writing, the specified HTML contains a couple + // of spaces one after the other. They do not cause a visible + // problem on Web, because the specified HTML is rendered as, well, + // HTML. However, we're not rendering HTML here. + + // eslint-disable-next-line no-param-reassign + html = html.replace(/\s{2,}/gi, ' '); + + // Render text in text in bold. + const opening = /<\s*b\s*>/gi; + const closing = /<\s*\/\s*b\s*>/gi; + let o; + let c; + let prevClosingLastIndex = 0; + const r = []; + + // eslint-disable-next-line no-cond-assign + while (o = opening.exec(html)) { + closing.lastIndex = opening.lastIndex; + + // eslint-disable-next-line no-cond-assign + if (c = closing.exec(html)) { + r.push(html.substring(prevClosingLastIndex, o.index)); + r.push( + + { html.substring(opening.lastIndex, c.index) } + ); + opening.lastIndex + = prevClosingLastIndex + = closing.lastIndex; + } else { + break; + } + } + if (prevClosingLastIndex < html.length) { + r.push(html.substring(prevClosingLastIndex)); + } + + return r; + } + + return html; +} diff --git a/react/features/base/dialog/components/native/AlertDialog.js b/react/features/base/dialog/components/native/AlertDialog.js index c75a073f9..fc0d0556b 100644 --- a/react/features/base/dialog/components/native/AlertDialog.js +++ b/react/features/base/dialog/components/native/AlertDialog.js @@ -6,6 +6,7 @@ import { Text } from 'react-native'; import { translate } from '../../../i18n'; import { connect } from '../../../redux'; import { _abstractMapStateToProps } from '../../functions'; +import { renderHTML } from '../functions.native'; import { type Props as AbstractProps } from './BaseDialog'; import BaseSubmitDialog from './BaseSubmitDialog'; @@ -36,7 +37,7 @@ class AlertDialog extends BaseSubmitDialog { const content = typeof contentKey === 'string' ? t(contentKey) - : this._renderHTML(t(contentKey.key, contentKey.params)); + : renderHTML(t(contentKey.key, contentKey.params)); return ( @@ -44,8 +45,6 @@ class AlertDialog extends BaseSubmitDialog { ); } - - _renderHTML: string => Object | string; } export default translate(connect(_abstractMapStateToProps)(AlertDialog)); diff --git a/react/features/base/dialog/components/native/BaseDialog.js b/react/features/base/dialog/components/native/BaseDialog.js index 5356feb9a..34c6ce105 100644 --- a/react/features/base/dialog/components/native/BaseDialog.js +++ b/react/features/base/dialog/components/native/BaseDialog.js @@ -94,59 +94,6 @@ class BaseDialog extends AbstractDialog { * @returns {ReactElement} */ _renderContent: () => Object; - - /** - * Renders a specific {@code string} which may contain HTML. - * - * @param {string|undefined} html - The {@code string} which may - * contain HTML to render. - * @returns {ReactElement[]|string} - */ - _renderHTML(html: ?string) { - if (typeof html === 'string') { - // At the time of this writing, the specified HTML contains a couple - // of spaces one after the other. They do not cause a visible - // problem on Web, because the specified HTML is rendered as, well, - // HTML. However, we're not rendering HTML here. - - // eslint-disable-next-line no-param-reassign - html = html.replace(/\s{2,}/gi, ' '); - - // Render text in text in bold. - const opening = /<\s*b\s*>/gi; - const closing = /<\s*\/\s*b\s*>/gi; - let o; - let c; - let prevClosingLastIndex = 0; - const r = []; - - // eslint-disable-next-line no-cond-assign - while (o = opening.exec(html)) { - closing.lastIndex = opening.lastIndex; - - // eslint-disable-next-line no-cond-assign - if (c = closing.exec(html)) { - r.push(html.substring(prevClosingLastIndex, o.index)); - r.push( - - { html.substring(opening.lastIndex, c.index) } - ); - opening.lastIndex - = prevClosingLastIndex - = closing.lastIndex; - } else { - break; - } - } - if (prevClosingLastIndex < html.length) { - r.push(html.substring(prevClosingLastIndex)); - } - - return r; - } - - return html; - } } export default BaseDialog; diff --git a/react/features/base/dialog/components/native/BaseSubmitDialog.js b/react/features/base/dialog/components/native/BaseSubmitDialog.js index cd94d262c..d07036e44 100644 --- a/react/features/base/dialog/components/native/BaseSubmitDialog.js +++ b/react/features/base/dialog/components/native/BaseSubmitDialog.js @@ -84,8 +84,6 @@ class BaseSubmitDialog extends BaseDialog { _onSubmit: () => boolean; - _renderHTML: string => Object | string; - /** . * Renders the actual content of the dialog defining what is about to be * submitted. E.g. A simple confirmation (text, properly wrapped) or a diff --git a/react/features/base/dialog/components/native/ConfirmDialog.js b/react/features/base/dialog/components/native/ConfirmDialog.js index 98ba5d2a4..3d96974e1 100644 --- a/react/features/base/dialog/components/native/ConfirmDialog.js +++ b/react/features/base/dialog/components/native/ConfirmDialog.js @@ -1,107 +1,165 @@ // @flow import React from 'react'; -import { Text, TouchableOpacity } from 'react-native'; +import { Platform, View } from 'react-native'; +import Dialog from 'react-native-dialog'; import { translate } from '../../../i18n'; import { connect } from '../../../redux'; -import { StyleType } from '../../../styles'; -import { _abstractMapStateToProps } from '../../functions'; +import AbstractDialog from '../AbstractDialog'; +import { renderHTML } from '../functions.native'; -import { type Props as BaseProps } from './BaseDialog'; -import BaseSubmitDialog from './BaseSubmitDialog'; -import { brandedDialog } from './styles'; +import styles from './styles'; -type Props = BaseProps & { - - /** - * The color-schemed stylesheet of the feature. - */ - _dialogStyles: StyleType, - - /** - * Untranslated i18n key of the content to be displayed. - * - * NOTE: This dialog also adds support to Object type keys that will be - * translated using the provided params. See i18n function - * {@code translate(string, Object)} for more details. - */ - contentKey: string | { key: string, params: Object}, - - /** - * The handler for the event when clicking the 'confirmNo' button. - * Defaults to onCancel if absent. - */ - onDecline?: Function, - - t: Function -} /** - * Implements a confirm dialog component. + * The type of the React {@code Component} props of + * {@link ConfirmDialog}. */ -class ConfirmDialog extends BaseSubmitDialog { +type Props = { + /** - * Returns the title key of the submit button. - * - * @returns {string} + * The i18n key of the text label for the cancel button. */ - _getSubmitButtonKey() { - return this.props.okKey || 'dialog.confirmYes'; + cancelLabel: string, + + /** + * The React {@code Component} children. + */ + children?: React$Node, + + /** + * The i18n key of the text label for the confirm button. + */ + confirmLabel: string, + + /** + * Dialog description key for translations. + */ + descriptionKey?: string | Object, + + /** + * Whether or not the nature of the confirm button is destructive. + */ + isConfirmDestructive?: Boolean, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * Dialog title. + */ + title?: string, +}; + +/** + * React Component for getting confirmation to stop a file recording session in + * progress. + * + * @augments Component + */ +class ConfirmDialog extends AbstractDialog { + /** + * Default values for {@code ConfirmDialog} component's properties. + * + * @static + */ + static defaultProps = { + isConfirmDestructive: false + }; + + /** + * Renders the dialog description. + * + * @returns {React$Component} + */ + _renderDescription() { + const { descriptionKey, t } = this.props; + const description + = typeof descriptionKey === 'string' + ? t(descriptionKey) + : renderHTML( + t(descriptionKey?.key, descriptionKey?.params) + ); + + return ( + + { description } + + ); + } + + /** + * Implements {@code Component#render}. + * + * @inheritdoc + */ + render() { + const { + cancelLabel, + children, + confirmLabel, + isConfirmDestructive, + t, + title + } = this.props; + + const dialogButtonStyle + = isConfirmDestructive + ? styles.destructiveDialogButton : styles.dialogButton; + + let rightLabel; + let leftLabel; + let rightOnPress; + let leftOnPress; + let rightStyle; + let leftStyle; + + if (Platform.OS === 'android') { + rightLabel = confirmLabel || 'dialog.confirmYes'; + rightOnPress = () => this._onSubmit(); + rightStyle = dialogButtonStyle; + leftLabel = cancelLabel || 'dialog.confirmNo'; + leftOnPress = () => this._onCancel(); + leftStyle = styles.dialogButton; + } else { + rightLabel = cancelLabel || 'dialog.confirmNo'; + rightOnPress = () => this._onCancel(); + rightStyle = styles.dialogButton; + leftLabel = confirmLabel || 'dialog.confirmYes'; + leftOnPress = () => this._onSubmit(); + leftStyle = dialogButtonStyle; + } + + return ( + + + { + title && + { t(title) } + + } + { this._renderDescription() } + { children } + + + + + ); } _onCancel: () => void; - /** - * Renders the 'No' button. - * - * NOTE: The {@code ConfirmDialog} is the only dialog right now that - * renders 2 buttons, mainly for clarity. - * - * @inheritdoc - */ - _renderAdditionalButtons() { - const { _dialogStyles, cancelKey, onDecline, t } = this.props; - - return ( - - - { t(cancelKey || 'dialog.confirmNo') } - - - ); - } - - /** - * Implements {@code BaseSubmitDialog._renderSubmittable}. - * - * @inheritdoc - */ - _renderSubmittable() { - if (this.props.children) { - return this.props.children; - } - - const { _dialogStyles, contentKey, t } = this.props; - const content - = typeof contentKey === 'string' - ? t(contentKey) - : this._renderHTML(t(contentKey.key, contentKey.params)); - - return ( - - { content } - - ); - } - - _renderHTML: string => Object | string; + _onSubmit: (?string) => void; } -export default translate(connect(_abstractMapStateToProps)(ConfirmDialog)); +export default translate(connect()(ConfirmDialog)); diff --git a/react/features/base/dialog/components/native/styles.js b/react/features/base/dialog/components/native/styles.js index 69bfbde5a..8e9bf109e 100644 --- a/react/features/base/dialog/components/native/styles.js +++ b/react/features/base/dialog/components/native/styles.js @@ -56,6 +56,18 @@ export const bottomSheetStyles = { } }; +export default { + + dialogButton: { + ...BaseTheme.typography.labelButton + }, + + destructiveDialogButton: { + ...BaseTheme.typography.labelButton, + color: BaseTheme.palette.actionDanger + } +}; + export const brandedDialog = { /** diff --git a/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js b/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js index 029dbbfa5..a1bf4b132 100644 --- a/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js +++ b/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js @@ -17,12 +17,7 @@ type Props = { /** * The ID of the event to be updated. */ - eventId: string, - - /** - * Function to translate i18n labels. - */ - t: Function + eventId: string }; /** @@ -49,7 +44,7 @@ class UpdateCalendarEventDialog extends Component { render() { return ( ); } diff --git a/react/features/chat/components/native/ChatPrivacyDialog.js b/react/features/chat/components/native/ChatPrivacyDialog.js index 54915d7be..77f43a191 100644 --- a/react/features/chat/components/native/ChatPrivacyDialog.js +++ b/react/features/chat/components/native/ChatPrivacyDialog.js @@ -20,9 +20,9 @@ class ChatPrivacyDialog extends AbstractChatPrivacyDialog { render() { return ( ); diff --git a/react/features/overlay/components/native/PageReloadOverlay.js b/react/features/overlay/components/native/PageReloadOverlay.js index 41994ef58..53e48c3ac 100644 --- a/react/features/overlay/components/native/PageReloadOverlay.js +++ b/react/features/overlay/components/native/PageReloadOverlay.js @@ -1,29 +1,19 @@ // @flow import React from 'react'; -import { Text } from 'react-native'; import { appNavigate, reloadNow } from '../../../app/actions'; -import { ColorSchemeRegistry } from '../../../base/color-scheme'; import { ConfirmDialog } from '../../../base/dialog'; import { translate } from '../../../base/i18n'; import { connect } from '../../../base/redux'; -import { StyleType } from '../../../base/styles'; import { setFatalError, setPageReloadOverlayCanceled } from '../../actions'; import AbstractPageReloadOverlay, { abstractMapStateToProps, - type Props as AbstractProps + type Props } from '../AbstractPageReloadOverlay'; import OverlayFrame from './OverlayFrame'; -type Props = AbstractProps & { - - /** - * The color-schemed stylesheet of the base/dialog feature. - */ - _dialogStyles: StyleType -} /** * Implements a React Component for page reload overlay. Shown before the @@ -85,38 +75,21 @@ class PageReloadOverlay extends AbstractPageReloadOverlay { * @returns {ReactElement} */ render() { - const { _dialogStyles, t } = this.props; + const { t } = this.props; const { message, timeLeft, title } = this.state; return ( - - { `${t(title)} ${t(message, { seconds: timeLeft })}` } - - + onSubmit = { this._onReloadNow } + title = { title } /> ); } } -/** - * Maps part of the Redux state to the props of this component. - * - * @param {Object} state - The Redux state. - * @returns {{ - * _dialogStyles: StyleType - * }} - */ -function _mapStateToProps(state) { - return { - ...abstractMapStateToProps(state), - _dialogStyles: ColorSchemeRegistry.get(state, 'Dialog') - }; -} - -export default translate(connect(_mapStateToProps)(PageReloadOverlay)); +export default translate(connect(abstractMapStateToProps)(PageReloadOverlay)); diff --git a/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js b/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js index 53386d277..9175e88af 100644 --- a/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js +++ b/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js @@ -26,7 +26,7 @@ class StopLiveStreamDialog extends AbstractStopLiveStreamDialog { render() { return ( ); } diff --git a/react/features/recording/components/Recording/native/StopRecordingDialog.js b/react/features/recording/components/Recording/native/StopRecordingDialog.js index fcbb82b2f..a62c94292 100644 --- a/react/features/recording/components/Recording/native/StopRecordingDialog.js +++ b/react/features/recording/components/Recording/native/StopRecordingDialog.js @@ -26,7 +26,7 @@ class StopRecordingDialog extends AbstractStopRecordingDialog { render() { return ( ); } diff --git a/react/features/video-menu/components/AbstractBlockAudioVideoDialog.js b/react/features/video-menu/components/AbstractBlockAudioVideoDialog.js deleted file mode 100644 index 28ae74fbf..000000000 --- a/react/features/video-menu/components/AbstractBlockAudioVideoDialog.js +++ /dev/null @@ -1,46 +0,0 @@ -// @flow - -import { Component } from 'react'; - -type Props = { - - /** - * The Redux dispatch function. - */ - dispatch: Function, - - /** - * Function to translate i18n labels. - */ - t: Function -}; - -/** - * Abstract dialog to confirm blocking mic and camera for all participants. - */ -export default class AbstractBlockAudioVideoDialog - extends Component { - /** - * Initializes a new {@code AbstractBlockAudioVideoDialog} instance. - * - * @inheritdoc - */ - constructor(props: Props) { - super(props); - - this._onSubmit = this._onSubmit.bind(this); - } - - _onSubmit: () => boolean; - - /** - * Callback for the confirm button. - * - * @private - * @returns {boolean} - True (to note that the modal should be closed). - */ - _onSubmit() { - - return true; - } -} diff --git a/react/features/video-menu/components/native/BlockAudioVideoDialog.js b/react/features/video-menu/components/native/BlockAudioVideoDialog.js deleted file mode 100644 index 6b374252a..000000000 --- a/react/features/video-menu/components/native/BlockAudioVideoDialog.js +++ /dev/null @@ -1,32 +0,0 @@ -// @flow - -import React from 'react'; - -import { ConfirmDialog } from '../../../base/dialog'; -import { translate } from '../../../base/i18n'; -import { connect } from '../../../base/redux'; -import AbstractBlockAudioVideoDialog - from '../AbstractBlockAudioVideoDialog'; - -/** - * Dialog to confirm a remote participant kick action. - */ -class BlockAudioVideoDialog extends AbstractBlockAudioVideoDialog { - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - return ( - - ); - } - - _onSubmit: () => boolean; -} - -export default translate(connect()(BlockAudioVideoDialog)); diff --git a/react/features/video-menu/components/native/GrantModeratorDialog.js b/react/features/video-menu/components/native/GrantModeratorDialog.js index c0ba0e864..677b41e3e 100644 --- a/react/features/video-menu/components/native/GrantModeratorDialog.js +++ b/react/features/video-menu/components/native/GrantModeratorDialog.js @@ -1,7 +1,6 @@ // @flow import React from 'react'; -import { Text } from 'react-native'; import { ConfirmDialog } from '../../../base/dialog'; import { translate } from '../../../base/i18n'; @@ -22,12 +21,11 @@ class GrantModeratorDialog extends AbstractGrantModeratorDialog { render() { return ( - - {`${this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName })}`} - - + descriptionKey = { + `${this.props.t('dialog.grantModeratorDialog', + { participantName: this.props.participantName })}` + } + onSubmit = { this._onSubmit } /> ); } diff --git a/react/features/video-menu/components/native/KickRemoteParticipantDialog.js b/react/features/video-menu/components/native/KickRemoteParticipantDialog.js index 65a88ce52..64503e588 100644 --- a/react/features/video-menu/components/native/KickRemoteParticipantDialog.js +++ b/react/features/video-menu/components/native/KickRemoteParticipantDialog.js @@ -21,8 +21,12 @@ class KickRemoteParticipantDialog extends AbstractKickRemoteParticipantDialog { render() { return ( + cancelLabel = 'dialog.Cancel' + confirmLabel = 'dialog.kickParticipantButton' + descriptionKey = 'dialog.kickParticipantDialog' + isConfirmDestructive = { true } + onSubmit = { this._onSubmit } + title = 'dialog.kickParticipantTitle' /> ); } diff --git a/react/features/video-menu/components/native/MuteEveryoneDialog.js b/react/features/video-menu/components/native/MuteEveryoneDialog.js index 8115a86ee..595a06e34 100644 --- a/react/features/video-menu/components/native/MuteEveryoneDialog.js +++ b/react/features/video-menu/components/native/MuteEveryoneDialog.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; -import { Text, View, Switch } from 'react-native'; +import Dialog from 'react-native-dialog'; import { Divider } from 'react-native-paper'; import { ColorSchemeRegistry } from '../../../base/color-scheme'; @@ -15,6 +15,7 @@ import AbstractMuteEveryoneDialog, { import styles from './styles'; + type Props = AbstractProps & { /** @@ -31,6 +32,21 @@ type Props = AbstractProps & { */ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog { + /** + * Renders the dialog switch. + * + * @returns {React$Component} + */ + _renderSwitch() { + return ( + this.props.exclude.length === 0 + && + ); + } + /** * Toggles advanced moderation switch. * @@ -55,26 +71,12 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog { render() { return ( - - { `${this.props.title} \n\n ${this.state.content}` } - - {this.props.exclude.length === 0 && <> - - - - {this.props.t('dialog.moderationAudioLabel')} - - - - } + confirmLabel = 'dialog.muteParticipantButton' + descriptionKey = { this.state.content } + onSubmit = { this._onSubmit } + title = { this.props.title } > + + { this._renderSwitch() } ); } diff --git a/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js b/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js index ac82cd4a0..1e8dc88e0 100644 --- a/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js +++ b/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; -import { Switch, Text, View } from 'react-native'; +import Dialog from 'react-native-dialog'; import { Divider } from 'react-native-paper'; import { ColorSchemeRegistry } from '../../../base/color-scheme'; @@ -31,6 +31,21 @@ type Props = AbstractProps & { */ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog { + /** + * Renders the dialog switch. + * + * @returns {React$Component} + */ + _renderSwitch() { + return ( + this.props.exclude.length === 0 + && + ); + } + /** * Toggles advanced moderation switch. * @@ -55,24 +70,12 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog { render() { return ( - - { `${this.props.title} \n\n ${this.state.content}` } - - {this.props.exclude.length === 0 && <> - - - - {this.props.t('dialog.moderationVideoLabel')} - - - - } + confirmLabel = 'dialog.muteEveryonesVideoDialogOk' + descriptionKey = { this.state.content } + onSubmit = { this._onSubmit } + title = { this.props.title }> + + { this._renderSwitch() } ); } diff --git a/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js b/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js index 68c6c22a8..319b8ba54 100644 --- a/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js +++ b/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js @@ -22,7 +22,7 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi render() { return (