fix: refactor overlay to prevent its default press

Author: minheq

src/components/Dialog/Dialog.styles.ts

@@ -6,7 +6,6 @@ export interface DialogVariables {
   body: ViewStyle;
   container: ViewStyle;
   modalContainer: ViewStyle;
-  overlay: ViewStyle & { cursor?: string };
 }
 
 export const getDialogVariables = (theme: Theme): DialogVariables => {
@@ -30,24 +29,12 @@ export const getDialogVariables = (theme: Theme): DialogVariables => {
       justifyContent: 'center',
       width: '100%',
     },
-    overlay: {
-      backgroundColor: theme.colors.background.overlay,
-      bottom: 0,
-      cursor: 'auto',
-      height: '100%',
-      left: 0,
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      width: '100%',
-    },
   };
 };
 
 export interface DialogStyles {
   bodyStyle: ViewStyle;
   containerStyle: ViewStyle;
-  overlayStyle: ViewStyle;
   modalContainerStyle: ViewStyle;
 }
 export type GetDialogStyles = (theme: Theme) => DialogStyles;
@@ -59,6 +46,5 @@ export const getDialogStyles: GetDialogStyles = theme => {
     bodyStyle: dialogVariables.body,
     containerStyle: dialogVariables.container,
     modalContainerStyle: dialogVariables.modalContainer,
-    overlayStyle: dialogVariables.overlay,
   };
 };

src/components/Dialog/Dialog.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
+import { View } from 'react-native';
 
 import { Theme, withTheme } from '../../theme';
 import { Modal } from '../Modal';
+import { Overlay } from '../Overlay';
 import { GetDialogStyles, getDialogStyles } from './Dialog.styles';
 
 // TODO: Import from react-native when react-native-web implementation is ready
@@ -30,17 +31,12 @@ const DialogBase = (props: DialogProps) => {
     footer,
     header,
     isVisible,
-    onClose,
+    onClose = () => null,
     theme,
     getStyles = getDialogStyles,
   } = props;
 
-  const {
-    modalContainerStyle,
-    overlayStyle,
-    containerStyle,
-    bodyStyle,
-  } = getStyles(theme);
+  const { modalContainerStyle, containerStyle, bodyStyle } = getStyles(theme);
 
   return (
     <Modal visible={isVisible} transparent onRequestClose={onClose}>
@@ -50,9 +46,7 @@ const DialogBase = (props: DialogProps) => {
           <View style={bodyStyle}>{children}</View>
           {footer}
         </View>
-        <TouchableWithoutFeedback onPress={onClose}>
-          <View style={overlayStyle} />
-        </TouchableWithoutFeedback>
+        <Overlay onPress={onClose} />
       </View>
     </Modal>
   );

src/components/Drawer/Drawer.styles.ts

@@ -5,7 +5,6 @@ import { Theme } from '../../theme/ThemeInterface';
 export interface DrawerVariables {
   container: ViewStyle;
   modalContainer: ViewStyle;
-  overlay: ViewStyle & { cursor?: string };
 }
 
 export const getDrawerVariables = (theme: Theme): DrawerVariables => {
@@ -22,23 +21,11 @@ export const getDrawerVariables = (theme: Theme): DrawerVariables => {
       justifyContent: 'center',
       width: '100%',
     },
-    overlay: {
-      backgroundColor: theme.colors.background.overlay,
-      bottom: 0,
-      cursor: 'auto',
-      height: '100%',
-      left: 0,
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      width: '100%',
-    },
   };
 };
 
 export interface DrawerStyles {
   containerStyle: ViewStyle;
-  overlayStyle: ViewStyle;
   modalContainerStyle: ViewStyle;
 }
 export type GetDrawerStyles = (theme: Theme) => DrawerStyles;
@@ -49,6 +36,5 @@ export const getDrawerStyles: GetDrawerStyles = theme => {
   return {
     containerStyle: drawerVariables.container,
     modalContainerStyle: drawerVariables.modalContainer,
-    overlayStyle: drawerVariables.overlay,
   };
 };

src/components/Drawer/Drawer.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Animated, TouchableWithoutFeedback, View } from 'react-native';
+import { Animated, View } from 'react-native';
 
 import { Theme, withTheme } from '../../theme';
 import { Modal } from '../Modal';
+import { Overlay } from '../Overlay';
 import { GetDrawerStyles, getDrawerStyles } from './Drawer.styles';
 
 type Position = 'bottom' | 'top' | 'right' | 'left';
@@ -27,17 +28,15 @@ const DrawerBase = (props: DrawerProps) => {
   const {
     children,
     isVisible,
-    onClose,
+    onClose = () => null,
     position = 'bottom',
     offset = 0,
     space,
     theme,
     getStyles = getDrawerStyles,
   } = props;
 
-  const { modalContainerStyle, overlayStyle, containerStyle } = getStyles(
-    theme,
-  );
+  const { modalContainerStyle, containerStyle } = getStyles(theme);
 
   if (!isVisible) return null;
 
@@ -70,9 +69,7 @@ const DrawerBase = (props: DrawerProps) => {
         >
           {children}
         </Animated.View>
-        <TouchableWithoutFeedback onPress={onClose}>
-          <View style={overlayStyle} />
-        </TouchableWithoutFeedback>
+        <Overlay onPress={onClose} />
       </View>
     </Modal>
   );

src/components/Overlay/Overlay.styles.ts

@@ -0,0 +1,37 @@
+import { ViewStyle } from 'react-native';
+
+import { Theme } from '../../theme/ThemeInterface';
+
+export interface OverlayVariables {
+  overlay: ViewStyle & { cursor?: string };
+}
+
+export const getOverlayVariables = (theme: Theme): OverlayVariables => {
+  return {
+    overlay: {
+      backgroundColor: 'transparent',
+      bottom: 0,
+      cursor: 'auto',
+      height: '100%',
+      left: 0,
+      position: 'absolute',
+      right: 0,
+      top: 0,
+      width: '100%',
+    },
+  };
+};
+
+export interface OverlayStyles {
+  overlayStyle: ViewStyle;
+}
+
+export type GetOverlayStyles = (theme: Theme) => OverlayStyles;
+
+export const getOverlayStyles: GetOverlayStyles = theme => {
+  const overlayVariables = getOverlayVariables(theme);
+
+  return {
+    overlayStyle: overlayVariables.overlay,
+  };
+};

src/components/Overlay/Overlay.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+
+import { Theme, withTheme } from '../../theme';
+import { getOverlayStyles } from './Overlay.styles';
+
+interface OverlayProps {
+  onPress: () => void;
+  theme: Theme;
+}
+
+const OverlayBase = (props: OverlayProps) => {
+  const { onPress, theme } = props;
+
+  const { overlayStyle } = getOverlayStyles(theme);
+  return (
+    <TouchableWithoutFeedback
+      onPress={event => {
+        // @ts-ignore
+        event.preventDefault();
+        onPress();
+      }}
+    >
+      <View style={overlayStyle} />
+    </TouchableWithoutFeedback>
+  );
+};
+
+export const Overlay = withTheme(OverlayBase);

src/components/Overlay/index.ts

@@ -0,0 +1 @@
+export * from './Overlay';

src/components/Positioner/Positioner.styles.ts

@@ -5,7 +5,6 @@ import { Theme } from '../../theme/ThemeInterface';
 export interface PositionerVariables {
   positioner: ViewStyle;
   modalContainer: ViewStyle;
-  overlay: ViewStyle & { cursor?: string };
 }
 
 export const getPositionerVariables = (theme: Theme): PositionerVariables => {
@@ -17,17 +16,6 @@ export const getPositionerVariables = (theme: Theme): PositionerVariables => {
       justifyContent: 'center',
       width: '100%',
     },
-    overlay: {
-      backgroundColor: 'transparent',
-      bottom: 0,
-      cursor: 'auto',
-      height: '100%',
-      left: 0,
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      width: '100%',
-    },
     positioner: {
       position: 'absolute',
       zIndex: 1,
@@ -37,7 +25,6 @@ export const getPositionerVariables = (theme: Theme): PositionerVariables => {
 
 export interface PositionerStyles {
   positionerStyle: ViewStyle;
-  overlayStyle: ViewStyle;
   modalContainerStyle: ViewStyle;
 }
 
@@ -48,7 +35,6 @@ export const getPositionerStyles: GetPositionerStyles = theme => {
 
   return {
     modalContainerStyle: positionerVariables.modalContainer,
-    overlayStyle: positionerVariables.overlay,
     positionerStyle: positionerVariables.positioner,
   };
 };

src/components/Positioner/Positioner.tsx

@@ -1,15 +1,11 @@
 import * as React from 'react';
-import {
-  Dimensions,
-  ScaledSize,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import { Dimensions, ScaledSize, View } from 'react-native';
 
 import { POSITION, Position } from '../../constants';
 import { Theme, withTheme } from '../../theme';
 import { Measurements, ViewMeasure } from '../Helpers';
 import { Modal } from '../Modal';
+import { Overlay } from '../Overlay';
 import { GetPositionerStyles, getPositionerStyles } from './Positioner.styles';
 
 export interface ContentProps {
@@ -393,9 +389,7 @@ class PositionerBase extends React.Component<PositionerProps, PositionerState> {
       isAdjustingContent,
     } = this.state;
 
-    const { positionerStyle, modalContainerStyle, overlayStyle } = getStyles(
-      theme,
-    );
+    const { positionerStyle, modalContainerStyle } = getStyles(theme);
 
     const screenLayout = Dimensions.get('window');
 
@@ -477,9 +471,7 @@ class PositionerBase extends React.Component<PositionerProps, PositionerState> {
                 targetMeasurements: finalTargetMeasurements,
               })}
             </ViewMeasure>
-            <TouchableWithoutFeedback onPress={onClose}>
-              <View style={overlayStyle} />
-            </TouchableWithoutFeedback>
+            <Overlay onPress={onClose} />
           </View>
         </Modal>
       </>

src/components/index.ts

@@ -11,6 +11,7 @@ export * from './FormField';
 export * from './Layout';
 export * from './Loading';
 export * from './Modal';
+export * from './Overlay';
 export * from './Picker';
 export * from './Positioner';
 export * from './Popover';