feat: Offset from the X axis of the screen (in px)

avrcoelho · May 10, 2022 · 1993486 · 1993486
1 parent dee099f
commit 1993486
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,7 @@ export default function Component() {
 | icon            | React.FunctionComponentElement                                                                                                                                                                  | no       |           | Render icon on left side. Obs.: Dimensions: 24x24          |
 | titleMaxLines   | number                                                                                                                                                                                          | no       | 1         | Maximum number of lines for title                          |
 | textMaxLines    | number                                                                                                                                                                                          | no       | 2         | Maximum number of lines for text                           |
+| xOffset         | number                                                                                                                                                                                          | no       | 16        | Offset from the X axis of the screen (in px)               |
 | customStyle     | `{ container?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; text?: StyleProp<TextStyle>; icon?: StyleProp<ViewStyle>; button?: StyleProp<ViewStyle>;buttonText?: StyleProp<TextStyle>;}` | no       |           | Styles for custom notificaion type                         |
 
 ## License

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-hook-notification",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "main": "dist/main/index.js",
   "typings": "dist/main/index.d.ts",

diff --git a/src/presentation/components/Notification/__tests__/index.spec.tsx b/src/presentation/components/Notification/__tests__/index.spec.tsx
@@ -6,7 +6,6 @@ import { NotificationType } from '../../../types/Notification';
 import { Notification } from '..';
 import { Colors } from '../../../constants/Colors';
 
-let mockIsPortrait = false;
 let mockTypeAndTheme = 'defaultcolored';
 jest.mock('../useController', () => ({
   useController: () => ({
@@ -23,7 +22,6 @@ jest.mock('../useController', () => ({
     onFinishAnimation: jest.fn(),
     onGetNotificationHeight: jest.fn(),
     onPressNotification: jest.fn(),
-    isPortrait: mockIsPortrait,
   }),
 }));
 
@@ -60,8 +58,8 @@ describe('Notification component', () => {
       title: 'title test',
       draggable: undefined,
       closeOnPress: true,
+      xOffset: 10,
     });
-    mockIsPortrait = true;
     const { getByText } = render(<Notification {...props} />);
 
     expect(getByText('title test')).toBeTruthy();
@@ -73,7 +71,6 @@ describe('Notification component', () => {
       icon: <Icon />,
       showButtonClose: true,
     });
-    mockIsPortrait = true;
     const { getByText } = render(<Notification {...props} />);
 
     expect(getByText('IC')).toBeTruthy();
@@ -106,7 +103,6 @@ describe('Notification component', () => {
         },
       },
     });
-    mockIsPortrait = true;
     const { getByText } = render(<Notification {...props} />);
 
     expect(getByText('title test').props.style[1]).toEqual(

diff --git a/src/presentation/components/Notification/index.tsx b/src/presentation/components/Notification/index.tsx
@@ -31,6 +31,7 @@ export const Notification = ({
   titleMaxLines = notificationDefaultProps.titleMaxLines,
   closeOnPress = notificationDefaultProps.closeOnPress,
   textMaxLines = notificationDefaultProps.textMaxLines,
+  xOffset = notificationDefaultProps.xOffset,
 }: NotificationProps): JSX.Element => {
   const {
     animatedStyle,
@@ -41,7 +42,6 @@ export const Notification = ({
     onFinishAnimation,
     onGetNotificationHeight,
     onPressNotification,
-    isPortrait,
     width,
   } = useController({
     dragDirection,
@@ -77,7 +77,7 @@ export const Notification = ({
           { width },
           styles[typeAndTheme] || customStyle.container,
           animatedStyle,
-          getPositionStyles(isPortrait)[position],
+          getPositionStyles({ xOffset })[position],
         ]}
       >
         <TouchableWithoutFeedback

diff --git a/src/presentation/components/Notification/styles.ts b/src/presentation/components/Notification/styles.ts
@@ -13,7 +13,7 @@ const themeDark = {
   backgroundColor: Colors.Black,
 };
 
-const topPosisiton = 10;
+const yPosisiton = 10;
 
 export const styles = StyleSheet.create({
   container: {
@@ -127,31 +127,35 @@ export const styles = StyleSheet.create({
   buttonCloseTextdark: { color: Colors.Black },
 });
 
-export const getPositionStyles = (
-  isPortrait: boolean,
-): Record<NotificationPosition, ViewStyle> => ({
+type GetPositionStylesProps = {
+  xOffset: number;
+};
+
+export const getPositionStyles = ({
+  xOffset,
+}: GetPositionStylesProps): Record<NotificationPosition, ViewStyle> => ({
   'top-right': {
-    top: isPortrait ? topPosisiton : 16,
-    right: isPortrait ? 10 : topPosisiton,
+    top: xOffset,
+    right: yPosisiton,
   },
   'top-center': {
-    top: isPortrait ? topPosisiton : 16,
+    top: xOffset,
     alignSelf: 'center',
   },
   'top-left': {
-    top: isPortrait ? topPosisiton : 16,
-    left: isPortrait ? 10 : topPosisiton,
+    top: xOffset,
+    left: yPosisiton,
   },
   'bottom-right': {
-    bottom: 24,
-    right: isPortrait ? 10 : topPosisiton,
+    bottom: xOffset,
+    right: yPosisiton,
   },
   'bottom-center': {
-    bottom: 24,
+    bottom: xOffset,
     alignSelf: 'center',
   },
   'bottom-left': {
-    bottom: 24,
-    left: isPortrait ? 10 : topPosisiton,
+    bottom: xOffset,
+    left: yPosisiton,
   },
 });
diff --git a/src/presentation/components/Notification/useController.ts b/src/presentation/components/Notification/useController.ts
@@ -14,7 +14,6 @@ import {
 
 import { LayoutChangeEvent } from 'react-native';
 import { useToggle } from '../../hooks/useToggle';
-import { useOrientation } from '../../hooks/useOrientation';
 import { AnimationReturn } from '../../types/Animation';
 import {
   NotificationDragDirection,
@@ -62,7 +61,6 @@ type UseControllerHook = (props: UseControllerHookProps) => {
     | object;
   animation: AnimationReturn;
   isPaused: boolean;
-  isPortrait: boolean;
   width: number;
   onFinishAnimation(value: boolean): void;
   onGetNotificationHeight(event: LayoutChangeEvent): void;
@@ -249,7 +247,6 @@ export const useController: UseControllerHook = ({
   }, [closeOnPress, onPress, onRemove]);
 
   const animation = getAnimation({ position, transition });
-  const isPortrait = useOrientation() === 'portrait';
 
   return {
     animatedStyle,
@@ -259,7 +256,6 @@ export const useController: UseControllerHook = ({
     onGetNotificationHeight,
     animation,
     isPaused,
-    isPortrait,
     width,
     onPressNotification,
   };

diff --git a/src/presentation/constants/notificationDefaultProps.ts b/src/presentation/constants/notificationDefaultProps.ts
@@ -19,6 +19,7 @@ export const notificationDefaultProps = {
   draggable: true,
   titleMaxLines: 1,
   textMaxLines: 2,
+  xOffset: 16,
   customStyle: {
     container: {},
     title: {},

diff --git a/src/presentation/types/Notification.ts b/src/presentation/types/Notification.ts
@@ -115,11 +115,14 @@ export interface NotificationProps {
    * Maximum number of lines for notification title. (Default: 1)
    */
   titleMaxLines?: number;
-
   /**
    * Maximum number of lines for notification text. (Default: 2)
    */
   textMaxLines?: number;
+  /**
+   * Offset from the X axis of the screen (in px). (Default: 16)
+   */
+  xOffset?: number;
   /**
    * Called on Notification press
    */