зеркало из https://github.com/microsoft/reactxp.git
Pass the cancelable prop down to RN.Alert (#843)
* add preventDismissOnPress? * doC * bugfix * implement web * add test case
This commit is contained in:
Родитель
c25045728c
Коммит
b1c84e932e
|
@ -64,6 +64,9 @@ interface AlertOptions {
|
|||
// Optional: the id of the root view this alert is associated with.
|
||||
// Defaults to the view set by UserInterface.setMainView().
|
||||
rootViewId?: string;
|
||||
|
||||
// Optional: Prevent the dialog from being dismissed when pressing away from the dialog
|
||||
preventDismissOnPress?: boolean;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
@ -97,40 +97,60 @@ class AlertView extends RX.Component<RX.CommonProps, AlertViewState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<RX.View style={ _styles.container}>
|
||||
<RX.View style={ _styles.textContainer } key={ 'explanation1' }>
|
||||
<RX.Text style={ _styles.explainText }>
|
||||
{ 'Press the button to display an alert.' }
|
||||
<RX.View style={_styles.container}>
|
||||
<RX.View style={_styles.textContainer} key={'explanation1'}>
|
||||
<RX.Text style={_styles.explainText}>
|
||||
{'Press the button to display an alert.'}
|
||||
</RX.Text>
|
||||
</RX.View>
|
||||
<RX.View style={ _styles.buttonPanel }>
|
||||
<RX.View style={_styles.buttonPanel}>
|
||||
<RX.Button
|
||||
style={ _styles.button }
|
||||
onPress={ () => this._showAlert(false) }
|
||||
style={_styles.button}
|
||||
onPress={() => this._showAlert(false, false)}
|
||||
>
|
||||
<RX.Text style={ _styles.buttonText }>
|
||||
{ 'Alert (Default)' }
|
||||
<RX.Text style={_styles.buttonText}>
|
||||
{'Alert (Default)'}
|
||||
</RX.Text>
|
||||
</RX.Button>
|
||||
<RX.Button
|
||||
style={ _styles.button }
|
||||
onPress={ () => this._showAlert(true) }
|
||||
style={_styles.button}
|
||||
onPress={() => this._showAlert(false, true)}
|
||||
>
|
||||
<RX.Text style={ _styles.buttonText }>
|
||||
{ 'Alert (Custom)' }
|
||||
<RX.Text style={_styles.buttonText}>
|
||||
{'Alert (Default - preventDismissOnPress)'}
|
||||
</RX.Text>
|
||||
</RX.Button>
|
||||
<RX.Button
|
||||
style={_styles.button}
|
||||
onPress={() => this._showAlert(true, false)}
|
||||
>
|
||||
<RX.Text style={_styles.buttonText}>
|
||||
{'Alert (Custom)'}
|
||||
</RX.Text>
|
||||
</RX.Button>
|
||||
</RX.View>
|
||||
<RX.View style={ _styles.textContainer }>
|
||||
<RX.Text style={ _styles.labelText }>
|
||||
{ this.state.lastOption && 'You chose: ' + this.state.lastOption }
|
||||
<RX.View style={_styles.textContainer}>
|
||||
<RX.Text style={_styles.labelText}>
|
||||
{this.state.lastOption && 'You chose: ' + this.state.lastOption}
|
||||
</RX.Text>
|
||||
</RX.View>
|
||||
</RX.View>
|
||||
);
|
||||
}
|
||||
|
||||
private _showAlert(custom: boolean) {
|
||||
private _showAlert(custom: boolean, preventDismissOnPress: boolean) {
|
||||
const theme = {
|
||||
bodyStyle: _styles.alertBody,
|
||||
titleTextStyle: _styles.alertTitleText,
|
||||
messageTextStyle: _styles.alertMessageText,
|
||||
buttonStyle: _styles.alertButton,
|
||||
buttonHoverStyle: _styles.alertButtonHover,
|
||||
buttonTextStyle: _styles.alertButtonText,
|
||||
cancelButtonStyle: _styles.alertCancelButton,
|
||||
cancelButtonHoverStyle: _styles.alertCancelButtonHover,
|
||||
cancelButtonTextStyle: _styles.alertCancelButtonText,
|
||||
};
|
||||
|
||||
RX.Alert.show('Default Alert', 'Which option would you like to choose?',
|
||||
[
|
||||
{ text: 'Option 1', onPress: () => this._setLastOption('Option 1'), style: 'default' },
|
||||
|
@ -139,19 +159,10 @@ class AlertView extends RX.Component<RX.CommonProps, AlertViewState> {
|
|||
{ text: 'Destructive', onPress: () => this._setLastOption('Destructive'), style: 'destructive' },
|
||||
{ text: 'Cancel', onPress: () => this._setLastOption('Cancel'), style: 'cancel' }
|
||||
],
|
||||
custom ? {
|
||||
theme: {
|
||||
bodyStyle: _styles.alertBody,
|
||||
titleTextStyle: _styles.alertTitleText,
|
||||
messageTextStyle: _styles.alertMessageText,
|
||||
buttonStyle: _styles.alertButton,
|
||||
buttonHoverStyle: _styles.alertButtonHover,
|
||||
buttonTextStyle: _styles.alertButtonText,
|
||||
cancelButtonStyle: _styles.alertCancelButton,
|
||||
cancelButtonHoverStyle: _styles.alertCancelButtonHover,
|
||||
cancelButtonTextStyle: _styles.alertCancelButtonText,
|
||||
}
|
||||
} : undefined
|
||||
{
|
||||
preventDismissOnPress,
|
||||
theme: custom ? theme : undefined
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -172,7 +183,7 @@ class AlertTest implements Test {
|
|||
render(onMount: (component: any) => void): RX.Types.ReactNode {
|
||||
return (
|
||||
<AlertView
|
||||
ref={ onMount }
|
||||
ref={onMount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1110,6 +1110,7 @@ export interface AlertOptions {
|
|||
icon?: string;
|
||||
theme?: AlertModalTheme;
|
||||
rootViewId?: string;
|
||||
preventDismissOnPress?: boolean;
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
@ -19,6 +19,11 @@ export class Alert implements RX.Alert {
|
|||
options?: RX.Types.AlertOptions): void {
|
||||
|
||||
let alertOptions: RN.ExtendedAlertOptions = {};
|
||||
|
||||
if (!!options && options.preventDismissOnPress) {
|
||||
alertOptions.cancelable = false;
|
||||
}
|
||||
|
||||
if (options && options.rootViewId) {
|
||||
const nodeHandle = UserInterface.findNodeHandleByRootViewId(options.rootViewId);
|
||||
if (nodeHandle) {
|
||||
|
|
|
@ -27,6 +27,7 @@ export class Alert extends RX.Alert {
|
|||
title={ title }
|
||||
message={ message }
|
||||
theme={ options && options.theme }
|
||||
preventDismissOnPress={ options && options.preventDismissOnPress}
|
||||
/>
|
||||
), this._modalId
|
||||
);
|
||||
|
|
|
@ -22,6 +22,7 @@ export interface AppModalContentProps extends RX.Types.ViewProps {
|
|||
message?: string;
|
||||
modalId: string;
|
||||
theme?: RX.Types.AlertModalTheme;
|
||||
preventDismissOnPress?: boolean;
|
||||
}
|
||||
|
||||
export interface AppModalContentState {
|
||||
|
@ -176,7 +177,9 @@ export class AlertModalContent extends RX.Component<AppModalContentProps, AppMod
|
|||
}
|
||||
|
||||
private _onPressBackground = (e: RX.Types.SyntheticEvent) => {
|
||||
Modal.dismiss(this.props.modalId);
|
||||
if (!this.props.preventDismissOnPress) {
|
||||
Modal.dismiss(this.props.modalId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче