fix: notification component

avrcoelho · Oct 17, 2022 · 6c7450e · 6c7450e
1 parent f195d50
commit 6c7450e
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-hook-notification",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "license": "MIT",
   "main": "dist/main/index.js",
   "typings": "dist/main/index.d.ts",

diff --git a/src/presentation/components/Notification/index.tsx b/src/presentation/components/Notification/index.tsx
@@ -98,33 +98,6 @@ export const Notification = ({
               </View>
             )}
 
-            {showButtonClose && (
-              <TouchableOpacity
-                onPress={onRemove}
-                style={[
-                  styles.buttonClose,
-                  styles[buttonCloseStyleIndex] || customStyle.button,
-                ]}
-                hitSlop={{
-                  bottom: 5,
-                  top: 5,
-                  left: 5,
-                  right: 5,
-                }}
-                accessibilityLabel="Close notification"
-                activeOpacity={0.5}
-              >
-                <Text
-                  style={[
-                    styles.buttonCloseText,
-                    styles[buttonCloseTextStyleIndex] || customStyle.buttonText,
-                  ]}
-                >
-                  &#x2715;
-                </Text>
-              </TouchableOpacity>
-            )}
-
             <View style={styles.textContainer}>
               {!!title && (
                 <Text
@@ -145,6 +118,33 @@ export const Notification = ({
             </View>
           </>
         </TouchableWithoutFeedback>
+
+        {showButtonClose && (
+          <TouchableOpacity
+            onPress={onRemove}
+            style={[
+              styles.buttonClose,
+              styles[buttonCloseStyleIndex] || customStyle.button,
+            ]}
+            hitSlop={{
+              bottom: 5,
+              top: 5,
+              left: 5,
+              right: 5,
+            }}
+            accessibilityLabel="Close notification"
+            activeOpacity={0.5}
+          >
+            <Text
+              style={[
+                styles.buttonCloseText,
+                styles[buttonCloseTextStyleIndex] || customStyle.buttonText,
+              ]}
+            >
+              &#x2715;
+            </Text>
+          </TouchableOpacity>
+        )}
       </Animated.View>
     </PanGestureHandler>
   );

diff --git a/src/presentation/components/Notification/styles.ts b/src/presentation/components/Notification/styles.ts
@@ -161,6 +161,7 @@ export const styles = StyleSheet.create({
 
   buttonCloseText: {
     fontSize: 14,
+    lineHeight: 16,
   },
 
   buttonCloseTextcolored: { color: Colors.Grey },

diff --git a/src/presentation/components/Notification/useController.ts b/src/presentation/components/Notification/useController.ts
@@ -25,6 +25,7 @@ import {
 import { getAnimation } from '../../utils/getAnimation';
 import { useNotificationWidth } from '../../hooks/useNotificationWidth';
 import { useLimitToRemove } from '../../hooks/useLimitToRemove';
+import { useIsMounted } from '../../hooks/useIsMounted';
 
 type UseControllerHookProps = {
   dragDirection: NotificationDragDirection;
@@ -88,67 +89,65 @@ export const useController: UseControllerHook = ({
   const positionOnScreen = useSharedValue(0);
   const [isPaused, toggleIsPaused] = useToggle(false);
 
-  const onTogglePause = useCallback((): void => {
-    'worklet';
+  const isMounted = useIsMounted();
 
-    if (pauseOnPress) {
-      runOnJS(toggleIsPaused)();
+  const onVerifyCanExecuteTogglePause = (): void => {
+    const canExecute = pauseOnPress && isMounted();
+    if (canExecute) {
+      toggleIsPaused();
     }
-  }, [pauseOnPress, toggleIsPaused]);
+  };
+
+  const onTogglePause = (): void => {
+    'worklet';
+
+    runOnJS(onVerifyCanExecuteTogglePause)();
+  };
 
   const width = useNotificationWidth();
   const { limitToRemove, onGetNotificationHeight } = useLimitToRemove({
     dragDirection,
     width,
   });
-  const onDirectionXRemover = useCallback(
-    (pos: number): void => {
-      'worklet';
+  const onDirectionXRemover = (pos: number): void => {
+    'worklet';
 
-      if (
-        dragDirection === 'x' &&
-        (pos > limitToRemove || pos < -limitToRemove)
-      ) {
-        runOnJS(onRemove)();
-      }
-    },
-    [dragDirection, limitToRemove, onRemove],
-  );
+    if (
+      dragDirection === 'x' &&
+      (pos > limitToRemove || pos < -limitToRemove)
+    ) {
+      runOnJS(onRemove)();
+    }
+  };
 
-  const onDirectionYRemover = useCallback(
-    (pos: number): void => {
-      'worklet';
+  const onDirectionYRemover = (pos: number): void => {
+    'worklet';
 
-      if (
-        dragDirection === 'y' &&
-        (pos > limitToRemove || pos < -limitToRemove)
-      ) {
-        runOnJS(onRemove)();
-      }
-    },
-    [dragDirection, limitToRemove, onRemove],
-  );
+    if (
+      dragDirection === 'y' &&
+      (pos > limitToRemove || pos < -limitToRemove)
+    ) {
+      runOnJS(onRemove)();
+    }
+  };
 
-  const onCanUpdatePosition = useCallback(
-    (pos: number): boolean => {
-      'worklet';
+  const onCanUpdatePosition = (pos: number): boolean => {
+    'worklet';
 
-      if (!draggable) {
-        return false;
-      }
-      if (dragDirection === 'x') {
-        return true;
-      }
-      if (/top/.test(position) && pos > 0) {
-        return false;
-      }
-      if (/bottom/.test(position) && pos < 0) {
-        return false;
-      }
+    if (!draggable) {
+      return false;
+    }
+    if (dragDirection === 'x') {
       return true;
-    },
-    [dragDirection, position, draggable],
-  );
+    }
+    if (/top/.test(position) && pos > 0) {
+      return false;
+    }
+    if (/bottom/.test(position) && pos < 0) {
+      return false;
+    }
+    return true;
+  };
 
   const canTogglePause = pauseOnPress && autoClose;
   const contextIndex = `position${transitionDirection}` as 'positionX';
@@ -180,14 +179,7 @@ export const useController: UseControllerHook = ({
         positionOnScreen.value = withTiming(0);
       },
     },
-    [
-      onDirectionXRemover,
-      onCanUpdatePosition,
-      onDirectionYRemover,
-      onCanUpdatePosition,
-      onTogglePause,
-      canTogglePause,
-    ],
+    [onTogglePause, canTogglePause],
   );
 
   const [animationEnteringFinish, toggleAnimationEnteringFinish] =

diff --git a/src/presentation/hooks/__tests__/useIsMounted.spec.ts b/src/presentation/hooks/__tests__/useIsMounted.spec.ts
@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useIsMounted } from '../useIsMounted';
+
+describe('useIsMounted hook', () => {
+  it('should be able to return mounted value', async () => {
+    const { result, rerender } = renderHook(useIsMounted);
+    rerender();
+
+    expect(result.current()).toBeTruthy();
+  });
+
+  it('should be able to return unmounted value', async () => {
+    const { result, unmount } = renderHook(useIsMounted);
+    unmount();
+
+    expect(result.current()).toBeFalsy();
+  });
+});
diff --git a/src/presentation/hooks/useIsMounted.ts b/src/presentation/hooks/useIsMounted.ts
@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMount = useRef(false);
+
+  useEffect(() => {
+    isMount.current = true;
+
+    return () => {
+      isMount.current = false;
+    };
+  });
+
+  return useCallback((): boolean => isMount.current, []);
+};
diff --git a/storybook/stories/Notification/Notification.stories.tsx b/storybook/stories/Notification/Notification.stories.tsx
@@ -35,7 +35,7 @@ const App = (): JSX.Element => {
         </TouchableOpacity>
       </View>
 
-      <NotificationContainer theme="light" closeOnPress />
+      <NotificationContainer theme="light" closeOnPress showButtonClose />
     </GestureHandlerRootView>
   );
 };