[RN] Replace red screen with dialog
This commit is contained in:
parent
ebdcbe122a
commit
98c7430b6f
|
@ -43,7 +43,7 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
_getSubmitButtonKey() {
|
_getSubmitButtonKey() {
|
||||||
return 'dialog.confirmYes';
|
return this.props.okKey || 'dialog.confirmYes';
|
||||||
}
|
}
|
||||||
|
|
||||||
_onCancel: () => void;
|
_onCancel: () => void;
|
||||||
|
@ -57,7 +57,7 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
_renderAdditionalButtons() {
|
_renderAdditionalButtons() {
|
||||||
const { _dialogStyles, t } = this.props;
|
const { _dialogStyles, cancelKey, t } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
@ -68,7 +68,7 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
|
||||||
_dialogStyles.buttonSeparator
|
_dialogStyles.buttonSeparator
|
||||||
] }>
|
] }>
|
||||||
<Text style = { _dialogStyles.text }>
|
<Text style = { _dialogStyles.text }>
|
||||||
{ t('dialog.confirmNo') }
|
{ t(cancelKey || 'dialog.confirmNo') }
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
|
@ -80,6 +80,10 @@ class ConfirmDialog extends BaseSubmitDialog<Props, *> {
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
_renderSubmittable() {
|
_renderSubmittable() {
|
||||||
|
if (this.props.children) {
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
|
||||||
const { _dialogStyles, contentKey, t } = this.props;
|
const { _dialogStyles, contentKey, t } = this.props;
|
||||||
const content
|
const content
|
||||||
= typeof contentKey === 'string'
|
= typeof contentKey === 'string'
|
||||||
|
|
|
@ -23,7 +23,7 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
|
||||||
* The type of the React {@code Component} props of
|
* The type of the React {@code Component} props of
|
||||||
* {@link AbstractPageReloadOverlay}.
|
* {@link AbstractPageReloadOverlay}.
|
||||||
*/
|
*/
|
||||||
type Props = {
|
export type Props = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The details is an object containing more information about the connection
|
* The details is an object containing more information about the connection
|
||||||
|
@ -82,8 +82,8 @@ type State = {
|
||||||
/**
|
/**
|
||||||
* Implements an abstract React {@link Component} for the page reload overlays.
|
* Implements an abstract React {@link Component} for the page reload overlays.
|
||||||
*/
|
*/
|
||||||
export default class AbstractPageReloadOverlay
|
export default class AbstractPageReloadOverlay<P: Props>
|
||||||
extends Component<Props, State> {
|
extends Component<P, State> {
|
||||||
/**
|
/**
|
||||||
* Determines whether this overlay needs to be rendered (according to a
|
* Determines whether this overlay needs to be rendered (according to a
|
||||||
* specific redux state). Called by {@link OverlayContainer}.
|
* specific redux state). Called by {@link OverlayContainer}.
|
||||||
|
@ -132,7 +132,7 @@ export default class AbstractPageReloadOverlay
|
||||||
* instance is to be initialized.
|
* instance is to be initialized.
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
constructor(props: Object) {
|
constructor(props: P) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component, type Node } from 'react';
|
import React, { Component, type Node } from 'react';
|
||||||
import { SafeAreaView } from 'react-native';
|
import { SafeAreaView, View } from 'react-native';
|
||||||
|
|
||||||
import { overlayFrame as styles } from './styles';
|
import { overlayFrame as styles } from './styles';
|
||||||
|
|
||||||
|
@ -28,9 +28,11 @@ export default class OverlayFrame extends Component<Props> {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style = { styles.container }>
|
<View style = { styles.container }>
|
||||||
|
<SafeAreaView style = { styles.safeContainer } >
|
||||||
{ this.props.children }
|
{ this.props.children }
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ type Props = {
|
||||||
* Indicates the css style of the overlay. If true, then lighter; darker,
|
* Indicates the css style of the overlay. If true, then lighter; darker,
|
||||||
* otherwise.
|
* otherwise.
|
||||||
*/
|
*/
|
||||||
isLightOverlay: boolean
|
isLightOverlay?: boolean
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,23 +1,38 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Text, View } from 'react-native';
|
import { Text } from 'react-native';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { appNavigate, reloadNow } from '../../app';
|
import { appNavigate, reloadNow } from '../../app';
|
||||||
|
import { ColorSchemeRegistry } from '../../base/color-scheme';
|
||||||
|
import { ConfirmDialog } from '../../base/dialog';
|
||||||
import { translate } from '../../base/i18n';
|
import { translate } from '../../base/i18n';
|
||||||
import { LoadingIndicator } from '../../base/react';
|
import { StyleType } from '../../base/styles';
|
||||||
|
|
||||||
import AbstractPageReloadOverlay, { abstractMapStateToProps }
|
import AbstractPageReloadOverlay, {
|
||||||
from './AbstractPageReloadOverlay';
|
abstractMapStateToProps,
|
||||||
|
type Props as AbstractProps
|
||||||
|
} from './AbstractPageReloadOverlay';
|
||||||
import { setFatalError } from '../actions';
|
import { setFatalError } from '../actions';
|
||||||
import OverlayFrame from './OverlayFrame';
|
import OverlayFrame from './OverlayFrame';
|
||||||
import { pageReloadOverlay as styles } from './styles';
|
|
||||||
|
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
|
* Implements a React Component for page reload overlay. Shown before the
|
||||||
* conference is reloaded. Shows a warning message and counts down towards the
|
* conference is reloaded. Shows a warning message and counts down towards the
|
||||||
* reload.
|
* reload.
|
||||||
*/
|
*/
|
||||||
class PageReloadOverlay extends AbstractPageReloadOverlay {
|
class PageReloadOverlay extends AbstractPageReloadOverlay<Props> {
|
||||||
|
_interval: IntervalID;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes a new PageReloadOverlay instance.
|
* Initializes a new PageReloadOverlay instance.
|
||||||
*
|
*
|
||||||
|
@ -32,6 +47,8 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
|
||||||
this._onReloadNow = this._onReloadNow.bind(this);
|
this._onReloadNow = this._onReloadNow.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_onCancel: () => void
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle clicking of the "Cancel" button. It will navigate back to the
|
* Handle clicking of the "Cancel" button. It will navigate back to the
|
||||||
* welcome page.
|
* welcome page.
|
||||||
|
@ -45,6 +62,8 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
|
||||||
this.props.dispatch(appNavigate(undefined));
|
this.props.dispatch(appNavigate(undefined));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_onReloadNow: () => void
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle clicking on the "Reload Now" button. It will navigate to the same
|
* Handle clicking on the "Reload Now" button. It will navigate to the same
|
||||||
* conference URL as before immediately, without waiting for the timer to
|
* conference URL as before immediately, without waiting for the timer to
|
||||||
|
@ -65,37 +84,38 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
const { _dialogStyles, t } = this.props;
|
||||||
const { message, timeLeft, title } = this.state;
|
const { message, timeLeft, title } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OverlayFrame>
|
<OverlayFrame>
|
||||||
<View style = { styles.container }>
|
<ConfirmDialog
|
||||||
<View style = { styles.loadingIndicator }>
|
cancelKey = 'dialog.Cancel'
|
||||||
<LoadingIndicator />
|
okKey = 'dialog.rejoinNow'
|
||||||
</View>
|
onCancel = { this._onCancel }
|
||||||
<Text style = { styles.title }>
|
onSubmit = { this._onReloadNow }>
|
||||||
{ t(title) }
|
<Text style = { _dialogStyles.text }>
|
||||||
|
{ `${t(title)} ${t(message, { seconds: timeLeft })}` }
|
||||||
</Text>
|
</Text>
|
||||||
<Text style = { styles.message }>
|
</ConfirmDialog>
|
||||||
{ t(message, { seconds: timeLeft }) }
|
|
||||||
</Text>
|
|
||||||
<View style = { styles.buttonBox }>
|
|
||||||
<Text
|
|
||||||
onPress = { this._onReloadNow }
|
|
||||||
style = { styles.button } >
|
|
||||||
{ t('dialog.rejoinNow') }
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
onPress = { this._onCancel }
|
|
||||||
style = { styles.button } >
|
|
||||||
{ t('dialog.Cancel') }
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</OverlayFrame>
|
</OverlayFrame>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));
|
/**
|
||||||
|
* 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));
|
||||||
|
|
|
@ -1,10 +1,14 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { translate } from '../../base/i18n';
|
import { translate } from '../../base/i18n';
|
||||||
|
|
||||||
import AbstractPageReloadOverlay, { abstractMapStateToProps }
|
import AbstractPageReloadOverlay, {
|
||||||
from './AbstractPageReloadOverlay';
|
abstractMapStateToProps,
|
||||||
|
type Props
|
||||||
|
} from './AbstractPageReloadOverlay';
|
||||||
import OverlayFrame from './OverlayFrame';
|
import OverlayFrame from './OverlayFrame';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -12,7 +16,7 @@ import OverlayFrame from './OverlayFrame';
|
||||||
* conference is reloaded. Shows a warning message and counts down towards the
|
* conference is reloaded. Shows a warning message and counts down towards the
|
||||||
* reload.
|
* reload.
|
||||||
*/
|
*/
|
||||||
class PageReloadOverlay extends AbstractPageReloadOverlay {
|
class PageReloadOverlay extends AbstractPageReloadOverlay<Props> {
|
||||||
/**
|
/**
|
||||||
* Implements React's {@link Component#render()}.
|
* Implements React's {@link Component#render()}.
|
||||||
*
|
*
|
||||||
|
@ -39,6 +43,10 @@ class PageReloadOverlay extends AbstractPageReloadOverlay {
|
||||||
</OverlayFrame>
|
</OverlayFrame>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_renderButton: () => React$Element<*>
|
||||||
|
|
||||||
|
_renderProgressBar: () => React$Element<*>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));
|
export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));
|
||||||
|
|
|
@ -1,11 +1,6 @@
|
||||||
import { StyleSheet } from 'react-native';
|
import { StyleSheet } from 'react-native';
|
||||||
|
|
||||||
import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
|
import { ColorPalette, createStyleSheet } from '../../base/styles';
|
||||||
|
|
||||||
/**
|
|
||||||
* The default color of text on overlays.
|
|
||||||
*/
|
|
||||||
const TEXT_COLOR = ColorPalette.white;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The React {@code Component} styles of {@code OverlayFrame}.
|
* The React {@code Component} styles of {@code OverlayFrame}.
|
||||||
|
@ -17,67 +12,10 @@ export const overlayFrame = createStyleSheet({
|
||||||
*/
|
*/
|
||||||
container: {
|
container: {
|
||||||
...StyleSheet.absoluteFillObject,
|
...StyleSheet.absoluteFillObject,
|
||||||
backgroundColor: ColorPalette.red
|
backgroundColor: ColorPalette.black
|
||||||
}
|
},
|
||||||
});
|
|
||||||
|
safeContainer: {
|
||||||
/**
|
flex: 1
|
||||||
* The React {@code Component} styles of {@code PageReloadOverlay}.
|
|
||||||
*/
|
|
||||||
export const pageReloadOverlay = createStyleSheet({
|
|
||||||
/**
|
|
||||||
* Style for the buttons on {@code PageReloadOverlay}.
|
|
||||||
*/
|
|
||||||
button: {
|
|
||||||
color: TEXT_COLOR,
|
|
||||||
fontSize: 20,
|
|
||||||
marginVertical: BoxModel.margin,
|
|
||||||
textAlign: 'center'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style for the "box" surrounding the buttons at the bottom of the page.
|
|
||||||
*/
|
|
||||||
buttonBox: {
|
|
||||||
bottom: BoxModel.margin,
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style for the container of the {@code PageReloadOVerlay}.
|
|
||||||
*/
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
margin: BoxModel.margin * 2
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style for the {@code LoadingIndicator}.
|
|
||||||
*/
|
|
||||||
loadingIndicator: {
|
|
||||||
...StyleSheet.absoluteFillObject,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style for the descriptive error message.
|
|
||||||
*/
|
|
||||||
message: {
|
|
||||||
color: TEXT_COLOR,
|
|
||||||
fontSize: 16,
|
|
||||||
marginTop: BoxModel.margin,
|
|
||||||
textAlign: 'center'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Style for the error title.
|
|
||||||
*/
|
|
||||||
title: {
|
|
||||||
color: TEXT_COLOR,
|
|
||||||
fontSize: 24,
|
|
||||||
textAlign: 'center'
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue