Refactor (add useFadeView) and fix pointerEvents

Author: M-i-k-e-l

generatedTypes/src/incubator/Dialog/helpers/useFadeView.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ModalProps } from '../../../components/modal';
+import { TransitionViewAnimationType } from '../../TransitionView';
+import { ImperativeDialogProps } from '../types';
+export declare type AnimationType = TransitionViewAnimationType;
+export declare type FadeViewProps = Pick<ImperativeDialogProps, 'initialVisibility' | 'testID'> & Pick<ModalProps, 'overlayBackgroundColor'>;
+export interface FadeViewMethods {
+    hideNow: () => void;
+}
+declare const useFadeView: (props: FadeViewProps) => {
+    FadeView: JSX.Element;
+    hideNow: () => void;
+    fade: (type: AnimationType) => void;
+};
+export default useFadeView;

src/incubator/Dialog/ImperativeDialog.tsx

@@ -1,17 +1,14 @@
 import React, {useMemo, useCallback, useState, useImperativeHandle, forwardRef} from 'react';
 import {StyleSheet} from 'react-native';
-import {useSharedValue, withTiming, useAnimatedStyle} from 'react-native-reanimated';
 import View from '../../components/view';
 import Modal from '../../components/modal';
 import TransitionView, {TransitionViewAnimationType} from '../TransitionView';
 import PanView from '../panView';
 import useAlignmentStyle from './helpers/useAlignmentStyle';
+import useFadeView from './helpers/useFadeView';
 import {ImperativeDialogProps, ImperativeDialogMethods, DialogDirections, DialogDirectionsEnum} from './types';
 export {DialogDirections, DialogDirectionsEnum};
 
-import {Colors} from 'style';
-const DEFAULT_OVERLAY_BACKGROUND_COLORS = Colors.rgba(Colors.black, 0.2);
-
 const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
   const {
     initialVisibility = false,
@@ -23,10 +20,14 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
     testID
   } = props;
   const transitionAnimatorRef = React.createRef<typeof TransitionView>();
-  const {overlayBackgroundColor = DEFAULT_OVERLAY_BACKGROUND_COLORS, ...otherModalProps} = modalProps;
-  const fadeOpacity = useSharedValue<number>(Number(initialVisibility));
+  const {overlayBackgroundColor, ...otherModalProps} = modalProps;
   const [visible, setVisible] = useState(initialVisibility);
   const {alignmentStyle} = useAlignmentStyle(props);
+  const {FadeView, hideNow, fade} = useFadeView({
+    initialVisibility,
+    testID: `${testID}.overlayFadingBackground`,
+    overlayBackgroundColor
+  });
 
   const open = useCallback(() => {
     if (!visible) {
@@ -54,16 +55,10 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
   }, [close]);
 
   const onPanViewDismiss = useCallback(() => {
-    fadeOpacity.value = 0;
+    hideNow();
     setVisible(false);
     onDismiss?.();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onDismiss, setVisible]);
-
-  const onTransitionAnimationStart = useCallback((type: TransitionViewAnimationType) => {
-    fadeOpacity.value = withTiming(Number(type === 'enter'), {duration: 300});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [hideNow, onDismiss, setVisible]);
 
   const onTransitionAnimationEnd = useCallback((type: TransitionViewAnimationType) => {
     if (type === 'exit') {
@@ -73,13 +68,6 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
   },
   [onDismiss, setVisible]);
 
-  const fadeStyle = useAnimatedStyle(() => {
-    return {
-      opacity: fadeOpacity.value,
-      backgroundColor: overlayBackgroundColor
-    };
-  }, [overlayBackgroundColor]);
-
   const renderDialog = () => {
     {
       /* TODO: remove?
@@ -98,7 +86,7 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
           ref={transitionAnimatorRef}
           enterFrom={direction}
           exitTo={direction}
-          onAnimationStart={onTransitionAnimationStart}
+          onAnimationStart={fade}
           onAnimationEnd={onTransitionAnimationEnd}
         >
           {children}
@@ -119,8 +107,10 @@ const ImperativeDialog = (props: ImperativeDialogProps, ref: any) => {
       onRequestClose={onBackgroundPress}
       onDismiss={undefined}
     >
-      <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={fadeStyle} pointerEvents="none"/>
-      <View pointerEvents={'none'} style={alignmentStyle}>{renderDialog()}</View>
+      {FadeView}
+      <View pointerEvents={'box-none'} style={alignmentStyle}>
+        {renderDialog()}
+      </View>
     </Modal>
   );
 };

src/incubator/Dialog/helpers/useFadeView.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {useCallback} from 'react';
+import {useSharedValue, withTiming, useAnimatedStyle} from 'react-native-reanimated';
+import {Colors} from 'style';
+import View from '../../../components/view';
+import {ModalProps} from '../../../components/modal';
+import {TransitionViewAnimationType} from '../../TransitionView';
+import {ImperativeDialogProps} from '../types';
+
+const DEFAULT_OVERLAY_BACKGROUND_COLORS = Colors.rgba(Colors.black, 0.2);
+
+export type AnimationType = TransitionViewAnimationType;
+
+export type FadeViewProps = Pick<ImperativeDialogProps, 'initialVisibility' | 'testID'> &
+  Pick<ModalProps, 'overlayBackgroundColor'>;
+
+export interface FadeViewMethods {
+  hideNow: () => void;
+}
+
+const useFadeView = (props: FadeViewProps) => {
+  const {initialVisibility, overlayBackgroundColor = DEFAULT_OVERLAY_BACKGROUND_COLORS, testID} = props;
+  const fadeOpacity = useSharedValue<number>(Number(initialVisibility));
+
+  const hideNow = useCallback(() => {
+    fadeOpacity.value = 0;
+  }, []);
+
+  const fade = useCallback((type: AnimationType) => {
+    fadeOpacity.value = withTiming(Number(type === 'enter'), {duration: 300});
+  }, []);
+
+  const fadeStyle = useAnimatedStyle(() => {
+    return {
+      opacity: fadeOpacity.value,
+      backgroundColor: overlayBackgroundColor
+    };
+  }, [overlayBackgroundColor]);
+
+  const FadeView = <View testID={testID} absF reanimated style={fadeStyle} pointerEvents="none"/>;
+
+  return {FadeView, hideNow, fade};
+};
+
+export default useFadeView;