diff --git a/package.json b/package.json index 0cc1a8b..68b1948 100644 --- 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 index 4284362..597f260 100644 --- a/src/presentation/components/Notification/index.tsx +++ b/src/presentation/components/Notification/index.tsx @@ -98,33 +98,6 @@ export const Notification = ({ )} - {showButtonClose && ( - - - ✕ - - - )} - {!!title && ( + + {showButtonClose && ( + + + ✕ + + + )} ); diff --git a/src/presentation/components/Notification/styles.ts b/src/presentation/components/Notification/styles.ts index 8ab8d93..4d6d675 100644 --- 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 index 50a6440..c150282 100644 --- 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 new file mode 100644 index 0000000..50d3eb3 --- /dev/null +++ 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 new file mode 100644 index 0000000..7bfffb6 --- /dev/null +++ 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 index fe081cb..905bb6d 100644 --- a/storybook/stories/Notification/Notification.stories.tsx +++ b/storybook/stories/Notification/Notification.stories.tsx @@ -35,7 +35,7 @@ const App = (): JSX.Element => { - + ); };