Add setBreakpoints and getPageMargins

src/commons/Constants.ts

@@ -1,11 +1,27 @@
-import {Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, AccessibilityChangeEvent} from 'react-native';
-
+import {
+  Platform,
+  Dimensions,
+  NativeModules,
+  I18nManager,
+  AccessibilityInfo,
+  AccessibilityChangeEvent
+} from 'react-native';
+import {LogService} from '../services';
 
 export enum orientations {
   PORTRAIT = 'portrait',
   LANDSCAPE = 'landscape'
 }
 
+export interface Breakpoint {
+  breakpoint: number;
+  pageMargin: number;
+}
+
+function breakpointComparator(b1: Breakpoint, b2: Breakpoint) {
+  return b1.breakpoint - b2.breakpoint;
+}
+
 const isAndroid: boolean = Platform.OS === 'android';
 const isIOS: boolean = Platform.OS === 'ios';
 const isWeb: boolean = Platform.OS === 'web';
@@ -15,6 +31,8 @@ let screenHeight: number = Dimensions.get('screen').height;
 let screenWidth: number = Dimensions.get('screen').width;
 let windowHeight: number = Dimensions.get('window').height;
 let windowWidth: number = Dimensions.get('window').width;
+let breakpoints: Breakpoint[];
+let defaultMargin = 0;
 
 //@ts-ignore
 isTablet = Platform.isPad || (getAspectRatio() < 1.6 && Math.max(screenWidth, screenHeight) >= 900);
@@ -112,6 +130,26 @@ const constants = {
   set isTablet(value: boolean) {
     isTablet = value;
   },
+  setBreakpoints(value: Breakpoint[], options?: {defaultMargin: number}) {
+    breakpoints = value.sort(breakpointComparator);
+    if (options) {
+      defaultMargin = options.defaultMargin;
+    }
+  },
+  getPageMargins(): number {
+    if (!breakpoints) {
+      LogService.warn('UILib breakpoints must be set via setBreakpoints before using getPageMargins');
+      return 0;
+    }
+
+    for (let i = breakpoints.length - 1; i >= 0; --i) {
+      if (screenWidth > breakpoints[i].breakpoint) {
+        return breakpoints[i].pageMargin;
+      }
+    }
+
+    return defaultMargin;
+  },
   get isWideScreen() {
     return isTablet || this.isLandscape;
   },
@@ -123,12 +161,14 @@ const constants = {
   },
   /* Devices */
   get isIphoneX() {
-    return isIOS &&
+    return (
+      isIOS &&
       //@ts-ignore
       !Platform.isPad &&
       //@ts-ignore
       !Platform.isTVOS &&
-      (screenHeight >= 812 || screenWidth >= 812);
+      (screenHeight >= 812 || screenWidth >= 812)
+    );
   },
   /* Orientation */
   dimensionsEventListener: undefined,
@@ -154,3 +194,10 @@ setStatusBarHeight();
 Dimensions.addEventListener('change', updateConstants);
 
 export default constants;
+
+// For tests
+export const _reset = () => {
+  // @ts-ignore
+  breakpoints = undefined;
+  defaultMargin = 0;
+};

src/commons/__tests__/constants.spec.ts

@@ -0,0 +1,94 @@
+import {default as Constants, updateConstants, _reset} from '../Constants';
+
+describe('Constants', () => {
+  beforeEach(() => {
+    _reset();
+  });
+
+  describe('Breakpoints and Page Margins', () => {
+    it('getPageMargins without init should return 0 and trigger a warn', () => {
+      const warn = console.warn;
+      console.warn = jest.fn();
+      expect(Constants.getPageMargins()).toBe(0);
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith('UILib breakpoints must be set via setBreakpoints before using getPageMargins');
+      console.warn = warn;
+    });
+
+    it('getPageMargins with one breakpoint', () => {
+      const original = {
+        screen: {width: Constants.screenWidth, height: Constants.screenHeight},
+        window: {width: Constants.windowWidth, height: Constants.windowHeight}
+      };
+      updateConstants({screen: {width: 50, height: 50}, window: {width: 50, height: 50}});
+      Constants.setBreakpoints([{breakpoint: 100, pageMargin: 5}]);
+      expect(Constants.getPageMargins()).toBe(0);
+      updateConstants(original);
+      expect(Constants.getPageMargins()).toBe(5);
+    });
+
+    it('getPageMargins with one breakpoint and a default', () => {
+      const original = {
+        screen: {width: Constants.screenWidth, height: Constants.screenHeight},
+        window: {width: Constants.windowWidth, height: Constants.windowHeight}
+      };
+      updateConstants({screen: {width: 50, height: 50}, window: {width: 50, height: 50}});
+      Constants.setBreakpoints([{breakpoint: 100, pageMargin: 5}], {defaultMargin: 3});
+      expect(Constants.getPageMargins()).toBe(3);
+      updateConstants(original);
+      expect(Constants.getPageMargins()).toBe(5);
+    });
+
+    it('getPageMargins with three breakpoints', () => {
+      const original = {
+        screen: {width: Constants.screenWidth, height: Constants.screenHeight},
+        window: {width: Constants.windowWidth, height: Constants.windowHeight}
+      };
+      updateConstants({screen: {width: 50, height: 50}, window: {width: 50, height: 50}});
+      Constants.setBreakpoints([
+        {breakpoint: 100, pageMargin: 5},
+        {breakpoint: 1000, pageMargin: 10}
+      ]);
+      expect(Constants.getPageMargins()).toBe(0);
+      updateConstants({screen: {width: 1200, height: 1200}, window: {width: 1200, height: 1200}});
+      expect(Constants.getPageMargins()).toBe(10);
+      updateConstants(original);
+      expect(Constants.getPageMargins()).toBe(5);
+    });
+
+    it('getPageMargins with three breakpoints and a default', () => {
+      const original = {
+        screen: {width: Constants.screenWidth, height: Constants.screenHeight},
+        window: {width: Constants.windowWidth, height: Constants.windowHeight}
+      };
+      updateConstants({screen: {width: 50, height: 50}, window: {width: 50, height: 50}});
+      Constants.setBreakpoints([
+        {breakpoint: 100, pageMargin: 5},
+        {breakpoint: 1000, pageMargin: 10}
+      ],
+      {defaultMargin: 3});
+      expect(Constants.getPageMargins()).toBe(3);
+      updateConstants({screen: {width: 1200, height: 1200}, window: {width: 1200, height: 1200}});
+      expect(Constants.getPageMargins()).toBe(10);
+      updateConstants(original);
+      expect(Constants.getPageMargins()).toBe(5);
+    });
+
+    it('setBreakpoints should arrange input in order', () => {
+      const original = {
+        screen: {width: Constants.screenWidth, height: Constants.screenHeight},
+        window: {width: Constants.windowWidth, height: Constants.windowHeight}
+      };
+      updateConstants({screen: {width: 50, height: 50}, window: {width: 50, height: 50}});
+      Constants.setBreakpoints([
+        {breakpoint: 1000, pageMargin: 10},
+        {breakpoint: 100, pageMargin: 5}
+      ]);
+      expect(Constants.getPageMargins()).toBe(0);
+      updateConstants({screen: {width: 1200, height: 1200}, window: {width: 1200, height: 1200}});
+      expect(Constants.getPageMargins()).toBe(10);
+      updateConstants(original);
+      expect(Constants.getPageMargins()).toBe(5);
+    });
+  });
+});