Feat/add IgnoreBackgroundPress prop (#1267)

* Feat/add IgnoreBackgroundPress prop

* ignoreBackgroundPress

Author: lidord-wix

demo/src/screens/componentScreens/DialogScreen.js

@@ -55,7 +55,8 @@ export default class DialogScreen extends Component {
       scroll: this.SCROLL_TYPE.NONE,
       showHeader: true,
       isRounded: true,
-      showDialog: false
+      showDialog: false,
+      ignoreBackgroundPress: false
     };
   }
 
@@ -93,6 +94,12 @@ export default class DialogScreen extends Component {
     });
   };
 
+  toggleIgnoreBackgroundPress = () => {
+    this.setState({
+      ignoreBackgroundPress: !this.state.ignoreBackgroundPress
+    });
+  };
+
   showDialog = () => {
     this.setState({showDialog: true});
   };
@@ -222,7 +229,7 @@ Scroll: ${scroll}`;
   };
 
   renderDialog = () => {
-    const {showDialog, panDirection, position, scroll, showHeader, isRounded} = this.state;
+    const {showDialog, panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
     const renderPannableHeader = showHeader ? this.renderPannableHeader : undefined;
     const height = scroll !== this.SCROLL_TYPE.NONE ? '70%' : undefined;
 
@@ -241,14 +248,15 @@ Scroll: ${scroll}`;
         renderPannableHeader={renderPannableHeader}
         pannableHeaderProps={this.pannableTitle}
         supportedOrientations={this.supportedOrientations}
+        ignoreBackgroundPress={ignoreBackgroundPress}
       >
         {this.renderContent()}
       </Dialog>
     );
   };
 
   render() {
-    const {panDirection, position, scroll, showHeader, isRounded} = this.state;
+    const {panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
 
     return (
       <ScrollView>
@@ -296,6 +304,11 @@ Scroll: ${scroll}`;
             <Switch value={isRounded} onValueChange={this.toggleIsRounded} marginL-10/>
           </View>
 
+          <View row marginT-20 centerV>
+            <Text>Ignore Background Press:</Text>
+            <Switch value={ignoreBackgroundPress} onValueChange={this.toggleIgnoreBackgroundPress} marginL-10/>
+          </View>
+
           <Button marginT-50 label={'Show dialog'} onPress={this.showDialog}/>
 
           {this.renderDialog()}

generatedTypes/components/dialog/index.d.ts

@@ -13,6 +13,10 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
      * Dismiss callback for when clicking on the background
      */
     onDismiss?: (props: any) => void;
+    /**
+     * Whether or not to ignore background press
+     */
+    ignoreBackgroundPress?: boolean;
     /**
      * The color of the overlay background
      */

src/components/dialog/index.tsx

@@ -32,6 +32,10 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
      * Dismiss callback for when clicking on the background
      */
     onDismiss?: (props: any) => void;
+    /**
+     * Whether or not to ignore background press
+     */
+    ignoreBackgroundPress?: boolean;
     /**
      * The color of the overlay background
      */
@@ -274,7 +278,8 @@ class Dialog extends Component<DialogProps, DialogState> {
 
   render = () => {
     const {orientationKey, modalVisibility} = this.state;
-    const {testID, supportedOrientations, accessibilityLabel} = this.props;
+    const {testID, supportedOrientations, accessibilityLabel, ignoreBackgroundPress} = this.props;
+    const onBackgroundPress = !ignoreBackgroundPress ? this.hideDialogView : undefined;
 
     return (
       <Modal
@@ -283,8 +288,8 @@ class Dialog extends Component<DialogProps, DialogState> {
         transparent
         visible={modalVisibility}
         animationType={'none'}
-        onBackgroundPress={this.hideDialogView}
-        onRequestClose={this.hideDialogView}
+        onBackgroundPress={onBackgroundPress}
+        onRequestClose={onBackgroundPress}
         // onDismiss={this.onModalDismissed}
         supportedOrientations={supportedOrientations}
         accessibilityLabel={accessibilityLabel}