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

* add preventDismissOnPress?

* doC

* bugfix

* implement web

* add test case

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

samples/RXPTest/src/Tests/AlertTest.tsx

@@ -97,40 +97,60 @@ class AlertView extends RX.Component<RX.CommonProps, AlertViewState> {
 
     render() {
         return (
-            <RX.View style={ _styles.container}>
+            <RX.View style={_styles.container}>
-                <RX.View style={ _styles.textContainer } key={ 'explanation1' }>
+                <RX.View style={_styles.textContainer} key={'explanation1'}>
-                    <RX.Text style={ _styles.explainText }>
+                    <RX.Text style={_styles.explainText}>
-                        { 'Press the button to display an alert.' }
+                        {'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 }
+                        style={_styles.button}
-                        onPress={ () => this._showAlert(false) }
+                        onPress={() => this._showAlert(false, false)}
                     >
-                        <RX.Text style={ _styles.buttonText }>
+                        <RX.Text style={_styles.buttonText}>
-                            { 'Alert (Default)' }
+                            {'Alert (Default)'}
                         </RX.Text>
                     </RX.Button>
                     <RX.Button
-                        style={ _styles.button }
+                        style={_styles.button}
-                        onPress={ () => this._showAlert(true) }
+                        onPress={() => this._showAlert(false, true)}
                     >
-                        <RX.Text style={ _styles.buttonText }>
+                        <RX.Text style={_styles.buttonText}>
-                            { 'Alert (Custom)' }
+                            {'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.View style={_styles.textContainer}>
-                    <RX.Text style={ _styles.labelText }>
+                    <RX.Text style={_styles.labelText}>
-                        { this.state.lastOption && 'You chose: ' + this.state.lastOption }
+                        {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: {
+                preventDismissOnPress,
-                    bodyStyle: _styles.alertBody,
+                theme: custom ? theme : undefined
-                    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
         );
     }
 
@@ -172,7 +183,7 @@ class AlertTest implements Test {
     render(onMount: (component: any) => void): RX.Types.ReactNode {
         return (
             <AlertView
-                ref={ onMount }
+                ref={onMount}
             />
         );
     }

src/common/Types.ts

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

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

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
         );

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,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);
+        }
     }
 }