165 lines
4.1 KiB
JavaScript
165 lines
4.1 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
import { Platform, View } from 'react-native';
|
|
import Dialog from 'react-native-dialog';
|
|
|
|
import { translate } from '../../../i18n';
|
|
import { connect } from '../../../redux';
|
|
import AbstractDialog from '../AbstractDialog';
|
|
import { renderHTML } from '../functions.native';
|
|
|
|
import styles from './styles';
|
|
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of
|
|
* {@link ConfirmDialog}.
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* The i18n key of the text label for the cancel button.
|
|
*/
|
|
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<Props> {
|
|
/**
|
|
* 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 (
|
|
<Dialog.Description>
|
|
{ description }
|
|
</Dialog.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 (
|
|
<View>
|
|
<Dialog.Container visible = { true }>
|
|
{
|
|
title && <Dialog.Title>
|
|
{ t(title) }
|
|
</Dialog.Title>
|
|
}
|
|
{ this._renderDescription() }
|
|
{ children }
|
|
<Dialog.Button
|
|
label = { t(rightLabel) }
|
|
onPress = { rightOnPress }
|
|
style = { rightStyle } />
|
|
<Dialog.Button
|
|
label = { t(leftLabel) }
|
|
onPress = { leftOnPress }
|
|
style = { leftStyle } />
|
|
</Dialog.Container>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
_onCancel: () => void;
|
|
|
|
_onSubmit: (?string) => void;
|
|
}
|
|
|
|
export default translate(connect()(ConfirmDialog));
|