microsoft
/
reactxp
зеркало из https://github.com/microsoft/reactxp.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Pass the cancelable prop down to RN.Alert (#843) 

* add preventDismissOnPress?

* doC

* bugfix

* implement web

* add test case
This commit is contained in:
Luis Naranjo 2018-10-07 12:54:31 -07:00 коммит произвёл Eric Traut
Родитель c25045728c
Коммит b1c84e932e
6 изменённых файлов: 56 добавлений и 32 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
docs/docs/apis/alert.md
Просмотреть файл

@ -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;
}
```

69
samples/RXPTest/src/Tests/AlertTest.tsx
Просмотреть файл

@ -97,50 +97,49 @@ 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) {
RX.Alert.show('Default Alert', 'Which option would you like to choose?',
[
{ text: 'Option 1', onPress: () => this._setLastOption('Option 1'), style: 'default' },
{ text: 'Option 2', onPress: () => this._setLastOption('Option 2') },
{ text: 'Option 3', onPress: () => this._setLastOption('Option 3') },
{ text: 'Destructive', onPress: () => this._setLastOption('Destructive'), style: 'destructive' },
{ text: 'Cancel', onPress: () => this._setLastOption('Cancel'), style: 'cancel' }
],
custom ? {
theme: {
private _showAlert(custom: boolean, preventDismissOnPress: boolean) {
const theme = {
bodyStyle: _styles.alertBody,
titleTextStyle: _styles.alertTitleText,
messageTextStyle: _styles.alertMessageText,
@ -150,8 +149,20 @@ class AlertView extends RX.Component<RX.CommonProps, AlertViewState> {
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' },
{ text: 'Option 2', onPress: () => this._setLastOption('Option 2') },
{ text: 'Option 3', onPress: () => this._setLastOption('Option 3') },
{ text: 'Destructive', onPress: () => this._setLastOption('Destructive'), style: 'destructive' },
{ text: 'Cancel', onPress: () => this._setLastOption('Cancel'), style: 'cancel' }
],
{
preventDismissOnPress,
theme: custom ? theme : undefined
}
} : undefined
);
}
@ -172,7 +183,7 @@ class AlertTest implements Test {
render(onMount: (component: any) => void): RX.Types.ReactNode {
return (
<AlertView
ref={ onMount }
ref={onMount}
/>
);
}

1
src/common/Types.ts
Просмотреть файл

@ -1110,6 +1110,7 @@ export interface AlertOptions {
icon?: string;
theme?: AlertModalTheme;
rootViewId?: string;
preventDismissOnPress?: boolean;
}
//

5
src/native-common/Alert.ts
Просмотреть файл

@ -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) {

1
src/web/Alert.tsx
Просмотреть файл

@ -27,6 +27,7 @@ export class Alert extends RX.Alert {
title={ title }
message={ message }
theme={ options && options.theme }
preventDismissOnPress={ options && options.preventDismissOnPress}
/>
), this._modalId
);

3
src/web/AlertModalContent.tsx
Просмотреть файл

@ -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,8 +177,10 @@ export class AlertModalContent extends RX.Component<AppModalContentProps, AppMod
}
private _onPressBackground = (e: RX.Types.SyntheticEvent) => {
if (!this.props.preventDismissOnPress) {
Modal.dismiss(this.props.modalId);
}
}
}
export default AlertModalContent;