react-native-popup-menu - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

__tests__/renderers/ContextMenu-test.js

@@ -82,4 +82,74 @@ import React from 'react';
     });
+
+    it('should return horizontal middle position', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 100, height: 20, x: 10, y: 290 };
+      const optionsLayout = { width: 150, height: 500 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 50, left: 10
+      });
+    });
+
+    it('should return vertical middle position', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 100, height: 20, x: 150, y: 10 };
+      const optionsLayout = { width: 300, height: 100 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 10, left: 50
+      });
+    });
+
+    it('should return zero top position for big menus', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 100, height: 20, x: 10, y: 290 };
+      const optionsLayout = { width: 150, height: 700 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 0, left: 10
+      });
+    });
+
+    it('should return zero left position for big menus', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 100, height: 20, x: 150, y: 10 };
+      const optionsLayout = { width: 500, height: 100 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 10, left: 0
+      });
+    });
+
+    it('should return zero top because of overlaping cener position', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 100, height: 20, x: 10, y: 200 };
+      const optionsLayout = { width: 150, height: 500 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 0, left: 10
+      });
+    });
+
+    it('should return zero bottom because of overlaping cener position', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 100, height: 20, x: 10, y: 450 };
+      const optionsLayout = { width: 150, height: 500 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 100, left: 10
+      });
+    });
+
+    it('should return zero left because of overlaping cener position', () => {
+      const windowLayout = { width: 400, height: 600 };
+      const triggerLayout = { width: 1, height: 20, x: 100, y: 10 };
+      const optionsLayout = { width: 350, height: 50 };
+      const layouts = { windowLayout, triggerLayout, optionsLayout };
+      expect(computePosition(layouts)).toEqual({
+        top: 10, left: 0
+      });
+    });
   });
 
 });

package.json

 {
   "name": "react-native-popup-menu",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "extensible popup/context menu for react native",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/renderers/ContextMenu.js

 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
+const axisPosition = (oDim, wDim, tPos, tDim) => {
+  // if options are bigger than window dimension, then render at 0
+  if (oDim > wDim) {
+    return 0;
+  }
+  // render at trigger position if possible
+  if (tPos + oDim <= wDim) {
+    return tPos;
+  }
+  // aligned to the trigger from the bottom (right)
+  if (tPos + tDim - oDim >= 0) {
+    return tPos + tDim - oDim;
+  }
+  // compute center position
+  let pos = Math.round(tPos + (tDim / 2) - (oDim / 2));
+  // check top boundary
+  if (pos < 0) {
+    return 0;
+  }
+  // check bottom boundary
+  if (pos + oDim > wDim) {
+    return wDim - oDim;
+  }
+  // if everything ok, render in center position
+  return pos;
+};
+
 export const computePosition = ({ windowLayout, triggerLayout, optionsLayout }) => {
   const { width: wWidth, height: wHeight } = windowLayout;
-  // TODO: scroll bar for big menus
   const { x: tX, y: tY, height: tHeight, width: tWidth } = triggerLayout;
   const { height: oHeight, width: oWidth } = optionsLayout;
-  const top  = (tY + oHeight > wHeight) ? tY + tHeight - oHeight : tY;
-  const left = (tX + oWidth > wWidth) ? tX - oWidth + tWidth : tX;
+  const top = axisPosition(oHeight, wHeight, tY, tHeight);
+  const left = axisPosition(oWidth, wWidth, tX, tWidth);
   return { top, left };
-}
+};
 
@@ -14,0 +40,0 @@

No alert changes

Improved metrics

Total package byte prevSize

623320

increased by6.33%

Number of package files

64

increased by6.67%

Lines of code

2562

increased by6.97%

No dependency changes